From c6f1f44e64948eae73b2c730d0e944645d6075c7 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 8 Jan 2024 09:49:13 +0530 Subject: [PATCH] chore: show new change request diagram for users who are exposed to scheduled 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) --- .../img/changeRequestProcessWithSchedule.svg | 1 + .../ChangeRequestProcessHelp.tsx | 192 ++++++++++++++---- 2 files changed, 155 insertions(+), 38 deletions(-) create mode 100644 frontend/src/assets/img/changeRequestProcessWithSchedule.svg diff --git a/frontend/src/assets/img/changeRequestProcessWithSchedule.svg b/frontend/src/assets/img/changeRequestProcessWithSchedule.svg new file mode 100644 index 0000000000..b64d8bbc3e --- /dev/null +++ b/frontend/src/assets/img/changeRequestProcessWithSchedule.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx index 53aba85685..f973a754ed 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestProcessHelp/ChangeRequestProcessHelp.tsx @@ -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 = {}; @@ -19,6 +21,11 @@ export const ChangeRequestProcessHelp: VFC = 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 ( <> @@ -50,59 +57,168 @@ export const ChangeRequestProcessHelp: VFC = }} onClose={() => setIsOpen(false)} > - + Change request process:
  1. - When changes are detected they are added - into a draft mode + When changes are detected they are added to + a draft.
  2. - The next step is for those changes to be - sent for review + The user can submit the changes for review + or discard them. +
      +
    • + Once submitted, the changes are + visible to everyone. +
      • +
  3. - These changes can be seen by everyone but - only who has{' '} + A user with the{' '} “Review change request”{' '} - permission can Approve them + permission can approve or reject the + changes. +
      +
    • + The user who created the change + request can cancel it at this stage. +
      • +
    • + Rejecting or canceling the changes + will close the change request. +
      • +
    4. -
      -
    • - If changes are Approved then someone who - has{' '} - - “Apply/Reject change request” - {' '} - permission needs to apply these changes - to be live on the feature toggles and - request is Closed -
      • -
    • - If changes are Rejected bu someone who - has{' '} - - “Apply/Reject change request” - {' '} - permission or an admin then change - request goes automatically to Rejected - and request is Closed. -
      • -
    • - If changes are Cancelled by the author - or an admin then change request goes - automatically to Cancelled and request - is Closed. -
      • -
    + +
  4. + Once approved, a user with the{' '} + + “Apply/Reject change + request” + {' '} + permission can apply, schedule, + or reject the changes. +
      +
    • + If applied, the changes + will take effect and the + change request will be + closed. +
      • +
    • + If scheduled, Unleash + will attempt to apply + the changes at the + scheduled date and time. +
      • +
    • + The user who created the + change request can + cancel the changes up + until they are applied + or scheduled. +
      • +
    +
    5. +
  5. + A user with the{' '} + + “Apply/Reject change + request” + {' '} + permission can reschedule, + reject, or immediately apply a + scheduled change request. +
      +
    • + 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. +
      • +
    • + If the scheduled changes + contain any conflicts, + Unleash will refuse to + apply them. +
      • +
    • + If the user who + scheduled the changes is + removed from this + Unleash instance, the + scheduled changes will + also not be applied. +
      • +
    +
    6. + + } + elseShow={ +
  6. + Once approved, a user with the{' '} + + “Apply/Reject change request” + {' '} + permission can apply or reject the + changes. +
      +
    • + Once applied, the changes + will take effect and the + change request will be + closed. +
      • +
    • + The user who created the + change request can cancel + the changes up until they + are applied. +
      • +
    +
    7. + } + />
- + } + elseShow={ + + } />