feat: renamed old frontend and fixed some minor bugs

frontend/src/pages/organization/SettingsPage/components/OrgIncidentContactsSection/AddOrgIncidentContactModal.tsx

@@ -0,0 +1,104 @@
+import { Controller, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+
+import { createNotification } from "@app/components/notifications";
+import { Button, FormControl, Input, Modal, ModalContent } from "@app/components/v2";
+import { useOrganization } from "@app/context";
+import { useAddIncidentContact } from "@app/hooks/api";
+import { useFetchServerStatus } from "@app/hooks/api/serverDetails";
+import { UsePopUpState } from "@app/hooks/usePopUp";
+
+const addContactFormSchema = z.object({
+  email: z.string().email().trim()
+});
+
+type TAddContactForm = z.infer<typeof addContactFormSchema>;
+
+type Props = {
+  popUp: UsePopUpState<["addContact"]>;
+  handlePopUpClose: (popUpName: keyof UsePopUpState<["addContact"]>) => void;
+  handlePopUpToggle: (popUpName: keyof UsePopUpState<["addContact"]>, state?: boolean) => void;
+};
+
+export const AddOrgIncidentContactModal = ({
+  popUp,
+  handlePopUpClose,
+  handlePopUpToggle
+}: Props) => {
+  const { currentOrg } = useOrganization();
+  const { data: serverDetails } = useFetchServerStatus();
+  const { control, handleSubmit, reset } = useForm<TAddContactForm>({
+    resolver: zodResolver(addContactFormSchema)
+  });
+
+  const { mutateAsync, isPending } = useAddIncidentContact();
+
+  const onFormSubmit = async ({ email }: TAddContactForm) => {
+    try {
+      if (!currentOrg?.id) return;
+
+      await mutateAsync({
+        orgId: currentOrg.id,
+        email
+      });
+
+      createNotification({
+        text: "Successfully added incident contact",
+        type: "success"
+      });
+
+      if (serverDetails?.emailConfigured) {
+        handlePopUpClose("addContact");
+      }
+
+      reset();
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to add incident contact",
+        type: "error"
+      });
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={popUp?.addContact?.isOpen}
+      onOpenChange={(isOpen) => {
+        handlePopUpToggle("addContact", isOpen);
+        reset();
+      }}
+    >
+      <ModalContent
+        title="Add an Incident Contact"
+        subTitle="This contact will be notified in the unlikely event of a severe incident."
+      >
+        <form onSubmit={handleSubmit(onFormSubmit)}>
+          <Controller
+            control={control}
+            defaultValue=""
+            name="email"
+            render={({ field, fieldState: { error } }) => (
+              <FormControl label="Email" isError={Boolean(error)} errorText={error?.message}>
+                <Input {...field} />
+              </FormControl>
+            )}
+          />
+          <div className="mt-8 flex items-center space-x-4">
+            <Button size="sm" type="submit" isLoading={isPending} isDisabled={isPending}>
+              Add Incident Contact
+            </Button>
+            <Button
+              colorSchema="secondary"
+              variant="plain"
+              onClick={() => handlePopUpClose("addContact")}
+            >
+              Cancel
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsSection.tsx

@@ -0,0 +1,53 @@
+import { useTranslation } from "react-i18next";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { OrgPermissionCan, PermissionDeniedBanner } from "@app/components/permissions";
+import { Button } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrgPermission } from "@app/context";
+import { usePopUp } from "@app/hooks";
+
+import { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal";
+import { OrgIncidentContactsTable } from "./OrgIncidentContactsTable";
+
+export const OrgIncidentContactsSection = () => {
+  const { t } = useTranslation();
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "addContact"
+  ] as const);
+  const { permission } = useOrgPermission();
+
+  return (
+    <>
+      <hr className="border-mineshaft-600" />
+      <div className="flex items-center justify-between pt-4">
+        <p className="text-md text-mineshaft-100">{t("section.incident.incident-contacts")}</p>
+        <OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.IncidentAccount}>
+          {(isAllowed) => (
+            <Button
+              colorSchema="secondary"
+              type="submit"
+              isDisabled={!isAllowed}
+              leftIcon={<FontAwesomeIcon icon={faPlus} />}
+              onClick={() => handlePopUpOpen("addContact")}
+            >
+              Add contact
+            </Button>
+          )}
+        </OrgPermissionCan>
+      </div>
+      <div className="py-4">
+        {permission.can(OrgPermissionActions.Read, OrgPermissionSubjects.IncidentAccount) ? (
+          <OrgIncidentContactsTable />
+        ) : (
+          <PermissionDeniedBanner />
+        )}
+      </div>
+      <AddOrgIncidentContactModal
+        popUp={popUp}
+        handlePopUpClose={handlePopUpClose}
+        handlePopUpToggle={handlePopUpToggle}
+      />
+    </>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/OrgIncidentContactsSection/OrgIncidentContactsTable.tsx

@@ -0,0 +1,119 @@
+import { useState } from "react";
+import { faContactBook, faMagnifyingGlass, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { createNotification } from "@app/components/notifications";
+import { OrgPermissionCan } from "@app/components/permissions";
+import {
+  DeleteActionModal,
+  EmptyState,
+  IconButton,
+  Input,
+  Table,
+  TableContainer,
+  TableSkeleton,
+  TBody,
+  Td,
+  Th,
+  THead,
+  Tr
+} from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { usePopUp } from "@app/hooks";
+import { useDeleteIncidentContact, useGetOrgIncidentContact } from "@app/hooks/api";
+
+export const OrgIncidentContactsTable = () => {
+  const { currentOrg } = useOrganization();
+  const { data: contacts, isPending } = useGetOrgIncidentContact(currentOrg?.id ?? "");
+  const [searchContact, setSearchContact] = useState("");
+  const { handlePopUpToggle, popUp, handlePopUpOpen, handlePopUpClose } = usePopUp([
+    "removeContact",
+    "setUpEmail"
+  ] as const);
+  const { mutateAsync } = useDeleteIncidentContact();
+
+  const onRemoveIncidentContact = async () => {
+    try {
+      const incidentContactId = (popUp?.removeContact?.data as { id: string })?.id;
+
+      if (!currentOrg?.id) return;
+      await mutateAsync({
+        orgId: currentOrg.id,
+        incidentContactId
+      });
+
+      createNotification({
+        text: "Successfully removed incident contact",
+        type: "success"
+      });
+
+      handlePopUpClose("removeContact");
+    } catch (err) {
+      console.error(err);
+      createNotification({
+        text: "Failed to remove incident contact",
+        type: "error"
+      });
+    }
+  };
+
+  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" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isPending && <TableSkeleton columns={2} innerKey="incident-contact" />}
+            {filteredContacts?.map(({ email, id }) => (
+              <Tr key={email}>
+                <Td className="w-full">{email}</Td>
+                <Td className="mr-4">
+                  <OrgPermissionCan
+                    I={OrgPermissionActions.Delete}
+                    an={OrgPermissionSubjects.IncidentAccount}
+                  >
+                    {(isAllowed) => (
+                      <IconButton
+                        ariaLabel="delete"
+                        colorSchema="danger"
+                        onClick={() => handlePopUpOpen("removeContact", { email, id })}
+                        isDisabled={!isAllowed}
+                      >
+                        <FontAwesomeIcon icon={faTrash} />
+                      </IconButton>
+                    )}
+                  </OrgPermissionCan>
+                </Td>
+              </Tr>
+            ))}
+          </TBody>
+        </Table>
+        {filteredContacts?.length === 0 && !isPending && (
+          <EmptyState title="No incident contacts found" icon={faContactBook} />
+        )}
+      </TableContainer>
+      <DeleteActionModal
+        isOpen={popUp.removeContact.isOpen}
+        deleteKey="remove"
+        title="Do you want to remove this email from incident contact?"
+        onChange={(isOpen) => handlePopUpToggle("removeContact", isOpen)}
+        onDeleteApproved={onRemoveIncidentContact}
+      />
+    </div>
+  );
+};

frontend/src/pages/organization/SettingsPage/components/OrgIncidentContactsSection/index.tsx

@@ -0,0 +1,2 @@
+export { AddOrgIncidentContactModal } from "./AddOrgIncidentContactModal";
+export { OrgIncidentContactsSection } from "./OrgIncidentContactsSection";