1606 archivable teams adjust frontend

src/frontend/src/pages/TeamsPage/TeamPill.tsx

@@ -0,0 +1,20 @@
+import { Chip } from '@mui/material';
+import { red } from '@mui/material/colors';
+
+export const TeamPill: React.FC<{
+  displayText: string;
+}> = ({ displayText }) => {
+  return (
+    <Chip
+      size="small"
+      label={displayText}
+      variant="filled"
+      sx={{
+        fontSize: 12,
+        color: 'white',
+        backgroundColor: red[600],
+        width: 100
+      }}
+    />
+  );
+};

src/frontend/src/pages/TeamsPage/TeamSpecificPage.tsx

@@ -1,4 +1,4 @@
-import { Grid } from '@mui/material';
+import { Box, Grid, Menu, MenuItem, Stack } from '@mui/material';
 import { useSingleTeam } from '../../hooks/teams.hooks';
 import { useParams } from 'react-router-dom';
 import TeamMembersPageBlock from './TeamMembersPageBlock';
@@ -13,9 +13,11 @@ import { Delete } from '@mui/icons-material';
 import { NERButton } from '../../components/NERButton';
 import { useCurrentUser } from '../../hooks/users.hooks';
 import { isAdmin } from 'shared';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import DeleteTeamModal from './DeleteTeamModal';
 import SetTeamTypeModal from './SetTeamTypeModal';
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { TeamPill } from './TeamPill';
 
 interface ParamTypes {
   teamId: string;
@@ -27,39 +29,90 @@ const TeamSpecificPage: React.FC = () => {
   const user = useCurrentUser();
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showTeamTypeModal, setShowTeamTypeModal] = useState(false);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const dropdownOpen = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleDropdownClose = () => {
+    setAnchorEl(null);
+  };
 
   if (isError) return <ErrorPage message={error?.message} />;
   if (isLoading || !data) return <LoadingIndicator />;
 
   const DeleteButton = () => (
     <NERButton
       variant="contained"
-      disabled={!isAdmin(user.role)}
       startIcon={<Delete />}
       onClick={() => setShowDeleteModal(true)}
-      sx={{ marginRight: '10px' }}
+      disabled={!isAdmin(user.role)}
     >
       Delete
     </NERButton>
   );
 
   const SetTeamTypeButton = () => (
-    <NERButton variant="contained" disabled={!isAdmin(user.role)} onClick={() => setShowTeamTypeModal(true)}>
+    <NERButton variant="contained" onClick={() => setShowTeamTypeModal(true)} disabled={!isAdmin(user.role)}>
       Set Team Type
     </NERButton>
   );
 
+  const ArchiveTeamButton = () => (
+    <NERButton variant="contained" disabled={!isAdmin(user.role)}>
+      Archive Team
+    </NERButton>
+  );
+
+  const UnarchiveTeamButton = () => (
+    <NERButton variant="contained" disabled={!isAdmin(user.role)}>
+      Unarchive
+    </NERButton>
+  );
+
+  const TeamActionsDropdown = () => (
+    <div>
+      <NERButton
+        endIcon={<ArrowDropDownIcon style={{ fontSize: 28 }} />}
+        variant="contained"
+        id="team-actions-dropdown"
+        onClick={handleClick}
+      >
+        Actions
+      </NERButton>
+      <Menu
+        open={dropdownOpen}
+        anchorEl={anchorEl}
+        onClose={handleDropdownClose}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      >
+        <MenuItem onClick={handleDropdownClose}>
+          {data.dateArchived ? <UnarchiveTeamButton /> : <ArchiveTeamButton />}
+        </MenuItem>
+        <MenuItem onClick={handleDropdownClose}>
+          <DeleteButton />
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+
   return (
     <PageLayout
       headerRight={
-        isAdmin(user.role) && (
-          <>
-            <DeleteButton />
-            <SetTeamTypeButton />
-          </>
-        )
+        <Stack direction="row" spacing={2} justifyContent="flex-end">
+          <SetTeamTypeButton />
+          {TeamActionsDropdown()}
+        </Stack>
       }
       title={`Team ${data.teamName}`}
+      chips={
+        <Box display="flex" gap="20px">
+          <TeamPill displayText={data.dateArchived ? 'Archived' : 'Unarchived'} />
+        </Box>
+      }
       previousPages={[{ name: 'Teams', route: routes.TEAMS }]}
     >
       <Grid container spacing={2}>