Enable new collection permissions UI

app/actions/definitions/collections.tsx

@@ -16,6 +16,7 @@ import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
+import SharePopover from "~/components/Sharing/Collection/SharePopover";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
@@ -100,18 +101,34 @@ export const editCollectionPermissions = createAction({
   icon: <PadlockIcon />,
   visible: ({ stores, activeCollectionId }) =>
     !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update &&
-    !FeatureFlags.isEnabled(Feature.newCollectionSharing),
-  perform: ({ t, activeCollectionId }) => {
+    stores.policies.abilities(activeCollectionId).update,
+  perform: ({ t, stores, activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
+    const collection = stores.collections.get(activeCollectionId);
+    if (!collection) {
+      return;
+    }
 
-    stores.dialogs.openModal({
-      title: t("Collection permissions"),
-      fullscreen: true,
-      content: <CollectionPermissions collectionId={activeCollectionId} />,
-    });
+    if (FeatureFlags.isEnabled(Feature.newCollectionSharing)) {
+      stores.dialogs.openModal({
+        title: t("Share this collection"),
+        content: (
+          <SharePopover
+            collection={collection}
+            onRequestClose={stores.dialogs.closeAllModals}
+            visible
+          />
+        ),
+      });
+    } else {
+      stores.dialogs.openModal({
+        title: t("Collection permissions"),
+        fullscreen: true,
+        content: <CollectionPermissions collectionId={activeCollectionId} />,
+      });
+    }
   },
 });
 

app/components/Sharing/Collection/SharePopover.tsx

@@ -10,7 +10,6 @@ import Squircle from "@shared/components/Squircle";
 import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
 import Group from "~/models/Group";
-import Share from "~/models/Share";
 import User from "~/models/User";
 import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
 import InputSelectPermission from "~/components/InputSelectPermission";
@@ -35,8 +34,6 @@ import CollectionMemberList from "./CollectionMemberList";
 type Props = {
   /** The collection to share. */
   collection: Collection;
-  /** The existing share model, if any. */
-  share: Share | null | undefined;
   /** Callback fired when the popover requests to be closed. */
   onRequestClose: () => void;
   /** Whether the popover is visible. */

app/scenes/Collection/components/ShareButton.tsx

@@ -48,7 +48,6 @@ function ShareButton({ collection }: Props) {
       <Popover {...popover} aria-label={t("Share")} width={400}>
         <SharePopover
           collection={collection}
-          share={share}
           onRequestClose={popover.hide}
           visible={popover.visible}
         />

app/utils/FeatureFlags.ts

@@ -6,6 +6,11 @@ export enum Feature {
   newCollectionSharing = "newCollectionSharing",
 }
 
+/** Default values for feature flags */
+const FeatureDefaults: Record<Feature, boolean> = {
+  [Feature.newCollectionSharing]: true,
+};
+
 /**
  * A simple feature flagging system that stores flags in browser storage.
  */
@@ -23,7 +28,7 @@ export class FeatureFlags {
       this.initalized = true;
     }
 
-    return this.cache.has(flag);
+    return this.cache.has(flag) ?? FeatureDefaults[flag];
   }
 
   public static enable(flag: Feature) {

shared/i18n/locales/en_US/translation.json

@@ -6,6 +6,7 @@
   "Edit collection": "Edit collection",
   "Permissions": "Permissions",
   "Collection permissions": "Collection permissions",
+  "Share this collection": "Share this collection",
   "Search in collection": "Search in collection",
   "Star": "Star",
   "Unstar": "Unstar",