Merge branch 'next' of github.com:webiny/webiny-js into next

packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/QueryBuilder.tsx

@@ -1,5 +1,4 @@
 import React, { Fragment, useEffect } from "react";
-import { observer } from "mobx-react-lite";
 import { ReactComponent as DeleteIcon } from "@material-design-icons/svg/outlined/delete_outline.svg";
 
 import { Accordion, AccordionItem } from "@webiny/ui/Accordion";
@@ -33,7 +32,7 @@ export interface QueryBuilderProps {
     vm: QueryBuilderViewModel;
 }
 
-export const QueryBuilder = observer((props: QueryBuilderProps) => {
+export const QueryBuilder = (props: QueryBuilderProps) => {
     const formRef = React.createRef<FormAPI>();
 
     useEffect(() => {
@@ -123,4 +122,4 @@ export const QueryBuilder = observer((props: QueryBuilderProps) => {
             )}
         </Form>
     );
-});
+};

packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/Filter.tsx

@@ -37,7 +37,15 @@ export const Filter = ({ name, onDelete, onFieldSelectChange, fields, filter }:
                                         label={"Field"}
                                         options={options}
                                         value={options.find(option => option.id === value)}
-                                        onChange={data => onFieldSelectChange(data)}
+                                        onChange={selected => {
+                                            /**
+                                             * Update the selected value only if it's different from the current value.
+                                             * When the value is populated from data, onChange might trigger re-rendering of the form and clear related fields.
+                                             */
+                                            if (selected !== value) {
+                                                onFieldSelectChange(selected);
+                                            }
+                                        }}
                                         validation={validation}
                                     />
                                 );

packages/app-aco/src/components/AdvancedSearch/QueryBuilderDrawer/QueryBuilder/components/GroupOperationLabel.tsx

@@ -15,7 +15,9 @@ export const GroupOperationLabel = ({ operation, show }: GroupOperationLabelProp
 
     return (
         <GroupOperationLabelContainer>
-            <Typography use={"subtitle2"}>{operation}</Typography>
+            <Typography use={"subtitle2"} tag={"span"}>
+                {operation}
+            </Typography>
         </GroupOperationLabelContainer>
     );
 };

packages/app-aco/src/components/AdvancedSearch/QuerySaverDialog/QuerySaverDialog.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo } from "react";
-import { observer } from "mobx-react-lite";
 
 import { Form } from "@webiny/form";
 import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
@@ -25,7 +24,7 @@ interface QuerySaverDialogProps {
     };
 }
 
-export const QuerySaverDialog = observer(({ filter, ...props }: QuerySaverDialogProps) => {
+export const QuerySaverDialog = ({ filter, ...props }: QuerySaverDialogProps) => {
     const presenter = useMemo<QuerySaverDialogPresenter>(() => {
         return new QuerySaverDialogPresenter();
     }, []);
@@ -85,4 +84,4 @@ export const QuerySaverDialog = observer(({ filter, ...props }: QuerySaverDialog
             ) : null}
         </DialogContainer>
     );
-});
+};

packages/app-aco/src/components/AdvancedSearch/fields/DateWithTimezone.tsx

@@ -31,8 +31,10 @@ export const DateWithTimezone = () => {
     });
 
     useEffect(() => {
-        setDateTime(value.slice(0, -6));
-        setTimeZone(value.slice(-6) || "+00:00");
+        if (value) {
+            setDateTime(value.slice(0, -6));
+            setTimeZone(value.slice(-6) || "+00:00");
+        }
     }, [value]);
 
     const handleDateTimeChange = (value: string) => {

packages/app-aco/src/components/AdvancedSearch/fields/DateWithoutTimezone.tsx

@@ -14,7 +14,9 @@ export const DateWithoutTimezone = () => {
     });
 
     useEffect(() => {
-        setDateTime(value.slice(0, -5));
+        if (value) {
+            setDateTime(value.slice(0, -5));
+        }
     }, [value]);
 
     const handleOnChange = (value: string) => {

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import slugify from "slugify";
 import { useSnackbar } from "@webiny/app-admin";
-import { Bind, FormAPI, GenericFormData } from "@webiny/form";
+import { Bind, GenericFormData, useForm } from "@webiny/form";
 import { Cell, Grid } from "@webiny/ui/Grid";
 import { Input } from "@webiny/ui/Input";
 import { Typography } from "@webiny/ui/Typography";
@@ -28,37 +28,34 @@ interface FormComponentProps {
 
 const FormComponent = ({ currentParentId = null }: FormComponentProps) => {
     const [parentId, setParentId] = useState<string | null>(currentParentId);
+    const form = useForm();
 
-    const generateSlug = (form: FormAPI) => {
-        return () => {
-            if (form.data.slug || !form.data.title) {
-                return;
-            }
+    const generateSlug = () => {
+        if (form.data.slug || !form.data.title) {
+            return;
+        }
 
-            // We want to update slug only when the folder is first being created.
-            form.setValue(
-                "slug",
-                slugify(form.data.title, {
-                    replacement: "-",
-                    lower: true,
-                    remove: /[*#\?<>_\{\}\[\]+~.()'"!:;@]/g,
-                    trim: false
-                })
-            );
-        };
+        // We want to update slug only when the folder is first being created.
+        form.setValue(
+            "slug",
+            slugify(form.data.title, {
+                replacement: "-",
+                lower: true,
+                remove: /[*#\?<>_\{\}\[\]+~.()'"!:;@]/g,
+                trim: false
+            })
+        );
     };
 
     return (
         <Grid>
             <Cell span={12}>
-                <Bind name={"title"} validators={[validation.create("required")]}>
-                    {({ form, ...bind }) => (
-                        <Input {...bind} label={"Title"} onBlur={generateSlug(form)} />
-                    )}
+                <Bind name={"title"} validators={validation.create("required")}>
+                    {bind => <Input {...bind} label={"Title"} onBlur={generateSlug} />}
                 </Bind>
             </Cell>
             <Cell span={12}>
-                <Bind name={"slug"} validators={[validation.create("required,slug")]}>
+                <Bind name={"slug"} validators={validation.create("required,slug")}>
                     <Input label={"Slug"} />
                 </Bind>
             </Cell>

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

@@ -51,7 +51,7 @@ const FormComponent = ({ folder }: FormComponentProps) => {
     });
 
     useEffect(() => {
-        bind.form.setValue("permissions", permissions);
+        bind.onChange(permissions);
     }, [permissions]);
 
     const addPermission = useCallback(

packages/app-audit-logs/src/views/Logs/Filters/Filters.tsx

@@ -32,7 +32,5 @@ export const Filters = ({ showingFilters, setFilters, hasAccessToUsers }: Filter
         return browser.filters.filter(filter => filter.name !== "initiator");
     }, [browser, hasAccessToUsers]);
 
-    return (
-        <BaseFilters filters={filters} show={showingFilters} data={{}} onChange={applyFilters} />
-    );
+    return <BaseFilters filters={filters} show={showingFilters} onChange={applyFilters} />;
 };

packages/app-file-manager/src/modules/FileManagerRenderer/FileManagerView/components/Filters.tsx

@@ -18,12 +18,5 @@ export const Filters = () => {
         setFilters(convertedFilters);
     };
 
-    return (
-        <BaseFilters
-            filters={browser.filters}
-            show={showingFilters}
-            data={{}}
-            onChange={applyFilters}
-        />
-    );
+    return <BaseFilters filters={browser.filters} show={showingFilters} onChange={applyFilters} />;
 };

packages/app-headless-cms/src/admin/components/ContentEntries/Filters/Filters.tsx

@@ -48,12 +48,7 @@ export const Filters = () => {
     }
 
     return (
-        <BaseFilters
-            filters={browser.filters}
-            show={list.showingFilters}
-            data={{}}
-            onChange={applyFilters}
-        >
+        <BaseFilters filters={browser.filters} show={list.showingFilters} onChange={applyFilters}>
             <AdvancedSearch
                 fields={fields}
                 repository={repository}

packages/app-headless-cms/src/admin/components/ContentEntries/Filters/RefFieldRenderer/components/Ref.tsx

@@ -9,8 +9,20 @@ import { RefPresenter } from "./RefPresenter";
 import { ContentEntryListConfig } from "~/admin/config/contentEntries";
 import { useApolloClient } from "~/admin/hooks";
 
-export const Ref = observer(() => {
-    const { useInputField } = ContentEntryListConfig.Browser.AdvancedSearch.FieldRenderer;
+const { useInputField } = ContentEntryListConfig.Browser.AdvancedSearch.FieldRenderer;
+
+export const Ref = () => {
+    const { name } = useInputField();
+    const { value } = useBind({ name });
+
+    return <RefWithValue value={value} />;
+};
+
+interface RefProps {
+    value: string | undefined;
+}
+
+const RefWithValue = observer(({ value }: RefProps) => {
     const { name, field } = useInputField();
     const client = useApolloClient();
 
@@ -20,13 +32,9 @@ export const Ref = observer(() => {
         return new RefPresenter(repository);
     }, [client, field.settings.modelIds]);
 
-    const { value } = useBind({
-        name
-    });
-
     useEffect(() => {
         presenter.load(value);
-    }, []);
+    }, [value]);
 
     const onInput = useCallback(
         debounce(value => presenter.search(value), 250),

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

@@ -1,7 +1,8 @@
 import React, { useRef, useCallback, cloneElement } from "react";
+import { Validator } from "@webiny/validation/types";
+import { useForm } from "@webiny/form";
 import { createValidators } from "~/utils/createValidators";
 import { BindComponent, CmsModelField } from "~/types";
-import { Validator } from "@webiny/validation/types";
 
 interface UseBindProps {
     field: CmsModelField;
@@ -30,6 +31,7 @@ export interface GetBindCallable {
 export function useBind({ Bind, field }: UseBindProps) {
     const memoizedBindComponents = useRef<Record<string, BindComponent>>({});
     const cacheKey = createFieldCacheKey(field);
+    const form = useForm();
 
     return useCallback(
         (index = -1) => {
@@ -93,7 +95,7 @@ export function useBind({ Bind, field }: UseBindProps) {
                                     bind.onChange(value);
 
                                     // To make sure the field is still valid, we must trigger validation.
-                                    bind.form.validateInput(field.fieldId);
+                                    form.validateInput(field.fieldId);
                                 };
 
                                 props.moveValueUp = (index: number) => {

packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/PredefinedValues.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useRef, cloneElement } from "react";
-import getValue from "./functions/getValue";
-import setValue from "./functions/setValue";
+import { getValue } from "./functions/getValue";
+import { setValue } from "./functions/setValue";
 import { BindComponent, Bind as BaseFormBind } from "@webiny/form";
 import { useModelField } from "~/admin/hooks";
 
@@ -25,8 +25,8 @@ const PredefinedValues = () => {
                         const props = {
                             ...bind,
                             value: getValue({ bind, index, name }),
-                            onChange: async (value: string[]) => {
-                                await setValue({ value, bind, index, name });
+                            onChange: (value: string[]) => {
+                                setValue({ value, bind, index, name });
                             }
                         };
 

packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/functions/getValue.ts

@@ -6,7 +6,8 @@ interface Params {
     index: number;
     name: string;
 }
-const getValue = (params: Params): string[] | undefined => {
+
+export const getValue = (params: Params): string[] | undefined => {
     const { bind, index, name } = params;
     const value = bind.value || [];
 
@@ -16,5 +17,3 @@ const getValue = (params: Params): string[] | undefined => {
 
     return value;
 };
-
-export default getValue;

packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/functions/setValue.ts

@@ -1,4 +1,4 @@
-import set from "lodash/set";
+import { set } from "dot-prop-immutable";
 import { BindComponentRenderProp } from "@webiny/form";
 
 interface Params {
@@ -7,16 +7,13 @@ interface Params {
     index: number;
     name: string;
 }
-const setValue = (params: Params): void => {
+
+export const setValue = (params: Params): void => {
     const { value, bind, index, name } = params;
-    let newValue = [...(bind.value || [])];
+    const currentValue = [...(bind.value || [])];
     if (index >= 0) {
-        set(newValue, `${index}.${name}`, value);
+        bind.onChange(set(currentValue, `${index}.${name}`, value));
     } else {
-        newValue = value;
+        bind.onChange(value);
     }
-
-    bind.onChange(newValue);
 };
-
-export default setValue;

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

@@ -1,4 +1,5 @@
 import React from "react";
+import classSet from "classnames";
 import { css } from "emotion";
 import { i18n } from "@webiny/app/i18n";
 import { Cell, Grid } from "@webiny/ui/Grid";
@@ -13,6 +14,9 @@ import { ParentValueIndexProvider } from "~/admin/components/ModelFieldProvider"
 const t = i18n.ns("app-headless-cms/admin/fields/text");
 
 const style = {
+    gridContainer: css`
+        padding: 0 !important;
+    `,
     addButton: css({
         width: "100%",
         borderTop: "1px solid var(--mdc-theme-background)",
@@ -67,7 +71,7 @@ const DynamicSection = ({
                 const bindFieldValue: string[] = value || [];
                 return (
                     <ParentFieldProvider value={value} path={Bind.parentName}>
-                        <Grid className={gridClassName}>
+                        <Grid className={classSet(gridClassName, style.gridContainer)}>
                             {typeof renderTitle === "function" && renderTitle(bindFieldValue)}
                             <Cell span={12}>
                                 {/* We always render the first item, for better UX */}

packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.tsx

@@ -2,15 +2,15 @@ import React from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
 import { CmsModelFieldRendererPlugin, CmsModelField } from "~/types";
-import { BindComponentRenderProp } from "@webiny/form";
+import { useForm } from "@webiny/form";
 import { LexicalCmsEditor } from "~/admin/components/LexicalCmsEditor/LexicalCmsEditor";
 import { modelHasLegacyRteField } from "~/admin/plugins/fieldRenderers/richText/utils";
 import { FormElementMessage } from "@webiny/ui/FormElementMessage";
 
 const t = i18n.ns("app-headless-cms/admin/fields/rich-text");
 
-const getKey = (field: CmsModelField, bind: BindComponentRenderProp<string>): string => {
-    const formId = bind.form.data.id || "new";
+const getKey = (id: string | undefined, field: CmsModelField): string => {
+    const formId = id || "new";
     return `${formId}.${field.fieldId}`;
 };
 
@@ -34,6 +34,7 @@ const plugin: CmsModelFieldRendererPlugin = {
             return canUse;
         },
         render({ field, getBind, Label }) {
+            const form = useForm();
             const Bind = getBind<string>();
             return (
                 <Bind>
@@ -44,7 +45,7 @@ const plugin: CmsModelFieldRendererPlugin = {
                                 <LexicalCmsEditor
                                     value={bind.value}
                                     onChange={bind.onChange}
-                                    key={getKey(field, bind)}
+                                    key={getKey(form.data.id, field)}
                                     placeholder={field.placeholderText}
                                     data-testid={`fr.input.lexical.${field.label}`}
                                 />