merge

Author: Tishasoumya-02

README.md

@@ -1,149 +1,89 @@
-# workflow-manager 🚀
+# Volto Workflow Manager
 
-[![Built with Cookieplone](https://img.shields.io/badge/built%20with-Cookieplone-0083be.svg?logo=cookiecutter)](https://github.com/plone/cookieplone-templates/)
-[![Black code style](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)
-[![Backend Tests](https://github.com/collective/workflow-manager/actions/workflows/backend.yml/badge.svg)](https://github.com/collective/workflow-manager/actions/workflows/backend.yml)
-[![Frontend Tests](https://github.com/collective/workflow-manager/actions/workflows/frontend.yml/badge.svg)](https://github.com/collective/workflow-manager/actions/workflows/frontend.yml)
+Volto Workflow Manager is a visual workflow editor for Plone.  
+It lets you create, manage, and edit workflows inside the Volto UI using a simple graph-based interface.
 
-A new project using Plone 6.
+---
 
-## Quick Start 🏁
+## Installation
 
-### Prerequisites ✅
+This package is a Volto add-on. To install it in your Volto project:
 
--   An [operating system](https://6.docs.plone.org/install/create-project-cookieplone.html#prerequisites-for-installation) that runs all the requirements mentioned.
--   [uv](https://6.docs.plone.org/install/create-project-cookieplone.html#uv)
--   [nvm](https://6.docs.plone.org/install/create-project-cookieplone.html#nvm)
--   [Node.js and pnpm](https://6.docs.plone.org/install/create-project.html#node-js) 22
--   [Make](https://6.docs.plone.org/install/create-project-cookieplone.html#make)
--   [Git](https://6.docs.plone.org/install/create-project-cookieplone.html#git)
--   [Docker](https://docs.docker.com/get-started/get-docker/) (optional)
+1. Add `workflow-manager` to your project's `package.json`:
 
-
-### Installation 🔧
-
-1.  Clone this repository, then change your working directory.
-
-    ```shell
-    git clone [email protected]:collective/workflow-manager.git
-    cd workflow-manager
+    ```json
+    {
+      "addons": ["workflow-manager"]
+    }
     ```
 
-2.  Install this code base.
+2. Install dependencies:
 
-    ```shell
-    make install
+    ```bash
+    pnpm install
     ```
 
+3. Start the Volto development server:
 
-### Fire Up the Servers 🔥
-
-1.  Create a new Plone site on your first run.
-
-    ```shell
-    make backend-create-site
+    ```bash
+    pnpm start
     ```
 
-2.  Start the backend at http://localhost:8080/.
+---
 
-    ```shell
-    make backend-start
-    ```
+## How to Use
 
-3.  In a new shell session, start the frontend at http://localhost:3000/.
+1. Open the **Control Panel** and select **Workflow Manager**.
+2. Create a new workflow if one does not exist.
+3. Add states and transitions using the graph interface.
+4. Edit state and transition details from the sidebar.
+5. Assign permissions and roles as needed.
+6. Save changes using the Volto toolbar.
 
-    ```shell
-    make frontend-start
-    ```
-
-Voila! Your Plone site should be live and kicking! 🎉
-
-### Local Stack Deployment 📦
+---
 
-Deploy a local `Docker Compose` environment that includes:
+## Development Setup
 
-- Docker images for Backend and Frontend 🖼️
-- A stack with a Traefik router and a Postgres database 🗃️
-- Accessible at [http://workflow-manager.localhost](http://workflow-manager.localhost) 🌐
+If you want to contribute or customize the add-on locally:
 
-Execute the following:
-
-```shell
-make stack-start
-make stack-create-site
-```
+## Requirements
 
-And... you're all set! Your Plone site is up and running locally! 🚀
+- [Node.js 22](https://6.docs.plone.org/install/create-project.html#node-js) 
+- [pnpm](https://pnpm.io/)
+- [UV](https://6.docs.plone.org/install/create-project-cookieplone.html#uv)
 
-## Project Structure 🏗️
+### Installation 
 
-This monorepo consists of the following distinct sections:
+1. Clone the repository:
 
-- **backend**: Houses the API and Plone installation, utilizing pip instead of buildout, and includes a policy package named workflow.manager.
-- **frontend**: Contains the React (Volto) package.
-- **devops**: Encompasses Docker Stack, Ansible playbooks, and Cache settings.
-- **docs**: Scaffold for writing documentation for your project.
-
-### Why This Structure? 🤔
-
-- All necessary codebases to run the site are contained within the repo (excluding existing addons for Plone and React).
-- Specific GitHub Workflows are triggered based on changes in each codebase (refer to .github/workflows).
-- Simplifies the creation of Docker images for each codebase.
-- Demonstrates Plone installation/setup without buildout.
-
-## Code Quality Assurance 🧐
-
-To automatically format your code and ensure it adheres to quality standards, execute:
-
-```shell
-make check
+```sh
+git clone https://github.com/Manas-Kenge/workflow-manager.git
+cd workflow-manager
 ```
 
-### Format the codebase
+2. Install dependencies for both Backend and Frontend:
 
-To format the codebase, it is possible to run `format`:
-
-```shell
-make format
+```sh
+make install
 ```
 
-| Section | Tool | Description | Configuration |
-| --- | --- | --- | --- |
-| backend | Ruff | Python code formatting, imports sorting  | [`backend/pyproject.toml`](./backend/pyproject.toml) |
-| backend | `zpretty` | XML and ZCML formatting  | -- |
-| frontend | ESLint | Fixes most common frontend issues | [`frontend/.eslintrc.js`](.frontend/.eslintrc.js) |
-| frontend | prettier | Format JS and Typescript code  | [`frontend/.prettierrc`](.frontend/.prettierrc) |
-| frontend | Stylelint | Format Styles (css, less, sass)  | [`frontend/.stylelintrc`](.frontend/.stylelintrc) |
-
-Formatters can also be run within the `backend` or `frontend` folders.
+### Start the Servers
 
-### Linting the codebase
-or `lint`:
+1. Start the **Backend** (Plone) at [http://localhost:8080/](http://localhost:8080/):
 
- ```shell
-make lint
+```sh
+make backend-start
 ```
 
-| Section | Tool | Description | Configuration |
-| --- | --- | --- | --- |
-| backend | Ruff | Checks code formatting, imports sorting  | [`backend/pyproject.toml`](./backend/pyproject.toml) |
-| backend | Pyroma | Checks Python package metadata  | -- |
-| backend | check-python-versions | Checks Python version information  | -- |
-| backend | `zpretty` | Checks XML and ZCML formatting  | -- |
-| frontend | ESLint | Checks JS / Typescript lint | [`frontend/.eslintrc.js`](.frontend/.eslintrc.js) |
-| frontend | prettier | Check JS / Typescript formatting  | [`frontend/.prettierrc`](.frontend/.prettierrc) |
-| frontend | Stylelint | Check Styles (css, less, sass) formatting  | [`frontend/.stylelintrc`](.frontend/.stylelintrc) |
-
-Linters can be run individually within the `backend` or `frontend` folders.
+2. In a new terminal, start the **Frontend** (Volto) at [http://localhost:3000/](http://localhost:3000/):
 
-## Internationalization 🌐
+```sh
+make frontend-start
+```
 
-Generate translation files for Plone and Volto with ease:
+ Your Plone development environment is now live!
 
-```shell
-make i18n
-```
 
-## Credits and Acknowledgements 🙏
+# License
 
-Generated using [Cookieplone (0.9.7)](https://github.com/plone/cookieplone) and [cookieplone-templates (684d5c7)](https://github.com/plone/cookieplone-templates/commit/684d5c7f43a6ebc3184e2a0106b0160820a96e66) on 2025-05-22 13:24:17.198737. A special thanks to all contributors and supporters!
+This project is licensed under the MIT License.

backend/src/workflow/manager/api/services/workflow/actions.py

@@ -1,5 +1,6 @@
 import json
 from Products.DCWorkflow.Transitions import TRIGGER_AUTOMATIC, TRIGGER_USER_ACTION
+from Products.DCWorkflow.Expression import Expression
 from plone.protect.interfaces import IDisableCSRFProtection
 from plone.restapi.deserializer import json_body
 from plone.restapi.services import Service
@@ -290,13 +291,21 @@ def reply(self):
                 guard = transition.getGuard()
                 guard_data = body['guard']
                 if 'permissions' in guard_data:
-                    guard.permissions = tuple(guard_data['permissions'])
+                    guard.permissions = tuple(
+                        Expression('string:%s' % p) for p in guard_data['permissions']
+                    )
                 if 'roles' in guard_data:
-                    guard.roles = tuple(guard_data['roles'])
+                    guard.roles = tuple(
+                        Expression('string:%s' % r) for r in guard_data['roles']
+                    )
                 if 'groups' in guard_data:
-                    guard.groups = tuple(guard_data['groups'])
-                if 'expr' in guard_data:
-                    guard.expr = guard_data['expr']
+                    guard.groups = tuple(
+                        Expression('string:%s' % g) for g in guard_data['groups']
+                    )
+                if 'expr' in guard_data and guard_data['expr']:
+                    guard.expr = Expression(guard_data['expr'])
+                else:
+                    guard.expr = Expression('')
                 transition.guard = guard
 
             # Update states that have this transition

backend/src/workflow/manager/api/services/workflow/transition.py

@@ -12,7 +12,7 @@ import {
   Item,
   ProgressCircle,
 } from '@adobe/react-spectrum';
-import { listStates } from '../../actions/state';
+import { listStates, deleteState } from '../../actions/state';
 import { listTransitions } from '../../actions/transition';
 import PropertiesTab from './Tabs/PropertiesTab';
 import TransitionsTab from './Tabs/TransitionsTab';
@@ -137,8 +137,19 @@ const State: React.FC<StateProps> = ({
     });
   }, []);
 
+  const handleDeleteState = useCallback(
+    (stateId: string) => {
+      dispatch(deleteState(workflowId, stateId));
+      setSelectedStateId(null);
+      setLocalStateData(null);
+      setInitialStateData(null);
+      onDataChange(null);
+    },
+    [dispatch, workflowId, onDataChange],
+  );
+
   if (isLoadingData && !statesInfo.loaded) {
-    return <ProgressCircle isIndeterminate />;
+    return <ProgressCircle isIndeterminate aria-label="Loading states..." />;
   }
 
   const areTabsDisabled = isDisabled || !localStateData;
@@ -153,6 +164,7 @@ const State: React.FC<StateProps> = ({
       >
         <Heading level={3}>Configure a State</Heading>
         <Picker
+          aria-label="Choose state"
           placeholder="Choose a state..."
           items={statesInfo.data?.states || []}
           selectedKey={selectedStateId}
@@ -175,6 +187,8 @@ const State: React.FC<StateProps> = ({
                 <PropertiesTab
                   key={`properties-${selectedStateId}`}
                   data={localStateData?.properties}
+                  handleDeleteState={handleDeleteState}
+                  selectedStateId={selectedStateId}
                   schema={propertiesSchema}
                   onChange={(properties) => handleStateChange({ properties })}
                   isDisabled={areTabsDisabled}

frontend/packages/volto-workflow-manager/src/components/States/State.tsx

@@ -1,12 +1,24 @@
 import React, { useCallback } from 'react';
-import { View, Text } from '@adobe/react-spectrum';
-import Form from '@plone/volto/components/manage/Form/Form';
+import {
+  View,
+  Text,
+  Flex,
+  DialogTrigger,
+  AlertDialog,
+  Button,
+} from '@adobe/react-spectrum';
+import { BlockDataForm } from '@plone/volto/components/manage/Form';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import deleteIcon from '@plone/volto/icons/delete.svg';
+
 import type { PropertiesTabProps } from '../../../types/state';
 
 const PropertiesTab: React.FC<PropertiesTabProps> = ({
   data,
   schema,
   onChange,
+  handleDeleteState,
+  selectedStateId,
   isDisabled,
 }) => {
   const handleChangeField = useCallback(
@@ -25,12 +37,27 @@ const PropertiesTab: React.FC<PropertiesTabProps> = ({
 
   return (
     <View>
-      <Form
-        key={JSON.stringify(data)} // Force re-render when data changes
-        schema={schema}
+      <Flex justifyContent="end" margin="size-100">
+        <DialogTrigger>
+          <Button variant="negative" isDisabled={isDisabled}>
+            <Icon name={deleteIcon} size="20px" />
+          </Button>
+          <AlertDialog
+            title="Delete State"
+            variant="destructive"
+            primaryActionLabel="Delete"
+            cancelLabel="Cancel"
+            onPrimaryAction={() => handleDeleteState(selectedStateId)}
+          >
+            Are you sure you want to delete '{data.title}' state? This action
+            cannot be undone.
+          </AlertDialog>
+        </DialogTrigger>
+      </Flex>
+      <BlockDataForm
         formData={data}
+        schema={schema}
         onChangeField={handleChangeField}
-        hideActions
       />
     </View>
   );

frontend/packages/volto-workflow-manager/src/components/States/Tabs/PropertiesTab.tsx

@@ -47,7 +47,6 @@ const GuardsTab: React.FC<GuardsTabProps> = ({
             items={roleItems}
             selectedKeys={new Set(data.roles)}
             onSelectionChange={(keys) => handleSelectionChange(keys, 'roles')}
-            isDisabled={isDisabled}
             height="size-2000"
           >
             {(item) => <Item key={item.id}>{item.name}</Item>}
@@ -62,7 +61,6 @@ const GuardsTab: React.FC<GuardsTabProps> = ({
             items={availableGroups}
             selectedKeys={new Set(data.groups)}
             onSelectionChange={(keys) => handleSelectionChange(keys, 'groups')}
-            isDisabled={isDisabled}
             height="size-2000"
           >
             {(item) => <Item key={item.id}>{item.title}</Item>}
@@ -79,7 +77,6 @@ const GuardsTab: React.FC<GuardsTabProps> = ({
             onSelectionChange={(keys) =>
               handleSelectionChange(keys, 'permissions')
             }
-            isDisabled={isDisabled}
             height="size-2000"
           >
             {(item) => <Item key={item.perm}>{item.name}</Item>}