1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +01:00

fix: add feature toggles and projects to mobile navigation (#328)

* fix: add feature toggles and projects to mobile navigation

* fix: update mobile navigation
This commit is contained in:
Fredrik Strand Oseberg 2021-08-26 09:43:55 +02:00 committed by GitHub
parent cf990307d3
commit 260cec68f3
6 changed files with 35 additions and 17 deletions

View File

@ -114,6 +114,8 @@ const FeatureToggleList = ({
);
};
const headerTitle = archive ? 'Archived Features' : 'Features';
return (
<div className={styles.featureContainer}>
<div className={styles.searchBarContainer}>
@ -125,7 +127,7 @@ const FeatureToggleList = ({
})}
/>
<ConditionallyRender
condition={!mobileView}
condition={!mobileView && !archive}
show={<Link to="/archive">Archive</Link>}
/>
</div>
@ -134,7 +136,7 @@ const FeatureToggleList = ({
headerContent={
<HeaderTitle
loading={loading}
title="Feature toggles"
title={headerTitle}
actions={
<div className={styles.actionsContainer}>
<ConditionallyRender

View File

@ -67,7 +67,7 @@ exports[`renders correctly with one feature 1`] = `
<h2
className="MuiTypography-root makeStyles-headerTitle-14 MuiTypography-h2"
>
Feature toggles
Features
</h2>
</div>
<div
@ -318,7 +318,7 @@ exports[`renders correctly with one feature without permissions 1`] = `
<h2
className="MuiTypography-root makeStyles-headerTitle-14 MuiTypography-h2"
>
Feature toggles
Features
</h2>
</div>
<div

View File

@ -53,6 +53,7 @@ const Header = () => {
const filteredMainRoutes = {
mainNavRoutes: routes.mainNavRoutes.filter(filterByFlags(flags)),
mobileRoutes: routes.mobileRoutes.filter(filterByFlags(flags)),
adminRoutes: routes.adminRoutes,
};

View File

@ -5,7 +5,9 @@ Array [
Object {
"component": [Function],
"layout": "main",
"menu": Object {},
"menu": Object {
"mobile": true,
},
"path": "/features",
"title": "Feature Toggles",
"type": "protected",
@ -15,6 +17,7 @@ Array [
"layout": "main",
"menu": Object {
"advanced": true,
"mobile": true,
},
"path": "/strategies",
"title": "Strategies",
@ -43,6 +46,7 @@ Array [
"layout": "main",
"menu": Object {
"advanced": true,
"mobile": true,
},
"path": "/applications",
"title": "Applications",
@ -54,6 +58,7 @@ Array [
"layout": "main",
"menu": Object {
"advanced": true,
"mobile": true,
},
"path": "/context",
"title": "Context Fields",
@ -63,7 +68,9 @@ Array [
"component": [Function],
"flag": "P",
"layout": "main",
"menu": Object {},
"menu": Object {
"mobile": true,
},
"path": "/projects",
"title": "Projects",
"type": "protected",
@ -73,6 +80,7 @@ Array [
"layout": "main",
"menu": Object {
"advanced": true,
"mobile": true,
},
"path": "/tag-types",
"title": "Tag types",
@ -84,6 +92,7 @@ Array [
"layout": "main",
"menu": Object {
"advanced": true,
"mobile": true,
},
"path": "/addons",
"title": "Addons",
@ -94,6 +103,7 @@ Array [
"layout": "main",
"menu": Object {
"advanced": true,
"mobile": true,
},
"path": "/reporting",
"title": "Reporting",

View File

@ -62,7 +62,7 @@ export const DrawerMenu = ({
</div>
<Divider />
<List className={styles.drawerList}>
{routes.mainNavRoutes.map(item => (
{routes.mobileRoutes.map(item => (
<NavigationLink
handleClose={() => toggleDrawer()}
path={item.path}
@ -93,7 +93,10 @@ export const DrawerMenu = ({
<Divider />
<div className={styles.iconLinkList}>
{renderLinks()}
<a className={styles.navigationLink} href={`${getBasePath()}/logout`}>
<a
className={styles.iconLink}
href={`${getBasePath()}/logout`}
>
<ExitToApp className={styles.navigationIcon} />
Sign out
</a>

View File

@ -58,7 +58,7 @@ export const routes = [
component: Features,
type: 'protected',
layout: 'main',
menu: {},
menu: { mobile: true },
},
// Strategies
@ -86,7 +86,7 @@ export const routes = [
component: Strategies,
type: 'protected',
layout: 'main',
menu: { advanced: true },
menu: { mobile: true, advanced: true },
},
// History
@ -143,7 +143,7 @@ export const routes = [
component: Applications,
type: 'protected',
layout: 'main',
menu: { advanced: true },
menu: { mobile: true, advanced: true },
},
// Context
@ -172,7 +172,7 @@ export const routes = [
type: 'protected',
flag: C,
layout: 'main',
menu: { advanced: true },
menu: { mobile: true, advanced: true },
},
// Project
@ -256,7 +256,7 @@ export const routes = [
flag: P,
type: 'protected',
layout: 'main',
menu: {},
menu: { mobile: true },
},
{
@ -283,7 +283,7 @@ export const routes = [
component: ListTagTypes,
type: 'protected',
layout: 'main',
menu: { advanced: true },
menu: { mobile: true, advanced: true },
},
{
@ -331,7 +331,7 @@ export const routes = [
hidden: false,
type: 'protected',
layout: 'main',
menu: { advanced: true },
menu: { mobile: true, advanced: true },
},
{
path: '/reporting',
@ -339,7 +339,7 @@ export const routes = [
component: Reporting,
type: 'protected',
layout: 'main',
menu: { advanced: true },
menu: { mobile: true, advanced: true },
},
// Admin
{
@ -349,7 +349,7 @@ export const routes = [
component: AdminApi,
type: 'protected',
layout: 'main',
menu: { advanced: true, adminSettings: true },
menu: { mobile: true, advanced: true, adminSettings: true },
},
{
path: '/admin/users',
@ -434,10 +434,12 @@ export const baseRoutes = routes
const computeRoutes = () => {
const mainNavRoutes = baseRoutes.filter(route => route.menu.advanced);
const adminRoutes = routes.filter(route => route.menu.adminSettings);
const mobileRoutes = routes.filter(route => route.menu.mobile);
const computedRoutes = {
mainNavRoutes,
adminRoutes,
mobileRoutes,
};
return () => {
return computedRoutes;