chore: collection actions

app/actions/definitions/collections.tsx

@@ -4,6 +4,7 @@ import {
   PadlockIcon,
   PlusIcon,
   StarredIcon,
+  TrashIcon,
   UnstarredIcon,
 } from "outline-icons";
 import * as React from "react";
@@ -12,6 +13,7 @@ import Collection from "~/models/Collection";
 import CollectionEdit from "~/scenes/CollectionEdit";
 import CollectionNew from "~/scenes/CollectionNew";
 import CollectionPermissions from "~/scenes/CollectionPermissions";
+import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
@@ -158,9 +160,44 @@ export const unstarCollection = createAction({
   },
 });
 
+export const deleteCollection = createAction({
+  name: ({ t }) => t("Delete"),
+  analyticsName: "Delete collection",
+  section: CollectionSection,
+  icon: <TrashIcon />,
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    return stores.policies.abilities(activeCollectionId).delete;
+  },
+  perform: ({ activeCollectionId, stores, t }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    const collection = stores.collections.get(activeCollectionId);
+    if (!collection) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      isCentered: true,
+      title: t("Delete collection"),
+      content: (
+        <CollectionDeleteDialog
+          collection={collection}
+          onSubmit={stores.dialogs.closeAllModals}
+        />
+      ),
+    });
+  },
+});
+
 export const rootCollectionActions = [
   openCollection,
   createCollection,
   starCollection,
   unstarCollection,
+  deleteCollection,
 ];

app/menus/CollectionMenu.tsx

@@ -1,13 +1,10 @@
 import { observer } from "mobx-react";
 import {
   NewDocumentIcon,
-  TrashIcon,
   ImportIcon,
   ExportIcon,
   AlphabeticalSortIcon,
   ManualSortIcon,
-  UnstarredIcon,
-  StarredIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -16,15 +13,17 @@ import { useMenuState, MenuButton, MenuButtonHTMLProps } from "reakit/Menu";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import { getEventFiles } from "@shared/utils/files";
 import Collection from "~/models/Collection";
-import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
 import ContextMenu, { Placement } from "~/components/ContextMenu";
 import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
 import Template from "~/components/ContextMenu/Template";
 import ExportDialog from "~/components/ExportDialog";
 import { actionToMenuItem } from "~/actions";
 import {
+  deleteCollection,
   editCollection,
   editCollectionPermissions,
+  starCollection,
+  unstarCollection,
 } from "~/actions/definitions/collections";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
@@ -139,37 +138,6 @@ function CollectionMenu({
     [collection, menu]
   );
 
-  const handleDelete = React.useCallback(() => {
-    dialogs.openModal({
-      isCentered: true,
-      title: t("Delete collection"),
-      content: (
-        <CollectionDeleteDialog
-          collection={collection}
-          onSubmit={dialogs.closeAllModals}
-        />
-      ),
-    });
-  }, [dialogs, t, collection]);
-
-  const handleStar = React.useCallback(
-    (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      collection.star();
-    },
-    [collection]
-  );
-
-  const handleUnstar = React.useCallback(
-    (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      ev.stopPropagation();
-      collection.unstar();
-    },
-    [collection]
-  );
-
   const context = useActionContext({
     isContextMenu: true,
     activeCollectionId: collection.id,
@@ -180,20 +148,8 @@ function CollectionMenu({
   const canUserInTeam = usePolicy(team);
   const items: MenuItem[] = React.useMemo(
     () => [
-      {
-        type: "button",
-        title: t("Unstar"),
-        onClick: handleUnstar,
-        visible: collection.isStarred && !!can.unstar,
-        icon: <UnstarredIcon />,
-      },
-      {
-        type: "button",
-        title: t("Star"),
-        onClick: handleStar,
-        visible: !collection.isStarred && !!can.star,
-        icon: <StarredIcon />,
-      },
+      actionToMenuItem(starCollection, context),
+      actionToMenuItem(unstarCollection, context),
       {
         type: "separator",
       },
@@ -246,32 +202,20 @@ function CollectionMenu({
       {
         type: "separator",
       },
-      {
-        type: "button",
-        title: `${t("Delete")}…`,
-        dangerous: true,
-        visible: !!(collection && can.delete),
-        onClick: handleDelete,
-        icon: <TrashIcon />,
-      },
+      actionToMenuItem(deleteCollection, context),
     ],
     [
       t,
-      handleUnstar,
       collection,
-      can.unstar,
-      can.star,
       can.createDocument,
       can.update,
-      can.delete,
-      handleStar,
+      can.export,
       handleNewDocument,
       handleImportDocument,
       context,
       alphabeticalSort,
       canUserInTeam.createExport,
       handleExport,
-      handleDelete,
       handleChangeSort,
     ]
   );

shared/i18n/locales/en_US/translation.json

@@ -8,6 +8,8 @@
   "Collection permissions": "Collection permissions",
   "Star": "Star",
   "Unstar": "Unstar",
+  "Delete": "Delete",
+  "Delete collection": "Delete collection",
   "Delete IndexedDB cache": "Delete IndexedDB cache",
   "IndexedDB cache deleted": "IndexedDB cache deleted",
   "Developer": "Developer",
@@ -48,7 +50,6 @@
   "Move {{ documentType }}": "Move {{ documentType }}",
   "Archive": "Archive",
   "Document archived": "Document archived",
-  "Delete": "Delete",
   "Delete {{ documentName }}": "Delete {{ documentName }}",
   "Permanently delete": "Permanently delete",
   "Permanently delete {{ documentName }}": "Permanently delete {{ documentName }}",
@@ -330,7 +331,6 @@
   "Group member options": "Group member options",
   "Remove": "Remove",
   "Export collection": "Export collection",
-  "Delete collection": "Delete collection",
   "Sort in sidebar": "Sort in sidebar",
   "Alphabetical sort": "Alphabetical sort",
   "Manual sort": "Manual sort",