From 1f097258f43d5818939619c765e32ebb3a78d696 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Mon, 27 May 2024 09:34:34 -0400
Subject: [PATCH] Enable new collection permissions UI

---
 app/actions/definitions/collections.tsx       | 33 ++++++++++++++-----
 .../Sharing/Collection/SharePopover.tsx       |  3 --
 .../Collection/components/ShareButton.tsx     |  1 -
 app/utils/FeatureFlags.ts                     |  7 +++-
 shared/i18n/locales/en_US/translation.json    |  1 +
 5 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/app/actions/definitions/collections.tsx b/app/actions/definitions/collections.tsx
index ab083c275..2e567e14f 100644
--- a/app/actions/definitions/collections.tsx
+++ b/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} />,
+      });
+    }
   },
 });
 
diff --git a/app/components/Sharing/Collection/SharePopover.tsx b/app/components/Sharing/Collection/SharePopover.tsx
index d3ea537ee..b53915fbd 100644
--- a/app/components/Sharing/Collection/SharePopover.tsx
+++ b/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. */
diff --git a/app/scenes/Collection/components/ShareButton.tsx b/app/scenes/Collection/components/ShareButton.tsx
index 705dc99c7..f4767e611 100644
--- a/app/scenes/Collection/components/ShareButton.tsx
+++ b/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}
         />
diff --git a/app/utils/FeatureFlags.ts b/app/utils/FeatureFlags.ts
index 614b2c88e..75e51bf81 100644
--- a/app/utils/FeatureFlags.ts
+++ b/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) {
diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json
index b93e77472..bfd23c2e3 100644
--- a/shared/i18n/locales/en_US/translation.json
+++ b/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",