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

@@ -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',
     },
     {

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>
+            }
         />
     );
 };

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={

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>;
 };

frontend/src/component/admin/network/Network.tsx

@@ -43,6 +43,7 @@ export const Network = () => {
                                         <span>{label}</span>
                                     </CenteredNavLink>
                                 }
+                                sx={{ padding: 0 }}
                             />
                         ))}
                     </Tabs>

frontend/src/component/admin/roles/RolesPage.tsx

@@ -97,6 +97,7 @@ export const RolesPage = () => {
                                                 </span>
                                             </CenteredNavLink>
                                         }
+                                        sx={{ padding: 0 }}
                                     />
                                 ))}
                             </Tabs>

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(

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}