Skip to content

Commit 248c242

Browse files
jenny-s51jenny-s51
authored
fix(ws): Update Progress Stepper with UX feedback (#401)
Signed-off-by: Jenny <[email protected]> add description beneath title Signed-off-by: Jenny <[email protected]> fix(ws): apply isCurrentStep correctly and Flex layout Signed-off-by: Jenny <[email protected]> fix linting issues Signed-off-by: Jenny <[email protected]> delete tsConfig.json
1 parent 6490251 commit 248c242

File tree

6 files changed

+62
-93
lines changed

6 files changed

+62
-93
lines changed

‎workspaces/frontend/src/app/pages/Workspaces/Form/WorkspaceForm.tsx‎

Lines changed: 53 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ import {
99
ProgressStep,
1010
ProgressStepper,
1111
Stack,
12-
StackItem,
1312
} from '@patternfly/react-core';
14-
import { CheckIcon } from '@patternfly/react-icons';
1513
import { useCallback, useMemo, useState } from 'react';
1614
import useGenericObjectState from '~/app/hooks/useGenericObjectState';
1715
import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
@@ -32,6 +30,14 @@ enum WorkspaceFormSteps {
3230
Properties,
3331
}
3432

33+
const stepDescriptions: { [key in WorkspaceFormSteps]?: string } = {
34+
[WorkspaceFormSteps.KindSelection]: 'Select a workspace kind to use for the workspace.',
35+
[WorkspaceFormSteps.ImageSelection]:
36+
'Select a workspace image and image version to use for the workspace.',
37+
[WorkspaceFormSteps.PodConfigSelection]: 'Select a pod config to use for the workspace.',
38+
[WorkspaceFormSteps.Properties]: 'Configure properties for your workspace.',
39+
};
40+
3541
const WorkspaceForm: React.FC = () => {
3642
const navigate = useTypedNavigate();
3743
const { api } = useNotebookAPI();
@@ -158,75 +164,54 @@ const WorkspaceForm: React.FC = () => {
158164
<PageGroup isFilled={false} stickyOnBreakpoint={{ default: 'top' }}>
159165
<PageSection>
160166
<Stack hasGutter>
161-
<StackItem>
162-
<Flex>
167+
<Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapXl' }}>
168+
<FlexItem>
163169
<Content>
164170
<h1>{`${mode === 'create' ? 'Create' : 'Edit'} workspace`}</h1>
171+
<p>{stepDescriptions[currentStep]}</p>
165172
</Content>
166-
</Flex>
167-
</StackItem>
168-
<StackItem>
169-
<ProgressStepper aria-label="Workspace form stepper">
170-
<ProgressStep
171-
variant={getStepVariant(WorkspaceFormSteps.KindSelection)}
172-
id="kind-selection-step"
173-
icon={
174-
getStepVariant(WorkspaceFormSteps.KindSelection) === 'success' ? (
175-
<CheckIcon />
176-
) : (
177-
1
178-
)
179-
}
180-
titleId="kind-selection-step-title"
181-
aria-label="Kind selection step"
182-
>
183-
Workspace Kind
184-
</ProgressStep>
185-
<ProgressStep
186-
variant={getStepVariant(WorkspaceFormSteps.ImageSelection)}
187-
isCurrent
188-
id="image-selection-step"
189-
icon={
190-
getStepVariant(WorkspaceFormSteps.ImageSelection) === 'success' ? (
191-
<CheckIcon />
192-
) : (
193-
2
194-
)
195-
}
196-
titleId="image-selection-step-title"
197-
aria-label="Image selection step"
198-
>
199-
Image
200-
</ProgressStep>
201-
<ProgressStep
202-
variant={getStepVariant(WorkspaceFormSteps.PodConfigSelection)}
203-
isCurrent
204-
id="pod-config-selection-step"
205-
icon={
206-
getStepVariant(WorkspaceFormSteps.PodConfigSelection) === 'success' ? (
207-
<CheckIcon />
208-
) : (
209-
3
210-
)
211-
}
212-
titleId="pod-config-selection-step-title"
213-
aria-label="Pod config selection step"
214-
>
215-
Pod Config
216-
</ProgressStep>
217-
<ProgressStep
218-
variant={getStepVariant(WorkspaceFormSteps.Properties)}
219-
id="properties-step"
220-
icon={
221-
getStepVariant(WorkspaceFormSteps.Properties) === 'success' ? <CheckIcon /> : 4
222-
}
223-
titleId="properties-step-title"
224-
aria-label="Properties step"
225-
>
226-
Properties
227-
</ProgressStep>
228-
</ProgressStepper>
229-
</StackItem>
173+
</FlexItem>
174+
<FlexItem>
175+
<ProgressStepper aria-label="Workspace form stepper">
176+
<ProgressStep
177+
variant={getStepVariant(WorkspaceFormSteps.KindSelection)}
178+
isCurrent={currentStep === WorkspaceFormSteps.KindSelection}
179+
id="kind-selection-step"
180+
titleId="kind-selection-step-title"
181+
aria-label="Kind selection step"
182+
>
183+
Workspace Kind
184+
</ProgressStep>
185+
<ProgressStep
186+
variant={getStepVariant(WorkspaceFormSteps.ImageSelection)}
187+
isCurrent={currentStep === WorkspaceFormSteps.ImageSelection}
188+
id="image-selection-step"
189+
titleId="image-selection-step-title"
190+
aria-label="Image selection step"
191+
>
192+
Image
193+
</ProgressStep>
194+
<ProgressStep
195+
variant={getStepVariant(WorkspaceFormSteps.PodConfigSelection)}
196+
isCurrent={currentStep === WorkspaceFormSteps.PodConfigSelection}
197+
id="pod-config-selection-step"
198+
titleId="pod-config-selection-step-title"
199+
aria-label="Pod config selection step"
200+
>
201+
Pod Config
202+
</ProgressStep>
203+
<ProgressStep
204+
variant={getStepVariant(WorkspaceFormSteps.Properties)}
205+
isCurrent={currentStep === WorkspaceFormSteps.Properties}
206+
id="properties-step"
207+
titleId="properties-step-title"
208+
aria-label="Properties step"
209+
>
210+
Properties
211+
</ProgressStep>
212+
</ProgressStepper>
213+
</FlexItem>
214+
</Flex>
230215
</Stack>
231216
</PageSection>
232217
</PageGroup>

‎workspaces/frontend/src/app/pages/Workspaces/Form/image/WorkspaceFormImageSelection.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useMemo, useState, useCallback } from 'react';
2-
import { Content, Divider, Split, SplitItem } from '@patternfly/react-core';
2+
import { Content, Split, SplitItem } from '@patternfly/react-core';
33
import { WorkspaceFormImageDetails } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageDetails';
44
import { WorkspaceFormImageList } from '~/app/pages/Workspaces/Form/image/WorkspaceFormImageList';
55
import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels';
@@ -57,8 +57,6 @@ const WorkspaceFormImageSelection: React.FunctionComponent<WorkspaceFormImageSel
5757

5858
return (
5959
<Content style={{ height: '100%' }}>
60-
<p>Select a workspace image and image version to use for the workspace.</p>
61-
<Divider />
6260
<WorkspaceFormDrawer
6361
title="Image"
6462
info={imageDetailsContent}

‎workspaces/frontend/src/app/pages/Workspaces/Form/kind/WorkspaceFormKindSelection.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useRef, useMemo, useCallback } from 'react';
2-
import { Content, Divider } from '@patternfly/react-core';
2+
import { Content } from '@patternfly/react-core';
33
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
44
import useWorkspaceKinds from '~/app/hooks/useWorkspaceKinds';
55
import { WorkspaceFormKindDetails } from '~/app/pages/Workspaces/Form/kind/WorkspaceFormKindDetails';
@@ -59,8 +59,6 @@ const WorkspaceFormKindSelection: React.FunctionComponent<WorkspaceFormKindSelec
5959
onCloseClick={onCloseClick}
6060
onExpand={onExpand}
6161
>
62-
<p>Select a workspace kind to use for the workspace.</p>
63-
<Divider />
6462
<WorkspaceFormKindList
6563
allWorkspaceKinds={workspaceKinds}
6664
selectedKind={selectedKind}

‎workspaces/frontend/src/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigSelection.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useMemo, useState } from 'react';
2-
import { Content, Divider, Split, SplitItem } from '@patternfly/react-core';
2+
import { Content, Split, SplitItem } from '@patternfly/react-core';
33
import { WorkspaceFormPodConfigDetails } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigDetails';
44
import { WorkspaceFormPodConfigList } from '~/app/pages/Workspaces/Form/podConfig/WorkspaceFormPodConfigList';
55
import { FilterByLabels } from '~/app/pages/Workspaces/Form/labelFilter/FilterByLabels';
@@ -55,9 +55,6 @@ const WorkspaceFormPodConfigSelection: React.FunctionComponent<
5555

5656
return (
5757
<Content style={{ height: '100%' }}>
58-
<p>Select a pod config to use for the workspace.</p>
59-
<Divider />
60-
6158
<WorkspaceFormDrawer
6259
title="Pod config"
6360
info={podConfigDetailsContent}

‎workspaces/frontend/src/app/pages/Workspaces/Form/properties/WorkspaceFormPropertiesSelection.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@ const WorkspaceFormPropertiesSelection: React.FunctionComponent<
3636

3737
return (
3838
<Content style={{ height: '100%' }}>
39-
<p>Configure properties for your workspace.</p>
40-
<Divider />
4139
<Split hasGutter>
4240
<SplitItem style={{ minWidth: '200px' }}>{imageDetailsContent}</SplitItem>
4341
<SplitItem isFilled>

‎workspaces/frontend/src/shared/style/MUI-theme.scss‎

Lines changed: 6 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -573,20 +573,13 @@
573573

574574
}
575575

576-
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info,
577-
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
578-
--pf-v6-c-progress-stepper__step-icon--BackgroundColor: var(--mui-palette-primary-main);
579-
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-common-white);
580-
}
581-
582-
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-pending .pf-v6-c-progress-stepper__step-icon {
583-
--pf-v6-c-progress-stepper__step-icon--BackgroundColor: var(--mui-palette-grey-500);
584-
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-common-white);
585-
}
576+
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-info {
577+
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-primary-main);
578+
}
586579

587-
.mui-theme .pf-v6-c-progress-stepper__step-icon {
588-
--pf-v6-c-progress-stepper__step-icon--BorderWidth: 0;
589-
}
580+
.mui-theme .pf-v6-c-progress-stepper__step.pf-m-success {
581+
--pf-v6-c-progress-stepper__step-icon--Color: var(--mui-palette-success-main);
582+
}
590583

591584
.mui-theme .pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
592585
display: none;

0 commit comments

Comments
 (0)