npm - @webiny/app-headless-cms - Versions diffs - 0.0.0-unstable.bca7b3e350 → 0.0.0-unstable.c59b9cc5b9 - Mend

@webiny/app-headless-cms 0.0.0-unstable.bca7b3e350 → 0.0.0-unstable.c59b9cc5b9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (342) hide show

package/HeadlessCMS.js CHANGED Viewed

@@ -27,6 +27,12 @@ var createHeadlessCMSProvider = function createHeadlessCMSProvider(createApolloC
     };
   };
 };
+/**
+ * If there is a problem with some state being reset, it's probably because of this plugin.
+ * Check that __typename from the API and the __typename in the state are the same.
+ * If not, add it into the attachTypeName array.
+ */
+var attachTypeName = ["CmsContentEntry", "RefField"];
 var HeadlessCMSExtension = function HeadlessCMSExtension(_ref2) {
   var createApolloClient = _ref2.createApolloClient;
   _plugins.plugins.register(_apiInformation.default);
@@ -34,6 +40,8 @@ var HeadlessCMSExtension = function HeadlessCMSExtension(_ref2) {
   _plugins.plugins.register(new _app.ApolloCacheObjectIdPlugin(function (obj) {
     if (obj.__typename === "CmsContentModelField") {
       return null;
+    } else if (obj.__typename && attachTypeName.includes(obj.__typename)) {
+      return "".concat(obj.__typename, "_").concat(obj.id);
     }
     return undefined;
   }));

package/HeadlessCMS.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["createHeadlessCMSProvider","createApolloClient","Component","HeadlessCMSProvider","children","HeadlessCMSExtension","plugins","register","apiInformation","allPlugins","ApolloCacheObjectIdPlugin","obj","__typename","undefined","HeadlessCMS","memo"],"sources":["HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugins, Provider } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CmsProvider } from \"./admin/contexts/Cms\";\nimport { CmsMenuLoader } from \"~/admin/menus/CmsMenuLoader\";\nimport apiInformation from \"./admin/plugins/apiInformation\";\nimport { ContentEntriesModule } from \"./admin/views/contentEntries/experiment/ContentEntriesModule\";\nimport { DefaultOnEntryDelete } from \"./admin/plugins/entry/DefaultOnEntryDelete\";\nimport { DefaultOnEntryPublish } from \"~/admin/plugins/entry/DefaultOnEntryPublish\";\nimport allPlugins from \"./allPlugins\";\n\nconst createHeadlessCMSProvider =\n (createApolloClient: CreateApolloClient) =>\n (Component: React.FC): React.FC => {\n return function HeadlessCMSProvider({ children }) {\n return (\n <CmsProvider createApolloClient={createApolloClient}>\n <Component>{children}</Component>\n </CmsProvider>\n );\n };\n };\n\ninterface CreateApolloClientParams {\n uri: string;\n}\ninterface CreateApolloClient {\n (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n createApolloClient: CreateApolloClient;\n}\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n plugins.register(apiInformation);\n plugins.register(allPlugins);\n\n plugins.register(\n new ApolloCacheObjectIdPlugin(obj => {\n if (obj.__typename === \"CmsContentModelField\") {\n return null;\n }\n\n return undefined;\n })\n );\n\n return (\n <Fragment>\n <ContentEntriesModule />\n <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n <Plugins>\n <CmsMenuLoader />\n <DefaultOnEntryDelete />\n <DefaultOnEntryPublish />\n </Plugins>\n </Fragment>\n );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,yBAAyB,GAC3B,SADEA,yBAAyB,CAC1BC,kBAAsC;EAAA,OACvC,UAACC,SAAmB,EAAe;IAC/B,OAAO,SAASC,mBAAmB,OAAe;MAAA,IAAZC,QAAQ,QAARA,QAAQ;MAC1C,oBACI,6BAAC,gBAAW;QAAC,kBAAkB,EAAEH;MAAmB,gBAChD,6BAAC,SAAS,QAAEG,QAAQ,CAAa,CACvB;IAEtB,CAAC;EACL,CAAC;AAAA;AAaL,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,QAAiD;EAAA,~~IAA3CJ~~,kBAAkB,SAAlBA,kBAAkB;~~EAC9CK~~,gBAAO,CAACC,QAAQ,CAACC,uBAAc,CAAC;EAChCF,gBAAO,CAACC,QAAQ,CAACE,mBAAU,CAAC;EAE5BH,gBAAO,CAACC,QAAQ,CACZ,IAAIG,8BAAyB,CAAC,UAAAC,GAAG,EAAI;IACjC,IAAIA,GAAG,CAACC,UAAU,KAAK,sBAAsB,EAAE;MAC3C,OAAO,IAAI;IACf;IAEA,OAAOC,SAAS;EACpB,CAAC,CAAC,CACL;EAED,oBACI,6BAAC,eAAQ,qBACL,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,kBAAQ;IAAC,GAAG,~~EAAEb~~,yBAAyB,CAACC,kBAAkB;EAAE,EAAG,eAChE,6BAAC,iBAAO,qBACJ,6BAAC,4BAAa,OAAG,eACjB,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,4CAAqB,OAAG,CACnB,CACH;AAEnB,CAAC;AAEM,~~IAAMa~~,WAAW,gBAAG,IAAAC,WAAI,~~EAACV~~,oBAAoB,CAAC;AAAC"}
1	+ {"version":3,"names":["createHeadlessCMSProvider","createApolloClient","Component","HeadlessCMSProvider","children","attachTypeName","HeadlessCMSExtension","plugins","register","apiInformation","allPlugins","ApolloCacheObjectIdPlugin","obj","__typename","includes","id","undefined","HeadlessCMS","memo"],"sources":["HeadlessCMS.tsx"],"sourcesContent":["import React, { Fragment, memo } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport { Plugins, Provider } from \"@webiny/app-admin\";\nimport { ApolloCacheObjectIdPlugin } from \"@webiny/app\";\nimport { ApolloClient } from \"apollo-client\";\nimport { CmsProvider } from \"./admin/contexts/Cms\";\nimport { CmsMenuLoader } from \"~/admin/menus/CmsMenuLoader\";\nimport apiInformation from \"./admin/plugins/apiInformation\";\nimport { ContentEntriesModule } from \"./admin/views/contentEntries/experiment/ContentEntriesModule\";\nimport { DefaultOnEntryDelete } from \"./admin/plugins/entry/DefaultOnEntryDelete\";\nimport { DefaultOnEntryPublish } from \"~/admin/plugins/entry/DefaultOnEntryPublish\";\nimport allPlugins from \"./allPlugins\";\n\nconst createHeadlessCMSProvider =\n (createApolloClient: CreateApolloClient) =>\n (Component: React.FC): React.FC => {\n return function HeadlessCMSProvider({ children }) {\n return (\n <CmsProvider createApolloClient={createApolloClient}>\n <Component>{children}</Component>\n </CmsProvider>\n );\n };\n };\n\ninterface CreateApolloClientParams {\n uri: string;\n}\ninterface CreateApolloClient {\n (params: CreateApolloClientParams): ApolloClient<any>;\n}\n\nexport interface HeadlessCMSProps {\n createApolloClient: CreateApolloClient;\n}\n\n/*\n If there is a problem with some state being reset, it's probably because of this plugin.\n * Check that __typename from the API and the __typename in the state are the same.\n * If not, add it into the attachTypeName array.\n */\nconst attachTypeName = [\"CmsContentEntry\", \"RefField\"];\n\nconst HeadlessCMSExtension = ({ createApolloClient }: HeadlessCMSProps) => {\n plugins.register(apiInformation);\n plugins.register(allPlugins);\n\n plugins.register(\n new ApolloCacheObjectIdPlugin(obj => {\n if (obj.__typename === \"CmsContentModelField\") {\n return null;\n } else if (obj.__typename && attachTypeName.includes(obj.__typename)) {\n return `${obj.__typename}_${obj.id}`;\n }\n\n return undefined;\n })\n );\n\n return (\n <Fragment>\n <ContentEntriesModule />\n <Provider hoc={createHeadlessCMSProvider(createApolloClient)} />\n <Plugins>\n <CmsMenuLoader />\n <DefaultOnEntryDelete />\n <DefaultOnEntryPublish />\n </Plugins>\n </Fragment>\n );\n};\n\nexport const HeadlessCMS = memo(HeadlessCMSExtension);\n"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,IAAMA,yBAAyB,GAC3B,SADEA,yBAAyB,CAC1BC,kBAAsC;EAAA,OACvC,UAACC,SAAmB,EAAe;IAC/B,OAAO,SAASC,mBAAmB,OAAe;MAAA,IAAZC,QAAQ,QAARA,QAAQ;MAC1C,oBACI,6BAAC,gBAAW;QAAC,kBAAkB,EAAEH;MAAmB,gBAChD,6BAAC,SAAS,QAAEG,QAAQ,CAAa,CACvB;IAEtB,CAAC;EACL,CAAC;AAAA;AAaL;AACA;AACA;AACA;AACA;AACA,IAAMC,cAAc,GAAG,CAAC,iBAAiB,EAAE,UAAU,CAAC;AAEtD,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAoB,QAAiD;EAAA,IAA3CL,kBAAkB,SAAlBA,kBAAkB;EAC9CM,gBAAO,CAACC,QAAQ,CAACC,uBAAc,CAAC;EAChCF,gBAAO,CAACC,QAAQ,CAACE,mBAAU,CAAC;EAE5BH,gBAAO,CAACC,QAAQ,CACZ,IAAIG,8BAAyB,CAAC,UAAAC,GAAG,EAAI;IACjC,IAAIA,GAAG,CAACC,UAAU,KAAK,sBAAsB,EAAE;MAC3C,OAAO,IAAI;IACf,CAAC,MAAM,IAAID,GAAG,CAACC,UAAU,IAAIR,cAAc,CAACS,QAAQ,CAACF,GAAG,CAACC,UAAU,CAAC,EAAE;MAClE,iBAAUD,GAAG,CAACC,UAAU,cAAID,GAAG,CAACG,EAAE;IACtC;IAEA,OAAOC,SAAS;EACpB,CAAC,CAAC,CACL;EAED,oBACI,6BAAC,eAAQ,qBACL,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,kBAAQ;IAAC,GAAG,EAAEhB,yBAAyB,CAACC,kBAAkB;EAAE,EAAG,eAChE,6BAAC,iBAAO,qBACJ,6BAAC,4BAAa,OAAG,eACjB,6BAAC,0CAAoB,OAAG,eACxB,6BAAC,4CAAqB,OAAG,CACnB,CACH;AAEnB,CAAC;AAEM,IAAMgB,WAAW,gBAAG,IAAAC,WAAI,EAACZ,oBAAoB,CAAC;AAAC"}

package/admin/components/ContentEntryForm/useRenderPlugins.d.ts CHANGED Viewed

@@ -1,2 +1 @@
-import { CmsEditorFieldRendererPlugin } from "../../../types";
-export declare function useRenderPlugins(): CmsEditorFieldRendererPlugin[];
+export declare function useRenderPlugins(): import("../../../types").CmsModelFieldRendererPlugin[];

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js CHANGED Viewed

@@ -104,7 +104,7 @@ var ContentModelEditorProvider = function ContentModelEditorProvider(_ref3) {
             if (!data) {
               data = state.data;
             }
-            modelData = (0, _pick.default)(data, ["group", "layout", "fields", "tags", "name", "settings", "description", "titleFieldId"]);
+            modelData = (0, _pick.default)(data, ["group", "layout", "fields", "tags", "name", "settings", "description", "titleFieldId", "descriptionFieldId", "imageFieldId", "icon"]);
             _context.next = 4;
             return apolloClient.mutate({
               mutation: _contentModels.UPDATE_CONTENT_MODEL,

package/admin/components/ContentModelEditor/ContentModelEditorProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["contentModelEditorContext","React","createContext","undefined","contentModelEditorReducer","prev","action","data","type","cleanupModelDataFields","fields","map","field","predefinedValues","enabled","values","label","value","selected","String","cleanupModelData","ContentModelEditorProvider","children","apolloClient","modelId","useReducer","isPristine","activeTabIndex","state","dispatch","tabsRef","useRef","useRouter","history","useSnackbar","showSnackbar","setPristine","flag","saveContentModel","modelData","pick","mutate","mutation","UPDATE_CONTENT_MODEL","variables","refetchQueries","query","LIST_MENU_CONTENT_GROUPS_MODELS","response","updateContentModel","error","setActiveTabIndex","useCallback","setData","setter","saveModel","getContentModel","GET_CONTENT_MODEL","get","Error","message","useEffect","catch","push","useMemo","contentModel","Provider"],"sources":["ContentModelEditorProvider.tsx"],"sourcesContent":["import React, {\n MutableRefObject,\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef\n} from \"react\";\nimport get from \"lodash/get\";\nimport pick from \"lodash/pick\";\nimport { ApolloClient } from \"apollo-client\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport {\n GET_CONTENT_MODEL,\n GetCmsModelQueryResponse,\n GetCmsModelQueryVariables,\n UPDATE_CONTENT_MODEL,\n UpdateCmsModelMutationResponse,\n UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport { FetchResult } from \"apollo-link\";\nimport { TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\n\nexport interface ContentModelEditorProviderContext {\n apolloClient: ApolloClient<any>;\n data: CmsModel;\n contentModel: CmsModel;\n isPristine: boolean;\n getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;\n saveContentModel: (\n data?: CmsModel\n ) => Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]>;\n setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;\n tabsRef: MutableRefObject<TabsImperativeApi \| undefined>;\n activeTabIndex: number;\n setActiveTabIndex: (index: number) => void;\n}\n\nexport const contentModelEditorContext = React.createContext<\n ContentModelEditorProviderContext \| undefined\n>(undefined);\n\ntype PickedCmsModel = Pick<\n CmsModel,\n \"layout\" \| \"fields\" \| \"name\" \| \"settings\" \| \"description\" \| \"titleFieldId\" \| \"group\"\n>;\ninterface State {\n modelId: string \| null;\n isPristine: boolean;\n data: CmsModel;\n activeTabIndex: number;\n}\ninterface Action {\n data: Partial<State> \| Partial<CmsModel>;\n type: \"state\" \| \"data\";\n}\ninterface Reducer {\n (prev: State, action: Action): State;\n}\nexport const contentModelEditorReducer: Reducer = (prev: State, action: Action): State => {\n const { data, type } = action;\n switch (type) {\n case \"state\":\n return { ...prev, ...data };\n\n case \"data\":\n return { ...prev, data: data as CmsModel };\n default:\n return prev;\n }\n};\n\n/*\n Cleanup is required because backend always expects string value in predefined values entries\n /\nconst cleanupModelDataFields = (fields: CmsModelField[]): CmsModelField[] => {\n return fields.map(field => {\n const { predefinedValues } = field;\n const { enabled = false, values = [] } = predefinedValues \|\| {};\n return {\n ...field,\n predefinedValues: {\n enabled,\n values: values.map(({ label, value, selected }) => {\n return {\n label,\n selected: selected \|\| false,\n value: String(value)\n };\n })\n }\n };\n });\n};\n\nconst cleanupModelData = (data: PickedCmsModel): PickedCmsModel => {\n return {\n ...data,\n fields: cleanupModelDataFields(data.fields)\n };\n};\n\ninterface ContentModelEditorProviderProps {\n apolloClient: ApolloClient<any>;\n modelId?: string;\n children: React.ReactElement;\n}\n\nexport const ContentModelEditorProvider: React.FC<ContentModelEditorProviderProps> = ({\n children,\n apolloClient,\n modelId\n}) => {\n const [state, dispatch] = useReducer<Reducer>(contentModelEditorReducer, {\n modelId: modelId \|\| null,\n isPristine: true,\n data: null as unknown as CmsModel,\n activeTabIndex: 0\n });\n\n const tabsRef = useRef<TabsImperativeApi>();\n\n const { history } = useRouter();\n const { showSnackbar } = useSnackbar();\n\n const setPristine = (flag: boolean): void => {\n dispatch({ type: \"state\", data: { isPristine: flag } });\n };\n\n const saveContentModel = async (\n data?: CmsModel\n ): Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]> => {\n if (!data) {\n data = state.data;\n }\n const modelData: PickedCmsModel = pick(data, [\n \"group\",\n \"layout\",\n \"fields\",\n \"tags\",\n \"name\",\n \"settings\",\n \"description\",\n \"titleFieldId\"\n ]);\n const response = await apolloClient.mutate<\n UpdateCmsModelMutationResponse,\n UpdateCmsModelMutationVariables\n >({\n mutation: UPDATE_CONTENT_MODEL,\n variables: {\n modelId: data.modelId,\n data: cleanupModelData(modelData)\n },\n refetchQueries: [\n {\n query: LIST_MENU_CONTENT_GROUPS_MODELS\n }\n ]\n });\n\n setPristine(true);\n\n if (!response.data \|\| !response.data.updateContentModel) {\n return {\n data: null,\n error: null\n };\n }\n\n return response.data.updateContentModel;\n };\n\n const setActiveTabIndex = useCallback((activeTabIndex: number) => {\n dispatch({ type: \"state\", data: { activeTabIndex } });\n }, []);\n\n /\n Set form data by providing a callback, which receives a fresh copy of data on which you can work on.\n * Return new data once finished.\n */\n const setData = async (setter: (value: any) => any, saveModel = false): Promise<void> => {\n setPristine(false);\n const data = setter(state.data);\n dispatch({ type: \"data\", data });\n if (!saveModel) {\n return;\n }\n await saveContentModel(data);\n };\n\n const getContentModel = async (\n modelId: string\n ): Promise<FetchResult<GetCmsModelQueryResponse>> => {\n const response = await apolloClient.query<\n GetCmsModelQueryResponse,\n GetCmsModelQueryVariables\n >({\n query: GET_CONTENT_MODEL,\n variables: {\n modelId\n }\n });\n\n const { data, error } = get(response, \"data.getContentModel\");\n if (error) {\n throw new Error(error.message);\n }\n\n await setData(() => data, false);\n setPristine(true);\n return response;\n };\n\n useEffect(() => {\n if (!modelId) {\n return;\n }\n getContentModel(modelId).catch(() => {\n history.push(`/cms/content-models`);\n showSnackbar(`Could not load content model with given ID.`);\n });\n }, [modelId]);\n\n const value = useMemo<ContentModelEditorProviderContext>(\n () => ({\n // Keeping `data` for compatibility\n data: state.data,\n contentModel: state.data,\n modelId,\n apolloClient,\n dispatch,\n isPristine: state.isPristine,\n getContentModel,\n saveContentModel,\n setData,\n tabsRef,\n activeTabIndex: state.activeTabIndex,\n setActiveTabIndex\n }),\n [state, apolloClient]\n );\n\n const { Provider } = contentModelEditorContext;\n\n return (\n <Provider value={value}>\n <ModelProvider model={value.contentModel}>{children}</ModelProvider>\n </Provider>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"names":["contentModelEditorContext","React","createContext","undefined","contentModelEditorReducer","prev","action","data","type","cleanupModelDataFields","fields","map","field","predefinedValues","enabled","values","label","value","selected","String","cleanupModelData","ContentModelEditorProvider","children","apolloClient","modelId","useReducer","isPristine","activeTabIndex","state","dispatch","tabsRef","useRef","useRouter","history","useSnackbar","showSnackbar","setPristine","flag","saveContentModel","modelData","pick","mutate","mutation","UPDATE_CONTENT_MODEL","variables","refetchQueries","query","LIST_MENU_CONTENT_GROUPS_MODELS","response","updateContentModel","error","setActiveTabIndex","useCallback","setData","setter","saveModel","getContentModel","GET_CONTENT_MODEL","get","Error","message","useEffect","catch","push","useMemo","contentModel","Provider"],"sources":["ContentModelEditorProvider.tsx"],"sourcesContent":["import React, {\n MutableRefObject,\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef\n} from \"react\";\nimport get from \"lodash/get\";\nimport pick from \"lodash/pick\";\nimport { ApolloClient } from \"apollo-client\";\nimport { useRouter } from \"@webiny/react-router\";\nimport { useSnackbar } from \"@webiny/app-admin/hooks/useSnackbar\";\nimport {\n GET_CONTENT_MODEL,\n GetCmsModelQueryResponse,\n GetCmsModelQueryVariables,\n UPDATE_CONTENT_MODEL,\n UpdateCmsModelMutationResponse,\n UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql\";\nimport { CmsModelField, CmsModel } from \"~/types\";\nimport { FetchResult } from \"apollo-link\";\nimport { TabsImperativeApi } from \"@webiny/ui/Tabs\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider\";\n\nexport interface ContentModelEditorProviderContext {\n apolloClient: ApolloClient<any>;\n data: CmsModel;\n contentModel: CmsModel;\n isPristine: boolean;\n getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;\n saveContentModel: (\n data?: CmsModel\n ) => Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]>;\n setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;\n tabsRef: MutableRefObject<TabsImperativeApi \| undefined>;\n activeTabIndex: number;\n setActiveTabIndex: (index: number) => void;\n}\n\nexport const contentModelEditorContext = React.createContext<\n ContentModelEditorProviderContext \| undefined\n>(undefined);\n\ntype PickedCmsModel = Pick<\n CmsModel,\n \"layout\" \| \"fields\" \| \"name\" \| \"settings\" \| \"description\" \| \"titleFieldId\" \| \"group\"\n>;\ninterface State {\n modelId: string \| null;\n isPristine: boolean;\n data: CmsModel;\n activeTabIndex: number;\n}\ninterface Action {\n data: Partial<State> \| Partial<CmsModel>;\n type: \"state\" \| \"data\";\n}\ninterface Reducer {\n (prev: State, action: Action): State;\n}\nexport const contentModelEditorReducer: Reducer = (prev: State, action: Action): State => {\n const { data, type } = action;\n switch (type) {\n case \"state\":\n return { ...prev, ...data };\n\n case \"data\":\n return { ...prev, data: data as CmsModel };\n default:\n return prev;\n }\n};\n\n/*\n Cleanup is required because backend always expects string value in predefined values entries\n /\nconst cleanupModelDataFields = (fields: CmsModelField[]): CmsModelField[] => {\n return fields.map(field => {\n const { predefinedValues } = field;\n const { enabled = false, values = [] } = predefinedValues \|\| {};\n return {\n ...field,\n predefinedValues: {\n enabled,\n values: values.map(({ label, value, selected }) => {\n return {\n label,\n selected: selected \|\| false,\n value: String(value)\n };\n })\n }\n };\n });\n};\n\nconst cleanupModelData = (data: PickedCmsModel): PickedCmsModel => {\n return {\n ...data,\n fields: cleanupModelDataFields(data.fields)\n };\n};\n\ninterface ContentModelEditorProviderProps {\n apolloClient: ApolloClient<any>;\n modelId?: string;\n children: React.ReactElement;\n}\n\nexport const ContentModelEditorProvider: React.FC<ContentModelEditorProviderProps> = ({\n children,\n apolloClient,\n modelId\n}) => {\n const [state, dispatch] = useReducer<Reducer>(contentModelEditorReducer, {\n modelId: modelId \|\| null,\n isPristine: true,\n data: null as unknown as CmsModel,\n activeTabIndex: 0\n });\n\n const tabsRef = useRef<TabsImperativeApi>();\n\n const { history } = useRouter();\n const { showSnackbar } = useSnackbar();\n\n const setPristine = (flag: boolean): void => {\n dispatch({ type: \"state\", data: { isPristine: flag } });\n };\n\n const saveContentModel = async (\n data?: CmsModel\n ): Promise<UpdateCmsModelMutationResponse[\"updateContentModel\"]> => {\n if (!data) {\n data = state.data;\n }\n const modelData: PickedCmsModel = pick(data, [\n \"group\",\n \"layout\",\n \"fields\",\n \"tags\",\n \"name\",\n \"settings\",\n \"description\",\n \"titleFieldId\",\n \"descriptionFieldId\",\n \"imageFieldId\",\n \"icon\"\n ]);\n const response = await apolloClient.mutate<\n UpdateCmsModelMutationResponse,\n UpdateCmsModelMutationVariables\n >({\n mutation: UPDATE_CONTENT_MODEL,\n variables: {\n modelId: data.modelId,\n data: cleanupModelData(modelData)\n },\n refetchQueries: [\n {\n query: LIST_MENU_CONTENT_GROUPS_MODELS\n }\n ]\n });\n\n setPristine(true);\n\n if (!response.data \|\| !response.data.updateContentModel) {\n return {\n data: null,\n error: null\n };\n }\n\n return response.data.updateContentModel;\n };\n\n const setActiveTabIndex = useCallback((activeTabIndex: number) => {\n dispatch({ type: \"state\", data: { activeTabIndex } });\n }, []);\n\n /\n Set form data by providing a callback, which receives a fresh copy of data on which you can work on.\n * Return new data once finished.\n */\n const setData = async (setter: (value: any) => any, saveModel = false): Promise<void> => {\n setPristine(false);\n const data = setter(state.data);\n dispatch({ type: \"data\", data });\n if (!saveModel) {\n return;\n }\n await saveContentModel(data);\n };\n\n const getContentModel = async (\n modelId: string\n ): Promise<FetchResult<GetCmsModelQueryResponse>> => {\n const response = await apolloClient.query<\n GetCmsModelQueryResponse,\n GetCmsModelQueryVariables\n >({\n query: GET_CONTENT_MODEL,\n variables: {\n modelId\n }\n });\n\n const { data, error } = get(response, \"data.getContentModel\");\n if (error) {\n throw new Error(error.message);\n }\n\n await setData(() => data, false);\n setPristine(true);\n return response;\n };\n\n useEffect(() => {\n if (!modelId) {\n return;\n }\n getContentModel(modelId).catch(() => {\n history.push(`/cms/content-models`);\n showSnackbar(`Could not load content model with given ID.`);\n });\n }, [modelId]);\n\n const value = useMemo<ContentModelEditorProviderContext>(\n () => ({\n // Keeping `data` for compatibility\n data: state.data,\n contentModel: state.data,\n modelId,\n apolloClient,\n dispatch,\n isPristine: state.isPristine,\n getContentModel,\n saveContentModel,\n setData,\n tabsRef,\n activeTabIndex: state.activeTabIndex,\n setActiveTabIndex\n }),\n [state, apolloClient]\n );\n\n const { Provider } = contentModelEditorContext;\n\n return (\n <Provider value={value}>\n <ModelProvider model={value.contentModel}>{children}</ModelProvider>\n </Provider>\n );\n};\n"],"mappings":"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"}

package/admin/components/ContentModelEditor/Editor.d.ts CHANGED Viewed

@@ -1,4 +1,7 @@
 /// <reference types="web" />
 import React from "react";
-export declare const EditContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement>>, object>;
+export declare const EditContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: React.ElementType<any> | undefined;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const Editor: React.FC;

package/admin/components/Dialog.d.ts CHANGED Viewed

@@ -1,4 +1,8 @@
 /// <reference types="react" />
 import { Dialog as BaseDialog } from "@webiny/ui/Dialog";
 export * from "@webiny/ui/Dialog";
-export declare const Dialog: import("@emotion/styled-base").StyledComponent<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, Pick<import("@webiny/ui/Dialog").DialogProps & import("react").RefAttributes<BaseDialog>, keyof import("@webiny/ui/Dialog").DialogProps>, object>;
+export declare const Dialog: import("@emotion/styled").StyledComponent<import("@webiny/ui/Dialog").DialogProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {
+    ref?: import("react").Ref<BaseDialog> | undefined;
+}>;

package/admin/components/Dialog.js CHANGED Viewed

@@ -24,5 +24,5 @@ Object.keys(_Dialog).forEach(function (key) {
 var Dialog = /*#__PURE__*/(0, _styled.default)(_Dialog.Dialog, {
   label: "Dialog",
   target: "e1q5k1p00"
-})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:initial !important;.mdc-list:first-of-type{padding:0;}}");
+})(".mdc-dialog__surface{width:600px;min-width:600px;overflow:initial;}.mdc-dialog__content{overflow:auto;.mdc-list:first-of-type{padding:0;}}");
 exports.Dialog = Dialog;

package/admin/components/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n .mdc-dialog__surface {\n width: 600px;\n min-width: 600px;\n overflow: initial;\n }\n\n .mdc-dialog__content {\n overflow: ~~initial !important~~;\n .mdc-list:first-of-type {\n padding: 0;\n }\n }\n`;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,~~8JAatC~~;AAAC"}
1	+ {"version":3,"names":["Dialog","styled","BaseDialog"],"sources":["Dialog.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Dialog as BaseDialog } from \"@webiny/ui/Dialog\";\nexport * from \"@webiny/ui/Dialog\";\n\nexport const Dialog = styled(BaseDialog)`\n .mdc-dialog__surface {\n width: 600px;\n min-width: 600px;\n overflow: initial;\n }\n\n .mdc-dialog__content {\n overflow: auto;\n .mdc-list:first-of-type {\n padding: 0;\n }\n }\n`;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEO,IAAMA,MAAM,oBAAGC,eAAM,EAACC,cAAU;EAAA;EAAA;AAAA,gJAatC;AAAC"}

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js CHANGED Viewed

@@ -74,7 +74,7 @@ var GeneralTab = function GeneralTab() {
     });
   }
   var predefinedValuesEnabled = (0, _react.useMemo)(function () {
-    return fieldPlugin.field.allowPredefinedValues && typeof fieldPlugin.field.renderPredefinedValues === "function";
+    return (fieldPlugin.field.allowPredefinedValues || false) && typeof fieldPlugin.field.renderPredefinedValues === "function";
   }, [field.fieldId]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Grid, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
     span: 6

package/admin/components/FieldEditor/EditFieldDialog/GeneralTab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["GeneralTab","form","useForm","useModelField","field","fieldPlugin","inputRef","useRef","useModelEditor","contentModel","data","useModelFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { useModelField } from \"~/admin/hooks\";\n\nconst GeneralTab = () => {\n const form = useForm();\n const { field, fieldPlugin } = useModelField();\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const { data: contentModel } = useModelEditor();\n const { getField } = useModelFieldEditor();\n\n // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n // 1. It's probably caused by the Tabs component which wraps this component.\n // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n // in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n // it seems it's behaving correctly. ¯\\_(ツ)_/¯\n useEffect(() => {\n setTimeout(() => {\n if (!inputRef.current) {\n return;\n }\n inputRef.current.focus();\n }, /* The value of 400 was determined by manual testing. */ 400);\n }, []);\n\n const afterChangeLabel = useCallback((value: string) => {\n form.setValue(\"fieldId\", camelCase(value));\n }, []);\n\n const beforeChangeFieldId = useCallback(\n (value: string, baseOnChange: (value: string) => void) => {\n baseOnChange(value.trim());\n },\n []\n );\n\n const fieldIdValidator = useCallback(fieldId => {\n if (fieldId.trim().toLowerCase() !== \"id\") {\n return true;\n }\n\n throw new Error(`Cannot use \"id\" as Field ID.`);\n }, []);\n\n const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n const existingField = getField({ fieldId });\n if (!existingField) {\n return false;\n }\n\n if (existingField.id === field.id) {\n return true;\n }\n throw new Error(\"Please enter a unique Field ID.\");\n }, []);\n\n let additionalSettings: React.ReactNode \| null = null;\n if (typeof fieldPlugin.field.renderSettings === \"function\") {\n additionalSettings = fieldPlugin.field.renderSettings({\n afterChangeLabel,\n uniqueFieldIdValidator,\n contentModel\n });\n }\n\n const predefinedValuesEnabled = useMemo(\n (): boolean =>\n fieldPlugin.field.allowPredefinedValues &&\n typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n [field.fieldId]\n );\n\n return (\n <>\n <Grid>\n <Cell span={6}>\n <Bind\n name={\"label\"}\n validators={validation.create(\"required\")}\n afterChange={(value: string) => {\n if (field.id) {\n return;\n }\n afterChangeLabel(value);\n }}\n >\n <Input\n label={\"Label\"}\n inputRef={inputRef}\n data-testid=\"cms.editor.field.settings.general.label\"\n />\n </Bind>\n </Cell>\n <Cell span={6}>\n <Bind\n name={\"fieldId\"}\n validators={[\n validation.create(\"required\"),\n uniqueFieldIdValidator,\n fieldIdValidator\n ]}\n beforeChange={beforeChangeFieldId}\n >\n <Input\n label={\"Field ID\"}\n data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n />\n </Bind>\n </Cell>\n\n <Cell span={6}>\n <Bind name={\"multipleValues\"}>\n <Switch\n label={fieldPlugin.field.multipleValuesLabel}\n disabled={!fieldPlugin.field.allowMultipleValues}\n data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n />\n </Bind>\n </Cell>\n <Cell span={6}>\n <Bind name={\"predefinedValues.enabled\"}>\n <Switch\n label={\"Use predefined values\"}\n disabled={!predefinedValuesEnabled}\n data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n />\n </Bind>\n </Cell>\n\n <Cell span={12}>\n <Bind name={\"helpText\"}>\n <Input\n label={\"Help text\"}\n description={\"Help text (optional)\"}\n data-testid={`cms.editor.field.settings.general.helptext`}\n />\n </Bind>\n </Cell>\n <Cell span={12}>\n <Bind name={\"tags\"}>\n <Tags\n label={\"Tags\"}\n protectedTags={fieldPlugin.field.tags}\n description={\"Field tags (optional)\"}\n data-testid={`cms.editor.field.settings.general.tags`}\n />\n </Bind>\n </Cell>\n </Grid>\n {additionalSettings}\n </>\n );\n};\n\nexport default GeneralTab;\n"],"mappings":"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"}
1	+ {"version":3,"names":["GeneralTab","form","useForm","useModelField","field","fieldPlugin","inputRef","useRef","useModelEditor","contentModel","data","useModelFieldEditor","getField","useEffect","setTimeout","current","focus","afterChangeLabel","useCallback","value","setValue","beforeChangeFieldId","baseOnChange","trim","fieldIdValidator","fieldId","toLowerCase","Error","uniqueFieldIdValidator","existingField","id","additionalSettings","renderSettings","predefinedValuesEnabled","useMemo","allowPredefinedValues","renderPredefinedValues","validation","create","multipleValuesLabel","allowMultipleValues","tags"],"sources":["GeneralTab.tsx"],"sourcesContent":["import React, { useEffect, useCallback, useRef, useMemo } from \"react\";\nimport { camelCase } from \"lodash\";\nimport { Input } from \"@webiny/ui/Input\";\nimport { Switch } from \"@webiny/ui/Switch\";\nimport { Grid, Cell } from \"@webiny/ui/Grid\";\nimport { validation } from \"@webiny/validation\";\nimport { Tags } from \"@webiny/ui/Tags\";\nimport { useForm, Bind } from \"@webiny/form\";\nimport { useModelFieldEditor } from \"~/admin/components/FieldEditor\";\nimport { useModelEditor } from \"~/admin/hooks\";\nimport { useModelField } from \"~/admin/hooks\";\n\nconst GeneralTab = () => {\n const form = useForm();\n const { field, fieldPlugin } = useModelField();\n const inputRef = useRef<HTMLInputElement \| null>(null);\n const { data: contentModel } = useModelEditor();\n const { getField } = useModelFieldEditor();\n\n // Had problems with auto-focusing the \"label\" field. A couple of comments on this.\n // 1. It's probably caused by the Tabs component which wraps this component.\n // 2. It seems that the \"autoFocus\" prop on the Input doesn't work. I can't see it attached in the actual DOM.\n // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design\n // in the RMWC / Material library. If you were to click somewhere on screen, and then apply focus, then\n // it seems it's behaving correctly. ¯\\_(ツ)_/¯\n useEffect(() => {\n setTimeout(() => {\n if (!inputRef.current) {\n return;\n }\n inputRef.current.focus();\n }, /* The value of 400 was determined by manual testing. */ 400);\n }, []);\n\n const afterChangeLabel = useCallback((value: string) => {\n form.setValue(\"fieldId\", camelCase(value));\n }, []);\n\n const beforeChangeFieldId = useCallback(\n (value: string, baseOnChange: (value: string) => void) => {\n baseOnChange(value.trim());\n },\n []\n );\n\n const fieldIdValidator = useCallback(fieldId => {\n if (fieldId.trim().toLowerCase() !== \"id\") {\n return true;\n }\n\n throw new Error(`Cannot use \"id\" as Field ID.`);\n }, []);\n\n const uniqueFieldIdValidator = useCallback((fieldId: string) => {\n const existingField = getField({ fieldId });\n if (!existingField) {\n return false;\n }\n\n if (existingField.id === field.id) {\n return true;\n }\n throw new Error(\"Please enter a unique Field ID.\");\n }, []);\n\n let additionalSettings: React.ReactNode \| null = null;\n if (typeof fieldPlugin.field.renderSettings === \"function\") {\n additionalSettings = fieldPlugin.field.renderSettings({\n afterChangeLabel,\n uniqueFieldIdValidator,\n contentModel\n });\n }\n\n const predefinedValuesEnabled = useMemo(\n (): boolean =>\n (fieldPlugin.field.allowPredefinedValues \|\| false) &&\n typeof fieldPlugin.field.renderPredefinedValues === \"function\",\n [field.fieldId]\n );\n\n return (\n <>\n <Grid>\n <Cell span={6}>\n <Bind\n name={\"label\"}\n validators={validation.create(\"required\")}\n afterChange={(value: string) => {\n if (field.id) {\n return;\n }\n afterChangeLabel(value);\n }}\n >\n <Input\n label={\"Label\"}\n inputRef={inputRef}\n data-testid=\"cms.editor.field.settings.general.label\"\n />\n </Bind>\n </Cell>\n <Cell span={6}>\n <Bind\n name={\"fieldId\"}\n validators={[\n validation.create(\"required\"),\n uniqueFieldIdValidator,\n fieldIdValidator\n ]}\n beforeChange={beforeChangeFieldId}\n >\n <Input\n label={\"Field ID\"}\n data-testid={`cms.editor.field.settings.general.label-${field.id}`}\n />\n </Bind>\n </Cell>\n\n <Cell span={6}>\n <Bind name={\"multipleValues\"}>\n <Switch\n label={fieldPlugin.field.multipleValuesLabel}\n disabled={!fieldPlugin.field.allowMultipleValues}\n data-testid={`cms.editor.field.settings.general.switch-multiplevalues`}\n />\n </Bind>\n </Cell>\n <Cell span={6}>\n <Bind name={\"predefinedValues.enabled\"}>\n <Switch\n label={\"Use predefined values\"}\n disabled={!predefinedValuesEnabled}\n data-testid={`cms.editor.field.settings.general.switch-predefinedvalues`}\n />\n </Bind>\n </Cell>\n\n <Cell span={12}>\n <Bind name={\"helpText\"}>\n <Input\n label={\"Help text\"}\n description={\"Help text (optional)\"}\n data-testid={`cms.editor.field.settings.general.helptext`}\n />\n </Bind>\n </Cell>\n <Cell span={12}>\n <Bind name={\"tags\"}>\n <Tags\n label={\"Tags\"}\n protectedTags={fieldPlugin.field.tags}\n description={\"Field tags (optional)\"}\n data-testid={`cms.editor.field.settings.general.tags`}\n />\n </Bind>\n </Cell>\n </Grid>\n {additionalSettings}\n </>\n );\n};\n\nexport default GeneralTab;\n"],"mappings":";;;;;;;;;AAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,IAAMA,UAAU,GAAG,SAAbA,UAAU,GAAS;EACrB,IAAMC,IAAI,GAAG,IAAAC,aAAO,GAAE;EACtB,qBAA+B,IAAAC,oBAAa,GAAE;IAAtCC,KAAK,kBAALA,KAAK;IAAEC,WAAW,kBAAXA,WAAW;EAC1B,IAAMC,QAAQ,GAAG,IAAAC,aAAM,EAA0B,IAAI,CAAC;EACtD,sBAA+B,IAAAC,qBAAc,GAAE;IAAjCC,YAAY,mBAAlBC,IAAI;EACZ,2BAAqB,IAAAC,qBAAmB,GAAE;IAAlCC,QAAQ,wBAARA,QAAQ;;EAEhB;EACA;EACA;EACA;EACA;EACA;EACA,IAAAC,gBAAS,EAAC,YAAM;IACZC,UAAU,CAAC,YAAM;MACb,IAAI,CAACR,QAAQ,CAACS,OAAO,EAAE;QACnB;MACJ;MACAT,QAAQ,CAACS,OAAO,CAACC,KAAK,EAAE;IAC5B,CAAC,EAAE,wDAAyD,GAAG,CAAC;EACpE,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMC,gBAAgB,GAAG,IAAAC,kBAAW,EAAC,UAACC,KAAa,EAAK;IACpDlB,IAAI,CAACmB,QAAQ,CAAC,SAAS,EAAE,yBAAUD,KAAK,CAAC,CAAC;EAC9C,CAAC,EAAE,EAAE,CAAC;EAEN,IAAME,mBAAmB,GAAG,IAAAH,kBAAW,EACnC,UAACC,KAAa,EAAEG,YAAqC,EAAK;IACtDA,YAAY,CAACH,KAAK,CAACI,IAAI,EAAE,CAAC;EAC9B,CAAC,EACD,EAAE,CACL;EAED,IAAMC,gBAAgB,GAAG,IAAAN,kBAAW,EAAC,UAAAO,OAAO,EAAI;IAC5C,IAAIA,OAAO,CAACF,IAAI,EAAE,CAACG,WAAW,EAAE,KAAK,IAAI,EAAE;MACvC,OAAO,IAAI;IACf;IAEA,MAAM,IAAIC,KAAK,kCAAgC;EACnD,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMC,sBAAsB,GAAG,IAAAV,kBAAW,EAAC,UAACO,OAAe,EAAK;IAC5D,IAAMI,aAAa,GAAGjB,QAAQ,CAAC;MAAEa,OAAO,EAAPA;IAAQ,CAAC,CAAC;IAC3C,IAAI,CAACI,aAAa,EAAE;MAChB,OAAO,KAAK;IAChB;IAEA,IAAIA,aAAa,CAACC,EAAE,KAAK1B,KAAK,CAAC0B,EAAE,EAAE;MAC/B,OAAO,IAAI;IACf;IACA,MAAM,IAAIH,KAAK,CAAC,iCAAiC,CAAC;EACtD,CAAC,EAAE,EAAE,CAAC;EAEN,IAAII,kBAA0C,GAAG,IAAI;EACrD,IAAI,OAAO1B,WAAW,CAACD,KAAK,CAAC4B,cAAc,KAAK,UAAU,EAAE;IACxDD,kBAAkB,GAAG1B,WAAW,CAACD,KAAK,CAAC4B,cAAc,CAAC;MAClDf,gBAAgB,EAAhBA,gBAAgB;MAChBW,sBAAsB,EAAtBA,sBAAsB;MACtBnB,YAAY,EAAZA;IACJ,CAAC,CAAC;EACN;EAEA,IAAMwB,uBAAuB,GAAG,IAAAC,cAAO,EACnC;IAAA,OACI,CAAC7B,WAAW,CAACD,KAAK,CAAC+B,qBAAqB,IAAI,KAAK,KACjD,OAAO9B,WAAW,CAACD,KAAK,CAACgC,sBAAsB,KAAK,UAAU;EAAA,GAClE,CAAChC,KAAK,CAACqB,OAAO,CAAC,CAClB;EAED,oBACI,yEACI,6BAAC,UAAI,qBACD,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAE,gBACV,6BAAC,UAAI;IACD,IAAI,EAAE,OAAQ;IACd,UAAU,EAAEY,sBAAU,CAACC,MAAM,CAAC,UAAU,CAAE;IAC1C,WAAW,EAAE,qBAACnB,KAAa,EAAK;MAC5B,IAAIf,KAAK,CAAC0B,EAAE,EAAE;QACV;MACJ;MACAb,gBAAgB,CAACE,KAAK,CAAC;IAC3B;EAAE,gBAEF,6BAAC,YAAK;IACF,KAAK,EAAE,OAAQ;IACf,QAAQ,EAAEb,QAAS;IACnB,eAAY;EAAyC,EACvD,CACC,CACJ,eACP,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAE,gBACV,6BAAC,UAAI;IACD,IAAI,EAAE,SAAU;IAChB,UAAU,EAAE,CACR+B,sBAAU,CAACC,MAAM,CAAC,UAAU,CAAC,EAC7BV,sBAAsB,EACtBJ,gBAAgB,CAClB;IACF,YAAY,EAAEH;EAAoB,gBAElC,6BAAC,YAAK;IACF,KAAK,EAAE,UAAW;IAClB,iEAAwDjB,KAAK,CAAC0B,EAAE;EAAG,EACrE,CACC,CACJ,eAEP,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAE,gBACV,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAiB,gBACzB,6BAAC,cAAM;IACH,KAAK,EAAEzB,WAAW,CAACD,KAAK,CAACmC,mBAAoB;IAC7C,QAAQ,EAAE,CAAClC,WAAW,CAACD,KAAK,CAACoC,mBAAoB;IACjD;EAAuE,EACzE,CACC,CACJ,eACP,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAE,gBACV,6BAAC,UAAI;IAAC,IAAI,EAAE;EAA2B,gBACnC,6BAAC,cAAM;IACH,KAAK,EAAE,uBAAwB;IAC/B,QAAQ,EAAE,CAACP,uBAAwB;IACnC;EAAyE,EAC3E,CACC,CACJ,eAEP,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAG,gBACX,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAW,gBACnB,6BAAC,YAAK;IACF,KAAK,EAAE,WAAY;IACnB,WAAW,EAAE,sBAAuB;IACpC;EAA0D,EAC5D,CACC,CACJ,eACP,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAG,gBACX,6BAAC,UAAI;IAAC,IAAI,EAAE;EAAO,gBACf,6BAAC,UAAI;IACD,KAAK,EAAE,MAAO;IACd,aAAa,EAAE5B,WAAW,CAACD,KAAK,CAACqC,IAAK;IACtC,WAAW,EAAE,uBAAwB;IACrC;EAAsD,EACxD,CACC,CACJ,CACJ,EACNV,kBAAkB,CACpB;AAEX,CAAC;AAAC,eAEa/B,UAAU;AAAA"}

package/admin/components/FieldEditor/Field.js CHANGED Viewed

@@ -28,7 +28,7 @@ var _useSnackbar2 = require("@webiny/app-admin/hooks/useSnackbar");
 var _hooks = require("../../hooks");
 var _useModelFieldEditor2 = require("./useModelFieldEditor");
 var _appAdmin = require("@webiny/app-admin");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 var t = _i18n.i18n.ns("app-headless-cms/admin/components/editor/field");
 var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
   target: "erv8xml0",
@@ -61,14 +61,30 @@ var Actions = /*#__PURE__*/(0, _styled.default)("div", {
   display: "flex",
   flexDirection: "row",
   alignItems: "right",
+  position: "relative",
   "> *": {
     flex: "1 100%"
   }
 });
+/**
+ * TODO @sven to give correct values
+ */
+var FieldTypeName = /*#__PURE__*/(0, _styled.default)("div", {
+  target: "erv8xml4",
+  label: "FieldTypeName"
+})({
+  display: "flex",
+  flexDirection: "column",
+  textTransform: "uppercase",
+  color: "#938F99",
+  flex: "1",
+  textAlign: "right",
+  fontSize: "14px",
+  paddingRight: "10px"
+});
 var menuStyles = /*#__PURE__*/(0, _emotion.css)({
-  width: 220,
-  right: -105,
-  left: "auto !important",
+  width: "220px",
   ".disabled": {
     opacity: 0.5,
     pointerEvents: "none"
@@ -76,26 +92,55 @@ var menuStyles = /*#__PURE__*/(0, _emotion.css)({
 }, "label:menuStyles;");
 var FieldExtra = /*#__PURE__*/(0, _styled.default)("div", {
   label: "FieldExtra",
-  target: "erv8xml4"
+  target: "erv8xml5"
 })("padding:10px 0 10px;:empty{display:none;}");
 var allowedTitleFieldTypes = ["text", "number"];
-var isFieldAllowedToBeTitle = function isFieldAllowedToBeTitle(field, parent) {
+var isFieldAllowedToBeTitle = function isFieldAllowedToBeTitle(model, field, parent) {
   if (field.multipleValues || parent) {
     return false;
   } else if (allowedTitleFieldTypes.includes(field.type) === false) {
     return false;
+  } else if (model.titleFieldId === field.fieldId) {
+    return false;
   }
   return true;
 };
+var isFieldAllowedToBeDescription = function isFieldAllowedToBeDescription(model, field, parent) {
+  if (field.multipleValues || parent) {
+    return false;
+  } else if (model.descriptionFieldId === field.fieldId) {
+    return false;
+  }
+  return field.type === "long-text";
+};
+var isFieldAllowedToBeImage = function isFieldAllowedToBeImage(model, field, parent) {
+  var _field$settings;
+  if (field.multipleValues || parent) {
+    return false;
+  } else if (model.imageFieldId === field.fieldId) {
+    return false;
+  }
+  return field.type === "file" && ((_field$settings = field.settings) === null || _field$settings === void 0 ? void 0 : _field$settings.imagesOnly);
+};
+var getFieldTypeName = function getFieldTypeName(model, field, parent) {
+  if (parent) {
+    return null;
+  }
+  var isTitleField = field.fieldId === (model === null || model === void 0 ? void 0 : model.titleFieldId) && !parent;
+  var isDescriptionField = field.fieldId === (model === null || model === void 0 ? void 0 : model.descriptionFieldId) && !parent;
+  var isImageField = field.fieldId === (model === null || model === void 0 ? void 0 : model.imageFieldId) && !parent;
+  return [isTitleField ? "entry title" : null, isDescriptionField ? "entry description" : null, isImageField ? "entry image" : null].filter(Boolean).join("") || null;
+};
 var Field = function Field(props) {
+  var _fieldPlugin$field;
   var field = props.field,
     onEdit = props.onEdit,
     parent = props.parent;
   var _useSnackbar = (0, _useSnackbar2.useSnackbar)(),
     showSnackbar = _useSnackbar.showSnackbar;
   var _useModelEditor = (0, _hooks.useModelEditor)(),
-    setData = _useModelEditor.setData,
-    data = _useModelEditor.data;
+    setModel = _useModelEditor.setData,
+    model = _useModelEditor.data;
   var _useModelFieldEditor = (0, _useModelFieldEditor2.useModelFieldEditor)(),
     getFieldPlugin = _useModelFieldEditor.getFieldPlugin,
     getFieldRendererPlugin = _useModelFieldEditor.getFieldRendererPlugin;
@@ -104,45 +149,170 @@ var Field = function Field(props) {
       message: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["You are about to delete a field which is used in the data storage"])))), /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["All data in that field will be lost and there is no going back!"])))), /*#__PURE__*/_react.default.createElement("p", null, "\xA0"), /*#__PURE__*/_react.default.createElement("p", null, t(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["Are you sure you want to continue?"])))))
     }),
     showConfirmation = _useConfirmationDialo.showConfirmation;
-  var lockedFields = data ? data.lockedFields || [] : [];
+  var lockedFields = (model === null || model === void 0 ? void 0 : model.lockedFields) || [];
   var isLocked = lockedFields.some(function (lockedField) {
     return lockedField.fieldId === field.storageId;
   });
-  var onDelete = (0, _react.useCallback)(function () {
-    if (!isLocked) {
-      props.onDelete(field);
-      return;
-    }
-    showConfirmation(function () {
-      props.onDelete(field);
-    });
-  }, [field.fieldId, lockedFields]);
-  var setAsTitle = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
-    var response;
+  var removeFieldFromSelected = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
     return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
-          _context.next = 2;
-          return setData(function (data) {
+          if (!(model.titleFieldId === field.fieldId)) {
+            _context.next = 5;
+            break;
+          }
+          _context.next = 3;
+          return setModel(function (data) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+              titleFieldId: null
+            });
+          });
+        case 3:
+          _context.next = 13;
+          break;
+        case 5:
+          if (!(model.descriptionFieldId === field.fieldId)) {
+            _context.next = 10;
+            break;
+          }
+          _context.next = 8;
+          return setModel(function (data) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+              descriptionFieldId: null
+            });
+          });
+        case 8:
+          _context.next = 13;
+          break;
+        case 10:
+          if (!(model.imageFieldId === field.fieldId)) {
+            _context.next = 13;
+            break;
+          }
+          _context.next = 13;
+          return setModel(function (data) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+              imageFieldId: null
+            });
+          });
+        case 13:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [field.id, setModel, model]);
+  var onDelete = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3() {
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          if (isLocked) {
+            _context3.next = 5;
+            break;
+          }
+          _context3.next = 3;
+          return removeFieldFromSelected();
+        case 3:
+          props.onDelete(field);
+          return _context3.abrupt("return");
+        case 5:
+          showConfirmation( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2() {
+            return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
+                case 0:
+                  _context2.next = 2;
+                  return removeFieldFromSelected();
+                case 2:
+                  props.onDelete(field);
+                case 3:
+                case "end":
+                  return _context2.stop();
+              }
+            }, _callee2);
+          })));
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })), [field.fieldId, lockedFields]);
+  var setAsTitle = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee4() {
+    var response;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _context4.next = 2;
+          return setModel(function (data) {
             return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
               titleFieldId: field.fieldId
             });
           });
         case 2:
-          response = _context.sent;
+          response = _context4.sent;
           if (!(response && response.error)) {
-            _context.next = 5;
+            _context4.next = 5;
             break;
           }
-          return _context.abrupt("return", showSnackbar(response.error.message));
+          return _context4.abrupt("return", showSnackbar(response.error.message));
         case 5:
           showSnackbar(t(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["Title field set successfully."]))));
         case 6:
         case "end":
-          return _context.stop();
+          return _context4.stop();
       }
-    }, _callee);
-  })), [field.fieldId, setData]);
+    }, _callee4);
+  })), [field.fieldId, setModel]);
+  var setAsDescription = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee5() {
+    var response;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
+        case 0:
+          _context5.next = 2;
+          return setModel(function (data) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+              descriptionFieldId: field.fieldId
+            });
+          });
+        case 2:
+          response = _context5.sent;
+          if (!(response && response.error)) {
+            _context5.next = 5;
+            break;
+          }
+          return _context5.abrupt("return", showSnackbar(response.error.message));
+        case 5:
+          showSnackbar(t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Description field set successfully."]))));
+        case 6:
+        case "end":
+          return _context5.stop();
+      }
+    }, _callee5);
+  })), [field.fieldId, setModel]);
+  var setAsImage = (0, _react.useCallback)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee6() {
+    var response;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee6$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          _context6.next = 2;
+          return setModel(function (data) {
+            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, data), {}, {
+              imageFieldId: field.fieldId
+            });
+          });
+        case 2:
+          response = _context6.sent;
+          if (!(response && response.error)) {
+            _context6.next = 5;
+            break;
+          }
+          return _context6.abrupt("return", showSnackbar(response.error.message));
+        case 5:
+          showSnackbar(t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Image field set successfully."]))));
+        case 6:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee6);
+  })), [field.fieldId, setModel]);
   var fieldPlugin = getFieldPlugin(field.type);
   var editorFieldOptionPlugins = _plugins.plugins.byType("cms-editor-field-option");
   if (!fieldPlugin) {
@@ -150,13 +320,27 @@ var Field = function Field(props) {
   }
   var rendererPlugin = getFieldRendererPlugin(field.renderer.name);
   var canEdit = fieldPlugin.field.canEditSettings !== false;
-  var isTitleField = data && field.fieldId === data.titleFieldId && !parent;
-  var info = [rendererPlugin === null || rendererPlugin === void 0 ? void 0 : rendererPlugin.renderer.name, field.multipleValues ? "multiple values" : null, isTitleField ? "entry title" : null].filter(Boolean).join(", ");
+  var defaultInformationRenderer = (0, _react.useMemo)(function () {
+    var fieldTypeName = getFieldTypeName(model, field, parent);
+    var fn = function fn() {
+      if (!fieldTypeName) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(FieldTypeName, null, fieldTypeName);
+    };
+    fn.displayName = "FieldTypeRenderer";
+    return fn;
+  }, [field.id]);
+  var fieldInformationRenderer = (_fieldPlugin$field = fieldPlugin.field) === null || _fieldPlugin$field === void 0 ? void 0 : _fieldPlugin$field.renderInfo;
+  var info = [rendererPlugin === null || rendererPlugin === void 0 ? void 0 : rendererPlugin.renderer.name, field.multipleValues ? "multiple values" : null].filter(Boolean).join(", ");
   return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(Info, null, /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "subtitle1"
   }, field.label), /*#__PURE__*/_react.default.createElement(_Typography.Typography, {
     use: "caption"
-  }, fieldPlugin.field.label, " ", field.multipleValues && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), /*#__PURE__*/_react.default.createElement(LowerCase, null, "(", info, ")"))), /*#__PURE__*/_react.default.createElement(Actions, null, canEdit ? /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
+  }, fieldPlugin.field.label, info && /*#__PURE__*/_react.default.createElement(LowerCase, null, " (", info, ")"))), fieldInformationRenderer ? fieldInformationRenderer({
+    model: model,
+    field: field
+  }) : defaultInformationRenderer(), /*#__PURE__*/_react.default.createElement(Actions, null, canEdit ? /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
     "data-testid": "cms.editor.edit-field",
     icon: /*#__PURE__*/_react.default.createElement(_edit.ReactComponent, null),
     onClick: function onClick() {
@@ -172,18 +356,28 @@ var Field = function Field(props) {
       key: pl.name
     });
   }), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
-    disabled: !isFieldAllowedToBeTitle(field, parent),
+    disabled: !isFieldAllowedToBeTitle(model, field, parent),
     onClick: setAsTitle
   }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
-  })), t(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+  })), t(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["Use as title"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+    disabled: !isFieldAllowedToBeDescription(model, field, parent),
+    onClick: setAsDescription
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
+  })), t(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["Use as description"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
+    disabled: !isFieldAllowedToBeImage(model, field, parent),
+    onClick: setAsImage
+  }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: /*#__PURE__*/_react.default.createElement(_title24px.ReactComponent, null)
+  })), t(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["Use as image"])))), /*#__PURE__*/_react.default.createElement(_Menu.MenuItem, {
     onClick: onDelete
   }, /*#__PURE__*/_react.default.createElement(_List.ListItemGraphic, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
     icon: /*#__PURE__*/_react.default.createElement(_delete.ReactComponent, null)
-  })), t(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement(FieldExtra, null, fieldPlugin.field.render && fieldPlugin.field.render({
+  })), t(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["Delete"]))))))), /*#__PURE__*/_react.default.createElement(FieldExtra, null, fieldPlugin.field.render && fieldPlugin.field.render({
     field: field,
-    data: data,
-    setData: setData
+    data: model,
+    setData: setModel
   })));
 };
 var _default = /*#__PURE__*/_react.default.memo(Field);