Skip to content

Commit

Permalink
chore: show new change request diagram for users who are exposed to s…
Browse files Browse the repository at this point in the history 
…cheduled CRs (#5777)

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)
  • Loading branch information
@thomasheartman
thomasheartman authored Jan 8, 2024
1 parent c9eac6e commit c6f1f44
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 38 deletions.
1 change: 1 addition & 0 deletions frontend/src/assets/img/changeRequestProcessWithSchedule.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
192 changes: 154 additions & 38 deletions ...Settings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import {
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { HelpOutline } from '@mui/icons-material';
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 = {};

Expand All @@ -19,6 +21,11 @@ export const ChangeRequestProcessHelp: VFC<IChangeRequestProcessHelpProps> =
const theme = useTheme();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
const [isOpen, setIsOpen] = useState(false);
const showScheduleInformation = useUiFlag(
'scheduledConfigurationChanges',
);

const descriptionId = 'change-request-process-description';

return (
<>
Expand Down Expand Up @@ -50,59 +57,168 @@ export const ChangeRequestProcessHelp: VFC<IChangeRequestProcessHelpProps> =
}}
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'>
Change request process:
</Typography>
<Typography variant='body2'>
<ol>
<li>
When changes are detected they are added
into a draft mode
When changes are detected they are added to
a draft.
</li>
<li>
The next step is for those changes to be
sent for review
The user can submit the changes for review
or discard them.
<ul>
<li>
Once submitted, the changes are
visible to everyone.
</li>
</ul>
</li>
<li>
These changes can be seen by everyone but
only who has{' '}
A user with the{' '}
<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>
<ul>
<li>
If changes are Approved then someone who
has{' '}
<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>
</ul>
<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>
</Typography>
<Box sx={{ mt: 3 }}>
<ChangeRequestProcessImage
style={{ maxWidth: 'calc(100vw - 4rem)' }}
<ConditionallyRender
condition={showScheduleInformation}
show={
<ChangeRequestProcessWithScheduleImage
aria-details={descriptionId}
style={{
maxWidth: '100%',
height: 'auto',
}}
/>
}
elseShow={
<ChangeRequestProcessImage
aria-details={descriptionId}
style={{
maxWidth: 'calc(100vw - 4rem)',
}}
/>
}
/>
</Box>
</Box>
Expand Down

0 comments on commit c6f1f44

Please sign in to comment.