feat: blocks list page changes (#2818)

* feat: blocks list page changes * feat: add icons to modal and block categories page
webiny · Dec 2, 2022 · 9e54929 · 9e54929
1 parent 482e3f6
commit 9e54929
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 21 deletions.
diff --git a/packages/app-page-builder/src/admin/utils/createBlockCategoryPlugin.tsx b/packages/app-page-builder/src/admin/utils/createBlockCategoryPlugin.tsx
@@ -8,7 +8,7 @@ interface IconProps {
     category: PbBlockCategory;
 }
 
-const Icon: React.FC<IconProps> = ({ category }) => {
+export const Icon: React.FC<IconProps> = ({ category }) => {
     return (
         <FontAwesomeIcon
             style={{ color: "var(--mdc-theme-text-secondary-on-background)", fontSize: "24px" }}

diff --git a/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesDataList.tsx b/packages/app-page-builder/src/admin/views/BlockCategories/BlockCategoriesDataList.tsx
@@ -13,6 +13,7 @@ import {
     DataListModalOverlayAction,
     ScrollList,
     ListItem,
+    ListItemGraphic,
     ListItemText,
     ListItemMeta,
     ListActions,
@@ -28,6 +29,7 @@ import SearchUI from "@webiny/app-admin/components/SearchUI";
 import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
 import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { PageBuilderSecurityPermission, PbBlockCategory } from "~/types";
+import { Icon } from "~/admin/utils/createBlockCategoryPlugin";
 
 const t = i18n.ns("app-page-builder/admin/block-categories/data-list");
 
@@ -205,12 +207,17 @@ const PageBuilderBlockCategoriesDataList = ({
             {({ data }: { data: PbBlockCategory[] }) => (
                 <ScrollList data-testid="default-data-list">
                     {data.map(item => (
-                        <ListItem key={item.slug} selected={item.slug === slug}>
-                            <ListItemText
-                                onClick={() =>
-                                    history.push(`/page-builder/block-categories?slug=${item.slug}`)
-                                }
-                            >
+                        <ListItem
+                            key={item.slug}
+                            selected={item.slug === slug}
+                            onClick={() =>
+                                history.push(`/page-builder/block-categories?slug=${item.slug}`)
+                            }
+                        >
+                            <ListItemGraphic>
+                                <Icon category={item} />
+                            </ListItemGraphic>
+                            <ListItemText>
                                 {item.name}
                                 <ListItemTextSecondary>
                                     {item.description || t`No description provided.`}

diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx
@@ -14,6 +14,7 @@ import {
     ScrollList,
     List,
     ListItem,
+    ListItemGraphic,
     ListItemText,
     ListItemTextPrimary,
     ListItemTextSecondary
@@ -27,6 +28,7 @@ import { ButtonDefault, ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { ReactComponent as FilterIcon } from "@webiny/app-admin/assets/icons/filter-24px.svg";
 import { ReactComponent as AddIcon } from "@webiny/app-admin/assets/icons/add-18px.svg";
+import { Icon } from "~/admin/utils/createBlockCategoryPlugin";
 
 import { PbBlockCategory, PbPageBlock } from "~/types";
 import { LIST_PAGE_BLOCKS_AND_CATEGORIES, LIST_PAGE_BLOCKS, CREATE_PAGE_BLOCK } from "./graphql";
@@ -193,6 +195,14 @@ const BlocksByCategoriesDataList = ({ canCreate }: PageBuilderBlocksByCategories
         }
     };
 
+    const handleNewBlockClick = useCallback(() => {
+        if (selectedBlocksCategory) {
+            onCreatePageBlock(selectedBlocksCategory);
+        } else {
+            setIsNewPageBlockDialogOpen(true);
+        }
+    }, [selectedBlocksCategory]);
+
     return (
         <>
             <DataList
@@ -201,7 +211,7 @@ const BlocksByCategoriesDataList = ({ canCreate }: PageBuilderBlocksByCategories
                 data={categoryList}
                 actions={
                     canCreate ? (
-                        <ButtonSecondary onClick={() => setIsNewPageBlockDialogOpen(true)}>
+                        <ButtonSecondary onClick={handleNewBlockClick}>
                             <ButtonIcon icon={<AddIcon />} /> {t`New Block`}
                         </ButtonSecondary>
                     ) : null
@@ -237,14 +247,16 @@ const BlocksByCategoriesDataList = ({ canCreate }: PageBuilderBlocksByCategories
                                 <ListItem
                                     key={item.slug}
                                     selected={item.slug === selectedBlocksCategory}
+                                    onClick={() =>
+                                        history.push(
+                                            `/page-builder/page-blocks?category=${item.slug}`
+                                        )
+                                    }
                                 >
-                                    <ListItemText
-                                        onClick={() =>
-                                            history.push(
-                                                `/page-builder/page-blocks?category=${item.slug}`
-                                            )
-                                        }
-                                    >
+                                    <ListItemGraphic>
+                                        <Icon category={item} />
+                                    </ListItemGraphic>
+                                    <ListItemText>
                                         {item.name}
                                         <ListItemTextSecondary>{`${numberOfBlocks} ${
                                             numberOfBlocks === 1 ? "block" : "blocks"
@@ -279,6 +291,9 @@ const BlocksByCategoriesDataList = ({ canCreate }: PageBuilderBlocksByCategories
                                         key={item.slug}
                                         onClick={() => onCreatePageBlock(item.slug)}
                                     >
+                                        <ListItemGraphic>
+                                            <Icon category={item} />
+                                        </ListItemGraphic>
                                         <ListItemText>
                                             <ListItemTextPrimary>{item.name}</ListItemTextPrimary>
                                             <ListItemTextSecondary>

diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocks.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocks.tsx
@@ -64,7 +64,7 @@ const PageBlocks: React.FC = () => {
                 <BlocksByCategoriesDataList canCreate={canCreate} />
             </LeftPanel>
             <RightPanel>
-                <PageBlocksDataList canEdit={canEdit} canDelete={canDelete} />
+                <PageBlocksDataList canCreate={canCreate} canEdit={canEdit} canDelete={canDelete} />
             </RightPanel>
         </SplitView>
     );

diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/PageBlocksDataList.tsx
@@ -5,6 +5,8 @@ import isEmpty from "lodash/isEmpty";
 
 import { useRouter } from "@webiny/react-router";
 import { DeleteIcon, EditIcon } from "@webiny/ui/List/DataList/icons";
+import { IconButton } from "@webiny/ui/Button";
+import { ReactComponent as DuplicateIcon } from "~/editor/assets/icons/round-queue-24px.svg";
 import { CircularProgress } from "@webiny/ui/Progress";
 import EmptyView from "@webiny/app-admin/components/EmptyView";
 import { Typography } from "@webiny/ui/Typography";
@@ -13,7 +15,12 @@ import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { useConfirmationDialog } from "@webiny/app-admin/hooks/useConfirmationDialog";
 
 import { PbPageBlock } from "~/types";
-import { LIST_PAGE_BLOCKS, LIST_PAGE_BLOCKS_AND_CATEGORIES, DELETE_PAGE_BLOCK } from "./graphql";
+import {
+    LIST_PAGE_BLOCKS,
+    LIST_PAGE_BLOCKS_AND_CATEGORIES,
+    CREATE_PAGE_BLOCK,
+    DELETE_PAGE_BLOCK
+} from "./graphql";
 import { CreatableItem } from "./PageBlocks";
 import previewFallback from "./assets/preview.png";
 
@@ -75,7 +82,17 @@ const DeleteButton = styled(DeleteIcon)({
 const EditButton = styled(EditIcon)({
     position: "absolute",
     top: "10px",
-    left: "10px",
+    right: "110px",
+
+    "& svg": {
+        fill: "white"
+    }
+});
+
+const DuplicateButton = styled(IconButton)({
+    position: "absolute",
+    top: "10px",
+    right: "60px",
 
     "& svg": {
         fill: "white"
@@ -89,11 +106,12 @@ const NoRecordsWrapper = styled("div")({
 });
 
 type PageBlocksDataListProps = {
+    canCreate: boolean;
     canEdit: (item: CreatableItem) => boolean;
     canDelete: (item: CreatableItem) => boolean;
 };
 
-const PageBlocksDataList = ({ canEdit, canDelete }: PageBlocksDataListProps) => {
+const PageBlocksDataList = ({ canCreate, canEdit, canDelete }: PageBlocksDataListProps) => {
     const { history, location } = useRouter();
     const { showSnackbar } = useSnackbar();
     const { showConfirmation } = useConfirmationDialog();
@@ -119,7 +137,14 @@ const PageBlocksDataList = ({ canEdit, canDelete }: PageBlocksDataListProps) =>
     }, [selectedBlocksCategory]);
 
     const [deleteIt, deleteMutation] = useMutation(DELETE_PAGE_BLOCK, {
-        refetchQueries: [{ query: LIST_PAGE_BLOCKS_AND_CATEGORIES }], //To update block counters on the left side
+        // To update block counters on the left side
+        refetchQueries: [{ query: LIST_PAGE_BLOCKS_AND_CATEGORIES }],
+        onCompleted: () => refetch()
+    });
+
+    const [duplicateIt, duplicateMutation] = useMutation(CREATE_PAGE_BLOCK, {
+        // To update block counters on the left side and blocks list in pageEditor
+        refetchQueries: [{ query: LIST_PAGE_BLOCKS_AND_CATEGORIES }, { query: LIST_PAGE_BLOCKS }],
         onCompleted: () => refetch()
     });
 
@@ -143,7 +168,30 @@ const PageBlocksDataList = ({ canEdit, canDelete }: PageBlocksDataListProps) =>
         [selectedBlocksCategory]
     );
 
-    const isLoading = [deleteMutation].find(item => item.loading) || loading;
+    const duplicateItem = useCallback(
+        async item => {
+            const response = await duplicateIt({
+                variables: {
+                    data: {
+                        name: `${item.name} (copy)`,
+                        blockCategory: item.blockCategory,
+                        content: item.content,
+                        preview: item.preview
+                    }
+                }
+            });
+
+            const error = response?.data?.pageBuilder?.deletePageBlock?.error;
+            if (error) {
+                return showSnackbar(error.message);
+            }
+
+            showSnackbar(t`Duplicated "{name}".`({ name: item.name }));
+        },
+        [duplicateIt]
+    );
+
+    const isLoading = [deleteMutation, duplicateMutation].find(item => item.loading) || loading;
 
     const showEmptyView = !isLoading && !selectedBlocksCategory;
     // Render "No content selected" view.
@@ -185,6 +233,12 @@ const PageBlocksDataList = ({ canEdit, canDelete }: PageBlocksDataListProps) =>
                                     }
                                 />
                             )}
+                            {canCreate && (
+                                <DuplicateButton
+                                    icon={<DuplicateIcon />}
+                                    onClick={() => duplicateItem(pageBlock)}
+                                />
+                            )}
                             {canDelete(pageBlock) && (
                                 <DeleteButton onClick={() => deleteItem(pageBlock)} />
                             )}