From 260cec68f3e6dd7a40d283f53e20cfb012f34133 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Thu, 26 Aug 2021 09:43:55 +0200
Subject: [PATCH] fix: add feature toggles and projects to mobile navigation
 (#328)

* fix: add feature toggles and projects to mobile navigation

* fix: update mobile navigation
---
 .../FeatureToggleList/FeatureToggleList.jsx   |  6 ++++--
 .../list-component-test.jsx.snap              |  4 ++--
 frontend/src/component/menu/Header/Header.tsx |  1 +
 .../__snapshots__/routes-test.jsx.snap        | 14 +++++++++++--
 frontend/src/component/menu/drawer.jsx        |  7 +++++--
 frontend/src/component/menu/routes.js         | 20 ++++++++++---------
 6 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx
index f4be94aeca..6d9966f241 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.jsx
@@ -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
diff --git a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/list-component-test.jsx.snap b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/list-component-test.jsx.snap
index 96cc31e468..0aad65bf19 100644
--- a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/list-component-test.jsx.snap
+++ b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/list-component-test.jsx.snap
@@ -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
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 59ddbd1d6b..ff5eed4f4a 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -53,6 +53,7 @@ const Header = () => {
 
     const filteredMainRoutes = {
         mainNavRoutes: routes.mainNavRoutes.filter(filterByFlags(flags)),
+        mobileRoutes: routes.mobileRoutes.filter(filterByFlags(flags)),
         adminRoutes: routes.adminRoutes,
     };
 
diff --git a/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap b/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap
index b0638bf50c..3df1260ea4 100644
--- a/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap
+++ b/frontend/src/component/menu/__tests__/__snapshots__/routes-test.jsx.snap
@@ -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",
diff --git a/frontend/src/component/menu/drawer.jsx b/frontend/src/component/menu/drawer.jsx
index 6ea9972c33..81d6e4bb7b 100644
--- a/frontend/src/component/menu/drawer.jsx
+++ b/frontend/src/component/menu/drawer.jsx
@@ -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>
diff --git a/frontend/src/component/menu/routes.js b/frontend/src/component/menu/routes.js
index 1de66179d3..33e0a7307c 100644
--- a/frontend/src/component/menu/routes.js
+++ b/frontend/src/component/menu/routes.js
@@ -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;