Improve displayed state when workflow is provisioned; make workspace readonly

Signed-off-by: Tyler Ohlsen <ohltyler@amazon.com>

Author: ohltyler

public/pages/workflow_detail/component_details/component_details.tsx

@@ -5,15 +5,18 @@
 
 import React from 'react';
 import { EuiPanel } from '@elastic/eui';
-import { ReactFlowComponent } from '../../../../common';
+import { ReactFlowComponent, Workflow } from '../../../../common';
 import { ComponentInputs } from './component_inputs';
 import { EmptyComponentInputs } from './empty_component_inputs';
+import { ProvisionedComponentInputs } from './provisioned_component_inputs';
 
 // styling
 import '../workspace/workspace-styles.scss';
 
 interface ComponentDetailsProps {
+  workflow: Workflow | undefined;
   onFormChange: () => void;
+  isDeprovisionable: boolean;
   selectedComponent?: ReactFlowComponent;
 }
 
@@ -25,14 +28,16 @@ interface ComponentDetailsProps {
 export function ComponentDetails(props: ComponentDetailsProps) {
   return (
     <EuiPanel paddingSize="m">
-      {props.selectedComponent ? (
+      {props.isDeprovisionable ? (
+        <ProvisionedComponentInputs />
+      ) : props.selectedComponent ? (
         <ComponentInputs
           selectedComponent={props.selectedComponent}
           onFormChange={props.onFormChange}
         />
-      ) : (
+      ) : props.workflow ? (
         <EmptyComponentInputs />
-      )}
+      ) : undefined}
     </EuiPanel>
   );
 }

public/pages/workflow_detail/component_details/empty_component_inputs.tsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
 
+// Simple prompt to display when no components are selected.
 export function EmptyComponentInputs() {
   return (
     <EuiEmptyPrompt

public/pages/workflow_detail/component_details/provisioned_component_inputs.tsx

@@ -0,0 +1,23 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
+
+// Simple prompt to display when the workflow is provisioned.
+export function ProvisionedComponentInputs() {
+  return (
+    <EuiEmptyPrompt
+      iconType="bell"
+      title={<h2>The workflow has been provisioned</h2>}
+      titleSize="s"
+      body={
+        <>
+          <EuiText>Please deprovision first to continue editing.</EuiText>
+        </>
+      }
+    />
+  );
+}

public/pages/workflow_detail/workspace/resizable_workspace.tsx

@@ -34,6 +34,7 @@ import {
   DEFAULT_NEW_WORKFLOW_DESCRIPTION,
   USE_CASE,
   WORKFLOW_STATE,
+  processNodes,
   reduceToTemplate,
 } from '../../../../common';
 import {
@@ -104,16 +105,20 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   >();
 
   // Save/provision/deprovision button state
-  const isSaveable = isFirstSave ? true : isDirty;
+  const isSaveable =
+    props.workflow !== undefined && (isFirstSave ? true : isDirty);
   const isProvisionable =
+    props.workflow !== undefined &&
     !isDirty &&
     !props.isNewWorkflow &&
     formValidOnSubmit &&
     flowValidOnSubmit &&
     props.workflow?.state === WORKFLOW_STATE.NOT_STARTED;
   const isDeprovisionable =
+    props.workflow !== undefined &&
     !props.isNewWorkflow &&
     props.workflow?.state !== WORKFLOW_STATE.NOT_STARTED;
+  const readonly = props.workflow === undefined || isDeprovisionable;
 
   // Loading state
   const [isProvisioning, setIsProvisioning] = useState<boolean>(false);
@@ -377,7 +382,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
               </EuiButton>,
               <EuiButton
                 fill={false}
-                disabled={!isSaveable || isLoadingGlobal}
+                disabled={!isSaveable || isLoadingGlobal || isDeprovisionable}
                 isLoading={isSaving}
                 // TODO: if props.isNewWorkflow is true, clear the workflow cache if saving is successful.
                 onClick={() => {
@@ -458,6 +463,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                         <Workspace
                           id="ingest"
                           workflow={workflow}
+                          readonly={readonly}
                           onNodesChange={onNodesChange}
                           onSelectionChange={onSelectionChange}
                         />
@@ -481,7 +487,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                     >
                       <EuiFlexItem>
                         <ComponentDetails
+                          workflow={props.workflow}
                           selectedComponent={selectedComponent}
+                          isDeprovisionable={isDeprovisionable}
                           onFormChange={onFormChange}
                         />
                       </EuiFlexItem>

public/pages/workflow_detail/workspace/workspace.tsx

@@ -38,6 +38,7 @@ import './workspace_edge/deletable-edge-styles.scss';
 
 interface WorkspaceProps {
   workflow?: Workflow;
+  readonly: boolean;
   onNodesChange: (nodes: ReactFlowComponent[]) => void;
   id: string;
   // TODO: make more typesafe
@@ -134,6 +135,14 @@ export function Workspace(props: WorkspaceProps) {
               onConnect={onConnect}
               className="reactflow-workspace"
               fitView
+              edgesUpdatable={!props.readonly}
+              edgesFocusable={!props.readonly}
+              nodesDraggable={!props.readonly}
+              nodesConnectable={!props.readonly}
+              nodesFocusable={!props.readonly}
+              draggable={!props.readonly}
+              panOnDrag={!props.readonly}
+              elementsSelectable={!props.readonly}
             >
               <Controls
                 showFitView={false}