Add frontend, backend and CLI

frontend/components/basic/dialog/AddIncidentContactDialog.js

@@ -0,0 +1,95 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import InputField from "../InputField";
+import addIncidentContact from "../../../pages/api/organization/addIncidentContact";
+import Button from "../buttons/Button";
+
+const AddIncidentContactDialog = ({
+	isOpen,
+	closeModal,
+	workspaceId,
+	incidentContacts,
+	setIncidentContacts,
+}) => {
+	let [incidentContactEmail, setIncidentContactEmail] = useState("");
+
+	const submit = () => {
+		setIncidentContacts(
+			incidentContacts?.length > 0
+				? incidentContacts.concat([incidentContactEmail])
+				: [incidentContactEmail]
+		);
+		addIncidentContact(localStorage.getItem("orgData.id"), incidentContactEmail);
+		closeModal();
+	};
+	return (
+		<div>
+			<Transition appear show={isOpen} as={Fragment}>
+				<Dialog as="div" className="relative z-10" onClose={closeModal}>
+					<Transition.Child
+						as={Fragment}
+						enter="ease-out duration-300"
+						enterFrom="opacity-0"
+						enterTo="opacity-100"
+						leave="ease-in duration-200"
+						leaveFrom="opacity-100"
+						leaveTo="opacity-0"
+					>
+						<div className="fixed inset-0 bg-black bg-opacity-70" />
+					</Transition.Child>
+
+					<div className="fixed inset-0 overflow-y-auto">
+						<div className="flex min-h-full items-center justify-center p-4 text-center">
+							<Transition.Child
+								as={Fragment}
+								enter="ease-out duration-300"
+								enterFrom="opacity-0 scale-95"
+								enterTo="opacity-100 scale-100"
+								leave="ease-in duration-200"
+								leaveFrom="opacity-100 scale-100"
+								leaveTo="opacity-0 scale-95"
+							>
+								<Dialog.Panel className="w-full max-w-md transform overflow-hidden rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+									<Dialog.Title
+										as="h3"
+										className="text-lg font-medium leading-6 text-gray-400"
+									>
+										Add an Incident Contact
+									</Dialog.Title>
+									<div className="mt-2 mb-2">
+										<p className="text-sm text-gray-500">
+											This contact will be notified in the
+											unlikely event of a severe incident.
+										</p>
+									</div>
+									<div className="max-h-28">
+										<InputField
+											label="Email"
+											onChangeHandler={
+												setIncidentContactEmail
+											}
+											type="varName"
+											value={incidentContactEmail}
+											placeholder=""
+											isRequired
+										/>
+									</div>
+									<div className="mt-6 max-w-max">
+										<Button
+											onButtonPressed={submit}
+											color="mineshaft"
+											text="Add Incident Contact"
+											size="md"
+										/>
+									</div>
+								</Dialog.Panel>
+							</Transition.Child>
+						</div>
+					</div>
+				</Dialog>
+			</Transition>
+		</div>
+	);
+};
+
+export default AddIncidentContactDialog;