ref(frontend): update to absolute import

frontend/components/basic/dialog/AddIncidentContactDialog.js

@@ -1,7 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
 import InputField from "../InputField";
-import addIncidentContact from "../../../pages/api/organization/addIncidentContact";
+import addIncidentContact from "~/pages/api/organization/addIncidentContact";
 import Button from "../buttons/Button";
 
 const AddIncidentContactDialog = ({

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -4,9 +4,9 @@ import ListBox from "../Listbox";
 import { useRouter } from "next/router";
 import Button from "../buttons/Button";
 import InputField from "../InputField";
-import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 import { decryptAssymmetric, encryptAssymmetric } from "../../utilities/crypto";
-import addServiceToken from "../../../pages/api/serviceToken/addServiceToken";
+import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
 import nacl from "tweetnacl";
 import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -28,7 +28,7 @@ const AddServiceTokenDialog = ({
 	isOpen,
 	closeModal,
 	workspaceId,
-	workspaceName
+	workspaceName,
 }) => {
 	const router = useRouter();
 	const [serviceToken, setServiceToken] = useState("");
@@ -38,52 +38,52 @@ const AddServiceTokenDialog = ({
 	const [serviceTokenCopied, setServiceTokenCopied] = useState(false);
 
 	const generateServiceToken = async () => {
-		const latestFileKey = await getLatestFileKey(workspaceId); 
+		const latestFileKey = await getLatestFileKey(workspaceId);
 
 		const key = decryptAssymmetric({
 			ciphertext: latestFileKey.latestKey.encryptedKey,
 			nonce: latestFileKey.latestKey.nonce,
 			publicKey: latestFileKey.latestKey.sender.publicKey,
-			privateKey: localStorage.getItem("PRIVATE_KEY")
+			privateKey: localStorage.getItem("PRIVATE_KEY"),
 		});
 
 		// generate new public/private key pair
 		const pair = nacl.box.keyPair();
 		const publicKey = nacl.util.encodeBase64(pair.publicKey);
 		const privateKey = nacl.util.encodeBase64(pair.secretKey);
-		
+
 		// encrypt workspace key under newly-generated public key
 		const { ciphertext: encryptedKey, nonce } = encryptAssymmetric({
 			plaintext: key,
 			publicKey,
-			privateKey
+			privateKey,
 		});
 
 		let newServiceToken = await addServiceToken({
-			name: serviceTokenName, 
-			workspaceId, 
+			name: serviceTokenName,
+			workspaceId,
 			environment: envMapping[serviceTokenEnv],
-			expiresIn: expiryMapping[serviceTokenExpiresIn], 
-			publicKey, 
+			expiresIn: expiryMapping[serviceTokenExpiresIn],
+			publicKey,
 			encryptedKey,
-			nonce
-		})
-		
-		const serviceToken = newServiceToken + ',' + privateKey;
+			nonce,
+		});
+
+		const serviceToken = newServiceToken + "," + privateKey;
 		setServiceToken(serviceToken);
-	}
+	};
 
 	function copyToClipboard() {
 		// Get the text field
 		var copyText = document.getElementById("serviceToken");
-	  
+
 		// Select the text field
 		copyText.select();
 		copyText.setSelectionRange(0, 99999); // For mobile devices
-	  
-		 // Copy the text inside the text field
+
+		// Copy the text inside the text field
 		navigator.clipboard.writeText(copyText.value);
-	  
+
 		setServiceTokenCopied(true);
 		setTimeout(() => setServiceTokenCopied(false), 2000);
 		// Alert the copied text
@@ -94,7 +94,7 @@ const AddServiceTokenDialog = ({
 		closeModal();
 		setServiceTokenName("");
 		setServiceToken("");
-	}
+	};
 
 	return (
 		<div className="z-50">
@@ -123,18 +123,25 @@ const AddServiceTokenDialog = ({
 								leaveFrom="opacity-100 scale-100"
 								leaveTo="opacity-0 scale-95"
 							>
-								{serviceToken == "" 
-								?	<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+								{serviceToken == "" ? (
+									<Dialog.Panel className="w-full max-w-md transform 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 z-50"
 										>
-											Add a service token for {workspaceName}
+											Add a service token for{" "}
+											{workspaceName}
 										</Dialog.Title>
 										<div className="mt-2 mb-4">
 											<div className="flex flex-col">
 												<p className="text-sm text-gray-500">
-													Specify the name, environment, and expiry period. When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.
+													Specify the name,
+													environment, and expiry
+													period. When a token is
+													generated, you will only be
+													able to see it once before
+													it disappears. Make sure to
+													save it somewhere.
 												</p>
 											</div>
 										</div>
@@ -154,7 +161,12 @@ const AddServiceTokenDialog = ({
 											<ListBox
 												selected={serviceTokenEnv}
 												onChange={setServiceTokenEnv}
-												data={["Development", "Staging", "Production", "Testing"]}
+												data={[
+													"Development",
+													"Staging",
+													"Production",
+													"Testing",
+												]}
 												width="full"
 												text="Environment: "
 											/>
@@ -162,8 +174,14 @@ const AddServiceTokenDialog = ({
 										<div className="max-h-28">
 											<ListBox
 												selected={serviceTokenExpiresIn}
-												onChange={setServiceTokenExpiresIn}
-												data={["1 day", "7 days", "1 month"]}
+												onChange={
+													setServiceTokenExpiresIn
+												}
+												data={[
+													"1 day",
+													"7 days",
+													"1 month",
+												]}
 												width="full"
 												text="Expires in: "
 											/>
@@ -171,17 +189,24 @@ const AddServiceTokenDialog = ({
 										<div className="max-w-max">
 											<div className="mt-6 flex flex-col justify-start w-max">
 												<Button
-													onButtonPressed={() => generateServiceToken()}
+													onButtonPressed={() =>
+														generateServiceToken()
+													}
 													color="mineshaft"
 													text="Add Service Token"
 													textDisabled="Add Service Token"
 													size="md"
-													active={serviceTokenName == "" ? false : true}
+													active={
+														serviceTokenName == ""
+															? false
+															: true
+													}
 												/>
 											</div>
 										</div>
 									</Dialog.Panel>
-								:	<Dialog.Panel className="w-full max-w-md transform rounded-md bg-bunker-800 border border-gray-700 p-6 text-left align-middle shadow-xl transition-all">
+								) : (
+									<Dialog.Panel className="w-full max-w-md transform 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 z-50"
@@ -191,17 +216,40 @@ const AddServiceTokenDialog = ({
 										<div className="mt-2 mb-4">
 											<div className="flex flex-col">
 												<p className="text-sm text-gray-500">
-													Once you close this popup, you will never see your service token again
+													Once you close this popup,
+													you will never see your
+													service token again
 												</p>
 											</div>
 										</div>
 										<div className="w-full">
 											<div className="flex justify-end items-center bg-white/[0.07] text-base mt-2 mr-2 rounded-md text-gray-400 w-full h-36">
-												<input type="text" value={serviceToken} id="serviceToken" className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"></input>
-												<div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">{serviceToken}</div>
+												<input
+													type="text"
+													value={serviceToken}
+													id="serviceToken"
+													className="invisible bg-white/0 text-gray-400 py-2 w-full px-2 min-w-full outline-none"
+												></input>
+												<div className="bg-white/0 max-w-md text-sm text-gray-400 py-2 w-full pl-14 pr-2 break-words outline-none">
+													{serviceToken}
+												</div>
 												<div className="group font-normal h-full relative inline-block text-gray-400 underline hover:text-primary duration-200">
-													<button onClick={copyToClipboard} className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200">
-														{serviceTokenCopied ? <FontAwesomeIcon icon={faCheck} className="pr-0.5"/> : <FontAwesomeIcon icon={faCopy} />}
+													<button
+														onClick={
+															copyToClipboard
+														}
+														className="h-full pl-3.5 pr-4 border-l border-white/20 py-2 hover:bg-white/[0.12] duration-200"
+													>
+														{serviceTokenCopied ? (
+															<FontAwesomeIcon
+																icon={faCheck}
+																className="pr-0.5"
+															/>
+														) : (
+															<FontAwesomeIcon
+																icon={faCopy}
+															/>
+														)}
 													</button>
 													<span className="absolute hidden group-hover:flex group-hover:animate-popup duration-300 w-28 -left-8 -top-20 translate-y-full px-3 py-2 bg-chicago-900 rounded-md text-center text-gray-400 text-sm">
 														Click to Copy
@@ -211,14 +259,16 @@ const AddServiceTokenDialog = ({
 										</div>
 										<div className="mt-6 flex flex-col justify-start w-max">
 											<Button
-												onButtonPressed={() => closeAddServiceTokenModal()}
+												onButtonPressed={() =>
+													closeAddServiceTokenModal()
+												}
 												color="mineshaft"
 												text="Close"
 												size="md"
 											/>
 										</div>
 									</Dialog.Panel>
-									}
+								)}
 							</Transition.Child>
 						</div>
 					</div>

frontend/components/basic/layout.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 
 import NavBarDashboard from "../navigation/NavBarDashboard";
 import Listbox from "./Listbox";
-import getWorkspaces from "../../pages/api/workspace/getWorkspaces";
+import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
 	faHouse,
@@ -14,11 +14,11 @@ import {
 	faLink,
 } from "@fortawesome/free-solid-svg-icons";
 import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
-import createWorkspace from "../../pages/api/workspace/createWorkspace";
-import getOrganizationUserProjects from "../../pages/api/organization/GetOrgUserProjects";
-import getOrganizationUsers from "../../pages/api/organization/GetOrgUsers";
-import addUserToWorkspace from "../../pages/api/workspace/addUserToWorkspace";
-import getOrganizations from "../../pages/api/organization/getOrgs";
+import createWorkspace from "~/pages/api/workspace/createWorkspace";
+import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
+import getOrganizationUsers from "~/pages/api/organization/GetOrgUsers";
+import addUserToWorkspace from "~/pages/api/workspace/addUserToWorkspace";
+import getOrganizations from "~/pages/api/organization/getOrgs";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 
 import { decryptAssymmetric, encryptAssymmetric } from "../utilities/crypto";
@@ -48,9 +48,7 @@ export default function Layout({ children }) {
 		setLoading(true);
 		setTimeout(() => setLoading(false), 1500);
 		const workspaces = await getWorkspaces();
-		const currentWorkspaces = workspaces.map(
-			(workspace) => workspace.name
-		);
+		const currentWorkspaces = workspaces.map((workspace) => workspace.name);
 		if (!currentWorkspaces.includes(workspaceName)) {
 			const newWorkspace = await createWorkspace(
 				workspaceName,
@@ -141,7 +139,10 @@ export default function Layout({ children }) {
 
 	useEffect(async () => {
 		// Put a user in a workspace if they're not in one yet
-		if (localStorage.getItem("orgData.id") == null || localStorage.getItem("orgData.id") == "") {
+		if (
+			localStorage.getItem("orgData.id") == null ||
+			localStorage.getItem("orgData.id") == ""
+		) {
 			const userOrgs = await getOrganizations();
 			localStorage.setItem("orgData.id", userOrgs[0]._id);
 		}
@@ -150,7 +151,11 @@ export default function Layout({ children }) {
 			orgId: localStorage.getItem("orgData.id"),
 		});
 		let userWorkspaces = orgUserProjects;
-		if (userWorkspaces.length == 0 && (router.asPath != "/noprojects" && !router.asPath.includes("settings"))) {
+		if (
+			userWorkspaces.length == 0 &&
+			router.asPath != "/noprojects" &&
+			!router.asPath.includes("settings")
+		) {
 			router.push("/noprojects");
 		} else if (router.asPath != "/noprojects") {
 			const intendedWorkspaceId = router.asPath
@@ -158,7 +163,9 @@ export default function Layout({ children }) {
 				[router.asPath.split("/").length - 1].split("?")[0];
 
 			// If a user is not a member of a workspace they are trying to access, just push them to one of theirs
-			if (intendedWorkspaceId != "heroku" && !userWorkspaces
+			if (
+				intendedWorkspaceId != "heroku" &&
+				!userWorkspaces
 					.map((workspace) => workspace._id)
 					.includes(intendedWorkspaceId)
 			) {
@@ -207,7 +214,10 @@ export default function Layout({ children }) {
 						workspaceMapping[workspaceSelected] +
 						"?Development"
 				);
-				localStorage.setItem("projectData.id", workspaceMapping[workspaceSelected])
+				localStorage.setItem(
+					"projectData.id",
+					workspaceMapping[workspaceSelected]
+				);
 			}
 		} catch (error) {
 			console.log(error);
@@ -226,8 +236,8 @@ export default function Layout({ children }) {
 								<div className="text-gray-400 self-start ml-1 mb-1 text-xs font-semibold tracking-wide">
 									PROJECT
 								</div>
-								{workspaceList.length>0 
-									? <Listbox
+								{workspaceList.length > 0 ? (
+									<Listbox
 										selected={workspaceSelected}
 										onChange={setWorkspaceSelected}
 										data={workspaceList}
@@ -235,58 +245,67 @@ export default function Layout({ children }) {
 										text=""
 										workspaceMapping={workspaceMapping}
 									/>
-									: <Button
+								) : (
+									<Button
 										text="Add Project"
 										onButtonPressed={openModal}
 										color="mineshaft"
 										size="md"
 										icon={faPlus}
 									/>
-								}
+								)}
 							</div>
 							<ul>
-								{workspaceList.length > 0 && menuItems.map(({ href, title, emoji }) => (
-									<li className="mt-1.5 mx-2" key={title}>
-										{router.asPath.split("/")[1] ===
-											href.split("/")[1] &&
-										(["project", "billing", "org", "personal"].includes(
-											router.asPath.split("/")[2]
-										)
-											? router.asPath.split("/")[2] ===
-											  href.split("/")[2]
-											: true) ? (
-											<div
-												className={`flex p-2 text-white text-sm rounded cursor-pointer bg-mineshaft-50/10`}
-											>
-												<div className="bg-primary w-1 rounded-xl mr-1"></div>
-												<p className="ml-2 mr-4">
-													{emoji}
-												</p>
-												{title}
-											</div>
-										) : router.asPath == "/noprojects" ? (
-											<div
-												className={`flex p-2 text-white text-sm rounded`}
-											>
-												<p className="ml-2 mr-4">
-													{emoji}
-												</p>
-												{title}
-											</div>
-										) : (
-											<Link href={href}>
+								{workspaceList.length > 0 &&
+									menuItems.map(({ href, title, emoji }) => (
+										<li className="mt-1.5 mx-2" key={title}>
+											{router.asPath.split("/")[1] ===
+												href.split("/")[1] &&
+											([
+												"project",
+												"billing",
+												"org",
+												"personal",
+											].includes(
+												router.asPath.split("/")[2]
+											)
+												? router.asPath.split(
+														"/"
+												  )[2] === href.split("/")[2]
+												: true) ? (
 												<div
-													className={`flex p-2 text-white text-sm rounded cursor-pointer hover:bg-mineshaft-50/5`}
+													className={`flex p-2 text-white text-sm rounded cursor-pointer bg-mineshaft-50/10`}
+												>
+													<div className="bg-primary w-1 rounded-xl mr-1"></div>
+													<p className="ml-2 mr-4">
+														{emoji}
+													</p>
+													{title}
+												</div>
+											) : router.asPath ==
+											  "/noprojects" ? (
+												<div
+													className={`flex p-2 text-white text-sm rounded`}
 												>
 													<p className="ml-2 mr-4">
 														{emoji}
 													</p>
 													{title}
 												</div>
-											</Link>
-										)}
-									</li>
-								))}
+											) : (
+												<Link href={href}>
+													<div
+														className={`flex p-2 text-white text-sm rounded cursor-pointer hover:bg-mineshaft-50/5`}
+													>
+														<p className="ml-2 mr-4">
+															{emoji}
+														</p>
+														{title}
+													</div>
+												</Link>
+											)}
+										</li>
+									))}
 							</ul>
 						</nav>
 					</aside>

frontend/components/basic/table/UserTable.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { useRouter } from "next/router";
 import Listbox from "../Listbox";
-import uploadKeys from "../../../pages/api/workspace/uploadKeys";
-import getLatestFileKey from "../../../pages/api/workspace/getLatestFileKey";
-import deleteUserFromWorkspace from "../../../pages/api/workspace/deleteUserFromWorkspace";
-import changeUserRoleInWorkspace from "../../../pages/api/workspace/changeUserRoleInWorkspace";
-import deleteUserFromOrganization from "../../../pages/api/organization/deleteUserFromOrganization";
+import uploadKeys from "~/pages/api/workspace/uploadKeys";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+import deleteUserFromWorkspace from "~/pages/api/workspace/deleteUserFromWorkspace";
+import changeUserRoleInWorkspace from "~/pages/api/workspace/changeUserRoleInWorkspace";
+import deleteUserFromOrganization from "~/pages/api/organization/deleteUserFromOrganization";
 import { faX } from "@fortawesome/free-solid-svg-icons";
 import Button from "../buttons/Button";
 import guidGenerator from "../../utilities/randomId";
@@ -145,7 +145,10 @@ const UserTable = ({
 							)
 							.map((row, index) => {
 								return (
-									<tr key={guidGenerator()} className="bg-bunker-800 hover:bg-bunker-800/5">
+									<tr
+										key={guidGenerator()}
+										className="bg-bunker-800 hover:bg-bunker-800/5"
+									>
 										<td className="pl-6 py-2 border-mineshaft-700 border-t text-gray-300">
 											{row.firstName}
 										</td>