fix: improve component memoization and chains of hooks

packages/api-apw/src/plugins/cms/apwEntryPlugins.ts

@@ -12,7 +12,9 @@ export const apwEntryPlugins = (params: ApwEntryPlugins) => {
     apw.addContentGetter(ApwContentTypes.CMS_ENTRY, async (id, settings) => {
         const model = await fetchModel(cms, id, settings);
 
-        const item = await cms.getEntryById(model, id);
+        const item = await cms.getEntry(model, {
+            where: { OR: [{ id }, { entryId: id }], latest: true }
+        });
 
         if (!item) {
             return null;

packages/app-aco/src/components/AdvancedSearch/AdvancedSearchPresenter.test.ts

@@ -312,7 +312,7 @@ describe("AdvancedSearchPresenter", () => {
         expect(presenter.vm.saverVm).toMatchObject({
             isOpen: true,
             isLoading: true,
-            loadingLabel: "Creating filter"
+            loadingLabel: "Creating filter..."
         });
 
         await persistPromise;
@@ -418,7 +418,7 @@ describe("AdvancedSearchPresenter", () => {
         expect(presenter.vm.saverVm).toMatchObject({
             isOpen: true,
             isLoading: true,
-            loadingLabel: "Updating filter"
+            loadingLabel: "Updating filter..."
         });
 
         await persistPromise;
@@ -497,7 +497,7 @@ describe("AdvancedSearchPresenter", () => {
         expect(presenter.vm.saverVm).toMatchObject({
             isOpen: true,
             isLoading: true,
-            loadingLabel: "Updating filter"
+            loadingLabel: "Updating filter..."
         });
 
         await persistPromise;
@@ -593,7 +593,7 @@ describe("AdvancedSearchPresenter", () => {
         expect(presenter.vm.saverVm).toMatchObject({
             isOpen: true,
             isLoading: true,
-            loadingLabel: "Creating filter"
+            loadingLabel: "Creating filter..."
         });
 
         await persistPromise;

packages/app-aco/src/dialogs/useCreateDialog.tsx

@@ -106,7 +106,7 @@ export const useCreateDialog = (): UseCreateDialogResponse => {
             content: <FormComponent currentParentId={currentParentId} />,
             acceptLabel: "Create folder",
             cancelLabel: "Cancel",
-            loadingLabel: "Creating folder",
+            loadingLabel: "Creating folder...",
             onAccept
         });
     };

packages/app-aco/src/dialogs/useDeleteDialog.tsx

@@ -38,7 +38,7 @@ export const useDeleteDialog = (): UseDeleteDialogResponse => {
             content: `You are about to delete the folder "${folder.title}"! Are you sure you want to continue?`,
             acceptLabel: "Delete folder",
             cancelLabel: "Cancel",
-            loadingLabel: "Deleting folder",
+            loadingLabel: "Deleting folder...",
             onAccept: () => onAccept(folder)
         });
     };

packages/app-aco/src/dialogs/useEditDialog.tsx

@@ -98,7 +98,7 @@ export const useEditDialog = (): UseEditDialogResponse => {
             content: <FormComponent folder={folder} />,
             acceptLabel: "Edit folder",
             cancelLabel: "Cancel",
-            loadingLabel: "Editing folder",
+            loadingLabel: "Editing folder...",
             onAccept: (data: GenericFormData) => onAccept(folder, data)
         });
     };

packages/app-aco/src/dialogs/useSetPermissionsDialog.tsx

@@ -119,7 +119,7 @@ export const useSetPermissionsDialog = (): UseSetPermissionsDialogResponse => {
             content: <FormComponent folder={folder} />,
             acceptLabel: "Save",
             cancelLabel: "Cancel",
-            loadingLabel: "Updating permissions",
+            loadingLabel: "Updating permissions...",
             onAccept: (data: GenericFormData) => onAccept(folder, data)
         });
     };

packages/app-apw/src/index.tsx

@@ -5,21 +5,17 @@ import { Compose, MenuItemRenderer, Plugins, useWcp } from "@webiny/app-admin";
  */
 import { ApwOnPublish } from "./plugins/pageBuilder/ApwOnPublish";
 import { ApwOnPageDelete } from "./plugins/pageBuilder/ApwOnDelete";
-import { DecoratePublishActions } from "./plugins/pageBuilder/DecoratePublishActions";
+import { DecoratePagePublishActions } from "./plugins/pageBuilder/DecoratePagePublishActions";
 
 import { ApwPageBuilderWorkflowScope } from "~/views/publishingWorkflows/components/pageBuilder/ApwPageBuilderWorkflowScope";
 /**
  * Plugins for "Headless CMS"
  */
 import { ApwOnEntryDelete } from "~/plugins/cms/ApwOnEntryDelete";
 import { ApwOnEntryPublish } from "~/plugins/cms/ApwOnEntryPublish";
-import { SaveAndPublishButton as HeadlessCmsEntrySaveAndPublishButton } from "@webiny/app-headless-cms/admin/components/ContentEntryForm/Header";
-import { PublishEntryRevisionListItem } from "@webiny/app-headless-cms/admin/views/contentEntries/ContentEntry/PublishEntryRevisionListItem";
+import { PublishEntryRevisionListItem } from "@webiny/app-headless-cms/admin/views/contentEntries/ContentEntry/RevisionsList/PublishEntryRevisionListItem";
 import { ApwHeadlessCmsWorkflowScope } from "~/views/publishingWorkflows/components/cms/ApwHeadlessCmsWorkflowScope";
-import {
-    EntryRevisionListItemGraphicHoc,
-    PublishEntryButtonHoc
-} from "~/plugins/cms/PublishEntryHocs";
+import { DecoratePublishEntryAction, EntryRevisionListItem } from "~/plugins/cms/PublishEntryHocs";
 /**
  *
  */
@@ -28,35 +24,33 @@ import { WorkflowScope } from "~/views/publishingWorkflows/components/WorkflowSc
 import { DefaultBar } from "~/plugins/editor/defaultBar";
 import { MenuGroupRenderer } from "~/plugins/cms/MenuGroupRenderer";
 import { ApwPermissions } from "~/plugins/permissionRenderer";
+import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
 
 export const AdvancedPublishingWorkflow = () => {
     const { canUseFeature } = useWcp();
+
     if (!canUseFeature("advancedPublishingWorkflow")) {
         return null;
     }
     return (
         <>
-            <DecoratePublishActions />
             <Compose
                 with={[ApwPageBuilderWorkflowScope, ApwHeadlessCmsWorkflowScope]}
                 component={WorkflowScope}
             />
-            <Compose
-                with={PublishEntryButtonHoc}
-                component={HeadlessCmsEntrySaveAndPublishButton}
-            />
-            <Compose
-                with={EntryRevisionListItemGraphicHoc}
-                component={PublishEntryRevisionListItem}
-            />
             <Compose with={MenuGroupRenderer} component={MenuItemRenderer} />
+            <ContentEntryEditorConfig>
+                <DecoratePublishEntryAction />
+                <Compose with={EntryRevisionListItem} component={PublishEntryRevisionListItem} />
+                <ApwOnEntryDelete />
+                <ApwOnEntryPublish />
+            </ContentEntryEditorConfig>
             <Plugins>
                 <DefaultBar />
                 <Module />
+                <DecoratePagePublishActions />
                 <ApwOnPublish />
                 <ApwOnPageDelete />
-                <ApwOnEntryDelete />
-                <ApwOnEntryPublish />
                 <ApwPermissions />
             </Plugins>
         </>

packages/app-apw/src/plugins/cms/ApwOnEntryDelete.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React from "react";
 import dotPropImmutable from "dot-prop-immutable";
 import { i18n } from "@webiny/app/i18n";
 import { useConfirmationDialog, useSnackbar } from "@webiny/app-admin";
@@ -9,81 +9,93 @@ import {
 } from "~/graphql/contentReview.gql";
 import { ApwContentTypes } from "~/types";
 import { IS_REVIEW_REQUIRED_QUERY } from "../graphql";
-import { useCms } from "@webiny/app-headless-cms/admin/hooks";
+import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
 import { FetchResult } from "apollo-link";
 import { useApolloClient } from "@apollo/react-hooks";
 
 const t = i18n.ns("app-apw/cms/dialog");
 
-export const ApwOnEntryDelete = () => {
-    const client = useApolloClient();
-    const { onEntryDelete } = useCms();
-    const { showSnackbar } = useSnackbar();
+const { ContentEntry } = ContentEntryEditorConfig;
 
-    const { showConfirmation: showDeleteReviewConfirmation } = useConfirmationDialog({
-        title: t`Delete review`,
-        message: (
-            <p>
-                {t`Before deleting the CMS Entry you first need to delete the ongoing review.
+export const ApwOnEntryDelete = ContentEntry.useContentEntry.createDecorator(baseHook => {
+    return () => {
+        const hook = baseHook();
+        const client = useApolloClient();
+        const { showSnackbar } = useSnackbar();
+
+        const { showConfirmation } = useConfirmationDialog({
+            title: t`Delete review`,
+            message: (
+                <p>
+                    {t`Before deleting this entry, you must delete the ongoing review.
                 {separator}
                  Do you wish to continue and delete the review?`({ separator: <br /> })}
-            </p>
-        )
-    });
+                </p>
+            )
+        });
+
+        return {
+            ...hook,
+            deleteEntry: async params => {
+                const input = {
+                    id: params.id,
+                    type: ApwContentTypes.CMS_ENTRY,
+                    settings: {
+                        modelId: hook.contentModel.modelId
+                    }
+                };
+                const { data } = await client.query({
+                    query: IS_REVIEW_REQUIRED_QUERY,
+                    variables: {
+                        data: input
+                    },
+                    fetchPolicy: "network-only"
+                });
+                const contentReviewId = dotPropImmutable.get(
+                    data,
+                    "apw.isReviewRequired.data.contentReviewId"
+                );
+                const error = dotPropImmutable.get(data, "apw.isReviewRequired.error", null);
+                if (error) {
+                    showSnackbar(error.message);
 
-    useEffect(() => {
-        return onEntryDelete(next => async params => {
-            const { entry } = params;
-            const input = {
-                id: entry.id,
-                type: ApwContentTypes.CMS_ENTRY,
-                settings: {
-                    modelId: params.model.modelId
+                    return { error };
                 }
-            };
-            const { data } = await client.query({
-                query: IS_REVIEW_REQUIRED_QUERY,
-                variables: {
-                    data: input
-                },
-                fetchPolicy: "network-only"
-            });
-            const contentReviewId = dotPropImmutable.get(
-                data,
-                "apw.isReviewRequired.data.contentReviewId"
-            );
-            const error = dotPropImmutable.get(data, "apw.isReviewRequired.error", null);
-            if (error) {
-                return next({ ...params, error });
-            } else if (contentReviewId) {
-                const response = await new Promise<
-                    FetchResult<DeleteApwContentReviewMutationResponse>
-                >(resolve => {
-                    showDeleteReviewConfirmation(async () => {
-                        const response = await client.mutate<
-                            DeleteApwContentReviewMutationResponse,
-                            DeleteApwContentReviewMutationVariables
-                        >({
-                            mutation: DELETE_CONTENT_REVIEW_MUTATION,
-                            variables: {
-                                id: contentReviewId
-                            }
-                        });
 
-                        resolve(response);
+                if (contentReviewId) {
+                    const response = await new Promise<
+                        FetchResult<DeleteApwContentReviewMutationResponse>
+                    >(resolve => {
+                        showConfirmation(async () => {
+                            // TODO: create an SDK for APW
+                            const response = await client.mutate<
+                                DeleteApwContentReviewMutationResponse,
+                                DeleteApwContentReviewMutationVariables
+                            >({
+                                mutation: DELETE_CONTENT_REVIEW_MUTATION,
+                                variables: {
+                                    id: contentReviewId
+                                }
+                            });
+
+                            resolve(response);
+                        });
                     });
-                });
 
-                const error = dotPropImmutable.get(response, "data.apw.deleteContentReview.error");
-                if (error) {
-                    showSnackbar(error.message);
-                    return next({ ...params, error });
+                    const error = dotPropImmutable.get(
+                        response,
+                        "data.apw.deleteContentReview.error"
+                    );
+
+                    if (error) {
+                        showSnackbar(error.message);
+                        return { error };
+                    }
+                    showSnackbar(`Content review deleted successfully!`);
                 }
-                showSnackbar(`Content review deleted successfully!`);
-            }
-            return next(params);
-        });
-    }, []);
 
-    return null;
-};
+                return hook.deleteEntry(params);
+            }
+        };
+    };
+});

packages/app-apw/src/plugins/cms/ApwOnEntryPublish.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import dotPropImmutable from "dot-prop-immutable";
 import { useNavigate } from "@webiny/react-router";
 import { i18n } from "@webiny/app/i18n";
-import { ContentEntryEditorConfig, useContentEntry } from "@webiny/app-headless-cms";
+import { ContentEntryEditorConfig } from "@webiny/app-headless-cms";
 import { useApolloClient } from "@apollo/react-hooks";
 import { ShowConfirmationOnAccept, useConfirmationDialog, useSnackbar } from "@webiny/app-admin";
 import { ApwContentReviewContent, ApwContentTypes } from "~/types";
@@ -24,10 +24,9 @@ type CreateContentReviewInput = Pick<ApwContentReviewContent, "id" | "type">;
 
 const { ContentEntry } = ContentEntryEditorConfig;
 
-export const ApwOnEntryPublish = ContentEntry.useRevision.createDecorator(baseHook => {
-    return hookParams => {
-        const hook = baseHook(hookParams);
-        const { contentModel, entry } = useContentEntry();
+export const ApwOnEntryPublish = ContentEntry.useContentEntry.createDecorator(baseHook => {
+    return () => {
+        const hook = baseHook();
         const client = useApolloClient();
         const { showSnackbar } = useSnackbar();
         const navigate = useNavigate();
@@ -85,12 +84,12 @@ export const ApwOnEntryPublish = ContentEntry.useRevision.createDecorator(baseHo
 
         return {
             ...hook,
-            publishRevision: async id => {
+            publishEntryRevision: async ({ id }) => {
                 const inputData = {
-                    id: id || entry.id,
+                    id,
                     type: ApwContentTypes.CMS_ENTRY,
                     settings: {
-                        modelId: contentModel.modelId
+                        modelId: hook.contentModel.modelId
                     }
                 };
                 const { data } = await client.query({
@@ -121,7 +120,7 @@ export const ApwOnEntryPublish = ContentEntry.useRevision.createDecorator(baseHo
                 );
 
                 if (!isReviewRequired) {
-                    return hook.publishRevision(id);
+                    return hook.publishEntryRevision({ id });
                 }
 
                 /**