feat: added new secret input component and updated toolbar key special prop to innerKey

frontend/src/views/Settings/OrgSettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsTable.tsx

@@ -1,9 +1,5 @@
 import { useState } from "react";
-import {
-  faContactBook,
-  faMagnifyingGlass,
-  faTrash
-} from "@fortawesome/free-solid-svg-icons";
+import { faContactBook, faMagnifyingGlass, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
@@ -23,13 +19,11 @@ import {
 } from "@app/components/v2";
 import { useOrganization } from "@app/context";
 import { usePopUp } from "@app/hooks";
-import {
-    useDeleteIncidentContact,
-    useGetOrgIncidentContact} from "@app/hooks/api";
+import { useDeleteIncidentContact, useGetOrgIncidentContact } from "@app/hooks/api";
 
 export const OrgIncidentContactsTable = () => {
-    const { createNotification } = useNotificationContext();
-    const { currentOrg } = useOrganization();
+  const { createNotification } = useNotificationContext();
+  const { currentOrg } = useOrganization();
   const { data: contacts, isLoading } = useGetOrgIncidentContact(currentOrg?._id ?? "");
   const [searchContact, setSearchContact] = useState("");
   const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
@@ -40,71 +34,71 @@ export const OrgIncidentContactsTable = () => {
 
   const onRemoveIncidentContact = async () => {
     try {
-        const incidentContactEmail = (popUp?.removeContact?.data as { email: string })?.email;
-        
-        if (!currentOrg?._id) return;
-        await mutateAsync({ 
-            orgId: currentOrg._id, 
-            email: incidentContactEmail
-        });
+      const incidentContactEmail = (popUp?.removeContact?.data as { email: string })?.email;
 
-        createNotification({
-            text: "Successfully removed incident contact",
-            type: "success"
-        });
-        
-        handlePopUpClose("removeContact");
+      if (!currentOrg?._id) return;
+      await mutateAsync({
+        orgId: currentOrg._id,
+        email: incidentContactEmail
+      });
+
+      createNotification({
+        text: "Successfully removed incident contact",
+        type: "success"
+      });
+
+      handlePopUpClose("removeContact");
     } catch (err) {
-        console.error(err);
-        createNotification({
-            text: "Failed to remove incident contact",
-            type: "error"
-        });
+      console.error(err);
+      createNotification({
+        text: "Failed to remove incident contact",
+        type: "error"
+      });
     }
   };
 
-  const filteredContacts = contacts ? contacts.filter(({ email }) =>
-    email.toLocaleLowerCase().includes(searchContact)
-  ) : [];
+  const filteredContacts = contacts
+    ? contacts.filter(({ email }) => email.toLocaleLowerCase().includes(searchContact))
+    : [];
 
   return (
     <div>
-        <Input
-            value={searchContact}
-            onChange={(e) => setSearchContact(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search incident contact by email..."
-        />
-        <TableContainer className="mt-4">
-          <Table>
-            <THead>
-              <Tr>
-                <Th>Email</Th>
-                <Th aria-label="actions" />
+      <Input
+        value={searchContact}
+        onChange={(e) => setSearchContact(e.target.value)}
+        leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
+        placeholder="Search incident contact by email..."
+      />
+      <TableContainer className="mt-4">
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Email</Th>
+              <Th aria-label="actions" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isLoading && <TableSkeleton columns={2} innerKey="incident-contact" />}
+            {filteredContacts?.map(({ email }) => (
+              <Tr key={email}>
+                <Td className="w-full">{email}</Td>
+                <Td className="mr-4">
+                  <IconButton
+                    ariaLabel="delete"
+                    colorSchema="danger"
+                    onClick={() => handlePopUpOpen("removeContact", { email })}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                  </IconButton>
+                </Td>
               </Tr>
-            </THead>
-            <TBody>
-              {isLoading && <TableSkeleton columns={2} key="incident-contact" />}
-              {filteredContacts?.map(({ email }) => (
-                <Tr key={email}>
-                  <Td className="w-full">{email}</Td>
-                  <Td className="mr-4">
-                    <IconButton
-                      ariaLabel="delete"
-                      colorSchema="danger"
-                      onClick={() => handlePopUpOpen("removeContact", { email })}
-                    >
-                      <FontAwesomeIcon icon={faTrash} />
-                    </IconButton>
-                  </Td>
-                </Tr>
-              ))}
-            </TBody>
-          </Table>
-          {filteredContacts?.length === 0 && !isLoading && (
-            <EmptyState title="No incident contacts found" icon={faContactBook} />
-          )}
-        </TableContainer>
+            ))}
+          </TBody>
+        </Table>
+        {filteredContacts?.length === 0 && !isLoading && (
+          <EmptyState title="No incident contacts found" icon={faContactBook} />
+        )}
+      </TableContainer>
       <DeleteActionModal
         isOpen={popUp.removeContact.isOpen}
         deleteKey="remove"