Update collection permissions UI (#6917)

2024-05-16 19:45:09 -04:00
parent 728c68be58
commit cae013837b
34 changed files with 1088 additions and 287 deletions
--- a/app/scenes/Collection/components/MembershipPreview.tsx
+++ b/app/scenes/Collection/components/MembershipPreview.tsx
@@ -0,0 +1,117 @@
+import sortBy from "lodash/sortBy";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { PAGINATION_SYMBOL } from "~/stores/base/Store";
+import Collection from "~/models/Collection";
+import Avatar from "~/components/Avatar";
+import Facepile from "~/components/Facepile";
+import Fade from "~/components/Fade";
+import NudeButton from "~/components/NudeButton";
+import { editCollectionPermissions } from "~/actions/definitions/collections";
+import useActionContext from "~/hooks/useActionContext";
+import useMobile from "~/hooks/useMobile";
+import useStores from "~/hooks/useStores";
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
+
+type Props = {
+  collection: Collection;
+  limit?: number;
+};
+
+const MembershipPreview = ({ collection, limit = 8 }: Props) => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [usersCount, setUsersCount] = React.useState(0);
+  const [groupsCount, setGroupsCount] = React.useState(0);
+  const { t } = useTranslation();
+  const { memberships, collectionGroupMemberships, users } = useStores();
+  const collectionUsers = users.inCollection(collection.id);
+  const context = useActionContext();
+  const isMobile = useMobile();
+
+  React.useEffect(() => {
+    const fetchData = async () => {
+      if (collection.permission || isMobile) {
+        return;
+      }
+      setIsLoading(true);
+
+      try {
+        const options = {
+          id: collection.id,
+          limit,
+        };
+        const [users, groups] = await Promise.all([
+          memberships.fetchPage(options),
+          collectionGroupMemberships.fetchPage(options),
+        ]);
+        setUsersCount(users[PAGINATION_SYMBOL].total);
+        setGroupsCount(groups[PAGINATION_SYMBOL].total);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    void fetchData();
+  }, [
+    isMobile,
+    collection.permission,
+    collection.id,
+    collectionGroupMemberships,
+    memberships,
+    limit,
+  ]);
+
+  if (isLoading || collection.permission || isMobile) {
+    return null;
+  }
+
+  const overflow = usersCount - groupsCount - collectionUsers.length;
+
+  return (
+    <NudeButton
+      context={context}
+      action={
+        FeatureFlags.isEnabled(Feature.newCollectionSharing)
+          ? undefined
+          : editCollectionPermissions
+      }
+      tooltip={{
+        content:
+          usersCount > 0
+            ? groupsCount > 0
+              ? groupsCount > 1
+                ? t(
+                    `{{ usersCount }} users and {{ groupsCount }} groups with access`,
+                    { usersCount, groupsCount, count: usersCount }
+                  )
+                : t(`{{ usersCount }} users and a group have access`, {
+                    usersCount,
+                    count: usersCount,
+                  })
+              : t(`{{ usersCount }} users with access`, {
+                  usersCount,
+                  count: usersCount,
+                })
+            : t(`{{ groupsCount }} groups with access`, {
+                groupsCount,
+                count: groupsCount,
+              }),
+        delay: 250,
+      }}
+      width="auto"
+      height="auto"
+    >
+      <Fade>
+        <Facepile
+          users={sortBy(collectionUsers, "lastActiveAt")}
+          overflow={overflow}
+          limit={limit}
+          renderAvatar={(user) => <Avatar model={user} size={32} />}
+        />
+      </Fade>
+    </NudeButton>
+  );
+};
+
+export default observer(MembershipPreview);