TP-40366 | adding yarn.lock file

package.json

@@ -31,6 +31,8 @@
     ]
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.17",
+    "@heroicons/react": "^2.0.18",
     "@navi/web-ui": "^1.49.8",
     "@super-app/dark-knight": "^1.0.6",
     "axios": "^1.3.4",
@@ -39,6 +41,7 @@
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-modal": "^3.16.1",
     "react-router-dom": "^6.8.2",
     "sass": "^1.58.3"
   },

src/Pages/Team/Team.module.scss

@@ -44,7 +44,14 @@
   width: fit-content;
   margin-top: 12px;
 }
-
+.create-team-btn-wrapper {
+  padding: 6px 0 12px 0px;
+}
+.create-team-btn {
+  width: (164px);
+  height: (36px);
+  margin-top: 12px;
+}
 .content-wrapper {
   width: 50%;
   padding: 0 12px 12px;
@@ -98,3 +105,19 @@
 .filter-container {
   border: 1px solid var(--navi-color-gray-border);
 }
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0 8px;
+  margin: 8px 0;
+}
+
+.helperText {
+  span {
+    color: #f98600 !important;
+    font-size: 14px;
+  }
+  svg {
+    color: #f98600 !important;
+  }
+}

src/Pages/Team/constants.ts

@@ -8,6 +8,10 @@ export const UPDATE_TEAM_DATA = (): string => {
   return `${window?.config?.BASE_API_URL}/teams`;
 };
 
+export const ADD_TEAM_DATA = (): string => {
+  return `https://mock-server.np.navi-tech.in/houston/teams/add`;
+};
+
 export interface TeamsData {
   id: string;
   name: string;

src/Pages/Team/index.tsx

@@ -1,18 +1,22 @@
 import { FC, useEffect, useState } from 'react';
-
+import axios from 'axios';
 import Typography from '@navi/web-ui/lib/primitives/Typography';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 
 import FallbackComponent from '@src/components/Fallback';
 import { ApiService } from '@src/services/api';
-import { FETCH_TEAM_DATA } from './constants';
+import { ADD_TEAM_DATA, FETCH_TEAM_DATA } from './constants';
 import TeamResultsTable from './partials/TeamResultsTable';
-
+import CreateTeam from './partials/CreateTeam';
 import styles from './Team.module.scss';
+import Button from '@navi/web-ui/lib/primitives/Button';
+import { AddIcon } from '@navi/web-ui/lib/icons';
+import { BorderedInput, ModalDialog } from '@navi/web-ui/lib/primitives';
 
 const Team: FC = () => {
   const [data, setData] = useState<any>([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [open, setOpen] = useState<boolean>(false);
 
   const startTeamSearch = (): void => {
     const endPoint = FETCH_TEAM_DATA;
@@ -38,6 +42,10 @@ const Team: FC = () => {
     startTeamSearch();
   }, []);
 
+  const createHandler = props => {
+    setOpen(true);
+  };
+
   const returnTable = (): JSX.Element => {
     if (isLoading) {
       return <FallbackComponent />;
@@ -63,9 +71,23 @@ const Team: FC = () => {
             {' '}
             {data?.length} teams{' '}
           </Typography>
+          <div className={styles['create-team-btn-wrapper']}>
+            <Button
+              startAdornment={<AddIcon color="white" />}
+              fullWidth
+              onClick={createHandler}
+              variant="primary"
+              className={styles['create-team-btn']}
+            >
+              Create new team
+            </Button>
+          </div>
         </Typography>
       </div>
+
       {returnTable()}
+
+      <CreateTeam open={open} setOpen={setOpen} apicalled={startTeamSearch} />
     </div>
   );
 };

src/Pages/Team/partials/CreateTeam.tsx

@@ -0,0 +1,121 @@
+import TeamResultsTable from './TeamResultsTable';
+import { TeamsData } from '../constants';
+import { returnFormattedDate } from '@src/services/globalUtils';
+import styles from '../Team.module.scss';
+import {
+  AccordionGroup,
+  Accordion,
+  Typography,
+} from '@navi/web-ui/lib/primitives';
+import { useState } from 'react';
+import { ADD_TEAM_DATA } from '../constants';
+import Button from '@navi/web-ui/lib/primitives/Button';
+import { AddIcon, AlertOutlineIcon } from '@navi/web-ui/lib/icons';
+import { BorderedInput, ModalDialog } from '@navi/web-ui/lib/primitives';
+import { toast } from '@navi/web-ui/lib/primitives/Toast';
+import { ApiService } from '@src/services/api';
+
+const CreateTeam = props => {
+  // const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const [teamName, setTeamName] = useState<string>('');
+  const [teamNameError, setTeamNameError] = useState<string>('');
+
+  const [validInput, setValidInput] = useState<boolean>(false);
+
+  const regularExpression = '^[A-Za-z][A-Za-z0-9_]{2,29}$';
+
+  const validateTeamName = (value: string): void => {
+    setTeamName(value);
+    if (!value.match(regularExpression)) {
+      setValidInput(false);
+    } else {
+      setValidInput(true);
+    }
+  };
+
+  const apiCall = (endpoint, teamName) => {
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        resolve({
+          status: 200,
+        });
+        // reject(
+        //   {
+        //       'status': 400,
+        //   }
+        //  )
+      }, 1000);
+    });
+  };
+
+  const addTeamHandler = (): void => {
+    const endPoint = ADD_TEAM_DATA();
+
+    apiCall(endPoint, { name: teamName })
+      .then((response: any) => {
+        console.log({ response });
+
+        props.apicalled();
+        props.setOpen(false);
+        setTeamName('');
+      })
+      .catch(error => {
+        console.log('catching error');
+        setTeamNameError('Team name already exists');
+        //   const toastMessage =  error;
+
+        //   toast.error(toastMessage);
+
+        setTeamName('');
+      });
+  };
+
+  const clearErrors = () => {
+    props.setOpen(false);
+    setTeamNameError('');
+  };
+
+  return (
+    <div className={styles['team-wrapper']}>
+      {props.open && (
+        <ModalDialog
+          open={props.open}
+          footerButtons={[
+            {
+              label: 'Cancel',
+              onClick: clearErrors,
+            },
+            {
+              label: 'Submit',
+              onClick: addTeamHandler,
+              disabled: !validInput,
+            },
+          ]}
+          header="Enter team name "
+          // onClose={() => props.setOpen(false)}
+          onClose={clearErrors}
+        >
+          <div className="input-wrapper">
+            <Typography variant="p4">
+              <BorderedInput
+                inputSize="full-width"
+                type="text"
+                value={teamName}
+                onChange={e => validateTeamName(e.target.value)}
+                error={teamNameError}
+                placeholder="New team "
+                helperTextClasses={styles.helperText}
+                Icon={
+                  <AlertOutlineIcon color="var(--navi-color-orange-base)" />
+                }
+              />
+            </Typography>
+          </div>
+        </ModalDialog>
+      )}
+    </div>
+  );
+};
+
+export default CreateTeam;

src/components/Footer/index.tsx

@@ -1,4 +1,4 @@
-import { Typography } from '@navi/web-ui/lib/primitives';
+import { Button, Typography } from '@navi/web-ui/lib/primitives';
 import HelpIcon from '@src/assets/HelpIcon';
 import styles from './Footer.module.scss';
 
@@ -22,6 +22,7 @@ const Footer = ({ isExpanded }) => {
         >
           Get help on Slack
         </a>
+        {/* <Button>See user list </Button> */}
       </Typography>
     </div>
   );