Merge branch 'refs/heads/dev' into stable

packages/api-form-builder/__tests__/graphql/i18n.ts

@@ -13,3 +13,19 @@ export const CREATE_LOCALE = /* GraphQL */ `
         }
     }
 `;
+
+export const DELETE_LOCALE = /* GraphQL */ `
+    mutation DeleteI18NLocale($code: String!) {
+        i18n {
+            deleteI18NLocale(code: $code) {
+                data {
+                    code
+                }
+                error {
+                    message
+                    code
+                }
+            }
+        }
+    }
+`;

packages/api-form-builder/__tests__/settings.test.ts

@@ -2,9 +2,16 @@ import useGqlHandler from "./useGqlHandler";
 import { GET_SETTINGS } from "~tests/graphql/formBuilderSettings";
 
 describe("Settings Test", () => {
-    const { getSettings, updateSettings, install, createI18NLocale, isInstalled } = useGqlHandler();
-
-    test(`Should not be able to get & update settings before "install"`, async () => {
+    const {
+        getSettings,
+        updateSettings,
+        install,
+        createI18NLocale,
+        deleteI18NLocale,
+        isInstalled
+    } = useGqlHandler();
+
+    it(`Should not be able to get & update settings before "install"`, async () => {
         // Should not have any settings without install
         const [getSettingsResponse] = await getSettings();
 
@@ -40,7 +47,7 @@ describe("Settings Test", () => {
         });
     });
 
-    test("Should be able to install `Form Builder`", async () => {
+    it("Should be able to install `Form Builder`", async () => {
         // "isInstalled" should return false prior "install"
         const [isInstalledResponse] = await isInstalled();
 
@@ -78,7 +85,7 @@ describe("Settings Test", () => {
         });
     });
 
-    test(`Should be able to get & update settings after "install"`, async () => {
+    it(`Should be able to get & update settings after "install"`, async () => {
         // Let's install the `Form builder`
         const [installResponse] = await install({ domain: "http://localhost:3001" });
 
@@ -156,7 +163,7 @@ describe("Settings Test", () => {
         });
     });
 
-    test(`Should be able to get & update settings after in a new locale`, async () => {
+    it(`Should be able to get & update settings after in a new locale`, async () => {
         // Let's install the `Form builder`
         await install({ domain: "http://localhost:3001" });
 
@@ -168,9 +175,7 @@ describe("Settings Test", () => {
         // set the locale header. Wasn't easily possible via the `getSettings` helper.
         const [newLocaleFbSettings] = await invoke({
             body: { query: GET_SETTINGS },
-            headers: {
-                "x-i18n-locale": "default:de-DE;content:de-DE;"
-            }
+            headers: { "x-i18n-locale": "default:de-DE;content:de-DE;" }
         });
 
         // Settings should exist in the newly created locale.
@@ -192,4 +197,38 @@ describe("Settings Test", () => {
             }
         });
     });
+
+    it(`Should be able to create a locale, delete it, and again create it`, async () => {
+        // Let's install the `Form builder`
+        await install({ domain: "http://localhost:3001" });
+
+        await createI18NLocale({ data: { code: "en-US" } });
+        await createI18NLocale({ data: { code: "de-DE" } });
+
+        const [deleteDeLocaleResponse] = await deleteI18NLocale({ code: "de-DE" });
+        expect(deleteDeLocaleResponse).toEqual({
+            data: {
+                i18n: {
+                    deleteI18NLocale: {
+                        data: { code: "de-DE" },
+                        error: null
+                    }
+                }
+            }
+        });
+
+        const [createDeLocaleResponse] = await createI18NLocale({ data: { code: "de-DE" } });
+        expect(createDeLocaleResponse).toEqual({
+            data: {
+                i18n: {
+                    createI18NLocale: {
+                        data: {
+                            code: "de-DE"
+                        },
+                        error: null
+                    }
+                }
+            }
+        });
+    });
 });

packages/api-form-builder/__tests__/useGqlHandler.ts

@@ -12,7 +12,7 @@ import { createI18NGraphQL } from "@webiny/api-i18n/graphql";
 
 // Graphql
 import { INSTALL as INSTALL_FILE_MANAGER } from "./graphql/fileManagerSettings";
-import { CREATE_LOCALE } from "./graphql/i18n";
+import { DELETE_LOCALE, CREATE_LOCALE } from "./graphql/i18n";
 
 import {
     GET_SETTINGS,
@@ -228,6 +228,9 @@ export default (params: UseGqlHandlerParams = {}) => {
         // Locales.
         async createI18NLocale(variables: Record<string, any>) {
             return invoke({ body: { query: CREATE_LOCALE, variables } });
+        },
+        async deleteI18NLocale(variables: Record<string, any>) {
+            return invoke({ body: { query: DELETE_LOCALE, variables } });
         }
     };
 };

packages/api-form-builder/src/plugins/crud/index.ts

@@ -122,6 +122,13 @@ export default (params: CreateFormBuilderCrudParams) => {
                     return context.formBuilder.createSettings({});
                 });
             });
+
+            context.i18n.locales.onLocaleAfterDelete.subscribe(async params => {
+                const { locale } = params;
+                await context.i18n.withLocale(locale, async () => {
+                    return context.formBuilder.deleteSettings();
+                });
+            });
         })
     ];
 };

packages/app-headless-cms/src/admin/components/ContentEntryForm/useBind.tsx

@@ -101,8 +101,11 @@ export function useBind({ Bind, field }: UseBindProps) {
                                     if (index < 0) {
                                         return;
                                     }
-                                    let value = bind.value;
-                                    value = [...value.slice(0, index), ...value.slice(index + 1)];
+
+                                    const value = [
+                                        ...bind.value.slice(0, index),
+                                        ...bind.value.slice(index + 1)
+                                    ];
 
                                     bind.onChange(value.length === 0 ? null : value);
 

packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjects.tsx

@@ -68,15 +68,12 @@ const Actions = ({ setHighlightIndex, bind, index }: ActionsProps) => {
         [moveValueUp, index]
     );
 
-    const onDelete = useCallback(
-        (ev: React.BaseSyntheticEvent) => {
-            ev.stopPropagation();
-            showConfirmation(() => {
-                bind.field.removeValue(index);
-            });
-        },
-        [index]
-    );
+    const onDelete = (ev: React.BaseSyntheticEvent) => {
+        ev.stopPropagation();
+        showConfirmation(() => {
+            bind.field.removeValue(index);
+        });
+    };
 
     return (
         <>

packages/app-headless-cms/src/admin/plugins/fieldRenderers/object/multipleObjectsAccordion.tsx

@@ -70,15 +70,12 @@ const Actions = ({ setHighlightIndex, bind, index }: ActionsProps) => {
         [moveValueUp, index]
     );
 
-    const onDelete = useCallback(
-        (ev: React.BaseSyntheticEvent) => {
-            ev.stopPropagation();
-            showConfirmation(() => {
-                bind.field.removeValue(index);
-            });
-        },
-        [index]
-    );
+    const onDelete = (ev: React.BaseSyntheticEvent) => {
+        ev.stopPropagation();
+        showConfirmation(() => {
+            bind.field.removeValue(index);
+        });
+    };
 
     return (
         <>

packages/app-page-builder/src/editor/hooks/index.ts

@@ -17,3 +17,5 @@ export { useRootElement } from "./useRootElement";
 export { useUI } from "./useUI";
 export { useUpdateElement } from "./useUpdateElement";
 export { useUpdateHandlers } from "./useUpdateHandlers";
+export { useDeleteElement } from "./useDeleteElement";
+export { useFindElementBlock } from "./useFindElementBlock";

packages/app-page-builder/src/editor/hooks/useDeleteElement.ts

@@ -0,0 +1,64 @@
+import { useCallback } from "react";
+import { plugins } from "@webiny/plugins";
+import { useEventActionHandler, useFindElementBlock, useUpdateElement } from "~/editor";
+import { DeleteElementActionEvent } from "~/editor/recoil/actions";
+import type { PbBlockVariable, PbEditorElement, PbEditorPageElementPlugin } from "~/types";
+
+const removeVariableFromBlock = (block: PbEditorElement, variableId: string) => {
+    const variables = block.data.variables ?? [];
+
+    const updatedVariables = variables.filter(
+        (variable: PbBlockVariable) => variable.id.split(".")[0] !== variableId
+    );
+
+    return {
+        ...block,
+        data: {
+            ...block.data,
+            variables: updatedVariables
+        }
+    };
+};
+
+export const useDeleteElement = () => {
+    const eventActionHandler = useEventActionHandler();
+    const updateElement = useUpdateElement();
+    const { findElementBlock } = useFindElementBlock();
+
+    const canDeleteElement = useCallback((element: PbEditorElement) => {
+        const plugin = plugins
+            .byType<PbEditorPageElementPlugin>("pb-editor-page-element")
+            .find(pl => pl.elementType === element.type);
+
+        if (!plugin) {
+            return false;
+        }
+
+        if (typeof plugin.canDelete === "function") {
+            if (!plugin.canDelete({ element })) {
+                return false;
+            }
+        }
+
+        return true;
+    }, []);
+
+    const deleteElement = useCallback(async (element: PbEditorElement): Promise<void> => {
+        const block = await findElementBlock(element.id);
+
+        // We need to remove element variable from block if it exists
+        if (element.data?.variableId && block) {
+            const updatedBlock = removeVariableFromBlock(block, element.data.variableId);
+
+            updateElement(updatedBlock);
+        }
+
+        eventActionHandler.trigger(
+            new DeleteElementActionEvent({
+                element
+            })
+        );
+    }, []);
+
+    return { canDeleteElement, deleteElement };
+};

packages/app-page-builder/src/editor/hooks/useFindElementBlock.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+import { useRecoilCallback } from "recoil";
+import { blockByElementSelector } from "~/editor/hooks/useCurrentBlockElement";
+
+/**
+ * Exposes a getter which traverses the element tree upwards from the given element id, and returns an element
+ * of type "block", if found.
+ */
+export const useFindElementBlock = () => {
+    const findBlock = useRecoilCallback(({ snapshot }) => async (id: string) => {
+        return await snapshot.getPromise(blockByElementSelector(id));
+    });
+
+    const findElementBlock = useCallback(
+        async (elementId: string) => {
+            return findBlock(elementId);
+        },
+        [findBlock]
+    );
+
+    return { findElementBlock };
+};

packages/app-page-builder/src/editor/plugins/elementSettings/delete/DeleteAction.ts

@@ -1,67 +1,22 @@
 import React, { useCallback } from "react";
-import { plugins } from "@webiny/plugins";
-import { useActiveElement, useEventActionHandler } from "~/editor";
-import { PbEditorPageElementPlugin, PbBlockVariable, PbEditorElement } from "~/types";
-import { useUpdateElement } from "~/editor/hooks/useUpdateElement";
-import { useParentBlock } from "~/editor/hooks/useParentBlock";
-import { DeleteElementActionEvent } from "~/editor/recoil/actions";
-
-const removeVariableFromBlock = (block: PbEditorElement, variableId: string) => {
-    const variables = block.data.variables ?? [];
-
-    const updatedVariables = variables.filter(
-        (variable: PbBlockVariable) => variable.id.split(".")[0] !== variableId
-    );
-
-    return {
-        ...block,
-        data: {
-            ...block.data,
-            variables: updatedVariables
-        }
-    };
-};
+import { useActiveElement, useDeleteElement } from "~/editor";
 
 interface DeleteActionPropsType {
     children: React.ReactElement;
 }
 const DeleteAction = ({ children }: DeleteActionPropsType) => {
-    const eventActionHandler = useEventActionHandler();
     const [element] = useActiveElement();
-    const block = useParentBlock();
-    const updateElement = useUpdateElement();
-
-    if (!element) {
-        return null;
-    }
+    const { deleteElement, canDeleteElement } = useDeleteElement();
 
     const onClick = useCallback((): void => {
-        // We need to remove element variable from block if it exists
-        if (element.data?.variableId && block) {
-            const updatedBlock = removeVariableFromBlock(block, element.data.variableId);
-
-            updateElement(updatedBlock);
+        if (!element) {
+            return;
         }
-        eventActionHandler.trigger(
-            new DeleteElementActionEvent({
-                element
-            })
-        );
-    }, [element.id]);
-
-    const plugin = plugins
-        .byType<PbEditorPageElementPlugin>("pb-editor-page-element")
-        .find(pl => pl.elementType === element.type);
-
-    if (!plugin) {
-        return null;
-    }
 
-    if (typeof plugin.canDelete === "function") {
-        if (!plugin.canDelete({ element })) {
-            return null;
+        if (canDeleteElement(element)) {
+            deleteElement(element);
         }
-    }
+    }, [element?.id]);
 
     return React.cloneElement(children, { onClick });
 };