feat: add custom additional drawer link (#1586)

packages/web/src/components/AdminSettingsLayout/index.tsx

@@ -15,6 +15,7 @@ import { SvgIconComponent } from '@mui/icons-material';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
 
 type SettingsLayoutProps = {
@@ -86,19 +87,11 @@ function createDrawerLinks({
   return items;
 }
 
-const drawerBottomLinks = [
-  {
-    Icon: ArrowBackIosNewIcon,
-    primary: 'adminSettingsDrawer.goBack',
-    to: '/',
-    dataTest: 'go-back-drawer-link',
-  },
-];
-
 export default function SettingsLayout({
   children,
 }: SettingsLayoutProps): React.ReactElement {
   const theme = useTheme();
+  const formatMessage = useFormatMessage();
   const currentUserAbility = useCurrentUserAbility();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
@@ -116,6 +109,15 @@ export default function SettingsLayout({
     canUpdateApp: currentUserAbility.can('update', 'App'),
   });
 
+  const drawerBottomLinks = [
+    {
+      Icon: ArrowBackIosNewIcon,
+      primary: formatMessage('adminSettingsDrawer.goBack'),
+      to: '/',
+      dataTest: 'go-back-drawer-link',
+    },
+  ];
+
   return (
     <>
       <AppBar

packages/web/src/components/Drawer/index.tsx

@@ -19,6 +19,7 @@ type DrawerLink = {
   Icon: React.ElementType;
   primary: string;
   to: string;
+  target?: '_blank';
   badgeContent?: React.ReactNode;
   dataTest?: string;
 };
@@ -69,7 +70,7 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
 
       <List sx={{ py: 0, mt: 3 }}>
         {bottomLinks.map(
-          ({ Icon, badgeContent, primary, to, dataTest }, index) => (
+          ({ Icon, badgeContent, primary, to, dataTest, target }, index) => (
             <ListItemLink
               key={`${to}-${index}`}
               icon={
@@ -77,9 +78,10 @@ export default function Drawer(props: DrawerProps): React.ReactElement {
                   <Icon htmlColor={theme.palette.primary.main} />
                 </Badge>
               }
-              primary={formatMessage(primary)}
+              primary={primary}
               to={to}
               onClick={closeOnClick}
+              target={target}
               data-test={dataTest}
             />
           )

packages/web/src/components/Layout/index.tsx

@@ -7,8 +7,10 @@ import AppsIcon from '@mui/icons-material/Apps';
 import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import HistoryIcon from '@mui/icons-material/History';
 import NotificationsIcon from '@mui/icons-material/Notifications';
+import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
 
 import * as URLS from 'config/urls';
+import useFormatMessage from 'hooks/useFormatMessage';
 import useVersion from 'hooks/useVersion';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
@@ -41,46 +43,93 @@ const drawerLinks = [
 
 type GenerateDrawerBottomLinksOptions = {
   disableNotificationsPage: boolean;
-  loading: boolean;
   notificationBadgeContent: number;
+  additionalDrawerLink?: string;
+  additionalDrawerLinkText?: string;
+  additionalDrawerLinkIcon?: string;
+  formatMessage: ReturnType<typeof useFormatMessage>;
 };
 
-const generateDrawerBottomLinks = ({
+const generateDrawerBottomLinks = async ({
   disableNotificationsPage,
-  loading,
   notificationBadgeContent = 0,
+  additionalDrawerLink,
+  additionalDrawerLinkText,
+  formatMessage,
 }: GenerateDrawerBottomLinksOptions) => {
-  if (loading || disableNotificationsPage) {
-    return [];
+  const notificationsPageLinkObject = {
+    Icon: NotificationsIcon,
+    primary: formatMessage('settingsDrawer.notifications'),
+    to: URLS.UPDATES,
+    badgeContent: notificationBadgeContent,
+  };
+
+  const hasAdditionalDrawerLink =
+    additionalDrawerLink && additionalDrawerLinkText;
+
+  const additionalDrawerLinkObject = {
+    Icon: ArrowBackIosNew,
+    primary: additionalDrawerLinkText || '',
+    to: additionalDrawerLink || '',
+    target: '_blank' as const,
+  };
+
+  const links = [];
+
+  if (!disableNotificationsPage) {
+    links.push(notificationsPageLinkObject);
   }
 
-  return [
-    {
-      Icon: NotificationsIcon,
-      primary: 'settingsDrawer.notifications',
-      to: URLS.UPDATES,
-      badgeContent: notificationBadgeContent,
-    },
-  ];
+  if (hasAdditionalDrawerLink) {
+    links.push(additionalDrawerLinkObject);
+  }
+
+  return links;
+};
+
+type Link = {
+  Icon: React.ElementType;
+  primary: string;
+  target?: '_blank';
+  to: string;
+  badgeContent?: React.ReactNode;
 };
 
 export default function PublicLayout({
   children,
 }: PublicLayoutProps): React.ReactElement {
   const version = useVersion();
-  const { config, loading } = useConfig(['disableNotificationsPage']);
+  const { config, loading } = useConfig([
+    'disableNotificationsPage',
+    'additionalDrawerLink',
+    'additionalDrawerLinkText',
+  ]);
   const theme = useTheme();
+  const formatMessage = useFormatMessage();
+  const [bottomLinks, setBottomLinks] = React.useState<Link[]>([]);
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);
 
-  const drawerBottomLinks = generateDrawerBottomLinks({
-    notificationBadgeContent: version.newVersionCount,
-    loading,
-    disableNotificationsPage: config?.disableNotificationsPage as boolean,
-  });
+  React.useEffect(() => {
+    async function perform() {
+      const newBottomLinks = await generateDrawerBottomLinks({
+        notificationBadgeContent: version.newVersionCount,
+        disableNotificationsPage: config?.disableNotificationsPage as boolean,
+        additionalDrawerLink: config?.additionalDrawerLink as string,
+        additionalDrawerLinkText: config?.additionalDrawerLinkText as string,
+        formatMessage,
+      });
+
+      setBottomLinks(newBottomLinks);
+    }
+
+    if (loading) return;
+
+    perform();
+  }, [config, loading, version.newVersionCount]);
 
   return (
     <>
@@ -93,7 +142,7 @@ export default function PublicLayout({
       <Box sx={{ display: 'flex' }}>
         <Drawer
           links={drawerLinks}
-          bottomLinks={drawerBottomLinks}
+          bottomLinks={bottomLinks}
           open={isDrawerOpen}
           onOpen={openDrawer}
           onClose={closeDrawer}

packages/web/src/components/ListItemLink/index.tsx

@@ -9,6 +9,7 @@ type ListItemLinkProps = {
   icon: React.ReactNode;
   primary: string;
   to: string;
+  target?: '_blank';
   onClick?: (event: React.SyntheticEvent) => void;
   'data-test'?: string;
 };
@@ -16,14 +17,29 @@ type ListItemLinkProps = {
 export default function ListItemLink(
   props: ListItemLinkProps
 ): React.ReactElement {
-  const { icon, primary, to, onClick, 'data-test': dataTest } = props;
+  const { icon, primary, to, onClick, 'data-test': dataTest, target } = props;
   const selected = useMatch({ path: to, end: true });
 
   const CustomLink = React.useMemo(
     () =>
       React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
         function InLineLink(linkProps, ref) {
-          return <Link ref={ref} to={to} {...linkProps} />;
+          try {
+            // challenge the link to check if it's absolute URL
+            new URL(to); // should throw an error if it's not an absolute URL
+
+            return (
+              <a
+                {...linkProps}
+                ref={ref}
+                href={to}
+                target={target}
+                rel="noopener noreferrer"
+              />
+            );
+          } catch {
+            return <Link ref={ref} {...linkProps} to={to} />;
+          }
         }
       ),
     [to]
@@ -37,6 +53,7 @@ export default function ListItemLink(
         selected={!!selected}
         onClick={onClick}
         data-test={dataTest}
+        target={target}
       >
         <ListItemIcon sx={{ minWidth: 52 }}>{icon}</ListItemIcon>
         <ListItemText

packages/web/src/components/SettingsLayout/index.tsx

@@ -9,6 +9,7 @@ import PaymentIcon from '@mui/icons-material/Payment';
 
 import * as URLS from 'config/urls';
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
+import useFormatMessage from 'hooks/useFormatMessage';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 
@@ -22,8 +23,8 @@ function createDrawerLinks({ isCloud }: { isCloud: boolean }) {
       Icon: AccountCircleIcon,
       primary: 'settingsDrawer.myProfile',
       to: URLS.SETTINGS_PROFILE,
-    }
-  ]
+    },
+  ];
 
   if (isCloud) {
     items.push({
@@ -36,19 +37,12 @@ function createDrawerLinks({ isCloud }: { isCloud: boolean }) {
   return items;
 }
 
-const drawerBottomLinks = [
-  {
-    Icon: ArrowBackIosNewIcon,
-    primary: 'settingsDrawer.goBack',
-    to: '/',
-  },
-];
-
 export default function SettingsLayout({
   children,
 }: SettingsLayoutProps): React.ReactElement {
   const { isCloud } = useAutomatischInfo();
   const theme = useTheme();
+  const formatMessage = useFormatMessage();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
 
@@ -56,6 +50,14 @@ export default function SettingsLayout({
   const closeDrawer = () => setDrawerOpen(false);
   const drawerLinks = createDrawerLinks({ isCloud });
 
+  const drawerBottomLinks = [
+    {
+      Icon: ArrowBackIosNewIcon,
+      primary: formatMessage('settingsDrawer.goBack'),
+      to: '/',
+    },
+  ];
+
   return (
     <>
       <AppBar