Add eslint rule and fix as many issues as possible

2026-10-16 19:28:35 +00:00 · 2023-06-19 23:42:04 -04:00
parent e9eacc445d
commit 9d33e4756b
689 changed files with 9446 additions and 21821 deletions
@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
-import { useRouter } from 'next/router';
-import { faCheckSquare, faPlus, faSquare } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Menu, Transition } from '@headlessui/react';
-import { Tag } from 'public/data/frequentInterfaces';
+import { Fragment } from "react";
+import { useRouter } from "next/router";
+import { faCheckSquare, faPlus, faSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Menu, Transition } from "@headlessui/react";
+import { Tag } from "public/data/frequentInterfaces";

 /**
 * This is the menu that is used to add more tags to a secret
@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";

 /**
 * This is the text field where people can add comments to particular secrets.
@@ -16,7 +16,7 @@ const CommentField = ({

  return (
    <div className="relative mt-4 px-4 pt-6">
-      <p className="pl-0.5 text-sm text-bunker-300">{t('dashboard.sidebar.comments')}</p>
+      <p className="pl-0.5 text-sm text-bunker-300">{t("dashboard.sidebar.comments")}</p>
      <textarea
        className="h-32 w-full rounded-md border border-mineshaft-500 bg-bunker-800 px-2 py-1.5 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 placeholder:text-bunker-400 focus:ring-2 dark:[color-scheme:dark]"
        value={comment}
@@ -1,10 +1,10 @@
-import { SetStateAction, useEffect, useState } from 'react';
-import Image from 'next/image';
+import { SetStateAction, useEffect, useState } from "react";
+import Image from "next/image";

-import { WorkspaceEnv } from '@app/hooks/api/types';
+import { WorkspaceEnv } from "@app/hooks/api/types";

-import getSecretsForProject from '../utilities/secrets/getSecretsForProject';
-import { Modal, ModalContent } from '../v2';
+import getSecretsForProject from "../utilities/secrets/getSecretsForProject";
+import { Modal, ModalContent } from "../v2";

 interface Secrets {
  label: string;
@@ -40,7 +40,7 @@ const CompareSecretsModal = ({
        // #TODO: optimize this query somehow...
        const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId });
        const secret =
-          allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found';
+          allSecrets.find((item) => item.key === currentSecret.key)?.value ?? "Not found";
        return { label: env.name, secret };
      })
    );
@@ -1,9 +1,9 @@
-import { Button, Modal, ModalContent } from '../v2';
+import { Button, Modal, ModalContent } from "../v2";

 type Props = {
  isOpen: boolean;
  onClose: () => void;
-  onOverwriteConfirm: (preserve: 'old' | 'new') => void;
+  onOverwriteConfirm: (preserve: "old" | "new") => void;
  duplicateKeys: string[];
 };

@@ -19,10 +19,10 @@ const ConfirmEnvOverwriteModal = ({
        title="Duplicate Secrets"
        footerContent={
          <div className="flex items-center gap-4">
-            <Button colorSchema="primary" onClick={() => onOverwriteConfirm('old')}>
+            <Button colorSchema="primary" onClick={() => onOverwriteConfirm("old")}>
              Keep Old
            </Button>
-            <Button colorSchema="danger" onClick={() => onOverwriteConfirm('new')}>
+            <Button colorSchema="danger" onClick={() => onOverwriteConfirm("new")}>
              Overwrite
            </Button>
          </div>
@@ -31,7 +31,7 @@ const ConfirmEnvOverwriteModal = ({
      >
        <div className="flex flex-col gap-2">
          <p className='text-gray-400'>Your file contains the following duplicate secrets:</p>
-          <p className="text-sm text-gray-500">{duplicateKeys.join(', ')}</p>
+          <p className="text-sm text-gray-500">{duplicateKeys.join(", ")}</p>
          <p className='text-md text-gray-400'>Are you sure you want to overwrite these secrets?</p>
        </div>
      </ModalContent>
@@ -1,10 +1,10 @@
-import { memo, SyntheticEvent, useRef } from 'react';
-import { faCircle, faCodeBranch, faExclamationCircle, faEye } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { memo, SyntheticEvent, useRef } from "react";
+import { faCircle, faCodeBranch, faExclamationCircle, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import guidGenerator from '../utilities/randomId';
-import { HoverObject } from '../v2/HoverCard';
-import { PopoverObject } from '../v2/Popover/Popover';
+import guidGenerator from "../utilities/randomId";
+import { HoverObject } from "../v2/HoverCard";
+import { PopoverObject } from "../v2/Popover/Popover";

 const REGEX = /([$]{.*?})/g;

@@ -12,7 +12,7 @@ interface DashboardInputFieldProps {
  id: string;
  onChangeHandler: (value: string, id: string) => void;
  value: string | undefined;
-  type: 'varName' | 'value' | 'comment';
+  type: "varName" | "value" | "comment";
  blurred?: boolean;
  isDuplicate?: boolean;
  isCapitalized?: boolean;
@@ -56,19 +56,19 @@ const DashboardInputField = ({
    ref.current.scrollLeft = e.currentTarget.scrollLeft;
  };

-  if (type === 'varName') {
-    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== '';
+  if (type === "varName") {
+    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== "";
    const error = startsWithNumber || isDuplicate;

    return (
      <div className={`relative flex-col w-full h-10 ${
-        error && value !== '' ? 'bg-red/[0.15]' : ''
+        error && value !== "" ? "bg-red/[0.15]" : ""
      } ${
-        isSideBarOpen && 'bg-mineshaft-700 duration-200'
+        isSideBarOpen && "bg-mineshaft-700 duration-200"
      }`}>
        <div
          className={`group relative flex flex-col justify-center items-center h-full ${
-            error ? 'w-max' : 'w-full'
+            error ? "w-max" : "w-full"
          }`}
        >
          <input
@@ -76,7 +76,7 @@ const DashboardInputField = ({
            type={type}
            value={value}
            className={`z-10 peer font-mono ph-no-capture bg-transparent h-full caret-bunker-200 text-sm px-2 w-full min-w-16 outline-none ${
-              error ? 'text-red-600 focus:text-red-500' : 'text-bunker-300 focus:text-bunker-100'
+              error ? "text-red-600 focus:text-red-500" : "text-bunker-300 focus:text-bunker-100"
            } duration-200`}
            spellCheck="false"
          />
@@ -90,7 +90,7 @@ const DashboardInputField = ({
            />
          </div>
        )}
-        {isDuplicate && value !== '' && !startsWithNumber && (
+        {isDuplicate && value !== "" && !startsWithNumber && (
          <div className='absolute right-2 top-2 text-red z-50'>
            <HoverObject 
              text="Secret names should be unique"
@@ -100,39 +100,39 @@ const DashboardInputField = ({
          </div>
        )}
        {!error && <div className={`absolute right-0 top-0 text-red z-50 bg-mineshaft-800 group-hover:bg-mineshaft-700 ${
-          overrideEnabled ? 'visible' : 'invisible group-hover:visible'
+          overrideEnabled ? "visible" : "invisible group-hover:visible"
        } cursor-pointer duration-0 h-10 flex items-center px-2`}>
          <button type="button" onClick={() => {
            if (modifyValueOverride) {
              if (overrideEnabled === false) {
-                modifyValueOverride('', id);
+                modifyValueOverride("", id);
              } else {
                modifyValueOverride(undefined, id);
              }
            }
          }}>
            <HoverObject 
-              text={overrideEnabled ? 'This secret is overriden with your personal value' : 'You can override this secret with a personal value'}
+              text={overrideEnabled ? "This secret is overriden with your personal value" : "You can override this secret with a personal value"}
              icon={faCodeBranch}
-              color={overrideEnabled ? 'primary' : 'bunker-400'}
+              color={overrideEnabled ? "primary" : "bunker-400"}
            />
          </button>
        </div>}
      </div>
    );
  }
-  if (type === 'comment') {
-    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== '';
+  if (type === "comment") {
+    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== "";
    const error = startsWithNumber || isDuplicate;

    return (
-      <PopoverObject text={value || ''} onChangeHandler={onChangeHandler} id={id}>
+      <PopoverObject text={value || ""} onChangeHandler={onChangeHandler} id={id}>
        <div title={value} className={`relative flex-col w-full h-10 overflow-hidden ${
-          isSideBarOpen && 'bg-mineshaft-700 duration-200'
+          isSideBarOpen && "bg-mineshaft-700 duration-200"
        }`}>
          <div
            className={`group relative flex flex-col justify-center items-center h-full ${
-              error ? 'w-max' : 'w-full'
+              error ? "w-max" : "w-full"
            }`}
          >
            {value?.split("\n")[0] ? <span className='ph-no-capture truncate break-all bg-transparent leading-tight text-xs px-2 w-full min-w-16 outline-none text-bunker-300 focus:text-bunker-100 placeholder:text-bunker-400 placeholder:focus:text-transparent placeholder duration-200'>
@@ -146,7 +146,7 @@ const DashboardInputField = ({
      </PopoverObject>
    );
  }
-  if (type === 'value') {
+  if (type === "value") {
    return (
      <div className="flex-col w-full">
        <div className="group relative whitespace-pre	flex flex-col justify-center w-full">
@@ -161,8 +161,8 @@ const DashboardInputField = ({
            onScroll={syncScroll}
            className={`${
              blurred
-                ? 'text-transparent focus:text-transparent active:text-transparent'
-                : ''
+                ? "text-transparent focus:text-transparent active:text-transparent"
+                : ""
            } z-10 peer font-mono ph-no-capture bg-transparent caret-white text-transparent text-sm px-2 py-2 w-full min-w-16 outline-none duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
            spellCheck="false"
          />
@@ -170,10 +170,10 @@ const DashboardInputField = ({
            ref={ref}
            className={`${
              blurred && !overrideEnabled
-                ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200'
-                : ''
-            } ${overrideEnabled ? 'text-primary-300' : 'text-gray-400'}
-            absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? 'invisible' : 'visible'} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+                ? "text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400 duration-200"
+                : ""
+            } ${overrideEnabled ? "text-primary-300" : "text-gray-400"}
+            absolute flex flex-row whitespace-pre font-mono z-0 ${blurred ? "invisible" : "visible"} peer-focus:visible mt-0.5 ph-no-capture overflow-x-scroll bg-transparent h-10 text-sm px-2 py-2 w-full min-w-16 outline-none duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
          >
            {value?.split(REGEX).map((word) => {
              if (word.match(REGEX) !== null) {
@@ -183,7 +183,7 @@ const DashboardInputField = ({
                    <span className="ph-no-capture text-yellow-200/80">
                      {word.slice(2, word.length - 1)}
                    </span>
-                    {word.slice(word.length - 1, word.length) === '}' ? (
+                    {word.slice(word.length - 1, word.length) === "}" ? (
                      <span className="ph-no-capture text-yellow">
                        {word.slice(word.length - 1, word.length)}
                      </span>
@@ -204,17 +204,17 @@ const DashboardInputField = ({
          </div>
          {blurred && (
            <div className={`absolute flex flex-row justify-between items-center z-0 peer pr-2 ${
-              isSideBarOpen ? 'bg-mineshaft-700 duration-200' : 'bg-mineshaft-800'
+              isSideBarOpen ? "bg-mineshaft-700 duration-200" : "bg-mineshaft-800"
            } peer-active:hidden peer-focus:hidden group-hover:bg-white/[0.00] duration-100 h-10 w-full text-bunker-400 text-clip`}>
              <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
-                {value?.split('').map(() => (
+                {value?.split("").map(() => (
                  <FontAwesomeIcon
                    key={guidGenerator()}
                    className="text-xxs mr-0.5"
                    icon={faCircle}
                  />
                ))}
-                {value?.split('').length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
+                {value?.split("").length === 0 && <span className='text-bunker-400/80'>EMPTY</span>}
              </div>
              <div className='invisible group-hover:visible cursor-default z-[100]'><FontAwesomeIcon icon={faEye} /></div>
            </div>
@@ -1,9 +1,9 @@
-import React from 'react'
-import { useTranslation } from 'react-i18next';
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React from "react"
+import { useTranslation } from "react-i18next";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import Button from '../basic/buttons/Button';
+import Button from "../basic/buttons/Button";

 type Props = {
  onSubmit: () => void;
@@ -16,8 +16,8 @@ export const DeleteActionButton = ({ onSubmit, isPlain }: Props) => {
  return (
    <div className={`${
      !isPlain 
-      ? 'bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2'
-      : 'cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center'}`}>
+      ? "bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2"
+      : "cursor-pointer w-[1.5rem] h-[2.35rem] mr-2 flex items-center justfy-center"}`}>
      {isPlain 
      ? <div
        onKeyDown={() => null}
@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
-import { faDownload } from '@fortawesome/free-solid-svg-icons';
-import { Menu, Transition } from '@headlessui/react';
-import { SecretDataProps } from 'public/data/frequentInterfaces';
+import { Fragment } from "react";
+import { faDownload } from "@fortawesome/free-solid-svg-icons";
+import { Menu, Transition } from "@headlessui/react";
+import { SecretDataProps } from "public/data/frequentInterfaces";

-import Button from '../basic/buttons/Button';
-import downloadDotEnv from '../utilities/secrets/downloadDotEnv';
-import downloadYaml from '../utilities/secrets/downloadYaml';
+import Button from "../basic/buttons/Button";
+import downloadDotEnv from "../utilities/secrets/downloadDotEnv";
+import downloadYaml from "../utilities/secrets/downloadYaml";

 /**
 * This is the menu that is used to download secrets as .env ad .yml files (in future we may have more options)
@@ -1,16 +1,16 @@
 /* eslint-disable no-nested-ternary */
-import { type ChangeEvent, type DragEvent, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Image from 'next/image';
-import { faUpload } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { parseDocument, Scalar, YAMLMap } from 'yaml';
+import { type ChangeEvent, type DragEvent, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Image from "next/image";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { parseDocument, Scalar, YAMLMap } from "yaml";

-import Button from '../basic/buttons/Button';
-import Error from '../basic/Error';
-import { useNotificationContext } from '../context/Notifications/NotificationProvider';
-import { parseDotEnv } from '../utilities/parseDotEnv';
-import guidGenerator from '../utilities/randomId';
+import Button from "../basic/buttons/Button";
+import Error from "../basic/Error";
+import { useNotificationContext } from "../context/Notifications/NotificationProvider";
+import { parseDotEnv } from "../utilities/parseDotEnv";
+import guidGenerator from "../utilities/randomId";

 interface DropZoneProps {
  // TODO: change Data type from any
@@ -50,7 +50,7 @@ const DropZone = ({
    e.stopPropagation();

    // set dropEffect to copy i.e copy of the source item
-    e.dataTransfer.dropEffect = 'copy';
+    e.dataTransfer.dropEffect = "copy";
  };

  const [loading, setLoading] = useState(false);
@@ -58,33 +58,33 @@ const DropZone = ({
  const getSecrets = (file: ArrayBuffer, fileType: string) => {
    let secrets;
    switch (fileType) {
-      case 'env': {
+      case "env": {
        const keyPairs = parseDotEnv(file);
        secrets = Object.keys(keyPairs).map((key, index) => ({
          id: guidGenerator(),
          pos: numCurrentRows + index,
          key,
          value: keyPairs[key as keyof typeof keyPairs].value,
-          comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
-          type: 'shared',
+          comment: keyPairs[key as keyof typeof keyPairs].comments.join("\n"),
+          type: "shared",
          tags: []
        }));
        break;
      }
-      case 'json': {
+      case "json": {
        const keyPairs = JSON.parse(String(file));
        secrets = Object.keys(keyPairs).map((key, index) => ({
          id: guidGenerator(),
          pos: numCurrentRows + index,
          key,
          value: keyPairs[key as keyof typeof keyPairs],
-          comment: '',
-          type: 'shared',
+          comment: "",
+          type: "shared",
          tags: []
        }));
        break;
      }
-      case 'yml': {
+      case "yml": {
        const parsedFile = parseDocument(file.toString());
        const keyPairs = parsedFile.contents!.toJSON();

@@ -93,26 +93,26 @@ const DropZone = ({
          const comment =
            fileContent!.items
              .find((item) => item.key.value === key)
-              ?.key?.commentBefore?.split('\n')
+              ?.key?.commentBefore?.split("\n")
              .map((cmnt) => cmnt.trim())
-              .join('\n') ?? '';
+              .join("\n") ?? "";
          return {
            id: guidGenerator(),
            pos: numCurrentRows + index,
            key,
-            value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
+            value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? "",
            comment,
-            type: 'shared',
+            type: "shared",
            tags: []
          };
        });
        break;
      }
      default:
-        secrets = '';
+        secrets = "";
        createNotification({
-          text: `The file you are dropping should have one of the following extensions: .env, .yml, .json.`,
-          type: 'error'
+          text: "The file you are dropping should have one of the following extensions: .env, .yml, .json.",
+          type: "error"
        });
        break;
    }
@@ -125,20 +125,20 @@ const DropZone = ({
    setTimeout(() => setLoading(false), 5000);
    e.preventDefault();
    e.stopPropagation();
-    e.dataTransfer.dropEffect = 'copy';
+    e.dataTransfer.dropEffect = "copy";

    const file = e.dataTransfer.files[0];
    const reader = new FileReader();
    if (file === undefined) {
      createNotification({
-        text: `You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.`,
-        type: 'error',
+        text: "You can't inject files from VS Code. Click 'Reveal in finder', and drag your file directly from the directory where it's located.",
+        type: "error",
        timeoutMs: 10000
      });
      setLoading(false);
      return;
    }
-    const fileType = file.name.split('.')[1];
+    const fileType = file.name.split(".")[1];

    reader.onload = (event) => {
      if (event.target === null || event.target.result === null) return;
@@ -148,7 +148,7 @@ const DropZone = ({
        setData(newData);
        setButtonReady(true);
      } catch (error) {
-        console.log('Error while dropping the file: ', error);
+        console.log("Error while dropping the file: ", error);
      }
    };

@@ -168,7 +168,7 @@ const DropZone = ({
    setTimeout(() => setLoading(false), 5000);
    if (e.currentTarget.files === null) return;
    const file = e.currentTarget.files[0];
-    const fileType = file.name.split('.')[1];
+    const fileType = file.name.split(".")[1];
    const reader = new FileReader();
    reader.onload = (event) => {
      if (event.target === null || event.target.result === null) return;
@@ -202,7 +202,7 @@ const DropZone = ({
      {errorDragAndDrop ? <div className="my-3 max-w-xl opacity-80" /> : <div className="" />}
      <div className="flex flex-row">
        <FontAwesomeIcon icon={faUpload} className="mr-6 text-3xl text-bunker-300" />
-        <p className="mt-1 text-bunker-300">{t('common.drop-zone-keys')}</p>
+        <p className="mt-1 text-bunker-300">{t("common.drop-zone-keys")}</p>
      </div>
      {errorDragAndDrop && (
        <div className="mt-8 max-w-xl opacity-80">
@@ -219,7 +219,7 @@ const DropZone = ({
      onDrop={handleDrop}
    >
      <FontAwesomeIcon icon={faUpload} className="mb-8 text-7xl" />
-      <p className="">{t('common.drop-zone')}</p>
+      <p className="">{t("common.drop-zone")}</p>
      <input
        id="fileSelect"
        type="file"
@@ -235,7 +235,7 @@ const DropZone = ({
      <div className="z-10 mb-6">
        <Button
          color="mineshaft"
-          text={String(t('dashboard.add-secret'))}
+          text={String(t("dashboard.add-secret"))}
          onButtonPressed={createNewFile}
          size="md"
        />
@@ -1,8 +1,8 @@
-import { Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faShuffle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Menu, Transition } from '@headlessui/react';
+import { Fragment, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { faShuffle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Menu, Transition } from "@headlessui/react";

 /**
 * This is the menu that is used to (re)generate secrets (currently we only have ranom hex, in future we will have more options)
@@ -50,7 +50,7 @@ const GenerateSecretMenu = ({
                modifyValue(
                  [...Array(randomStringLength)]
                    .map(() => Math.floor(Math.random() * 16).toString(16))
-                    .join(''),
+                    .join(""),
                  id
                );
              }
@@ -59,8 +59,8 @@ const GenerateSecretMenu = ({
          >
            <FontAwesomeIcon className="pl-1.5 pr-3 text-lg" icon={faShuffle} />
            <div className="flex w-full flex-row justify-between text-sm">
-              <p>{t('dashboard.sidebar.generate-random-hex')}</p>
-              <p>{t('dashboard.sidebar.digits')}</p>
+              <p>{t("dashboard.sidebar.generate-random-hex")}</p>
+              <p>{t("dashboard.sidebar.digits")}</p>
            </div>
          </div>
          <div className="absolute bottom-[0.4rem] right-[3.3rem] flex w-16 flex-row rounded-md border border-chicago-700 bg-bunker-800 text-bunker-200 ">
@@ -1,10 +1,10 @@
-import { faEllipsis, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { SecretDataProps, Tag } from 'public/data/frequentInterfaces';
+import { faEllipsis, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { SecretDataProps, Tag } from "public/data/frequentInterfaces";

-import AddTagsMenu from './AddTagsMenu';
-import DashboardInputField from './DashboardInputField';
-import { DeleteActionButton } from './DeleteActionButton';
+import AddTagsMenu from "./AddTagsMenu";
+import DashboardInputField from "./DashboardInputField";
+import { DeleteActionButton } from "./DeleteActionButton";

 interface KeyPairProps {
  keyPair: SecretDataProps;
@@ -30,26 +30,26 @@ export interface DeleteRowFunctionProps {
 }

 const colors = [
-  'bg-[#f1c40f]/40',
-  'bg-[#cb1c8d]/40',
-  'bg-[#badc58]/40',
-  'bg-[#ff5400]/40',
-  'bg-[#3AB0FF]/40',
-  'bg-[#6F1AB6]/40',
-  'bg-[#C40B13]/40',
-  'bg-[#332FD0]/40'
+  "bg-[#f1c40f]/40",
+  "bg-[#cb1c8d]/40",
+  "bg-[#badc58]/40",
+  "bg-[#ff5400]/40",
+  "bg-[#3AB0FF]/40",
+  "bg-[#6F1AB6]/40",
+  "bg-[#C40B13]/40",
+  "bg-[#332FD0]/40"
 ]


 const colorsText = [
-  'text-[#fcf0c3]/70',
-  'text-[#f2c6e3]/70',
-  'text-[#eef6d5]/70',
-  'text-[#ffddcc]/70',
-  'text-[#f0fffd]/70',
-  'text-[#FFE5F1]/70',
-  'text-[#FFDEDE]/70',
-  'text-[#DFF6FF]/70'
+  "text-[#fcf0c3]/70",
+  "text-[#f2c6e3]/70",
+  "text-[#eef6d5]/70",
+  "text-[#ffddcc]/70",
+  "text-[#f0fffd]/70",
+  "text-[#FFE5F1]/70",
+  "text-[#FFDEDE]/70",
+  "text-[#DFF6FF]/70"
 ]

 /**
@@ -96,8 +96,8 @@ const KeyPair = ({

  return (
  <div
-    className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && 'pointer-events-none'} ${
-      keyPair.id === sidebarSecretId && 'bg-mineshaft-700 duration-200'
+    className={`group flex flex-col items-center border-b border-mineshaft-500 hover:bg-white/[0.03] duration-100 ${isSnapshot && "pointer-events-none"} ${
+      keyPair.id === sidebarSecretId && "bg-mineshaft-700 duration-200"
    }`}
  >
    <div className="relative flex flex-row justify-between w-full mr-auto max-h-14 items-center">
@@ -108,7 +108,7 @@ const KeyPair = ({
            isCapitalized = {isCapitalized}
            onChangeHandler={modifyKey}
            type="varName"
-            id={keyPair.id ? keyPair.id : (keyPair.idOverride || '')}
+            id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")}
            value={keyPair.key}
            isDuplicate={isDuplicate}
            overrideEnabled={keyPair.valueOverride !== undefined}
@@ -124,7 +124,7 @@ const KeyPair = ({
          <DashboardInputField
            onChangeHandler={keyPair.valueOverride !== undefined ? modifyValueOverride : modifyValue}
            type="value"
-            id={keyPair.id ? keyPair.id : (keyPair.idOverride || '')}
+            id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")}
            value={keyPair.valueOverride !== undefined ? keyPair.valueOverride : keyPair.value}
            blurred={isBlurred}
            overrideEnabled={keyPair.valueOverride !== undefined}
@@ -137,7 +137,7 @@ const KeyPair = ({
          <DashboardInputField
            onChangeHandler={modifyComment}
            type="comment"
-            id={keyPair.id ? keyPair.id : (keyPair.idOverride || '')}
+            id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")}
            value={keyPair.comment}
            isDuplicate={isDuplicate}
            isSideBarOpen={keyPair.id === sidebarSecretId}
@@ -153,7 +153,7 @@ const KeyPair = ({
            </div>
          ))}
          
-          <AddTagsMenu allTags={tags} currentTags={keyPair.tags} modifyTags={modifyTags} id={keyPair.id ? keyPair.id : (keyPair.idOverride || '')} />
+          <AddTagsMenu allTags={tags} currentTags={keyPair.tags} modifyTags={modifyTags} id={keyPair.id ? keyPair.id : (keyPair.idOverride || "")} />
        </div>
      </div>
      <div
@@ -166,11 +166,11 @@ const KeyPair = ({
          }
          toggleSidebar(keyPair.id)
        }}
-        className={`cursor-pointer w-[1.5rem] h-[2.35rem] ml-auto group-hover:bg-mineshaft-700 z-50 rounded-md invisible group-hover:visible flex flex-row justify-center items-center ${isSnapshot ?? 'invisible'}`}
+        className={`cursor-pointer w-[1.5rem] h-[2.35rem] ml-auto group-hover:bg-mineshaft-700 z-50 rounded-md invisible group-hover:visible flex flex-row justify-center items-center ${isSnapshot ?? "invisible"}`}
      >
        <FontAwesomeIcon className="text-bunker-300 hover:text-primary text-lg" icon={faEllipsis} />
      </div>
-      <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? 'invisible'}`}>
+      <div className={`group-hover:bg-mineshaft-700 z-50 ${isSnapshot ?? "invisible"}`}>
        {keyPair.key || keyPair.value 
        ? <DeleteActionButton
          onSubmit={() => { if (deleteRow) {
@@ -1,20 +1,20 @@
 /* eslint-disable react/no-unused-prop-types */
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import Image from 'next/image';
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import Image from "next/image";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import SecretVersionList from '@app/ee/components/SecretVersionList';
-import { WorkspaceEnv } from '@app/hooks/api/types';
+import SecretVersionList from "@app/ee/components/SecretVersionList";
+import { WorkspaceEnv } from "@app/hooks/api/types";

-import Button from '../basic/buttons/Button';
-import Toggle from '../basic/Toggle';
-import CommentField from './CommentField';
-import CompareSecretsModal from './CompareSecretsModal';
-import DashboardInputField from './DashboardInputField';
-import { DeleteActionButton } from './DeleteActionButton';
-import GenerateSecretMenu from './GenerateSecretMenu';
+import Button from "../basic/buttons/Button";
+import Toggle from "../basic/Toggle";
+import CommentField from "./CommentField";
+import CompareSecretsModal from "./CompareSecretsModal";
+import DashboardInputField from "./DashboardInputField";
+import { DeleteActionButton } from "./DeleteActionButton";
+import GenerateSecretMenu from "./GenerateSecretMenu";

 interface SecretProps {
  key: string;
@@ -93,19 +93,19 @@ const SideBar = ({
      ) : (
        <div className="h-min w-full overflow-y-auto">
          <div className="flex flex-row items-center justify-between border-b border-mineshaft-500 px-4 py-3">
-            <p className="text-lg font-semibold text-bunker-200">{t('dashboard.sidebar.secret')}</p>
+            <p className="text-lg font-semibold text-bunker-200">{t("dashboard.sidebar.secret")}</p>
            <div
              onKeyDown={() => null}
              role="button"
              tabIndex={0}
              className="p-1"
-              onClick={() => toggleSidebar('None')}
+              onClick={() => toggleSidebar("None")}
            >
              <FontAwesomeIcon icon={faXmark} className="h-4 w-4 cursor-pointer text-bunker-300" />
            </div>
          </div>
          <div className="pointer-events-none mt-4 px-4">
-            <p className="text-sm text-bunker-300">{t('dashboard.sidebar.key')}</p>
+            <p className="text-sm text-bunker-300">{t("dashboard.sidebar.key")}</p>
            <div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
              <DashboardInputField
                onChangeHandler={modifyKey}
@@ -117,13 +117,13 @@ const SideBar = ({
              />
            </div>
          </div>
-          {data[0]?.value || data[0]?.value === '' ? (
+          {data[0]?.value || data[0]?.value === "" ? (
            <div
              className={`relative mt-2 px-4 ${
-                overrideEnabled && 'pointer-events-none opacity-40'
+                overrideEnabled && "pointer-events-none opacity-40"
              } duration-200`}
            >
-              <p className="text-sm text-bunker-300">{t('dashboard.sidebar.value')}</p>
+              <p className="text-sm text-bunker-300">{t("dashboard.sidebar.value")}</p>
              <div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
                <DashboardInputField
                  onChangeHandler={modifyValue}
@@ -141,15 +141,15 @@ const SideBar = ({
          ) : (
            <div className="px-4 pt-4 text-sm text-bunker-300">
              <span className="mr-1 rounded-md bg-primary-200/10 py-0.5 px-1">
-                {t('common.note')}:
+                {t("common.note")}:
              </span>
-              {t('dashboard.sidebar.personal-explanation')}
+              {t("dashboard.sidebar.personal-explanation")}
            </div>
          )}
          <div className="mt-4 px-4">
-            {(data[0]?.value || data[0]?.value === '') && (
+            {(data[0]?.value || data[0]?.value === "") && (
              <div className="my-2 flex flex-row items-center justify-between pl-1 pr-2">
-                <p className="text-sm text-bunker-300">{t('dashboard.sidebar.override')}</p>
+                <p className="text-sm text-bunker-300">{t("dashboard.sidebar.override")}</p>
                <Toggle
                  enabled={overrideEnabled}
                  setEnabled={setOverrideEnabled}
@@ -160,7 +160,7 @@ const SideBar = ({
            )}
            <div
              className={`relative ${
-                !overrideEnabled && 'pointer-events-none opacity-40'
+                !overrideEnabled && "pointer-events-none opacity-40"
              } duration-200`}
            >
              <div className="overflow-hidden rounded-md border border-mineshaft-600 bg-white/5">
@@ -193,7 +193,7 @@ const SideBar = ({
          <CompareSecretsModal
            compareModal={compareModal}
            setCompareModal={setCompareModal}
-            currentSecret={{ key: data[0]?.key, value: data[0]?.value ?? '' }}
+            currentSecret={{ key: data[0]?.key, value: data[0]?.value ?? "" }}
            workspaceEnvs={workspaceEnvs}
            selectedEnv={selectedEnv}
            workspaceId={workspaceId}
@@ -201,7 +201,7 @@ const SideBar = ({
        </div>
        <div className="flex">
          <Button
-            text={String(t('common.save-changes'))}
+            text={String(t("common.save-changes"))}
            onButtonPressed={savePush}
            color="primary"
            size="md"