TP-24975: merging TP-24975 branch into master

src/Pages/Dashboard/partials/SearchResultsTable.tsx

@@ -37,6 +37,13 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
   const incidentData = useRef<any>({});
   const navigate = useNavigate();
 
+  const cellStyle = {
+    'text-overflow': 'ellipsis',
+    'white-space': 'nowrap',
+    overflow: 'hidden',
+    padding: 0,
+  };
+
   const rowData = currentPageData?.map((item: any, ind: number) => {
     let index = 1;
 
@@ -48,6 +55,7 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
     return {
       sNo: ind === 0 ? index : index + ind,
       id: item?.id,
+      incidentName: item?.incidentName,
       title: item?.title,
       statusName: item?.statusName,
       severityName: item?.severityName,
@@ -68,16 +76,16 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
       width: 120,
       suppressMovable: true,
     },
+    {
+      field: 'incidentName',
+      headerName: 'Channel Name',
+      suppressMovable: true,
+    },
     {
       field: 'title',
       headerName: 'Title',
       suppressMovable: true,
-      cellStyle: {
-        'text-overflow': 'ellipsis',
-        'white-space': 'nowrap',
-        overflow: 'hidden',
-        padding: 0,
-      },
+      cellStyle: cellStyle,
     },
     {
       field: 'statusName',
@@ -102,15 +110,11 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
       headerName: 'Team Name',
       suppressMovable: true,
     },
-    {
-      field: 'createdAt',
-      headerName: 'Created On',
-      suppressMovable: true,
-    },
     {
       field: 'createdBy',
       headerName: 'Created By',
       suppressMovable: true,
+      cellStyle: cellStyle,
     },
     {
       field: 'updatedAt',
@@ -121,6 +125,7 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
       field: 'updatedBy',
       headerName: 'Updated By',
       suppressMovable: true,
+      cellStyle: cellStyle,
     },
   ];
 

src/Pages/Dashboard/partials/SmartSearch.tsx

@@ -21,7 +21,7 @@ const SmartSearch: FC<SmartSearchProps> = ({ updateSearchResults }) => {
     updateSearchResults(searchValue);
   };
 
-  const placeHolder = 'Enter the incident name here';
+  const placeHolder = 'Enter the channel name here';
 
   return (
     <div className={styles['input-wrapper']}>

src/Pages/Incidents/DrawerMode/index.tsx

@@ -49,7 +49,6 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
   };
 
   const initFilters = (incidentDetails): void => {
-    console.log('incidentDetails', incidentDetails);
     const severity = headerData?.severities?.find(
       item => item.value === incidentDetails?.severityId,
     );
@@ -109,11 +108,7 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
   }, [incidentId, slackChannel]);
 
   useEffect(() => {
-    if (
-      Object.keys(headerData).length &&
-      Object.keys(incidentDetails).length &&
-      incidentParticipants.length
-    ) {
+    if (Object.keys(headerData).length && Object.keys(incidentDetails).length) {
       initFilters(incidentDetails);
     }
   }, [headerData, incidentDetails, incidentParticipants]);
@@ -217,14 +212,18 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
   };
 
   const returnParticipants = () => {
-    return incidentParticipants?.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>
+    return incidentParticipants?.length ? (
+      incidentParticipants?.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>
-      </div>
-    ));
+      ))
+    ) : (
+      <div className={styles['team-details-wrapper']}>-</div>
+    );
   };
 
   if (isLoading) {

src/Pages/Severity/Severity.module.scss

@@ -11,6 +11,7 @@
   display: flex;
   justify-content: space-between;
   gap: 24px;
+  padding: 6px 0;
 }
 
 .table-wrapper {

src/Pages/Severity/SeverityForm.tsx

@@ -52,7 +52,9 @@ const SeverityForm = (props: SeverityFormProps) => {
     const endPoint = UPDATE_SEVERITY_DATA;
     const updatedSlackUsers = slackUsers?.includes(',')
       ? slackUsers?.split(',')?.map(item => item.trim())
-      : [slackUsers];
+      : slackUsers?.length
+      ? [slackUsers]
+      : [];
     if (!severities?.workEmailIds) {
       severities.workEmailIds = [...updatedSlackUsers];
       const payload = [{ ...severities }];

src/Pages/Severity/SeverityResults.tsx

@@ -61,8 +61,12 @@ const SeverityResults = () => {
                     {severity?.name}
                   </Typography>
                   {severity?.lastUpdatedAt && (
-                    <Typography variant="h4" className={styles['title']}>
-                      {returnFormattedDate(severity?.lastUpdatedAt)}
+                    <Typography
+                      variant="p5"
+                      className={styles['title']}
+                      color="#585858"
+                    >
+                      Updated At: {returnFormattedDate(severity?.lastUpdatedAt)}
                     </Typography>
                   )}
                 </div>

src/Pages/Team/Team.module.scss

@@ -27,6 +27,7 @@
   display: flex;
   justify-content: space-between;
   gap: 24px;
+  padding: 6px 0;
 }
 
 .team-name-wrapper {
@@ -71,3 +72,9 @@
     padding: 12px;
   }
 }
+
+.team-header-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

src/Pages/Team/index.tsx

@@ -55,7 +55,16 @@ const Team: FC = () => {
 
   return (
     <>
-      <Typography variant="h1">Team</Typography>
+      <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>
+        </Typography>
+      </div>
       {returnTable()}
     </>
   );

src/Pages/Team/partials/TeamResultsTable.tsx

@@ -30,8 +30,12 @@ const TeamResultsTable = (props: TeamResultsTableProps) => {
                     {team?.name}
                   </Typography>
                   {team?.lastUpdatedAt && (
-                    <Typography variant="h4" className={styles['title']}>
-                      {returnFormattedDate(team?.lastUpdatedAt)}
+                    <Typography
+                      variant="p5"
+                      className={styles['title']}
+                      color="#585858"
+                    >
+                      Updated At: {returnFormattedDate(team?.lastUpdatedAt)}
                     </Typography>
                   )}
                 </div>