Minor form updates (#212)

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · Jul 11, 2024 · 5cb03ed · 5cb03ed
1 parent 9f7e6eb
commit 5cb03ed
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 19 deletions.
diff --git a/public/component_types/other/query/index.ts b/public/component_types/other/query/index.ts
@@ -3,5 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export * from './query';
 export * from './match_query';
 export * from './neural_query';
diff --git a/public/component_types/other/query/query.tsx b/public/component_types/other/query/query.tsx
@@ -7,10 +7,10 @@ import { COMPONENT_CLASS } from '../../../../common';
 import { BaseComponent } from '../../base_component';
 
 /**
- * A basic Query placeholder UI component.
+ * A basic query placeholder UI component.
  * Does not have any functionality.
  */
-export abstract class Query extends BaseComponent {
+export class Query extends BaseComponent {
   constructor() {
     super();
     this.type = COMPONENT_CLASS.QUERY;

diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -52,8 +52,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   const dispatch = useAppDispatch();
 
   // Overall workspace state
-  const { isDirty } = useSelector((state: AppState) => state.workspace);
-  const { loading } = useSelector((state: AppState) => state.workflows);
+  const { isDirty } = useSelector((state: AppState) => state.form);
 
   // Workflow state
   const [workflow, setWorkflow] = useState<Workflow | undefined>(

diff --git a/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx b/public/pages/workflow_detail/workflow_inputs/ingest_inputs/source_data.tsx
@@ -65,7 +65,9 @@ export function SourceData(props: SourceDataProps) {
         <JsonField
           label="Upload JSON documents"
           fieldPath={'ingest.docs'}
-          onFormChange={props.onFormChange}
+          // when ingest doc values change, don't update the form
+          // since we initially only support running ingest once per configuration
+          onFormChange={() => {}}
           editorHeight="25vh"
         />
       </EuiFlexItem>

diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -10,6 +10,7 @@ import { isEmpty } from 'lodash';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiHorizontalRule,
@@ -94,7 +95,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
   const dispatch = useAppDispatch();
 
   // Overall workspace state
-  const { isDirty } = useSelector((state: AppState) => state.workspace);
+  const { isDirty } = useSelector((state: AppState) => state.form);
 
   // selected step state
   const [selectedStep, setSelectedStep] = useState<STEP>(STEP.INGEST);
@@ -345,6 +346,15 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                 </EuiModalFooter>
               </EuiModal>
             )}
+            {onIngest &&
+              isDirty &&
+              hasProvisionedSearchResources(props.workflow) && (
+                <EuiCallOut
+                  title="Making changes to ingest may affect your configured search flow"
+                  iconType={'alert'}
+                  color="warning"
+                />
+              )}
             {onIngestAndUnprovisioned && (
               <>
                 <EuiSpacer size="m" />
@@ -452,7 +462,10 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                     <EuiFlexItem grow={false}>
                       <EuiButton
                         fill={true}
-                        onClick={() => setSelectedStep(STEP.SEARCH)}
+                        onClick={() => {
+                          setSelectedStep(STEP.SEARCH);
+                          dispatch(removeDirty());
+                        }}
                       >
                         {`Search pipeline >`}
                       </EuiButton>
@@ -473,7 +486,9 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                       <EuiFlexItem grow={false}>
                         <EuiButton
                           fill={true}
-                          onClick={() => setSelectedStep(STEP.SEARCH)}
+                          onClick={() => {
+                            setSelectedStep(STEP.SEARCH);
+                          }}
                           disabled={!ingestProvisioned || isDirty}
                         >
                           {`Search pipeline >`}
@@ -484,6 +499,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
                     <>
                       <EuiFlexItem grow={false}>
                         <EuiButtonEmpty
+                          disabled={isDirty}
                           onClick={() => setSelectedStep(STEP.INGEST)}
                         >
                           Back

diff --git a/public/store/reducers/workspace_reducer.ts → public/store/reducers/form_reducer.ts b/public/store/reducers/workspace_reducer.ts → public/store/reducers/form_reducer.ts
@@ -9,8 +9,8 @@ const initialState = {
   isDirty: false,
 };
 
-const workspaceSlice = createSlice({
-  name: 'workspace',
+const formSlice = createSlice({
+  name: 'form',
   initialState,
   reducers: {
     setDirty(state) {
@@ -22,5 +22,5 @@ const workspaceSlice = createSlice({
   },
 });
 
-export const workspaceReducer = workspaceSlice.reducer;
-export const { setDirty, removeDirty } = workspaceSlice.actions;
+export const formReducer = formSlice.reducer;
+export const { setDirty, removeDirty } = formSlice.actions;
diff --git a/public/store/reducers/index.ts b/public/store/reducers/index.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export * from './workspace_reducer';
+export * from './form_reducer';
 export * from './opensearch_reducer';
 export * from './workflows_reducer';
 export * from './presets_reducer';

diff --git a/public/store/store.ts b/public/store/store.ts
@@ -7,15 +7,15 @@ import { ThunkDispatch, configureStore } from '@reduxjs/toolkit';
 import { AnyAction, combineReducers } from 'redux';
 import { useDispatch } from 'react-redux';
 import {
-  workspaceReducer,
   opensearchReducer,
   workflowsReducer,
   presetsReducer,
   modelsReducer,
+  formReducer,
 } from './reducers';
 
 const rootReducer = combineReducers({
-  workspace: workspaceReducer,
+  form: formReducer,
   workflows: workflowsReducer,
   presets: presetsReducer,
   models: modelsReducer,

diff --git a/public/utils/config_to_workspace_utils.ts b/public/utils/config_to_workspace_utils.ts
@@ -24,7 +24,7 @@ import {
   Document,
   KnnIndexer,
   MLTransformer,
-  NeuralQuery,
+  Query,
   Results,
 } from '../component_types';
 import { generateId } from './utils';
@@ -187,7 +187,7 @@ function searchConfigToWorkspaceFlow(
   // Parent search node
   const parentNode = {
     id: generateId(COMPONENT_CATEGORY.SEARCH),
-    position: { x: 400, y: 1000 },
+    position: { x: 400, y: 800 },
     type: NODE_CATEGORY.SEARCH_GROUP,
     data: { label: COMPONENT_CATEGORY.SEARCH },
     style: {
@@ -214,11 +214,11 @@ function searchConfigToWorkspaceFlow(
   );
 
   // By default, always include a query node, an index node, and a results node.
-  const queryNodeId = generateId(COMPONENT_CLASS.NEURAL_QUERY);
+  const queryNodeId = generateId(COMPONENT_CLASS.QUERY);
   const queryNode = {
     id: queryNodeId,
     position: { x: 100, y: 70 },
-    data: initComponentData(new NeuralQuery().toObj(), queryNodeId),
+    data: initComponentData(new Query().toObj(), queryNodeId),
     type: NODE_CATEGORY.CUSTOM,
     parentNode: parentNode.id,
     extent: 'parent',