More cleanup; make everything fit on standard mac

Signed-off-by: Tyler Ohlsen <[email protected]>
opensearch-project · May 28, 2024 · 31db2ed · 31db2ed
1 parent 3412fb5
commit 31db2ed
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 91 deletions.
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
@@ -41,6 +41,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
 
   return (
     <EuiPageHeader
+      style={{ marginTop: '-8px' }}
       pageTitle={
         <EuiFlexGroup direction="row" alignItems="flexEnd" gutterSize="m">
           <EuiFlexItem grow={false}>{getTitle()}</EuiFlexItem>
@@ -55,7 +56,7 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
           Export
         </EuiButton>,
       ]}
-      bottomBorder={true}
+      bottomBorder={false}
     />
   );
 }
diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -42,13 +42,13 @@ import {
   updateWorkflow,
   useAppDispatch,
 } from '../../store';
+import { WorkflowInputs } from './workflow_inputs';
+import { configToTemplateFlows } from './utils';
 import { Workspace } from './workspace';
 
 // styling
 import './workspace/workspace-styles.scss';
 import '../../global-styles.scss';
-import { WorkflowInputs } from './workflow_inputs';
-import { configToTemplateFlows } from './utils';
 
 interface ResizableWorkspaceProps {
   isNewWorkflow: boolean;
@@ -94,7 +94,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     collapseFnHorizontal.current(WORKFLOW_INPUTS_PANEL_ID, {
       direction: 'left',
     });
-    setIsWorkflowInputsPanelOpen(!isWorkflowInputsPanelOpen);
   };
 
   // Tools side panel state
@@ -104,7 +103,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   );
   const onToggleToolsChange = () => {
     collapseFnVertical.current(TOOLS_PANEL_ID, { direction: 'bottom' });
-    setIsWorkflowInputsPanelOpen(!isWorkflowInputsPanelOpen);
   };
 
   // Selected component state
@@ -138,31 +136,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
   const isLoadingGlobal =
     loading || isProvisioning || isDeprovisioning || isSaving || isCreating;
 
-  /**
-   * Custom listener on when nodes are selected / de-selected. Passed to
-   * downstream ReactFlow components you can listen using
-   * the out-of-the-box useOnSelectionChange hook.
-   * - populate panel content appropriately
-   * - open the panel if a node is selected and the panel is closed
-   * - it is assumed that only one node can be selected at once
-   */
-  function onSelectionChange({
-    nodes,
-    edges,
-  }: {
-    nodes: ReactFlowComponent[];
-    edges: ReactFlowEdge[];
-  }) {
-    if (nodes && nodes.length > 0) {
-      setSelectedComponent(nodes[0]);
-      if (!isWorkflowInputsPanelOpen) {
-        onToggleWorkflowInputsChange();
-      }
-    } else {
-      setSelectedComponent(undefined);
-    }
-  }
-
   // Hook to update some default values for the workflow, if applicable.
   // We need to handle different scenarios:
   // 1. Rendering backend-only-created workflow / an already-created workflow with no ui_metadata.
@@ -297,35 +270,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
     >
       {(formikProps) => (
         <Form>
-          {/*
-            TODO: finalize where/how to show invalidations
-            */}
-          {/* {!formValidOnSubmit && (
-            <EuiCallOut
-              title="There are empty or invalid fields"
-              color="danger"
-              iconType="alert"
-              style={{ marginBottom: '16px' }}
-            >
-              Please address the highlighted fields and try saving again.
-            </EuiCallOut>
-          )}
-          {isDeprovisionable && isDirty && (
-            <EuiCallOut
-              title="The configured flow has been provisioned"
-              color="warning"
-              iconType="alert"
-              style={{ marginBottom: '16px' }}
-            >
-              Changes cannot be saved until the workflow has first been
-              deprovisioned.
-            </EuiCallOut>
-          )} */}
           <EuiResizableContainer
             direction="horizontal"
             className="stretch-absolute"
             style={{
               marginLeft: '-8px',
+              marginTop: '-8px',
             }}
           >
             {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
@@ -348,20 +298,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                       onToggleWorkflowInputsChange()
                     }
                   >
-                    <EuiFlexGroup
-                      direction="column"
-                      gutterSize="s"
-                      className="workspace-panel"
-                    >
-                      <EuiFlexItem>
-                        <WorkflowInputs
-                          workflow={props.workflow}
-                          formikProps={formikProps}
-                          onFormChange={onFormChange}
-                          validateAndSubmit={validateAndSubmit}
-                        />
-                      </EuiFlexItem>
-                    </EuiFlexGroup>
+                    <WorkflowInputs
+                      workflow={props.workflow}
+                      formikProps={formikProps}
+                      onFormChange={onFormChange}
+                      validateAndSubmit={validateAndSubmit}
+                    />
                   </EuiResizablePanel>
                   <EuiResizableButton />
                   <EuiResizablePanel
@@ -372,11 +314,11 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                     paddingSize="s"
                   >
                     <EuiResizableContainer
+                      className="workspace-panel"
                       direction="vertical"
                       style={{
                         marginLeft: '-8px',
-                        marginTop: '-7px',
-                        height: '90%',
+                        marginTop: '-8px',
                         padding: 'none',
                       }}
                     >
@@ -403,7 +345,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               initialSize={60}
                               minSize="25%"
                               paddingSize="s"
-                              style={{ marginBottom: '-6px' }}
+                              style={{ marginBottom: '-8px' }}
                             >
                               <EuiFlexGroup
                                 direction="column"
@@ -416,7 +358,6 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                                     workflow={workflow}
                                     readonly={false}
                                     onNodesChange={onNodesChange}
-                                    onSelectionChange={onSelectionChange}
                                   />
                                 </EuiFlexItem>
                               </EuiFlexGroup>
@@ -431,7 +372,7 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                               onToggleCollapsedInternal={() =>
                                 onToggleToolsChange()
                               }
-                              style={{ marginBottom: '-14px' }}
+                              style={{ marginBottom: '-24px' }}
                             >
                               <EuiFlexGroup
                                 direction="column"

diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -18,6 +18,9 @@ import { IngestInputs } from './ingest_inputs';
 import { SearchInputs } from './search_inputs';
 import { FormikProps } from 'formik';
 
+// styling
+import '../workspace/workspace-styles.scss';
+
 interface WorkflowInputsProps {
   workflow: Workflow | undefined;
   formikProps: FormikProps<WorkflowFormValues>;
@@ -43,7 +46,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
   useEffect(() => {}, [selectedStep]);
 
   return (
-    <EuiPanel paddingSize="m">
+    <EuiPanel paddingSize="m" grow={true} className="workspace-panel">
       {props.workflow === undefined ? (
         <EuiLoadingSpinner size="xl" />
       ) : (

diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -13,15 +13,13 @@ import ReactFlow, {
   BackgroundVariant,
   useStore,
   useReactFlow,
-  useOnSelectionChange,
   MarkerType,
 } from 'reactflow';
 import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { setDirty, useAppDispatch } from '../../../store';
 import {
   IComponentData,
   ReactFlowComponent,
-  ReactFlowEdge,
   Workflow,
   WorkflowConfig,
 } from '../../../../common';
@@ -44,13 +42,6 @@ interface WorkspaceProps {
   readonly: boolean;
   onNodesChange: (nodes: ReactFlowComponent[]) => void;
   id: string;
-  onSelectionChange: ({
-    nodes,
-    edges,
-  }: {
-    nodes: ReactFlowComponent[];
-    edges: ReactFlowEdge[];
-  }) => void;
 }
 
 const nodeTypes = {
@@ -77,14 +68,6 @@ export function Workspace(props: WorkspaceProps) {
     props.onNodesChange(nodes);
   }, [nodesLength]);
 
-  /**
-   * Hook provided by reactflow to listen on when nodes are selected / de-selected.
-   * Trigger the callback fn to propagate changes to parent components.
-   */
-  useOnSelectionChange({
-    onChange: props.onSelectionChange,
-  });
-
   const onConnect = useCallback(
     (params) => {
       const edge = {