Merge pull request #38 from navi-sa/learning

Changes for UI done and expand functionality added

src/Pages/Team/Team.module.scss

@@ -104,14 +104,13 @@
   border: 1px solid var(--navi-color-gray-border);
 }
 .input-wrapper {
-  display: flex;
-  align-items: center;
+  height: medium;
+  margin-bottom: 20px;
   gap: 0 8px;
-  margin-bottom: 24px;
 }
 
 .email-wrapper {
-  display: flex;
-  align-items: center;
+  height: medium;
+  margin-bottom: 20px;
   gap: 0 8px;
 }

src/Pages/Team/constants.ts

@@ -26,6 +26,7 @@ export interface TeamsData {
   name: string;
   slackUserIds: Array<string>;
   lastUpdatedAt: string;
+  expand: boolean;
 }
 
 export interface TeamFormProps {
@@ -52,6 +53,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 = `${
@@ -63,13 +69,13 @@ const Team: FC = () => {
   return (
     <div className={styles['team-wrapper']}>
       <div className={styles['team-header-wrapper']}>
-        <Typography variant="h1">Team</Typography>
-        <Typography variant="p3">
-          Total:
-          <Typography color="#585858" variant="p3" as="span">
-            {' '}
-            {data?.length} teams{' '}
+        <Typography variant="h1">
+          Teams{' '}
+          <Typography color="#969696" variant="h1" as="span">
+            ({data?.length})
           </Typography>
+        </Typography>
+        <Typography variant="p3">
           <div className={styles['create-team-btn-wrapper']}>
             {Role.includes('Admin') && (
               <Button

src/Pages/Team/partials/CreateTeam.tsx

@@ -24,7 +24,9 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
   const validateTeamName = (value: string): void => {
     value = value.trim();
     if (!regularExpression.test(value)) {
-      setTeamNameError('Please enter a valid team name');
+      setTeamNameError(
+        'Min. 3 characters required. For special characters use spaces, ‘_’, or ‘-’ only”',
+      );
     } else {
       setTeamNameError('');
     }
@@ -32,7 +34,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
 
   const validateEmail = (value: string): void => {
     if (!emailRegularExpression.test(value)) {
-      setEmailError('This is not a Navi e-mail ID');
+      setEmailError('Please enter a Navi email ID');
     } else {
       setEmailError('');
     }
@@ -53,9 +55,10 @@ 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('');
+        setEmail('');
       })
       .catch(error => {
         const toastMessage = `${
@@ -94,7 +97,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
           header="Set up new team "
           onClose={clearErrors}
         >
-          <div className="input-wrapper">
+          <div className={styles['input-wrapper']}>
             <Typography variant="p4">
               <BorderedInput
                 inputLabel="Team name"
@@ -103,7 +106,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
                 value={teamName}
                 onChange={handleTeamNameChange}
                 error={teamNameError}
-                Icon={<AlertOutlineIcon color="#e92c2c" />}
+                Icon={<AlertOutlineIcon color="#e92c2c" size="xl" />}
                 placeholder="E.g. NaviPay_Operations"
               />
             </Typography>
@@ -117,7 +120,7 @@ const CreateTeam: React.FC<CreateTeamProps> = ({
                 type="text"
                 value={email}
                 onChange={handleEmailChange}
-                placeholder="a.b@navi.com"
+                placeholder="name@navi.com"
                 error={emailError}
                 Icon={<AlertOutlineIcon color="#e92c2c" />}
               />

src/Pages/Team/partials/TeamResultsTable.tsx

@@ -1,20 +1,16 @@
 import { useState } from 'react';
-
 import Typography from '@navi/web-ui/lib/primitives/Typography';
 import { Accordion, AccordionGroup } from '@navi/web-ui/lib/primitives';
-
 import { TeamResultsTableProps } from '@src/Pages/Incidents/constants';
 import TeamForm from './TeamForm';
 import { TeamsData } from '../constants';
 import { returnFormattedDate } from '@src/services/globalUtils';
-
 import styles from '../Team.module.scss';
 
 const TeamResultsTable = (props: TeamResultsTableProps) => {
   const { teamsData } = props;
   const [lastUpdated, setLastUpdated] = useState<string>('');
   const [teamId, setTeamId] = useState<string>('');
-
   const returnAccordionKey = (value): string => {
     return lastUpdated.length ? `${value}-${lastUpdated}` : `${value}`;
   };
@@ -33,6 +29,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']}>
@@ -63,5 +60,4 @@ const TeamResultsTable = (props: TeamResultsTableProps) => {
     </div>
   );
 };
-
 export default TeamResultsTable;