Merge pull request #127 from navi-sa/INFRA-2836

INFRA-2836 | Saurabh | Support user removal from the severity list

src/Pages/Severity/SeverityForm.tsx

@@ -1,26 +1,39 @@
 import { useEffect, useState } from 'react';
-
+import { useSelector, useDispatch } from 'react-redux';
 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 { Typography } from '@navi/web-ui/lib/primitives';
+import { Tooltip, 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/SevMemberDetails';
+import { setSeverities } from '@src/slices/sevSlice';
+import { useAuthData } from '../Team/Hook';
 import {
   FETCH_SINGLE_SEVERITY_DATA,
+  REMOVE_SEV_MEMBER,
   SeverityFormProps,
   UPDATE_SEVERITY_DATA,
 } from './constants';
-
 import styles from './Severity.module.scss';
-import { useSelector, useDispatch } from 'react-redux';
-import { setSeverities } from '@src/slices/sevSlice';
+
+interface ApiResponseData {
+  data?: string | null;
+  error?: {
+    message: string;
+  };
+  status: number;
+}
+
+interface ResponseType {
+  data: ApiResponseData;
+  status: number;
+}
 
 const SeverityForm = (props: SeverityFormProps) => {
   const { severityId, isExpanded, setLastUpdatedAt } = props;
   const dispatch = useDispatch();
+  const Role = useAuthData();
   const severities = useSelector((state: any) => state.severity.memberData);
   const [slackUsers, setSlackUsers] = useState('');
   const [isLoading, setIsLoading] = useState<boolean>(false);
@@ -54,6 +67,24 @@ const SeverityForm = (props: SeverityFormProps) => {
     }
   }, [severityId, isExpanded]);
 
+  const handleRemoveSevMember = (severityID: string, emailID: string): void => {
+    const endpoint = REMOVE_SEV_MEMBER(severityID, emailID);
+    ApiService.delete(endpoint)
+      .then((response: ResponseType) => {
+        if (response?.status === 200) {
+          toast.success(response?.data?.data);
+          setIsLoading(true);
+          setSeverities({});
+          fetchSeverityById(true);
+        } else {
+          toast.error(response?.data?.error?.message);
+        }
+      })
+      .catch(error => {
+        toast.error(`Error removing member from team : ${error?.message}`);
+      });
+  };
+
   const submitHandler = () => {
     const endPoint = UPDATE_SEVERITY_DATA;
     const updatedSlackUsers = slackUsers?.includes(',')
@@ -110,7 +141,7 @@ const SeverityForm = (props: SeverityFormProps) => {
           <Typography variant="h4" color="#585757">
             Members
           </Typography>
-          <MembersDetails />
+          <MembersDetails handleRemoveSevMember={handleRemoveSevMember} />
         </div>
       </div>
       <hr className={styles['vertical-line']} />
@@ -134,15 +165,34 @@ const SeverityForm = (props: SeverityFormProps) => {
             onChange={e => setSlackUsers(e.target.value)}
             hintMsg="Please enter the values separated by commas. "
             fullWidth
+            disabled={!Role.includes('Admin')}
           />
         </div>
-        <Button
-          className={styles['save-btn']}
-          variant="primary"
-          onClick={submitHandler}
-        >
-          Save
-        </Button>
+        {!Role.includes('Admin') ? (
+          <Tooltip
+            text="Only admin can add emails."
+            withPointer
+            position="right"
+          >
+            <Button
+              className={styles['save-btn']}
+              variant="primary"
+              onClick={submitHandler}
+              disabled={!Role.includes('Admin')}
+            >
+              Save
+            </Button>
+          </Tooltip>
+        ) : (
+          <Button
+            className={styles['save-btn']}
+            variant="primary"
+            onClick={submitHandler}
+            disabled={!Role.includes('Admin')}
+          >
+            Save
+          </Button>
+        )}
       </div>
     </div>
   );

src/Pages/Severity/SeverityResults.tsx

@@ -1,21 +1,19 @@
 import { useEffect, useState } from 'react';
-
+import { useDispatch, useSelector } from 'react-redux';
 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 { ApiService } from '@src/services/api';
 import { returnFormattedDate } from '@src/services/globalUtils';
-
-import styles from './Severity.module.scss';
 import { setData, setIsLoading } from '@src/slices/sevSlice';
-import { useDispatch, useSelector } from 'react-redux';
+import SeverityForm from './SeverityForm';
+import styles from './Severity.module.scss';
+import { FETCH_SEVERITY_DATA } from './constants';
+
 const SeverityResults = () => {
   const dispatch = useDispatch();
   const data = useSelector((state: any) => state.severity.data);

src/Pages/Severity/constants.ts

@@ -15,3 +15,10 @@ export interface SeverityFormProps {
 export const FETCH_SINGLE_SEVERITY_DATA = (payload: string): string => {
   return `${URL_PREFIX}/severities/${payload}`;
 };
+
+export const REMOVE_SEV_MEMBER = (
+  severityID: string,
+  emailID: string,
+): string => {
+  return `${URL_PREFIX}/severity/${severityID}/member/${emailID}`;
+};

src/components/SevMemberDetails/Members.module.scss

@@ -11,3 +11,12 @@
   align-items: center;
   gap: 4px;
 }
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.modal-footer-delete-button {
+  background-color: var(--navi-color-red-base) !important;
+}

src/components/SevMemberDetails/index.tsx

@@ -1,13 +1,31 @@
 import { useState } from 'react';
 import { useSelector } from 'react-redux';
-import { Avatar, Typography } from '@navi/web-ui/lib/primitives';
-
+import {
+  Avatar,
+  Button,
+  ModalDialog,
+  Typography,
+} from '@navi/web-ui/lib/primitives';
+import { CloseIcon } from '@navi/web-ui/lib/icons';
+import { useAuthData } from '@src/Pages/Team/Hook';
 import styles from './Members.module.scss';
 
-const MembersDetails = (props: any) => {
+const MembersDetails = ({ handleRemoveSevMember }) => {
   const data = useSelector((state: any) => state.severity.memberData);
+  const Role = useAuthData();
   const totalMembers = data?.participants?.length;
   const [showTotalMembers, setShowTotalMembers] = useState(10);
+  const [openedParticipantId, setOpenedParticipantId] = useState(null);
+
+  const onClickModalHandler = (
+    e: React.MouseEvent<HTMLButtonElement>,
+    id: string,
+    email: string,
+  ): void => {
+    e.preventDefault();
+    handleRemoveSevMember(id, email);
+    setOpenedParticipantId(null);
+  };
 
   return (
     <div>
@@ -39,6 +57,33 @@ const MembersDetails = (props: any) => {
                     ''
                   )}
                 </div>
+                {Role.includes('Admin') && (
+                  <div>
+                    <CloseIcon
+                      onClick={() => setOpenedParticipantId(participant.id)}
+                    />
+
+                    <ModalDialog
+                      open={openedParticipantId === participant.id}
+                      onClose={() => setOpenedParticipantId(null)}
+                      header="Are you sure you want to remove this member? "
+                      customFooter={
+                        <div className={styles['modal-footer']}>
+                          <Button
+                            onClick={e =>
+                              onClickModalHandler(e, data.id, participant.email)
+                            }
+                            className={styles['modal-footer-delete-button']}
+                          >
+                            Remove member
+                          </Button>
+                        </div>
+                      }
+                    >
+                      You are removing {participant?.name} from {data.name}.
+                    </ModalDialog>
+                  </div>
+                )}
               </div>
             ))}
         </>