TP-24975: demo feedback changes initial commit

src/Pages/Dashboard/partials/SearchResultsTable.tsx

@@ -41,7 +41,6 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
     'text-overflow': 'ellipsis',
     'white-space': 'nowrap',
     overflow: 'hidden',
-    padding: 0,
   };
 
   const rowData = currentPageData?.map((item: any, ind: number) => {
@@ -69,13 +68,6 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
   });
 
   const columnData = [
-    {
-      field: 'id',
-      headerName: 'Incident Id',
-      suppressSizeToFit: true,
-      width: 120,
-      suppressMovable: true,
-    },
     {
       field: 'incidentName',
       headerName: 'Channel Name',
@@ -184,7 +176,7 @@ const SearchResultsTable: FC<SearchResultTableProps> = ({
         onGridSizeChanged={onGridSizeChanged}
         onRowClicked={handleOpenDrawer}
         suppressColumnMoveAnimation
-        rowHeight={70}
+        rowHeight={54}
         detailRowAutoHeight={true}
       />
       <Drawer

src/Pages/Incidents/DrawerMode/DrawerMode.module.scss

@@ -64,3 +64,7 @@
   justify-content: center;
   align-items: center;
 }
+
+.content-divider {
+  margin: 16px 0;
+}

src/Pages/Incidents/DrawerMode/index.tsx

@@ -1,4 +1,5 @@
 import { FC, useEffect, useState } from 'react';
+import cx from 'classnames';
 
 import { Typography, Avatar } from '@navi/web-ui/lib/primitives';
 import Filter from '@navi/web-ui/lib/components/Filter';
@@ -207,6 +208,12 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
             </a>
           </Typography>
         </div>
+        <div className={styles['description-details']}>
+          <Typography variant="h4">{IncidentConstants.incidentId}:</Typography>
+          <Typography variant="p4" className={styles['description']}>
+            {incidentDetails?.id}
+          </Typography>
+        </div>
       </div>
     );
   };
@@ -237,9 +244,9 @@ const DrawerMode: FC<DrawerModeProps> = ({ incidentId, slackChannel }) => {
   return (
     <div>
       {returnContent()}
-      <hr className={commonStyles['divider']} />
+      <hr className={cx(commonStyles['divider'], styles['content-divider'])} />
       {returnHeaderDetails()}
-      <hr className={commonStyles['divider']} />
+      <hr className={cx(commonStyles['divider'], styles['content-divider'])} />
       <Typography variant="h4">Participants:</Typography>
       {returnParticipants()}
     </div>

src/Pages/Incidents/constants.ts

@@ -10,6 +10,7 @@ export const IncidentConstants = {
   description: 'Description',
   team: 'Team',
   channel: 'Channel name',
+  incidentId: 'Incident Id',
 };
 
 export const FETCH_INCIDENT_DATA = (payload: any): string => {

src/Pages/Severity/SeverityForm.tsx

@@ -17,17 +17,20 @@ import {
 import styles from './Severity.module.scss';
 
 const SeverityForm = (props: SeverityFormProps) => {
-  const { severityId, isExpanded } = props;
+  const { severityId, isExpanded, setLastUpdatedAt } = props;
   const [severities, setSeverities] = useState<any>({});
   const [slackUsers, setSlackUsers] = useState('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
-  const fetchSeverityById = () => {
+  const fetchSeverityById = (updateDate = false) => {
     const endPoint = FETCH_SINGLE_SEVERITY_DATA(severityId);
     setIsLoading(true);
     ApiService.get(endPoint)
       .then(response => {
         setIsLoading(false);
+        if (updateDate) {
+          setLastUpdatedAt(response?.data?.data?.lastUpdatedAt);
+        }
         setSeverities(response?.data?.data);
       })
       .catch(error => {
@@ -61,7 +64,7 @@ const SeverityForm = (props: SeverityFormProps) => {
       ApiService.post(endPoint, { severities: payload })
         .then(response => {
           toast.success('Severities Updated Successfully');
-          fetchSeverityById();
+          fetchSeverityById(true);
         })
         .catch(error => {
           const toastMessage = `${
@@ -120,10 +123,11 @@ const SeverityForm = (props: SeverityFormProps) => {
         </div>
         <div className={styles['custom-bordered-input']}>
           <BorderedInput
-            inputLabel="Add Members"
+            inputLabel="Add email ids"
             inputSize="medium"
+            placeholder="Please add email ids here"
             onChange={e => setSlackUsers(e.target.value)}
-            hintMsg="Please add as a comma separated string"
+            hintMsg="Please enter the values separated by commas. "
             fullWidth
           />
         </div>

src/Pages/Severity/SeverityResults.tsx

@@ -18,7 +18,7 @@ import styles from './Severity.module.scss';
 const SeverityResults = () => {
   const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState<boolean>(false);
-
+  const [lastUpdated, setLastUpdated] = useState<string>('');
   const [severityId, setSeverityId] = useState<string>('');
 
   useEffect(() => {
@@ -46,11 +46,20 @@ const SeverityResults = () => {
     return <FallbackComponent />;
   }
 
+  const returnAccordionKey = (value): string => {
+    return lastUpdated.length ? `${value}-${lastUpdated}` : `${value}`;
+  };
+
+  const returnDate = date => {
+    const finalDate = lastUpdated.length ? lastUpdated : date;
+    return returnFormattedDate(finalDate);
+  };
+
   return (
     <div className={styles['table-wrapper']}>
       <AccordionGroup spaced>
         {data?.map((severity: any) => (
-          <div key={severity?.id}>
+          <div key={returnAccordionKey(severity?.id)}>
             <Accordion
               onToggledExpansion={(isExpanded: boolean) => {
                 if (isExpanded) setSeverityId(severity?.id);
@@ -66,7 +75,7 @@ const SeverityResults = () => {
                       className={styles['title']}
                       color="#585858"
                     >
-                      Updated At: {returnFormattedDate(severity?.lastUpdatedAt)}
+                      Updated At: {returnDate(severity?.lastUpdatedAt)}
                     </Typography>
                   )}
                 </div>
@@ -75,6 +84,7 @@ const SeverityResults = () => {
               <SeverityForm
                 severityId={severityId}
                 isExpanded={severityId === severity?.id}
+                setLastUpdatedAt={setLastUpdated}
               />
             </Accordion>
           </div>

src/Pages/Severity/constants.ts

@@ -5,6 +5,7 @@ export const UPDATE_SEVERITY_DATA = `${window?.config?.BASE_API_URL}/severities`
 export interface SeverityFormProps {
   severityId: string;
   isExpanded: boolean;
+  setLastUpdatedAt: (value: string) => void;
 }
 
 export const FETCH_SINGLE_SEVERITY_DATA = (payload: string): string => {

src/Pages/Team/partials/TeamForm.tsx

@@ -98,8 +98,9 @@ const TeamForm = (props: TeamFormProps) => {
             <BorderedInput
               inputLabel="Add Members"
               inputSize="medium"
+              placeholder="Please add email ids here"
               onChange={e => setSlackUserIds(e.target.value)}
-              hintMsg="Please add as a comma separated string"
+              hintMsg="Please enter the values separated by commas."
               fullWidth
             />
           </div>