From 208ca059336d510a23e44cbc50d0674be86d52f6 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 18 Aug 2023 10:40:35 +0200
Subject: [PATCH] Update menu for billing page (#4525)

## About the changes

- [x] Show admin menu on billing page in cloud offering. Category menu
was not showing up because we have 2 different pages for billing (hosted
or not)
  - [x] Fix menu tab padding

https://linear.app/unleash/issue/1-1266/update-menu-for-billing-page
---
 frontend/src/component/admin/adminRoutes.ts   |  2 +-
 .../component/admin/invoice/InvoiceList.tsx   |  4 +-
 .../component/admin/menu/AdminTabsMenu.tsx    |  1 +
 .../component/admin/menu/CenteredNavLink.tsx  | 50 ++++++-------------
 .../src/component/admin/network/Network.tsx   |  1 +
 .../src/component/admin/roles/RolesPage.tsx   |  1 +
 .../src/component/admin/useAdminRoutes.ts     | 13 ++++-
 .../Header/NavigationMenu/NavigationMenu.tsx  |  2 +-
 8 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/frontend/src/component/admin/adminRoutes.ts b/frontend/src/component/admin/adminRoutes.ts
index ff5e7916ed..eed5467cd1 100644
--- a/frontend/src/component/admin/adminRoutes.ts
+++ b/frontend/src/component/admin/adminRoutes.ts
@@ -90,7 +90,7 @@ export const adminRoutes: INavigationMenuItem[] = [
     {
         path: '/admin/admin-invoices',
         title: 'Billing & invoices',
-        menu: { adminSettings: true, mode: ['pro'], billing: true },
+        menu: { adminSettings: true, billing: true },
         group: 'instance',
     },
     {
diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx
index 5e14509599..a690f43536 100644
--- a/frontend/src/component/admin/invoice/InvoiceList.tsx
+++ b/frontend/src/component/admin/invoice/InvoiceList.tsx
@@ -115,7 +115,9 @@ const InvoiceList = () => {
                     </div>
                 </PageContent>
             }
-            elseShow={<div>{isLoaded && 'No invoices to show.'}</div>}
+            elseShow={
+                <PageContent>{isLoaded && 'No invoices to show.'}</PageContent>
+            }
         />
     );
 };
diff --git a/frontend/src/component/admin/menu/AdminTabsMenu.tsx b/frontend/src/component/admin/menu/AdminTabsMenu.tsx
index 685f4f76a2..81c758984b 100644
--- a/frontend/src/component/admin/menu/AdminTabsMenu.tsx
+++ b/frontend/src/component/admin/menu/AdminTabsMenu.tsx
@@ -55,6 +55,7 @@ export const AdminTabsMenu: VFC = () => {
             >
                 {tabs.map(tab => (
                     <Tab
+                        sx={{ padding: 0 }}
                         key={tab.route}
                         value={tab.route?.split('/')?.[2]}
                         label={
diff --git a/frontend/src/component/admin/menu/CenteredNavLink.tsx b/frontend/src/component/admin/menu/CenteredNavLink.tsx
index 3b6c981898..b45592ad62 100644
--- a/frontend/src/component/admin/menu/CenteredNavLink.tsx
+++ b/frontend/src/component/admin/menu/CenteredNavLink.tsx
@@ -1,41 +1,21 @@
-import { Theme } from '@mui/material';
-import React, { FC } from 'react';
+import { styled } from '@mui/material';
+import { 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 = {
+const StyledNavLink = styled(NavLink)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    textDecoration: 'none',
+    color: 'inherit',
+    padding: theme.spacing(0, 5),
+    '&.active': {
         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>
-    );
+    return <StyledNavLink to={to}>{children}</StyledNavLink>;
 };
diff --git a/frontend/src/component/admin/network/Network.tsx b/frontend/src/component/admin/network/Network.tsx
index a6fa643b24..33d32d6216 100644
--- a/frontend/src/component/admin/network/Network.tsx
+++ b/frontend/src/component/admin/network/Network.tsx
@@ -43,6 +43,7 @@ export const Network = () => {
                                         <span>{label}</span>
                                     </CenteredNavLink>
                                 }
+                                sx={{ padding: 0 }}
                             />
                         ))}
                     </Tabs>
diff --git a/frontend/src/component/admin/roles/RolesPage.tsx b/frontend/src/component/admin/roles/RolesPage.tsx
index e708b02e98..681ae9e6d5 100644
--- a/frontend/src/component/admin/roles/RolesPage.tsx
+++ b/frontend/src/component/admin/roles/RolesPage.tsx
@@ -97,6 +97,7 @@ export const RolesPage = () => {
                                                 </span>
                                             </CenteredNavLink>
                                         }
+                                        sx={{ padding: 0 }}
                                     />
                                 ))}
                             </Tabs>
diff --git a/frontend/src/component/admin/useAdminRoutes.ts b/frontend/src/component/admin/useAdminRoutes.ts
index 61b85f11de..1e4b529f86 100644
--- a/frontend/src/component/admin/useAdminRoutes.ts
+++ b/frontend/src/component/admin/useAdminRoutes.ts
@@ -10,8 +10,19 @@ export const useAdminRoutes = () => {
     const showEnterpriseOptionsInPro = Boolean(
         uiConfig?.flags?.frontendNavigationUpdate
     );
+    const routes = [...adminRoutes];
 
-    return adminRoutes
+    if (uiConfig.flags.UNLEASH_CLOUD) {
+        const adminBillingMenuItem = adminRoutes.findIndex(
+            route => route.title === 'Billing & invoices'
+        );
+        routes[adminBillingMenuItem] = {
+            ...routes[adminBillingMenuItem],
+            path: '/admin/billing',
+        };
+    }
+
+    return routes
         .filter(filterByConfig(uiConfig))
         .filter(route =>
             filterAdminRoutes(
diff --git a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
index da60c200cb..56b538a987 100644
--- a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
+++ b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
@@ -98,9 +98,9 @@ export const NavigationMenu = ({
                             }
                             arrow
                             placement="left"
+                            key={option.path}
                         >
                             <MenuItem
-                                key={option.path}
                                 component={StyledLink}
                                 to={option.path}
                                 onClick={handleClose}