wip

Author: brunozoric

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

@@ -1,11 +1,18 @@
 import React from "react";
-import { PageListConfig } from "@webiny/app-website-builder/modules/pages/configs/index.js";
+import { PageListConfig } from "@webiny/app-website-builder";
 import { PagesListContentReviews } from "./PagesListContentReviews.js";
+import { PageListChangeStatus } from "./PageListChangeStatus.js";
+import { UseDocumentListHookDecorator } from "./UseDocumentListHookDecorator.js";
 
 export const PageList = () => {
     return (
         <PageListConfig>
+            {/* Attach the decorator for useDocumentList - need it to make pages with states unselectable */}
+            <UseDocumentListHookDecorator />
+            {/* Add a Content Reviews button to footer in sidebar  */}
             <PagesListContentReviews />
+            {/* Decorate the Change Status action in row options to hide it for pages in certain workflow states */}
+            <PageListChangeStatus />
         </PageListConfig>
     );
 };

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

@@ -0,0 +1,32 @@
+import React from "react";
+import { PageListConfig } from "@webiny/app-website-builder";
+import { WorkflowStateValue } from "@webiny/app-workflows/types.js";
+import type { WithWorkflowState } from "~/types.js";
+import type { PageDto } from "@webiny/app-website-builder/domain/Page/index.js";
+import { usePage } from "@webiny/app-website-builder/modules/pages/PagesList/hooks/usePage.js";
+
+const { Browser } = PageListConfig;
+
+const decoratePage = (page: PageDto): WithWorkflowState<PageDto> => {
+    return {
+        ...page,
+        // @ts-expect-error
+        state: page.state
+    };
+};
+
+export const PageListChangeStatus = Browser.Page.Action.createDecorator(Original => {
+    return function PageListChangeStatusAction(props) {
+        const { page } = usePage();
+        const { state } = decoratePage(page);
+        if (
+            props.name !== "changeStatus" ||
+            !state?.state ||
+            state.state === WorkflowStateValue.approved
+        ) {
+            return <Original {...props} />;
+        }
+
+        return null;
+    };
+});

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

@@ -18,11 +18,11 @@ const PageListContentReviewsButton = () => {
                     <Sidebar.Item
                         className={"w-full"}
                         onClick={showOverlay}
-                        text={"Workflow States"}
+                        text={"Content Reviews"}
                         icon={
                             <Sidebar.Item.Icon
                                 element={<WorkflowStateListIcon />}
-                                label={"Workflow States"}
+                                label={"Content Reviews"}
                             />
                         }
                     />

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

@@ -0,0 +1,17 @@
+import { useDocumentList } from "@webiny/app-website-builder/modules/pages/PagesList/useDocumentList.js";
+
+export const UseDocumentListHookDecorator = useDocumentList.createDecorator(original => {
+    return function useDocumentListWorkflows() {
+        const hook = original();
+
+        return {
+            ...hook,
+            vm: {
+                ...hook.vm
+                // data: hook.vm.data.map(item => {
+                //     return item;
+                // })
+            }
+        };
+    };
+});

packages/app-website-builder-workflows/src/types.ts

@@ -0,0 +1,18 @@
+import type { WorkflowStateValue } from "@webiny/app-workflows/types.js";
+
+export interface IRecordWorkflowStateIdentity {
+    id: string;
+    displayName: string;
+    type: string;
+}
+
+export interface IRecordWorkflowState {
+    workflowId: string;
+    stepId: string;
+    state: WorkflowStateValue;
+    savedBy?: IRecordWorkflowStateIdentity | null;
+}
+
+export type WithWorkflowState<T> = T & {
+    state?: IRecordWorkflowState | null;
+};

packages/app-website-builder/src/modules/pages/PagesList/components/Table/Cells/CellActions.tsx

@@ -3,6 +3,7 @@ import { FolderProvider, useAcoConfig } from "@webiny/app-aco";
 import { makeDecoratable, OptionsMenu } from "@webiny/app-admin";
 import { PageListConfig } from "~/modules/pages/configs/index.js";
 import { PageProvider } from "~/modules/pages/PagesList/hooks/usePage.js";
+
 const DefaultCellActions = () => {
     const { useTableRow, isFolderRow } = PageListConfig.Browser.Table.Column;
     const { row } = useTableRow();
@@ -20,6 +21,10 @@ const DefaultCellActions = () => {
             </FolderProvider>
         );
     }
+    
+    console.log({
+        ...documentConfig.actions
+    });
 
     return (
         <PageProvider page={row.data}>

packages/app-website-builder/src/modules/pages/PagesList/presenters/DocumentListPresenterContext.tsx

@@ -1,11 +1,16 @@
 import React, { createContext, useContext, useMemo } from "react";
 import { DocumentListPresenter } from "./DocumentListPresenter.js";
+import { makeDecoratableHook } from "@webiny/react-composition";
 
 const DocumentListPresenterContext = createContext<DocumentListPresenter | null>(null);
 
-export const DocumentListPresenterProvider: React.FC<{ children: React.ReactNode }> = ({
+interface IDocumentListPresenterProviderProps {
+    children: React.ReactNode;
+}
+
+export const DocumentListPresenterProvider = ({
     children
-}) => {
+}: IDocumentListPresenterProviderProps) => {
     const presenter = useMemo(() => new DocumentListPresenter(), []);
     return (
         <DocumentListPresenterContext.Provider value={presenter}>
@@ -14,12 +19,12 @@ export const DocumentListPresenterProvider: React.FC<{ children: React.ReactNode
     );
 };
 
-export function useDocumentListPresenter() {
+export const useDocumentListPresenter = makeDecoratableHook(() => {
     const presenter = useContext(DocumentListPresenterContext);
     if (!presenter) {
         throw new Error(
             "useDocumentListPresenter must be used within a DocumentListPresenterProvider"
         );
     }
     return presenter;
-}
+});

packages/app-website-builder/src/modules/pages/PagesList/presenters/index.ts

@@ -1 +1,2 @@
 export * from "./DocumentListPresenter.js";
+export { useDocumentListPresenter } from "./DocumentListPresenterContext.js";

packages/app-website-builder/src/modules/pages/PagesList/useDocumentList.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState, useMemo, useEffect, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { autorun } from "mobx";
 import {
     useGetFolderHierarchy,
@@ -8,8 +8,9 @@ import {
 import { useDocumentListPresenter } from "./presenters/DocumentListPresenterContext.js";
 import { useFilterPages, useLoadPages } from "~/features/pages/index.js";
 import { useSelectPages } from "~/features/pages/selectPages/useSelectPages.js";
+import { makeDecoratableHook } from "@webiny/react-composition";
 
-export const useDocumentList = () => {
+export const useDocumentList = makeDecoratableHook(() => {
     const isFirstLoad = useRef(true);
     const { folders, getFolderHierarchy } = useGetFolderHierarchy();
     const { listFoldersByParentIds } = useListFoldersByParentIds();
@@ -77,4 +78,4 @@ export const useDocumentList = () => {
         vm,
         showFilters
     };
-};
+});

packages/app-website-builder/src/modules/pages/configs/list/Browser/BulkAction.tsx

@@ -6,6 +6,7 @@ import { useDocumentList } from "~/modules/pages/PagesList/useDocumentList.js";
 import { useSelectPages } from "~/features/pages/selectPages/useSelectPages.js";
 import { Page, type PageDto, PageDtoMapper } from "~/domain/Page/index.js";
 import type { TableRow } from "~/modules/pages/types.js";
+import { makeDecoratable } from "@webiny/react-composition";
 
 export interface BulkActionConfig {
     name: string;
@@ -20,36 +21,33 @@ export interface BulkActionProps {
     element?: React.ReactElement;
 }
 
-export const BaseBulkAction = ({
-    name,
-    after = undefined,
-    before = undefined,
-    remove = false,
-    element
-}: BulkActionProps) => {
-    const getId = useIdGenerator("bulkAction");
+export const BaseBulkAction = makeDecoratable(
+    "BulkAction",
+    ({ name, after = undefined, before = undefined, remove = false, element }: BulkActionProps) => {
+        const getId = useIdGenerator("bulkAction");
 
-    const placeAfter = after !== undefined ? getId(after) : undefined;
-    const placeBefore = before !== undefined ? getId(before) : undefined;
+        const placeAfter = after !== undefined ? getId(after) : undefined;
+        const placeBefore = before !== undefined ? getId(before) : undefined;
 
-    return (
-        <Property id="browser" name={"browser"}>
-            <Property
-                id={getId(name)}
-                name={"bulkActions"}
-                remove={remove}
-                array={true}
-                before={placeBefore}
-                after={placeAfter}
-            >
-                <Property id={getId(name, "name")} name={"name"} value={name} />
-                {element ? (
-                    <Property id={getId(name, "element")} name={"element"} value={element} />
-                ) : null}
+        return (
+            <Property id="browser" name={"browser"}>
+                <Property
+                    id={getId(name)}
+                    name={"bulkActions"}
+                    remove={remove}
+                    array={true}
+                    before={placeBefore}
+                    after={placeAfter}
+                >
+                    <Property id={getId(name, "name")} name={"name"} value={name} />
+                    {element ? (
+                        <Property id={getId(name, "element")} name={"element"} value={element} />
+                    ) : null}
+                </Property>
             </Property>
-        </Property>
-    );
-};
+        );
+    }
+);
 
 const useWorker = () => {
     const { vm } = useDocumentList();