fix(form): refactor to use FTA (#4122)

webiny · May 10, 2024 · 8cd450f · 8cd450f
1 parent 918aeb0
commit 8cd450f
Show file tree

Hide file tree

Showing 25 changed files with 1,059 additions and 643 deletions.
diff --git a/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileFields.tsx b/packages/app-file-manager/src/modules/HeadlessCms/fileRenderer/fileFields.tsx
@@ -87,7 +87,9 @@ const FieldRenderer = ({ getBind, Label, field }: CmsModelFieldRendererProps) =>
 
                                                 <Gallery>
                                                     {value.map((url: string, index: number) => (
-                                                        <InnerImageFieldWrapper key={url}>
+                                                        <InnerImageFieldWrapper
+                                                            key={url + "-" + index}
+                                                        >
                                                             <File
                                                                 url={url}
                                                                 showFileManager={() =>

diff --git a/packages/app-headless-cms-common/src/entries.graphql.ts b/packages/app-headless-cms-common/src/entries.graphql.ts
@@ -9,7 +9,7 @@ import {
 } from "~/types";
 import { createFieldsList } from "./createFieldsList";
 import { getModelTitleFieldId } from "./getModelTitleFieldId";
-import { FormSubmitOptions } from "@webiny/form";
+import { FormValidationOptions } from "@webiny/form";
 
 const CONTENT_META_FIELDS = /* GraphQL */ `
     meta {
@@ -340,7 +340,7 @@ export interface CmsEntryCreateMutationVariables {
      * We have any here because we do not know which fields does entry have
      */
     data: Record<string, any>;
-    options?: FormSubmitOptions;
+    options?: FormValidationOptions;
 }
 
 export const createCreateMutation = (model: CmsEditorContentModel) => {
@@ -376,7 +376,7 @@ export interface CmsEntryCreateFromMutationVariables {
      * We have any here because we do not know which fields does entry have
      */
     data?: Record<string, any>;
-    options?: FormSubmitOptions;
+    options?: FormValidationOptions;
 }
 
 export const createCreateFromMutation = (model: CmsEditorContentModel) => {
@@ -413,7 +413,7 @@ export interface CmsEntryUpdateMutationVariables {
      * We have any here because we do not know which fields does entry have
      */
     data: Record<string, any>;
-    options?: FormSubmitOptions;
+    options?: FormValidationOptions;
 }
 
 export const createUpdateMutation = (model: CmsEditorContentModel) => {

diff --git a/packages/app-headless-cms-common/src/types/index.ts b/packages/app-headless-cms-common/src/types/index.ts
@@ -234,7 +234,7 @@ export interface CmsModelFieldRendererSettingsProps {
 export interface CmsModelFieldRendererProps {
     field: CmsModelField;
     Label: React.ComponentType<React.PropsWithChildren>;
-    getBind: <T = any, F = any>(index?: number, key?: string) => BindComponent<T, F>;
+    getBind: <T = any>(index?: number, key?: string) => BindComponent<T>;
     contentModel: CmsModel;
 }
 
@@ -567,8 +567,7 @@ export interface CmsMetaResponse {
 /***
  * ###### FORM ########
  */
-export interface BindComponentRenderProp<T = any, F = Record<string, any>>
-    extends BaseBindComponentRenderProp<T, F> {
+export interface BindComponentRenderProp<T = any> extends BaseBindComponentRenderProp<T> {
     parentName: string;
     appendValue: (value: any, index?: number) => void;
     prependValue: (value: any) => void;
@@ -578,13 +577,12 @@ export interface BindComponentRenderProp<T = any, F = Record<string, any>>
     moveValueDown: (index: number) => void;
 }
 
-interface BindComponentProps<T = any, F = any>
-    extends Omit<BaseBindComponentProps, "children" | "name"> {
+interface BindComponentProps<T = any> extends Omit<BaseBindComponentProps, "children" | "name"> {
     name?: string;
-    children?: ((props: BindComponentRenderProp<T, F>) => React.ReactElement) | React.ReactElement;
+    children?: ((props: BindComponentRenderProp<T>) => React.ReactElement) | React.ReactElement;
 }
 
-export type BindComponent<T = any, F = any> = React.ComponentType<BindComponentProps<T, F>> & {
+export type BindComponent<T = any> = React.ComponentType<BindComponentProps<T>> & {
     parentName: string;
 };
 

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/lexicalText/lexicalTextInput.tsx
@@ -1,23 +1,20 @@
 import React from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
-import { CmsContentEntry, CmsEditorFieldRendererPlugin, CmsModelField } from "~/types";
+import { CmsModelFieldRendererPlugin, CmsModelField } from "~/types";
 import { BindComponentRenderProp } 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, CmsContentEntry>
-): string => {
+const getKey = (field: CmsModelField, bind: BindComponentRenderProp<string>): string => {
     const formId = bind.form.data.id || "new";
     return `${formId}.${field.fieldId}`;
 };
 
-const plugin: CmsEditorFieldRendererPlugin = {
+const plugin: CmsModelFieldRendererPlugin = {
     type: "cms-editor-field-renderer",
     name: "cms-editor-field-renderer-lexical",
     renderer: {
@@ -37,7 +34,7 @@ const plugin: CmsEditorFieldRendererPlugin = {
             return canUse;
         },
         render({ field, getBind, Label }) {
-            const Bind = getBind<string, CmsContentEntry>();
+            const Bind = getBind<string>();
             return (
                 <Bind>
                     {bind => {

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInput.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInput.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
-import { CmsContentEntry, CmsEditorFieldRendererPlugin, CmsModelField } from "~/types";
+import { CmsModelFieldRendererPlugin, CmsModelField } from "~/types";
 import { createPropsFromConfig, RichTextEditor } from "@webiny/app-admin/components/RichTextEditor";
 import { plugins } from "@webiny/plugins";
 import { BindComponentRenderProp } from "@webiny/form";
@@ -14,15 +14,12 @@ import {
 
 const t = i18n.ns("app-headless-cms/admin/fields/rich-text");
 
-const getKey = (
-    field: CmsModelField,
-    bind: BindComponentRenderProp<string, CmsContentEntry>
-): string => {
+const getKey = (field: CmsModelField, bind: BindComponentRenderProp<string>): string => {
     const formId = bind.form.data.id || "new";
     return `${formId}.${field.fieldId}`;
 };
 
-const plugin: CmsEditorFieldRendererPlugin = {
+const plugin: CmsModelFieldRendererPlugin = {
     type: "cms-editor-field-renderer",
     name: "cms-editor-field-renderer-rich-text",
     renderer: {

diff --git a/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInputs.tsx b/packages/app-headless-cms/src/admin/plugins/fieldRenderers/richText/richTextInputs.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import get from "lodash/get";
 import { i18n } from "@webiny/app/i18n";
-import { CmsModelField, CmsEditorFieldRendererPlugin } from "~/types";
+import { CmsModelField, CmsModelFieldRendererPlugin } from "~/types";
 import { ReactComponent as DeleteIcon } from "~/admin/icons/close.svg";
 import DynamicSection, { DynamicSectionPropsChildrenParams } from "../DynamicSection";
 import { createPropsFromConfig, RichTextEditor } from "@webiny/app-admin/components/RichTextEditor";
@@ -46,7 +46,7 @@ const EditorWrapper = styled("div")({
     }
 });
 
-const plugin: CmsEditorFieldRendererPlugin = {
+const plugin: CmsModelFieldRendererPlugin = {
     type: "cms-editor-field-renderer",
     name: "cms-editor-field-renderer-rich-text-inputs",
     renderer: {