@webiny/app-headless-cms 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

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

@@ -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            \"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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"}
+{"version":3,"file":"admin/components/ContentModelEditor/ContentModelEditorProvider.js","sources":["../../../../src/admin/components/ContentModelEditor/ContentModelEditorProvider.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useReducer } from \"react\";\nimport pick from \"lodash/pick.js\";\nimport { useSnackbar, useRouter } from \"@webiny/app-admin\";\nimport { useFeature } from \"@webiny/app\";\nimport type { CmsModel, CmsModelField } from \"~/types.js\";\nimport { useContainer } from \"@webiny/app\";\nimport { ModelProvider } from \"~/admin/components/ModelProvider/index.js\";\nimport { createHashing } from \"@webiny/app/utils/index.js\";\nimport { Routes } from \"~/routes.js\";\nimport type { FieldOption } from \"./fieldOptions.js\";\nimport { buildFieldOptions, buildFieldLabelPrefixes } from \"./fieldOptions.js\";\nimport { CmsLayoutFieldType } from \"~/presentation/fieldTypes/abstractions.js\";\nimport { GetModelFeature } from \"~/features/model/getModel/feature.js\";\nimport { UpdateModelFeature } from \"~/features/model/updateModel/feature.js\";\n\ntype PickedCmsModel = Pick<\n    CmsModel,\n    | \"layout\"\n    | \"fields\"\n    | \"name\"\n    | \"settings\"\n    | \"description\"\n    | \"titleFieldId\"\n    | \"descriptionFieldId\"\n    | \"imageFieldId\"\n    | \"group\"\n    | \"tags\"\n    | \"icon\"\n>;\n\nexport interface ContentModelEditorProviderContext {\n    data: CmsModel;\n    contentModel: CmsModel;\n    isPristine: boolean;\n    getContentModel: (modelId: string) => Promise<void>;\n    saveContentModel: (data?: CmsModel) => Promise<{ data: CmsModel | null; error: any | null }>;\n    setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;\n    activeTabIndex: number;\n    setActiveTabIndex: (index: number) => void;\n    fieldOptions: FieldOption[];\n}\n\nexport const contentModelEditorContext = React.createContext<\n    ContentModelEditorProviderContext | undefined\n>(undefined);\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\nconst hashModel = createHashing(\"SHA-256\");\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    modelId?: string;\n    children: React.ReactElement;\n}\n\nconst createDefaultState = (modelId?: string): State => {\n    return {\n        modelId: modelId || null,\n        isPristine: true,\n        data: null as unknown as CmsModel,\n        activeTabIndex: 0\n    };\n};\n\nexport const ContentModelEditorProvider = ({\n    children,\n    modelId\n}: ContentModelEditorProviderProps) => {\n    const { useCase: getModelUseCase } = useFeature(GetModelFeature);\n    const { useCase: updateModelUseCase } = useFeature(UpdateModelFeature);\n\n    const [state, dispatch] = useReducer(contentModelEditorReducer, createDefaultState(modelId));\n\n    const { goToRoute } = 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<{ data: CmsModel | null; error: any | null }> => {\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\n        try {\n            const result = await updateModelUseCase.execute({\n                modelId: data.modelId,\n                data: cleanupModelData(modelData)\n            });\n\n            setPristine(true);\n\n            return {\n                data: result,\n                error: null\n            };\n        } catch (ex: any) {\n            return {\n                data: null,\n                error: { message: ex.message }\n            };\n        }\n    };\n\n    const setActiveTabIndex = useCallback((activeTabIndex: number) => {\n        dispatch({ type: \"state\", data: { activeTabIndex } });\n    }, []);\n\n    const setData = async (setter: (value: any) => any, saveModel = false): Promise<void> => {\n        const data = setter(state.data);\n        const existingHash = await hashModel(state.data);\n        const newHash = await hashModel(data);\n        if (existingHash === newHash) {\n            return;\n        }\n        setPristine(false);\n        dispatch({ type: \"data\", data });\n        if (!saveModel) {\n            return;\n        }\n        await saveContentModel(data);\n    };\n\n    const getContentModel = async (id: string): Promise<void> => {\n        const data = await getModelUseCase.execute({ modelId: id });\n        data.settings = data.settings || {};\n        await setData(() => data, false);\n        setPristine(true);\n    };\n\n    useEffect(() => {\n        if (!modelId) {\n            return;\n        }\n        getContentModel(modelId).catch(() => {\n            goToRoute(Routes.ContentModels.List);\n            showSnackbar(`Could not load content model with given ID.`);\n        });\n    }, [modelId]);\n\n    const container = useContainer();\n    const layoutFieldTypes = useMemo(() => {\n        return container.resolveAll(CmsLayoutFieldType);\n    }, [container]);\n\n    const fieldOptions = useMemo(() => {\n        const model = state.data;\n        if (!model) {\n            return [];\n        }\n        const prefixes = model.layout\n            ? buildFieldLabelPrefixes(model.layout, layoutFieldTypes)\n            : undefined;\n        return buildFieldOptions(model.fields ?? [], \"\", \"\", prefixes, layoutFieldTypes);\n    }, [state.data?.fields, state.data?.layout]);\n\n    const value = useMemo<ContentModelEditorProviderContext>(\n        () => ({\n            data: state.data,\n            contentModel: state.data,\n            isPristine: state.isPristine,\n            getContentModel,\n            saveContentModel,\n            setData,\n            activeTabIndex: state.activeTabIndex,\n            setActiveTabIndex,\n            fieldOptions\n        }),\n        [state, fieldOptions]\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"],"names":["contentModelEditorContext","React","undefined","contentModelEditorReducer","prev","action","data","type","hashModel","createHashing","cleanupModelDataFields","fields","field","predefinedValues","enabled","values","label","value","selected","String","cleanupModelData","createDefaultState","modelId","ContentModelEditorProvider","children","getModelUseCase","useFeature","GetModelFeature","updateModelUseCase","UpdateModelFeature","state","dispatch","useReducer","goToRoute","useRouter","showSnackbar","useSnackbar","setPristine","flag","saveContentModel","modelData","pick","result","ex","setActiveTabIndex","useCallback","activeTabIndex","setData","setter","saveModel","existingHash","newHash","getContentModel","id","useEffect","Routes","container","useContainer","layoutFieldTypes","useMemo","CmsLayoutFieldType","fieldOptions","model","prefixes","buildFieldLabelPrefixes","buildFieldOptions","Provider","ModelProvider"],"mappings":";;;;;;;;;;;AA0CO,MAAMA,4BAA4B,WAAHA,GAAGC,MAAAA,aAAmB,CAE1DC;AAeK,MAAMC,4BAAqC,CAACC,MAAaC;IAC5D,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,GAAGF;IACvB,OAAQE;QACJ,KAAK;YACD,OAAO;gBAAE,GAAGH,IAAI;gBAAE,GAAGE,IAAI;YAAC;QAE9B,KAAK;YACD,OAAO;gBAAE,GAAGF,IAAI;gBAAE,MAAME;YAAiB;QAC7C;YACI,OAAOF;IACf;AACJ;AAEA,MAAMI,YAAYC,cAAc;AAEhC,MAAMC,yBAAyB,CAACC,SACrBA,OAAO,GAAG,CAACC,CAAAA;QACd,MAAM,EAAEC,gBAAgB,EAAE,GAAGD;QAC7B,MAAM,EAAEE,UAAU,KAAK,EAAEC,SAAS,EAAE,EAAE,GAAGF,oBAAoB,CAAC;QAC9D,OAAO;YACH,GAAGD,KAAK;YACR,kBAAkB;gBACdE;gBACA,QAAQC,OAAO,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GACnC;wBACHF;wBACA,UAAUE,YAAY;wBACtB,OAAOC,OAAOF;oBAClB;YAER;QACJ;IACJ;AAGJ,MAAMG,mBAAmB,CAACd,OACf;QACH,GAAGA,IAAI;QACP,QAAQI,uBAAuBJ,KAAK,MAAM;IAC9C;AAQJ,MAAMe,qBAAqB,CAACC,UACjB;QACH,SAASA,WAAW;QACpB,YAAY;QACZ,MAAM;QACN,gBAAgB;IACpB;AAGG,MAAMC,6BAA6B,CAAC,EACvCC,QAAQ,EACRF,OAAO,EACuB;IAC9B,MAAM,EAAE,SAASG,eAAe,EAAE,GAAGC,WAAWC;IAChD,MAAM,EAAE,SAASC,kBAAkB,EAAE,GAAGF,WAAWG;IAEnD,MAAM,CAACC,OAAOC,SAAS,GAAGC,WAAW7B,2BAA2BkB,mBAAmBC;IAEnF,MAAM,EAAEW,SAAS,EAAE,GAAGC;IACtB,MAAM,EAAEC,YAAY,EAAE,GAAGC;IAEzB,MAAMC,cAAc,CAACC;QACjBP,SAAS;YAAE,MAAM;YAAS,MAAM;gBAAE,YAAYO;YAAK;QAAE;IACzD;IAEA,MAAMC,mBAAmB,OACrBjC;QAEA,IAAI,CAACA,MACDA,OAAOwB,MAAM,IAAI;QAErB,MAAMU,YAA4BC,KAAKnC,MAAM;YACzC;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;YACA;SACH;QAED,IAAI;YACA,MAAMoC,SAAS,MAAMd,mBAAmB,OAAO,CAAC;gBAC5C,SAAStB,KAAK,OAAO;gBACrB,MAAMc,iBAAiBoB;YAC3B;YAEAH,YAAY;YAEZ,OAAO;gBACH,MAAMK;gBACN,OAAO;YACX;QACJ,EAAE,OAAOC,IAAS;YACd,OAAO;gBACH,MAAM;gBACN,OAAO;oBAAE,SAASA,GAAG,OAAO;gBAAC;YACjC;QACJ;IACJ;IAEA,MAAMC,oBAAoBC,YAAY,CAACC;QACnCf,SAAS;YAAE,MAAM;YAAS,MAAM;gBAAEe;YAAe;QAAE;IACvD,GAAG,EAAE;IAEL,MAAMC,UAAU,OAAOC,QAA6BC,YAAY,KAAK;QACjE,MAAM3C,OAAO0C,OAAOlB,MAAM,IAAI;QAC9B,MAAMoB,eAAe,MAAM1C,UAAUsB,MAAM,IAAI;QAC/C,MAAMqB,UAAU,MAAM3C,UAAUF;QAChC,IAAI4C,iBAAiBC,SACjB;QAEJd,YAAY;QACZN,SAAS;YAAE,MAAM;YAAQzB;QAAK;QAC9B,IAAI,CAAC2C,WACD;QAEJ,MAAMV,iBAAiBjC;IAC3B;IAEA,MAAM8C,kBAAkB,OAAOC;QAC3B,MAAM/C,OAAO,MAAMmB,gBAAgB,OAAO,CAAC;YAAE,SAAS4B;QAAG;QACzD/C,KAAK,QAAQ,GAAGA,KAAK,QAAQ,IAAI,CAAC;QAClC,MAAMyC,QAAQ,IAAMzC,MAAM;QAC1B+B,YAAY;IAChB;IAEAiB,UAAU;QACN,IAAI,CAAChC,SACD;QAEJ8B,gBAAgB9B,SAAS,KAAK,CAAC;YAC3BW,UAAUsB,OAAO,aAAa,CAAC,IAAI;YACnCpB,aAAa;QACjB;IACJ,GAAG;QAACb;KAAQ;IAEZ,MAAMkC,YAAYC;IAClB,MAAMC,mBAAmBC,QAAQ,IACtBH,UAAU,UAAU,CAACI,qBAC7B;QAACJ;KAAU;IAEd,MAAMK,eAAeF,QAAQ;QACzB,MAAMG,QAAQhC,MAAM,IAAI;QACxB,IAAI,CAACgC,OACD,OAAO,EAAE;QAEb,MAAMC,WAAWD,MAAM,MAAM,GACvBE,wBAAwBF,MAAM,MAAM,EAAEJ,oBACtCxD;QACN,OAAO+D,kBAAkBH,MAAM,MAAM,IAAI,EAAE,EAAE,IAAI,IAAIC,UAAUL;IACnE,GAAG;QAAC5B,MAAM,IAAI,EAAE;QAAQA,MAAM,IAAI,EAAE;KAAO;IAE3C,MAAMb,QAAQ0C,QACV,IAAO;YACH,MAAM7B,MAAM,IAAI;YAChB,cAAcA,MAAM,IAAI;YACxB,YAAYA,MAAM,UAAU;YAC5BsB;YACAb;YACAQ;YACA,gBAAgBjB,MAAM,cAAc;YACpCc;YACAiB;QACJ,IACA;QAAC/B;QAAO+B;KAAa;IAGzB,MAAM,EAAEK,QAAQ,EAAE,GAAGlE;IAErB,OAAO,WAAP,GACI,oBAACkE,UAAAA;QAAS,OAAOjD;qBACb,oBAACkD,eAAaA;QAAC,OAAOlD,MAAM,YAAY;OAAGO;AAGvD"}

package/admin/components/ContentModelEditor/FieldsGrid.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface FieldsGridProps {
+    children: React.ReactNode;
+}
+declare const FieldsGrid: ({ children }: FieldsGridProps) => React.JSX.Element;
+export { FieldsGrid, type FieldsGridProps };

package/admin/components/ContentModelEditor/FieldsGrid.js

@@ -0,0 +1,7 @@
+import react from "react";
+const FieldsGrid = ({ children })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-wrap gap-xs-plus py-sm px-md"
+    }, children);
+export { FieldsGrid };
+
+//# sourceMappingURL=FieldsGrid.js.map

package/admin/components/ContentModelEditor/FieldsGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/ContentModelEditor/FieldsGrid.js","sources":["../../../../src/admin/components/ContentModelEditor/FieldsGrid.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface FieldsGridProps {\n    children: React.ReactNode;\n}\n\nconst FieldsGrid = ({ children }: FieldsGridProps) => (\n    <div className={\"flex flex-wrap gap-xs-plus py-sm px-md\"}>{children}</div>\n);\n\nexport { FieldsGrid, type FieldsGridProps };\n"],"names":["FieldsGrid","children"],"mappings":";AAMA,MAAMA,aAAa,CAAC,EAAEC,QAAQ,EAAmB,iBAC7C,oBAAC;QAAI,WAAW;OAA2CA"}

package/admin/components/ContentModelEditor/FieldsSidebar.d.ts

@@ -1,6 +1,8 @@
-import React, { DragEventHandler } from "react";
+import type { DragEventHandler } from "react";
+import React from "react";
 interface FieldsSidebarProps {
     onFieldDragStart: DragEventHandler;
+    onCollapse?: () => void;
 }
-export declare const FieldsSidebar: React.FC<FieldsSidebarProps>;
+export declare const FieldsSidebar: ({ onFieldDragStart, onCollapse }: FieldsSidebarProps) => React.JSX.Element;
 export {};

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -1,97 +1,74 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FieldsSidebar = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _plugins = require("@webiny/plugins");
-var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _Icon = require("@webiny/ui/Icon");
-var _Draggable = _interopRequireDefault(require("../Draggable"));
-var FieldContainer = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i00",
-  label: "FieldContainer"
-})({
-  padding: "10px 15px",
-  marginBottom: 20,
-  display: "flex",
-  width: "100%",
-  backgroundColor: "var(--mdc-theme-on-background)",
-  borderRadius: 15,
-  boxSizing: "border-box",
-  cursor: "grab",
-  opacity: 1,
-  transition: "opacity 225ms",
-  "&:hover": {
-    opacity: 0.8
-  },
-  "&:last-child": {
-    marginBottom: 0
-  }
-});
-var FileInfo = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i01",
-  label: "FileInfo"
-})({});
-var FieldLabel = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i02",
-  label: "FieldLabel"
-})({
-  textTransform: "uppercase",
-  lineHeight: "145%",
-  color: "var(--mdc-theme-on-surface)"
-});
-var FieldDescription = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i03",
-  label: "FieldDescription"
-})({
-  fontSize: 14,
-  color: "var(--mdc-theme-text-secondary-on-background)"
-});
-var FieldHandle = /*#__PURE__*/(0, _styled.default)("div", {
-  target: "e1s2p6i04",
-  label: "FieldHandle"
-})({
-  marginRight: 15,
-  color: "var(--mdc-theme-on-surface)"
-});
-var Field = function Field(props) {
-  var onFieldDragStart = props.onFieldDragStart,
-    _props$fieldType = props.fieldType,
-    type = _props$fieldType.type,
-    label = _props$fieldType.label,
-    icon = _props$fieldType.icon,
-    description = _props$fieldType.description;
-  return /*#__PURE__*/_react.default.createElement(_Draggable.default, {
-    beginDrag: {
-      type: "newField",
-      fieldType: type
-    }
-  }, function (_ref) {
-    var drag = _ref.drag;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      ref: drag,
-      style: {
-        marginBottom: 10
-      },
-      "data-testid": "cms-editor-fields-field-".concat(type),
-      onDragStart: onFieldDragStart
-    }, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(FieldHandle, null, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
-      icon: icon
-    })), /*#__PURE__*/_react.default.createElement(FileInfo, null, /*#__PURE__*/_react.default.createElement(FieldLabel, null, label), /*#__PURE__*/_react.default.createElement(FieldDescription, null, description))));
-  });
-};
-var FieldsSidebar = function FieldsSidebar(_ref2) {
-  var onFieldDragStart = _ref2.onFieldDragStart;
-  var fieldTypePlugin = _plugins.plugins.byType("cms-editor-field-type");
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
-    return /*#__PURE__*/_react.default.createElement(Field, {
-      key: fieldPlugin.field.type,
-      fieldType: fieldPlugin.field,
-      onFieldDragStart: onFieldDragStart
-    });
-  }));
+import react, { useMemo } from "react";
+import { useContainer } from "@webiny/app";
+import { useModelEditor } from "../../hooks/index.js";
+import Draggable from "../Draggable.js";
+import { IconButton } from "@webiny/admin-ui";
+import { GridItem } from "./GridItem.js";
+import { SectionHeader } from "./SectionHeader.js";
+import { FieldsGrid } from "./FieldsGrid.js";
+import { ReactComponent } from "@webiny/icons/right_panel_open.svg";
+import { CmsFieldType, CmsLayoutFieldType } from "../../../presentation/fieldTypes/abstractions.js";
+const Field = ({ onFieldDragStart, fieldType })=>/*#__PURE__*/ react.createElement(Draggable, {
+        beginDrag: {
+            type: "newField",
+            fieldType: fieldType.type
+        }
+    }, ({ drag })=>/*#__PURE__*/ react.createElement(GridItem, {
+            testId: `cms-editor-fields-field-${fieldType.type}`,
+            label: fieldType.label,
+            icon: fieldType.icon,
+            onDragStart: onFieldDragStart,
+            dragRef: (element)=>drag(element)
+        }));
+const LayoutFieldItem = ({ onFieldDragStart, layoutFieldType: { type, label, icon } })=>/*#__PURE__*/ react.createElement(Draggable, {
+        beginDrag: {
+            type: "newLayoutField",
+            layoutFieldType: type
+        }
+    }, ({ drag })=>/*#__PURE__*/ react.createElement(GridItem, {
+            testId: `cms-editor-fields-layout-field-${type}`,
+            label: label,
+            icon: icon,
+            onDragStart: onFieldDragStart,
+            dragRef: (element)=>drag(element)
+        }));
+const FieldsSidebar = ({ onFieldDragStart, onCollapse })=>{
+    const container = useContainer();
+    const { data: model } = useModelEditor();
+    const fieldTypes = useMemo(()=>{
+        const existingTypes = new Set((model?.fields ?? []).map((f)=>f.type));
+        return container.resolveAll(CmsFieldType).filter((ft)=>{
+            if (ft.hideInAdmin) return false;
+            if (ft.deprecated) return existingTypes.has(ft.type);
+            return true;
+        });
+    }, [
+        container,
+        model?.fields
+    ]);
+    const layoutFieldTypes = useMemo(()=>container.resolveAll(CmsLayoutFieldType), [
+        container
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SectionHeader, {
+        title: "Fields",
+        action: onCollapse && /*#__PURE__*/ react.createElement(IconButton, {
+            variant: "ghost",
+            size: "xs",
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            onClick: onCollapse
+        })
+    }), /*#__PURE__*/ react.createElement(FieldsGrid, null, fieldTypes.map((ft)=>/*#__PURE__*/ react.createElement(Field, {
+            key: ft.type,
+            fieldType: ft,
+            onFieldDragStart: onFieldDragStart
+        }))), layoutFieldTypes.length > 0 && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SectionHeader, {
+        title: "Layout"
+    }), /*#__PURE__*/ react.createElement(FieldsGrid, null, layoutFieldTypes.map((lft)=>/*#__PURE__*/ react.createElement(LayoutFieldItem, {
+            key: lft.type,
+            layoutFieldType: lft,
+            onFieldDragStart: onFieldDragStart
+        })))));
 };
-exports.FieldsSidebar = FieldsSidebar;
+export { FieldsSidebar };
+
+//# sourceMappingURL=FieldsSidebar.js.map

package/admin/components/ContentModelEditor/FieldsSidebar.js.map

@@ -1 +1 @@
-{"version":3,"names":["FieldContainer","styled","padding","marginBottom","display","width","backgroundColor","borderRadius","boxSizing","cursor","opacity","transition","FileInfo","FieldLabel","textTransform","lineHeight","color","FieldDescription","fontSize","FieldHandle","marginRight","Field","props","onFieldDragStart","fieldType","type","label","icon","description","drag","FieldsSidebar","fieldTypePlugin","plugins","byType","map","fieldPlugin","field"],"sources":["FieldsSidebar.tsx"],"sourcesContent":["import React, { DragEventHandler } from \"react\";\nimport { plugins } from \"@webiny/plugins\";\nimport styled from \"@emotion/styled\";\nimport { Icon } from \"@webiny/ui/Icon\";\nimport Draggable from \"../Draggable\";\nimport { CmsModelFieldTypePlugin } from \"~/types\";\n\nconst FieldContainer = styled(\"div\")({\n    padding: \"10px 15px\",\n    marginBottom: 20,\n    display: \"flex\",\n    width: \"100%\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 15,\n    boxSizing: \"border-box\",\n    cursor: \"grab\",\n    opacity: 1,\n    transition: \"opacity 225ms\",\n    \"&:hover\": {\n        opacity: 0.8\n    },\n    \"&:last-child\": {\n        marginBottom: 0\n    }\n});\n\nconst FileInfo = styled(\"div\")({});\n\nconst FieldLabel = styled(\"div\")({\n    textTransform: \"uppercase\",\n    lineHeight: \"145%\",\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\nconst FieldDescription = styled(\"div\")({\n    fontSize: 14,\n    color: \"var(--mdc-theme-text-secondary-on-background)\"\n});\n\nconst FieldHandle = styled(\"div\")({\n    marginRight: 15,\n    color: \"var(--mdc-theme-on-surface)\"\n});\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: CmsModelFieldTypePlugin[\"field\"];\n}\nconst Field: React.FC<FieldProps> = props => {\n    const {\n        onFieldDragStart,\n        fieldType: { type, label, icon, description }\n    } = props;\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: type }}>\n            {({ drag }) => (\n                <div\n                    ref={drag}\n                    style={{ marginBottom: 10 }}\n                    data-testid={`cms-editor-fields-field-${type}`}\n                    onDragStart={onFieldDragStart}\n                >\n                    <FieldContainer>\n                        <FieldHandle>\n                            <Icon icon={icon as React.ReactElement} />\n                        </FieldHandle>\n                        <FileInfo>\n                            <FieldLabel>{label}</FieldLabel>\n                            <FieldDescription>{description}</FieldDescription>\n                        </FileInfo>\n                    </FieldContainer>\n                </div>\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n}\nexport const FieldsSidebar: React.FC<FieldsSidebarProps> = ({ onFieldDragStart }) => {\n    const fieldTypePlugin = plugins.byType<CmsModelFieldTypePlugin>(\"cms-editor-field-type\");\n\n    return (\n        <React.Fragment>\n            {fieldTypePlugin.map(fieldPlugin => (\n                <Field\n                    key={fieldPlugin.field.type}\n                    fieldType={fieldPlugin.field}\n                    onFieldDragStart={onFieldDragStart}\n                />\n            ))}\n        </React.Fragment>\n    );\n};\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAGA,IAAMA,cAAc,oBAAGC,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACjCC,OAAO,EAAE,WAAW;EACpBC,YAAY,EAAE,EAAE;EAChBC,OAAO,EAAE,MAAM;EACfC,KAAK,EAAE,MAAM;EACbC,eAAe,EAAE,gCAAgC;EACjDC,YAAY,EAAE,EAAE;EAChBC,SAAS,EAAE,YAAY;EACvBC,MAAM,EAAE,MAAM;EACdC,OAAO,EAAE,CAAC;EACVC,UAAU,EAAE,eAAe;EAC3B,SAAS,EAAE;IACPD,OAAO,EAAE;EACb,CAAC;EACD,cAAc,EAAE;IACZP,YAAY,EAAE;EAClB;AACJ,CAAC,CAAC;AAEF,IAAMS,QAAQ,oBAAGX,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE,CAAC,CAAC,CAAC;AAElC,IAAMY,UAAU,oBAAGZ,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC7Ba,aAAa,EAAE,WAAW;EAC1BC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMC,gBAAgB,oBAAGhB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EACnCiB,QAAQ,EAAE,EAAE;EACZF,KAAK,EAAE;AACX,CAAC,CAAC;AAEF,IAAMG,WAAW,oBAAGlB,eAAM,EAAC,KAAK;EAAA;EAAA;AAAA,GAAE;EAC9BmB,WAAW,EAAE,EAAE;EACfJ,KAAK,EAAE;AACX,CAAC,CAAC;AAMF,IAAMK,KAA2B,GAAG,SAA9BA,KAA2B,CAAGC,KAAK,EAAI;EACzC,IACIC,gBAAgB,GAEhBD,KAAK,CAFLC,gBAAgB;IAAA,mBAEhBD,KAAK,CADLE,SAAS;IAAIC,IAAI,oBAAJA,IAAI;IAAEC,KAAK,oBAALA,KAAK;IAAEC,IAAI,oBAAJA,IAAI;IAAEC,WAAW,oBAAXA,WAAW;EAE/C,oBACI,6BAAC,kBAAS;IAAC,SAAS,EAAE;MAAEH,IAAI,EAAE,UAAU;MAAED,SAAS,EAAEC;IAAK;EAAE,GACvD;IAAA,IAAGI,IAAI,QAAJA,IAAI;IAAA,oBACJ;MACI,GAAG,EAAEA,IAAK;MACV,KAAK,EAAE;QAAE1B,YAAY,EAAE;MAAG,CAAE;MAC5B,iDAAwCsB,IAAI,CAAG;MAC/C,WAAW,EAAEF;IAAiB,gBAE9B,6BAAC,cAAc,qBACX,6BAAC,WAAW,qBACR,6BAAC,UAAI;MAAC,IAAI,EAAEI;IAA2B,EAAG,CAChC,eACd,6BAAC,QAAQ,qBACL,6BAAC,UAAU,QAAED,KAAK,CAAc,eAChC,6BAAC,gBAAgB,QAAEE,WAAW,CAAoB,CAC3C,CACE,CACf;EAAA,CACT,CACO;AAEpB,CAAC;AAKM,IAAME,aAA2C,GAAG,SAA9CA,aAA2C,QAA6B;EAAA,IAAvBP,gBAAgB,SAAhBA,gBAAgB;EAC1E,IAAMQ,eAAe,GAAGC,gBAAO,CAACC,MAAM,CAA0B,uBAAuB,CAAC;EAExF,oBACI,6BAAC,cAAK,CAAC,QAAQ,QACVF,eAAe,CAACG,GAAG,CAAC,UAAAC,WAAW;IAAA,oBAC5B,6BAAC,KAAK;MACF,GAAG,EAAEA,WAAW,CAACC,KAAK,CAACX,IAAK;MAC5B,SAAS,EAAEU,WAAW,CAACC,KAAM;MAC7B,gBAAgB,EAAEb;IAAiB,EACrC;EAAA,CACL,CAAC,CACW;AAEzB,CAAC;AAAC"}
+{"version":3,"file":"admin/components/ContentModelEditor/FieldsSidebar.js","sources":["../../../../src/admin/components/ContentModelEditor/FieldsSidebar.tsx"],"sourcesContent":["import type { DragEventHandler } from \"react\";\nimport React, { useMemo } from \"react\";\nimport { useContainer } from \"@webiny/app\";\nimport { useModelEditor } from \"~/admin/hooks/index.js\";\nimport Draggable from \"../Draggable.js\";\nimport { IconButton } from \"@webiny/admin-ui\";\nimport { GridItem } from \"./GridItem.js\";\nimport { SectionHeader } from \"./SectionHeader.js\";\nimport { FieldsGrid } from \"./FieldsGrid.js\";\nimport { ReactComponent as CollapseSidebarIcon } from \"@webiny/icons/right_panel_open.svg\";\nimport { CmsFieldType, type ICmsFieldType } from \"~/presentation/fieldTypes/abstractions.js\";\nimport {\n    CmsLayoutFieldType,\n    type ICmsLayoutFieldType\n} from \"~/presentation/fieldTypes/abstractions.js\";\n\ninterface FieldProps {\n    onFieldDragStart: DragEventHandler;\n    fieldType: ICmsFieldType;\n}\n\nconst Field = ({ onFieldDragStart, fieldType }: FieldProps) => {\n    return (\n        <Draggable beginDrag={{ type: \"newField\", fieldType: fieldType.type }}>\n            {({ drag }) => (\n                <GridItem\n                    testId={`cms-editor-fields-field-${fieldType.type}`}\n                    label={fieldType.label}\n                    icon={fieldType.icon}\n                    onDragStart={onFieldDragStart}\n                    dragRef={element => drag(element)}\n                />\n            )}\n        </Draggable>\n    );\n};\n\ninterface LayoutFieldItemProps {\n    onFieldDragStart: DragEventHandler;\n    layoutFieldType: ICmsLayoutFieldType;\n}\n\nconst LayoutFieldItem = ({\n    onFieldDragStart,\n    layoutFieldType: { type, label, icon }\n}: LayoutFieldItemProps) => {\n    return (\n        <Draggable beginDrag={{ type: \"newLayoutField\", layoutFieldType: type }}>\n            {({ drag }) => (\n                <GridItem\n                    testId={`cms-editor-fields-layout-field-${type}`}\n                    label={label}\n                    icon={icon as React.ReactElement}\n                    onDragStart={onFieldDragStart}\n                    dragRef={element => drag(element)}\n                />\n            )}\n        </Draggable>\n    );\n};\n\ninterface FieldsSidebarProps {\n    onFieldDragStart: DragEventHandler;\n    onCollapse?: () => void;\n}\n\nexport const FieldsSidebar = ({ onFieldDragStart, onCollapse }: FieldsSidebarProps) => {\n    const container = useContainer();\n    const { data: model } = useModelEditor();\n\n    const fieldTypes = useMemo(() => {\n        const existingTypes = new Set((model?.fields ?? []).map(f => f.type));\n        return container.resolveAll(CmsFieldType).filter(ft => {\n            if (ft.hideInAdmin) {\n                return false;\n            }\n            // Deprecated field types (e.g. \"file\", superseded by \"asset\") are only\n            // offered when the model already contains a field of that type, so\n            // existing models stay editable while new fields use the replacement.\n            if (ft.deprecated) {\n                return existingTypes.has(ft.type);\n            }\n            return true;\n        });\n    }, [container, model?.fields]);\n\n    const layoutFieldTypes = useMemo(() => {\n        return container.resolveAll(CmsLayoutFieldType);\n    }, [container]);\n\n    return (\n        <>\n            <SectionHeader\n                title={\"Fields\"}\n                action={\n                    onCollapse && (\n                        <IconButton\n                            variant={\"ghost\"}\n                            size={\"xs\"}\n                            icon={<CollapseSidebarIcon />}\n                            onClick={onCollapse}\n                        />\n                    )\n                }\n            />\n            <FieldsGrid>\n                {fieldTypes.map(ft => (\n                    <Field key={ft.type} fieldType={ft} onFieldDragStart={onFieldDragStart} />\n                ))}\n            </FieldsGrid>\n            {layoutFieldTypes.length > 0 && (\n                <>\n                    <SectionHeader title={\"Layout\"} />\n                    <FieldsGrid>\n                        {layoutFieldTypes.map(lft => (\n                            <LayoutFieldItem\n                                key={lft.type}\n                                layoutFieldType={lft}\n                                onFieldDragStart={onFieldDragStart}\n                            />\n                        ))}\n                    </FieldsGrid>\n                </>\n            )}\n        </>\n    );\n};\n"],"names":["Field","onFieldDragStart","fieldType","Draggable","drag","GridItem","element","LayoutFieldItem","type","label","icon","FieldsSidebar","onCollapse","container","useContainer","model","useModelEditor","fieldTypes","useMemo","existingTypes","Set","f","CmsFieldType","ft","layoutFieldTypes","CmsLayoutFieldType","SectionHeader","IconButton","CollapseSidebarIcon","FieldsGrid","lft"],"mappings":";;;;;;;;;;AAqBA,MAAMA,QAAQ,CAAC,EAAEC,gBAAgB,EAAEC,SAAS,EAAc,GAC/C,WAAP,GACI,oBAACC,WAASA;QAAC,WAAW;YAAE,MAAM;YAAY,WAAWD,UAAU,IAAI;QAAC;OAC/D,CAAC,EAAEE,IAAI,EAAE,iBACN,oBAACC,UAAQA;YACL,QAAQ,CAAC,wBAAwB,EAAEH,UAAU,IAAI,EAAE;YACnD,OAAOA,UAAU,KAAK;YACtB,MAAMA,UAAU,IAAI;YACpB,aAAaD;YACb,SAASK,CAAAA,UAAWF,KAAKE;;AAY7C,MAAMC,kBAAkB,CAAC,EACrBN,gBAAgB,EAChB,iBAAiB,EAAEO,IAAI,EAAEC,KAAK,EAAEC,IAAI,EAAE,EACnB,GACZ,WAAP,GACI,oBAACP,WAASA;QAAC,WAAW;YAAE,MAAM;YAAkB,iBAAiBK;QAAK;OACjE,CAAC,EAAEJ,IAAI,EAAE,iBACN,oBAACC,UAAQA;YACL,QAAQ,CAAC,+BAA+B,EAAEG,MAAM;YAChD,OAAOC;YACP,MAAMC;YACN,aAAaT;YACb,SAASK,CAAAA,UAAWF,KAAKE;;AAYtC,MAAMK,gBAAgB,CAAC,EAAEV,gBAAgB,EAAEW,UAAU,EAAsB;IAC9E,MAAMC,YAAYC;IAClB,MAAM,EAAE,MAAMC,KAAK,EAAE,GAAGC;IAExB,MAAMC,aAAaC,QAAQ;QACvB,MAAMC,gBAAgB,IAAIC,IAAKL,AAAAA,CAAAA,OAAO,UAAU,EAAC,EAAG,GAAG,CAACM,CAAAA,IAAKA,EAAE,IAAI;QACnE,OAAOR,UAAU,UAAU,CAACS,cAAc,MAAM,CAACC,CAAAA;YAC7C,IAAIA,GAAG,WAAW,EACd,OAAO;YAKX,IAAIA,GAAG,UAAU,EACb,OAAOJ,cAAc,GAAG,CAACI,GAAG,IAAI;YAEpC,OAAO;QACX;IACJ,GAAG;QAACV;QAAWE,OAAO;KAAO;IAE7B,MAAMS,mBAAmBN,QAAQ,IACtBL,UAAU,UAAU,CAACY,qBAC7B;QAACZ;KAAU;IAEd,OAAO,WAAP,GACI,wDACI,oBAACa,eAAaA;QACV,OAAO;QACP,QACId,cAAc,WAAdA,GACI,oBAACe,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAmBA;YAC1B,SAAShB;;sBAKzB,oBAACiB,YAAUA,MACNZ,WAAW,GAAG,CAACM,CAAAA,KAAAA,WAAAA,GACZ,oBAACvB,OAAKA;YAAC,KAAKuB,GAAG,IAAI;YAAE,WAAWA;YAAI,kBAAkBtB;cAG7DuB,iBAAiB,MAAM,GAAG,KAAK,WAAL,GACvB,wDACI,oBAACE,eAAaA;QAAC,OAAO;sBACtB,oBAACG,YAAUA,MACNL,iBAAiB,GAAG,CAACM,CAAAA,MAAAA,WAAAA,GAClB,oBAACvB,iBAAeA;YACZ,KAAKuB,IAAI,IAAI;YACb,iBAAiBA;YACjB,kBAAkB7B;;AAQlD"}

package/admin/components/ContentModelEditor/GridItem.d.ts

@@ -0,0 +1,11 @@
+import type { DragEventHandler } from "react";
+import React from "react";
+interface GridItemProps {
+    testId: string;
+    label: string;
+    icon: React.ReactElement;
+    onDragStart: DragEventHandler;
+    dragRef: (element: HTMLElement | null) => void;
+}
+declare const GridItem: ({ testId, label, icon, onDragStart, dragRef }: GridItemProps) => React.JSX.Element;
+export { GridItem, type GridItemProps };

package/admin/components/ContentModelEditor/GridItem.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { Icon } from "@webiny/admin-ui";
+const GridItem = ({ testId, label, icon, onDragStart, dragRef })=>/*#__PURE__*/ react.createElement("div", {
+        ref: dragRef,
+        "data-testid": testId,
+        onDragStart: onDragStart,
+        className: "flex flex-col items-center justify-center gap-[8px] size-20 bg-neutral-subtle rounded-md cursor-grab shrink-0"
+    }, /*#__PURE__*/ react.createElement(Icon, {
+        icon: icon,
+        label: label,
+        size: "lg",
+        color: "neutral-strong"
+    }), /*#__PURE__*/ react.createElement("span", {
+        className: "text-xs font-normal text-neutral-strong text-center leading-4 overflow-hidden text-ellipsis whitespace-nowrap w-full px-[8px]"
+    }, label));
+export { GridItem };
+
+//# sourceMappingURL=GridItem.js.map

package/admin/components/ContentModelEditor/GridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/ContentModelEditor/GridItem.js","sources":["../../../../src/admin/components/ContentModelEditor/GridItem.tsx"],"sourcesContent":["import type { DragEventHandler } from \"react\";\nimport React from \"react\";\nimport { Icon } from \"@webiny/admin-ui\";\n\ninterface GridItemProps {\n    testId: string;\n    label: string;\n    icon: React.ReactElement;\n    onDragStart: DragEventHandler;\n    dragRef: (element: HTMLElement | null) => void;\n}\n\nconst GridItem = ({ testId, label, icon, onDragStart, dragRef }: GridItemProps) => {\n    return (\n        <div\n            ref={dragRef}\n            data-testid={testId}\n            onDragStart={onDragStart}\n            className={\n                \"flex flex-col items-center justify-center gap-[8px] size-20 bg-neutral-subtle rounded-md cursor-grab shrink-0\"\n            }\n        >\n            <Icon icon={icon} label={label} size={\"lg\"} color={\"neutral-strong\"} />\n            <span\n                className={\n                    \"text-xs font-normal text-neutral-strong text-center leading-4 overflow-hidden text-ellipsis whitespace-nowrap w-full px-[8px]\"\n                }\n            >\n                {label}\n            </span>\n        </div>\n    );\n};\n\nexport { GridItem, type GridItemProps };\n"],"names":["GridItem","testId","label","icon","onDragStart","dragRef","Icon"],"mappings":";;AAYA,MAAMA,WAAW,CAAC,EAAEC,MAAM,EAAEC,KAAK,EAAEC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAiB,GACnE,WAAP,GACI,oBAAC;QACG,KAAKA;QACL,eAAaJ;QACb,aAAaG;QACb,WACI;qBAGJ,oBAACE,MAAIA;QAAC,MAAMH;QAAM,OAAOD;QAAO,MAAM;QAAM,OAAO;sBACnD,oBAAC;QACG,WACI;OAGHA"}

package/admin/components/ContentModelEditor/Header.d.ts

@@ -1,3 +1,7 @@
 import React from "react";
-declare const EditorBar: React.FC;
+interface EditorBarProps {
+    activeTab: string;
+    onTabChange: (tab: string) => void;
+}
+declare const EditorBar: ({ activeTab, onTabChange }: EditorBarProps) => React.JSX.Element;
 export default EditorBar;

package/admin/components/ContentModelEditor/Header.js

@@ -1,33 +1,38 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TopAppBar = require("@webiny/ui/TopAppBar");
-var _plugins = require("@webiny/app/plugins");
-var _emotion = require("emotion");
-var topBar = /*#__PURE__*/(0, _emotion.css)({
-  boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
-}, "label:topBar;");
-var EditorBar = function EditorBar() {
-  return /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBar, {
-    className: topBar,
-    fixed: true,
-    "data-testid": "cms-editor-top-bar"
-  }, /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-    style: {
-      width: "50%"
-    },
-    alignEnd: true
-  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-left")), /*#__PURE__*/_react.default.createElement(_TopAppBar.TopAppBarSection, {
-    style: {
-      width: "50%"
+import react from "react";
+import { HeaderBar, SegmentedControlPrimitive } from "@webiny/admin-ui";
+import { renderPlugins } from "@webiny/app/plugins/index.js";
+import { ReactComponent } from "@webiny/icons/dashboard.svg";
+import { ReactComponent as table_chart_svg_ReactComponent } from "@webiny/icons/table_chart.svg";
+const EDITOR_TABS = [
+    {
+        id: "edit",
+        label: "Edit",
+        value: "edit",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null)
     },
-    alignEnd: true
-  }, (0, _plugins.renderPlugins)("content-model-editor-default-bar-right")));
-};
-var _default = EditorBar;
-exports.default = _default;
+    {
+        id: "preview",
+        label: "Preview",
+        value: "preview",
+        icon: /*#__PURE__*/ react.createElement(table_chart_svg_ReactComponent, null)
+    }
+];
+const EditorBar = ({ activeTab, onTabChange })=>/*#__PURE__*/ react.createElement(HeaderBar, {
+        "data-testid": "cms-editor-top-bar",
+        start: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-start"
+        }, renderPlugins("content-model-editor-default-bar-left")),
+        middle: /*#__PURE__*/ react.createElement(SegmentedControlPrimitive, {
+            variant: "dimmed",
+            items: EDITOR_TABS,
+            value: activeTab,
+            onChange: onTabChange
+        }),
+        end: /*#__PURE__*/ react.createElement("div", {
+            className: "flex items-center justify-end"
+        }, renderPlugins("content-model-editor-default-bar-right"))
+    });
+const Header = EditorBar;
+export default Header;
+
+//# sourceMappingURL=Header.js.map

package/admin/components/ContentModelEditor/Header.js.map

@@ -1 +1 @@
-{"version":3,"names":["topBar","css","boxShadow","EditorBar","width","renderPlugins"],"sources":["Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { TopAppBar, TopAppBarSection } from \"@webiny/ui/TopAppBar\";\nimport { renderPlugins } from \"@webiny/app/plugins\";\n\nimport { css } from \"emotion\";\n\nconst topBar = css({\n    boxShadow: \"1px 0px 5px 0px rgba(128,128,128,1)\"\n});\n\nconst EditorBar: React.FC = () => {\n    return (\n        <TopAppBar className={topBar} fixed data-testid={\"cms-editor-top-bar\"}>\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-left\")}\n            </TopAppBarSection>\n\n            <TopAppBarSection style={{ width: \"50%\" }} alignEnd>\n                {renderPlugins(\"content-model-editor-default-bar-right\")}\n            </TopAppBarSection>\n        </TopAppBar>\n    );\n};\n\nexport default EditorBar;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAEA;AAEA,IAAMA,MAAM,gBAAG,IAAAC,YAAG,EAAC;EACfC,SAAS,EAAE;AACf,CAAC,kBAAC;AAEF,IAAMC,SAAmB,GAAG,SAAtBA,SAAmB,GAAS;EAC9B,oBACI,6BAAC,oBAAS;IAAC,SAAS,EAAEH,MAAO;IAAC,KAAK;IAAC,eAAa;EAAqB,gBAClE,6BAAC,2BAAgB;IAAC,KAAK,EAAE;MAAEI,KAAK,EAAE;IAAM,CAAE;IAAC,QAAQ;EAAA,GAC9C,IAAAC,sBAAa,EAAC,uCAAuC,CAAC,CACxC,eAEnB,6BAAC,2BAAgB;IAAC,KAAK,EAAE;MAAED,KAAK,EAAE;IAAM,CAAE;IAAC,QAAQ;EAAA,GAC9C,IAAAC,sBAAa,EAAC,wCAAwC,CAAC,CACzC,CACX;AAEpB,CAAC;AAAC,eAEaF,SAAS;AAAA"}
+{"version":3,"file":"admin/components/ContentModelEditor/Header.js","sources":["../../../../src/admin/components/ContentModelEditor/Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { HeaderBar, SegmentedControlPrimitive } from \"@webiny/admin-ui\";\nimport { renderPlugins } from \"@webiny/app/plugins/index.js\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/dashboard.svg\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/table_chart.svg\";\n\nconst EDITOR_TABS = [\n    { id: \"edit\", label: \"Edit\", value: \"edit\", icon: <EditIcon /> },\n    { id: \"preview\", label: \"Preview\", value: \"preview\", icon: <PreviewIcon /> }\n];\n\ninterface EditorBarProps {\n    activeTab: string;\n    onTabChange: (tab: string) => void;\n}\n\nconst EditorBar = ({ activeTab, onTabChange }: EditorBarProps) => {\n    return (\n        <HeaderBar\n            data-testid={\"cms-editor-top-bar\"}\n            start={\n                <div className={\"flex items-center justify-start\"}>\n                    {renderPlugins(\"content-model-editor-default-bar-left\")}\n                </div>\n            }\n            middle={\n                <SegmentedControlPrimitive\n                    variant={\"dimmed\"}\n                    items={EDITOR_TABS}\n                    value={activeTab}\n                    onChange={onTabChange}\n                />\n            }\n            end={\n                <div className={\"flex items-center justify-end\"}>\n                    {renderPlugins(\"content-model-editor-default-bar-right\")}\n                </div>\n            }\n        />\n    );\n};\n\nexport default EditorBar;\n"],"names":["EDITOR_TABS","EditIcon","PreviewIcon","EditorBar","activeTab","onTabChange","HeaderBar","renderPlugins","SegmentedControlPrimitive"],"mappings":";;;;;AAMA,MAAMA,cAAc;IAChB;QAAE,IAAI;QAAQ,OAAO;QAAQ,OAAO;QAAQ,MAAM,WAAN,GAAM,oBAACC,gBAAQA;IAAI;IAC/D;QAAE,IAAI;QAAW,OAAO;QAAW,OAAO;QAAW,MAAM,WAAN,GAAM,oBAACC,gCAAWA;IAAI;CAC9E;AAOD,MAAMC,YAAY,CAAC,EAAEC,SAAS,EAAEC,WAAW,EAAkB,GAClD,WAAP,GACI,oBAACC,WAASA;QACN,eAAa;QACb,qBACI,oBAAC;YAAI,WAAW;WACXC,cAAc;QAGvB,sBACI,oBAACC,2BAAyBA;YACtB,SAAS;YACT,OAAOR;YACP,OAAOI;YACP,UAAUC;;QAGlB,mBACI,oBAAC;YAAI,WAAW;WACXE,cAAc;;AAOnC,eAAeJ"}

package/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { CmsModel } from "@webiny/app-headless-cms-common/types/index.js";
+export interface ImageProps {
+    className?: string;
+    alt?: string;
+}
+export interface IModelIsBeingDeletedProps {
+    model: Pick<CmsModel, "name">;
+}
+export declare const ModelIsBeingDeletedError: (props: IModelIsBeingDeletedProps) => React.JSX.Element;

package/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.js

@@ -0,0 +1,57 @@
+import react_helmet from "react-helmet";
+import { css } from "@emotion/css";
+import styled from "@emotion/styled";
+import { Text } from "@webiny/admin-ui";
+import SecureRouteError from "./SecureRouteError.js";
+import { useRouter } from "@webiny/app-admin";
+import { Routes } from "../../../../routes.js";
+import * as __rspack_external_react from "react";
+const ContentWrapper = styled("div")({
+    display: "block",
+    paddingTop: "15%",
+    textAlign: "center",
+    margin: "auto"
+});
+const styles = {
+    authErrorImgStyle: css({
+        width: "192px",
+        paddingBottom: "24px"
+    }),
+    bodyStyle: css({
+        color: "var(--mdc-theme-text-primary-on-background)",
+        display: "block",
+        " strong": {
+            fontWeight: "bold"
+        }
+    }),
+    linkStyle: css({
+        cursor: "pointer",
+        textDecoration: "none",
+        "&:hover": {
+            textDecoration: "underline"
+        }
+    })
+};
+const Image = ({ className = styles.authErrorImgStyle, alt = "Not Authorized" })=>/*#__PURE__*/ __rspack_external_react.createElement("img", {
+        className: className,
+        src: SecureRouteError,
+        alt: alt
+    });
+const ModelIsBeingDeletedError = (props)=>{
+    const { goToRoute } = useRouter();
+    const goBack = ()=>{
+        goToRoute(Routes.ContentModels.List);
+    };
+    return /*#__PURE__*/ __rspack_external_react.createElement(ContentWrapper, null, /*#__PURE__*/ __rspack_external_react.createElement(react_helmet, {
+        title: "Cannot access the model!"
+    }), /*#__PURE__*/ __rspack_external_react.createElement(Image, null), /*#__PURE__*/ __rspack_external_react.createElement(Text, {
+        size: "md",
+        className: styles.bodyStyle
+    }, "Model ", /*#__PURE__*/ __rspack_external_react.createElement("strong", null, props.model.name), " is being deleted and cannot be accessed or changed."), /*#__PURE__*/ __rspack_external_react.createElement("p", null, /*#__PURE__*/ __rspack_external_react.createElement("br", null)), /*#__PURE__*/ __rspack_external_react.createElement("a", {
+        onClick: goBack,
+        className: styles.linkStyle
+    }, "Go back"));
+};
+export { ModelIsBeingDeletedError };
+
+//# sourceMappingURL=ModelIsBeingDeletedError.js.map

package/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.js","sources":["../../../../../src/admin/components/ContentModelEditor/ModelIsBeingDeletedError/ModelIsBeingDeletedError.tsx"],"sourcesContent":["import * as React from \"react\";\nimport Helmet from \"react-helmet\";\nimport { css } from \"@emotion/css\";\nimport styled from \"@emotion/styled\";\nimport { Text } from \"@webiny/admin-ui\";\nimport authErrorImg from \"./SecureRouteError.svg\";\nimport type { CmsModel } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport { useRouter } from \"@webiny/app-admin\";\nimport { Routes } from \"~/routes.js\";\n\nconst ContentWrapper = styled(\"div\")({\n    display: \"block\",\n    paddingTop: \"15%\",\n    textAlign: \"center\",\n    margin: \"auto\"\n});\n\nconst styles = {\n    authErrorImgStyle: css({\n        width: \"192px\",\n        paddingBottom: \"24px\"\n    }),\n    bodyStyle: css({\n        color: \"var(--mdc-theme-text-primary-on-background)\",\n        display: \"block\",\n        \" strong\": {\n            fontWeight: \"bold\"\n        }\n    }),\n    linkStyle: css({\n        cursor: \"pointer\",\n        textDecoration: \"none\",\n        \"&:hover\": {\n            textDecoration: \"underline\"\n        }\n    })\n};\n\nexport interface ImageProps {\n    className?: string;\n    alt?: string;\n}\n\nconst Image = ({ className = styles.authErrorImgStyle, alt = \"Not Authorized\" }: ImageProps) => {\n    return <img className={className} src={authErrorImg} alt={alt} />;\n};\n\nexport interface IModelIsBeingDeletedProps {\n    model: Pick<CmsModel, \"name\">;\n}\n\nexport const ModelIsBeingDeletedError = (props: IModelIsBeingDeletedProps) => {\n    const { goToRoute } = useRouter();\n\n    const goBack = (): void => {\n        goToRoute(Routes.ContentModels.List);\n    };\n\n    return (\n        <ContentWrapper>\n            <Helmet title={\"Cannot access the model!\"} />\n            <Image />\n\n            <Text size={\"md\"} className={styles.bodyStyle}>\n                Model <strong>{props.model.name}</strong> is being deleted and cannot be accessed or\n                changed.\n            </Text>\n\n            <p>\n                <br />\n            </p>\n\n            <a onClick={goBack} className={styles.linkStyle}>\n                Go back\n            </a>\n        </ContentWrapper>\n    );\n};\n"],"names":["ContentWrapper","styled","styles","css","Image","className","alt","authErrorImg","ModelIsBeingDeletedError","props","goToRoute","useRouter","goBack","Routes","Helmet","Text"],"mappings":";;;;;;;;AAUA,MAAMA,iBAAiBC,OAAO,OAAO;IACjC,SAAS;IACT,YAAY;IACZ,WAAW;IACX,QAAQ;AACZ;AAEA,MAAMC,SAAS;IACX,mBAAmBC,IAAI;QACnB,OAAO;QACP,eAAe;IACnB;IACA,WAAWA,IAAI;QACX,OAAO;QACP,SAAS;QACT,WAAW;YACP,YAAY;QAChB;IACJ;IACA,WAAWA,IAAI;QACX,QAAQ;QACR,gBAAgB;QAChB,WAAW;YACP,gBAAgB;QACpB;IACJ;AACJ;AAOA,MAAMC,QAAQ,CAAC,EAAEC,YAAYH,OAAO,iBAAiB,EAAEI,MAAM,gBAAgB,EAAc,GAChF,WAAP,GAAO,sCAAC;QAAI,WAAWD;QAAW,KAAKE;QAAc,KAAKD;;AAOvD,MAAME,2BAA2B,CAACC;IACrC,MAAM,EAAEC,SAAS,EAAE,GAAGC;IAEtB,MAAMC,SAAS;QACXF,UAAUG,OAAO,aAAa,CAAC,IAAI;IACvC;IAEA,OAAO,WAAP,GACI,sCAACb,gBAAcA,MAAAA,WAAAA,GACX,sCAACc,cAAMA;QAAC,OAAO;sBACf,sCAACV,OAAKA,OAAAA,WAAAA,GAEN,sCAACW,MAAIA;QAAC,MAAM;QAAM,WAAWb,OAAO,SAAS;OAAE,wBACrC,sCAAC,gBAAQO,MAAM,KAAK,CAAC,IAAI,GAAU,uEAI7C,sCAAC,yBACG,sCAAC,4BAGL,sCAAC;QAAE,SAASG;QAAQ,WAAWV,OAAO,SAAS;OAAE;AAK7D"}