1090 edit labels (#1091)

* Remove not used function * Refactor part of the workflow store and add basic node details panel * Refactor the way we handle editedWorkflow * Update the changelog
publishpress · Dec 20, 2024 · a673cb1 · a673cb1
1 parent 6fca600
commit a673cb1
Show file tree

Hide file tree

Showing 12 changed files with 499 additions and 242 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Add the option to change manually enabled workflows in the bulk edit screen (Issue #942).
 - Add the "Save as current status" shortcut to the workflow editor (CTRL/CMD + S) (Issue #1084).
 - Add new display settings to customize the shortcode output (Issue #203).
+- Add new step setting field to customize the step label in the workflow editor (Issue #1090).
 
 ### Changed
 

diff --git a/assets/js/workflowEditor.js b/assets/js/workflowEditor.js
diff --git a/assets/jsx/workflow-editor/components/flow-editor/index.jsx b/assets/jsx/workflow-editor/components/flow-editor/index.jsx
@@ -86,6 +86,7 @@ export const FlowEditor = (props) => {
         removePlaceholderNodes,
         setDraggingFromHandle,
         setIsConnectingNodes,
+        unselectAll,
     } = useDispatch(workflowStore);
 
     const {
@@ -274,10 +275,12 @@ export const FlowEditor = (props) => {
     );
 
     const onNodesDelete = useCallback(() => {
+        unselectAll();
         updateFlowInEditedWorkflow();
     });
 
     const onEdgesDelete = useCallback(() => {
+        unselectAll();
         updateFlowInEditedWorkflow();
     });
 

diff --git a/assets/jsx/workflow-editor/components/keyboard-shortcuts/index.jsx b/assets/jsx/workflow-editor/components/keyboard-shortcuts/index.jsx
@@ -32,18 +32,15 @@ export const KeyboardShortcuts = () => {
     const { registerShortcut } = useDispatch(shortcutStore);
 
     const {
-        isSaving,
+        isEditedWorkflowSaveable,
     } = useSelect(
         (select) => {
             const {
-                isSavingWorkflow,
-                isAutosavingWorkflow,
+                isEditedWorkflowSaveable,
             } = select(workflowStore);
 
-            const isSaving = isSavingWorkflow() || isAutosavingWorkflow();
-
             return {
-                isSaving,
+                isEditedWorkflowSaveable,
             };
         },
         []
@@ -179,7 +176,7 @@ export const KeyboardShortcuts = () => {
     useShortcut(SHORTCUT_SAVE_AS_CURRENT_STATUS, (e) => {
         e.preventDefault();
 
-        if (isSaving) {
+        if (! isEditedWorkflowSaveable) {
             return;
         }
 

diff --git a/assets/jsx/workflow-editor/components/node-inspector/index.jsx b/assets/jsx/workflow-editor/components/node-inspector/index.jsx
@@ -16,6 +16,7 @@ import ObjectGroupIcon from "../icons/object-group";
 import LinesLeaningIcon from "../icons/lines-leaning";
 import NodeDevInfoPanel from "../node-dev-info-panel";
 import useScrollToTop from "../scrolled-to-top";
+import NodeDetailsPanel from "./node-details-panel";
 
 export const NodeInspector = () => {
     const {
@@ -145,6 +146,8 @@ export const NodeInspector = () => {
                 <>
                     <NodeInspectorCard node={selectedNode} />
 
+                    <NodeDetailsPanel node={selectedNode} />
+
                     {nodeHasSettings && (
                         <NodeSettingsPanel node={selectedNode} />
                     )}

diff --git a/assets/jsx/workflow-editor/components/node-inspector/node-details-panel.jsx b/assets/jsx/workflow-editor/components/node-inspector/node-details-panel.jsx
@@ -0,0 +1,54 @@
+import { PanelRow, TextControl } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import PersistentPanelBody from "../persistent-panel-body";
+import { useSelect, useDispatch } from "@wordpress/data";
+import { store as workflowStore } from '../workflow-store';
+import { store as editorStore } from '../editor-store';
+import { useCallback } from "@wordpress/element";
+import Text from "../data-fields/text";
+
+export const NodeDetailsPanel = ({ node }) => {
+    const {
+        getNodeTypeByName,
+    } = useSelect((select) => {
+        return {
+            getNodeTypeByName: select(editorStore).getNodeTypeByName,
+        };
+    });
+
+    const {
+        updateNode,
+    } = useDispatch(workflowStore);
+
+    const nodeType = getNodeTypeByName(node.data.name);
+
+    const onChangeLabel = useCallback((name, value) => {
+        const newNode = {
+            id: node.id,
+            data: {
+                label: value,
+            },
+        };
+
+        updateNode(newNode);
+    }, [node, updateNode]);
+
+    return (
+        <PersistentPanelBody title={__("Step Details", "post-expirator")}>
+            <PanelRow>
+                <Text
+                    name="label"
+                    label={__("Step Label", "post-expirator")}
+                    defaultValue={node.data.label || ''}
+                    settings={{
+                        placeholder: nodeType.label,
+                    }}
+                    onChange={onChangeLabel}
+                    description={__("This is the label that will be displayed in the workflow editor.", "post-expirator")}
+                />
+            </PanelRow>
+        </PersistentPanelBody>
+    );
+};
+
+export default NodeDetailsPanel;
diff --git a/assets/jsx/workflow-editor/components/node-inspector/node-settings-panel.jsx b/assets/jsx/workflow-editor/components/node-inspector/node-settings-panel.jsx
@@ -23,16 +23,16 @@ export const NodeSettingsPanel = ({ node }) => {
     } = useDispatch(workflowStore);
 
     const onChangeSetting = (fieldName, value) => {
-        if (! node.data?.settings) {
-            node.data.settings = {};
-        }
-
-        node.data.settings = {
-            ...node.data.settings,
-            [fieldName]: value
-        }
+        const newNode = {
+            id: node.id,
+            data: {
+                settings: {
+                    [fieldName]: value,
+                },
+            },
+        };
 
-        updateNode(node);
+        updateNode(newNode);
     };
 
     let nodeSettings = node.data?.settings;

diff --git a/assets/jsx/workflow-editor/components/node-types/generic.jsx b/assets/jsx/workflow-editor/components/node-types/generic.jsx
@@ -99,7 +99,7 @@ export const GenericNode = memo(({ id, data, isConnectable, selected, nodeTypeIc
         };
     }
 
-    const nodeLabel = nodeType.label || data.label || __('Node', 'post-expirator');
+    const nodeLabel = data.label || nodeType.label || __('Node', 'post-expirator');
     const nodeClassName = nodeType?.className || 'react-flow__node-genericNode';
 
     let targetHandles = null;

diff --git a/assets/jsx/workflow-editor/components/workflow-store/actions.jsx b/assets/jsx/workflow-editor/components/workflow-store/actions.jsx
@@ -57,27 +57,28 @@ function addWorkflowIdToUrl(workflowId) {
     window.history.pushState({}, '', `?page=future_workflow_editor&workflow=${parseInt(workflowId)}`);
 }
 
+// FIXME: This is not working as expected. The state we get from the store is not updated if the
+// inspector is open or was not closed after the changes.
 export function* saveAsDraft({ screenshot } = {}) {
     yield {type: 'SAVE_AS_DRAFT_START'};
 
     try {
         const wasNewWorkflow = yield select(STORE_NAME).isNewWorkflow();
+        const editedWorkflow = yield select(STORE_NAME).getWorkflow();
 
-        yield dispatch(STORE_NAME).setEditedWorkflowAttribute('status', 'draft');
-
-        const editedWorkflow = yield select(STORE_NAME).getEditedWorkflow();
-
-        if (screenshot) {
-            editedWorkflow.screenshot = screenshot;
-        }
+        const workflowToSave = {
+            ...editedWorkflow,
+            status: 'draft',
+            ...(screenshot ? { screenshot } : {})
+        };
 
         const newWorkflow = yield apiFetch({
             path: `${apiUrl}/workflows/${parseInt(editedWorkflow.id)}`,
             method: 'PUT',
             headers: {
                 'X-WP-Nonce': nonce,
             },
-            body: JSON.stringify(editedWorkflow),
+            body: JSON.stringify(workflowToSave),
         });
 
         // Add the workflow id to the url, keeping current state in the history
@@ -104,7 +105,7 @@ export function* saveAsDraft({ screenshot } = {}) {
 }
 
 export function* saveAsCurrentStatus({ screenshot } = {}) {
-    const editedWorkflow = yield select(STORE_NAME).getEditedWorkflow();
+    const editedWorkflow = yield select(STORE_NAME).getWorkflow();
 
     if (editedWorkflow.status === 'auto-draft') {
         yield saveAsDraft({ screenshot });
@@ -115,19 +116,20 @@ export function* saveAsCurrentStatus({ screenshot } = {}) {
 
     try {
         const wasNewWorkflow = yield select(STORE_NAME).isNewWorkflow();
-        const editedWorkflow = yield select(STORE_NAME).getEditedWorkflow();
+        const editedWorkflow = yield select(STORE_NAME).getWorkflow();
 
-        if (screenshot) {
-            editedWorkflow.screenshot = screenshot;
-        }
+        const workflowToSave = {
+            ...editedWorkflow,
+            ...(screenshot ? { screenshot } : {}),
+        };
 
         const newWorkflow = yield apiFetch({
             path: `${apiUrl}/workflows/${parseInt(editedWorkflow.id)}`,
             method: 'PUT',
             headers: {
                 'X-WP-Nonce': nonce,
             },
-            body: JSON.stringify(editedWorkflow),
+            body: JSON.stringify(workflowToSave),
         });
 
         // Add the workflow id to the url, keeping current state in the history
@@ -158,22 +160,21 @@ export function* publishWorkflow({ screenshot } = {}) {
 
     try {
         const wasNewWorkflow = yield select(STORE_NAME).isNewWorkflow();
+        const editedWorkflow = yield select(STORE_NAME).getWorkflow();
 
-        yield dispatch(STORE_NAME).setEditedWorkflowAttribute('status', 'publish');
-
-        const editedWorkflow = yield select(STORE_NAME).getEditedWorkflow();
-
-        if (screenshot) {
-            editedWorkflow.screenshot = screenshot;
-        }
+        const workflowToSave = {
+            ...editedWorkflow,
+            status: 'publish',
+            ...(screenshot ? { screenshot } : {}),
+        };
 
         const newWorkflow = yield apiFetch({
             path: `${apiUrl}/workflows/${parseInt(editedWorkflow.id)}`,
             method: 'PUT',
             headers: {
                 'X-WP-Nonce': nonce,
             },
-            body: JSON.stringify(editedWorkflow),
+            body: JSON.stringify(workflowToSave),
         });
 
         // Add the workflow id to the url, keeping current state in the history
@@ -204,22 +205,21 @@ export function* switchToDraft({ screenshot } = {}) {
 
     try {
         const wasNewWorkflow = yield select(STORE_NAME).isNewWorkflow();
+        const editedWorkflow = yield select(STORE_NAME).getWorkflow();
 
-        yield dispatch(STORE_NAME).setEditedWorkflowAttribute('status', 'draft');
-
-        const editedWorkflow = yield select(STORE_NAME).getEditedWorkflow();
-
-        if (screenshot) {
-            editedWorkflow.screenshot = screenshot;
-        }
+        const workflowToSave = {
+            ...editedWorkflow,
+            status: 'draft',
+            ...(screenshot ? { screenshot } : {}),
+        };
 
         const newWorkflow = yield apiFetch({
             path: `${apiUrl}/workflows/${parseInt(editedWorkflow.id)}`,
             method: 'PUT',
             headers: {
                 'X-WP-Nonce': nonce,
             },
-            body: JSON.stringify(editedWorkflow),
+            body: JSON.stringify(workflowToSave),
         });
 
         // Add the workflow id to the url, keeping current state in the history
@@ -314,7 +314,7 @@ export const setEditedWorkflowAttribute = (key, value) => {
 export function* deleteWorkflow () {
     yield {type: 'DELETE_WORKFLOW_START'};
 
-    const editedWorkflow = yield select(STORE_NAME).getEditedWorkflow();
+    const editedWorkflow = yield select(STORE_NAME).getWorkflow();
 
     try {
         const newWorkflow = yield apiFetch({