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.

<img width="441" height="159" alt="image"
src="https://github.com/user-attachments/assets/a3eb4fdd-f440-470b-b42f-539ec53f0aa0"
/>
<img width="269" height="163" alt="image"
src="https://github.com/user-attachments/assets/a2fdf92d-73c5-4daf-af64-f9f5cfe56834"
/>


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:
<img width="835" height="52" alt="image"
src="https://github.com/user-attachments/assets/00dc35f3-a536-4e10-8115-2a0dbde92bb1"
/>

new: 
<img width="823" height="63" alt="image"
src="https://github.com/user-attachments/assets/5870fde1-05c1-43ce-a1c1-7ddc2242fb6b"
/>



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):
<img width="500" height="796" alt="image"
src="https://github.com/user-attachments/assets/fbbbf44f-8f8d-4cb9-b466-4cf3e70bfb1a"
/>

frontend/src/assets/icons/merge.svg

@@ -1,3 +0,0 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M0.59 2.00016L2 0.590157L5.41 4.00016L4 5.41016L0.59 2.00016ZM13 11.5002L13 8.00016L7.41 8.00016L2 13.4102L0.59 12.0002L6.59 6.00016L13 6.00016L13 2.50016L17.5 7.00016L13 11.5002Z" fill="currentColor"/>
-</svg>

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 = () => {
                                 <StyledApplyInnerContainer>
                                     <StyledOuterContainer>
                                         <StyledButtonContainer>
-                                            <ApprovedIcon
+                                            <ChangeRequestIcon />
-                                                style={{
-                                                    transform: `scale(1.5)`,
-                                                }}
-                                            />
                                         </StyledButtonContainer>
                                         <StyledBox>
                                             <StyledTypography>

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<
             <StyledButtonContainer
                 {...resolveIconColors(changeRequest.state, theme)}
             >
-                <ChangesAppliedIcon
+                <ChangeRequestIcon />
-                    style={{
-                        transform: `scale(1.5)`,
-                    }}
-                />
             </StyledButtonContainer>
             <StyledReviewStatusContainer
                 sx={{

frontend/src/component/common/ChangeRequestIcon/ChangeRequestIcon.tsx

@@ -0,0 +1,6 @@
+import MergeType from '@mui/icons-material/MergeType';
+import { styled } from '@mui/material';
+
+export const ChangeRequestIcon = styled(MergeType)({
+    transform: `rotate(90deg) rotateY(180deg) scale(1.1)`,
+});

frontend/src/component/layout/MainLayout/NavigationSidebar/IconRenderer.tsx

@@ -37,6 +37,7 @@ import PlaygroundIcon from '@mui/icons-material/AutoFixNormal';
 import FlagOutlinedIcon from '@mui/icons-material/FlagOutlined';
 import RocketLaunchIcon from '@mui/icons-material/RocketLaunchOutlined';
 import BuildIcon from '@mui/icons-material/BuildOutlined';
+import { ChangeRequestIcon } from 'component/common/ChangeRequestIcon/ChangeRequestIcon';
 
 // TODO: move to routes
 const icons: Record<
@@ -87,6 +88,7 @@ const icons: Record<
     '/projects': ProjectIcon,
     '/playground': PlaygroundIcon,
     '/custom-metrics': RocketLaunchIcon,
+    '/change-requests': ChangeRequestIcon,
     GitHub: GitHubIcon,
     Documentation: LibraryBooksIcon,
     Configure: BuildIcon,

frontend/src/component/layout/MainLayout/NavigationSidebar/NavigationList.tsx

@@ -12,7 +12,6 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNewAdminMenu } from 'hooks/useNewAdminMenu';
 import { AdminMenuNavigation } from '../AdminMenu/AdminNavigationItems.tsx';
 import { ConfigurationAccordion } from './ConfigurationAccordion.tsx';
-import { useRoutes } from './useRoutes.ts';
 import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 export const OtherLinksList = () => {
@@ -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 (
         <List>
             <PrimaryListItem href='/personal' text='Dashboard' />
             <PrimaryListItem href='/projects' text='Projects' />
             <PrimaryListItem href='/search' text='Flags overview' />
+            {showChangeRequestList ? (
+                <PrimaryListItem
+                    href='/change-requests'
+                    text='Change requests'
+                />
+            ) : null}
             <PrimaryListItem href='/playground' text='Playground' />
             {!isOss() ? (
                 <PrimaryListItem href='/insights' text='Analytics' />

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),

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/*',

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;