ref(frontend): apply eslint simple import sort

frontend/components/RouteGuard.js

@@ -1,7 +1,9 @@
-import { useState, useEffect } from "react";
-import { useRouter } from "next/router";
-import checkAuth from "~/pages/api/auth/CheckAuth";
+import { useEffect,useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/router";
+
+import checkAuth from "~/pages/api/auth/CheckAuth";
+
 import { publicPaths } from "../const";
 
 // #TODO: finish spinner only when the data loads fully

frontend/components/analytics/posthog.js

@@ -1,4 +1,5 @@
 import posthog from "posthog-js";
+
 import { ENV, POSTHOG_API_KEY, POSTHOG_HOST, TELEMETRY_ENABLED } from "../utilities/config";
 
 export const initPostHog = () => {

frontend/components/basic/Error.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function Error({ text }) {
 	return (

frontend/components/basic/InputField.js

@@ -1,6 +1,6 @@
 import React from "react";
-import Error from "./Error";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useState } from "react";
+import { useRouter } from "next/router";
 import {
 	faCircle,
 	faCircleExclamation,
@@ -8,9 +8,10 @@ import {
 	faEye,
 	faEyeSlash,
 } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import guidGenerator from "../utilities/randomId";
-import { useState } from "react";
-import { useRouter } from "next/router";
+import Error from "./Error";
 
 const InputField = (props) => {
 	const [passwordVisible, setPasswordVisible] = useState(false);

frontend/components/basic/Listbox.js

@@ -1,9 +1,9 @@
 import React from "react";
-import { Listbox, Transition } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faPlus, faAngleDown } from "@fortawesome/free-solid-svg-icons";
 import { Fragment } from "react";
 import { useRouter } from "next/router";
+import { faAngleDown,faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Listbox, Transition } from "@headlessui/react";
 
 /**
  * This is the component that we use for drop down lists.

frontend/components/basic/buttons/Button.js

@@ -1,8 +1,8 @@
 import React from "react";
-import Link from "next/link";
 import Image from "next/image";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Link from "next/link";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 var classNames = require("classnames");
 

frontend/components/basic/dialog/AddIncidentContactDialog.js

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

frontend/components/basic/dialog/AddProjectMemberDialog.js

@@ -1,8 +1,9 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import ListBox from "../Listbox";
 import { useRouter } from "next/router";
+import { Dialog, Transition } from "@headlessui/react";
+
 import Button from "../buttons/Button";
+import ListBox from "../Listbox";
 
 const AddProjectMemberDialog = ({
 	isOpen,

frontend/components/basic/dialog/AddServiceTokenDialog.js

@@ -1,15 +1,17 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-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 { decryptAssymmetric, encryptAssymmetric } from "../../utilities/crypto";
-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";
+import { Dialog, Transition } from "@headlessui/react";
+import nacl from "tweetnacl";
+
+import addServiceToken from "~/pages/api/serviceToken/addServiceToken";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+
+import { decryptAssymmetric, encryptAssymmetric } from "../../utilities/crypto";
+import Button from "../buttons/Button";
+import InputField from "../InputField";
+import ListBox from "../Listbox";
 
 const envMapping = {
 	Development: "dev",

frontend/components/basic/dialog/AddUserDialog.js

@@ -1,9 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
-import InputField from "../InputField";
 import { useRouter } from "next/router";
-import Button from "../buttons/Button";
+import { Dialog, Transition } from "@headlessui/react";
+
 import { STRIPE_PRODUCT_STARTER } from "../../utilities/config";
+import Button from "../buttons/Button";
+import InputField from "../InputField";
 
 const AddUserDialog = ({
 	isOpen,

frontend/components/basic/dialog/AddWorkspaceDialog.js

@@ -1,9 +1,10 @@
-import { Dialog, Transition } from "@headlessui/react";
 import { Fragment, useState } from "react";
-import InputField from "../InputField";
 import Image from "next/image";
-import { Checkbox } from "../table/Checkbox";
+import { Dialog, Transition } from "@headlessui/react";
+
 import Button from "../buttons/Button";
+import InputField from "../InputField";
+import { Checkbox } from "../table/Checkbox";
 
 /**
  * The dialog modal for when the user wants to create a new workspace

frontend/components/basic/dialog/DeleteUserDialog.js

@@ -1,5 +1,6 @@
-import { Dialog, Transition } from '@headlessui/react'
 import { Fragment, useState } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+
 import InputField from '../InputField';
 
 // #TODO: USE THIS. Currently it's not. Kinda complicated to set up because of state.

frontend/components/basic/layout.js

@@ -1,29 +1,29 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-
-import NavBarDashboard from "../navigation/NavBarDashboard";
-import Listbox from "./Listbox";
-import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
-	faHouse,
-	faUser,
 	faGear,
-	faMobile,
+	faHouse,
 	faLink,
+	faMobile,
+	faUser,
 } from "@fortawesome/free-solid-svg-icons";
-import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
-import createWorkspace from "~/pages/api/workspace/createWorkspace";
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import getOrganizations from "~/pages/api/organization/getOrgs";
 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 createWorkspace from "~/pages/api/workspace/createWorkspace";
+import getWorkspaces from "~/pages/api/workspace/getWorkspaces";
 
+import NavBarDashboard from "../navigation/NavBarDashboard";
 import { decryptAssymmetric, encryptAssymmetric } from "../utilities/crypto";
 import Button from "./buttons/Button";
+import AddWorkspaceDialog from "./dialog/AddWorkspaceDialog";
+import Listbox from "./Listbox";
 
 export default function Layout({ children }) {
 	const router = useRouter();

frontend/components/basic/popups/BottomRightPopup.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function BottonRightPopup({
 	buttonText,

frontend/components/basic/table/ServiceTokenTable.js

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { faX } from "@fortawesome/free-solid-svg-icons";
-import Button from "../buttons/Button";
+
 import guidGenerator from "../../utilities/randomId";
+import Button from "../buttons/Button";
 
 const roles = ["admin", "user"];
 

frontend/components/basic/table/UserTable.js

@@ -1,14 +1,16 @@
 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 { faX } from "@fortawesome/free-solid-svg-icons";
-import Button from "../buttons/Button";
+
+import deleteUserFromOrganization from "~/pages/api/organization/deleteUserFromOrganization";
+import changeUserRoleInWorkspace from "~/pages/api/workspace/changeUserRoleInWorkspace";
+import deleteUserFromWorkspace from "~/pages/api/workspace/deleteUserFromWorkspace";
+import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
+import uploadKeys from "~/pages/api/workspace/uploadKeys";
+
 import guidGenerator from "../../utilities/randomId";
+import Button from "../buttons/Button";
+import Listbox from "../Listbox";
 
 const {
 	decryptAssymmetric,

frontend/components/billing/Card.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
+import { faCheck, faQuestionCircle } from "@fortawesome/free-solid-svg-icons";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export default function Card({ card, changeSelectedCard, selected }) {
 	function creditCardBrandIcon(cc) {

frontend/components/billing/Plan.js

@@ -1,4 +1,5 @@
 import React from "react";
+
 import StripeRedirect from "~/pages/api/organization/StripeRedirect";
 
 export default function Plan({ plan }) {

frontend/components/dashboard/DashboardInputField.js

@@ -1,6 +1,7 @@
 import React, { Fragment } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import guidGenerator from "../utilities/randomId";
 
 /**

frontend/components/dashboard/DropZone.js

@@ -1,13 +1,12 @@
 import { useState } from "react";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
-import guidGenerator from "../utilities/randomId";
-
-import Error from "../basic/Error";
 import Image from "next/image";
-import parse from "../utilities/file";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import Button from "../basic/buttons/Button";
+import Error from "../basic/Error";
+import parse from "../utilities/file";
+import guidGenerator from "../utilities/randomId";
 
 const DropZone = ({
 	setData,

frontend/components/navigation/NavBarDashboard.js

@@ -1,27 +1,27 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable react/jsx-key */
-import React, { useState, Fragment, useEffect } from "react";
-import { useRouter } from "next/router";
-
+import React, { Fragment, useEffect,useState } from "react";
 import Image from "next/image";
-
-import logout from "~/pages/api/auth/Logout";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "next/router";
+import { faGithub,faSlack } from "@fortawesome/free-brands-svg-icons";
 import { faCircleQuestion } from "@fortawesome/free-regular-svg-icons";
 import {
-	faBook,
-	faGear,
-	faCoins,
-	faRightFromBracket,
-	faEnvelope,
-	faPlus,
 	faAngleDown,
+	faBook,
+	faCoins,
+	faEnvelope,
+	faGear,
+	faPlus,
+	faRightFromBracket,
 } from "@fortawesome/free-solid-svg-icons";
-import { faSlack, faGithub } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Menu, Transition } from "@headlessui/react";
-import getUser from "~/pages/api/user/getUser";
-import getOrganizations from "~/pages/api/organization/getOrgs";
+
+import logout from "~/pages/api/auth/Logout";
 import getOrganization from "~/pages/api/organization/GetOrg";
+import getOrganizations from "~/pages/api/organization/getOrgs";
+import getUser from "~/pages/api/user/getUser";
+
 import guidGenerator from "../utilities/randomId";
 
 const supportOptions = [

frontend/components/navigation/NavHeader.js

@@ -1,14 +1,15 @@
 import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "next/router";
+import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
 import {
 	faAngleRight,
 	faQuestionCircle,
 } from "@fortawesome/free-solid-svg-icons";
-import { faCcMastercard, faCcVisa } from "@fortawesome/free-brands-svg-icons";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import getOrganization from "~/pages/api/organization/GetOrg";
 import getWorkspaceInfo from "~/pages/api/workspace/getWorkspaceInfo";
-import { useRouter } from "next/router";
 
 export default function NavHeader({ pageName, isProjectRelated }) {
 	const [orgName, setOrgName] = useState("");

frontend/components/utilities/SecurityClient.js

@@ -1,4 +1,5 @@
 import token from "~/pages/api/auth/Token";
+
 import { PATH } from "../../const";
 
 export default class SecurityClient {

frontend/components/utilities/attemptLogin.js

@@ -1,12 +1,13 @@
+import Aes256Gcm from "~/components/aes-256-gcm";
 import login1 from "~/pages/api/auth/Login1";
 import login2 from "~/pages/api/auth/Login2";
-import Aes256Gcm from "~/components/aes-256-gcm";
-import pushKeys from "./pushKeys";
-import { initPostHog } from "../analytics/posthog";
 import getOrganizations from "~/pages/api/organization/getOrgs";
 import getOrganizationUserProjects from "~/pages/api/organization/GetOrgUserProjects";
-import SecurityClient from "./SecurityClient";
+
+import { initPostHog } from "../analytics/posthog";
 import { ENV } from "./config";
+import pushKeys from "./pushKeys";
+import SecurityClient from "./SecurityClient";
 
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");

frontend/components/utilities/changePassword.js

@@ -1,6 +1,7 @@
-import Aes256Gcm from "../aes-256-gcm";
-import SRP1 from "~/pages/api/auth/SRP1";
 import changePassword2 from "~/pages/api/auth/ChangePassword2";
+import SRP1 from "~/pages/api/auth/SRP1";
+
+import Aes256Gcm from "../aes-256-gcm";
 
 const nacl = require("tweetnacl");
 nacl.util = require("tweetnacl-util");

frontend/components/utilities/getSecretsForProject.js

@@ -1,4 +1,5 @@
 import getSecrets from "~/pages/api/files/GetSecrets";
+
 import guidGenerator from "./randomId";
 
 const {

frontend/components/utilities/issueBackupKey.js

@@ -1,6 +1,7 @@
-import Aes256Gcm from "../aes-256-gcm";
-import SRP1 from "~/pages/api/auth/SRP1";
 import issueBackupPrivateKey from "~/pages/api/auth/IssueBackupPrivateKey";
+import SRP1 from "~/pages/api/auth/SRP1";
+
+import Aes256Gcm from "../aes-256-gcm";
 import generateBackupPDF from "./generateBackupPDF";
 
 const nacl = require("tweetnacl");

frontend/components/utilities/pushKeys.js

@@ -1,6 +1,6 @@
+import uploadSecrets from "~/pages/api/files/UploadSecrets";
 import getLatestFileKey from "~/pages/api/workspace/getLatestFileKey";
 import getWorkspaceKeys from "~/pages/api/workspace/getWorkspaceKeys";
-import uploadSecrets from "~/pages/api/files/UploadSecrets";
 
 const crypto = require("crypto");
 const {