[Backport 2.x] Support create / provision / deprovision from editor page

common/constants.ts

@@ -3,6 +3,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { WORKFLOW_STATE } from './interfaces';
+
 export const PLUGIN_ID = 'flow-framework';
 
 /**
@@ -35,6 +37,8 @@ export const GET_WORKFLOW_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}`;
 export const SEARCH_WORKFLOWS_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}/search`;
 export const GET_WORKFLOW_STATE_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}/state`;
 export const CREATE_WORKFLOW_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}/create`;
+export const PROVISION_WORKFLOW_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}/provision`;
+export const DEPROVISION_WORKFLOW_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}/deprovision`;
 export const DELETE_WORKFLOW_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}/delete`;
 export const GET_PRESET_WORKFLOWS_NODE_API_PATH = `${BASE_WORKFLOW_NODE_API_PATH}/presets`;
 
@@ -49,5 +53,13 @@ export const NEW_WORKFLOW_ID_URL = 'new';
 export const START_FROM_SCRATCH_WORKFLOW_NAME = 'Start From Scratch';
 export const DEFAULT_NEW_WORKFLOW_NAME = 'new_workflow';
 export const DEFAULT_NEW_WORKFLOW_DESCRIPTION = 'My new workflow';
+export const DEFAULT_NEW_WORKFLOW_STATE = WORKFLOW_STATE.NOT_STARTED;
+export const DEFAULT_NEW_WORKFLOW_STATE_TYPE = ('NOT_STARTED' as any) as typeof WORKFLOW_STATE;
 export const DATE_FORMAT_PATTERN = 'MM/DD/YY hh:mm A';
 export const EMPTY_FIELD_STRING = '--';
+export const FETCH_ALL_QUERY_BODY = {
+  query: {
+    match_all: {},
+  },
+  size: 1000,
+};

public/pages/workflow_detail/component_details/component_details.tsx

@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui';
+import { EuiPanel } from '@elastic/eui';
 import { ReactFlowComponent } from '../../../../common';
 import { ComponentInputs } from './component_inputs';
 import { EmptyComponentInputs } from './empty_component_inputs';
@@ -24,23 +24,15 @@ interface ComponentDetailsProps {
  */
 export function ComponentDetails(props: ComponentDetailsProps) {
   return (
-    <EuiFlexGroup
-      direction="column"
-      gutterSize="none"
-      className="workspace-panel"
-    >
-      <EuiFlexItem>
-        <EuiPanel paddingSize="m">
-          {props.selectedComponent ? (
-            <ComponentInputs
-              selectedComponent={props.selectedComponent}
-              onFormChange={props.onFormChange}
-            />
-          ) : (
-            <EmptyComponentInputs />
-          )}
-        </EuiPanel>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiPanel paddingSize="m">
+      {props.selectedComponent ? (
+        <ComponentInputs
+          selectedComponent={props.selectedComponent}
+          onFormChange={props.onFormChange}
+        />
+      ) : (
+        <EmptyComponentInputs />
+      )}
+    </EuiPanel>
   );
 }

public/pages/workflow_detail/components/header.tsx

@@ -4,8 +4,19 @@
  */
 
 import React from 'react';
-import { EuiPageHeader, EuiButton, EuiLoadingSpinner } from '@elastic/eui';
-import { DEFAULT_NEW_WORKFLOW_NAME, Workflow } from '../../../../common';
+import {
+  EuiPageHeader,
+  EuiButton,
+  EuiLoadingSpinner,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+} from '@elastic/eui';
+import {
+  DEFAULT_NEW_WORKFLOW_NAME,
+  DEFAULT_NEW_WORKFLOW_STATE,
+  Workflow,
+} from '../../../../common';
 
 interface WorkflowDetailHeaderProps {
   tabs: any[];
@@ -14,20 +25,42 @@ interface WorkflowDetailHeaderProps {
 }
 
 export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
+  function getTitle() {
+    return props.workflow ? (
+      props.workflow.name
+    ) : props.isNewWorkflow && !props.workflow ? (
+      DEFAULT_NEW_WORKFLOW_NAME
+    ) : (
+      <EuiLoadingSpinner size="xl" />
+    );
+  }
+
+  function getState() {
+    return props.workflow?.state
+      ? props.workflow.state
+      : props.isNewWorkflow
+      ? DEFAULT_NEW_WORKFLOW_STATE
+      : null;
+  }
+
   return (
     <EuiPageHeader
       pageTitle={
-        props.workflow ? (
-          props.workflow.name
-        ) : props.isNewWorkflow && !props.workflow ? (
-          DEFAULT_NEW_WORKFLOW_NAME
-        ) : (
-          <EuiLoadingSpinner size="xl" />
-        )
+        <EuiFlexGroup direction="row" alignItems="flexEnd" gutterSize="m">
+          <EuiFlexItem grow={false}>{getTitle()}</EuiFlexItem>
+          <EuiFlexItem grow={false} style={{ marginBottom: '10px' }}>
+            <EuiText size="m">{getState()}</EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
       }
       rightSideItems={[
         // TODO: finalize if this is needed
-        <EuiButton fill={false} color="danger" onClick={() => {}}>
+        <EuiButton
+          fill={false}
+          color="danger"
+          style={{ marginTop: '8px' }}
+          onClick={() => {}}
+        >
           Delete
         </EuiButton>,
       ]}

public/pages/workflow_detail/workflow-detail-styles.scss

@@ -0,0 +1,3 @@
+.workflow-detail {
+  overflow: hidden;
+}

public/pages/workflow_detail/workflow_detail.tsx

@@ -5,22 +5,31 @@
 
 import React, { useEffect, useState } from 'react';
 import { RouteComponentProps, useLocation } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { ReactFlowProvider } from 'reactflow';
 import queryString from 'query-string';
 import { EuiPage, EuiPageBody } from '@elastic/eui';
 import { BREADCRUMBS } from '../../utils';
 import { getCore } from '../../services';
 import { WorkflowDetailHeader } from './components';
-import { AppState, searchModels, searchWorkflows } from '../../store';
+import {
+  AppState,
+  searchModels,
+  searchWorkflows,
+  useAppDispatch,
+} from '../../store';
 import { ResizableWorkspace } from './workspace';
 import { Launches } from './launches';
 import { Prototype } from './prototype';
 import {
   DEFAULT_NEW_WORKFLOW_NAME,
+  FETCH_ALL_QUERY_BODY,
   NEW_WORKFLOW_ID_URL,
 } from '../../../common';
 
+// styling
+import './workflow-detail-styles.scss';
+
 export interface WorkflowDetailRouterProps {
   workflowId: string;
 }
@@ -53,7 +62,7 @@ function replaceActiveTab(activeTab: string, props: WorkflowDetailProps) {
  */
 
 export function WorkflowDetail(props: WorkflowDetailProps) {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { workflows, cachedWorkflow } = useSelector(
     (state: AppState) => state.workflows
   );
@@ -101,9 +110,9 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   useEffect(() => {
     if (!isNewWorkflow) {
       // TODO: can optimize to only fetch a single workflow
-      dispatch(searchWorkflows({ query: { match_all: {} } }));
+      dispatch(searchWorkflows(FETCH_ALL_QUERY_BODY));
     }
-    dispatch(searchModels({ query: { match_all: {} } }));
+    dispatch(searchModels(FETCH_ALL_QUERY_BODY));
   }, []);
 
   const tabs = [
@@ -139,7 +148,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
   return (
     <ReactFlowProvider>
       <EuiPage>
-        <EuiPageBody style={{ overflow: 'hidden' }}>
+        <EuiPageBody className="workflow-detail">
           <WorkflowDetailHeader
             workflow={workflow}
             isNewWorkflow={isNewWorkflow}