Skip to content

Commit dc07e49

Browse files
saimedhisaimedhi
authored
Fixed workflow detail page UX bugs (opensearch-project#457)
Signed-off-by: saimedhi <saimedhi@amazon.com>
1 parent ba0dc6a commit dc07e49

File tree

7 files changed

+37
-32
lines changed

7 files changed

+37
-32
lines changed

‎public/pages/workflow_detail/components/header.tsx

+5-6
Original file line numberDiff line numberDiff line change
@@ -336,15 +336,13 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
336336
<>
337337
{dataSourceEnabled && DataSourceComponent}
338338
<EuiPageHeader
339-
style={{ marginTop: '-8px' }}
340339
pageTitle={
341340
<EuiFlexGroup direction="row" alignItems="flexEnd" gutterSize="m">
342341
<EuiFlexItem grow={false}>{workflowName}</EuiFlexItem>
343342
</EuiFlexGroup>
344343
}
345344
rightSideItems={[
346345
<EuiSmallButton
347-
style={{ marginTop: '8px' }}
348346
fill={true}
349347
onClick={() => {
350348
setIsExportModalOpen(true);
@@ -354,7 +352,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
354352
Export
355353
</EuiSmallButton>,
356354
<EuiSmallButtonEmpty
357-
style={{ marginTop: '8px' }}
358355
onClick={() => {
359356
history.replace(
360357
constructUrlWithParams(
@@ -369,7 +366,6 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
369366
Close
370367
</EuiSmallButtonEmpty>,
371368
<EuiSmallButtonEmpty
372-
style={{ marginTop: '8px' }}
373369
disabled={saveDisabled}
374370
isLoading={isRunningSave}
375371
onClick={() => {
@@ -379,19 +375,22 @@ export function WorkflowDetailHeader(props: WorkflowDetailHeaderProps) {
379375
{`Save`}
380376
</EuiSmallButtonEmpty>,
381377
<EuiSmallButtonIcon
382-
style={{ marginTop: '8px' }}
383378
iconType="editorUndo"
384379
aria-label="undo changes"
385380
isDisabled={undoDisabled}
386381
onClick={() => {
387382
revertUnsavedChanges();
388383
}}
389384
/>,
390-
<EuiText style={{ marginTop: '14px' }} color="subdued" size="s">
385+
<EuiText color="subdued" size="s">
391386
{`Last updated: ${workflowLastUpdated}`}
392387
</EuiText>,
393388
]}
394389
bottomBorder={false}
390+
rightSideGroupProps={{
391+
alignItems: 'center',
392+
}}
393+
paddingSize="s"
395394
/>
396395
</>
397396
)}

‎public/pages/workflow_detail/resizable_workspace.tsx

+13-16
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
9696
direction="horizontal"
9797
className="stretch-absolute"
9898
style={{
99-
marginLeft: '-8px',
100-
marginTop: SHOW_ACTIONS_IN_HEADER ? '-8px' : '40px',
99+
marginTop: SHOW_ACTIONS_IN_HEADER ? '0' : '58px',
100+
height: SHOW_ACTIONS_IN_HEADER ? '100%' : 'calc(100% - 58px)',
101+
gap: '4px',
101102
}}
102103
>
103104
{(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
@@ -112,7 +113,8 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
112113
mode="main"
113114
initialSize={60}
114115
minSize="25%"
115-
paddingSize="s"
116+
paddingSize="none"
117+
scrollable={false}
116118
>
117119
<WorkflowInputs
118120
workflow={props.workflow}
@@ -135,23 +137,18 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
135137
<EuiResizableButton />
136138
<EuiResizablePanel
137139
id={PREVIEW_PANEL_ID}
138-
style={{
139-
marginRight: isPreviewPanelOpen ? '-32px' : '0px',
140-
marginBottom: isToolsPanelOpen ? '0px' : '24px',
141-
}}
142140
mode="collapsible"
143141
initialSize={60}
144142
minSize="25%"
145-
paddingSize="s"
143+
paddingSize="none"
144+
borderRadius="l"
146145
onToggleCollapsedInternal={() => onTogglePreviewChange()}
147146
>
148147
<EuiResizableContainer
149148
className="workspace-panel"
150149
direction="vertical"
151150
style={{
152-
marginLeft: '-8px',
153-
marginTop: '-8px',
154-
padding: 'none',
151+
gap: '4px',
155152
}}
156153
>
157154
{(EuiResizablePanel, EuiResizableButton, { togglePanel }) => {
@@ -171,12 +168,12 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
171168
mode="main"
172169
initialSize={60}
173170
minSize="25%"
174-
paddingSize="s"
175-
style={{ marginBottom: '-8px' }}
171+
paddingSize="none"
172+
borderRadius="l"
176173
>
177174
<EuiFlexGroup
178175
direction="column"
179-
gutterSize="s"
176+
gutterSize="none"
180177
style={{ height: '100%' }}
181178
>
182179
<EuiFlexItem>
@@ -193,9 +190,9 @@ export function ResizableWorkspace(props: ResizableWorkspaceProps) {
193190
mode="collapsible"
194191
initialSize={50}
195192
minSize="25%"
196-
paddingSize="s"
193+
paddingSize="none"
194+
borderRadius="l"
197195
onToggleCollapsedInternal={() => onToggleToolsChange()}
198-
style={{ marginBottom: '-16px' }}
199196
>
200197
<Tools
201198
workflow={props.workflow}

‎public/pages/workflow_detail/tools/tools.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,12 @@ export function Tools(props: ToolsProps) {
112112
}, [props.queryResponse]);
113113

114114
return (
115-
<EuiPanel paddingSize="m" grow={true} style={{ height: '100%' }}>
115+
<EuiPanel
116+
paddingSize="m"
117+
borderRadius="l"
118+
grow={true}
119+
style={{ height: '100%' }}
120+
>
116121
<EuiFlexGroup
117122
direction="column"
118123
style={{

‎public/pages/workflow_detail/workflow_detail.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,7 @@ export function WorkflowDetail(props: WorkflowDetailProps) {
198198
validate={(values) => {}}
199199
>
200200
<ReactFlowProvider>
201-
<EuiPage>
201+
<EuiPage paddingSize="s">
202202
<EuiPageBody className="workflow-detail stretch-relative">
203203
<WorkflowDetailHeader
204204
workflow={workflow}

‎public/pages/workflow_detail/workflow_inputs/workflow_inputs.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -555,18 +555,25 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
555555
}
556556

557557
return (
558-
<EuiPanel paddingSize="m" grow={true} className="workspace-panel">
558+
<EuiPanel
559+
paddingSize="s"
560+
grow={true}
561+
className="workspace-panel"
562+
borderRadius="l"
563+
>
559564
{props.uiConfig === undefined ? (
560565
<EuiLoadingSpinner size="xl" />
561566
) : (
562567
<EuiFlexGroup
563568
direction="column"
564569
justifyContent="spaceBetween"
570+
gutterSize="none"
565571
style={{
566572
height: '100%',
573+
gap: '16px',
567574
}}
568575
>
569-
<EuiFlexItem grow={false} style={{ marginBottom: '-8px' }}>
576+
<EuiFlexItem grow={false}>
570577
<EuiStepsHorizontal
571578
steps={[
572579
{
@@ -734,10 +741,7 @@ export function WorkflowInputs(props: WorkflowInputsProps) {
734741
/>
735742
)}
736743
</EuiFlexItem>
737-
<EuiFlexItem
738-
grow={false}
739-
style={{ marginBottom: '-10px', marginTop: '-24px' }}
740-
>
744+
<EuiFlexItem grow={false}>
741745
<EuiFlexGroup direction="column" gutterSize="none">
742746
<EuiFlexItem>
743747
<EuiHorizontalRule margin="m" />

‎public/pages/workflow_detail/workspace/workspace-styles.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.workspace-panel {
2-
height: 95%;
2+
height: 100%;
33
}

‎public/pages/workflow_detail/workspace/workspace.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ export function Workspace(props: WorkspaceProps) {
116116
justifyContent="spaceBetween"
117117
>
118118
<EuiFlexItem
119-
className="euiPanel euiPanel--hasShadow euiPanel--borderRadiusMedium"
119+
className="euiPanel euiPanel--hasShadow euiPanel--borderRadiusLarge"
120120
style={{ overflowX: 'hidden' }}
121121
>
122122
{/**

0 commit comments

Comments
 (0)