Feat: scheduled change request badges (#5300)

Adds a new badge to strategies that have changes in an a scheduled change request Closes # [1-1620](https://linear.app/unleash/issue/1-1620/create-a-new-badge-for-flag-that-is-part-of-scheduled-change) <img width="1671" alt="Screenshot 2023-11-09 at 11 49 53" src="https://github.com/Unleash/unleash/assets/104830839/596abbc0-f9ab-4642-9ed2-79ef50fb6c05"> --------- Signed-off-by: andreas-unleash <[email protected]> Co-authored-by: Thomas Heartman <[email protected]>
Unleash · Nov 9, 2023 · 100c22b · 100c22b
1 parent ece5a63
commit 100c22b
Show file tree

Hide file tree

Showing 5 changed files with 548 additions and 32 deletions.
diff --git a/.../src/component/changeRequest/ModifiedInChangeRequestStatusBadge/ChangesScheduledBadge.tsx b/.../src/component/changeRequest/ModifiedInChangeRequestStatusBadge/ChangesScheduledBadge.tsx
@@ -0,0 +1,40 @@
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+import { StyledLink } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/StyledRow';
+import { TooltipLink } from 'component/common/TooltipLink/TooltipLink';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { Badge } from 'component/common/Badge/Badge';
+
+export interface IChangesScheduledBadgeProps {
+    scheduledChangeRequestIds: number[];
+}
+export const ChangesScheduledBadge = ({
+    scheduledChangeRequestIds,
+}: IChangesScheduledBadgeProps) => {
+    const theme = useTheme();
+    const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const project = useRequiredPathParam('projectId');
+    if (isSmallScreen) {
+        return null;
+    }
+
+    return (
+        <Box sx={{ mr: 1.5 }}>
+            <TooltipLink
+                tooltip={
+                    <>
+                        {scheduledChangeRequestIds?.map((id, index) => (
+                            <StyledLink
+                                key={`${project}-${index}`}
+                                to={`/projects/${project}/change-requests/${id}`}
+                            >
+                                Change request #{id}
+                            </StyledLink>
+                        ))}
+                    </>
+                }
+            >
+                <Badge color='warning'>Changes Scheduled</Badge>
+            </TooltipLink>
+        </Box>
+    );
+};