chore: update some Navigation prop names

Orfium · Feb 20, 2024 · fd8f604 · fd8f604
1 parent 36a10ca
commit fd8f604
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 37 deletions.
diff --git a/documentation/docs/api/Components/Navigation.mdx b/documentation/docs/api/Components/Navigation.mdx
@@ -28,7 +28,7 @@ Top-to-bottom, it consists of :
 - A **list of icon links** corresponding to all the Orfium products that are available to the user. The currently used product
   icon is highlighted.
 - An **extra button** (![admin button](/img/admin_button.png)) that when clicked will navigate to `/admin` (configurable by `adminNavigationURLSegment`) and toggle
-  the contents of the [**main navigation section**](#local-navigation-drawer) between the admin-only (`adminNavigation`) and the regular navigation (`regularNavigation`) menu. **(Admin users only)**
+  the contents of the [**main navigation section**](#local-navigation-drawer) between the admin-only (`adminMenuItems`) and the regular navigation (`menuItems`) menu. **(Admin users only)**
 
 ### Local navigation drawer
 
@@ -67,5 +67,5 @@ URL path.
 <Type />
 
 :::tip
-Memoising the values of `regularNavigation`, `adminNavigation` and `extras` will optimise performance.
+Memoising the values of `menuItems`, `adminMenuItems` and `extras` will optimise performance.
 :::
diff --git a/documentation/docs/api/_type-definitions/NavigationProps.md b/documentation/docs/api/_type-definitions/NavigationProps.md
@@ -1,11 +1,11 @@
 | Name                         | Type                                                                                                                                                                                                 |
 | :--------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `navigationHeader`           | `string`                                                                                                                                                                                             |
-| `regularNavigation`          | <code>[MenuItem](../Types/MenuItem)[]</code>                                                                                                                                                         |
-| `userIsAdmin?`               | `boolean` _(default: `false`)_                                                                                                                                                                       |
+| `header`                     | `string`                                                                                                                                                                                             |
+| `menuItems`                  | <code>[MenuItem](../Types/MenuItem)[]</code>                                                                                                                                                         |
+| `enableAdminMode?`           | `boolean` _(default: `false`)_                                                                                                                                                                       |
 | `hideOrgSwitcher?`           | `boolean` _(default: `false`)_                                                                                                                                                                       |
-| `adminNavigationHeader?`     | `string`                                                                                                                                                                                             |
-| `adminNavigation?`           | <code>[MenuItem](../Types/MenuItem)[]</code>                                                                                                                                                         |
+| `adminHeader?`               | `string`                                                                                                                                                                                             |
+| `adminMenuItems?`            | <code>[MenuItem](../Types/MenuItem)[]</code>                                                                                                                                                         |
 | `adminNavigationURLSegment?` | `string`                                                                                                                                                                                             |
 | `adminButtonTooltipText?`    | `string`                                                                                                                                                                                             |
 | `extras?`                    | <pre>\{ <br/> title: string; <br/> menuItems: ([Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys)\<[MenuItem](../Types/MenuItem), 'children'\>)[] <br/>\}[]</pre> |
diff --git a/src/ui/Navigation/Navigation.tsx b/src/ui/Navigation/Navigation.tsx
@@ -5,33 +5,33 @@ import { useOrfiumProducts, useOrganizations } from '../../hooks';
 import Drawer from './components/Drawer';
 import GlobalNav from './components/GlobalNav';
 import { Wrapper } from './Navigation.styles';
-import { MenuItem } from './types';
+import { type MenuItem } from './types';
 
 export type NavigationProps = {
-  regularNavigation: MenuItem[];
-  navigationHeader: string;
-  userIsAdmin?: boolean;
-  hideOrgSwitcher?: boolean;
-  adminNavigation?: MenuItem[];
-  adminNavigationHeader?: string;
+  header: string;
+  menuItems: MenuItem[];
+  enableAdminMode?: boolean;
+  adminHeader?: string;
+  adminMenuItems?: MenuItem[];
   adminNavigationURLSegment?: string;
   adminButtonTooltipText?: string;
+  hideOrgSwitcher?: boolean;
   extras?: { title: string; menuItems: Omit<MenuItem, 'children'>[] }[];
 };
 
 const EMPTY_ADMIN_NAVIGATION: MenuItem[] = [];
 
 export function Navigation(props: NavigationProps) {
   const {
-    regularNavigation,
-    adminNavigation,
+    menuItems,
+    adminMenuItems,
     adminNavigationURLSegment = '/admin',
     adminButtonTooltipText = 'Admin Settings',
-    navigationHeader,
-    adminNavigationHeader,
+    header,
+    adminHeader,
     extras,
     hideOrgSwitcher = false,
-    userIsAdmin = false,
+    enableAdminMode = false,
   } = props;
 
   const theme = useTheme();
@@ -49,7 +49,7 @@ export function Navigation(props: NavigationProps) {
   }, [breakpoints.des1200]);
 
   const isDesktop = breakpoints.des1200;
-  const adminNavigationIsActive = match?.url === adminNavigationURLSegment && userIsAdmin;
+  const adminNavigationIsActive = match?.url === adminNavigationURLSegment && enableAdminMode;
 
   return (
     <Wrapper
@@ -59,7 +59,7 @@ export function Navigation(props: NavigationProps) {
       <GlobalNav
         theme={theme}
         isDesktop={isDesktop}
-        userIsAdmin={userIsAdmin}
+        enableAdminMode={enableAdminMode}
         adminNavigationIsActive={adminNavigationIsActive}
         adminNavigationURLSegment={adminNavigationURLSegment}
         setExpanded={setExpanded}
@@ -68,15 +68,13 @@ export function Navigation(props: NavigationProps) {
       />
       <Drawer
         theme={theme}
-        menuItems={
-          adminNavigationIsActive ? adminNavigation || EMPTY_ADMIN_NAVIGATION : regularNavigation
-        }
+        menuItems={adminNavigationIsActive ? adminMenuItems || EMPTY_ADMIN_NAVIGATION : menuItems}
         expanded={expanded}
         switchOrganization={switchOrganization}
         organizations={organizations}
         selectedOrganization={selectedOrganization}
         hideOrgSwitcher={hideOrgSwitcher}
-        navigationHeader={adminNavigationIsActive ? adminNavigationHeader : navigationHeader}
+        header={adminNavigationIsActive ? adminHeader : header}
         extras={extras}
         isDesktop={isDesktop}
       />

diff --git a/src/ui/Navigation/components/Drawer/Drawer.tsx b/src/ui/Navigation/components/Drawer/Drawer.tsx
@@ -1,9 +1,9 @@
-import { Icon, Theme } from '@orfium/ictinus';
-import { ReactNode, useMemo } from 'react';
-import { SwitchOrganization } from '../../../../providers/Organizations';
-import { Organization } from '../../../../store/organizations';
+import { Icon, type Theme } from '@orfium/ictinus';
+import { useMemo, type ReactNode } from 'react';
+import { type SwitchOrganization } from '../../../../providers/Organizations';
+import { type Organization } from '../../../../store/organizations';
 import { MenuIcon, MenuItemText } from '../../common.styles';
-import { MenuItem } from '../../types';
+import { type MenuItem } from '../../types';
 import ClientSelector from '../ClientSelector';
 import {
   DrawerContainer,
@@ -25,7 +25,7 @@ export type DrawerProps = {
   switchOrganization: SwitchOrganization;
   organizations: Organization[];
   selectedOrganization: Organization | null;
-  navigationHeader: ReactNode;
+  header: ReactNode;
   extras?: { title: string; menuItems: Omit<MenuItem, 'children'>[] }[];
   isDesktop: boolean;
 };
@@ -37,7 +37,7 @@ function Drawer(props: DrawerProps) {
     organizations,
     selectedOrganization,
     hideOrgSwitcher = false,
-    navigationHeader,
+    header,
     extras,
     isDesktop,
     expanded,
@@ -77,12 +77,12 @@ function Drawer(props: DrawerProps) {
   const mainContentElement = useMemo(() => {
     return (
       <NavElementsContainer theme={theme}>
-        <NavHeader theme={theme}>{navigationHeader}</NavHeader>
+        <NavHeader theme={theme}>{header}</NavHeader>
         <Navigation theme={theme} menuItems={menuItems} />
         {extrasElement}
       </NavElementsContainer>
     );
-  }, [extrasElement, menuItems, navigationHeader, theme]);
+  }, [extrasElement, menuItems, header, theme]);
 
   const orgSwitcherElement = useMemo(() => {
     return (

diff --git a/src/ui/Navigation/components/GlobalNav/GlobalNav.tsx b/src/ui/Navigation/components/GlobalNav/GlobalNav.tsx
@@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom';
 import AdminIcon from '../../../../assets/admin_icon.svg';
 import Logo from '../../../../assets/orfium_logo.svg';
 import BillingIcon from '../../../../assets/products/billing_icon.svg';
+import STIcon from '../../../../assets/products/sync_tracker_icon.svg';
 import { config } from '../../../../config';
 import { type Product } from '../../../../contexts/orfium-products';
 import {
@@ -18,6 +19,7 @@ import {
 
 const productIconsDict = {
   earnings: BillingIcon,
+  'sync-tracker': STIcon,
 };
 
 type GlobalNavLinkProps = {
@@ -72,7 +74,7 @@ export type GlobalNavProps = {
   isDesktop: boolean;
   setExpanded: Dispatch<SetStateAction<boolean>>;
   orfiumProducts: Product[] | null;
-  userIsAdmin: boolean;
+  enableAdminMode: boolean;
   adminNavigationIsActive: boolean;
   adminNavigationURLSegment?: string;
   adminButtonTooltipText?: string;
@@ -86,7 +88,7 @@ function GlobalNav(props: GlobalNavProps) {
     orfiumProducts,
     adminNavigationIsActive,
     adminButtonTooltipText,
-    userIsAdmin,
+    enableAdminMode,
     adminNavigationURLSegment,
   } = props;
 
@@ -131,7 +133,7 @@ function GlobalNav(props: GlobalNavProps) {
             })
           : null}
       </IconsContainer>
-      {userIsAdmin ? (
+      {enableAdminMode ? (
         <SingleIconContainer>
           <Tooltip content={adminButtonTooltipText} placement={'right'}>
             <AppIconWrapper>