TP-40366 | Added expanded state

src/Pages/Team/constants.ts

@@ -18,6 +18,7 @@ export interface TeamsData {
   name: string;
   slackUserIds: Array<string>;
   lastUpdatedAt: string;
+  expand: boolean;
 }
 
 export interface TeamFormProps {
@@ -44,6 +45,6 @@ export const userInputPlaceholders = {
 };
 export interface CreateTeamProps {
   open: boolean;
-  startTeamSearch: () => void;
+  startTeamSearch: (id: number) => void;
   setOpen: (open: boolean) => void;
 }

src/Pages/Team/index.tsx

@@ -10,6 +10,7 @@ import styles from './Team.module.scss';
 import Button from '@navi/web-ui/lib/primitives/Button';
 import { AddIcon } from '@navi/web-ui/lib/icons';
 import { useAuthData } from './Hook';
+
 const Team: FC = () => {
   const [data, setData] = useState<any>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -17,13 +18,18 @@ const Team: FC = () => {
 
   const Role = useAuthData();
 
-  const startTeamSearch = (): void => {
+  const startTeamSearch = (createdTeamId?: number): void => {
     const endPoint = FETCH_TEAM_DATA;
     setIsLoading(true);
     ApiService.get(endPoint)
       .then(response => {
         setIsLoading(false);
-        setData(response?.data?.data);
+        const teams = response?.data?.data ?? [];
+        const updatedTeams = teams.map(t => ({
+          ...t,
+          expand: t.id === createdTeamId,
+        }));
+        setData(updatedTeams);
       })
       .catch(error => {
         const toastMessage = `${
@@ -45,6 +51,8 @@ const Team: FC = () => {
     setOpen(true);
   };
 
+  console.log('data', data);
+
   const returnTable = (): JSX.Element => {
     if (isLoading) {
       return <FallbackComponent />;
@@ -63,7 +71,7 @@ const Team: FC = () => {
   return (
     <div className={styles['team-wrapper']}>
       <div className={styles['team-header-wrapper']}>
-        <Typography variant="h1">Team</Typography>
+        <Typography variant="h1">Teams</Typography>
         <Typography variant="p3">
           Total:
           <Typography color="#585858" variant="p3" as="span">

src/Pages/Team/partials/CreateTeam.tsx

@@ -53,7 +53,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
     ApiService.post(CREATE_TEAM, { name: teamName, manager_email: email })
       .then((response: any) => {
         toast.success('Team added successfully');
-        startTeamSearch();
+        startTeamSearch(response?.data?.data?.id);
         setOpen(false);
         setTeamName('');
       })

src/Pages/Team/partials/TeamResultsTable.tsx

@@ -33,6 +33,7 @@ const TeamResultsTable = (props: TeamResultsTableProps) => {
               onToggledExpansion={(isExpanded: boolean) => {
                 if (isExpanded) setTeamId(team?.id);
               }}
+              expanded={team?.expand}
               header={
                 <div className={styles['accordion-header']}>
                   <Typography variant="h4" className={styles['title']}>