From 8ec9080c23f222927ff03d17c2f60dbd5105431f Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Thu, 17 Aug 2023 14:21:37 +0200 Subject: [PATCH 1/4] fix: navigation button spacing --- .../component/admin/menu/AdminTabsMenu.tsx | 4 +- .../component/admin/menu/CenteredNavLink.tsx | 50 ++++++------------- .../Header/NavigationMenu/NavigationMenu.tsx | 2 +- 3 files changed, 19 insertions(+), 37 deletions(-) diff --git a/frontend/src/component/admin/menu/AdminTabsMenu.tsx b/frontend/src/component/admin/menu/AdminTabsMenu.tsx index 685f4f76a278..8140bb0f9d61 100644 --- a/frontend/src/component/admin/menu/AdminTabsMenu.tsx +++ b/frontend/src/component/admin/menu/AdminTabsMenu.tsx @@ -1,4 +1,4 @@ -import { useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import { Paper, styled, Tab, Tabs } from '@mui/material'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { CenteredNavLink } from './CenteredNavLink'; @@ -23,6 +23,7 @@ const StyledBadgeContainer = styled('div')(({ theme }) => ({ export const AdminTabsMenu: VFC = () => { const { uiConfig, isPro, isOss } = useUiConfig(); const { pathname } = useLocation(); + const navigate = useNavigate(); const activeTab = pathname.split('/')[2]; @@ -55,6 +56,7 @@ export const AdminTabsMenu: VFC = () => { > {tabs.map(tab => ( { - 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 ( - createNavLinkStyle({ isActive, theme })} - > - {children} - - ); + return {children}; }; diff --git a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx index da60c200cb80..56b538a987a7 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} > Date: Thu, 17 Aug 2023 14:24:22 +0200 Subject: [PATCH 2/4] fix: navigation padding --- frontend/src/component/admin/network/Network.tsx | 1 + frontend/src/component/admin/roles/RolesPage.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/frontend/src/component/admin/network/Network.tsx b/frontend/src/component/admin/network/Network.tsx index a6fa643b24c5..33d32d621632 100644 --- a/frontend/src/component/admin/network/Network.tsx +++ b/frontend/src/component/admin/network/Network.tsx @@ -43,6 +43,7 @@ export const Network = () => { {label} } + sx={{ padding: 0 }} /> ))} diff --git a/frontend/src/component/admin/roles/RolesPage.tsx b/frontend/src/component/admin/roles/RolesPage.tsx index e708b02e9834..681ae9e6d5de 100644 --- a/frontend/src/component/admin/roles/RolesPage.tsx +++ b/frontend/src/component/admin/roles/RolesPage.tsx @@ -97,6 +97,7 @@ export const RolesPage = () => { } + sx={{ padding: 0 }} /> ))} From 2a7e977207ee957086de41260b36032a18c1416f Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Thu, 17 Aug 2023 14:54:07 +0200 Subject: [PATCH 3/4] fix: billing link --- frontend/src/component/admin/adminRoutes.ts | 2 +- .../src/component/admin/invoice/InvoiceList.tsx | 2 +- frontend/src/component/admin/menu/AdminTabsMenu.tsx | 3 +-- frontend/src/component/admin/useAdminRoutes.ts | 13 ++++++++++++- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/frontend/src/component/admin/adminRoutes.ts b/frontend/src/component/admin/adminRoutes.ts index ff5e7916ed04..eed5467cd115 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 5e1450959948..44924b449af4 100644 --- a/frontend/src/component/admin/invoice/InvoiceList.tsx +++ b/frontend/src/component/admin/invoice/InvoiceList.tsx @@ -115,7 +115,7 @@ const InvoiceList = () => { } - elseShow={
{isLoaded && 'No invoices to show.'}
} + elseShow={{isLoaded && 'No invoices to show.'}} /> ); }; diff --git a/frontend/src/component/admin/menu/AdminTabsMenu.tsx b/frontend/src/component/admin/menu/AdminTabsMenu.tsx index 8140bb0f9d61..81c758984b45 100644 --- a/frontend/src/component/admin/menu/AdminTabsMenu.tsx +++ b/frontend/src/component/admin/menu/AdminTabsMenu.tsx @@ -1,4 +1,4 @@ -import { useLocation, useNavigate } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { Paper, styled, Tab, Tabs } from '@mui/material'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; import { CenteredNavLink } from './CenteredNavLink'; @@ -23,7 +23,6 @@ const StyledBadgeContainer = styled('div')(({ theme }) => ({ export const AdminTabsMenu: VFC = () => { const { uiConfig, isPro, isOss } = useUiConfig(); const { pathname } = useLocation(); - const navigate = useNavigate(); const activeTab = pathname.split('/')[2]; diff --git a/frontend/src/component/admin/useAdminRoutes.ts b/frontend/src/component/admin/useAdminRoutes.ts index 61b85f11de4e..1e4b529f8670 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( From 3d17f6da6b34c3fa0c255ec3bb459359cb727a69 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech Date: Fri, 18 Aug 2023 09:17:00 +0200 Subject: [PATCH 4/4] fix: formatting --- frontend/src/component/admin/invoice/InvoiceList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx index 44924b449af4..a690f43536f9 100644 --- a/frontend/src/component/admin/invoice/InvoiceList.tsx +++ b/frontend/src/component/admin/invoice/InvoiceList.tsx @@ -115,7 +115,9 @@ const InvoiceList = () => { } - elseShow={{isLoaded && 'No invoices to show.'}} + elseShow={ + {isLoaded && 'No invoices to show.'} + } /> ); };