diff --git a/app/actions/definitions/collections.tsx b/app/actions/definitions/collections.tsx index 697364032..6733ccecc 100644 --- a/app/actions/definitions/collections.tsx +++ b/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: , + 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: ( + + ), + }); + }, +}); + export const rootCollectionActions = [ openCollection, createCollection, starCollection, unstarCollection, + deleteCollection, ]; diff --git a/app/menus/CollectionMenu.tsx b/app/menus/CollectionMenu.tsx index 023e90717..fc5a79ce4 100644 --- a/app/menus/CollectionMenu.tsx +++ b/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: ( - - ), - }); - }, [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: , - }, - { - type: "button", - title: t("Star"), - onClick: handleStar, - visible: !collection.isStarred && !!can.star, - icon: , - }, + 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: , - }, + 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, ] ); diff --git a/shared/i18n/locales/en_US/translation.json b/shared/i18n/locales/en_US/translation.json index b45852345..36de57089 100644 --- a/shared/i18n/locales/en_US/translation.json +++ b/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",