Convert account tabs to navigation tabs with separate routes

src/app/Routes.tsx

@@ -33,6 +33,10 @@ import { LoggedOut } from '../features/login/LoggedOut';
 import { SignUp } from '../features/signup/SignUp';
 import ORCIDLinkCreateLink from '../features/orcidlink/CreateLink';
 import { Account } from '../features/account/Account';
+import { AccountInfo } from '../features/account/AccountInfo';
+import { LinkedProviders } from '../features/account/LinkedProviders';
+import { LogInSessions } from '../features/account/LogInSessions';
+import { UseAgreements } from '../features/account/UseAgreements';
 
 export const LOGIN_ROUTE = '/login';
 export const SIGNUP_ROUTE = '/signup';
@@ -69,7 +73,22 @@ const Routes: FC = () => {
       <Route path={`${SIGNUP_ROUTE}/:step?`} element={<SignUp />} />
 
       {/* Account */}
-      <Route path="/account" element={<Authed element={<Account />} />} />
+      <Route path="/account" element={<Authed element={<Account />} />}>
+        <Route index element={<Authed element={<AccountInfo />} />} />
+        <Route path="info" element={<Authed element={<AccountInfo />} />} />
+        <Route
+          path="providers"
+          element={<Authed element={<LinkedProviders />} />}
+        />
+        <Route
+          path="sessions"
+          element={<Authed element={<LogInSessions />} />}
+        />
+        <Route
+          path="use-agreements"
+          element={<Authed element={<UseAgreements />} />}
+        />
+      </Route>
 
       {/* Navigator */}
       <Route

src/features/account/Account.tsx

@@ -1,15 +1,27 @@
 import { Container, Stack, Tab, Tabs } from '@mui/material';
 import { FC, useEffect, useState } from 'react';
-import { AccountInfo } from './AccountInfo';
-import { LinkedProviders } from './LinkedProviders';
-import { LogInSessions } from './LogInSessions';
-import { UseAgreements } from './UseAgreements';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
 
 /**
  * Main Account page with four subpages represented as tabs.
  */
 export const Account: FC = () => {
-  const [activeTab, setActiveTab] = useState(0);
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [activeTab, setActiveTab] = useState(() => {
+    switch (location.pathname) {
+      case '/account/info':
+        return 0;
+      case '/account/providers':
+        return 1;
+      case '/account/logins':
+        return 2;
+      case '/account/use-agreements':
+        return 3;
+      default:
+        return 0;
+    }
+  });
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setActiveTab(newValue);
@@ -24,70 +36,36 @@ export const Account: FC = () => {
       <Stack spacing={4}>
         <Tabs value={activeTab} onChange={handleChange}>
           <Tab
+            component="a"
             label="Account"
             id="account-tab"
             aria-controls="account-tabpanel"
+            onClick={() => navigate('info')}
           />
           <Tab
+            component="a"
             label="Linked Providers"
             id="providers-tab"
             aria-controls="providers-tabpanel"
+            onClick={() => navigate('providers')}
           />
           <Tab
+            component="a"
             label="Log In Sessions"
-            id="logins-tab"
-            aria-controls="logins-tabpanel"
+            id="sessions-tab"
+            aria-controls="sessions-tabpanel"
+            onClick={() => navigate('sessions')}
           />
           <Tab
+            component="a"
             label="Use Agreements"
             id="use-agreements-tab"
             aria-controls="use-agreements-tabpanel"
+            onClick={() => navigate('use-agreements')}
           />
         </Tabs>
-        <CustomTabPanel value={activeTab} index={0} name="account">
-          <AccountInfo />
-        </CustomTabPanel>
-        <CustomTabPanel value={activeTab} index={1} name="providers">
-          <LinkedProviders />
-        </CustomTabPanel>
-        <CustomTabPanel value={activeTab} index={2} name="logins">
-          <LogInSessions />
-        </CustomTabPanel>
-        <CustomTabPanel value={activeTab} index={3} name="use-agreements">
-          <UseAgreements />
-        </CustomTabPanel>
+        <Outlet />
       </Stack>
     </Container>
   );
 };
-
-interface TabPanelProps {
-  children?: React.ReactNode;
-  index: number;
-  value: number;
-  name: string;
-}
-
-/**
- * Tab panel wrapper that conditionally displays tab content
- * depending on the active tab.
- */
-const CustomTabPanel: FC<TabPanelProps> = ({
-  value,
-  index,
-  name,
-  children,
-  ...rest
-}) => {
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`${name}-tabpanel`}
-      aria-labelledby={`${name}-tab`}
-      {...rest}
-    >
-      {value === index && children}
-    </div>
-  );
-};

src/features/account/AccountInfo.tsx

@@ -16,7 +16,12 @@ import { FC } from 'react';
  */
 export const AccountInfo: FC = () => {
   return (
-    <Stack spacing={4}>
+    <Stack
+      spacing={4}
+      role="tabpanel"
+      id="account-tabpanel"
+      aria-labelledby="account-tab"
+    >
       <Stack direction="row" justifyContent="space-between">
         <Typography variant="h2">Edit Account</Typography>
         <Tooltip

src/features/account/LinkedProviders.tsx

@@ -36,7 +36,12 @@ const sampleProviders = [
 export const LinkedProviders: FC = () => {
   const linkedProviders = sampleProviders;
   return (
-    <Stack spacing={4}>
+    <Stack
+      spacing={4}
+      role="tabpanel"
+      id="providers-tabpanel"
+      aria-labelledby="providers-tab"
+    >
       <Stack direction="row" justifyContent="space-between">
         <Typography variant="h2">Currently Linked Providers</Typography>
         <Tooltip

src/features/account/LogInSessions.tsx

@@ -36,7 +36,12 @@ export const LogInSessions: FC = () => {
   const otherSessions: any[] = [];
 
   return (
-    <Stack spacing={4}>
+    <Stack
+      spacing={4}
+      role="tabpanel"
+      id="sessions-tabpanel"
+      aria-labelledby="sessions-tab"
+    >
       <Stack direction="row" justifyContent="space-between">
         <Typography variant="h2">My Current Log In Sessions</Typography>
         <Tooltip

src/features/account/UseAgreements.tsx

@@ -95,7 +95,12 @@ export const UseAgreements: FC = () => {
   }, [showExpired, currentPolicies]);
 
   return (
-    <Stack spacing={4}>
+    <Stack
+      spacing={4}
+      role="tabpanel"
+      id="use-agreements-tabpanel"
+      aria-labelledby="use-agreements-tab"
+    >
       <Stack direction="row" justifyContent="space-between">
         <Typography variant="h2">My Policy Agreements</Typography>
         <Tooltip
@@ -128,6 +133,7 @@ export const UseAgreements: FC = () => {
               />
               {policies.map((policy) => (
                 <Card
+                  key={policy.name}
                   className={`${classes['policy-card']} ${
                     selectedPolicy.name === policy.name &&
                     selectedPolicy.version === policy.version