feat: add editor readonly mode (#5010)

Author: Pavel910

extensions/_wip/idp/MyIdpConfig.ts

@@ -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;

extensions/_wip/idp/MyIdpExtension.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 */}

extensions/_wip/myOnEntryBeforeCreate.ts

@@ -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/admin-ui/src/theme.css

@@ -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>
+        );
+    };
+});