Skip to content

Feature 2220/stepper review status admin #2270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mkimberlin merged 16 commits into from
May 7, 2024
Merged

Feature 2220/stepper review status admin #2270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
8c9ea91
[2220] Review Period Stepper component
S78901 Apr 26, 2024
77dda03
[2220] Review Period Stepper test
S78901 Apr 26, 2024
9e53d79
[2220] Review Period Stepper Story
S78901 Apr 26, 2024
25f0cad
[2220] Fix gradle build issue
S78901 Apr 26, 2024
14b439a
[2220] Update snapshot
S78901 Apr 26, 2024
535e331
Merge remote-tracking branch 'origin/develop' into feature-2220/stepp…
S78901 May 3, 2024
4b3c90a
[2220] Adjust naming of component
S78901 May 3, 2024
69d7507
[2220] New changes for reviewStatus
S78901 May 3, 2024
40556e6
[2220] Adjust story
S78901 May 3, 2024
26cc5e9
[2220] Adjust test
S78901 May 3, 2024
e6a7316
[2220] Adjust parameters of test/story data
S78901 May 3, 2024
0296983
[2220] Finalize Stepper component
S78901 May 3, 2024
6cd8689
Merge branch 'develop' into feature-2220/stepper-review-status-admin
S78901 May 7, 2024
14fa92b
Merge branch 'develop' into feature-2220/stepper-review-status-admin
S78901 May 7, 2024
b13943f
[2220] PR Changes
S78901 May 7, 2024
6ac99cd
[2220] Update snapshot
S78901 May 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion web-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@
"serve": "vite preview",
"start": "vite",
"storybook": "storybook dev -p 6006",
"test": "vitest"
"test": "vitest",
"update-test": "vitest -u"
},
"eslintConfig": {
"extends": "react-app"
Expand Down
28 changes: 28 additions & 0 deletions web-ui/src/components/reviews/periods/ReviewPeriodStepper.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import React, { useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import optionsArr from './reviewStatus.json';

export default function ReviewPeriodStepper({ reviewPeriod }) {
const [activeIndex, setActiveIndex] = useState(0);

useEffect(() => {
let revPeriod = reviewPeriod?.reviewStatus;
const index = optionsArr.findIndex(opt => opt.option === revPeriod);
setActiveIndex(index);
}, [reviewPeriod]);

return (
<Box sx={{ width: '100%' }}>
<Stepper activeStep={activeIndex} alternativeLabel>
{optionsArr.map(({ label, option }) => (
<Step key={option}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
</Box>
);
}
36 changes: 36 additions & 0 deletions web-ui/src/components/reviews/periods/ReviewPeriodStepper.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import React from 'react';
import ReviewPeriodStepper from './ReviewPeriodStepper';

export default {
component: ReviewPeriodStepper,
title: 'Check Ins/Review Period Stepper',
decorators: [
ReviewPeriodStepper => (
<div style={{ width: '400px', height: '400px' }}>
<ReviewPeriodStepper />
</div>
)
]
};

const Template = args => {
return <ReviewPeriodStepper {...args} />;
};

const reviewPeriodStepperData = {
reviewPeriod: {
id: "b0b8a6f3-2d15-4923-8552-2f729f58ea0f",
name: "Test",
reviewStatus: "OPEN",
launchDate: "2024-05-03T15:53:56.673Z",
selfReviewCloseDate: "2024-05-03T15:53:56.673Z",
closeDate: "2024-05-03T15:53:56.673Z",
reviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57",
selfReviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57"
}
};

export const ReviewPeriodSteppers = Template.bind({});
ReviewPeriodSteppers.args = {
...reviewPeriodStepperData
};
21 changes: 21 additions & 0 deletions web-ui/src/components/reviews/periods/ReviewPeriodStepper.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import ReviewPeriodStepper from './ReviewPeriodStepper';
import { AppContextProvider } from '../../../context/AppContext';

const reviewPeriod = {
id: "b0b8a6f3-2d15-4923-8552-2f729f58ea0f",
name: "Test",
reviewStatus: 'OPEN',
launchDate: "2024-05-03T15:53:56.673Z",
selfReviewCloseDate: "2024-05-03T15:53:56.673Z",
closeDate: "2024-05-03T15:53:56.673Z",
reviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57",
selfReviewTemplateId: "d1e94b60-47c4-4945-87d1-4dc88f088e57"
}
it('renders correctly', () => {
snapshot(
<AppContextProvider>
<ReviewPeriodStepper reviewPeriod={reviewPeriod} />
</AppContextProvider>
);
});
183 changes: 183 additions & 0 deletions web-ui/src/components/reviews/periods/__snapshots__/ReviewPeriodStepper.test.jsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`renders correctly 1`] = `
<div>
<div
class="MuiBox-root css-8atqhb"
>
<div
class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
>
<div
class="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel Mui-completed css-n7tliy-MuiStep-root"
>
<span
class="MuiStepLabel-root MuiStepLabel-horizontal MuiStepLabel-alternativeLabel css-ascpo7-MuiStepLabel-root"
>
<span
class="MuiStepLabel-iconContainer Mui-completed MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root Mui-completed css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
data-testid="CheckCircleIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"
/>
</svg>
</span>
<span
class="MuiStepLabel-labelContainer MuiStepLabel-alternativeLabel css-1vyamtt-MuiStepLabel-labelContainer"
>
<span
class="MuiStepLabel-label Mui-completed MuiStepLabel-alternativeLabel css-1hv8oq8-MuiStepLabel-label"
>
Planning
</span>
</span>
</span>
</div>
<div
class="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel Mui-completed css-n7tliy-MuiStep-root"
>
<div
class="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel Mui-completed css-zpcwqm-MuiStepConnector-root"
>
<span
class="MuiStepConnector-line MuiStepConnector-lineHorizontal css-z7uhs0-MuiStepConnector-line"
/>
</div>
<span
class="MuiStepLabel-root MuiStepLabel-horizontal MuiStepLabel-alternativeLabel css-ascpo7-MuiStepLabel-root"
>
<span
class="MuiStepLabel-iconContainer Mui-completed MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root Mui-completed css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
data-testid="CheckCircleIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"
/>
</svg>
</span>
<span
class="MuiStepLabel-labelContainer MuiStepLabel-alternativeLabel css-1vyamtt-MuiStepLabel-labelContainer"
>
<span
class="MuiStepLabel-label Mui-completed MuiStepLabel-alternativeLabel css-1hv8oq8-MuiStepLabel-label"
>
Awaiting Approval
</span>
</span>
</span>
</div>
<div
class="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel css-n7tliy-MuiStep-root"
>
<div
class="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel Mui-active css-zpcwqm-MuiStepConnector-root"
>
<span
class="MuiStepConnector-line MuiStepConnector-lineHorizontal css-z7uhs0-MuiStepConnector-line"
/>
</div>
<span
class="MuiStepLabel-root MuiStepLabel-horizontal MuiStepLabel-alternativeLabel css-ascpo7-MuiStepLabel-root"
>
<span
class="MuiStepLabel-iconContainer Mui-active MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root Mui-active css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<circle
cx="12"
cy="12"
r="12"
/>
<text
class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
dominant-baseline="central"
text-anchor="middle"
x="12"
y="12"
>
3
</text>
</svg>
</span>
<span
class="MuiStepLabel-labelContainer MuiStepLabel-alternativeLabel css-1vyamtt-MuiStepLabel-labelContainer"
>
<span
class="MuiStepLabel-label Mui-active MuiStepLabel-alternativeLabel css-1hv8oq8-MuiStepLabel-label"
>
Open
</span>
</span>
</span>
</div>
<div
class="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel css-n7tliy-MuiStep-root"
>
<div
class="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel Mui-disabled css-zpcwqm-MuiStepConnector-root"
>
<span
class="MuiStepConnector-line MuiStepConnector-lineHorizontal css-z7uhs0-MuiStepConnector-line"
/>
</div>
<span
class="MuiStepLabel-root MuiStepLabel-horizontal Mui-disabled MuiStepLabel-alternativeLabel css-ascpo7-MuiStepLabel-root"
>
<span
class="MuiStepLabel-iconContainer Mui-disabled MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiStepIcon-root css-1u4zpwo-MuiSvgIcon-root-MuiStepIcon-root"
focusable="false"
viewBox="0 0 24 24"
>
<circle
cx="12"
cy="12"
r="12"
/>
<text
class="MuiStepIcon-text css-117w1su-MuiStepIcon-text"
dominant-baseline="central"
text-anchor="middle"
x="12"
y="12"
>
4
</text>
</svg>
</span>
<span
class="MuiStepLabel-labelContainer MuiStepLabel-alternativeLabel css-1vyamtt-MuiStepLabel-labelContainer"
>
<span
class="MuiStepLabel-label Mui-disabled MuiStepLabel-alternativeLabel css-1hv8oq8-MuiStepLabel-label"
>
Closed
</span>
</span>
</span>
</div>
</div>
</div>
</div>
`;
6 changes: 6 additions & 0 deletions web-ui/src/components/reviews/periods/reviewStatus.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
[
{ "label": "Planning", "option": "PLANNING" },
{ "label": "Awaiting Approval", "option": "AWAITING_APPROVAL" },
{ "label": "Open", "option": "OPEN" },
{ "label": "Closed", "option": "CLOSED" }
]