Persist node selection state and set default select styles

Signed-off-by: Tyler Ohlsen <[email protected]>

public/component_types/interfaces.ts

@@ -95,4 +95,5 @@ export interface IComponent {
  */
 export interface IComponentData extends IComponent {
   id: string;
+  selected?: boolean;
 }

public/pages/workflow_detail/component_details/component_details.tsx

@@ -3,20 +3,17 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useContext } from 'react';
-import { useOnSelectionChange } from 'reactflow';
+import React from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
 import { ReactFlowComponent } from '../../../../common';
-import { rfContext } from '../../../store';
 import { ComponentInputs } from './component_inputs';
 import { EmptyComponentInputs } from './empty_component_inputs';
 
 // styling
 import '../workspace/workspace-styles.scss';
 
 interface ComponentDetailsProps {
-  onToggleChange: () => void;
-  isOpen: boolean;
+  selectedComponent?: ReactFlowComponent;
 }
 
 /**
@@ -25,33 +22,6 @@ interface ComponentDetailsProps {
  * in the flow workspace.
  */
 export function ComponentDetails(props: ComponentDetailsProps) {
-  // TODO: use this instance to update the internal node state. ex: update field data in the selected node based
-  // on user input
-  const { reactFlowInstance } = useContext(rfContext);
-
-  const [selectedComponent, setSelectedComponent] = useState<
-    ReactFlowComponent
-  >();
-
-  /**
-   * Hook provided by reactflow to listen on when nodes are selected / de-selected.
-   * - populate panel content appropriately
-   * - open the panel if a node is selected and the panel is closed
-   * - it is assumed that only one node can be selected at once
-   */
-  useOnSelectionChange({
-    onChange: ({ nodes, edges }) => {
-      if (nodes && nodes.length > 0) {
-        setSelectedComponent(nodes[0]);
-        if (!props.isOpen) {
-          props.onToggleChange();
-        }
-      } else {
-        setSelectedComponent(undefined);
-      }
-    },
-  });
-
   return (
     <EuiFlexGroup
       direction="column"
@@ -60,8 +30,8 @@ export function ComponentDetails(props: ComponentDetailsProps) {
     >
       <EuiFlexItem className="resizable-panel-border">
         <EuiPanel paddingSize="m">
-          {selectedComponent ? (
-            <ComponentInputs selectedComponent={selectedComponent} />
+          {props.selectedComponent ? (
+            <ComponentInputs selectedComponent={props.selectedComponent} />
           ) : (
             <EmptyComponentInputs />
           )}

public/pages/workflow_detail/workflow_detail.tsx

@@ -6,6 +6,7 @@
 import React, { useEffect } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import { ReactFlowProvider } from 'reactflow';
 import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
@@ -42,11 +43,13 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   });
 
   return (
-    <EuiPage>
-      <EuiPageBody>
-        <WorkflowDetailHeader workflow={workflow} />
-        <ResizableWorkspace workflow={workflow} />
-      </EuiPageBody>
-    </EuiPage>
+    <ReactFlowProvider>
+      <EuiPage>
+        <EuiPageBody>
+          <WorkflowDetailHeader workflow={workflow} />
+          <ResizableWorkspace workflow={workflow} />
+        </EuiPageBody>
+      </EuiPage>
+    </ReactFlowProvider>
   );
 }

public/pages/workflow_detail/workspace/reactflow-styles.scss

@@ -21,6 +21,16 @@ $handle-color-invalid: $euiColorDanger;
   width: 300px;
 }
 
+// Overriding the styling for the reactflow node when it is selected.
+// We need to use important tag to override ReactFlow's wrapNode that sets the box-shadow.
+// Ref: https://github.com/wbkd/react-flow/blob/main/packages/core/src/components/Nodes/wrapNode.tsx#L187
+.reactflow-workspace .react-flow__node-customComponent.selected {
+  box-shadow: 0 0 2px 2px rgba('0, 0, 0', 0.5);
+  &:focus {
+    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.5) !important;
+  }
+}
+
 .reactflow-workspace .react-flow__handle {
   height: 10px;
   width: 10px;

public/pages/workflow_detail/workspace/resizable_workspace.tsx

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useRef, useState, useEffect } from 'react';
-import { ReactFlowProvider } from 'reactflow';
+import React, { useRef, useState, useEffect, useContext } from 'react';
+import { useOnSelectionChange } from 'reactflow';
 import { Form, Formik } from 'formik';
 import * as yup from 'yup';
 import { EuiButton, EuiResizableContainer } from '@elastic/eui';
@@ -17,6 +17,7 @@ import {
   componentDataToFormik,
   getComponentSchema,
 } from '../../../../common';
+import { rfContext } from '../../../store';
 import { Workspace } from './workspace';
 import { ComponentDetails } from '../component_details';
 
@@ -41,6 +42,43 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     setIsOpen(!isOpen);
   };
 
+  // Selected component state
+  const { reactFlowInstance } = useContext(rfContext);
+  const [selectedComponent, setSelectedComponent] = useState<
+    ReactFlowComponent
+  >();
+
+  /**
+   * Hook provided by reactflow to listen on when nodes are selected / de-selected.
+   * - populate panel content appropriately
+   * - open the panel if a node is selected and the panel is closed
+   * - it is assumed that only one node can be selected at once
+   */
+  useOnSelectionChange({
+    onChange: ({ nodes, edges }) => {
+      if (nodes && nodes.length > 0) {
+        setSelectedComponent(nodes[0]);
+        if (!isOpen) {
+          onToggleChange();
+        }
+      } else {
+        setSelectedComponent(undefined);
+      }
+    },
+  });
+
+  useEffect(() => {
+    reactFlowInstance?.setNodes((nodes: ReactFlowComponent[]) =>
+      nodes.map((node) => {
+        node.data = {
+          ...node.data,
+          selected: node.id === selectedComponent?.id ? true : false,
+        };
+        return node;
+      })
+    );
+  }, [selectedComponent]);
+
   // Formik form state
   const [formValues, setFormValues] = useState<WorkspaceFormValues>({});
   const [formSchema, setFormSchema] = useState<WorkspaceSchema>(yup.object({}));
@@ -110,7 +148,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
               }
 
               return (
-                <ReactFlowProvider>
+                <>
                   <EuiResizablePanel mode="main" initialSize={75} minSize="50%">
                     <Workspace
                       workflow={props.workflow}
@@ -125,12 +163,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                     minSize="10%"
                     onToggleCollapsedInternal={() => onToggleChange()}
                   >
-                    <ComponentDetails
-                      onToggleChange={onToggleChange}
-                      isOpen={isOpen}
-                    />
+                    <ComponentDetails selectedComponent={selectedComponent} />
                   </EuiResizablePanel>
-                </ReactFlowProvider>
+                </>
               );
             }}
           </EuiResizableContainer>

public/pages/workflow_detail/workspace_edge/deletable_edge.tsx

@@ -35,6 +35,8 @@ export function DeletableEdge(props: DeletableEdgeProps) {
   const { deleteEdge } = useContext(rfContext);
 
   const onEdgeClick = (event: any, edgeId: string) => {
+    // Prevent this event from bubbling up and putting reactflow into an unexpected state.
+    // This implementation follows the doc example: https://reactflow.dev/docs/examples/edges/custom-edge/
     event.stopPropagation();
     deleteEdge(edgeId);
   };