From 5d1a8ca735b0745a5549c67fd1b228898c5a9b7f Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Thu, 6 Nov 2025 13:12:58 +0100 Subject: [PATCH] chore: add Change Requests to sidebar and fix command menu icon (#10932) Adds the new change request overview to the sidebar and fixes the entry in the command bar to use the right title and icon. image image Additionally, standardize the change requests icon. Instead of using a custom one from a svg, let's use the material icon (which is the same, just -90deg rotated and flipped around an axis) This standardization, makes the icon a tiny bit smaller in the new project modal, but it's the same size (20x20) as the other icons, so I don't think anyone's gonna notice or care, and I think it's better to use the basic material icon. Of course, we could scale it up (and add a `scale` prop to the change request icon), but I'd rather leave it out for consistency and simplicity for now. old: image new: image As for the scale, I've set it to 1.1, because that makes it damn near identical on the change request page (where I've also updated the raw svg to the new icon) (old one on left, new one on right): image --- frontend/src/assets/icons/merge.svg | 3 --- .../ChangeRequestOverview.tsx | 8 ++----- .../ChangeRequestReviewStatus.tsx | 8 ++----- .../ChangeRequestIcon/ChangeRequestIcon.tsx | 6 +++++ .../NavigationSidebar/IconRenderer.tsx | 2 ++ .../NavigationSidebar/NavigationList.tsx | 13 ++++++++--- .../__snapshots__/routes.test.tsx.snap | 11 +++++++++ frontend/src/component/menu/routes.ts | 23 +++++++++---------- .../CreateProjectDialog.tsx | 2 +- 9 files changed, 45 insertions(+), 31 deletions(-) delete mode 100644 frontend/src/assets/icons/merge.svg create mode 100644 frontend/src/component/common/ChangeRequestIcon/ChangeRequestIcon.tsx diff --git a/frontend/src/assets/icons/merge.svg b/frontend/src/assets/icons/merge.svg deleted file mode 100644 index b7a15a8864..0000000000 --- a/frontend/src/assets/icons/merge.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx index ec1f5c8825..ddcf4eb472 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestOverview.tsx @@ -9,7 +9,6 @@ import { import { type FC, useContext, useState } from 'react'; import { useChangeRequest } from 'hooks/api/getters/useChangeRequest/useChangeRequest'; import { ChangeRequestHeader } from './ChangeRequestHeader/ChangeRequestHeader.tsx'; -import { ReactComponent as ApprovedIcon } from 'assets/icons/merge.svg'; import { ChangeRequestTimeline, type ISuggestChangeTimelineProps, @@ -42,6 +41,7 @@ import type { PlausibleChangeRequestState } from '../changeRequest.types'; import { useNavigate } from 'react-router-dom'; import { useActionableChangeRequests } from 'hooks/api/getters/useActionableChangeRequests/useActionableChangeRequests'; import { ChangeRequestRequestedApprovers } from './ChangeRequestRequestedApprovers/ChangeRequestRequestedApprovers.tsx'; +import { ChangeRequestIcon } from 'component/common/ChangeRequestIcon/ChangeRequestIcon.tsx'; const breakpoint = 'md'; @@ -522,11 +522,7 @@ export const ChangeRequestOverview: FC = () => { - + diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx index 61357d9fa8..a23c5f5ecb 100644 --- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx +++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx @@ -7,7 +7,6 @@ import { Typography, useTheme, } from '@mui/material'; -import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg'; import { useLocationSettings } from 'hooks/useLocationSettings'; import { StyledOuterContainer, @@ -35,6 +34,7 @@ import type { } from 'component/changeRequest/changeRequest.types'; import { getBrowserTimezone } from './utils.ts'; import { formatDateYMDHMS } from 'utils/formatDate'; +import { ChangeRequestIcon } from 'component/common/ChangeRequestIcon/ChangeRequestIcon.tsx'; interface ISuggestChangeReviewsStatusProps { changeRequest: ChangeRequestType; @@ -82,11 +82,7 @@ export const ChangeRequestReviewStatus: FC< - + { @@ -40,7 +39,6 @@ export const PrimaryNavigationList: FC<{ onClick: (activeItem: string) => void; activeItem?: string; }> = ({ mode, setMode, onClick, activeItem }) => { - const { routes } = useRoutes(); const PrimaryListItem = ({ href, text, @@ -55,14 +53,23 @@ export const PrimaryNavigationList: FC<{ /> ); - const { isOss } = useUiConfig(); + const { isOss, isEnterprise } = useUiConfig(); const impactMetricsEnabled = useUiFlag('impactMetrics'); + const globalChangeRequestListEnabled = useUiFlag('globalChangeRequestList'); + const showChangeRequestList = + isEnterprise() && globalChangeRequestListEnabled; return ( + {showChangeRequestList ? ( + + ) : null} {!isOss() ? ( diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap index 2ab1f09d71..bc9131845e 100644 --- a/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap +++ b/frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap @@ -108,6 +108,17 @@ exports[`returns all baseRoutes 1`] = ` "title": "Flags overview", "type": "protected", }, + { + "component": [Function], + "enterprise": true, + "flag": "globalChangeRequestList", + "menu": { + "primary": true, + }, + "path": "/change-requests", + "title": "Change Requests", + "type": "protected", + }, { "component": { "$$typeof": Symbol(react.lazy), diff --git a/frontend/src/component/menu/routes.ts b/frontend/src/component/menu/routes.ts index aa859e02b0..ce6969a04d 100644 --- a/frontend/src/component/menu/routes.ts +++ b/frontend/src/component/menu/routes.ts @@ -142,6 +142,17 @@ export const routes: IRoute[] = [ menu: { primary: true }, }, + // Global change request overview + { + path: '/change-requests', + title: 'Change Requests', + component: ChangeRequests, + type: 'protected', + menu: { primary: true }, + flag: 'globalChangeRequestList', + enterprise: true, + }, + // Playground { path: '/playground', @@ -479,18 +490,6 @@ export const routes: IRoute[] = [ menu: {}, }, - // My change requests - { - path: '/change-requests', - title: 'Change Requests', - component: ChangeRequests, - type: 'protected', - menu: {}, - flag: 'globalChangeRequestList', - hidden: true, - enterprise: true, - }, - // Admin { path: '/admin/*', diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx index 5fffc40d02..ed58322c37 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/CreateProjectDialog.tsx @@ -1,5 +1,4 @@ import { formatUnknownError } from 'utils/formatUnknownError'; -import { ReactComponent as ChangeRequestIcon } from 'assets/icons/merge.svg'; import EnvironmentsIcon from '@mui/icons-material/CloudCircle'; import StickinessIcon from '@mui/icons-material/FormatPaint'; import ProjectModeIcon from '@mui/icons-material/Adjust'; @@ -27,6 +26,7 @@ import { useStickinessOptions } from 'hooks/useStickinessOptions'; import { ChangeRequestTableConfigButton } from './ConfigButtons/ChangeRequestTableConfigButton.tsx'; import { StyledDefinitionList } from './CreateProjectDialog.styles'; import { ProjectIcon } from 'component/common/ProjectIcon/ProjectIcon'; +import { ChangeRequestIcon } from 'component/common/ChangeRequestIcon/ChangeRequestIcon.tsx'; interface ICreateProjectDialogProps { open: boolean;