feat(app-website-builder-workflows): connect workflows to wb

packages/app-headless-cms-workflows/src/Components/OptionItem/OpenInNewWindow.tsx

@@ -4,11 +4,11 @@ import { Components } from "@webiny/app-workflows";
 import { ReactComponent as OpenInNewIcon } from "@webiny/icons/open_in_new.svg";
 import { useRouter } from "@webiny/app";
 import { Routes } from "@webiny/app-headless-cms/routes.js";
-import { parseAppName } from "~/utils/appName.js";
+import { isCmsAppName, parseAppName } from "~/utils/appName.js";
 
 const { OpenInNewWindow } = Components.List.Options;
 
-export const ListOpenInNewWindow = OpenInNewWindow.createDecorator(() => {
+export const ListOpenInNewWindow = OpenInNewWindow.createDecorator(Original => {
     return function ListOpenInNewWindow(props) {
         const { state } = props;
 
@@ -27,6 +27,10 @@ export const ListOpenInNewWindow = OpenInNewWindow.createDecorator(() => {
             window.open(goTo, "_blank");
         }, [state.id]);
 
+        if (isCmsAppName(state.app) === false) {
+            return <Original {...props} />;
+        }
+
         return (
             <DropdownMenu.Item
                 icon={<Icon icon={<OpenInNewIcon />} label={"Open In New Window"} />}

packages/app-headless-cms-workflows/src/utils/appName.ts

@@ -11,3 +11,8 @@ export const parseAppName = (appName: string): string => {
     }
     return parts[1];
 };
+
+export const isCmsAppName = (appName: string): boolean => {
+    const parts = appName.split(".");
+    return parts.length === 2 && parts[0] === "cms";
+};

packages/app-serverless-cms/package.json

@@ -28,6 +28,7 @@
     "@webiny/app-security-access-management": "0.0.0",
     "@webiny/app-trash-bin": "0.0.0",
     "@webiny/app-website-builder": "0.0.0",
+    "@webiny/app-website-builder-workflows": "0.0.0",
     "@webiny/app-websockets": "0.0.0",
     "@webiny/app-workflows": "0.0.0",
     "@webiny/lexical-editor-actions": "0.0.0",

packages/app-serverless-cms/src/Admin.tsx

@@ -23,6 +23,7 @@ import { Extension as WebsiteBuilder } from "@webiny/app-website-builder/Extensi
 import { SchedulerConfigs } from "@webiny/app-headless-cms-scheduler";
 import { ContentReviews } from "@webiny/app-workflows";
 import { CmsWorkflows } from "@webiny/app-headless-cms-workflows";
+import { WebsiteBuilderWorkflows } from "@webiny/app-website-builder-workflows";
 
 export interface AdminProps extends Omit<BaseAdminProps, "createApolloClient"> {
     createApolloClient?: BaseAdminProps["createApolloClient"];
@@ -54,6 +55,7 @@ const App = (props: AdminProps) => {
             <AdvancedContentOrganisation />
             <WebsiteBuilder />
             <CmsWorkflows />
+            <WebsiteBuilderWorkflows />
             {props.children}
         </BaseAdmin>
     );

packages/app-serverless-cms/tsconfig.build.json

@@ -19,6 +19,7 @@
     { "path": "../app-security-access-management/tsconfig.build.json" },
     { "path": "../app-trash-bin/tsconfig.build.json" },
     { "path": "../app-website-builder/tsconfig.build.json" },
+    { "path": "../app-website-builder-workflows/tsconfig.build.json" },
     { "path": "../app-websockets/tsconfig.build.json" },
     { "path": "../app-workflows/tsconfig.build.json" },
     { "path": "../lexical-editor-actions/tsconfig.build.json" },
@@ -72,6 +73,8 @@
       "@webiny/app-trash-bin": ["../app-trash-bin/src"],
       "@webiny/app-website-builder/*": ["../app-website-builder/src/*"],
       "@webiny/app-website-builder": ["../app-website-builder/src"],
+      "@webiny/app-website-builder-workflows/*": ["../app-website-builder-workflows/src/*"],
+      "@webiny/app-website-builder-workflows": ["../app-website-builder-workflows/src"],
       "@webiny/app-websockets/*": ["../app-websockets/src/*"],
       "@webiny/app-websockets": ["../app-websockets/src"],
       "@webiny/app-workflows/*": ["../app-workflows/src/*"],

packages/app-serverless-cms/tsconfig.json

@@ -19,6 +19,7 @@
     { "path": "../app-security-access-management" },
     { "path": "../app-trash-bin" },
     { "path": "../app-website-builder" },
+    { "path": "../app-website-builder-workflows" },
     { "path": "../app-websockets" },
     { "path": "../app-workflows" },
     { "path": "../lexical-editor-actions" },
@@ -72,6 +73,8 @@
       "@webiny/app-trash-bin": ["../app-trash-bin/src"],
       "@webiny/app-website-builder/*": ["../app-website-builder/src/*"],
       "@webiny/app-website-builder": ["../app-website-builder/src"],
+      "@webiny/app-website-builder-workflows/*": ["../app-website-builder-workflows/src/*"],
+      "@webiny/app-website-builder-workflows": ["../app-website-builder-workflows/src"],
       "@webiny/app-websockets/*": ["../app-websockets/src/*"],
       "@webiny/app-websockets": ["../app-websockets/src"],
       "@webiny/app-workflows/*": ["../app-workflows/src/*"],

packages/app-website-builder-workflows/.babelrc.js

@@ -0,0 +1 @@
+module.exports = require("@webiny/build-tools").createBabelConfigForReact({ path: __dirname });

packages/app-website-builder-workflows/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@webiny/app-website-builder-workflows",
+  "version": "0.0.0",
+  "type": "module",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/webiny/webiny-js.git"
+  },
+  "author": "Webiny Ltd",
+  "license": "MIT",
+  "dependencies": {
+    "@apollo/react-hooks": "^3.1.5",
+    "@webiny/admin-ui": "0.0.0",
+    "@webiny/app": "0.0.0",
+    "@webiny/app-admin": "0.0.0",
+    "@webiny/app-security": "0.0.0",
+    "@webiny/app-website-builder": "0.0.0",
+    "@webiny/app-workflows": "0.0.0",
+    "@webiny/icons": "0.0.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-helmet": "^6.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.79",
+    "@webiny/build-tools": "0.0.0",
+    "rimraf": "^6.0.1",
+    "typescript": "5.9.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "svgo": {
+    "plugins": {
+      "removeViewBox": false
+    }
+  },
+  "gitHead": "b8aec8a1be3f25c3b428b357fe1e352c7cbff9ae"
+}

packages/app-website-builder-workflows/src/Components/OptionItem/OpenInNewWindow.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from "react";
+import { DropdownMenu, Icon } from "@webiny/admin-ui";
+import { Components } from "@webiny/app-workflows";
+import { ReactComponent as OpenInNewIcon } from "@webiny/icons/open_in_new.svg";
+import { useRouter } from "@webiny/app";
+import { Routes } from "@webiny/app-website-builder/routes.js";
+import { WB_PAGE_APP } from "~/constants.js";
+
+const { OpenInNewWindow } = Components.List.Options;
+
+export const ListOpenInNewWindow = OpenInNewWindow.createDecorator(Original => {
+    return function ListOpenInNewWindow(props) {
+        const { state } = props;
+
+        const { getLink } = useRouter();
+        const onClick = useCallback(() => {
+            const url = getLink(Routes.Pages.Editor, {
+                id: state.targetRevisionId,
+                folderId: "root"
+            });
+
+            const goTo = `${window.location.origin}${url}`;
+
+            window.open(goTo, "_blank");
+        }, [state.id]);
+
+        if (state.app !== WB_PAGE_APP) {
+            return <Original {...props} />;
+        }
+
+        return (
+            <DropdownMenu.Item
+                icon={<Icon icon={<OpenInNewIcon />} label={"Open In New Window"} />}
+                text={"Open in New Window"}
+                onClick={onClick}
+            />
+        );
+    };
+});

packages/app-website-builder-workflows/src/Components/OptionItem/index.ts

@@ -0,0 +1 @@
+export { ListOpenInNewWindow } from "./OpenInNewWindow.js";

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

@@ -0,0 +1,48 @@
+import React from "react";
+import { PageFormWorkflowStateTooltip } from "./PageFormWorkflowStateTooltip.js";
+import { useSelectFromDocument } from "@webiny/app-website-builder/BaseEditor/hooks/useSelectFromDocument.js";
+import { useApolloClient } from "@apollo/react-hooks";
+import { useSecurity } from "@webiny/app-security";
+import { WorkflowStateProvider } from "@webiny/app-workflows";
+import { WB_PAGE_APP } from "~/constants.js";
+import { PageFormWorkflowState } from "./PageFormWorkflowState.js";
+import { PageEditorConfig } from "@webiny/app-website-builder";
+import { PageFormWorkflowStatePublishButton } from "./PageFormWorkflowStatePublishButton.js";
+import { PageEditorAutoSave } from "./PageEditorAutoSave.js";
+
+const { Ui } = PageEditorConfig;
+
+export const PageEditor = 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 } = useSecurity();
+
+        return (
+            <WorkflowStateProvider
+                app={WB_PAGE_APP}
+                id={page.id}
+                identity={identity}
+                client={client}
+                title={`Website Builder: ${page.title}`}
+            >
+                {/* Should remove autosave feature */}
+                <PageEditorAutoSave />
+                {/* Should add a button with list of steps and their states + comment button in each row */}
+                <PageFormWorkflowStateTooltip />
+                {/* should remove publish button from the form */}
+                <PageFormWorkflowStatePublishButton />
+                {/* Original top bar*/}
+                <Original />
+                {/* Should render workflow state bar and the alert for storing changes */}
+                <PageFormWorkflowState />
+            </WorkflowStateProvider>
+        );
+    };
+});

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { PageEditorConfig } from "@webiny/app-website-builder";
+
+const { Ui } = PageEditorConfig;
+
+export const PageEditorAutoSave = () => {
+    return (
+        <Ui.TopBar.Element
+            remove={true}
+            group={"left"}
+            name={"autoSave"}
+            after={"title"}
+            element={null}
+        />
+    );
+};

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

@@ -0,0 +1,35 @@
+import React from "react";
+import { WorkflowStateBar } from "@webiny/app-workflows";
+import { Alert, Grid } from "@webiny/admin-ui";
+import type { IWorkflowState } from "@webiny/app-workflows/types.js";
+
+interface IStoreAlertProps {
+    state: IWorkflowState | undefined | null;
+}
+
+const StoreAlert = ({ state }: IStoreAlertProps) => {
+    if (!state) {
+        return null;
+    }
+    return (
+        <Alert className={"mb-md mt-md"} type="danger">
+            Any changes you do on the page will not be stored!
+        </Alert>
+    );
+};
+
+export const PageFormWorkflowState = () => {
+    return (
+        <div className={"max-w-screen bg-white pt-sm pb-sm"}>
+            <Grid className={"max-w-[960px] mx-auto"}>
+                <Grid.Column span={12}>
+                    <WorkflowStateBar>
+                        {({ state }) => {
+                            return <StoreAlert state={state} />;
+                        }}
+                    </WorkflowStateBar>
+                </Grid.Column>
+            </Grid>
+        </div>
+    );
+};

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

@@ -0,0 +1,8 @@
+import React from "react";
+import { PageEditorConfig } from "@webiny/app-website-builder";
+
+const { Ui } = PageEditorConfig;
+
+export const PageFormWorkflowStatePublishButton = () => {
+    return <Ui.TopBar.Action remove={true} name={"buttonPublish"} element={<></>} />;
+};

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { WorkflowStateTooltip } from "@webiny/app-workflows";
+import { PageEditorConfig } from "@webiny/app-website-builder";
+
+const { Ui } = PageEditorConfig;
+
+const TooltipButton = () => {
+    return <WorkflowStateTooltip />;
+};
+
+export const PageFormWorkflowStateTooltip = () => {
+    return (
+        <Ui.TopBar.Action
+            before={"buttonPublish"}
+            name={"buttonWorkflowStateTooltip"}
+            element={<TooltipButton />}
+        />
+    );
+};

packages/app-website-builder-workflows/src/Components/PageEditor/index.ts

@@ -0,0 +1 @@
+export { PageEditor } from "./PageEditor.js";

packages/app-website-builder-workflows/src/Components/PageWorkflows/PageWorkflowsEditorView.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useMemo } from "react";
+import { AdminConfig, useRoute, useRouter } from "@webiny/app-admin";
+import { Routes } from "~/routes.js";
+import type { IWorkflowApplication } from "@webiny/app-workflows";
+import { WorkflowsAdmin } from "@webiny/app-workflows";
+import { Icon } from "@webiny/admin-ui";
+import { ReactComponent as WorkflowsIcon } from "@webiny/icons/workspaces.svg";
+import { WB_PAGE_APP } from "~/constants.js";
+
+const { Menu } = AdminConfig;
+
+export const PageWorkflowsEditorMenu = () => {
+    const router = useRouter();
+
+    return (
+        <Menu
+            name={"websiteBuilder.pages.workflows"}
+            pinnable={true}
+            parent={"wb"}
+            element={<Menu.Link text={"Workflows"} to={router.getLink(Routes.Pages.Workflows)} />}
+        />
+    );
+};
+
+export const PageWorkflowsEditorView = () => {
+    const { route } = useRoute(Routes.Pages.Workflows);
+    const { goToRoute } = useRouter();
+
+    const apps = useMemo<IWorkflowApplication[]>(() => {
+        return [
+            {
+                id: WB_PAGE_APP,
+                name: "Pages",
+                icon: <Icon icon={<WorkflowsIcon />} label={"Pages Workflows"} />
+            }
+        ];
+    }, []);
+
+    const onAppClick = useCallback(
+        (id: string) => {
+            goToRoute(Routes.Pages.Workflows, {
+                app: id
+            });
+        },
+        [apps]
+    );
+
+    const app = useMemo(() => {
+        return apps.find(a => a.id === route.params.app) || apps[0];
+    }, [route.params.app, apps]);
+
+    return <WorkflowsAdmin apps={apps} onAppClick={onAppClick} app={app.id} />;
+};

packages/app-website-builder-workflows/src/Components/PageWorkflows/index.ts

@@ -0,0 +1 @@
+export * from "./PageWorkflowsEditorView.js";

packages/app-website-builder-workflows/src/Components/PagesList/PageList.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { PageListConfig } from "@webiny/app-website-builder/modules/pages/configs/index.js";
+import { PagesListContentReviews } from "./PagesListContentReviews.js";
+
+export const PageList = () => {
+    return (
+        <PageListConfig>
+            <PagesListContentReviews />
+        </PageListConfig>
+    );
+};