chore(frontend): added rule to seperate out @app imports and linted

frontend/.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
           ],
           // Packages `react` related packages
           ['^react', '^next', '^@?\\w'],
+          ['^@app'],
           // Internal packages.
           ['^~(/.*|$)'],
           // Relative imports

frontend/src/components/RouteGuard.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+
 import { publicPaths } from '@app/const';
 import checkAuth from '@app/pages/api/auth/CheckAuth';
 

frontend/src/components/basic/Layout.tsx

@@ -7,14 +7,6 @@ import { useEffect, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import getOrganizations from '@app/pages/api/organization/getOrgs';
-import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
-import getOrganizationUsers from '@app/pages/api/organization/GetOrgUsers';
-import getUser from '@app/pages/api/user/getUser';
-import addUserToWorkspace from '@app/pages/api/workspace/addUserToWorkspace';
-import createWorkspace from '@app/pages/api/workspace/createWorkspace';
-import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
-import uploadKeys from '@app/pages/api/workspace/uploadKeys';
 import {
   faBookOpen,
   faFileLines,
@@ -27,6 +19,15 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import getOrganizations from '@app/pages/api/organization/getOrgs';
+import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
+import getOrganizationUsers from '@app/pages/api/organization/GetOrgUsers';
+import getUser from '@app/pages/api/user/getUser';
+import addUserToWorkspace from '@app/pages/api/workspace/addUserToWorkspace';
+import createWorkspace from '@app/pages/api/workspace/createWorkspace';
+import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
+import uploadKeys from '@app/pages/api/workspace/uploadKeys';
+
 import NavBarDashboard from '../navigation/NavBarDashboard';
 import onboardingCheck from '../utilities/checks/OnboardingCheck';
 import { tempLocalStorage } from '../utilities/checks/tempLocalStorage';

frontend/src/components/basic/dialog/AddApiKeyDialog.tsx

@@ -1,10 +1,11 @@
 import { Fragment, useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import addAPIKey from '@app/pages/api/apiKey/addAPIKey';
 import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog, Transition } from '@headlessui/react';
 
+import addAPIKey from '@app/pages/api/apiKey/addAPIKey';
+
 import Button from '../buttons/Button';
 import InputField from '../InputField';
 import ListBox from '../Listbox';

frontend/src/components/basic/dialog/AddIncidentContactDialog.tsx

@@ -1,8 +1,9 @@
 import { Fragment, useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import addIncidentContact from '@app/pages/api/organization/addIncidentContact';
 import { Dialog, Transition } from '@headlessui/react';
 
+import addIncidentContact from '@app/pages/api/organization/addIncidentContact';
+
 import Button from '../buttons/Button';
 import InputField from '../InputField';
 

frontend/src/components/basic/dialog/AddServiceTokenDialog.tsx

@@ -2,12 +2,13 @@ import crypto from 'crypto';
 
 import { Fragment, useState } from 'react';
 import { useTranslation } from 'next-i18next';
-import addServiceToken from '@app/pages/api/serviceToken/addServiceToken';
-import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import { faCheck, faCopy } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Dialog, Transition } from '@headlessui/react';
 
+import addServiceToken from '@app/pages/api/serviceToken/addServiceToken';
+import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
+
 import {
   decryptAssymmetric,
   encryptSymmetric,

frontend/src/components/basic/table/ApiKeyTable.tsx

@@ -1,6 +1,7 @@
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+
 import deleteAPIKey from '../../../pages/api/apiKey/deleteAPIKey';
 import guidGenerator from '../../utilities/randomId';
 import Button from '../buttons/Button';

frontend/src/components/basic/table/ServiceTokenTable.tsx

@@ -1,6 +1,7 @@
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 
+import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+
 import deleteServiceToken from '../../../pages/api/serviceToken/deleteServiceToken';
 import guidGenerator from '../../utilities/randomId';
 import Button from '../buttons/Button';

frontend/src/components/basic/table/UserTable.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+
 import deleteUserFromOrganization from '@app/pages/api/organization/deleteUserFromOrganization';
 import changeUserRoleInWorkspace from '@app/pages/api/workspace/changeUserRoleInWorkspace';
 import deleteUserFromWorkspace from '@app/pages/api/workspace/deleteUserFromWorkspace';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import uploadKeys from '@app/pages/api/workspace/uploadKeys';
-import { faX } from '@fortawesome/free-solid-svg-icons';
 
 import { decryptAssymmetric, encryptAssymmetric } from '../../utilities/cryptography/crypto';
 import guidGenerator from '../../utilities/randomId';

frontend/src/components/billing/Plan.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import StripeRedirect from '@app/pages/api/organization/StripeRedirect';
 
 import { tempLocalStorage } from '../utilities/checks/tempLocalStorage';

frontend/src/components/dashboard/SideBar.tsx

@@ -2,10 +2,11 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
-import SecretVersionList from '@app/ee/components/SecretVersionList';
 import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import SecretVersionList from '@app/ee/components/SecretVersionList';
+
 import Button from '../basic/buttons/Button';
 import Toggle from '../basic/Toggle';
 import CommentField from './CommentField';

frontend/src/components/integrations/Integration.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import Button from '@app/components/basic/buttons/Button';
-import ListBox from '@app/components/basic/Listbox';
 import { faArrowRight, faRotate, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 // TODO: This needs to be moved from public folder
 import { contextNetlifyMapping, reverseContextNetlifyMapping } from 'public/data/frequentConstants';
 
+import Button from '@app/components/basic/buttons/Button';
+import ListBox from '@app/components/basic/Listbox';
+
 import deleteIntegration from '../../pages/api/integrations/DeleteIntegration';
 import getIntegrationApps from '../../pages/api/integrations/GetIntegrationApps';
 import updateIntegration from '../../pages/api/integrations/updateIntegration';

frontend/src/components/navigation/NavBarDashboard.tsx

@@ -4,7 +4,6 @@ import { Fragment, useEffect, useMemo, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { TFunction, useTranslation } from 'next-i18next';
-import logout from '@app/pages/api/auth/Logout';
 import { faGithub, faSlack } from '@fortawesome/free-brands-svg-icons';
 import { faCircleQuestion } from '@fortawesome/free-regular-svg-icons';
 import {
@@ -19,6 +18,8 @@ import {
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Menu, Transition } from '@headlessui/react';
 
+import logout from '@app/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';

frontend/src/components/navigation/NavHeader.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
-import getOrganization from '@app/pages/api/organization/GetOrg';
-import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import getOrganization from '@app/pages/api/organization/GetOrg';
+import getProjectInfo from '@app/pages/api/workspace/getProjectInfo';
+
 /**
  * This is the component at the top of almost every page.
  * It shows how to navigate to a certain page.

frontend/src/components/signup/CodeInputStep.tsx

@@ -2,6 +2,7 @@
 import React, { useState } from 'react';
 import ReactCodeInput from 'react-code-input';
 import { useTranslation } from 'next-i18next';
+
 import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
 
 import Button from '../basic/buttons/Button';

frontend/src/components/signup/EnterEmailStep.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import Link from 'next/link';
 import { useTranslation } from 'next-i18next';
+
 import sendVerificationEmail from '@app/pages/api/auth/SendVerificationEmail';
 
 import Button from '../basic/buttons/Button';

frontend/src/components/signup/TeamInviteStep.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+
 import addUserToOrg from '@app/pages/api/organization/addUserToOrg';
 import getWorkspaces from '@app/pages/api/workspace/getWorkspaces';
 

frontend/src/components/signup/UserInfoStep.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
-import completeAccountInformationSignup from '@app/pages/api/auth/CompleteAccountInformationSignup';
 import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import jsrp from 'jsrp';
 import nacl from 'tweetnacl';
 import { encodeBase64 } from 'tweetnacl-util';
 
+import completeAccountInformationSignup from '@app/pages/api/auth/CompleteAccountInformationSignup';
+
 import Button from '../basic/buttons/Button';
 import InputField from '../basic/InputField';
 import attemptLogin from '../utilities/attemptLogin';

frontend/src/components/utilities/attemptLogin.ts

@@ -1,6 +1,9 @@
 /* eslint-disable prefer-destructuring */
 import crypto from 'crypto';
 
+import jsrp from 'jsrp';
+import { SecretDataProps } from 'public/data/frequentInterfaces';
+
 import Aes256Gcm from '@app/components/utilities/cryptography/aes-256-gcm';
 import login1 from '@app/pages/api/auth/Login1';
 import login2 from '@app/pages/api/auth/Login2';
@@ -9,8 +12,6 @@ import getOrganizations from '@app/pages/api/organization/getOrgs';
 import getOrganizationUserProjects from '@app/pages/api/organization/GetOrgUserProjects';
 import getUser from '@app/pages/api/user/getUser';
 import uploadKeys from '@app/pages/api/workspace/uploadKeys';
-import jsrp from 'jsrp';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
 
 import { encryptAssymmetric } from './cryptography/crypto';
 import encryptSecrets from './secrets/encryptSecrets';

frontend/src/components/utilities/cryptography/changePassword.ts

@@ -1,7 +1,8 @@
 /* eslint-disable new-cap */
+import jsrp from 'jsrp';
+
 import changePassword2 from '@app/pages/api/auth/ChangePassword2';
 import SRP1 from '@app/pages/api/auth/SRP1';
-import jsrp from 'jsrp';
 
 import Aes256Gcm from './aes-256-gcm';
 

frontend/src/components/utilities/cryptography/issueBackupKey.ts

@@ -1,9 +1,10 @@
 /* eslint-disable new-cap */
 import crypto from 'crypto';
 
+import jsrp from 'jsrp';
+
 import issueBackupPrivateKey from '@app/pages/api/auth/IssueBackupPrivateKey';
 import SRP1 from '@app/pages/api/auth/SRP1';
-import jsrp from 'jsrp';
 
 import generateBackupPDF from '../generateBackupPDF';
 import Aes256Gcm from './aes-256-gcm';

frontend/src/components/utilities/secrets/encryptSecrets.ts

@@ -1,8 +1,9 @@
 import crypto from 'crypto';
 
-import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
 import { SecretDataProps } from 'public/data/frequentInterfaces';
 
+import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
+
 import { decryptAssymmetric, encryptSymmetric } from '../cryptography/crypto';
 
 interface EncryptedSecretProps {

frontend/src/ee/components/ActivitySideBar.tsx

@@ -2,11 +2,12 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import getActionData from '@app/ee/api/secrets/GetActionData';
 import patienceDiff from '@app/ee/utilities/findTextDifferences';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
-import { faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import DashboardInputField from '../../components/dashboard/DashboardInputField';
 import {

frontend/src/ee/components/ActivityTable.tsx

@@ -2,10 +2,11 @@
 import React, { useState } from 'react';
 import Image from 'next/image';
 import { useTranslation } from 'next-i18next';
-import timeSince from '@app/ee/utilities/timeSince';
 import { faAngleDown, faAngleRight, faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import timeSince from '@app/ee/utilities/timeSince';
+
 import guidGenerator from '../../components/utilities/randomId';
 
 interface PayloadProps {

frontend/src/ee/components/PITRecoverySidebar.tsx

@@ -3,6 +3,9 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import Button from '@app/components/basic/buttons/Button';
 import {
   decryptAssymmetric,
@@ -12,8 +15,6 @@ import getProjectSecretShanpshots from '@app/ee/api/secrets/GetProjectSercetShan
 import getSecretSnapshotData from '@app/ee/api/secrets/GetSecretSnapshotData';
 import timeSince from '@app/ee/utilities/timeSince';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
-import { faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 export interface SecretDataProps {
   pos: number;

frontend/src/ee/components/SecretVersionList.tsx

@@ -2,14 +2,15 @@ import { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 import {
   decryptAssymmetric,
   decryptSymmetric
 } from '@app/components/utilities/cryptography/crypto';
 import getSecretVersions from '@app/ee/api/secrets/GetSecretVersions';
 import getLatestFileKey from '@app/pages/api/workspace/getLatestFileKey';
-import { faCircle, faDotCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface DecryptedSecretVersionListProps {
   createdAt: string;

frontend/src/pages/_app.tsx

@@ -3,12 +3,13 @@ import { useEffect } from 'react';
 import { AppProps } from 'next/app';
 import { useRouter } from 'next/router';
 import { appWithTranslation } from 'next-i18next';
+import { config } from '@fortawesome/fontawesome-svg-core';
+
 import Layout from '@app/components/basic/Layout';
 import NotificationProvider from '@app/components/context/Notifications/NotificationProvider';
 import RouteGuard from '@app/components/RouteGuard';
 import Telemetry from '@app/components/utilities/telemetry/Telemetry';
 import { publicPaths } from '@app/const';
-import { config } from '@fortawesome/fontawesome-svg-core';
 
 import '@fortawesome/fontawesome-svg-core/styles.css';
 import '../styles/globals.css';

frontend/src/pages/activity/[id].tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useTranslation } from 'next-i18next';
+
 import Button from '@app/components/basic/buttons/Button';
 import EventFilter from '@app/components/basic/EventFilter';
 import NavHeader from '@app/components/navigation/NavHeader';