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

190
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.
</li>
<li>
These changes can be seen by everyone but
only who has{' '}
<strong>“Review change request”</strong>{' '}
permission can Approve them
</li>
<ul> <ul>
<li> <li>
If changes are Approved then someone who Once submitted, the changes are
has{' '} visible to everyone.
<strong>
“Apply/Reject change request”
</strong>{' '}
permission needs to apply these changes
to be live on the feature toggles and
request is Closed
</li>
<li>
If changes are Rejected bu someone who
has{' '}
<strong>
“Apply/Reject change request”
</strong>{' '}
permission or an admin then change
request goes automatically to Rejected
and request is Closed.
</li>
<li>
If changes are Cancelled by the author
or an admin then change request goes
automatically to Cancelled and request
is Closed.
</li> </li>
</ul> </ul>
</li>
<li>
A user with the{' '}
<strong>“Review change request”</strong>{' '}
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>
<ConditionallyRender
condition={showScheduleInformation}
show={
<>
<li>
Once approved, a user with the{' '}
<strong>
“Apply/Reject change
request”
</strong>{' '}
permission can apply, schedule,
or reject the changes.
<ul>
<li>
If applied, the changes
will take effect and the
change request will be
closed.
</li>
<li>
If scheduled, Unleash
will attempt to apply
the changes at the
scheduled date and time.
</li>
<li>
The user who created the
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 }}>
<ConditionallyRender
condition={showScheduleInformation}
show={
<ChangeRequestProcessWithScheduleImage
aria-details={descriptionId}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
}
elseShow={
<ChangeRequestProcessImage <ChangeRequestProcessImage
style={{ maxWidth: 'calc(100vw - 4rem)' }} aria-details={descriptionId}
style={{
maxWidth: 'calc(100vw - 4rem)',
}}
/>
}
/> />
</Box> </Box>
</Box> </Box>