Fixed workflow detail page UX bugs (#457) (#458)

(cherry picked from commit dc07e49) Signed-off-by: saimedhi <[email protected]> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Oct 31, 2024 · 11da61a · 11da61a
1 parent 9eeb5d9
commit 11da61a
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 32 deletions.
diff --git a/public/pages/workflow_detail/components/header.tsx b/public/pages/workflow_detail/components/header.tsx
@@ -336,15 +336,13 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
         <>
           {dataSourceEnabled && DataSourceComponent}
           <EuiPageHeader
-            style={{ marginTop: '-8px' }}
             pageTitle={
               <EuiFlexGroup direction="row" alignItems="flexEnd" gutterSize="m">
                 <EuiFlexItem grow={false}>{workflowName}</EuiFlexItem>
               </EuiFlexGroup>
             }
             rightSideItems={[
               <EuiSmallButton
-                style={{ marginTop: '8px' }}
                 fill={true}
                 onClick={() => {
                   setIsExportModalOpen(true);
@@ -354,7 +352,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                 Export
               </EuiSmallButton>,
               <EuiSmallButtonEmpty
-                style={{ marginTop: '8px' }}
                 onClick={() => {
                   history.replace(
                     constructUrlWithParams(
@@ -369,7 +366,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                 Close
               </EuiSmallButtonEmpty>,
               <EuiSmallButtonEmpty
-                style={{ marginTop: '8px' }}
                 disabled={saveDisabled}
                 isLoading={isRunningSave}
                 onClick={() => {
@@ -379,19 +375,22 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
                 {`Save`}
               </EuiSmallButtonEmpty>,
               <EuiSmallButtonIcon
-                style={{ marginTop: '8px' }}
                 iconType="editorUndo"
                 aria-label="undo changes"
                 isDisabled={undoDisabled}
                 onClick={() => {
                   revertUnsavedChanges();
                 }}
               />,
-              <EuiText style={{ marginTop: '14px' }} color="subdued" size="s">
+              <EuiText color="subdued" size="s">
                 {`Last updated: ${workflowLastUpdated}`}
               </EuiText>,
             ]}
             bottomBorder={false}
+            rightSideGroupProps={{
+              alignItems: 'center',
+            }}
+            paddingSize="s"
           />
         </>
       )}

diff --git a/public/pages/workflow_detail/resizable_workspace.tsx b/public/pages/workflow_detail/resizable_workspace.tsx
@@ -96,8 +96,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
       direction="horizontal"
       className="stretch-absolute"
       style={{
-        marginLeft: '-8px',
-        marginTop: SHOW_ACTIONS_IN_HEADER ? '-8px' : '40px',
+        marginTop: SHOW_ACTIONS_IN_HEADER ? '0' : '58px',
+        height: SHOW_ACTIONS_IN_HEADER ? '100%' : 'calc(100% - 58px)',
+        gap: '4px',
       }}
     >
       {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
@@ -112,7 +113,8 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
               mode="main"
               initialSize={60}
               minSize="25%"
-              paddingSize="s"
+              paddingSize="none"
+              scrollable={false}
             >
               <WorkflowInputs
                 workflow={props.workflow}
@@ -135,23 +137,18 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
             <EuiResizableButton />
             <EuiResizablePanel
               id={PREVIEW_PANEL_ID}
-              style={{
-                marginRight: isPreviewPanelOpen ? '-32px' : '0px',
-                marginBottom: isToolsPanelOpen ? '0px' : '24px',
-              }}
               mode="collapsible"
               initialSize={60}
               minSize="25%"
-              paddingSize="s"
+              paddingSize="none"
+              borderRadius="l"
               onToggleCollapsedInternal={() => onTogglePreviewChange()}
             >
               <EuiResizableContainer
                 className="workspace-panel"
                 direction="vertical"
                 style={{
-                  marginLeft: '-8px',
-                  marginTop: '-8px',
-                  padding: 'none',
+                  gap: '4px',
                 }}
               >
                 {(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
@@ -171,12 +168,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                         mode="main"
                         initialSize={60}
                         minSize="25%"
-                        paddingSize="s"
-                        style={{ marginBottom: '-8px' }}
+                        paddingSize="none"
+                        borderRadius="l"
                       >
                         <EuiFlexGroup
                           direction="column"
-                          gutterSize="s"
+                          gutterSize="none"
                           style={{ height: '100%' }}
                         >
                           <EuiFlexItem>
@@ -193,9 +190,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
                         mode="collapsible"
                         initialSize={50}
                         minSize="25%"
-                        paddingSize="s"
+                        paddingSize="none"
+                        borderRadius="l"
                         onToggleCollapsedInternal={() => onToggleToolsChange()}
-                        style={{ marginBottom: '-16px' }}
                       >
                         <Tools
                           workflow={props.workflow}

diff --git a/public/pages/workflow_detail/tools/tools.tsx b/public/pages/workflow_detail/tools/tools.tsx
@@ -112,7 +112,12 @@ export function Tools(props: ToolsProps) {
   }, [props.queryResponse]);
 
   return (
-    <EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
+    <EuiPanel
+      paddingSize="m"
+      borderRadius="l"
+      grow={true}
+      style={{ height: '100%' }}
+    >
       <EuiFlexGroup
         direction="column"
         style={{

diff --git a/public/pages/workflow_detail/workflow_detail.tsx b/public/pages/workflow_detail/workflow_detail.tsx
@@ -198,7 +198,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
       validate={(values) => {}}
     >
       <ReactFlowProvider>
-        <EuiPage>
+        <EuiPage paddingSize="s">
           <EuiPageBody className="workflow-detail stretch-relative">
             <WorkflowDetailHeader
               workflow={workflow}

diff --git a/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx b/public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx
@@ -555,18 +555,25 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
   }
 
   return (
-    <EuiPanel paddingSize="m" grow={true} className="workspace-panel">
+    <EuiPanel
+      paddingSize="s"
+      grow={true}
+      className="workspace-panel"
+      borderRadius="l"
+    >
       {props.uiConfig === undefined ? (
         <EuiLoadingSpinner size="xl" />
       ) : (
         <EuiFlexGroup
           direction="column"
           justifyContent="spaceBetween"
+          gutterSize="none"
           style={{
             height: '100%',
+            gap: '16px',
           }}
         >
-          <EuiFlexItem grow={false} style={{ marginBottom: '-8px' }}>
+          <EuiFlexItem grow={false}>
             <EuiStepsHorizontal
               steps={[
                 {
@@ -734,10 +741,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
               />
             )}
           </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
-            style={{ marginBottom: '-10px', marginTop: '-24px' }}
-          >
+          <EuiFlexItem grow={false}>
             <EuiFlexGroup direction="column" gutterSize="none">
               <EuiFlexItem>
                 <EuiHorizontalRule margin="m" />

diff --git a/public/pages/workflow_detail/workspace/workspace-styles.scss b/public/pages/workflow_detail/workspace/workspace-styles.scss
@@ -1,3 +1,3 @@
 .workspace-panel {
-  height: 95%;
+  height: 100%;
 }
diff --git a/public/pages/workflow_detail/workspace/workspace.tsx b/public/pages/workflow_detail/workspace/workspace.tsx
@@ -116,7 +116,7 @@ export function Workspace(props: WorkspaceProps) {
       justifyContent="spaceBetween"
     >
       <EuiFlexItem
-        className="euiPanel euiPanel--hasShadow euiPanel--borderRadiusMedium"
+        className="euiPanel euiPanel--hasShadow euiPanel--borderRadiusLarge"
         style={{ overflowX: 'hidden' }}
       >
         {/**