diff --git a/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/AdminToolsOnboardingConfig.tsx b/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/AdminToolsOnboardingConfig.tsx index 52bcdd94a9..d68977b8eb 100644 --- a/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/AdminToolsOnboardingConfig.tsx +++ b/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/AdminToolsOnboardingConfig.tsx @@ -1,10 +1,15 @@ -import { Box, Grid, Typography } from '@mui/material'; -import OnboardingInfoSection from './OnboardingInfoSection'; -import { useAllChecklists } from '../../../hooks/onboarding.hook'; +import { Typography, Grid } from '@mui/material'; +import { Box } from '@mui/system'; import LoadingIndicator from '../../../components/LoadingIndicator'; +import { useAllChecklists } from '../../../hooks/onboarding.hook'; +import { useAllTeamTypes } from '../../../hooks/team-types.hooks'; +import { groupChecklists, sortGroupNames } from '../../../utils/onboarding.utils'; import ErrorPage from '../../ErrorPage'; -import { groupChecklists } from '../../../utils/onboarding.utils'; import { AdminChecklist } from './Checklists/AdminChecklist'; +import OnboardingInfoSection from './OnboardingInfoSection'; +import { Checklist } from 'shared'; + +type GroupedChecklists = Record; // Change made here const AdminToolsOnboardingConfig: React.FC = () => { const { @@ -14,15 +19,35 @@ const AdminToolsOnboardingConfig: React.FC = () => { error: allChecklistsError } = useAllChecklists(); + const { + data: teamTypes, + isLoading: teamTypesIsLoading, + isError: teamTypesIsError, + error: teamTypesError + } = useAllTeamTypes(); + if (allChecklistsIsError) { return ; } - if (!allChecklists || allChecklistsIsLoading) { + if (teamTypesIsError) { + return ; + } + + if (!allChecklists || allChecklistsIsLoading || !teamTypes || teamTypesIsLoading) { return ; } - const groupedChecklists = groupChecklists(allChecklists); + const existingGroupedChecklists = groupChecklists(allChecklists); + + const groupedChecklists: GroupedChecklists = teamTypes.reduce((acc, teamType) => { + acc[teamType.name] = existingGroupedChecklists[teamType.name] || []; + return acc; + }, {} as GroupedChecklists); + + groupedChecklists['General'] = existingGroupedChecklists['General'] || []; + + const sortedGroupNames = sortGroupNames(groupedChecklists); return ( @@ -32,11 +57,15 @@ const AdminToolsOnboardingConfig: React.FC = () => { - {Object.entries(groupedChecklists).map(([checklistName, checklists]) => ( - - - - ))} + {Object.entries(sortedGroupNames).map(([checklistName, checklists]) => { + const teamType = teamTypes.find((team) => team.name === checklistName); + + return ( + + + + ); + })} diff --git a/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/AdminChecklist.tsx b/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/AdminChecklist.tsx index 7c4a5a27d7..173f236d24 100644 --- a/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/AdminChecklist.tsx +++ b/src/frontend/src/pages/AdminToolsPage/OnboardingConfig/Checklists/AdminChecklist.tsx @@ -2,7 +2,7 @@ import { KeyboardArrowDown, KeyboardArrowRight } from '@mui/icons-material'; import { Grid, Typography, IconButton } from '@mui/material'; import { Box } from '@mui/system'; import { useState } from 'react'; -import { Checklist } from 'shared'; +import { Checklist, TeamType } from 'shared'; import AdminTask from './AdminTask'; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; import CreateChecklistModal from './CreateChecklistModal'; @@ -11,9 +11,10 @@ import { useToast } from '../../../../hooks/toasts.hooks'; import { useDeleteChecklist } from '../../../../hooks/onboarding.hook'; import NERDeleteModal from '../../../../components/NERDeleteModal'; -export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklistName?: string }> = ({ +export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklistName?: string; teamType?: TeamType }> = ({ parentChecklists, - checklistName + checklistName, + teamType }) => { const [showTasks, setShowTasks] = useState(false); const [showCreateModal, setShowCreateModal] = useState(false); @@ -103,8 +104,8 @@ export const AdminChecklist: React.FC<{ parentChecklists: Checklist[]; checklist setShowCreateModal(false)} - teamId={parentChecklists[0].team?.teamId} - teamTypeId={parentChecklists[0].teamType?.teamTypeId} + teamId={parentChecklists[0]?.team?.teamId} + teamTypeId={teamType?.teamTypeId || parentChecklists[0]?.teamType?.teamTypeId} /> )} {tasksToDelete && ( diff --git a/src/frontend/src/utils/onboarding.utils.ts b/src/frontend/src/utils/onboarding.utils.ts index 5e00176035..a26ba47d8d 100644 --- a/src/frontend/src/utils/onboarding.utils.ts +++ b/src/frontend/src/utils/onboarding.utils.ts @@ -1,5 +1,23 @@ import { Checklist } from 'shared'; +export const sortGroupNames = (groupedChecklists: Record): Record => { + const groupNames = Object.keys(groupedChecklists); + + groupNames.sort((group1, group2) => { + if (group1 === 'General') return -1; + if (group2 === 'General') return 1; + + return group1.localeCompare(group2); + }); + + const sortedGroupedChecklists: Record = {}; + groupNames.forEach((groupName) => { + sortedGroupedChecklists[groupName] = groupedChecklists[groupName]; + }); + + return sortedGroupedChecklists; +}; + export const groupChecklists = (checklists: Checklist[]) => { const groupedChecklists = checklists.reduce>((groupedChecklists, checklist) => { let checklistName: string; @@ -18,16 +36,5 @@ export const groupChecklists = (checklists: Checklist[]) => { return groupedChecklists; }, {}); - const sortedGroupNames = Object.keys(groupedChecklists).sort((group1, group2) => { - if (group1 === 'General') return -1; - if (group2 === 'General') return 1; - return group1.localeCompare(group2); - }); - - const sortedGroupedChecklists: Record = {}; - sortedGroupNames.forEach((groupName) => { - sortedGroupedChecklists[groupName] = groupedChecklists[groupName]; - }); - - return sortedGroupedChecklists; + return sortGroupNames(groupedChecklists); };