fix: control HCMS entry editor width using Width config (#4555)

Author: leopuleo

packages/app-headless-cms/src/admin/config/contentEntries/editor/Actions/BaseAction.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Property, useIdGenerator } from "@webiny/react-properties";
-import { useModel } from "~/admin/hooks";
+import { IsApplicableToCurrentModel } from "~/admin/config/IsApplicableToCurrentModel";
 
 export interface BaseActionConfig<T extends string> {
     name: string;
@@ -27,28 +27,25 @@ export const BaseAction = ({
     element,
     $type
 }: BaseActionProps) => {
-    const { model } = useModel();
     const getId = useIdGenerator("action");
 
-    if (modelIds.length > 0 && !modelIds.includes(model.modelId)) {
-        return null;
-    }
-
     const placeAfter = after !== undefined ? getId(after) : undefined;
     const placeBefore = before !== undefined ? getId(before) : undefined;
 
     return (
-        <Property
-            id={getId(name)}
-            name={"actions"}
-            remove={remove}
-            array={true}
-            before={placeBefore}
-            after={placeAfter}
-        >
-            <Property id={getId(name, "name")} name={"name"} value={name} />
-            <Property id={getId(name, "element")} name={"element"} value={element} />
-            <Property id={getId(name, "$type")} name={"$type"} value={$type} />
-        </Property>
+        <IsApplicableToCurrentModel modelIds={modelIds}>
+            <Property
+                id={getId(name)}
+                name={"actions"}
+                remove={remove}
+                array={true}
+                before={placeBefore}
+                after={placeAfter}
+            >
+                <Property id={getId(name, "name")} name={"name"} value={name} />
+                <Property id={getId(name, "element")} name={"element"} value={element} />
+                <Property id={getId(name, "$type")} name={"$type"} value={$type} />
+            </Property>
+        </IsApplicableToCurrentModel>
     );
 };

packages/app-headless-cms/src/admin/config/contentEntries/editor/ContentEntryEditorConfig.tsx

@@ -2,15 +2,21 @@ import { useMemo } from "react";
 import { createConfigurableComponent } from "@webiny/react-properties";
 import { Actions, ActionsConfig } from "./Actions";
 import { FieldElement } from "./FieldElement";
+import { Width } from "./Width";
 
 const base = createConfigurableComponent<ContentEntryEditorConfig>("ContentEntryEditorConfig");
 
-export const ContentEntryEditorConfig = Object.assign(base.Config, { Actions, FieldElement });
+export const ContentEntryEditorConfig = Object.assign(base.Config, {
+    Actions,
+    FieldElement,
+    Width
+});
 
 export const ContentEntryEditorWithConfig = base.WithConfig;
 
 interface ContentEntryEditorConfig {
     actions: ActionsConfig;
+    width: string;
 }
 
 export function useContentEntryEditorConfig() {
@@ -23,7 +29,8 @@ export function useContentEntryEditorConfig() {
             buttonActions: [...(actions.filter(action => action.$type === "button-action") || [])],
             menuItemActions: [
                 ...(actions.filter(action => action.$type === "menu-item-action") || [])
-            ]
+            ],
+            width: config.width || "1020px"
         }),
         [config]
     );

packages/app-headless-cms/src/admin/config/contentEntries/editor/Width.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Property } from "@webiny/react-properties";
+import { IsApplicableToCurrentModel } from "~/admin/config/IsApplicableToCurrentModel";
+
+export interface WidthProps {
+    value: string;
+    modelIds?: string[];
+}
+
+export const Width = ({ value, modelIds = [] }: WidthProps) => {
+    return (
+        <IsApplicableToCurrentModel modelIds={modelIds}>
+            <Property id={`contentEntryForm:width`} name={"width"} value={value} />
+        </IsApplicableToCurrentModel>
+    );
+};

packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.styled.tsx

@@ -106,9 +106,10 @@ export const FullScreenContentEntryContentFormWrapper = styled.div`
     justify-content: center;
 `;
 
-export const FullScreenContentEntryContentFormInner = styled.div`
-    flex-shrink: 1;
-    flex-basis: 1020px;
+type FullScreenContentEntryContentFormInnerProps = { width: string };
+
+export const FullScreenContentEntryContentFormInner = styled.div<FullScreenContentEntryContentFormInnerProps>`
+    width: ${props => props.width};
 `;
 
 export const FullScreenContentEntryContentFormInnerCss = css`

packages/app-headless-cms/src/admin/views/contentEntries/ContentEntry/FullScreenContentEntry/FullScreenContentEntry.tsx

@@ -16,11 +16,13 @@ import {
 import { FullScreenContentEntryProvider } from "./useFullScreenContentEntry";
 import { ContentEntryEditorConfig } from "~/ContentEntryEditorConfig";
 import { cmsLegacyEntryEditor } from "~/utils/cmsLegacyEntryEditor";
+import { useContentEntryEditorConfig } from "~/admin/config/contentEntries";
 
 const { ContentEntry } = ContentEntryEditorConfig;
 
 const FullScreenContentEntryDecorator = ContentEntry.createDecorator(Original => {
     return function ContentEntry() {
+        const { width } = useContentEntryEditorConfig();
         const { loading } = useContentEntry();
         const [isRevisionListOpen, openRevisionList] = useState<boolean>(false);
 
@@ -45,7 +47,7 @@ const FullScreenContentEntryDecorator = ContentEntry.createDecorator(Original =>
                     {loading && <CircularProgress style={{ zIndex: 10 }} />}
                     <FullScreenContentEntryContent>
                         <FullScreenContentEntryContentFormWrapper>
-                            <FullScreenContentEntryContentFormInner>
+                            <FullScreenContentEntryContentFormInner width={width}>
                                 <Original />
                             </FullScreenContentEntryContentFormInner>
                         </FullScreenContentEntryContentFormWrapper>