Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-23 00:22:19 +01:00
Code Issues Projects Releases Wiki Activity

chore: show new change request diagram for users who are exposed to scheduled CRs (#5777)

Browse Source 
This PR adds the new CR diagram (with schedule info) conditionally.
It'll only render for users who are exposed to scheduled CRs.

It also updates the text of the old version to make it all consistent
and adds a `aria-details` attribute to the SVG so that assistive tech
knows what it is.

New version

![image](https://github.com/Unleash/unleash/assets/17786332/54833996-41ff-4d5c-9c62-8eb36aa065c6)
This commit is contained in:
Thomas Heartman 2024-01-08 09:49:13 +05:30 committed by GitHub
parent c9eac6edc3
commit c6f1f44e64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 155 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/assets/img/changeRequestProcessWithSchedule.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 391 KiB

192
frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx
View File

@ -10,6 +10,8 @@ import {
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HelpOutline } from '@mui/icons-material'; import { HelpOutline } from '@mui/icons-material';
import { ReactComponent as ChangeRequestProcessImage } from 'assets/img/changeRequestProcess.svg'; import { ReactComponent as ChangeRequestProcessImage } from 'assets/img/changeRequestProcess.svg';
import { useUiFlag } from 'hooks/useUiFlag';
import { ReactComponent as ChangeRequestProcessWithScheduleImage } from 'assets/img/changeRequestProcessWithSchedule.svg';
type IChangeRequestProcessHelpProps = {}; type IChangeRequestProcessHelpProps = {};
@ -19,6 +21,11 @@ export const ChangeRequestProcessHelp: VFC<IChangeRequestProcessHelpProps> =
const theme = useTheme(); const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md')); const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const showScheduleInformation = useUiFlag(
'scheduledConfigurationChanges',
);
const descriptionId = 'change-request-process-description';
return ( return (
<> <>
@ -50,59 +57,168 @@ export const ChangeRequestProcessHelp: VFC<IChangeRequestProcessHelpProps> =
}} }}
onClose={() => setIsOpen(false)} onClose={() => setIsOpen(false)}
> >
<Box sx={{ p: { xs: 2, md: 4 }, maxWidth: 920 }}> <Box
sx={{ p: { xs: 2, md: 4 }, maxWidth: 920 }}
id={descriptionId}
>
<Typography variant='h3'> <Typography variant='h3'>
Change request process: Change request process:
</Typography> </Typography>
<Typography variant='body2'> <Typography variant='body2'>
<ol> <ol>
<li> <li>
When changes are detected they are added When changes are detected they are added to
into a draft mode a draft.
</li> </li>
<li> <li>
The next step is for those changes to be The user can submit the changes for review
sent for review or discard them.
<ul>
<li>
Once submitted, the changes are
visible to everyone.
</li>
</ul>
</li> </li>
<li> <li>
These changes can be seen by everyone but A user with the{' '}
only who has{' '}
<strong>“Review change request”</strong>{' '} <strong>“Review change request”</strong>{' '}
permission can Approve them permission can approve or reject the
changes.
<ul>
<li>
The user who created the change
request can cancel it at this stage.
</li>
<li>
Rejecting or canceling the changes
will close the change request.
</li>
</ul>
</li> </li>
<ul> <ConditionallyRender
<li> condition={showScheduleInformation}
If changes are Approved then someone who show={
has{' '} <>
<strong> <li>
“Apply/Reject change request” Once approved, a user with the{' '}
</strong>{' '} <strong>
permission needs to apply these changes “Apply/Reject change
to be live on the feature toggles and request”
request is Closed </strong>{' '}
</li> permission can apply, schedule,
<li> or reject the changes.
If changes are Rejected bu someone who <ul>
has{' '} <li>
<strong> If applied, the changes
“Apply/Reject change request” will take effect and the
</strong>{' '} change request will be
permission or an admin then change closed.
request goes automatically to Rejected </li>
and request is Closed. <li>
</li> If scheduled, Unleash
<li> will attempt to apply
If changes are Cancelled by the author the changes at the
or an admin then change request goes scheduled date and time.
automatically to Cancelled and request </li>
is Closed. <li>
</li> The user who created the
</ul> change request can
cancel the changes up
until they are applied
or scheduled.
</li>
</ul>
</li>
<li>
A user with the{' '}
<strong>
“Apply/Reject change
request”
</strong>{' '}
permission can reschedule,
reject, or immediately apply a
scheduled change request.
<ul>
<li>
If any of the flags or
strategies in the change
request are archived or
deleted (outside of the
change request), thus
creating a conflict,
Unleash will send an
email out to the change
request author and to
the user who (last)
scheduled the change
request.
</li>
<li>
If the scheduled changes
contain any conflicts,
Unleash will refuse to
apply them.
</li>
<li>
If the user who
scheduled the changes is
removed from this
Unleash instance, the
scheduled changes will
also not be applied.
</li>
</ul>
</li>
</>
}
elseShow={
<li>
Once approved, a user with the{' '}
<strong>
“Apply/Reject change request”
</strong>{' '}
permission can apply or reject the
changes.
<ul>
<li>
Once applied, the changes
will take effect and the
change request will be
closed.
</li>
<li>
The user who created the
change request can cancel
the changes up until they
are applied.
</li>
</ul>
</li>
}
/>
</ol> </ol>
</Typography> </Typography>
<Box sx={{ mt: 3 }}> <Box sx={{ mt: 3 }}>
<ChangeRequestProcessImage <ConditionallyRender
style={{ maxWidth: 'calc(100vw - 4rem)' }} condition={showScheduleInformation}
show={
<ChangeRequestProcessWithScheduleImage
aria-details={descriptionId}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
}
elseShow={
<ChangeRequestProcessImage
aria-details={descriptionId}
style={{
maxWidth: 'calc(100vw - 4rem)',
}}
/>
}
/> />
</Box> </Box>
</Box> </Box>