npm - @webiny/app-headless-cms - Versions diffs - 6.4.5 → 6.6.0-alpha.0 - Mend

@webiny/app-headless-cms 6.4.5 → 6.6.0-alpha.0

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 (2796) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"admin/components/ContentModelEditor/ContentModelEditor.js","sources":["../../../../src/admin/components/ContentModelEditor/ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeDecoratable, useDialogs, LeftPanel, RightPanel, SplitView } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { Heading, OverlayLoader, Tabs, Text, TimeAgo } from \"@webiny/admin-ui\";\nimport { ReactComponent as EditIcon } from \"@webiny/icons/edit.svg\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/fullscreen.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ContentEntryProvider } from \"~/admin/views/contentEntries/ContentEntry/ContentEntryContext.js\";\nimport { ContentEntriesProvider } from \"~/admin/views/contentEntries/ContentEntriesContext.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n fields: CmsModelField[];\n layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n const { data, setData, isPristine, contentModel } = useModelEditor();\n const router = useRouter();\n const dialogs = useDialogs();\n\n // Add a class to <body> to trigger global styles while this component is active\n useEffect(() => {\n document.body.classList.add(\"overflow-hidden\");\n\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, []);\n\n const isPristineRef = React.useRef(isPristine);\n isPristineRef.current = isPristine;\n\n useEffect(() => {\n return router.addTransitionGuard({\n guard: () => !isPristineRef.current,\n onBlocked: () => {\n dialogs.showDialog({\n title: \"Confirm Navigation\",\n content: prompt,\n acceptLabel: \"Yes!\",\n cancelLabel: \"No, stay here.\",\n onAccept: () => router.confirmTransition(),\n onClose: () => router.cancelTransition()\n });\n }\n });\n }, []);\n\n const [activeTab, setActiveTab] = useState<string>(\"edit\");\n\n const onChange = ({ fields, layout }: OnChangeParams) => {\n setData(data => ({ ...data, fields, layout }));\n };\n\n if (!data) {\n return <OverlayLoader text={\"Loading content model...\"} />;\n } else if (data.isBeingDeleted) {\n return <ModelIsBeingDeletedError model={data} />;\n }\n\n return (\n <div className={\"content-model-editor flex-1\"}>\n <Header />\n <div className={\"w-full overflow-y-auto h-main-content\"}>\n <SplitView>\n <LeftPanel span={4} className={\"bg-neutral-light\"}>\n <div className={\"px-lg py-md h-[calc(100vh-98px)] overflow-y-scroll\"}>\n <FieldsSidebar\n onFieldDragStart={() => {\n setActiveTab(\"edit\");\n }}\n />\n </div>\n </LeftPanel>\n <RightPanel span={8} className={\"bg-neutral-base\"}>\n <div className={\"h-full overflow-y-scroll\"}>\n {contentModel && (\n <div className={\"px-xl pt-lg pb-md-extra\"}>\n <Heading level={4}>{contentModel.name}</Heading>\n <Text size={\"sm\"} className={\"text-neutral-muted\"}>\n {`Created by ${contentModel.createdBy.displayName}. Last modified: `}\n <TimeAgo datetime={contentModel.savedOn} />.\n </Text>\n </div>\n )}\n <Tabs\n size={\"md\"}\n spacing={\"xl\"}\n separator={true}\n value={String(activeTab)}\n onValueChange={setActiveTab}\n tabs={[\n <Tabs.Tab\n key={\"edit\"}\n value={\"edit\"}\n trigger={\"Edit\"}\n icon={<EditIcon />}\n data-testid={\"cms.editor.tab.edit\"}\n content={\n <div className={\"relative mb-lg\"}>\n <FieldEditor\n fields={data.fields}\n layout={data.layout \|\| []}\n onChange={onChange}\n />\n </div>\n }\n />,\n <Tabs.Tab\n key={\"preview\"}\n value={\"preview\"}\n trigger={\"Preview\"}\n icon={<PreviewIcon />}\n data-testid={\"cms.editor.tab.preview\"}\n content={\n <ContentEntryEditorWithConfig>\n <ContentEntriesProvider contentModel={data}>\n <ContentEntryProvider readonly={true}>\n <PreviewTab\n activeTab={activeTab === \"preview\"}\n />\n </ContentEntryProvider>\n </ContentEntriesProvider>\n </ContentEntryEditorWithConfig>\n }\n />\n ]}\n />\n </div>\n </RightPanel>\n </SplitView>\n <DragPreview />\n </div>\n </div>\n );\n});\n"],"names":["t","i18n","prompt","ContentModelEditor","makeDecoratable","data","setData","isPristine","contentModel","useModelEditor","router","useRouter","dialogs","useDialogs","useEffect","document","isPristineRef","React","activeTab","setActiveTab","useState","onChange","fields","layout","OverlayLoader","ModelIsBeingDeletedError","Header","SplitView","LeftPanel","FieldsSidebar","RightPanel","Heading","Text","TimeAgo","Tabs","String","EditIcon","FieldEditor","PreviewIcon","ContentEntryEditorWithConfig","ContentEntriesProvider","ContentEntryProvider","PreviewTab","DragPreview"],"mappings":"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"}
1	+ {"version":3,"file":"admin/components/ContentModelEditor/ContentModelEditor.js","sources":["../../../../src/admin/components/ContentModelEditor/ContentModelEditor.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport { makeDecoratable, useDialogs } from \"@webiny/app-admin\";\nimport { useRouter } from \"@webiny/app\";\nimport { i18n } from \"@webiny/app/i18n/index.js\";\nimport { IconButton, OverlayLoader, SegmentedControlPrimitive, Tag, Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as ExpandSidebarIcon } from \"@webiny/icons/left_panel_open.svg\";\nimport { ReactComponent as ViewCompactAltIcon } from \"@webiny/icons/view_compact_alt.svg\";\nimport { ReactComponent as ViewDayIcon } from \"@webiny/icons/view_day.svg\";\nimport { FieldsSidebar } from \"./FieldsSidebar.js\";\n\nconst VIEW_ITEMS = [\n { id: \"compact\", value: \"compact\", label: \"\", icon: <ViewCompactAltIcon /> },\n { id: \"full\", value: \"full\", label: \"\", icon: <ViewDayIcon /> }\n];\nimport { FieldEditor } from \"../FieldEditor/index.js\";\nimport { PreviewTab } from \"./PreviewTab.js\";\nimport Header from \"./Header.js\";\nimport DragPreview from \"../DragPreview.js\";\nimport { useModelEditor } from \"./useModelEditor.js\";\nimport type { CmsEditorFieldsLayout, CmsModelField } from \"~/types.js\";\nimport { ContentEntryEditorWithConfig } from \"~/admin/config/contentEntries/index.js\";\nimport { ModelIsBeingDeletedError } from \"~/admin/components/ContentModelEditor/ModelIsBeingDeletedError/index.js\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/editor\");\n\nconst prompt = t`There are some unsaved changes! Are you sure you want to navigate away and discard all changes?`;\n\ninterface OnChangeParams {\n fields: CmsModelField[];\n layout: CmsEditorFieldsLayout;\n}\n\nexport const ContentModelEditor = makeDecoratable(\"ContentModelEditor\", () => {\n const { data, setData, isPristine } = useModelEditor();\n const router = useRouter();\n const dialogs = useDialogs();\n\n // Add a class to <body> to trigger global styles while this component is active\n useEffect(() => {\n document.body.classList.add(\"overflow-hidden\");\n\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, []);\n\n const isPristineRef = React.useRef(isPristine);\n isPristineRef.current = isPristine;\n\n useEffect(() => {\n return router.addTransitionGuard({\n guard: () => !isPristineRef.current,\n onBlocked: () => {\n dialogs.showDialog({\n title: \"Confirm Navigation\",\n content: prompt,\n acceptLabel: \"Yes!\",\n cancelLabel: \"No, stay here.\",\n onAccept: () => router.confirmTransition(),\n onClose: () => router.cancelTransition()\n });\n }\n });\n }, []);\n\n const [activeTab, setActiveTab] = useState<string>(\"edit\");\n const [isSidebarOpen, setIsSidebarOpen] = useState(true);\n const [activeView, setActiveView] = useState(\"compact\");\n\n const onChange = ({ fields, layout }: OnChangeParams) => {\n setData(data => ({ ...data, fields, layout }));\n };\n\n if (!data) {\n return <OverlayLoader text={\"Loading content model...\"} />;\n } else if (data.isBeingDeleted) {\n return <ModelIsBeingDeletedError model={data} />;\n }\n\n return (\n <div className={\"content-model-editor flex-1\"}>\n <Header activeTab={activeTab} onTabChange={setActiveTab} />\n <div className={\"w-full overflow-y-auto h-main-content\"}>\n <div className={\"flex h-full\"}>\n <div\n className={\n \"shrink-0 bg-neutral-base border-r border-neutral-dimmed overflow-hidden h-main-content relative transition-[width] duration-200 ease-in-out\"\n }\n style={{ width: isSidebarOpen ? 200 : 45 }}\n >\n {/* Expanded content /}\n <div\n className={\n \"transition-opacity duration-150 \" +\n (isSidebarOpen\n ? \"opacity-100 delay-75\"\n : \"opacity-0 pointer-events-none\")\n }\n >\n <FieldsSidebar\n onFieldDragStart={() => setActiveTab(\"edit\")}\n onCollapse={() => setIsSidebarOpen(false)}\n />\n </div>\n {/ Collapsed strip */}\n <div\n className={\n \"absolute inset-0 flex flex-col items-center pt-md gap-md transition-opacity duration-150 \" +\n (!isSidebarOpen\n ? \"opacity-100 delay-75\"\n : \"opacity-0 pointer-events-none\")\n }\n >\n <IconButton\n variant={\"ghost\"}\n size={\"xs\"}\n icon={<ExpandSidebarIcon />}\n onClick={() => setIsSidebarOpen(true)}\n />\n <span\n className={\n \"text-sm font-semibold text-neutral-strong [writing-mode:vertical-rl]\"\n }\n >\n Fields\n </span>\n </div>\n </div>\n <div\n className={\n \"flex-1 overflow-y-scroll h-main-content \" +\n (activeTab === \"edit\" ? \"fill-grid\" : \"bg-neutral-subtle\")\n }\n >\n <div\n className={\n \"sticky top-0 left-0 z-10 p-md flex items-center justify-between\"\n }\n >\n <div>\n {activeTab === \"edit\" && (\n <Text\n as=\"div\"\n size={\"sm\"}\n className={\"font-semibold text-neutral-primary\"}\n >\n Model editor\n </Text>\n )}\n {activeTab === \"preview\" && (\n <Tag content={\"Preview\"} variant={\"warning\"} />\n )}\n </div>\n <SegmentedControlPrimitive\n variant={\"light\"}\n value={activeView}\n onChange={setActiveView}\n items={VIEW_ITEMS}\n />\n </div>\n <div className={\"pb-lg\"}>\n <div\n className={\" transition-[width] duration-200 ease-in-out\"}\n style={{\n width: activeView === \"compact\" ? \"704px\" : \"90%\",\n marginLeft: \"auto\",\n marginRight: \"auto\"\n }}\n >\n {activeTab === \"edit\" && (\n <div className={\"relative\"} data-testid={\"cms.editor.tab.edit\"}>\n <FieldEditor\n fields={data.fields}\n layout={data.layout \|\| []}\n onChange={onChange}\n />\n </div>\n )}\n {activeTab === \"preview\" && (\n <div\n className={\"px-xxl py-lg\"}\n data-testid={\"cms.editor.tab.preview\"}\n >\n <ContentEntryEditorWithConfig>\n <PreviewTab\n activeTab={true}\n onSwitchToEdit={() => setActiveTab(\"edit\")}\n />\n </ContentEntryEditorWithConfig>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n <DragPreview />\n </div>\n </div>\n );\n});\n"],"names":["VIEW_ITEMS","ViewCompactAltIcon","ViewDayIcon","t","i18n","prompt","ContentModelEditor","makeDecoratable","data","setData","isPristine","useModelEditor","router","useRouter","dialogs","useDialogs","useEffect","document","isPristineRef","React","activeTab","setActiveTab","useState","isSidebarOpen","setIsSidebarOpen","activeView","setActiveView","onChange","fields","layout","OverlayLoader","ModelIsBeingDeletedError","Header","FieldsSidebar","IconButton","ExpandSidebarIcon","Text","Tag","SegmentedControlPrimitive","FieldEditor","ContentEntryEditorWithConfig","PreviewTab","DragPreview"],"mappings":"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"}

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

@@ -1,16 +1,15 @@
 import React from "react";
-import type { ApolloClient } from "apollo-client";
-import type { GetCmsModelQueryResponse, UpdateCmsModelMutationResponse } from "../../../admin/graphql/contentModels.js";
 import type { CmsModel } from "../../../types.js";
-import type { FetchResult } from "apollo-link";
-import type { FieldOption } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
+import type { FieldOption } from "./fieldOptions.js";
 export interface ContentModelEditorProviderContext {
-    apolloClient: ApolloClient<any>;
     data: CmsModel;
     contentModel: CmsModel;
     isPristine: boolean;
-    getContentModel: (modelId: string) => Promise<FetchResult<GetCmsModelQueryResponse>>;
-    saveContentModel: (data?: CmsModel) => Promise<UpdateCmsModelMutationResponse["updateContentModel"]>;
+    getContentModel: (modelId: string) => Promise<void>;
+    saveContentModel: (data?: CmsModel) => Promise<{
+        data: CmsModel | null;
+        error: any | null;
+    }>;
     setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;
     activeTabIndex: number;
     setActiveTabIndex: (index: number) => void;
@@ -32,9 +31,8 @@ interface Reducer {
 }
 export declare const contentModelEditorReducer: Reducer;
 interface ContentModelEditorProviderProps {
-    apolloClient: ApolloClient<any>;
     modelId?: string;
     children: React.ReactElement;
 }
-export declare const ContentModelEditorProvider: ({ children, apolloClient, modelId }: ContentModelEditorProviderProps) => React.JSX.Element;
+export declare const ContentModelEditorProvider: ({ children, modelId }: ContentModelEditorProviderProps) => React.JSX.Element;
 export {};

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

@@ -1,14 +1,14 @@
 import react, { useCallback, useEffect, useMemo, useReducer } from "react";
-import get from "lodash/get.js";
 import pick from "lodash/pick.js";
 import { useRouter, useSnackbar } from "@webiny/app-admin";
-import { GET_CONTENT_MODEL, UPDATE_CONTENT_MODEL } from "../../graphql/contentModels.js";
-import { LIST_MENU_CONTENT_GROUPS_MODELS } from "../../viewsGraphql.js";
+import { useContainer, useFeature } from "@webiny/app";
 import { ModelProvider } from "../ModelProvider/index.js";
 import { createHashing } from "@webiny/app/utils/index.js";
 import { Routes } from "../../../routes.js";
-import { buildFieldLabelPrefixes, buildFieldOptions } from "@webiny/app-headless-cms-common/Fields/fieldOptions.js";
-import { plugins } from "@webiny/plugins";
+import { buildFieldLabelPrefixes, buildFieldOptions } from "./fieldOptions.js";
+import { CmsLayoutFieldType } from "../../../presentation/fieldTypes/abstractions.js";
+import { GetModelFeature } from "../../../features/model/getModel/feature.js";
+import { UpdateModelFeature } from "../../../features/model/updateModel/feature.js";
 const contentModelEditorContext = /*#__PURE__*/ react.createContext(void 0);
 const contentModelEditorReducer = (prev, action)=>{
     const { data, type } = action;
@@ -53,7 +53,9 @@ const createDefaultState = (modelId)=>({
         data: null,
         activeTabIndex: 0
     });
-const ContentModelEditorProvider = ({ children, apolloClient, modelId })=>{
+const ContentModelEditorProvider = ({ children, modelId })=>{
+    const { useCase: getModelUseCase } = useFeature(GetModelFeature);
+    const { useCase: updateModelUseCase } = useFeature(UpdateModelFeature);
     const [state, dispatch] = useReducer(contentModelEditorReducer, createDefaultState(modelId));
     const { goToRoute } = useRouter();
     const { showSnackbar } = useSnackbar();
@@ -80,24 +82,24 @@ const ContentModelEditorProvider = ({ children, apolloClient, modelId })=>{
             "imageFieldId",
             "icon"
         ]);
-        const response = await apolloClient.mutate({
-            mutation: UPDATE_CONTENT_MODEL,
-            variables: {
+        try {
+            const result = await updateModelUseCase.execute({
                 modelId: data.modelId,
                 data: cleanupModelData(modelData)
-            },
-            refetchQueries: [
-                {
-                    query: LIST_MENU_CONTENT_GROUPS_MODELS
+            });
+            setPristine(true);
+            return {
+                data: result,
+                error: null
+            };
+        } catch (ex) {
+            return {
+                data: null,
+                error: {
+                    message: ex.message
                 }
-            ]
-        });
-        setPristine(true);
-        if (!response.data || !response.data.updateContentModel) return {
-            data: null,
-            error: null
-        };
-        return response.data.updateContentModel;
+            };
+        }
     };
     const setActiveTabIndex = useCallback((activeTabIndex)=>{
         dispatch({
@@ -120,18 +122,12 @@ const ContentModelEditorProvider = ({ children, apolloClient, modelId })=>{
         if (!saveModel) return;
         await saveContentModel(data);
     };
-    const getContentModel = async (modelId)=>{
-        const response = await apolloClient.query({
-            query: GET_CONTENT_MODEL,
-            variables: {
-                modelId
-            }
+    const getContentModel = async (id)=>{
+        const data = await getModelUseCase.execute({
+            modelId: id
         });
-        const { data, error } = get(response, "data.getContentModel");
-        if (error) throw new Error(error.message);
         await setData(()=>data, false);
         setPristine(true);
-        return response;
     };
     useEffect(()=>{
         if (!modelId) return;
@@ -142,12 +138,15 @@ const ContentModelEditorProvider = ({ children, apolloClient, modelId })=>{
     }, [
         modelId
     ]);
-    const layoutFieldPlugins = plugins.byType("cms-editor-layout-field-type");
+    const container = useContainer();
+    const layoutFieldTypes = useMemo(()=>container.resolveAll(CmsLayoutFieldType), [
+        container
+    ]);
     const fieldOptions = useMemo(()=>{
         const model = state.data;
         if (!model) return [];
-        const prefixes = model.layout ? buildFieldLabelPrefixes(model.layout, layoutFieldPlugins) : void 0;
-        return buildFieldOptions(model.fields ?? [], "", "", prefixes, layoutFieldPlugins);
+        const prefixes = model.layout ? buildFieldLabelPrefixes(model.layout, layoutFieldTypes) : void 0;
+        return buildFieldOptions(model.fields ?? [], "", "", prefixes, layoutFieldTypes);
     }, [
         state.data?.fields,
         state.data?.layout
@@ -155,9 +154,6 @@ const ContentModelEditorProvider = ({ children, apolloClient, modelId })=>{
     const value = useMemo(()=>({
             data: state.data,
             contentModel: state.data,
-            modelId,
-            apolloClient,
-            dispatch,
             isPristine: state.isPristine,
             getContentModel,
             saveContentModel,
@@ -167,7 +163,6 @@ const ContentModelEditorProvider = ({ children, apolloClient, modelId })=>{
             fieldOptions
         }), [
         state,
-        apolloClient,
         fieldOptions
     ]);
     const { Provider } = contentModelEditorContext;

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

	@@ -1 +1 @@
1	- {"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 get from \"lodash/get.js\";\nimport pick from \"lodash/pick.js\";\nimport type { ApolloClient } from \"apollo-client\";\nimport { useSnackbar, useRouter } from \"@webiny/app-admin\";\nimport type {\n GetCmsModelQueryResponse,\n GetCmsModelQueryVariables,\n UpdateCmsModelMutationResponse,\n UpdateCmsModelMutationVariables\n} from \"~/admin/graphql/contentModels.js\";\nimport { GET_CONTENT_MODEL, UPDATE_CONTENT_MODEL } from \"~/admin/graphql/contentModels.js\";\nimport { LIST_MENU_CONTENT_GROUPS_MODELS } from \"~/admin/viewsGraphql.js\";\nimport type { CmsModel, CmsModelField } from \"~/types.js\";\nimport type { CmsModelLayoutFieldTypePlugin } from \"@webiny/app-headless-cms-common/types/index.js\";\nimport type { FetchResult } from \"apollo-link\";\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 \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\nimport {\n buildFieldOptions,\n buildFieldLabelPrefixes\n} from \"@webiny/app-headless-cms-common/Fields/fieldOptions.js\";\nimport { plugins } from \"@webiny/plugins\";\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 activeTabIndex: number;\n setActiveTabIndex: (index: number) => void;\n fieldOptions: FieldOption[];\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\nconst hashModel = createHashing(\"SHA-256\");\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\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 apolloClient,\n modelId\n}: ContentModelEditorProviderProps) => {\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<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 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 (\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\n setPristine(true);\n return response;\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 layoutFieldPlugins = plugins.byType<CmsModelLayoutFieldTypePlugin>(\n \"cms-editor-layout-field-type\"\n );\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, layoutFieldPlugins)\n : undefined;\n return buildFieldOptions(model.fields ?? [], \"\", \"\", prefixes, layoutFieldPlugins);\n }, [state.data?.fields, state.data?.layout]);\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 activeTabIndex: state.activeTabIndex,\n setActiveTabIndex,\n fieldOptions\n }),\n [state, apolloClient, 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","apolloClient","state","dispatch","useReducer","goToRoute","useRouter","showSnackbar","useSnackbar","setPristine","flag","saveContentModel","modelData","pick","response","UPDATE_CONTENT_MODEL","LIST_MENU_CONTENT_GROUPS_MODELS","setActiveTabIndex","useCallback","activeTabIndex","setData","setter","saveModel","existingHash","newHash","getContentModel","GET_CONTENT_MODEL","error","get","Error","useEffect","Routes","layoutFieldPlugins","plugins","fieldOptions","useMemo","model","prefixes","buildFieldLabelPrefixes","buildFieldOptions","Provider","ModelProvider"],"mappings":"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"}
1	+ {"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 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":"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"}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -1,83 +1,63 @@
-import react from "react";
-import { plugins } from "@webiny/plugins";
+import react, { useMemo } from "react";
+import { useContainer } from "@webiny/app";
 import Draggable from "../Draggable.js";
-import { Heading, Icon, Text } from "@webiny/admin-ui";
-const Field = (props)=>{
-    const { onFieldDragStart, fieldType: { type, label, icon, description } } = props;
-    return /*#__PURE__*/ react.createElement(Draggable, {
+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: type
+            fieldType: fieldType.type
         }
-    }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
-            ref: (element)=>{
-                drag(element);
-            },
-            "data-testid": `cms-editor-fields-field-${type}`,
+    }, ({ drag })=>/*#__PURE__*/ react.createElement(GridItem, {
+            testId: `cms-editor-fields-field-${fieldType.type}`,
+            label: fieldType.label,
+            icon: fieldType.icon,
             onDragStart: onFieldDragStart,
-            className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
-        }, /*#__PURE__*/ react.createElement("div", {
-            className: "flex items-center gap-md"
-        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Icon, {
-            icon: icon,
-            label: label,
-            size: "md",
-            color: "neutral-light"
-        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
-            level: 6
-        }, label), /*#__PURE__*/ react.createElement(Text, {
-            size: "sm",
-            className: "text-neutral-strong"
-        }, description)))));
-};
-const LayoutFieldItem = (props)=>{
-    const { onFieldDragStart, layoutField: { type, label, icon, description } } = props;
-    return /*#__PURE__*/ react.createElement(Draggable, {
+            dragRef: (element)=>drag(element)
+        }));
+const LayoutFieldItem = ({ onFieldDragStart, layoutFieldType: { type, label, icon } })=>/*#__PURE__*/ react.createElement(Draggable, {
         beginDrag: {
             type: "newLayoutField",
             layoutFieldType: type
         }
-    }, ({ drag })=>/*#__PURE__*/ react.createElement("div", {
-            ref: (element)=>{
-                drag(element);
-            },
-            "data-testid": `cms-editor-fields-layout-field-${type}`,
-            onDragStart: onFieldDragStart,
-            className: "bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity"
-        }, /*#__PURE__*/ react.createElement("div", {
-            className: "flex items-center gap-md"
-        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Icon, {
-            icon: icon,
+    }, ({ drag })=>/*#__PURE__*/ react.createElement(GridItem, {
+            testId: `cms-editor-fields-layout-field-${type}`,
             label: label,
-            size: "md",
-            color: "neutral-light"
-        })), /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(Heading, {
-            level: 6
-        }, label), /*#__PURE__*/ react.createElement(Text, {
-            size: "sm",
-            className: "text-neutral-strong"
-        }, description)))));
-};
-const FieldsSidebar = ({ onFieldDragStart })=>{
-    const fieldTypePlugin = plugins.byType("cms-editor-field-type").filter((p)=>!p.field.hideInAdmin);
-    const layoutFieldPlugins = plugins.byType("cms-editor-layout-field-type");
-    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
-        as: "div",
-        size: "md",
-        className: "text-neutral-strong uppercase mt-0 mb-md font-semibold"
-    }, "Fields"), fieldTypePlugin.map((fieldPlugin)=>/*#__PURE__*/ react.createElement(Field, {
-            key: fieldPlugin.field.type,
-            fieldType: fieldPlugin.field,
+            icon: icon,
+            onDragStart: onFieldDragStart,
+            dragRef: (element)=>drag(element)
+        }));
+const FieldsSidebar = ({ onFieldDragStart, onCollapse })=>{
+    const container = useContainer();
+    const fieldTypes = useMemo(()=>container.resolveAll(CmsFieldType).filter((ft)=>!ft.hideInAdmin), [
+        container
+    ]);
+    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
-        })), layoutFieldPlugins.length > 0 && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
-        as: "div",
-        size: "md",
-        className: "text-neutral-strong uppercase my-md font-semibold"
-    }, "Layout"), layoutFieldPlugins.map((lp)=>/*#__PURE__*/ react.createElement(LayoutFieldItem, {
-            key: lp.field.type,
-            layoutField: lp.field,
+        }))), 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
-        }))));
+        })))));
 };
 export { FieldsSidebar };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"admin/components/ContentModelEditor/FieldsSidebar.js","sources":["../../../../src/admin/components/ContentModelEditor/FieldsSidebar.tsx"],"sourcesContent":["import type { DragEventHandler } from \"react\";\nimport React from \"react\";\nimport { ~~plugins~~ } from \"@webiny/~~plugins~~\";\nimport Draggable from \"../Draggable.js\";\nimport ~~type~~ { ~~CmsModelFieldTypePlugin,~~ ~~CmsModelLayoutFieldTypePlugin~~ } from \"~~~/types~~.js\";\nimport { ~~Heading,~~ ~~Icon,~~ ~~Text~~ } from \"@webiny/~~admin-ui~~\";\n\ninterface FieldProps {\n onFieldDragStart: DragEventHandler;\n fieldType: ~~CmsModelFieldTypePlugin[\"field\"]~~;\n}\n\nconst Field = (~~props~~: FieldProps) => {\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~~={~~element => {\n drag(element);\n }}\n data-testid={~~`cms-editor-fields-field-${type}`}\n ~~onDragStart~~={~~onFieldDragStart~~}\n className={\n \"bg-neutral-base rounded-sm mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n }\n >\n <div className={\"flex items-center gap-md\"}>\n <div>\n <Icon\n icon={icon ~~as React.ReactElement~~}\n ~~label~~={~~label~~}\n ~~size~~={~~\"md\"}\n color={\"neutral-light\"}\n />\n </div>\n <div>\n <Heading~~ ~~level={6}>{label}</Heading>\n <Text~~ ~~size={\"sm\"~~} ~~className={~~\~~"text-neutral-strong\"}>\~~n ~~{description}\n </Text>\n </div>\n </div>\n~~ ~~</div>\~~n )}\n </Draggable>\n );\n};\n\ninterface LayoutFieldItemProps {\n onFieldDragStart: DragEventHandler;\n ~~layoutField~~: ~~CmsModelLayoutFieldTypePlugin[\"field\"]~~;\n}\n\nconst LayoutFieldItem = (~~props: LayoutFieldItemProps) =>~~ {\n ~~const {\n~~ onFieldDragStart,\n ~~layoutField~~: { type, label, icon, ~~description~~ }\n } = ~~props;\~~n return (\n <Draggable beginDrag={{ type: \"newLayoutField\", layoutFieldType: type }}>\n {({ drag }) => (\n <~~div~~\n ~~ref~~={~~element => {\n drag(element);\n }}\n data-testid={~~`cms-editor-fields-layout-field-${type}`}\n ~~onDragStart~~={~~onFieldDragStart~~}\n ~~className~~={~~\n \"bg-neutral-base~~ ~~rounded-sm~~ ~~mb-sm py-sm px-md cursor-grab last-of-type:mb-none hover:opacity-80 transition-opacity\"\n~~ }\n ~~>\n~~ ~~<div className~~={~~\"flex items-center gap-md\"~~}~~>\n <div>\n <Icon icon={icon} label={label} size={~~\~~"md\"} color={\"neutral-light\"} />\~~n ~~</div>\n <div>\n <Heading level~~={~~6}>{label}</Heading>\n <Text~~ ~~size={\"sm\"}~~ ~~className={\"text-neutral-strong\"~~}~~>\n {description}~~\n ~~</Text>\n </div>\n </div>\n~~ ~~</div>\~~n )}\n </Draggable>\n );\n};\n\ninterface FieldsSidebarProps {\n onFieldDragStart: DragEventHandler;\n}\n\nexport const FieldsSidebar = ({ onFieldDragStart }: FieldsSidebarProps) => {\n const ~~fieldTypePlugin~~ = ~~plugins~~\n ~~.byType<CmsModelFieldTypePlugin>~~(~~\"cms-editor-field-type\"~~)\n .filter(p => !p.~~field.~~hideInAdmin);\n\n const ~~layoutFieldPlugins~~ = ~~plugins.byType<CmsModelLayoutFieldTypePlugin>~~(\n ~~\"cms-editor-layout-field-type\"\~~n );\n\n return (\n <>\n <~~Text~~\n ~~as=\~~"~~div~~\"\n ~~size~~={\"md\"}\n ~~className~~={\"~~text-neutral-strong uppercase mt-0 mb-md font-semibold~~\"}\n >\n ~~Fields~~\n ~~</Text~~>\n {~~fieldTypePlugin~~.map(~~fieldPlugin~~ => (\n <Field\n key={~~fieldPlugin~~.~~field.~~type}\n fieldType={~~fieldPlugin.field~~}\n onFieldDragStart={onFieldDragStart}\n ~~/>\n~~ ))}\n {~~layoutFieldPlugins~~.length > 0 && (\n <>\n <~~Text\n as=\"div\"\n size~~={\"md\"}~~\n className={\"text-neutral-strong~~ ~~uppercase my-md font-semibold\"}\~~n >\n ~~Layout\n </Text>\n~~ {~~layoutFieldPlugins~~.map(lp => (\n <LayoutFieldItem\n key={lp.~~field.~~type}\n ~~layoutField~~={~~lp.field~~}\n onFieldDragStart={onFieldDragStart}\n />\n ))}\n </>\n )}\n </>\n );\n};\n"],"names":["Field","~~props~~","~~onFieldDragStart~~","type","label","icon","~~description~~","~~Draggable~~","~~drag~~","~~element~~","~~Icon~~","~~Heading~~","~~Text~~","~~LayoutFieldItem~~","~~FieldsSidebar~~","~~fieldTypePlugin~~","~~plugins~~","p","~~layoutFieldPlugins~~","~~fieldPlugin~~","lp"],"mappings":"~~;;;;AAYA~~,MAAMA,QAAQ,~~CAACC;IACX~~,~~MAAM~~,~~EACFC,~~gBAAgB,~~EAChB,WAAW,~~EAAEC,~~IAAI~~,~~EAAEC~~,~~KAAK~~,~~EAAEC,IAAI,EAAEC,WAAW,EAAE,EAChD,GAAGL;IACJ,OAAO,~~WAAP,GACI,~~oBAACM~~,WAASA;QAAC,WAAW;YAAE,MAAM;YAAY,~~WAAWJ~~;~~QAAK~~;~~OACrD~~,CAAC,~~EAAEK~~,IAAI,EAAE,iBACN,~~oBAAC;YACG~~,~~KAAKC,CAAAA~~;~~gBACDD~~,~~KAAKC;YACT;YACA~~,~~eAAa,~~CAAC,wBAAwB,~~EAAEN~~,~~MAAM;YAC9C~~,~~aAAaD;YACb~~,~~WACI~~;~~yBAGJ~~,~~oBAAC;YAAI~~,~~WAAW;yBACZ~~,~~oBAAC,2BACG,oBAACQ,MAAIA~~;~~YACD~~,~~MAAML;YACN~~,~~OAAOD;YACP~~,~~MAAM~~;~~YACN~~,~~OAAO~~;~~2BAGf~~,~~oBAAC~~,~~2BACG~~,~~oBAACO~~,~~SAAOA;YAAC~~,~~OAAO;WAAIP~~,~~QAAAA,WAAAA,GACpB,oBAACQ,MAAIA;YAAC,MAAM;YAAM,WAAW;WACxBN;AAQjC;AAOA,MAAMO,~~kBAAkB,~~CAACZ;IACrB~~,~~MAAM~~,~~EACFC,~~gBAAgB,EAChB,~~aAAa~~,~~EAAEC~~,IAAI,EAAEC,KAAK,EAAEC,IAAI,~~EAAEC,WAAW,~~EAAE,~~EAClD~~,~~GAAGL;IACJ~~,~~OAAO,~~WAAP,GACI,~~oBAACM~~,WAASA;QAAC,WAAW;YAAE,MAAM;YAAkB,~~iBAAiBJ~~;QAAK;OACjE,CAAC,~~EAAEK~~,IAAI,EAAE,iBACN,~~oBAAC;YACG~~,~~KAAKC,CAAAA~~;~~gBACDD~~,~~KAAKC;YACT;YACA~~,~~eAAa,~~CAAC,+BAA+B,~~EAAEN~~,MAAM;~~YACrD~~,~~aAAaD~~;~~YACb~~,~~WACI~~;~~yBAGJ~~,~~oBAAC~~;~~YAAI~~,~~WAAW;yBACZ~~,~~oBAAC~~,~~2BACG~~,~~oBAACQ~~,~~MAAIA;YAAC~~,~~MAAML;YAAM~~,~~OAAOD;YAAO~~,~~MAAM;YAAM~~,~~OAAO;2BAEvD~~,~~oBAAC~~,~~2BACG~~,~~oBAACO,SAAOA~~;~~YAAC~~,~~OAAO;WAAIP~~,~~QAAAA,WAAAA,GACpB,oBAACQ,MAAIA~~;~~YAAC~~,~~MAAM;YAAM~~,~~WAAW;WACxBN;AAQjC;AAMO~~,~~MAAMQ~~,~~gBAAgB~~,~~CAAC~~,~~EAAEZ~~,~~gBAAgB~~,~~EAAsB;IAClE~~,~~MAAMa,kBAAkBC,QAAAA,MACb,CAA0B,yBAChC,~~MAAM,CAACC,CAAAA,~~IAAK~~,CAACA,~~EAAE~~,~~KAAK~~,~~CAAC,WAAW~~;~~IAErC~~,~~MAAMC~~,~~qBAAqBF~~,QAAQ,~~MAAM~~,~~CACrC~~;~~IAGJ~~,OAAO,WAAP,GACI,wDACI,~~oBAACJ~~,~~MAAIA~~;~~QACD~~,~~IAAG~~;~~QACH~~,MAAM;~~QACN~~,~~WAAW~~;~~OACd~~,~~WAGAG~~,~~gBAAgB~~,GAAG,~~CAACI~~,CAAAA,~~cAAAA~~,WAAAA,~~GACjB~~,~~oBAACnB~~,OAAKA;~~YACF~~,~~KAAKmB~~,~~YAAY~~,~~KAAK,CAAC,~~IAAI;~~YAC3B~~,WAAWA~~,YAAY,KAAK~~;~~YAC5B~~,kBAAkBjB;~~aAGzBgB~~,~~mBAAmB~~,MAAM,GAAG,KAAK,WAAL,~~GACzB~~,wDACI,~~oBAACN~~,~~MAAIA~~;~~QACD~~,~~IAAG~~;~~QACH~~,~~MAAM;QACN~~,~~WAAW;OACd~~,~~WAGAM~~,~~mBAAmB~~,GAAG,~~CAACE~~,CAAAA,~~KAAAA~~,WAAAA,~~GACpB~~,~~oBAACP~~,iBAAeA;YACZ,~~KAAKO~~,~~GAAG~~,~~KAAK,CAAC,~~IAAI;~~YAClB~~,~~aAAaA,GAAG,KAAK~~;~~YACrB~~,~~kBAAkBlB~~;;~~AAO9C~~"}
1	+ {"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 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\n const fieldTypes = useMemo(() => {\n return container.resolveAll(CmsFieldType).filter(ft => !ft.hideInAdmin);\n }, [container]);\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","fieldTypes","useMemo","CmsFieldType","ft","layoutFieldTypes","CmsLayoutFieldType","SectionHeader","IconButton","CollapseSidebarIcon","FieldsGrid","lft"],"mappings":";;;;;;;;;AAoBA,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;IAElB,MAAMC,aAAaC,QAAQ,IAChBH,UAAU,UAAU,CAACI,cAAc,MAAM,CAACC,CAAAA,KAAM,CAACA,GAAG,WAAW,GACvE;QAACL;KAAU;IAEd,MAAMM,mBAAmBH,QAAQ,IACtBH,UAAU,UAAU,CAACO,qBAC7B;QAACP;KAAU;IAEd,OAAO,WAAP,GACI,wDACI,oBAACQ,eAAaA;QACV,OAAO;QACP,QACIT,cAAc,WAAdA,GACI,oBAACU,YAAUA;YACP,SAAS;YACT,MAAM;YACN,oBAAM,oBAACC,gBAAmBA;YAC1B,SAASX;;sBAKzB,oBAACY,YAAUA,MACNT,WAAW,GAAG,CAACG,CAAAA,KAAAA,WAAAA,GACZ,oBAAClB,OAAKA;YAAC,KAAKkB,GAAG,IAAI;YAAE,WAAWA;YAAI,kBAAkBjB;cAG7DkB,iBAAiB,MAAM,GAAG,KAAK,WAAL,GACvB,wDACI,oBAACE,eAAaA;QAAC,OAAO;sBACtB,oBAACG,YAAUA,MACNL,iBAAiB,GAAG,CAACM,CAAAA,MAAAA,WAAAA,GAClB,oBAAClB,iBAAeA;YACZ,KAAKkB,IAAI,IAAI;YACb,iBAAiBA;YACjB,kBAAkBxB;;AAQlD"}

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -1,3 +1,7 @@
 import React from "react";
-declare const EditorBar: () => React.JSX.Element;
+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 CHANGED Viewed

@@ -1,11 +1,33 @@
 import react from "react";
-import { HeaderBar } from "@webiny/admin-ui";
+import { HeaderBar, SegmentedControlPrimitive } from "@webiny/admin-ui";
 import { renderPlugins } from "@webiny/app/plugins/index.js";
-const EditorBar = ()=>/*#__PURE__*/ react.createElement(HeaderBar, {
+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)
+    },
+    {
+        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"))

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

	@@ -1 +1 @@
1	- {"version":3,"file":"admin/components/ContentModelEditor/Header.js","sources":["../../../../src/admin/components/ContentModelEditor/Header.tsx"],"sourcesContent":["import React from \"react\";\nimport { HeaderBar } from \"@webiny/admin-ui\";\nimport { renderPlugins } from \"@webiny/app/plugins/index.js\";\n\nconst EditorBar = () => {\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 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":["EditorBar","HeaderBar","renderPlugins"],"mappings":"~~;;;AAIA~~,MAAMA,YAAY,~~IACP~~,WAAP,GACI,oBAACC,WAASA;QACN,eAAa;QACb,qBACI,oBAAC;YAAI,WAAW;WACXC,cAAc;QAGvB,mBACI,oBAAC;YAAI,WAAW;~~WACXA~~,cAAc;;AAOnC,~~eAAeF~~"}
1	+ {"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/PreviewTab.d.ts CHANGED Viewed

@@ -1,2 +1,7 @@
-import type { CmsEditorContentTab } from "../../../types.js";
-export declare const PreviewTab: CmsEditorContentTab;
+import React from "react";
+interface PreviewTabProps {
+    activeTab: boolean;
+    onSwitchToEdit?: () => void;
+}
+export declare const PreviewTab: ({ activeTab, onSwitchToEdit }: PreviewTabProps) => React.JSX.Element;
+export {};