Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

UI adjustments change requests (#2622)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2022-12-07 12:52:17 +01:00 committed by GitHub
parent 990b708632
commit fee95475bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 81 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/src/component/admin/menu/AdminMenu.tsx
View File

@ -1,38 +1,12 @@
import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';
import { Paper, Tab, Tabs, Theme } from '@mui/material';
import { useLocation } from 'react-router-dom';
import { Paper, Tab, Tabs } from '@mui/material';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { useInstanceStatus } from 'hooks/api/getters/useInstanceStatus/useInstanceStatus';
import { useTheme } from '@mui/material/styles';
const createNavLinkStyle = (props: {
isActive: boolean;
theme: Theme;
}): React.CSSProperties => {
const navLinkStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
textDecoration: 'none',
color: 'inherit',
padding: props.theme.spacing(1.5, 3),
};
const activeNavLinkStyle: React.CSSProperties = {
fontWeight: 'bold',
borderRadius: '3px',
padding: props.theme.spacing(1.5, 3),
};
return props.isActive
? { ...navLinkStyle, ...activeNavLinkStyle }
: navLinkStyle;
};
import { CenteredNavLink } from './CenteredNavLink';
function AdminMenu() {
const { uiConfig } = useUiConfig();
const theme = useTheme();
const { pathname } = useLocation();
const { isBilling } = useInstanceStatus();
const { flags } = uiConfig;
@ -54,28 +28,18 @@ function AdminMenu() {
<Tab
value="/admin/users"
label={
<NavLink
to="/admin/users"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/users">
<span>Users</span>
</NavLink>
</CenteredNavLink>
}
/>
{flags.UG && (
<Tab
value="/admin/groups"
label={
<NavLink
to="/admin/groups"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/groups">
<span>Groups</span>
</NavLink>
</CenteredNavLink>
}
/>
)}
@ -83,83 +47,53 @@ function AdminMenu() {
<Tab
value="/admin/roles"
label={
<NavLink
to="/admin/roles"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/roles">
<span>Project roles</span>
</NavLink>
</CenteredNavLink>
}
/>
)}
<Tab
value="/admin/api"
label={
<NavLink
to="/admin/api"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/api">
API access
</NavLink>
</CenteredNavLink>
}
/>
{uiConfig.flags.embedProxyFrontend && (
<Tab
value="/admin/cors"
label={
<NavLink
to="/admin/cors"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/cors">
CORS origins
</NavLink>
</CenteredNavLink>
}
/>
)}
<Tab
value="/admin/auth"
label={
<NavLink
to="/admin/auth"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/auth">
Single sign-on
</NavLink>
</CenteredNavLink>
}
/>
<Tab
value="/admin/instance"
label={
<NavLink
to="/admin/instance"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/instance">
Instance stats
</NavLink>
</CenteredNavLink>
}
/>
{isBilling && (
<Tab
value="/admin/billing"
label={
<NavLink
to="/admin/billing"
style={({ isActive }) =>
createNavLinkStyle({ isActive, theme })
}
>
<CenteredNavLink to="/admin/billing">
Billing
</NavLink>
</CenteredNavLink>
}
/>
)}

41
frontend/src/component/admin/menu/CenteredNavLink.tsx Normal file
View File

@ -0,0 +1,41 @@
import { Theme } from '@mui/material';
import React, { FC } from 'react';
import { NavLink } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
const createNavLinkStyle = (props: {
isActive: boolean;
theme: Theme;
}): React.CSSProperties => {
const navLinkStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
textDecoration: 'none',
color: 'inherit',
padding: props.theme.spacing(1.5, 3),
};
const activeNavLinkStyle: React.CSSProperties = {
fontWeight: 'bold',
borderRadius: '3px',
padding: props.theme.spacing(1.5, 3),
};
return props.isActive
? { ...navLinkStyle, ...activeNavLinkStyle }
: navLinkStyle;
};
export const CenteredNavLink: FC<{ to: string }> = ({ to, children }) => {
const theme = useTheme();
return (
<NavLink
to={to}
style={({ isActive }) => createNavLinkStyle({ isActive, theme })}
>
{children}
</NavLink>
);
};

8
frontend/src/component/project/Project/Project.styles.ts
View File

@ -2,7 +2,6 @@ import { makeStyles } from 'tss-react/mui';
export const useStyles = makeStyles()(theme => ({
containerStyles: {
marginTop: '1.5rem',
display: 'flex',
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
@ -32,8 +31,13 @@ export const useStyles = makeStyles()(theme => ({
},
tabButton: {
textTransform: 'none',
width: 'auto',
fontSize: '1rem',
flexGrow: 1,
flexBasis: 0,
[theme.breakpoints.down('md')]: {
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
},
[theme.breakpoints.up('md')]: {
minWidth: 160,
},

2
frontend/src/component/project/Project/Project.tsx
View File

@ -31,6 +31,7 @@ import { ProjectSettings } from './ProjectSettings/ProjectSettings';
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { FavoriteIconButton } from '../../common/FavoriteIconButton/FavoriteIconButton';
import { useFavoriteProjectsApi } from '../../../hooks/api/actions/useFavoriteProjectsApi/useFavoriteProjectsApi';
import { CenteredNavLink } from '../../admin/menu/CenteredNavLink';
const StyledDiv = styled('div')(() => ({
display: 'flex',
@ -241,6 +242,7 @@ const Project = () => {
indicatorColor="primary"
textColor="primary"
variant="scrollable"
allowScrollButtonsMobile
>
{tabs.map(tab => (
<Tab

28
frontend/src/component/project/Project/ProjectOverview.tsx
View File

@ -25,22 +25,20 @@ const ProjectOverview = () => {
}, [projectId, setLastViewed]);
return (
<div>
<div className={styles.containerStyles}>
<ProjectInfo
id={projectId}
description={description}
memberCount={members}
health={health}
featureCount={features?.length}
<div className={styles.containerStyles}>
<ProjectInfo
id={projectId}
description={description}
memberCount={members}
health={health}
featureCount={features?.length}
/>
<div className={styles.projectToggles}>
<ProjectFeatureToggles
features={features}
environments={environments}
loading={loading}
/>
<div className={styles.projectToggles}>
<ProjectFeatureToggles
features={features}
environments={environments}
loading={loading}
/>
</div>
</div>
</div>
);