From 379bac9ab40ea07db9720a9ccd9c4414b198e943 Mon Sep 17 00:00:00 2001
From: yashmantri <mantri.ramkishor@navi.com>
Date: Wed, 26 Apr 2023 00:15:10 +0530
Subject: [PATCH 01/10] TP-24975 | Updated Severity UI

---
 src/Pages/Severity/Severity.module.scss |  23 +++++
 src/Pages/Severity/SeverityForm.tsx     | 108 +++++++++++-------------
 src/Pages/Severity/SeverityResults.tsx  |  67 +++++++++++++++
 src/Pages/Severity/index.tsx            |   4 +-
 4 files changed, 141 insertions(+), 61 deletions(-)
 create mode 100644 src/Pages/Severity/SeverityResults.tsx

diff --git a/src/Pages/Severity/Severity.module.scss b/src/Pages/Severity/Severity.module.scss
index a181802..756448d 100644
--- a/src/Pages/Severity/Severity.module.scss
+++ b/src/Pages/Severity/Severity.module.scss
@@ -4,4 +4,27 @@
 
 .save-btn {
   margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.severity-form-wrapper {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+}
+
+.table-wrapper {
+  box-sizing: border-box;
+  padding-bottom: 24px;
+  margin-top: 16px;
+}
+
+.content-wrapper {
+  width: 50%;
+  padding: 0 12px;
+}
+
+.vertical-line {
+  transform: rotateX(180deg);
+  border: 1px solid #e8e8e8;
 }
diff --git a/src/Pages/Severity/SeverityForm.tsx b/src/Pages/Severity/SeverityForm.tsx
index ea6743b..5b29bd9 100644
--- a/src/Pages/Severity/SeverityForm.tsx
+++ b/src/Pages/Severity/SeverityForm.tsx
@@ -1,54 +1,23 @@
-import { FC, useEffect, useState } from 'react';
+import { useState } from 'react';
 
 import BorderedInput from '@navi/web-ui/lib/primitives/BorderedInput';
 import Button from '@navi/web-ui/lib/primitives/Button';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 
 import { ApiService } from '@src/services/api';
-import {
-  DefaultSeverityState,
-  FETCH_SEVERITY_DATA,
-  UPDATE_SEVERITY_DATA,
-} from './constants';
-import FallbackComponent from '@src/components/Fallback';
+import { UPDATE_SEVERITY_DATA } from './constants';
 
 import styles from './Severity.module.scss';
+import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
 
-const SeverityForm: FC = () => {
-  const [data, setData] = useState(DefaultSeverityState);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    const endPoint = FETCH_SEVERITY_DATA;
-    setIsLoading(true);
-    ApiService.get(endPoint)
-      .then(response => {
-        setIsLoading(false);
-        const responseData = response?.data?.data?.map(item => {
-          return {
-            id: item.id,
-            name: item.name,
-          };
-        });
-        setData(responseData);
-      })
-      .catch(error => {
-        const toastMessage = `${
-          error?.response?.data?.error?.message
-            ? `${error?.response?.data?.error?.message},`
-            : ''
-        }`;
-        setIsLoading(false);
-        toast.error(toastMessage);
-      });
-  }, []);
+const SeverityForm = ({ data }) => {
+  const [severities, setSeverities] = useState(data);
 
   const submitHandler = () => {
     const endPoint = UPDATE_SEVERITY_DATA;
-    ApiService.post(endPoint, { severities: data })
+    ApiService.post(endPoint, { severities: [severities] })
       .then(response => {
         toast.success('Severities Updated Successfully');
-        console.log('severity update response: ', response);
       })
       .catch(error => {
         const toastMessage = `${
@@ -60,37 +29,58 @@ const SeverityForm: FC = () => {
       });
   };
 
-  const handleChange = (index: number, value: string) => {
-    const tempData = data;
-    tempData[index] = { ...tempData[index], name: value };
-    setData(tempData);
+  const handleChange = (value: string) => {
+    let tempData = data;
+    tempData = { ...tempData, name: value };
+    setSeverities(tempData);
   };
 
-  if (isLoading) {
-    return <FallbackComponent />;
-  }
-
   return (
     <div className={styles['severity-form-wrapper']}>
-      {data?.map((sev: any, index: number) => (
-        <div key={sev?.id} className={styles['custom-borderd-input']}>
+      <div className={styles['content-wrapper']}>
+        <div className={styles['custom-borderd-input']}>
+          <Typography variant="p3" color="#585757">
+            Members
+          </Typography>
+          {data?.participants?.length ? (
+            data?.participants?.map(participant => (
+              <div
+                key={participant?.id}
+                className={styles['team-deatils-wrapper']}
+              >
+                <div className={styles['participant-detail']}>
+                  <Avatar size={20} isImage src={participant?.image} />{' '}
+                  <Typography variant="p3">{participant?.name}</Typography>
+                </div>
+              </div>
+            ))
+          ) : (
+            <Typography variant="p3" className={styles['team-deatils-wrapper']}>
+              -
+            </Typography>
+          )}
+        </div>
+      </div>
+      <hr className={styles['vertical-line']} />
+      <div className={styles['content-wrapper']}>
+        <div className={styles['custom-borderd-input']}>
           <BorderedInput
-            inputLabel={`SEV ${sev?.id - 1} LABEL`}
+            inputLabel={`Sev ${data?.id - 1} Label`}
             inputSize="medium"
-            placeholder={`Sev ${sev?.id - 1} Label`}
-            onChange={e => handleChange(index, e.target.value)}
-            value={sev?.name}
+            placeholder={`Sev ${data?.id - 1} Label`}
+            onChange={e => handleChange(e.target.value)}
+            value={data?.name}
             fullWidth
           />
         </div>
-      ))}
-      <Button
-        className={styles['save-btn']}
-        variant="primary"
-        onClick={submitHandler}
-      >
-        Save
-      </Button>
+        <Button
+          className={styles['save-btn']}
+          variant="primary"
+          onClick={submitHandler}
+        >
+          Save
+        </Button>
+      </div>
     </div>
   );
 };
diff --git a/src/Pages/Severity/SeverityResults.tsx b/src/Pages/Severity/SeverityResults.tsx
new file mode 100644
index 0000000..c2aace9
--- /dev/null
+++ b/src/Pages/Severity/SeverityResults.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react';
+
+import {
+  Accordion,
+  AccordionGroup,
+  Typography,
+} from '@navi/web-ui/lib/primitives';
+import { toast } from '@navi/web-ui/lib/primitives/Toast';
+
+import { ApiService } from '@src/services/api';
+import { FETCH_SEVERITY_DATA } from './constants';
+import FallbackComponent from '@src/components/Fallback';
+import SeverityForm from './SeverityForm';
+
+import styles from './Severity.module.scss';
+
+const SeverityResults = () => {
+  const [data, setData] = useState([]);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    const endPoint = FETCH_SEVERITY_DATA;
+    setIsLoading(true);
+    ApiService.get(endPoint)
+      .then(response => {
+        setIsLoading(false);
+        const responseData = response?.data?.data;
+        setData(responseData);
+      })
+      .catch(error => {
+        const toastMessage = `${
+          error?.response?.data?.error?.message
+            ? `${error?.response?.data?.error?.message},`
+            : ''
+        }`;
+        setIsLoading(false);
+        toast.error(toastMessage);
+        setData([]);
+      });
+  }, []);
+
+  if (isLoading) {
+    return <FallbackComponent />;
+  }
+
+  return (
+    <div className={styles['table-wrapper']}>
+      <AccordionGroup spaced>
+        {data?.map((severity: any) => (
+          <div key={severity?.id}>
+            <Accordion
+              header={
+                <Typography variant="h4" style={{ padding: '12px' }}>
+                  {severity?.name}
+                </Typography>
+              }
+            >
+              <SeverityForm data={severity} />
+            </Accordion>
+          </div>
+        ))}
+      </AccordionGroup>
+    </div>
+  );
+};
+
+export default SeverityResults;
diff --git a/src/Pages/Severity/index.tsx b/src/Pages/Severity/index.tsx
index 3d305d0..a57d605 100644
--- a/src/Pages/Severity/index.tsx
+++ b/src/Pages/Severity/index.tsx
@@ -1,12 +1,12 @@
 import { FC } from 'react';
 import Typography from '@navi/web-ui/lib/primitives/Typography';
-import SeverityForm from './SeverityForm';
+import SeverityResults from './SeverityResults';
 
 const Severity: FC = () => {
   return (
     <>
       <Typography variant="h1">Severity</Typography>
-      <SeverityForm />
+      <SeverityResults />
     </>
   );
 };

From 11b315e533cb4fbafbaa2d1f3b35d920f2e84f71 Mon Sep 17 00:00:00 2001
From: yashmantri <mantri.ramkishor@navi.com>
Date: Wed, 26 Apr 2023 00:19:50 +0530
Subject: [PATCH 02/10] TP-24975 | Code Refactored

---
 src/Pages/Severity/SeverityForm.tsx |  5 +++--
 src/Pages/Severity/constants.ts     | 25 +++----------------------
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/src/Pages/Severity/SeverityForm.tsx b/src/Pages/Severity/SeverityForm.tsx
index 5b29bd9..9be338e 100644
--- a/src/Pages/Severity/SeverityForm.tsx
+++ b/src/Pages/Severity/SeverityForm.tsx
@@ -5,12 +5,13 @@ import Button from '@navi/web-ui/lib/primitives/Button';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
 
 import { ApiService } from '@src/services/api';
-import { UPDATE_SEVERITY_DATA } from './constants';
+import { SeverityFormProps, UPDATE_SEVERITY_DATA } from './constants';
 
 import styles from './Severity.module.scss';
 import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
 
-const SeverityForm = ({ data }) => {
+const SeverityForm = (props: SeverityFormProps) => {
+  const { data } = props;
   const [severities, setSeverities] = useState(data);
 
   const submitHandler = () => {
diff --git a/src/Pages/Severity/constants.ts b/src/Pages/Severity/constants.ts
index e0d295d..2763942 100644
--- a/src/Pages/Severity/constants.ts
+++ b/src/Pages/Severity/constants.ts
@@ -2,25 +2,6 @@ export const FETCH_SEVERITY_DATA = `${window?.config?.BASE_API_URL}/severities`;
 
 export const UPDATE_SEVERITY_DATA = `${window?.config?.BASE_API_URL}/severities`;
 
-export const DefaultSeverityState = [
-  {
-    id: 1,
-    name: '',
-  },
-  {
-    id: 2,
-    name: '',
-  },
-  {
-    id: 3,
-    name: '',
-  },
-  {
-    id: 4,
-    name: '',
-  },
-];
-
-export const isSaveBtnDisabled = (data: any) => {
-  return data?.filter(severity => !severity?.name);
-};
+export interface SeverityFormProps {
+  data: any;
+}

From 7c62bf63d128173a32bb7bd6f09c8d761a53f5f7 Mon Sep 17 00:00:00 2001
From: yashmantri <mantri.ramkishor@navi.com>
Date: Wed, 26 Apr 2023 00:36:51 +0530
Subject: [PATCH 03/10] TP-24975 | Added Single Severity By Id API Call

---
 src/Pages/Severity/Severity.module.scss | 20 +++++++
 src/Pages/Severity/SeverityForm.tsx     | 70 ++++++++++++++++++++-----
 src/Pages/Severity/SeverityResults.tsx  | 10 +++-
 src/Pages/Severity/constants.ts         |  7 ++-
 4 files changed, 92 insertions(+), 15 deletions(-)

diff --git a/src/Pages/Severity/Severity.module.scss b/src/Pages/Severity/Severity.module.scss
index 756448d..fe31585 100644
--- a/src/Pages/Severity/Severity.module.scss
+++ b/src/Pages/Severity/Severity.module.scss
@@ -28,3 +28,23 @@
   transform: rotateX(180deg);
   border: 1px solid #e8e8e8;
 }
+
+.loader-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 150px;
+}
+
+.severity-deatils-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.participant-detail {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
diff --git a/src/Pages/Severity/SeverityForm.tsx b/src/Pages/Severity/SeverityForm.tsx
index 9be338e..4afa492 100644
--- a/src/Pages/Severity/SeverityForm.tsx
+++ b/src/Pages/Severity/SeverityForm.tsx
@@ -1,18 +1,51 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import BorderedInput from '@navi/web-ui/lib/primitives/BorderedInput';
 import Button from '@navi/web-ui/lib/primitives/Button';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
+import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
+import { LoadingIcon } from '@navi/web-ui/lib/icons';
 
 import { ApiService } from '@src/services/api';
-import { SeverityFormProps, UPDATE_SEVERITY_DATA } from './constants';
+import {
+  FETCH_SINGLE_SEVERITY_DATA,
+  SeverityFormProps,
+  UPDATE_SEVERITY_DATA,
+} from './constants';
 
 import styles from './Severity.module.scss';
-import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
 
 const SeverityForm = (props: SeverityFormProps) => {
-  const { data } = props;
-  const [severities, setSeverities] = useState(data);
+  const { severityId, isExpanded } = props;
+  const [severities, setSeverities] = useState<any>({});
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const fetchSeverityById = () => {
+    const endPoint = FETCH_SINGLE_SEVERITY_DATA(severityId);
+    setIsLoading(true);
+    ApiService.get(endPoint)
+      .then(response => {
+        setIsLoading(false);
+        setSeverities(response?.data?.data);
+      })
+      .catch(error => {
+        const toastMessage = `${
+          error?.response?.data?.error?.message
+            ? `${error?.response?.data?.error?.message},`
+            : ''
+        }`;
+        setIsLoading(false);
+        toast.error(toastMessage);
+        setSeverities({});
+      });
+  };
+
+  useEffect(() => {
+    if (severityId && isExpanded) {
+      fetchSeverityById();
+    }
+  }, [severityId, isExpanded]);
 
   const submitHandler = () => {
     const endPoint = UPDATE_SEVERITY_DATA;
@@ -31,11 +64,19 @@ const SeverityForm = (props: SeverityFormProps) => {
   };
 
   const handleChange = (value: string) => {
-    let tempData = data;
+    let tempData = severities;
     tempData = { ...tempData, name: value };
     setSeverities(tempData);
   };
 
+  if (isLoading) {
+    return (
+      <div className={styles['loader-container']}>
+        <LoadingIcon size="md" />
+      </div>
+    );
+  }
+
   return (
     <div className={styles['severity-form-wrapper']}>
       <div className={styles['content-wrapper']}>
@@ -43,11 +84,11 @@ const SeverityForm = (props: SeverityFormProps) => {
           <Typography variant="p3" color="#585757">
             Members
           </Typography>
-          {data?.participants?.length ? (
-            data?.participants?.map(participant => (
+          {severities?.participants?.length ? (
+            severities?.participants?.map(participant => (
               <div
                 key={participant?.id}
-                className={styles['team-deatils-wrapper']}
+                className={styles['severity-deatils-wrapper']}
               >
                 <div className={styles['participant-detail']}>
                   <Avatar size={20} isImage src={participant?.image} />{' '}
@@ -56,7 +97,10 @@ const SeverityForm = (props: SeverityFormProps) => {
               </div>
             ))
           ) : (
-            <Typography variant="p3" className={styles['team-deatils-wrapper']}>
+            <Typography
+              variant="p3"
+              className={styles['severity-deatils-wrapper']}
+            >
               -
             </Typography>
           )}
@@ -66,11 +110,11 @@ const SeverityForm = (props: SeverityFormProps) => {
       <div className={styles['content-wrapper']}>
         <div className={styles['custom-borderd-input']}>
           <BorderedInput
-            inputLabel={`Sev ${data?.id - 1} Label`}
+            inputLabel={`Sev ${severities?.id - 1} Label`}
             inputSize="medium"
-            placeholder={`Sev ${data?.id - 1} Label`}
+            placeholder={`Sev ${severities?.id - 1} Label`}
             onChange={e => handleChange(e.target.value)}
-            value={data?.name}
+            value={severities?.name}
             fullWidth
           />
         </div>
diff --git a/src/Pages/Severity/SeverityResults.tsx b/src/Pages/Severity/SeverityResults.tsx
index c2aace9..4d6d715 100644
--- a/src/Pages/Severity/SeverityResults.tsx
+++ b/src/Pages/Severity/SeverityResults.tsx
@@ -18,6 +18,8 @@ const SeverityResults = () => {
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const [severityId, setSeverityId] = useState<string>('');
+
   useEffect(() => {
     const endPoint = FETCH_SEVERITY_DATA;
     setIsLoading(true);
@@ -49,13 +51,19 @@ const SeverityResults = () => {
         {data?.map((severity: any) => (
           <div key={severity?.id}>
             <Accordion
+              onToggledExpansion={(isExpanded: boolean) => {
+                if (isExpanded) setSeverityId(severity?.id);
+              }}
               header={
                 <Typography variant="h4" style={{ padding: '12px' }}>
                   {severity?.name}
                 </Typography>
               }
             >
-              <SeverityForm data={severity} />
+              <SeverityForm
+                severityId={severityId}
+                isExpanded={severityId === severity?.id}
+              />
             </Accordion>
           </div>
         ))}
diff --git a/src/Pages/Severity/constants.ts b/src/Pages/Severity/constants.ts
index 2763942..b6587e2 100644
--- a/src/Pages/Severity/constants.ts
+++ b/src/Pages/Severity/constants.ts
@@ -3,5 +3,10 @@ export const FETCH_SEVERITY_DATA = `${window?.config?.BASE_API_URL}/severities`;
 export const UPDATE_SEVERITY_DATA = `${window?.config?.BASE_API_URL}/severities`;
 
 export interface SeverityFormProps {
-  data: any;
+  severityId: string;
+  isExpanded: boolean;
 }
+
+export const FETCH_SINGLE_SEVERITY_DATA = (payload: string): string => {
+  return `${window?.config?.BASE_API_URL}/severities/${payload}`;
+};

From 3023cecc26c8f7933965d18fae3899da312c71cf Mon Sep 17 00:00:00 2001
From: "k.kamalakannan" <k.kamalakannan@navi.com>
Date: Wed, 26 Apr 2023 07:40:26 +0530
Subject: [PATCH 04/10] TP-24975: Minor updates

---
 .../Dashboard/partials/SearchResultsTable.tsx | 11 +++-
 .../Incidents/Content/Content.module.scss     |  2 +-
 src/Pages/Incidents/Content/index.tsx         |  2 +-
 src/Pages/Incidents/DrawerMode/index.tsx      | 10 +--
 src/Pages/Severity/Severity.module.scss       |  6 +-
 src/Pages/Severity/SeverityForm.tsx           | 64 +++++++++++++------
 src/Pages/Team/Team.module.scss               |  6 +-
 src/Pages/Team/partials/TeamForm.tsx          |  8 +--
 8 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/src/Pages/Dashboard/partials/SearchResultsTable.tsx b/src/Pages/Dashboard/partials/SearchResultsTable.tsx
index ec003bc..7ea21d4 100644
--- a/src/Pages/Dashboard/partials/SearchResultsTable.tsx
+++ b/src/Pages/Dashboard/partials/SearchResultsTable.tsx
@@ -53,6 +53,7 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
       severityName: item?.severityName,
       teamName: item?.teamName,
       createdAt: returnFormattedDate(item?.createdAt),
+      createdBy: item?.createdBy,
       updatedBy: item?.updatedBy,
       updatedAt: returnFormattedDate(item?.updatedAt),
       slackChannel: item?.slackChannel,
@@ -107,8 +108,8 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
       suppressMovable: true,
     },
     {
-      field: 'updatedBy',
-      headerName: 'Updated By',
+      field: 'createdBy',
+      headerName: 'Created By',
       suppressMovable: true,
     },
     {
@@ -116,6 +117,11 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
       headerName: 'Updated On',
       suppressMovable: true,
     },
+    {
+      field: 'updatedBy',
+      headerName: 'Updated By',
+      suppressMovable: true,
+    },
   ];
 
   const onGridSizeChanged = (params: {
@@ -173,6 +179,7 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
         onGridSizeChanged={onGridSizeChanged}
         onRowClicked={handleOpenDrawer}
         suppressColumnMoveAnimation
+        rowHeight={70}
         detailRowAutoHeight={true}
       />
       <Drawer
diff --git a/src/Pages/Incidents/Content/Content.module.scss b/src/Pages/Incidents/Content/Content.module.scss
index 8a4571a..e0c1681 100644
--- a/src/Pages/Incidents/Content/Content.module.scss
+++ b/src/Pages/Incidents/Content/Content.module.scss
@@ -18,7 +18,7 @@
   gap: 4px;
 }
 
-.team-deatils-wrapper {
+.team-details-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/Pages/Incidents/Content/index.tsx b/src/Pages/Incidents/Content/index.tsx
index e884787..3293785 100644
--- a/src/Pages/Incidents/Content/index.tsx
+++ b/src/Pages/Incidents/Content/index.tsx
@@ -98,7 +98,7 @@ const Content = (props: ContentProps) => {
           data?.map(participant => (
             <div
               key={participant?.id}
-              className={styles['team-deatils-wrapper']}
+              className={styles['team-details-wrapper']}
             >
               <div className={styles['participant-detail']}>
                 <Avatar
diff --git a/src/Pages/Incidents/DrawerMode/index.tsx b/src/Pages/Incidents/DrawerMode/index.tsx
index ec4ce21..7a1dc7f 100644
--- a/src/Pages/Incidents/DrawerMode/index.tsx
+++ b/src/Pages/Incidents/DrawerMode/index.tsx
@@ -61,6 +61,7 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
     setSeverity(severity);
     setStatus(status);
     setTeam(team);
+    setIsLoading(false);
   };
 
   const fetchIncidentDetails = (): void => {
@@ -68,7 +69,6 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
     ApiService.get(endPoint)
       .then(response => {
         setIncidentDetails(response?.data?.data);
-        initFilters(response?.data?.data);
       })
       .catch(error => {
         const toastMessage = `${
@@ -109,13 +109,13 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
 
   useEffect(() => {
     if (
+      Object.keys(headerData).length &&
       Object.keys(incidentDetails).length &&
-      Object.keys(headerData) &&
       incidentParticipants.length
     ) {
-      setIsLoading(false);
+      initFilters(incidentDetails);
     }
-  }, [incidentDetails, headerData, incidentParticipants]);
+  }, [headerData, incidentDetails, incidentParticipants]);
 
   const updateIncident = () => {
     const endPoint = UPDATE_INCIDENT;
@@ -195,7 +195,7 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
         <div className={styles['description-details']}>
           <Typography variant="h4">{IncidentConstants.description}:</Typography>
           <Typography variant="p4" className={styles['description']}>
-            {incidentDetails?.description}
+            {incidentDetails?.description || '-'}
           </Typography>
         </div>
       </div>
diff --git a/src/Pages/Severity/Severity.module.scss b/src/Pages/Severity/Severity.module.scss
index fe31585..5088aea 100644
--- a/src/Pages/Severity/Severity.module.scss
+++ b/src/Pages/Severity/Severity.module.scss
@@ -1,4 +1,4 @@
-.custom-borderd-input {
+.custom-bordered-input {
   margin-top: 20px;
 }
 
@@ -21,7 +21,7 @@
 
 .content-wrapper {
   width: 50%;
-  padding: 0 12px;
+  padding: 0 12px 12px;
 }
 
 .vertical-line {
@@ -36,7 +36,7 @@
   height: 150px;
 }
 
-.severity-deatils-wrapper {
+.severity-details-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/Pages/Severity/SeverityForm.tsx b/src/Pages/Severity/SeverityForm.tsx
index 4afa492..1f8d9ff 100644
--- a/src/Pages/Severity/SeverityForm.tsx
+++ b/src/Pages/Severity/SeverityForm.tsx
@@ -18,7 +18,7 @@ import styles from './Severity.module.scss';
 const SeverityForm = (props: SeverityFormProps) => {
   const { severityId, isExpanded } = props;
   const [severities, setSeverities] = useState<any>({});
-
+  const [slackUsers, setSlackUsers] = useState('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
   const fetchSeverityById = () => {
@@ -49,18 +49,29 @@ const SeverityForm = (props: SeverityFormProps) => {
 
   const submitHandler = () => {
     const endPoint = UPDATE_SEVERITY_DATA;
-    ApiService.post(endPoint, { severities: [severities] })
-      .then(response => {
-        toast.success('Severities Updated Successfully');
-      })
-      .catch(error => {
-        const toastMessage = `${
-          error?.response?.data?.error?.message
-            ? `${error?.response?.data?.error?.message},`
-            : ''
-        }`;
-        toast.error(toastMessage);
-      });
+    const slackIds = severities?.participants?.length
+      ? severities?.participants?.map(participant => participant?.id)
+      : [];
+    const updatedSlackUsers = slackUsers?.includes(',')
+      ? slackUsers.split(',')
+      : [slackUsers];
+    if (severities?.slackUserIds) {
+      severities.slackUserIds = [...updatedSlackUsers].concat(slackIds);
+      const payload = [{ ...severities }];
+      ApiService.post(endPoint, { severities: payload })
+        .then(response => {
+          toast.success('Severities Updated Successfully');
+          fetchSeverityById();
+        })
+        .catch(error => {
+          const toastMessage = `${
+            error?.response?.data?.error?.message
+              ? `${error?.response?.data?.error?.message},`
+              : ''
+          }`;
+          toast.error(toastMessage);
+        });
+    }
   };
 
   const handleChange = (value: string) => {
@@ -80,15 +91,23 @@ const SeverityForm = (props: SeverityFormProps) => {
   return (
     <div className={styles['severity-form-wrapper']}>
       <div className={styles['content-wrapper']}>
-        <div className={styles['custom-borderd-input']}>
-          <Typography variant="p3" color="#585757">
+        <div className={styles['custom-bordered-input']}>
+          <Typography variant="h4" color="#585757">
+            Description
+          </Typography>
+          <Typography variant="p3" style={{ marginTop: '12px' }}>
+            {severities?.description ? severities.description : '-'}
+          </Typography>
+        </div>
+        <div className={styles['custom-bordered-input']}>
+          <Typography variant="h4" color="#585757">
             Members
           </Typography>
           {severities?.participants?.length ? (
             severities?.participants?.map(participant => (
               <div
                 key={participant?.id}
-                className={styles['severity-deatils-wrapper']}
+                className={styles['severity-details-wrapper']}
               >
                 <div className={styles['participant-detail']}>
                   <Avatar size={20} isImage src={participant?.image} />{' '}
@@ -99,7 +118,7 @@ const SeverityForm = (props: SeverityFormProps) => {
           ) : (
             <Typography
               variant="p3"
-              className={styles['severity-deatils-wrapper']}
+              className={styles['severity-details-wrapper']}
             >
               -
             </Typography>
@@ -108,7 +127,7 @@ const SeverityForm = (props: SeverityFormProps) => {
       </div>
       <hr className={styles['vertical-line']} />
       <div className={styles['content-wrapper']}>
-        <div className={styles['custom-borderd-input']}>
+        <div className={styles['custom-bordered-input']}>
           <BorderedInput
             inputLabel={`Sev ${severities?.id - 1} Label`}
             inputSize="medium"
@@ -118,6 +137,15 @@ const SeverityForm = (props: SeverityFormProps) => {
             fullWidth
           />
         </div>
+        <div className={styles['custom-bordered-input']}>
+          <BorderedInput
+            inputLabel="Add Members"
+            inputSize="medium"
+            onChange={e => setSlackUsers(e.target.value)}
+            hintMsg="Please add as a comma separated string"
+            fullWidth
+          />
+        </div>
         <Button
           className={styles['save-btn']}
           variant="primary"
diff --git a/src/Pages/Team/Team.module.scss b/src/Pages/Team/Team.module.scss
index e918dfa..07e0bc2 100644
--- a/src/Pages/Team/Team.module.scss
+++ b/src/Pages/Team/Team.module.scss
@@ -14,7 +14,7 @@
   border-radius: 8px;
 }
 
-.custom-borderd-input {
+.custom-bordered-input {
   margin-top: 20px;
 }
 
@@ -46,7 +46,7 @@
 
 .content-wrapper {
   width: 50%;
-  padding: 0 12px;
+  padding: 0 12px 12px;
 }
 
 .participant-detail {
@@ -55,7 +55,7 @@
   gap: 4px;
 }
 
-.team-deatils-wrapper {
+.team-details-wrapper {
   display: flex;
   justify-content: space-between;
   align-items: center;
diff --git a/src/Pages/Team/partials/TeamForm.tsx b/src/Pages/Team/partials/TeamForm.tsx
index 3f2861e..cbc8686 100644
--- a/src/Pages/Team/partials/TeamForm.tsx
+++ b/src/Pages/Team/partials/TeamForm.tsx
@@ -82,7 +82,7 @@ const TeamForm = (props: TeamFormProps) => {
     <>
       <div className={styles['team-form-wrapper']}>
         <div className={styles['content-wrapper']}>
-          <div className={styles['custom-borderd-input']}>
+          <div className={styles['custom-bordered-input']}>
             <Typography variant="p3" color="#585757">
               Members
             </Typography>
@@ -90,7 +90,7 @@ const TeamForm = (props: TeamFormProps) => {
               data?.participants?.map(participant => (
                 <div
                   key={participant?.id}
-                  className={styles['team-deatils-wrapper']}
+                  className={styles['team-details-wrapper']}
                 >
                   <div className={styles['participant-detail']}>
                     <Avatar size={20} isImage src={participant?.image} />{' '}
@@ -101,7 +101,7 @@ const TeamForm = (props: TeamFormProps) => {
             ) : (
               <Typography
                 variant="p3"
-                className={styles['team-deatils-wrapper']}
+                className={styles['team-details-wrapper']}
               >
                 -
               </Typography>
@@ -110,7 +110,7 @@ const TeamForm = (props: TeamFormProps) => {
         </div>
         <hr className={styles['vertical-line']} />
         <div className={styles['content-wrapper']}>
-          <div className={styles['custom-borderd-input']}>
+          <div className={styles['custom-bordered-input']}>
             <BorderedInput
               inputLabel="Add Members"
               inputSize="medium"

From 45ca87dd274425e1816de8a29cda21356f5efde8 Mon Sep 17 00:00:00 2001
From: "k.kamalakannan" <k.kamalakannan@navi.com>
Date: Wed, 26 Apr 2023 11:54:59 +0530
Subject: [PATCH 05/10] TP-24975: bug fixes

---
 src/Pages/Incidents/DrawerMode/index.tsx | 6 +++---
 src/Pages/Severity/SeverityForm.tsx      | 9 +++------
 src/services/api.ts                      | 2 +-
 3 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/src/Pages/Incidents/DrawerMode/index.tsx b/src/Pages/Incidents/DrawerMode/index.tsx
index 7a1dc7f..a6cc71b 100644
--- a/src/Pages/Incidents/DrawerMode/index.tsx
+++ b/src/Pages/Incidents/DrawerMode/index.tsx
@@ -121,9 +121,9 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
     const endPoint = UPDATE_INCIDENT;
     ApiService.post(endPoint, {
       id: incidentId,
-      teamId: team?.value,
-      status: status?.value,
-      severityId: severity?.value,
+      teamId: `${team?.value}`,
+      status: `${status?.value}`,
+      severityId: `${severity?.value}`,
     })
       .then(response => {
         toast.success('Incident Updated Successfully');
diff --git a/src/Pages/Severity/SeverityForm.tsx b/src/Pages/Severity/SeverityForm.tsx
index 1f8d9ff..7d9c32f 100644
--- a/src/Pages/Severity/SeverityForm.tsx
+++ b/src/Pages/Severity/SeverityForm.tsx
@@ -49,14 +49,11 @@ const SeverityForm = (props: SeverityFormProps) => {
 
   const submitHandler = () => {
     const endPoint = UPDATE_SEVERITY_DATA;
-    const slackIds = severities?.participants?.length
-      ? severities?.participants?.map(participant => participant?.id)
-      : [];
     const updatedSlackUsers = slackUsers?.includes(',')
-      ? slackUsers.split(',')
+      ? slackUsers?.split(',')?.map(item => item.trim())
       : [slackUsers];
-    if (severities?.slackUserIds) {
-      severities.slackUserIds = [...updatedSlackUsers].concat(slackIds);
+    if (!severities?.workEmailIds) {
+      severities.workEmailIds = [...updatedSlackUsers];
       const payload = [{ ...severities }];
       ApiService.post(endPoint, { severities: payload })
         .then(response => {
diff --git a/src/services/api.ts b/src/services/api.ts
index 97a546a..3f4affa 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -15,7 +15,7 @@ export class ApiService {
           localStorage.getItem('react-token') || '';
         req.headers['X-User-Email'] = userData
           ? JSON.parse(userData)?.emailId
-          : null;
+          : 'k.kamalakannan@navi.com';
         return req;
       });
     }

From 0dc054cdc98d089e658fc317fcabc1e00df12a34 Mon Sep 17 00:00:00 2001
From: "k.kamalakannan" <k.kamalakannan@navi.com>
Date: Wed, 26 Apr 2023 12:00:59 +0530
Subject: [PATCH 06/10] TP-24975: code cleanup

---
 src/services/api.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/api.ts b/src/services/api.ts
index 3f4affa..97a546a 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -15,7 +15,7 @@ export class ApiService {
           localStorage.getItem('react-token') || '';
         req.headers['X-User-Email'] = userData
           ? JSON.parse(userData)?.emailId
-          : 'k.kamalakannan@navi.com';
+          : null;
         return req;
       });
     }

From e74cec1f784e8257dff54cedef1c8bf1c408556a Mon Sep 17 00:00:00 2001
From: yashmantri <mantri.ramkishor@navi.com>
Date: Wed, 26 Apr 2023 12:31:14 +0530
Subject: [PATCH 07/10] TP-24975 | Added Search Support + Moved member
 component to common

---
 src/Pages/Dashboard/index.tsx                 | 14 ++---
 .../partials/DashboardHeader.module.scss      | 52 +++++++++++++++----
 .../Dashboard/partials/DashboardHeader.tsx    | 18 +++++--
 src/Pages/Dashboard/partials/SmartSearch.tsx  | 42 +++++++++++++++
 src/Pages/Severity/Severity.module.scss       | 13 -----
 src/Pages/Severity/SeverityForm.tsx           | 24 ++-------
 src/Pages/Team/Team.module.scss               | 13 -----
 src/Pages/Team/partials/TeamForm.tsx          | 24 ++-------
 .../MembersDetails/Members.module.scss        | 12 +++++
 src/components/MembersDetails/index.tsx       | 30 +++++++++++
 10 files changed, 153 insertions(+), 89 deletions(-)
 create mode 100644 src/Pages/Dashboard/partials/SmartSearch.tsx
 create mode 100644 src/components/MembersDetails/Members.module.scss
 create mode 100644 src/components/MembersDetails/index.tsx

diff --git a/src/Pages/Dashboard/index.tsx b/src/Pages/Dashboard/index.tsx
index 99797e4..f3b7530 100644
--- a/src/Pages/Dashboard/index.tsx
+++ b/src/Pages/Dashboard/index.tsx
@@ -26,7 +26,7 @@ const Dashboard: FC = () => {
   );
   const searchParamRef = useRef('');
 
-  const startSessionSearch = (param = pageNumberRef.current): void => {
+  const startIncidentSearch = (param = pageNumberRef.current): void => {
     const endPoint = FETCH_INCIDENTS_DATA(param);
     setIsLoading(true);
     ApiService.get(endPoint)
@@ -49,7 +49,7 @@ const Dashboard: FC = () => {
   };
 
   useEffect(() => {
-    startSessionSearch();
+    startIncidentSearch();
   }, []);
 
   const handlePageNumber = (pageNumber: number): void => {
@@ -57,21 +57,21 @@ const Dashboard: FC = () => {
       pageNumber - 1
     }&page_size=${currentPageSize}`;
     setPageNumber(pageNumber - 1);
-    startSessionSearch(`${searchParamRef.current}${finalParams}`);
+    startIncidentSearch(`${searchParamRef.current}${finalParams}`);
   };
 
   const handlePageSize = (pageSize: number): void => {
     const finalParams = `page_number=${currentPageNumber}&page_size=${pageSize}`;
     setPageSize(pageSize);
-    startSessionSearch(`${searchParamRef.current}${finalParams}`);
+    startIncidentSearch(`${searchParamRef.current}${finalParams}`);
   };
 
-  const fetchSessionData = (props: any): void => {
+  const fetchIncidentData = (props: any): void => {
     const { filterQuery = '' } = props;
     const finalParams = filterQuery ? `${filterQuery}&` : '';
     setPageNumber(0);
     searchParamRef.current = finalParams;
-    startSessionSearch(`${finalParams}${pageNumberRef.current}`);
+    startIncidentSearch(`${finalParams}${pageNumberRef.current}`);
   };
 
   const returnTable = (): JSX.Element => {
@@ -93,7 +93,7 @@ const Dashboard: FC = () => {
 
   return (
     <div>
-      <DashboardHeader fetchSessionData={fetchSessionData} />
+      <DashboardHeader fetchIncidentData={fetchIncidentData} />
       {returnTable()}
     </div>
   );
diff --git a/src/Pages/Dashboard/partials/DashboardHeader.module.scss b/src/Pages/Dashboard/partials/DashboardHeader.module.scss
index ec5700e..5c0f740 100644
--- a/src/Pages/Dashboard/partials/DashboardHeader.module.scss
+++ b/src/Pages/Dashboard/partials/DashboardHeader.module.scss
@@ -2,13 +2,6 @@
   border: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.search-reset-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  margin: 0 0 24px 0;
-}
-
 .header-filter-results-wrapper {
   display: flex;
   justify-content: space-between;
@@ -45,9 +38,10 @@
   align-items: center;
 }
 
-.header-wrapper {
+.search-wrapper {
+  margin: 4px 0;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
 }
 
@@ -72,6 +66,46 @@
   transform: rotateX(180deg);
 }
 
+.input-wrapper {
+  display: flex;
+  align-items: center;
+
+  &_search-title {
+    margin-right: 8px;
+  }
+
+  &_on-error {
+    margin-top: -20px;
+    margin-right: 8px;
+  }
+}
+
+.input-container {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+  min-width: 360px;
+
+  &_disabled {
+    div {
+      cursor: not-allowed;
+      input {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+.button-wrapper {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  height: 40px;
+  padding: 0 12px !important;
+
+  &_on-error {
+    margin-top: -20px;
+  }
+}
+
 :export {
   filterSelectedIndicated: var(--navi-color-blue-base);
 }
diff --git a/src/Pages/Dashboard/partials/DashboardHeader.tsx b/src/Pages/Dashboard/partials/DashboardHeader.tsx
index 66d3cba..5d52cb3 100644
--- a/src/Pages/Dashboard/partials/DashboardHeader.tsx
+++ b/src/Pages/Dashboard/partials/DashboardHeader.tsx
@@ -4,26 +4,34 @@ import { Typography } from '@navi/web-ui/lib/primitives';
 import FilterWrapper from './FilterWrapper';
 import { DashboardHeaderConstants } from '../constants';
 import styles from './DashboardHeader.module.scss';
+import SmartSearch from './SmartSearch';
 
 interface DashboardHeaderProps {
-  fetchSessionData: (payload: any) => void;
+  fetchIncidentData: (payload: any) => void;
 }
 
-const DashboardHeader: FC<DashboardHeaderProps> = ({ fetchSessionData }) => {
+const DashboardHeader: FC<DashboardHeaderProps> = ({ fetchIncidentData }) => {
   const { title } = DashboardHeaderConstants;
 
   const handleFilterQuery = (query): void => {
-    fetchSessionData({
+    fetchIncidentData({
       filterQuery: query,
     });
   };
 
+  const handleSearchUpdate = (searchValue: string): void => {
+    fetchIncidentData({
+      filterQuery: `incident_name=${searchValue}`,
+    });
+  };
+
   return (
-    <div className={styles['header-wrapper']}>
+    <div>
       <div className={styles['more-info-wrapper']}>
         <Typography variant="h1">{title}</Typography>
       </div>
-      <div className={styles['search-reset-wrapper']}>
+      <div className={styles['search-wrapper']}>
+        <SmartSearch updateSearchResults={handleSearchUpdate} />
         <FilterWrapper fetchSessionsWithFilters={handleFilterQuery} />
       </div>
     </div>
diff --git a/src/Pages/Dashboard/partials/SmartSearch.tsx b/src/Pages/Dashboard/partials/SmartSearch.tsx
new file mode 100644
index 0000000..576edbe
--- /dev/null
+++ b/src/Pages/Dashboard/partials/SmartSearch.tsx
@@ -0,0 +1,42 @@
+import React, { FC, useState, useEffect } from 'react';
+import cx from 'classnames';
+
+import { Button, BorderedInput } from '@navi/web-ui/lib/primitives';
+import SearchIcon from '@navi/web-ui/lib/icons/SearchIcon/SearchIcon';
+
+import styles from './DashboardHeader.module.scss';
+
+interface SmartSearchProps {
+  updateSearchResults: (data: any) => void;
+}
+
+const SmartSearch: FC<SmartSearchProps> = ({ updateSearchResults }) => {
+  const [searchValue, setSearchValue] = useState<string>('');
+
+  const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(e.target.value);
+  };
+
+  const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    updateSearchResults(searchValue);
+  };
+
+  const placeHolder = 'Enter the incident name here';
+
+  return (
+    <div className={styles['input-wrapper']}>
+      <BorderedInput
+        fullWidth
+        value={searchValue}
+        onChange={handleSearchInput}
+        placeholder={placeHolder}
+        containerClassName={cx(styles['input-container'])}
+      />
+      <Button className={styles['button-wrapper']} onClick={handleButtonClick}>
+        <SearchIcon color="white" />
+      </Button>
+    </div>
+  );
+};
+
+export default SmartSearch;
diff --git a/src/Pages/Severity/Severity.module.scss b/src/Pages/Severity/Severity.module.scss
index 5088aea..d38fff5 100644
--- a/src/Pages/Severity/Severity.module.scss
+++ b/src/Pages/Severity/Severity.module.scss
@@ -35,16 +35,3 @@
   justify-content: center;
   height: 150px;
 }
-
-.severity-details-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 12px;
-}
-
-.participant-detail {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
diff --git a/src/Pages/Severity/SeverityForm.tsx b/src/Pages/Severity/SeverityForm.tsx
index 7d9c32f..54ebfb4 100644
--- a/src/Pages/Severity/SeverityForm.tsx
+++ b/src/Pages/Severity/SeverityForm.tsx
@@ -3,10 +3,11 @@ import { useEffect, useState } from 'react';
 import BorderedInput from '@navi/web-ui/lib/primitives/BorderedInput';
 import Button from '@navi/web-ui/lib/primitives/Button';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
-import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
+import { Typography } from '@navi/web-ui/lib/primitives';
 import { LoadingIcon } from '@navi/web-ui/lib/icons';
 
 import { ApiService } from '@src/services/api';
+import MembersDetails from '@src/components/MembersDetails';
 import {
   FETCH_SINGLE_SEVERITY_DATA,
   SeverityFormProps,
@@ -100,26 +101,7 @@ const SeverityForm = (props: SeverityFormProps) => {
           <Typography variant="h4" color="#585757">
             Members
           </Typography>
-          {severities?.participants?.length ? (
-            severities?.participants?.map(participant => (
-              <div
-                key={participant?.id}
-                className={styles['severity-details-wrapper']}
-              >
-                <div className={styles['participant-detail']}>
-                  <Avatar size={20} isImage src={participant?.image} />{' '}
-                  <Typography variant="p3">{participant?.name}</Typography>
-                </div>
-              </div>
-            ))
-          ) : (
-            <Typography
-              variant="p3"
-              className={styles['severity-details-wrapper']}
-            >
-              -
-            </Typography>
-          )}
+          <MembersDetails data={severities} />
         </div>
       </div>
       <hr className={styles['vertical-line']} />
diff --git a/src/Pages/Team/Team.module.scss b/src/Pages/Team/Team.module.scss
index 07e0bc2..b5b590d 100644
--- a/src/Pages/Team/Team.module.scss
+++ b/src/Pages/Team/Team.module.scss
@@ -49,19 +49,6 @@
   padding: 0 12px 12px;
 }
 
-.participant-detail {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.team-details-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 12px;
-}
-
 .vertical-line {
   transform: rotateX(180deg);
   border: 1px solid #e8e8e8;
diff --git a/src/Pages/Team/partials/TeamForm.tsx b/src/Pages/Team/partials/TeamForm.tsx
index cbc8686..7cf0de1 100644
--- a/src/Pages/Team/partials/TeamForm.tsx
+++ b/src/Pages/Team/partials/TeamForm.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
 import LoadingIcon from '@navi/web-ui/lib/icons/LoadingIcon';
 import Button from '@navi/web-ui/lib/primitives/Button';
 import { toast } from '@navi/web-ui/lib/primitives/Toast';
+import { BorderedInput, Typography } from '@navi/web-ui/lib/primitives';
 
 import {
   FETCH_SINGLE_TEAM_DATA,
@@ -10,9 +11,9 @@ import {
   UPDATE_TEAM_DATA,
 } from '../constants';
 import { ApiService } from '@src/services/api';
+import MembersDetails from '@src/components/MembersDetails';
 
 import styles from '../Team.module.scss';
-import { Avatar, BorderedInput, Typography } from '@navi/web-ui/lib/primitives';
 
 const TeamForm = (props: TeamFormProps) => {
   const { teamId, isExpanded, setTeamId } = props;
@@ -86,26 +87,7 @@ const TeamForm = (props: TeamFormProps) => {
             <Typography variant="p3" color="#585757">
               Members
             </Typography>
-            {data?.participants?.length ? (
-              data?.participants?.map(participant => (
-                <div
-                  key={participant?.id}
-                  className={styles['team-details-wrapper']}
-                >
-                  <div className={styles['participant-detail']}>
-                    <Avatar size={20} isImage src={participant?.image} />{' '}
-                    <Typography variant="p3">{participant?.name}</Typography>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <Typography
-                variant="p3"
-                className={styles['team-details-wrapper']}
-              >
-                -
-              </Typography>
-            )}
+            <MembersDetails data={data} />
           </div>
         </div>
         <hr className={styles['vertical-line']} />
diff --git a/src/components/MembersDetails/Members.module.scss b/src/components/MembersDetails/Members.module.scss
new file mode 100644
index 0000000..778732d
--- /dev/null
+++ b/src/components/MembersDetails/Members.module.scss
@@ -0,0 +1,12 @@
+.member-details-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 12px;
+}
+
+.participant-detail {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
diff --git a/src/components/MembersDetails/index.tsx b/src/components/MembersDetails/index.tsx
new file mode 100644
index 0000000..fcb2fe0
--- /dev/null
+++ b/src/components/MembersDetails/index.tsx
@@ -0,0 +1,30 @@
+import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
+
+import styles from './Members.module.scss';
+
+const MembersDetails = (props: any) => {
+  const { data } = props;
+  return (
+    <div>
+      {data?.participants?.length ? (
+        data?.participants?.map(participant => (
+          <div
+            key={participant?.id}
+            className={styles['member-details-wrapper']}
+          >
+            <div className={styles['participant-detail']}>
+              <Avatar size={20} isImage src={participant?.image} />{' '}
+              <Typography variant="p3">{participant?.name}</Typography>
+            </div>
+          </div>
+        ))
+      ) : (
+        <Typography variant="p3" className={styles['member-details-wrapper']}>
+          -
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default MembersDetails;

From f55f77af76254f43fa807623a5ab6e2606451274 Mon Sep 17 00:00:00 2001
From: yashmantri <mantri.ramkishor@navi.com>
Date: Wed, 26 Apr 2023 13:19:50 +0530
Subject: [PATCH 08/10] TP-24975 | Added View More members support + Added
 lastUpdatedAt in Accordion

---
 src/Pages/Severity/Severity.module.scss       | 11 +++++
 src/Pages/Severity/SeverityResults.tsx        | 14 ++++--
 src/Pages/Team/Team.module.scss               | 11 +++++
 src/Pages/Team/constants.ts                   |  1 +
 src/Pages/Team/partials/TeamResultsTable.tsx  | 17 +++++--
 .../MembersDetails/Members.module.scss        |  1 +
 src/components/MembersDetails/index.tsx       | 48 ++++++++++++++-----
 7 files changed, 84 insertions(+), 19 deletions(-)

diff --git a/src/Pages/Severity/Severity.module.scss b/src/Pages/Severity/Severity.module.scss
index d38fff5..3f5a745 100644
--- a/src/Pages/Severity/Severity.module.scss
+++ b/src/Pages/Severity/Severity.module.scss
@@ -35,3 +35,14 @@
   justify-content: center;
   height: 150px;
 }
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .title {
+    padding: 12px;
+  }
+}
diff --git a/src/Pages/Severity/SeverityResults.tsx b/src/Pages/Severity/SeverityResults.tsx
index 4d6d715..86225c6 100644
--- a/src/Pages/Severity/SeverityResults.tsx
+++ b/src/Pages/Severity/SeverityResults.tsx
@@ -11,6 +11,7 @@ import { ApiService } from '@src/services/api';
 import { FETCH_SEVERITY_DATA } from './constants';
 import FallbackComponent from '@src/components/Fallback';
 import SeverityForm from './SeverityForm';
+import { returnFormattedDate } from '@src/services/globalUtils';
 
 import styles from './Severity.module.scss';
 
@@ -55,9 +56,16 @@ const SeverityResults = () => {
                 if (isExpanded) setSeverityId(severity?.id);
               }}
               header={
-                <Typography variant="h4" style={{ padding: '12px' }}>
-                  {severity?.name}
-                </Typography>
+                <div className={styles['accordion-header']}>
+                  <Typography variant="h4" className={styles['title']}>
+                    {severity?.name}
+                  </Typography>
+                  {severity?.lastUpdatedAt && (
+                    <Typography variant="h4" className={styles['title']}>
+                      {returnFormattedDate(severity?.lastUpdatedAt)}
+                    </Typography>
+                  )}
+                </div>
               }
             >
               <SeverityForm
diff --git a/src/Pages/Team/Team.module.scss b/src/Pages/Team/Team.module.scss
index b5b590d..510d28b 100644
--- a/src/Pages/Team/Team.module.scss
+++ b/src/Pages/Team/Team.module.scss
@@ -60,3 +60,14 @@
   justify-content: center;
   height: 150px;
 }
+
+.accordion-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .title {
+    padding: 12px;
+  }
+}
diff --git a/src/Pages/Team/constants.ts b/src/Pages/Team/constants.ts
index e32cd97..e3a94e7 100644
--- a/src/Pages/Team/constants.ts
+++ b/src/Pages/Team/constants.ts
@@ -12,6 +12,7 @@ export interface TeamsData {
   id: string;
   name: string;
   slackUserIds: Array<string>;
+  lastUpdatedAt: string;
 }
 
 export interface TeamFormProps {
diff --git a/src/Pages/Team/partials/TeamResultsTable.tsx b/src/Pages/Team/partials/TeamResultsTable.tsx
index f745e2f..2685bda 100644
--- a/src/Pages/Team/partials/TeamResultsTable.tsx
+++ b/src/Pages/Team/partials/TeamResultsTable.tsx
@@ -1,12 +1,14 @@
 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 { Accordion, AccordionGroup } from '@navi/web-ui/lib/primitives';
+import styles from '../Team.module.scss';
 
 const TeamResultsTable = (props: TeamResultsTableProps) => {
   const { teamsData } = props;
@@ -23,9 +25,16 @@ const TeamResultsTable = (props: TeamResultsTableProps) => {
                 if (isExpanded) setTeamId(team?.id);
               }}
               header={
-                <Typography variant="h4" style={{ padding: '12px' }}>
-                  {team?.name}
-                </Typography>
+                <div className={styles['accordion-header']}>
+                  <Typography variant="h4" className={styles['title']}>
+                    {team?.name}
+                  </Typography>
+                  {team?.lastUpdatedAt && (
+                    <Typography variant="h4" className={styles['title']}>
+                      {returnFormattedDate(team?.lastUpdatedAt)}
+                    </Typography>
+                  )}
+                </div>
               }
             >
               <TeamForm
diff --git a/src/components/MembersDetails/Members.module.scss b/src/components/MembersDetails/Members.module.scss
index 778732d..7168bd7 100644
--- a/src/components/MembersDetails/Members.module.scss
+++ b/src/components/MembersDetails/Members.module.scss
@@ -3,6 +3,7 @@
   justify-content: space-between;
   align-items: center;
   margin-top: 12px;
+  cursor: pointer;
 }
 
 .participant-detail {
diff --git a/src/components/MembersDetails/index.tsx b/src/components/MembersDetails/index.tsx
index fcb2fe0..54009f3 100644
--- a/src/components/MembersDetails/index.tsx
+++ b/src/components/MembersDetails/index.tsx
@@ -1,23 +1,47 @@
+import { useState } from 'react';
+
 import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
 
 import styles from './Members.module.scss';
 
 const MembersDetails = (props: any) => {
   const { data } = props;
+  const totalMembers = data?.participants?.length;
+  const [showTotalMembers, setShowTotalMembers] = useState(10);
+
   return (
     <div>
-      {data?.participants?.length ? (
-        data?.participants?.map(participant => (
-          <div
-            key={participant?.id}
-            className={styles['member-details-wrapper']}
-          >
-            <div className={styles['participant-detail']}>
-              <Avatar size={20} isImage src={participant?.image} />{' '}
-              <Typography variant="p3">{participant?.name}</Typography>
-            </div>
-          </div>
-        ))
+      {totalMembers ? (
+        <>
+          {data?.participants
+            ?.slice(0, showTotalMembers)
+            ?.map((participant, index) => (
+              <div
+                key={participant?.id}
+                className={styles['member-details-wrapper']}
+              >
+                <div className={styles['participant-detail']}>
+                  <Avatar size={20} isImage src={participant?.image} />{' '}
+                  <Typography variant="p3">{participant?.name}</Typography>
+                  {totalMembers > 10 && index === showTotalMembers - 1 ? (
+                    totalMembers !== showTotalMembers ? (
+                      <div onClick={() => setShowTotalMembers(totalMembers)}>
+                        <Typography variant="h5">
+                          +{totalMembers - showTotalMembers} More
+                        </Typography>
+                      </div>
+                    ) : (
+                      <div onClick={() => setShowTotalMembers(10)}>
+                        <Typography variant="h5">View less</Typography>
+                      </div>
+                    )
+                  ) : (
+                    ''
+                  )}
+                </div>
+              </div>
+            ))}
+        </>
       ) : (
         <Typography variant="p3" className={styles['member-details-wrapper']}>
           -

From a3b3a6331f910d08d9f8a818a550d29f2991671a Mon Sep 17 00:00:00 2001
From: yashmantri <mantri.ramkishor@navi.com>
Date: Wed, 26 Apr 2023 13:26:52 +0530
Subject: [PATCH 09/10] TP-24975 | Added Disabled check for search bar

---
 src/Pages/Dashboard/partials/SmartSearch.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Pages/Dashboard/partials/SmartSearch.tsx b/src/Pages/Dashboard/partials/SmartSearch.tsx
index 576edbe..2c69669 100644
--- a/src/Pages/Dashboard/partials/SmartSearch.tsx
+++ b/src/Pages/Dashboard/partials/SmartSearch.tsx
@@ -32,7 +32,11 @@ const SmartSearch: FC<SmartSearchProps> = ({ updateSearchResults }) => {
         placeholder={placeHolder}
         containerClassName={cx(styles['input-container'])}
       />
-      <Button className={styles['button-wrapper']} onClick={handleButtonClick}>
+      <Button
+        className={styles['button-wrapper']}
+        disabled={!searchValue}
+        onClick={handleButtonClick}
+      >
         <SearchIcon color="white" />
       </Button>
     </div>

From ec31d970e8ddfe954e9bd0112b8e63783c7e825d Mon Sep 17 00:00:00 2001
From: yashmantri <mantri.ramkishor@navi.com>
Date: Wed, 26 Apr 2023 14:02:55 +0530
Subject: [PATCH 10/10] TP-24975 | DISABLE_UNIVERSAL_AUTH entrypoint added

---
 entrypoint.sh | 1 +
 1 file changed, 1 insertion(+)

diff --git a/entrypoint.sh b/entrypoint.sh
index 6cf73d0..b54a85e 100644
--- a/entrypoint.sh
+++ b/entrypoint.sh
@@ -5,5 +5,6 @@ sed -i "s~<AUTH_CLIENT_ID>~${AUTH_CLIENT_ID}~g" /usr/share/nginx/html/config.js
 sed -i "s~<ENVIRONMENT>~${ENVIRONMENT}~g" /usr/share/nginx/html/config.js
 sed -i "s~<BASE_API_URL>~${BASE_API_URL}~g" /usr/share/nginx/html/config.js
 sed -i "s~CSP_HEADER~${CSP_HEADER}~g" /etc/nginx/conf.d/nginx.conf
+sed -i "s~DISABLE_UNIVERSAL_AUTH~${DISABLE_UNIVERSAL_AUTH}~g" /etc/nginx/conf.d/nginx.conf
 
 exec "$@"