fix: bulk actions for HCMS and Page Builder (#3632)

webiny · Oct 25, 2023 · 73ee250 · 73ee250
1 parent ce35610
commit 73ee250
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 47 deletions.
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionDelete.tsx
@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/filled/delete.svg";
+import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete.svg";
 import { useRecords } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useCms, useContentEntry } from "~/admin/hooks";
+import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
 
-const ActionDelete = () => {
+export const ActionDelete = observer(() => {
     const { deleteEntry } = useCms();
     const { contentModel } = useContentEntry();
     const { removeRecordFromCache } = useRecords();
@@ -16,8 +17,7 @@ const ActionDelete = () => {
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
     const entriesLabel = useMemo(() => {
-        const count = worker.items.length || 0;
-        return `${count} ${count === 1 ? "entry" : "entries"}`;
+        return getEntriesLabel(worker.items.length);
     }, [worker.items.length]);
 
     const openDeleteEntriesDialog = () =>
@@ -61,7 +61,7 @@ const ActionDelete = () => {
                 showResultsDialog({
                     results: worker.results,
                     title: "Delete entries",
-                    message: "Operation completed, here below you find the complete report:"
+                    message: "Finished deleting entries! See full report below:"
                 });
             }
         });
@@ -74,6 +74,4 @@ const ActionDelete = () => {
             tooltipPlacement={"bottom"}
         />
     );
-};
-
-export default observer(ActionDelete);
+});
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionMove.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionMove.tsx
@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from "react";
-import { ReactComponent as MoveIcon } from "@material-design-icons/svg/filled/drive_file_move.svg";
+import { ReactComponent as MoveIcon } from "@material-design-icons/svg/outlined/drive_file_move.svg";
 import { useRecords, useMoveToFolderDialog, useNavigateFolder } from "@webiny/app-aco";
 import { FolderItem } from "@webiny/app-aco/types";
 import { observer } from "mobx-react-lite";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { ROOT_FOLDER } from "~/admin/constants";
+import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
 
-const ActionMove = () => {
+export const ActionMove = observer(() => {
     const { moveRecord } = useRecords();
     const { currentFolderId } = useNavigateFolder();
 
@@ -17,8 +18,7 @@ const ActionMove = () => {
     const { showDialog: showMoveDialog } = useMoveToFolderDialog();
 
     const entriesLabel = useMemo(() => {
-        const count = worker.items.length || 0;
-        return `${count} ${count === 1 ? "entry" : "entries"}`;
+        return getEntriesLabel(worker.items.length);
     }, [worker.items.length]);
 
     const openWorkerDialog = useCallback(
@@ -54,7 +54,7 @@ const ActionMove = () => {
                     showResultsDialog({
                         results: worker.results,
                         title: "Move entries",
-                        message: "Operation completed, here below you find the complete report:"
+                        message: "Finished moving entries! See full report below:"
                     });
                 }
             });
@@ -82,6 +82,4 @@ const ActionMove = () => {
             tooltipPlacement={"bottom"}
         />
     );
-};
-
-export default observer(ActionMove);
+});
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionPublish.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionPublish.tsx
@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { ReactComponent as PublishIcon } from "@material-design-icons/svg/filled/publish.svg";
+import { ReactComponent as PublishIcon } from "@material-design-icons/svg/outlined/publish.svg";
 import { useRecords } from "@webiny/app-aco";
 import { observer } from "mobx-react-lite";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { usePermission, useCms, useContentEntry } from "~/admin/hooks";
+import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
 
-const ActionPublish = () => {
+export const ActionPublish = observer(() => {
     const { canPublish } = usePermission();
     const { publishEntryRevision } = useCms();
     const { contentModel } = useContentEntry();
@@ -17,8 +18,7 @@ const ActionPublish = () => {
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
     const entriesLabel = useMemo(() => {
-        const count = worker.items.length || 0;
-        return `${count} ${count === 1 ? "entry" : "entries"}`;
+        return getEntriesLabel(worker.items.length);
     }, [worker.items.length]);
 
     const openPublishEntriesDialog = () =>
@@ -62,12 +62,13 @@ const ActionPublish = () => {
                 showResultsDialog({
                     results: worker.results,
                     title: "Publish entries",
-                    message: "Operation completed, here below you find the complete report:"
+                    message: "Finished publishing entries! See full report below:"
                 });
             }
         });
 
     if (!canPublish("cms.contentEntry")) {
+        console.log("You don't have permissions to publish entries.");
         return null;
     }
 
@@ -79,6 +80,4 @@ const ActionPublish = () => {
             tooltipPlacement={"bottom"}
         />
     );
-};
-
-export default observer(ActionPublish);
+});
diff --git a/...ages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionUnpublish.tsx b/...ages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/ActionUnpublish.tsx
@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { ReactComponent as UnpublishIcon } from "@material-design-icons/svg/filled/settings_backup_restore.svg";
+import { ReactComponent as UnpublishIcon } from "@material-design-icons/svg/outlined/settings_backup_restore.svg";
 import { observer } from "mobx-react-lite";
 import { useRecords } from "@webiny/app-aco";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useCms, useContentEntry, usePermission } from "~/admin/hooks";
+import { getEntriesLabel } from "~/admin/components/ContentEntries/BulkActions/BulkActions";
 
-const ActionUnpublish = () => {
+export const ActionUnpublish = observer(() => {
     const { canUnpublish } = usePermission();
     const { unpublishEntryRevision } = useCms();
     const { contentModel } = useContentEntry();
@@ -17,8 +18,7 @@ const ActionUnpublish = () => {
     const { showConfirmationDialog, showResultsDialog } = useDialog();
 
     const entriesLabel = useMemo(() => {
-        const count = worker.items.length || 0;
-        return `${count} ${count === 1 ? "entry" : "entries"}`;
+        return getEntriesLabel(worker.items.length);
     }, [worker.items.length]);
 
     const openUnpublishEntriesDialog = () =>
@@ -62,12 +62,13 @@ const ActionUnpublish = () => {
                 showResultsDialog({
                     results: worker.results,
                     title: "Unpublish entries",
-                    message: "Operation completed, here below you find the complete report:"
+                    message: "Finished unpublishing entries! See full report below:"
                 });
             }
         });
 
     if (!canUnpublish("cms.contentEntry")) {
+        console.log("You don't have permissions to unpublish entries.");
         return null;
     }
 
@@ -79,6 +80,4 @@ const ActionUnpublish = () => {
             tooltipPlacement={"bottom"}
         />
     );
-};
-
-export default observer(ActionUnpublish);
+});
diff --git a/...nts/ContentEntries/BulkActions/styles.tsx → ...ntries/BulkActions/BulkActions.styled.tsx b/...nts/ContentEntries/BulkActions/styles.tsx → ...ntries/BulkActions/BulkActions.styled.tsx
diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/BulkActions.tsx
@@ -6,12 +6,16 @@ import { IconButton } from "@webiny/ui/Button";
 import { useContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useContentEntriesList } from "~/admin/views/contentEntries/hooks";
 
-import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./styles";
+import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./BulkActions.styled";
 import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
 
 const t = i18n.ns("app-headless-cms/admin/content-entries/bulk-actions");
 
+export const getEntriesLabel = (count = 0): string => {
+    return `${count} ${count === 1 ? "entry" : "entries"}`;
+};
+
 export const BulkActions = () => {
     const { browser } = useContentEntryListConfig();
     const { selected, setSelected } = useContentEntriesList();

diff --git a/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/index.tsx b/packages/app-headless-cms/src/admin/components/ContentEntries/BulkActions/index.tsx
@@ -1,5 +1,5 @@
-export { default as ActionDelete } from "./ActionDelete";
-export { default as ActionMove } from "./ActionMove";
-export { default as ActionPublish } from "./ActionPublish";
-export { default as ActionUnpublish } from "./ActionUnpublish";
+export { ActionDelete } from "./ActionDelete";
+export { ActionMove } from "./ActionMove";
+export { ActionPublish } from "./ActionPublish";
+export { ActionUnpublish } from "./ActionUnpublish";
 export * from "./BulkActions";
diff --git a/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/BulkAction.tsx b/packages/app-headless-cms/src/admin/config/contentEntries/list/Browser/BulkAction.tsx
@@ -59,7 +59,7 @@ const useWorker = () => {
 
     useEffect(() => {
         worker.items = selected;
-    }, [selected]);
+    }, [selected.length]);
 
     // Reset selected items in both useContentEntriesList and Worker
     const resetItems = useCallback(() => {
@@ -68,7 +68,7 @@ const useWorker = () => {
     }, []);
 
     return {
-        items: worker.items,
+        items: selected,
         process: (callback: (items: CmsContentEntry[]) => void) => worker.process(callback),
         processInSeries: async (
             callback: ({

diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionDelete.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionDelete.tsx
@@ -74,13 +74,13 @@ export const ActionDelete = observer(() => {
                 showResultsDialog({
                     results: worker.results,
                     title: "Delete pages",
-                    message: "Operation completed, here below you find the complete report:"
+                    message: "Finished deleting pages! See full report below:"
                 });
             }
         });
 
     if (!canDeleteAll) {
-        console.log("Does not have permission to delete one or more pages.");
+        console.log("You don't have permissions to delete pages.");
         return null;
     }
 

diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionMove.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionMove.tsx
@@ -54,7 +54,7 @@ export const ActionMove = observer(() => {
                     showResultsDialog({
                         results: worker.results,
                         title: "Move pages",
-                        message: "Operation completed, here below you find the complete report:"
+                        message: "Finished moving pages! See full report below:"
                     });
                 }
             });

diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionPublish.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionPublish.tsx
@@ -63,12 +63,13 @@ export const ActionPublish = observer(() => {
                 showResultsDialog({
                     results: worker.results,
                     title: "Publish pages",
-                    message: "Operation completed, here below you find the complete report:"
+                    message: "Finished publishing pages! See full report below:"
                 });
             }
         });
 
     if (!canPublish()) {
+        console.log("You don't have permissions to publish pages.");
         return null;
     }
 

diff --git a/packages/app-page-builder/src/admin/components/BulkActions/ActionUnpublish.tsx b/packages/app-page-builder/src/admin/components/BulkActions/ActionUnpublish.tsx
@@ -63,12 +63,13 @@ export const ActionUnpublish = observer(() => {
                 showResultsDialog({
                     results: worker.results,
                     title: "Unpublish pages",
-                    message: "Operation completed, here below you find the complete report:"
+                    message: "Finished unpublishing pages! See full report below:"
                 });
             }
         });
 
     if (!canUnpublish()) {
+        console.log("You don't have permissions to unpublish pages.");
         return null;
     }
 

diff --git a/...c/admin/components/BulkActions/styles.tsx → ...onents/BulkActions/BulkActions.styled.tsx b/...c/admin/components/BulkActions/styles.tsx → ...onents/BulkActions/BulkActions.styled.tsx
diff --git a/packages/app-page-builder/src/admin/components/BulkActions/BulkActions.tsx b/packages/app-page-builder/src/admin/components/BulkActions/BulkActions.tsx
@@ -6,7 +6,7 @@ import { IconButton } from "@webiny/ui/Button";
 import { usePageListConfig } from "~/admin/config/pages";
 import { usePagesList } from "~/admin/views/Pages/hooks/usePagesList";
 
-import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./styles";
+import { BulkActionsContainer, BulkActionsInner, ButtonsContainer } from "./BulkActions.styled";
 import { Typography } from "@webiny/ui/Typography";
 import { i18n } from "@webiny/app/i18n";
 

diff --git a/packages/app-page-builder/src/admin/config/pages/list/Browser/BulkAction.tsx b/packages/app-page-builder/src/admin/config/pages/list/Browser/BulkAction.tsx
@@ -52,7 +52,7 @@ const useWorker = () => {
 
     useEffect(() => {
         worker.items = selected;
-    }, [selected]);
+    }, [selected.length]);
 
     // Reset selected items in both usePagesList and Worker
     const resetItems = useCallback(() => {
@@ -61,7 +61,7 @@ const useWorker = () => {
     }, []);
 
     return {
-        items: worker.items,
+        items: selected,
         process: (callback: (items: PbPageDataItem[]) => void) => worker.process(callback),
         processInSeries: async (
             callback: ({ item, allItems, report }: CallbackParams<PbPageDataItem>) => Promise<void>,