feat: add editor readonly mode

packages/admin-ui/src/theme.css

@@ -346,6 +346,12 @@
   @apply pr-xxl pl-xxl mx-auto w-full;
 }
 
+@utility fill-grid {
+  background-image: radial-gradient(var(--color-neutral-strong) 1px, transparent 0px);
+  background-size: 15px 15px;
+  @apply bg-neutral-light;
+}
+
 @layer base {
   a {
     @apply text-accent-primary hover:underline focus-visible:outline-none focus-visible:ring-lg focus-visible:ring-primary-dimmed rounded-xs;

packages/app-website-builder-workflows/src/Components/PageEditor/PageEditorConfig.tsx

@@ -1,26 +1,15 @@
 import React from "react";
 import { PageEditorConfig as BaseConfig } from "@webiny/app-website-builder";
-import { PageEditorAutoSave } from "./PageEditorAutoSave.js";
-import { PageEditorSettings } from "./PageEditorSettings.js";
 import { PageFormWorkflowStateTooltip } from "./PageFormWorkflowStateTooltip.js";
 import { PageFormWorkflowStatePublishButton } from "./PageFormWorkflowStatePublishButton.js";
-import { PageEditorLayout } from "./PageEditorLayout.js";
-import { PageEditorToolbar } from "./PageEditorToolbar.js";
-import { PageEditorSidebar } from "./PageEditorSidebar.js";
+import { PageEditorTopBar } from "./PageEditorTopBar.js";
 
 export const PageEditorConfig = () => {
     return (
         <>
-            <PageEditorLayout />
+            {/* Toggle editor "readonly" mode, and add workflow alerts */}
+            <PageEditorTopBar />
             <BaseConfig>
-                {/* Should remove autosave feature */}
-                <PageEditorAutoSave />
-                {/* Should remove settings button */}
-                <PageEditorSettings />
-                {/* Should remove left bar in the editor */}
-                <PageEditorToolbar />
-                {/* Should remove right bar in the editor */}
-                <PageEditorSidebar />
                 {/* Should add a button with list of steps and their states + comment button in each row */}
                 <PageFormWorkflowStateTooltip />
                 {/* should remove publish button from the form */}

packages/app-website-builder-workflows/src/Components/PageEditor/PageEditorLayout.tsx

@@ -1,19 +1,35 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useSelectFromDocument } from "@webiny/app-website-builder/BaseEditor/hooks/useSelectFromDocument.js";
 import { useApolloClient } from "@apollo/react-hooks";
 import { useAuthentication } from "@webiny/app-admin";
-import { Components } from "@webiny/app-workflows";
+import { Components, useWorkflowState } from "@webiny/app-workflows";
 import { WB_PAGE_APP } from "~/constants.js";
-import { PageFormWorkflowState } from "./PageFormWorkflowState.js";
 import { PageEditorConfig } from "@webiny/app-website-builder";
+import { observer } from "mobx-react-lite";
+import { useDocumentEditor } from "@webiny/app-website-builder/DocumentEditor/index.js";
 
 const { Ui } = PageEditorConfig;
 
 const {
     ContentReview: { WorkflowStateProvider }
 } = Components;
 
-export const PageEditorLayout = Ui.TopBar.Layout.createDecorator(Original => {
+const ToggleReadonly = observer(() => {
+    const { presenter } = useWorkflowState();
+    const editor = useDocumentEditor();
+
+    const hasState = !!presenter.vm.state?.state;
+
+    useEffect(() => {
+        editor.updateEditor(state => {
+            state.isReadOnly = hasState;
+        });
+    }, [hasState]);
+
+    return null;
+});
+
+export const PageEditorLayout = Ui.Layout.createDecorator(Original => {
     return function PageEditorTopBarWorkflowsState() {
         const page = useSelectFromDocument(doc => {
             return {
@@ -33,10 +49,8 @@ export const PageEditorLayout = Ui.TopBar.Layout.createDecorator(Original => {
                 client={client}
                 title={`Website Builder: ${page.title}`}
             >
-                {/* Original top bar*/}
                 <Original />
-                {/* Should render workflow state bar and the alert for storing changes */}
-                <PageFormWorkflowState />
+                <ToggleReadonly />
             </WorkflowStateProvider>
         );
     };

packages/app-website-builder-workflows/src/Components/PageEditor/PageEditorTopBar.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { useApolloClient } from "@apollo/react-hooks";
+import { PageEditorConfig } from "@webiny/app-website-builder";
+import { useSelectFromDocument } from "@webiny/app-website-builder/BaseEditor/hooks/useSelectFromDocument.js";
+import { useAuthentication } from "@webiny/app-admin";
+import { WorkflowStateProvider } from "@webiny/app-workflows/Components/WorkflowState/index.js";
+import { WB_PAGE_APP } from "~/constants.js";
+import { PageFormWorkflowState } from "~/Components/PageEditor/PageFormWorkflowState.js";
+import { ToggleEditorMode } from "~/Components/PageEditor/ToggleEditorMode.js";
+
+const { Ui } = PageEditorConfig;
+
+export const PageEditorTopBar = Ui.TopBar.Layout.createDecorator(Original => {
+    return function PageEditorTopBarWorkflowsState() {
+        const page = useSelectFromDocument(doc => {
+            return {
+                id: doc.id,
+                title: doc.properties.title || "unknown page"
+            };
+        });
+
+        const client = useApolloClient();
+        const { identity } = useAuthentication();
+
+        return (
+            <WorkflowStateProvider
+                app={WB_PAGE_APP}
+                id={page.id}
+                identity={identity}
+                client={client}
+                title={`Website Builder: ${page.title}`}
+            >
+                <Original />
+                <ToggleEditorMode />
+                <PageFormWorkflowState />
+            </WorkflowStateProvider>
+        );
+    };
+});

packages/app-website-builder-workflows/src/Components/PageEditor/PageFormWorkflowState.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { Components } from "@webiny/app-workflows";
-import { Alert } from "@webiny/admin-ui";
 
 const {
     ContentReview: { WorkflowStateBar }
@@ -9,15 +8,15 @@ const {
 export const PageFormWorkflowState = () => {
     return (
         <WorkflowStateBar>
-            {({ state, stateBar }) => {
+            {({ stateBar }) => {
                 return (
-                    <div className={"max-w-screen bg-white p-sm"}>
+                    <div className={"max-w-screen bg-white p-sm"} data-affects-preview={"height"}>
                         {stateBar}
-                        {state ? (
+                        {/*{state ? (
                             <Alert className={"mb-md mt-md"} type="danger">
                                 Any changes you do on the page will not be stored!
                             </Alert>
-                        ) : null}
+                        ) : null}*/}
                     </div>
                 );
             }}

packages/app-website-builder-workflows/src/Components/PageEditor/ToggleEditorMode.tsx

@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import { useWorkflowState } from "@webiny/app-workflows";
+import { useDocumentEditor } from "@webiny/app-website-builder/DocumentEditor/index.js";
+
+export const ToggleEditorMode = observer(() => {
+    const { presenter } = useWorkflowState();
+    const editor = useDocumentEditor();
+
+    const hasState = !!presenter.vm.state?.state;
+
+    useEffect(() => {
+        editor.updateEditor(state => {
+            state.isReadOnly = hasState;
+        });
+    }, [hasState]);
+
+    return null;
+});

packages/app-website-builder/src/BaseEditor/config/EditorConfig.tsx

@@ -13,6 +13,8 @@ import { ElementProperties, ElementProperty } from "./ElementProperty.js";
 import { ElementAction, ElementActions } from "./ElementAction.js";
 import type { ElementInputConfig } from "./ElementInput.js";
 import { ElementInput } from "./ElementInput.js";
+import { IsNotReadOnly } from "~/BaseEditor/config/IsNotReadOnly.js";
+import { IsReadOnly } from "~/BaseEditor/config/IsReadOnly.js";
 
 interface EditorConfig {
     elements: ElementConfig[];
@@ -21,7 +23,7 @@ interface EditorConfig {
 
 const base = createConfigurableComponent<EditorConfig>("DocumentEditor");
 
-export const EditorConfig = Object.assign(base.Config, {
+export const EditorConfigComponents = {
     /**
      * Components to configure editor UI.
      */
@@ -33,6 +35,8 @@ export const EditorConfig = Object.assign(base.Config, {
         TopBar,
         Toolbar,
         Sidebar,
+        IsReadOnly,
+        IsNotReadOnly,
         OnActiveElement,
         NoActiveElement
     },
@@ -57,7 +61,9 @@ export const EditorConfig = Object.assign(base.Config, {
      * Access full editor config. WARNING: very low-level, we don't recommend using this directly!
      */
     useEditorConfig
-});
+};
+
+export const EditorConfig = Object.assign(base.Config, EditorConfigComponents);
 
 export const EditorWithConfig = Object.assign(base.WithConfig, { displayName: "EditorWithConfig" });
 

packages/app-website-builder/src/BaseEditor/config/IsNotReadOnly.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { useSelectFromEditor } from "~/BaseEditor/hooks/useSelectFromEditor.js";
+
+export interface IsNotReadOnlyProps {
+    children: React.ReactNode;
+}
+
+export const IsNotReadOnly = ({ children }: IsNotReadOnlyProps) => {
+    const isEditorReadOnly = useSelectFromEditor(state => state.isReadOnly);
+
+    if (isEditorReadOnly) {
+        return null;
+    }
+
+    return <>{children}</>;
+};