fix(app-headless-cms): always open block creation dialog [skip ci]

webiny · May 13, 2024 · 32aa4e5 · 32aa4e5
1 parent c824797
commit 32aa4e5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 23 deletions.
diff --git a/packages/app-page-builder/src/admin/contexts/AdminPageBuilder/PageBlocks/BlocksRepository.ts b/packages/app-page-builder/src/admin/contexts/AdminPageBuilder/PageBlocks/BlocksRepository.ts
@@ -114,17 +114,11 @@ export class BlocksRepository {
     }
 
     async createPageBlock(input: { name: string; category: string; content?: unknown }) {
-        const pageBlock = await this.runWithLoading(
-            () => {
-                return this.gateway.create({
-                    name: input.name,
-                    blockCategory: input.category,
-                    content: input.content ?? getDefaultBlockContent()
-                });
-            },
-            "Creating page block",
-            `Page block "${input.name}" was created successfully.`
-        );
+        const pageBlock = await this.gateway.create({
+            name: input.name,
+            blockCategory: input.category,
+            content: input.content ?? getDefaultBlockContent()
+        });
 
         const processedBlock = this.processBlockFromApi(pageBlock);
 
@@ -189,11 +183,7 @@ export class BlocksRepository {
             return;
         }
 
-        await this.runWithLoading(
-            () => this.gateway.delete(id),
-            "Deleting page block",
-            `Filter "${block.name}" was deleted successfully.`
-        );
+        await this.gateway.delete(id);
 
         runInAction(() => {
             this.pageBlocks = this.pageBlocks.filter(block => block.id !== id);

diff --git a/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx b/packages/app-page-builder/src/admin/views/PageBlocks/BlocksByCategoriesDataList.tsx
@@ -5,7 +5,6 @@ import { i18n } from "@webiny/app/i18n";
 import { useRouter } from "@webiny/react-router";
 import { useQuery } from "@apollo/react-hooks";
 import isEmpty from "lodash/isEmpty";
-
 import {
     DataList,
     DataListModalOverlay,
@@ -21,10 +20,11 @@ import {
 import { Cell, Grid } from "@webiny/ui/Grid";
 import { Select } from "@webiny/ui/Select";
 import { Typography } from "@webiny/ui/Typography";
+import { CircularProgress } from "@webiny/ui/Progress";
 import SearchUI from "@webiny/app-admin/components/SearchUI";
 import { Dialog, DialogActions, DialogContent, DialogTitle } from "@webiny/ui/Dialog";
 import { ButtonDefault, ButtonIcon, ButtonSecondary } from "@webiny/ui/Button";
-import { useSnackbar, useStateWithCallback } from "@webiny/app-admin/hooks";
+import { useSnackbar, useStateIfMounted, useStateWithCallback } from "@webiny/app-admin/hooks";
 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 { ReactComponent as DownloadFileIcon } from "@webiny/app-admin/assets/icons/file_download.svg";
@@ -96,6 +96,7 @@ const BlocksByCategoriesDataList = ({
 }: PageBuilderBlocksByCategoriesDataListProps) => {
     const [sort, setSort] = useState<string>(SORTERS[2].sort);
     const [isDialogOpen, setIsDialogOpen] = useStateWithCallback<boolean>(false);
+    const [creatingBlock, setCreatingBlock] = useStateIfMounted(false);
     const { history } = useRouter();
     const { showSnackbar } = useSnackbar();
     const listQuery = useQuery(LIST_PAGE_CATEGORIES);
@@ -144,7 +145,9 @@ const BlocksByCategoriesDataList = ({
 
     const onCreatePageBlock = async (categorySlug: string) => {
         try {
+            setCreatingBlock(true);
             const newBlock = await createBlock({ name: "New block", category: categorySlug });
+            setCreatingBlock(false);
             setIsDialogOpen(false, () => {
                 history.push(`/page-builder/block-editor/${newBlock.id}`);
             });
@@ -160,11 +163,7 @@ const BlocksByCategoriesDataList = ({
     }, []);
 
     const handleNewBlockClick = useCallback(() => {
-        if (selectedBlocksCategory) {
-            onCreatePageBlock(selectedBlocksCategory);
-        } else {
-            setIsDialogOpen(true);
-        }
+        setIsDialogOpen(true);
     }, [selectedBlocksCategory]);
 
     return (
@@ -264,6 +263,7 @@ const BlocksByCategoriesDataList = ({
                     </Typography>
                 </DialogTitle>
                 <DialogContent>
+                    {creatingBlock ? <CircularProgress label={"Creating page block..."} /> : null}
                     <React.Fragment>
                         {isEmpty(blockCategoriesData) ? (
                             <div className={noRecordsWrapper}>