Add CDM NavItem and CDM Redirect

src/app/Routes.tsx

@@ -37,6 +37,9 @@ import { AccountInfo } from '../features/account/AccountInfo';
 import { LinkedProviders } from '../features/account/LinkedProviders';
 import { LogInSessions } from '../features/account/LogInSessions';
 import { UseAgreements } from '../features/account/UseAgreements';
+import { skipToken } from '@reduxjs/toolkit/dist/query';
+import { getMe } from '../common/api/authService';
+import { CDMRedirect } from '../features/cdm/CDMRedirect';
 
 export const LOGIN_ROUTE = '/login';
 export const SIGNUP_ROUTE = '/signup';
@@ -131,6 +134,11 @@ const Routes: FC = () => {
         <Route index element={<Authed element={<ORCIDLinkCreateLink />} />} />
       </Route>
 
+      {/* CDM */}
+      <Route path="/cdm">
+        <Route path="redirect" element={<Authed element={<CDMRedirect />} />} />
+      </Route>
+
       {/* IFrame Fallback Routes */}
       <Route path="/fallback">
         <Route
@@ -155,9 +163,21 @@ const Routes: FC = () => {
   );
 };
 
-export const Authed: FC<{ element: ReactElement }> = ({ element }) => {
+export const Authed: FC<{ element: ReactElement; roles?: string[] }> = ({
+  element,
+  roles,
+}) => {
   const token = useAppSelector((state) => state.auth.token);
   const location = useLocation();
+
+  const { data: me } = getMe.useQuery(token ? { token } : skipToken);
+  const myRoles = new Set([
+    ...(me?.roles.map((r) => r.id) || []),
+    ...(me?.customroles || []),
+  ]);
+  const specifiedRolesPresent =
+    roles?.length && roles.every((role) => myRoles.has(role));
+
   if (!token) {
     return (
       <Navigate
@@ -172,6 +192,10 @@ export const Authed: FC<{ element: ReactElement }> = ({ element }) => {
     );
   }
 
+  if (roles && !specifiedRolesPresent) {
+    return <PageNotFound />;
+  }
+
   return <>{element}</>;
 };
 

src/features/cdm/CDMRedirect.tsx

@@ -0,0 +1,23 @@
+import { Container, Stack } from '@mui/system';
+import { useEffect } from 'react';
+import { Loader } from '../../common/components';
+
+export const CDMRedirect = () => {
+  useEffect(() => {
+    window.location.href = `https://cdmhub.${process.env.REACT_APP_KBASE_DOMAIN}/hub`;
+  });
+  return (
+    <Container maxWidth="lg">
+      <Stack
+        direction={'row'}
+        spacing={2}
+        alignItems={'center'}
+        paddingTop={'33%'}
+        justifyContent={'center'}
+      >
+        <Loader />
+        <div>Redirecting to CDM</div>
+      </Stack>
+    </Container>
+  );
+};

src/features/layout/LeftNavBar.tsx

@@ -14,16 +14,18 @@ import {
   faQuestionCircle,
   faServer,
   faNoteSticky,
+  faDatabase,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon as FAIcon } from '@fortawesome/react-fontawesome';
 import { FC, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { getFeedsUnseenCount } from '../../common/api/feedsService';
 import { useAppSelector } from '../../common/hooks';
-import { authMe, authToken } from '../auth/authSlice';
-import { useAuthMe } from '../auth/hooks';
+import { authToken } from '../auth/authSlice';
 import classes from './LeftNavBar.module.scss';
 import { Button, Menu, MenuItem } from '@mui/material';
+import { getMe } from '../../common/api/authService';
+import { skipToken } from '@reduxjs/toolkit/dist/query';
 
 const LeftNavBar: FC = () => {
   const token = useAppSelector(authToken);
@@ -64,7 +66,14 @@ const LeftNavBar: FC = () => {
           badge={'beta'}
           badgeColor={'primary'}
         />
-        <DevNav />
+        <NavItem
+          path={'/cdm/redirect'}
+          desc="CDM"
+          icon={faDatabase}
+          badge={'alpha'}
+          badgeColor={'warning'}
+          requiredRole="CDM_JUPYTERHUB_ADMIN"
+        />
       </ul>
       <ul className={classes.nav_list}>
         <Button
@@ -144,47 +153,30 @@ const LeftNavBar: FC = () => {
   );
 };
 
-const devDomains = new Set(['', 'ci-europa.kbase.us']);
-
-/** Hidden navigation items for devs */
-const DevNav: FC = () => {
-  const me = useAppSelector(authMe);
-  useAuthMe();
-  // Show DevNav if the devDomains set contains the REACT_APP_KBASE_DOMAIN.
-  const devDomain = devDomains.has(process.env.REACT_APP_KBASE_DOMAIN || '');
-  const customroles = me && new Set(me.customroles);
-  const devRole = customroles && customroles.has('UI_COLLECTIONS');
-  const dev = devDomain || devRole;
-  if (!me || !dev) return <></>;
-  return (
-    <>
-      {/* Nothing here now, heres an example:
-      <NavItem
-        path="/collections"
-        desc="Collections"
-        icon={faLayerGroup}
-        badge={'beta'}
-        badgeColor={'primary'}
-      /> */}
-    </>
-  );
-};
-
 const NavItem: FC<{
   path: string;
+  onClick?: () => void;
   desc: string;
   icon: IconDefinition;
   badge?: number | string;
   badgeColor?: string;
-}> = ({ path, desc, icon, badge, badgeColor }) => {
+  requiredRole?: string;
+}> = ({ path, onClick, desc, icon, badge, badgeColor, requiredRole }) => {
   const location = useLocation();
+  const token = useAppSelector(authToken);
+  const { data: me } = getMe.useQuery(token ? { token } : skipToken);
+  const myRoles = new Set([
+    ...(me?.roles.map((r) => r.id) || []),
+    ...(me?.customroles || []),
+  ]);
   let itemClasses = classes.nav_item;
   if (location.pathname === path) {
     itemClasses += ` ${classes.active}`;
   }
+  if (requiredRole && !myRoles.has(requiredRole)) return <></>;
   return (
     <li className={itemClasses} key={path}>
-      <Link to={path}>
+      <Link to={path} onClick={onClick}>
         <FAIcon className={classes.nav_icon} icon={icon} />
         <span className={classes.nav_desc}>{desc}</span>
         {badge ? (