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} />,
+      });
+    }
   },
 });