Update collection permissions UI (#6917)

app/scenes/Collection/components/Empty.tsx

@@ -11,6 +11,7 @@ import Text from "~/components/Text";
 import { editCollectionPermissions } from "~/actions/definitions/collections";
 import useActionContext from "~/hooks/useActionContext";
 import usePolicy from "~/hooks/usePolicy";
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
 import { newDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -48,14 +49,16 @@ function EmptyCollection({ collection }: Props) {
               {t("Create a document")}
             </Button>
           </Link>
-          <Button
-            action={editCollectionPermissions}
-            context={context}
-            hideOnActionDisabled
-            neutral
-          >
-            {t("Manage permissions")}…
-          </Button>
+          {FeatureFlags.isEnabled(Feature.newCollectionSharing) ? null : (
+            <Button
+              action={editCollectionPermissions}
+              context={context}
+              hideOnActionDisabled
+              neutral
+            >
+              {t("Manage permissions")}…
+            </Button>
+          )}
         </Empty>
       )}
     </Centered>

app/scenes/Collection/components/MembershipPreview.tsx

@@ -2,10 +2,8 @@ import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
 import { PAGINATION_SYMBOL } from "~/stores/base/Store";
 import Collection from "~/models/Collection";
-import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Facepile from "~/components/Facepile";
 import Fade from "~/components/Fade";
@@ -14,6 +12,7 @@ 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;
@@ -72,7 +71,11 @@ const MembershipPreview = ({ collection, limit = 8 }: Props) => {
   return (
     <NudeButton
       context={context}
-      action={editCollectionPermissions}
+      action={
+        FeatureFlags.isEnabled(Feature.newCollectionSharing)
+          ? undefined
+          : editCollectionPermissions
+      }
       tooltip={{
         content:
           usersCount > 0
@@ -104,16 +107,11 @@ const MembershipPreview = ({ collection, limit = 8 }: Props) => {
           users={sortBy(collectionUsers, "lastActiveAt")}
           overflow={overflow}
           limit={limit}
-          renderAvatar={(user) => <StyledAvatar model={user} size={32} />}
+          renderAvatar={(user) => <Avatar model={user} size={32} />}
         />
       </Fade>
     </NudeButton>
   );
 };
 
-const StyledAvatar = styled(Avatar)<{ model: User }>`
-  transition: opacity 250ms ease-in-out;
-  opacity: ${(props) => (props.model.isRecentlyActive ? 1 : 0.5)};
-`;
-
 export default observer(MembershipPreview);

app/scenes/Collection/components/ShareButton.tsx

@@ -0,0 +1,60 @@
+import { observer } from "mobx-react";
+import { GlobeIcon, PadlockIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import Collection from "~/models/Collection";
+import Button from "~/components/Button";
+import Popover from "~/components/Popover";
+import SharePopover from "~/components/Sharing/Collection/SharePopover";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  /** Collection being shared */
+  collection: Collection;
+};
+
+function ShareButton({ collection }: Props) {
+  const { t } = useTranslation();
+  const { shares } = useStores();
+  const team = useCurrentTeam();
+  const share = shares.getByCollectionId(collection.id);
+  const isPubliclyShared =
+    team.sharing !== false && collection?.sharing !== false && share?.published;
+
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom-end",
+    unstable_fixed: true,
+  });
+
+  const icon = isPubliclyShared ? (
+    <GlobeIcon />
+  ) : collection.permission ? undefined : (
+    <PadlockIcon />
+  );
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <Button icon={icon} neutral {...props}>
+            {t("Share")}
+          </Button>
+        )}
+      </PopoverDisclosure>
+
+      <Popover {...popover} aria-label={t("Share")} width={400}>
+        <SharePopover
+          collection={collection}
+          share={share}
+          onRequestClose={popover.hide}
+          visible={popover.visible}
+        />
+      </Popover>
+    </>
+  );
+}
+
+export default observer(ShareButton);

app/scenes/Collection/index.tsx

@@ -15,6 +15,7 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Search from "~/scenes/Search";
+import { Action } from "~/components/Actions";
 import Badge from "~/components/Badge";
 import CenteredContent from "~/components/CenteredContent";
 import CollectionDescription from "~/components/CollectionDescription";
@@ -34,11 +35,13 @@ import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useLastVisitedPath from "~/hooks/useLastVisitedPath";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
 import { collectionPath, updateCollectionPath } from "~/utils/routeHelpers";
-import Actions from "./Collection/Actions";
-import DropToImport from "./Collection/DropToImport";
-import Empty from "./Collection/Empty";
-import MembershipPreview from "./Collection/MembershipPreview";
+import Actions from "./components/Actions";
+import DropToImport from "./components/DropToImport";
+import Empty from "./components/Empty";
+import MembershipPreview from "./components/MembershipPreview";
+import ShareButton from "./components/ShareButton";
 
 function CollectionScene() {
   const params = useParams<{ id?: string }>();
@@ -142,6 +145,10 @@ function CollectionScene() {
       actions={
         <>
           <MembershipPreview collection={collection} />
+          <Action>
+            {FeatureFlags.isEnabled(Feature.newCollectionSharing) &&
+              can.update && <ShareButton collection={collection} />}
+          </Action>
           <Actions collection={collection} />
         </>
       }
@@ -159,16 +166,17 @@ function CollectionScene() {
               <HeadingWithIcon>
                 <HeadingIcon collection={collection} size={40} expanded />
                 {collection.name}
-                {collection.isPrivate && (
-                  <Tooltip
-                    content={t(
-                      "This collection is only visible to those given access"
-                    )}
-                    placement="bottom"
-                  >
-                    <Badge>{t("Private")}</Badge>
-                  </Tooltip>
-                )}
+                {collection.isPrivate &&
+                  !FeatureFlags.isEnabled(Feature.newCollectionSharing) && (
+                    <Tooltip
+                      content={t(
+                        "This collection is only visible to those given access"
+                      )}
+                      placement="bottom"
+                    >
+                      <Badge>{t("Private")}</Badge>
+                    </Tooltip>
+                  )}
               </HeadingWithIcon>
 
               <PinnedDocuments

app/scenes/Document/components/ShareButton.tsx

@@ -6,11 +6,12 @@ import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
 import Button from "~/components/Button";
 import Popover from "~/components/Popover";
-import SharePopover from "~/components/Sharing";
+import SharePopover from "~/components/Sharing/Document";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
 
 type Props = {
+  /** Document being shared */
   document: Document;
 };
 
@@ -32,15 +33,13 @@ function ShareButton({ document }: Props) {
     unstable_fixed: true,
   });
 
+  const icon = isPubliclyShared ? <GlobeIcon /> : undefined;
+
   return (
     <>
       <PopoverDisclosure {...popover}>
         {(props) => (
-          <Button
-            icon={isPubliclyShared ? <GlobeIcon /> : undefined}
-            neutral
-            {...props}
-          >
+          <Button icon={icon} neutral {...props}>
             {t("Share")} {domain && <>&middot; {domain}</>}
           </Button>
         )}