mirror of
https://github.com/Unleash/unleash.git
synced 2025-11-10 01:19:53 +01:00
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" />
This commit is contained in:
Thomas Heartman
GitHub
parent
2f25f5fd8a
commit
5d1a8ca735
@ -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>
|
||||
|
Before Width: | Height: | Size: 319 B |
@ -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
|
||||
style={{
|
||||
transform: `scale(1.5)`,
|
||||
}}
|
||||
/>
|
||||
<ChangeRequestIcon />
|
||||
</StyledButtonContainer>
|
||||
<StyledBox>
|
||||
<StyledTypography>
|
||||
|
||||
@ -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
|
||||
style={{
|
||||
transform: `scale(1.5)`,
|
||||
}}
|
||||
/>
|
||||
<ChangeRequestIcon />
|
||||
</StyledButtonContainer>
|
||||
<StyledReviewStatusContainer
|
||||
sx={{
|
||||
|
||||
@ -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)`,
|
||||
});
|
||||
@ -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,
|
||||
|
||||
@ -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' />
|
||||
|
||||
@ -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),
|
||||
|
||||
@ -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/*',
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user