fix(app-headless-cms): add folder selector to new entry dialog (#3485)

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

@@ -5,7 +5,7 @@ import { Form } from "@webiny/form";
 import { FormAPI, FormRenderPropParams } from "@webiny/form/types";
 import { plugins } from "@webiny/plugins";
 import { CircularProgress } from "@webiny/ui/Progress";
-import { CmsContentFormRendererPlugin } from "~/types";
+import { CmsContentEntry, CmsContentFormRendererPlugin } from "~/types";
 import { useContentEntryForm, UseContentEntryFormParams } from "./useContentEntryForm";
 import { Fields } from "./Fields";
 import { Prompt } from "@webiny/react-router";
@@ -116,7 +116,7 @@ export const ContentEntryForm: React.FC<ContentEntryFormProps> = ({ onForm, ...p
     );
 
     return (
-        <Form
+        <Form<CmsContentEntry>
             onChange={(data, form) => {
                 const different = isDifferent(data, initialData);
                 if (isDirty !== different) {

packages/app-headless-cms/src/admin/components/ContentEntryForm/useContentEntryForm.ts

@@ -16,10 +16,10 @@ import {
 } from "@webiny/app-headless-cms-common";
 import { useCms, useModel, useMutation } from "~/admin/hooks";
 import { prepareFormData } from "~/admin/views/contentEntries/ContentEntry/prepareFormData";
-import { CmsContentEntry, CmsEditorFieldRendererPlugin, CmsModelField } from "~/types";
+import { CmsContentEntry, CmsModelFieldRendererPlugin, CmsModelField } from "~/types";
 import { plugins } from "@webiny/plugins";
 import { getFetchPolicy } from "~/utils/getFetchPolicy";
-import { useRecords } from "@webiny/app-aco";
+import { useNavigateFolder, useRecords } from "@webiny/app-aco";
 import { ROOT_FOLDER } from "~/admin/constants";
 
 /**
@@ -45,16 +45,16 @@ interface UseContentEntryForm {
     data: Record<string, any>;
     loading: boolean;
     setLoading: Dispatch<SetStateAction<boolean>>;
-    onChange: FormOnSubmit;
-    onSubmit: FormOnSubmit;
+    onChange: FormOnSubmit<CmsContentEntry>;
+    onSubmit: FormOnSubmit<CmsContentEntry>;
     invalidFields: Record<string, string>;
-    renderPlugins: CmsEditorFieldRendererPlugin[];
+    renderPlugins: CmsModelFieldRendererPlugin[];
 }
 
 export interface UseContentEntryFormParams {
     entry: Partial<CmsContentEntry>;
-    onChange?: FormOnSubmit;
-    onSubmit?: FormOnSubmit;
+    onChange?: FormOnSubmit<CmsContentEntry>;
+    onSubmit?: FormOnSubmit<CmsContentEntry>;
     addEntryToListCache: boolean;
 }
 
@@ -88,6 +88,7 @@ export function useContentEntryForm(params: UseContentEntryFormParams): UseConte
     const { model } = useModel();
     const { history, search: routerSearch } = useRouter();
     const [query] = routerSearch;
+    const { currentFolderId } = useNavigateFolder();
     const { showSnackbar } = useSnackbar();
     const [invalidFields, setInvalidFields] = useState<Record<string, string>>({});
     const [loading, setLoading] = useState(false);
@@ -96,7 +97,7 @@ export function useContentEntryForm(params: UseContentEntryFormParams): UseConte
     const { addRecordToCache, updateRecordInCache } = useRecords();
 
     const renderPlugins = useMemo(
-        () => plugins.byType<CmsEditorFieldRendererPlugin>("cms-editor-field-renderer"),
+        () => plugins.byType<CmsModelFieldRendererPlugin>("cms-editor-field-renderer"),
         []
     );
 
@@ -150,7 +151,7 @@ export function useContentEntryForm(params: UseContentEntryFormParams): UseConte
         setInvalidFields(() => ({}));
     };
 
-    const createContent: FormOnSubmit = useCallback(
+    const createContent: FormOnSubmit<CmsContentEntry> = useCallback(
         async (formData, form) => {
             setLoading(true);
             const response = await createMutation({
@@ -162,7 +163,7 @@ export function useContentEntryForm(params: UseContentEntryFormParams): UseConte
                          * TODO: introduce hook like onEntryPublish, or similar.
                          */
                         wbyAco_location: {
-                            folderId: query.get("folderId") || ROOT_FOLDER
+                            folderId: currentFolderId || ROOT_FOLDER
                         }
                     }
                 },
@@ -201,7 +202,7 @@ export function useContentEntryForm(params: UseContentEntryFormParams): UseConte
             goToRevision(entry.id);
             return entry;
         },
-        [model.modelId, params.onSubmit, params.addEntryToListCache, query]
+        [model.modelId, params.onSubmit, params.addEntryToListCache, query, currentFolderId]
     );
 
     const updateContent = useCallback(
@@ -270,14 +271,14 @@ export function useContentEntryForm(params: UseContentEntryFormParams): UseConte
         [model.modelId]
     );
 
-    const onChange: FormOnSubmit = (data, form) => {
+    const onChange: FormOnSubmit<CmsContentEntry> = (data, form) => {
         if (!params.onChange) {
             return;
         }
         return params.onChange(data, form);
     };
 
-    const onSubmit: FormOnSubmit = async (data, form) => {
+    const onSubmit: FormOnSubmit<CmsContentEntry> = async (data, form) => {
         const fieldsIds = model.fields.map(item => item.fieldId);
         const formData = pick(data, [...fieldsIds]);
 

packages/app-headless-cms/src/admin/components/LexicalCmsEditor/LexicalCmsEditor.tsx

@@ -1,36 +1,53 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { StaticToolbar } from "@webiny/lexical-editor";
 import { RichTextEditorProps } from "@webiny/lexical-editor/types";
 import { CompositionScope } from "@webiny/react-composition";
 import { LexicalEditor } from "@webiny/app-admin/components/LexicalEditor";
 
+const placeholderStyles: React.CSSProperties = { position: "absolute", top: 40, left: 25 };
+
+const contentEditableStyles: React.CSSProperties = {
+    minHeight: 200,
+    display: "block",
+    padding: 10
+};
+
+const styles: React.CSSProperties = {
+    backgroundColor: "#fff",
+    border: "1px solid #e1e1e1",
+    padding: "10px 14px",
+    minHeight: 200,
+    maxHeight: 350
+};
+
+const toolbar = (
+    <CompositionScope name={"cms"}>
+        <StaticToolbar />
+    </CompositionScope>
+);
+
 export const LexicalCmsEditor = (props: Omit<RichTextEditorProps, "theme">) => {
+    const onChange = useCallback(
+        (jsonString: string) => {
+            if (props?.onChange) {
+                props?.onChange(JSON.parse(jsonString));
+            }
+        },
+        [props?.onChange]
+    );
+
     return (
         <LexicalEditor
             {...props}
             focus={true}
             value={JSON.stringify(props.value)}
-            onChange={(jsonString: string) => {
-                if (props?.onChange) {
-                    props?.onChange(JSON.parse(jsonString));
-                }
-            }}
-            staticToolbar={
-                <CompositionScope name={"cms"}>
-                    <StaticToolbar />
-                </CompositionScope>
-            }
+            onChange={onChange}
+            staticToolbar={toolbar}
             tag={"p"}
             placeholder={props?.placeholder || "Enter your text here..."}
-            placeholderStyles={{ position: "absolute", top: 90, left: 25 }}
-            contentEditableStyles={{ minHeight: 200, display: "block", padding: 10 }}
-            styles={{
-                backgroundColor: "#fff",
-                border: "1px solid #e1e1e1",
-                padding: "10px 14px",
-                minHeight: 200,
-                maxHeight: 350
-            }}
+            placeholderStyles={placeholderStyles}
+            contentEditableStyles={contentEditableStyles}
+            styles={styles}
         />
     );
 };

packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedMultipleReferenceField.tsx

@@ -16,9 +16,9 @@ import { ListCmsModelsQueryResponse } from "~/admin/viewsGraphql";
 import { useSnackbar } from "@webiny/app-admin";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
 import { AbsoluteLoader as Loader } from "./Loader";
-import { NewReferencedEntryDialog } from "../components/NewReferencedEntryDialog";
 import { parseIdentifier } from "@webiny/utils";
 import { Entries } from "./Entries";
+import { NewReferencedEntryDialog } from "~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog";
 
 const FieldLabel = styled("h3")({
     fontSize: 24,

packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/AdvancedSingleReferenceField.tsx

@@ -16,7 +16,7 @@ import * as GQL from "~/admin/viewsGraphql";
 import { useSnackbar } from "@webiny/app-admin";
 import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components/types";
 import { Loader } from "./Loader";
-import { NewReferencedEntryDialog } from "~/admin/plugins/fieldRenderers/ref/advanced/components/NewReferencedEntryDialog";
+import { NewReferencedEntryDialog } from "~/admin/plugins/fieldRenderers/ref/components/NewReferencedEntryDialog";
 
 const Container = styled("div")({});
 

packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/components/ReferencesDialog.tsx

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import styled from "@emotion/styled";
-import { DialogHeader } from "./dialog/DialogHeader";
 import { Search } from "./Search";
 import { Entry } from "./Entry";
 import { DialogActions, DialogContent as BaseDialogContent } from "~/admin/components/Dialog";
@@ -9,10 +8,11 @@ import { CmsReferenceValue } from "~/admin/plugins/fieldRenderers/ref/components
 import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
 import { useSnackbar } from "@webiny/app-admin";
 import { parseIdentifier } from "@webiny/utils";
-import { Dialog } from "./dialog/Dialog";
 import { AbsoluteLoader } from "~/admin/plugins/fieldRenderers/ref/advanced/components/Loader";
 import { useEntries } from "~/admin/plugins/fieldRenderers/ref/advanced/hooks/useEntries";
 import { Entries } from "./Entries";
+import { Dialog } from "~/admin/plugins/fieldRenderers/ref/components/dialog/Dialog";
+import { DialogHeader } from "~/admin/plugins/fieldRenderers/ref/components/dialog/DialogHeader";
 
 const Container = styled("div")({
     width: "100%",

packages/app-headless-cms/src/admin/plugins/fieldRenderers/ref/advanced/detailedReferenceRenderer.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import { CmsEditorFieldRendererPlugin } from "~/types";
+import { CmsModelFieldRendererPlugin } from "~/types";
 import { i18n } from "@webiny/app/i18n";
 import { AdvancedSingleReferenceField } from "./components/AdvancedSingleReferenceField";
-import { NewRefEntryDialogContextProvider } from "~/admin/plugins/fieldRenderers/ref/hooks/useNewRefEntryDialog";
 
 const t = i18n.ns("app-headless-cms/admin/fields/ref");
 
-export const createAdvancedSingleRenderer = (): CmsEditorFieldRendererPlugin => {
+export const createAdvancedSingleRenderer = (): CmsModelFieldRendererPlugin => {
     return {
         type: "cms-editor-field-renderer",
         name: "cms-editor-field-renderer-ref-single-advanced",
@@ -25,15 +24,13 @@ export const createAdvancedSingleRenderer = (): CmsEditorFieldRendererPlugin =>
                     <Bind>
                         {bind => {
                             return (
-                                <NewRefEntryDialogContextProvider>
-                                    <AdvancedSingleReferenceField
-                                        field={field}
-                                        getBind={getBind}
-                                        bind={bind}
-                                        Label={Label}
-                                        contentModel={contentModel}
-                                    />
-                                </NewRefEntryDialogContextProvider>
+                                <AdvancedSingleReferenceField
+                                    field={field}
+                                    getBind={getBind}
+                                    bind={bind}
+                                    Label={Label}
+                                    contentModel={contentModel}
+                                />
                             );
                         }}
                     </Bind>