SF-03 flow and subflow editors (#30)

* Install easymde editor

* Remove console.log from tab-manager.tsx

* Create <FlowEditor /> for editing flows

* Edit flow or subflow on edit button click in <Workspace />

* Style <Editor />

* Change tooltip delay from 1 second to 800ms

* Add new focus element background color to themes

* Style node-editor RedUi with theme styles

* Control Node RED Monaco editor from app theme

* Move red-ui logic from node-editor.tsx to new red-ui-container.tsx

* Display editor title in header

* Create new <EnvironmentVariables /> that displays Node-RED editable-list and typed-input environment editor

* Refactor flow-editor.tsx to use new form and tabbed layout components

* Move state logging from flow-canvas to app.tsx

* Create new <Icon /> editor form component

* Create new <Color /> form editor component

* Create new <Category /> editor form component

* Create new <PortLabels /> editor form component

* Move creation of flows/subflows from tab-manager and flow-tree to flow.logic

* Adjust editor form <Description /> styles

* Handle label click in editor form <EnvironmentVariables />

* Implement subflow-editor.tsx with ability to edit subflows

* Add new Z_INDEX tab strategy to <TabbedEditor />

* Update <NodeEditor /> with new <TabbedEditor /> and editor form components

* Correctly style long workspace names in <Workspace />

* Adjust light theme background colors

* Write tests for icon.api

* Update builder.logic tests

* Write new tests for flow.logic

* Update flow.slice tests

* Update node-editor.logic tests

* Write tests for new selectCategories() selector in node.slice

.vscode/settings.json

@@ -1,6 +1,8 @@
 {
   "cSpell.words": [
     "curvyness",
+    "easymde",
+    "jsonata",
     "mopt",
     "oneditcancel",
     "oneditdelete",

package.json

@@ -16,12 +16,14 @@
     "@projectstorm/react-diagrams": "^7.0.4",
     "@reduxjs/toolkit": "^2.2.3",
     "dompurify": "^3.1.0",
+    "easymde": "^2.18.0",
     "i18next": "^23.11.2",
     "jquery-i18next": "^1.2.1",
     "jsonata": "^2.0.4",
     "marked": "^12.0.1",
     "monaco-editor": "=0.47.0",
     "react": "18.2.0",
+    "react-color": "^2.19.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
@@ -48,6 +50,7 @@
     "@testing-library/react": "14.0.0",
     "@types/node": "18.16.9",
     "@types/react": "18.2.33",
+    "@types/react-color": "^3.0.12",
     "@types/react-dom": "18.2.14",
     "@types/react-is": "18.2.2",
     "@types/styled-components": "5.1.26",

packages/flow-client/src/app/app.tsx

@@ -5,6 +5,7 @@ import { Header } from './components/header/header'; // Import the new Header co
 import { useAppSelector } from './redux/hooks';
 import { selectTheme } from './redux/modules/builder/builder.slice';
 import themes from './themes';
+import { Logger } from './logger';
 
 // StyledApp defines the main application container styles.
 // It ensures the flow canvas takes up the full viewport height for better visibility.
@@ -32,6 +33,7 @@ export function App() {
     return (
         <StyledApp>
             <GlobalTheme />
+            <Logger />
 
             <Header />
 

packages/flow-client/src/app/components/builder/tab-manager.tsx

@@ -1,22 +1,16 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
-import { v4 as uuidv4 } from 'uuid';
 
-import { useAppSelector } from '../../redux/hooks';
+import { useAppDispatch, useAppLogic, useAppSelector } from '../../redux/hooks';
 import {
     builderActions,
     selectActiveFlow,
-    selectNewFlowCounter,
     selectOpenFlows,
     selectTheme,
 } from '../../redux/modules/builder/builder.slice';
-import {
-    flowActions,
-    selectFlowEntities,
-} from '../../redux/modules/flow/flow.slice';
-import { FlowCanvas } from '../flow-canvas/flow-canvas';
+import { selectFlowEntities } from '../../redux/modules/flow/flow.slice';
 import { Theme } from '../../themes';
+import { FlowCanvas } from '../flow-canvas/flow-canvas';
 
 const StyledTabManager = styled.div<{ dropdownX: number; customTheme: Theme }>`
     flex-grow: 1;
@@ -181,11 +175,11 @@ const StyledTabManager = styled.div<{ dropdownX: number; customTheme: Theme }>`
 `;
 
 export const TabManager = () => {
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
+    const flowLogic = useAppLogic().flow;
     const flowEntities = useAppSelector(selectFlowEntities);
     const openFlows = useAppSelector(selectOpenFlows);
     const activeFlow = useAppSelector(selectActiveFlow);
-    const flowCounter = useAppSelector(selectNewFlowCounter);
     const theme = useAppSelector(selectTheme);
 
     const tabContentRef = useRef<HTMLDivElement>(null);
@@ -222,39 +216,14 @@ export const TabManager = () => {
     );
 
     const createNewFlow = useCallback(() => {
-        const flowId = uuidv4();
-        dispatch(
-            flowActions.addFlowEntity({
-                id: flowId,
-                type: 'flow',
-                name: `New Flow${flowCounter ? ` ${flowCounter}` : ''}`,
-                disabled: false,
-                info: '',
-                env: [],
-            })
-        );
-        dispatch(builderActions.addNewFlow(flowId));
-        dispatch(builderActions.setActiveFlow(flowId));
+        dispatch(flowLogic.createNewFlow());
         setShowDropdown(false); // Hide dropdown after selection
-    }, [dispatch, flowCounter]);
+    }, [dispatch, flowLogic]);
 
     const createNewSubflow = useCallback(() => {
-        const subflowId = uuidv4();
-        dispatch(
-            flowActions.addFlowEntity({
-                id: subflowId,
-                type: 'subflow',
-                name: `New Subflow${flowCounter ? ` ${flowCounter}` : ''}`,
-                category: 'subflows',
-                color: '#ddaa99',
-                info: '',
-                env: [],
-            })
-        );
-        dispatch(builderActions.addNewFlow(subflowId));
-        dispatch(builderActions.setActiveFlow(subflowId));
+        dispatch(flowLogic.createNewSubflow());
         setShowDropdown(false); // Hide dropdown after selection
-    }, [dispatch, flowCounter]);
+    }, [dispatch, flowLogic]);
 
     useEffect(() => {
         if (activeFlow) {

packages/flow-client/src/app/components/builder/tabbed-sidebar.tsx

@@ -112,7 +112,6 @@ export const TabbedSidebar = ({
 }: TabbedSidebarProps) => {
     // get all children that are SidebarTabs
     const [sidebarTabs, sidebarIds] = useMemo(() => {
-        console.log('Received children', children);
         const tabs = React.Children.toArray(children)
             .filter(isSidebarTab)
             .map(child => {