Update Workflow List page based on latest mocks (#196)

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

common/constants.ts

@@ -123,6 +123,13 @@ export const NEURAL_SPARSE_TOKENIZER_TRANSFORMER = {
  * Various constants pertaining to Workflow configs
  */
 
+// frontend-specific workflow types, derived from the available preset templates
+export enum WORKFLOW_TYPE {
+  SEMANTIC_SEARCH = 'Semantic search',
+  CUSTOM = 'Custom',
+  UNKNOWN = 'Unknown',
+}
+
 export enum PROCESSOR_TYPE {
   ML = 'ml_processor',
 }

common/interfaces.ts

@@ -6,7 +6,7 @@
 import { Node, Edge } from 'reactflow';
 import { FormikValues } from 'formik';
 import { ObjectSchema } from 'yup';
-import { COMPONENT_CLASS, PROCESSOR_TYPE } from './constants';
+import { COMPONENT_CLASS, PROCESSOR_TYPE, WORKFLOW_TYPE } from './constants';
 
 export type Index = {
   name: string;
@@ -163,6 +163,7 @@ type ReactFlowViewport = {
 
 export type UIState = {
   config: WorkflowConfig;
+  type: WORKFLOW_TYPE;
   workspace_flow?: WorkspaceFlowState;
 };
 
@@ -298,11 +299,11 @@ export type TemplateFlows = {
 export type WorkflowTemplate = {
   name: string;
   description: string;
-  use_case: USE_CASE;
   // TODO: finalize on version type when that is implemented
   // https://github.com/opensearch-project/flow-framework/issues/526
   version: any;
   workflows: TemplateFlows;
+  use_case?: USE_CASE;
   // UI state and any ReactFlow state may not exist if a workflow is created via API/backend-only.
   ui_metadata?: UIState;
 };

public/general_components/delete_workflow_modal.tsx

@@ -6,6 +6,7 @@
 import React from 'react';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -33,11 +34,15 @@ export function DeleteWorkflowModal(props: DeleteWorkflowModalProps) {
         </EuiModalHeaderTitle>
       </EuiModalHeader>
       <EuiModalBody>
-        <EuiText>The workflow will be permanently deleted.</EuiText>
+        <EuiText>
+          The workflow will be permanently deleted. This action cannot be
+          undone. Resources created by this workflow will be retained.
+        </EuiText>
       </EuiModalBody>
       <EuiModalFooter>
+        <EuiButtonEmpty onClick={props.onClose}> Cancel</EuiButtonEmpty>
         <EuiButton onClick={props.onConfirm} fill={true} color="danger">
-          Confirm
+          Delete
         </EuiButton>
       </EuiModalFooter>
     </EuiModal>

public/general_components/general-component-styles.scss

@@ -1,5 +1,5 @@
 .multi-select-filter {
   &--width {
-    width: 150px;
+    width: 200px;
   }
 }

public/general_components/index.ts

@@ -6,3 +6,4 @@
 export { MultiSelectFilter } from './multi_select_filter';
 export { DeleteWorkflowModal } from './delete_workflow_modal';
 export { ProcessorsTitle } from './processors_title';
+export { ResourceList } from './resource_list';

public/pages/workflow_detail/tools/resources/resource_list.tsx → public/general_components/resource_list.tsx

@@ -10,8 +10,8 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
 } from '@elastic/eui';
-import { Workflow, WorkflowResource } from '../../../../../common';
-import { columns } from './columns';
+import { Workflow, WorkflowResource } from '../../common';
+import { columns } from '../pages/workflow_detail/tools/resources/columns';
 
 interface ResourceListProps {
   workflow?: Workflow;

public/pages/workflow_detail/tools/resources/resources.tsx

@@ -11,7 +11,7 @@ import {
   EuiText,
 } from '@elastic/eui';
 import { Workflow } from '../../../../../common';
-import { ResourceList } from './resource_list';
+import { ResourceList } from '../../../../general_components';
 
 interface ResourcesProps {
   workflow?: Workflow;

public/pages/workflows/new_workflow/utils.ts

@@ -18,6 +18,7 @@ import {
   ReactFlowEdge,
   WorkspaceFlowState,
   IProcessorConfig,
+  WORKFLOW_TYPE,
 } from '../../../../common';
 import { generateId, initComponentData } from '../../../utils';
 import { MarkerType } from 'reactflow';
@@ -33,21 +34,12 @@ export function enrichPresetWorkflowWithUiMetadata(
   presetWorkflow: Partial<WorkflowTemplate>
 ): WorkflowTemplate {
   let uiMetadata = {} as UIState;
-  // TODO: for now we are defaulting to empty for all presets. As the form values become finalized,
-  // provide preset values for the different preset use cases.
-  switch (presetWorkflow.use_case) {
-    case USE_CASE.SEMANTIC_SEARCH: {
+  switch (presetWorkflow.ui_metadata?.type || WORKFLOW_TYPE.CUSTOM) {
+    case WORKFLOW_TYPE.SEMANTIC_SEARCH: {
       uiMetadata = fetchSemanticSearchMetadata();
       break;
     }
-    case USE_CASE.NEURAL_SPARSE_SEARCH: {
-      uiMetadata = fetchEmptyMetadata();
-      break;
-    }
-    case USE_CASE.HYBRID_SEARCH: {
-      uiMetadata = fetchEmptyMetadata();
-      break;
-    }
+    // TODO: add more presets
     default: {
       uiMetadata = fetchEmptyMetadata();
       break;
@@ -65,6 +57,7 @@ export function enrichPresetWorkflowWithUiMetadata(
 
 function fetchEmptyMetadata(): UIState {
   return {
+    type: WORKFLOW_TYPE.CUSTOM,
     config: {
       ingest: {
         enabled: true,
@@ -111,6 +104,7 @@ function fetchSemanticSearchMetadata(): UIState {
   // We can reuse the base state. Only need to override a few things,
   // such as preset ingest processors.
   let baseState = fetchEmptyMetadata();
+  baseState.type = WORKFLOW_TYPE.SEMANTIC_SEARCH;
   baseState.config.ingest.enrich.processors = [new MLIngestProcessor().toObj()];
   return baseState;
 }