More refactoring

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

public/component_types/base_interfaces.ts

@@ -61,6 +61,7 @@ export interface IComponent {
   type: BaseClass;
   label: string;
   description: string;
+  // will be used for grouping together in the drag-and-drop component library
   category: COMPONENT_CATEGORY;
   // determines if this component allows for new creation. this means to
   // allow a "create" option on the UI component, as well as potentially

public/pages/workflow_builder/components/index.ts

@@ -3,6 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { TextField } from './text_field';
-export { JsonField } from './json_field';
-export { SelectField } from './select_field';
+export * from './input_fields';
+export { NewOrExistingTabs } from './new_or_existing_tabs';
+export { InputFieldList } from './input_field_list';

public/pages/workflow_builder/components/input_field_list.tsx

@@ -0,0 +1,62 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { IComponentField } from '../../../component_types';
+import { TextField, JsonField, SelectField } from './input_fields';
+
+/**
+ * A helper component to format all of the input fields for a component. Dynamically
+ * render based on the input type.
+ */
+
+interface InputFieldListProps {
+  inputFields?: IComponentField[];
+}
+
+export function InputFieldList(props: InputFieldListProps) {
+  return (
+    <EuiFlexItem>
+      {props.inputFields?.map((field, idx) => {
+        let el;
+        switch (field.type) {
+          case 'string': {
+            el = (
+              <EuiFlexItem key={idx}>
+                <TextField
+                  label={field.label}
+                  placeholder={field.placeholder || ''}
+                />
+                <EuiSpacer size="s" />
+              </EuiFlexItem>
+            );
+            break;
+          }
+          case 'json': {
+            el = (
+              <EuiFlexItem key={idx}>
+                <JsonField
+                  label={field.label}
+                  placeholder={field.placeholder || ''}
+                />
+              </EuiFlexItem>
+            );
+            break;
+          }
+          case 'select': {
+            el = (
+              <EuiFlexItem key={idx}>
+                <SelectField />
+              </EuiFlexItem>
+            );
+            break;
+          }
+        }
+        return el;
+      })}
+    </EuiFlexItem>
+  );
+}

public/pages/workflow_builder/components/input_fields/index.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { TextField } from './text_field';
+export { JsonField } from './json_field';
+export { SelectField } from './select_field';

public/pages/workflow_builder/components/json_field.tsx → public/pages/workflow_builder/components/input_fields/json_field.tsx

@@ -12,7 +12,7 @@ interface JsonFieldProps {
 }
 
 /**
- * An input field for a component where users select manually enter
+ * An input field for a component where users manually enter
  * in some custom JSON
  */
 export function JsonField(props: JsonFieldProps) {

public/pages/workflow_builder/components/new_or_existing_tabs.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { EuiTab, EuiTabs } from '@elastic/eui';
+
+/**
+ * A helper component containing the togglable 'New' vs. 'Existing' tabs.
+ */
+
+interface NewOrExistingTabsProps {
+  selectedTabId: string;
+  setSelectedTabId(tabId: string): void;
+}
+
+const inputTabs = [
+  {
+    id: 'existing',
+    name: 'Existing',
+    disabled: false,
+  },
+  {
+    id: 'new',
+    name: 'New',
+    disabled: false,
+  },
+];
+
+export function NewOrExistingTabs(props: NewOrExistingTabsProps) {
+  return (
+    <EuiTabs size="s" expand={true}>
+      {inputTabs.map((tab, idx) => {
+        return (
+          <EuiTab
+            onClick={() => props.setSelectedTabId(tab.id)}
+            isSelected={tab.id === props.selectedTabId}
+            disabled={tab.disabled}
+            key={idx}
+          >
+            {tab.name}
+          </EuiTab>
+        );
+      })}
+    </EuiTabs>
+  );
+}

public/pages/workflow_builder/workflow_component.tsx

@@ -10,29 +10,14 @@ import {
   EuiText,
   EuiSpacer,
   EuiCard,
-  EuiTab,
-  EuiTabs,
 } from '@elastic/eui';
 import { IComponent } from '../../component_types';
-import { JsonField, SelectField, TextField } from './components';
+import { InputFieldList, NewOrExistingTabs } from './components';
 
 interface WorkflowComponentProps {
   component: IComponent;
 }
 
-const inputTabs = [
-  {
-    id: 'existing',
-    name: 'Existing',
-    disabled: false,
-  },
-  {
-    id: 'new',
-    name: 'New',
-    disabled: false,
-  },
-];
-
 /**
  * TODO: This will be the ReactFlow node in the drag-and-drop workspace. It will take in a component
  * from the global workflow state and render it appropriately (inputs / params / outputs / etc.)
@@ -44,10 +29,6 @@ export function WorkflowComponent(props: WorkflowComponentProps) {
 
   const [selectedTabId, setSelectedTabId] = useState<string>('existing');
 
-  const onSelectedTabChanged = (id: string) => {
-    setSelectedTabId(id);
-  };
-
   const isCreatingNew = component.allowsCreation && selectedTabId === 'new';
   const fieldsToDisplay = isCreatingNew
     ? component.createFields
@@ -58,52 +39,13 @@ export function WorkflowComponent(props: WorkflowComponentProps) {
       <EuiFlexGroup direction="column">
         <EuiFlexItem>
           {component.allowsCreation ? (
-            <EuiTabs size="s" expand={true}>
-              {inputTabs.map((tab, idx) => {
-                return (
-                  <EuiTab
-                    onClick={() => onSelectedTabChanged(tab.id)}
-                    isSelected={tab.id === selectedTabId}
-                    disabled={tab.disabled}
-                    key={idx}
-                  >
-                    {tab.name}
-                  </EuiTab>
-                );
-              })}
-            </EuiTabs>
+            <NewOrExistingTabs
+              setSelectedTabId={setSelectedTabId}
+              selectedTabId={selectedTabId}
+            />
           ) : undefined}
         </EuiFlexItem>
-        <EuiFlexItem>
-          {fieldsToDisplay?.map((field, idx) => {
-            if (field.type === 'string') {
-              return (
-                <EuiFlexItem key={idx}>
-                  <TextField
-                    label={field.label}
-                    placeholder={field.placeholder || ''}
-                  />
-                  <EuiSpacer size="s" />
-                </EuiFlexItem>
-              );
-            } else if (field.type === 'json') {
-              return (
-                <EuiFlexItem key={idx}>
-                  <JsonField
-                    label={field.label}
-                    placeholder={field.placeholder || ''}
-                  />
-                </EuiFlexItem>
-              );
-            } else if (field.type === 'select') {
-              return (
-                <EuiFlexItem key={idx}>
-                  <SelectField />
-                </EuiFlexItem>
-              );
-            }
-          })}
-        </EuiFlexItem>
+        <InputFieldList inputFields={fieldsToDisplay} />
         {/**
          * Hardcoding the interfaced inputs/outputs for readability
          * TODO: remove when moving this into the context of a ReactFlow node with Handles.