chore(frontend): fixed all eslint errors

frontend/src/components/dashboard/CommentField.tsx

@@ -1,20 +1,30 @@
-import { useTranslation } from "next-i18next";
+import { useTranslation } from 'next-i18next';
 
 /**
  * This is the text field where people can add comments to particular secrets.
  */
-const CommentField = ({ comment, modifyComment, position }: { comment: string; modifyComment: (value: string, posistion: number) => void; position: number;}) => {
+const CommentField = ({
+  comment,
+  modifyComment,
+  position
+}: {
+  comment: string;
+  modifyComment: (value: string, posistion: number) => void;
+  position: number;
+}) => {
   const { t } = useTranslation();
 
-  return <div className={`relative mt-4 px-4 pt-6`}>
-    <p className='text-sm text-bunker-300 pl-0.5'>{t("dashboard:sidebar.comments")}</p>
-    <textarea 
-      className="bg-bunker-800 placeholder:text-bunker-400 h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
-      value={comment}
-      onChange={(e) => modifyComment(e.target.value, position)}
-      placeholder="Leave any comments here..."
-    />
-  </div>
-}
+  return (
+    <div className="relative mt-4 px-4 pt-6">
+      <p className="text-sm text-bunker-300 pl-0.5">{t('dashboard:sidebar.comments')}</p>
+      <textarea
+        className="placeholder:text-bunker-400 h-32 w-full bg-bunker-800 px-2 py-1.5 rounded-md border border-mineshaft-500 text-sm text-bunker-300 outline-none focus:ring-2 ring-primary-800 ring-opacity-70"
+        value={comment}
+        onChange={(e) => modifyComment(e.target.value, position)}
+        placeholder="Leave any comments here..."
+      />
+    </div>
+  );
+};
 
 export default CommentField;

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -40,14 +40,14 @@ const DashboardInputField = ({
 }: DashboardInputFieldProps) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
-    if (ref.current == null) return;
+    if (ref.current === null) return;
 
     ref.current.scrollTop = e.currentTarget.scrollTop;
     ref.current.scrollLeft = e.currentTarget.scrollLeft;
   };
 
   if (type === 'varName') {
-    const startsWithNumber = !isNaN(Number(value?.charAt(0))) && value != '';
+    const startsWithNumber = !Number.isNaN(Number(value?.charAt(0))) && value !== '';
     const error = startsWithNumber || isDuplicate;
 
     return (
@@ -58,9 +58,7 @@ const DashboardInputField = ({
           } rounded-md`}
         >
           <input
-            onChange={(e) =>
-              onChangeHandler(e.target.value.toUpperCase(), position)
-            }
+            onChange={(e) => onChangeHandler(e.target.value.toUpperCase(), position)}
             type={type}
             value={value}
             className={`z-10 peer font-mono ph-no-capture bg-bunker-800 rounded-md caret-white text-gray-400 text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 ${
@@ -81,13 +79,16 @@ const DashboardInputField = ({
         )}
       </div>
     );
-  } else 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 border border-mineshaft-500 rounded-md`}
-        >
-          {override == true && <div className='bg-primary-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-md'>Override enabled</div>}
+        <div className="group relative whitespace-pre	flex flex-col justify-center w-full border border-mineshaft-500 rounded-md">
+          {override === true && (
+            <div className="bg-primary-300 absolute top-[0.1rem] right-[0.1rem] z-10 w-min text-xxs px-1 text-black opacity-80 rounded-md">
+              Override enabled
+            </div>
+          )}
           <input
             value={value}
             onChange={(e) => onChangeHandler(e.target.value, position)}
@@ -105,20 +106,18 @@ const DashboardInputField = ({
               blurred && !override
                 ? 'text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-400 peer-active:text-gray-400'
                 : ''
-            } ${
-              override ? 'text-primary-300' : 'text-gray-400'
-            }
+            } ${override ? 'text-primary-300' : 'text-gray-400'}
             absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture overflow-x-scroll bg-bunker-800 h-9 rounded-md text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-100 no-scrollbar no-scrollbar::-webkit-scrollbar`}
           >
             {value?.split(REGEX).map((word, id) => {
               if (word.match(REGEX) !== null) {
                 return (
-                  <span className="ph-no-capture text-yellow" key={id}>
+                  <span className="ph-no-capture text-yellow" key={`${word}.${id + 1}`}>
                     {word.slice(0, 2)}
                     <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>
@@ -129,13 +128,12 @@ const DashboardInputField = ({
                     )}
                   </span>
                 );
-              } else {
-                return (
-                  <span key={id} className="ph-no-capture">
-                    {word}
-                  </span>
-                );
               }
+              return (
+                <span key={`${word}_${id + 1}`} className="ph-no-capture">
+                  {word}
+                </span>
+              );
             })}
           </div>
           {blurred && (
@@ -160,7 +158,14 @@ const DashboardInputField = ({
 };
 
 function inputPropsAreEqual(prev: DashboardInputFieldProps, next: DashboardInputFieldProps) {
-  return prev.value === next.value && prev.type === next.type && prev.position === next.position && prev.blurred === next.blurred && prev.override === next.override && prev.isDuplicate === next.isDuplicate;
+  return (
+    prev.value === next.value &&
+    prev.type === next.type &&
+    prev.position === next.position &&
+    prev.blurred === next.blurred &&
+    prev.override === next.override &&
+    prev.isDuplicate === next.isDuplicate
+  );
 }
 
 export default memo(DashboardInputField, inputPropsAreEqual);

frontend/src/components/dashboard/DeleteActionButton.tsx

@@ -8,7 +8,7 @@ type Props = {
   onSubmit: () => void
 }
 
-export function DeleteActionButton({ onSubmit }: Props) {
+export const DeleteActionButton = ({ onSubmit }: Props) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false)
 

frontend/src/components/dashboard/DownloadSecretsMenu.tsx

@@ -1,5 +1,4 @@
 import { Fragment } from 'react';
-import { useTranslation } from "next-i18next";
 import { faDownload } from '@fortawesome/free-solid-svg-icons';
 import { Menu, Transition } from '@headlessui/react';
 import { SecretDataProps } from 'public/data/frequentInterfaces';
@@ -10,57 +9,49 @@ 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)
- * @param {object} obj 
+ * @param {object} obj
  * @param {SecretDataProps[]} obj.data - secrets that we want to downlaod
  * @param {string} obj.env - the environment which we're downloading (used for naming the file)
  */
-const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: string; }) => {
-  const { t } = useTranslation();
-
-  return <Menu
-    as="div"
-    className="relative inline-block text-left"
-  >
-    <Menu.Button
-      as="div"
-      className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
-    >
-      <Button
-        color="mineshaft"
-        size="icon-md"
-        icon={faDownload}
-        onButtonPressed={() => {}}
-      />
-    </Menu.Button>
-    <Transition
-      as={Fragment}
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
-    >
-      <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
-        <Menu.Item>
-          <Button
-            color="mineshaft"
-            onButtonPressed={() => downloadDotEnv({ data, env })}
-            size="md"
-            text="Download as .env"
-          />
-        </Menu.Item>
-        <Menu.Item>
-          <Button
-            color="mineshaft"
-            onButtonPressed={() => downloadYaml({ data, env })}
-            size="md"
-            text="Download as .yml"
-          />
-        </Menu.Item>
-      </Menu.Items>
-    </Transition>
-  </Menu>
-}
+const DownloadSecretMenu = ({ data, env }: { data: SecretDataProps[]; env: string }) => {
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <Menu.Button
+        as="div"
+        className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
+      >
+        <Button color="mineshaft" size="icon-md" icon={faDownload} onButtonPressed={() => {}} />
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[12rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none p-2 space-y-2">
+          <Menu.Item>
+            <Button
+              color="mineshaft"
+              onButtonPressed={() => downloadDotEnv({ data, env })}
+              size="md"
+              text="Download as .env"
+            />
+          </Menu.Item>
+          <Menu.Item>
+            <Button
+              color="mineshaft"
+              onButtonPressed={() => downloadYaml({ data, env })}
+              size="md"
+              text="Download as .yml"
+            />
+          </Menu.Item>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
 
 export default DownloadSecretMenu;

frontend/src/components/dashboard/DropZone.tsx

@@ -1,14 +1,15 @@
-import { type ChangeEvent, type DragEvent, useState } from "react";
-import Image from "next/image";
-import { useTranslation } from "next-i18next";
-import { faUpload } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+/* eslint-disable no-nested-ternary */
+import { type ChangeEvent, type DragEvent, useState } from 'react';
+import Image from 'next/image';
+import { useTranslation } from 'next-i18next';
+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 Button from '../basic/buttons/Button';
+import Error from '../basic/Error';
 import { parseDotEnv } from '../utilities/parseDotEnv';
-import guidGenerator from "../utilities/randomId";
+import guidGenerator from '../utilities/randomId';
 
 interface DropZoneProps {
   // TODO: change Data type from any
@@ -28,7 +29,7 @@ const DropZone = ({
   errorDragAndDrop,
   setButtonReady,
   keysExist,
-  numCurrentRows,
+  numCurrentRows
 }: DropZoneProps) => {
   const { t } = useTranslation();
 
@@ -47,7 +48,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);
@@ -57,16 +58,14 @@ const DropZone = ({
     switch (fileType) {
       case 'env': {
         const keyPairs = parseDotEnv(file);
-        secrets = Object.keys(keyPairs).map((key, index) => {
-          return {
-            id: guidGenerator(),
-            pos: numCurrentRows + index,
-            key: key,
-            value: keyPairs[key as keyof typeof keyPairs].value,
-            comment: keyPairs[key as keyof typeof keyPairs].comments.join('\n'),
-            type: 'shared',
-          };
-        });
+        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'
+        }));
         break;
       }
       case 'yml': {
@@ -79,15 +78,15 @@ const DropZone = ({
             fileContent!.items
               .find((item) => item.key.value === key)
               ?.key?.commentBefore?.split('\n')
-              .map((comment) => comment.trim())
+              .map((cmnt) => cmnt.trim())
               .join('\n') ?? '';
           return {
             id: guidGenerator(),
             pos: numCurrentRows + index,
-            key: key,
+            key,
             value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
             comment,
-            type: 'shared',
+            type: 'shared'
           };
         });
         break;
@@ -105,7 +104,7 @@ 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();
@@ -149,16 +148,11 @@ const DropZone = ({
 
   return loading ? (
     <div className="flex items-center justify-center pt-16 mb-16">
-      <Image
-        src="/images/loading/loading.gif"
-        height={70}
-        width={120}
-        alt="google logo"
-      ></Image>
+      <Image src="/images/loading/loading.gif" height={70} width={120} alt="google logo" />
     </div>
   ) : keysExist ? (
     <div
-      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 outline max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
+      className="opacity-60 hover:opacity-100 duration-200 relative bg-mineshaft-900 max-w-[calc(100%-1rem)] w-full outline-dashed outline-chicago-600 rounded-md outline-2 flex flex-col items-center justify-center mb-16 mx-auto mt-1 py-8 px-2"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
@@ -171,36 +165,27 @@ const DropZone = ({
         accept=".txt,.env,.yml"
         onChange={handleFileSelect}
       />
-      {errorDragAndDrop ? (
-        <div className="my-3 max-w-xl opacity-80"></div>
-      ) : (
-        <div className=""></div>
-      )}
+      {errorDragAndDrop ? <div className="my-3 max-w-xl opacity-80" /> : <div className="" />}
       <div className="flex flex-row">
-        <FontAwesomeIcon
-          icon={faUpload}
-          className="text-bunker-300 text-3xl mr-6"
-        />
-        <p className="text-bunker-300 mt-1">{t("common:drop-zone-keys")}</p>
+        <FontAwesomeIcon icon={faUpload} className="text-bunker-300 text-3xl mr-6" />
+        <p className="text-bunker-300 mt-1">{t('common:drop-zone-keys')}</p>
       </div>
-      {errorDragAndDrop ? (
+      {errorDragAndDrop && (
         <div className="mt-8 max-w-xl opacity-80">
           <Error text="Something went wrong! Make sure you drag the file directly from the folder in which it is located (e.g., not VS code). Tip: click 'Reveal in Finder/Explorer'" />
         </div>
-      ) : (
-        <></>
       )}
     </div>
   ) : (
     <div
-      className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker outline max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
+      className="opacity-80 hover:opacity-100 duration-200 relative bg-bunker max-w-2xl w-full outline-dashed outline-gray-700 rounded-md outline-2 flex flex-col items-center justify-center pt-16 mb-16 px-4"
       onDragEnter={handleDragEnter}
       onDragOver={handleDragOver}
       onDragLeave={handleDragLeave}
       onDrop={handleDrop}
     >
       <FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
-      <p className="">{t("common:drop-zone")}</p>
+      <p className="">{t('common:drop-zone')}</p>
       <input
         id="fileSelect"
         type="file"
@@ -209,14 +194,14 @@ const DropZone = ({
         onChange={handleFileSelect}
       />
       <div className="flex flex-row w-full items-center justify-center mb-6 mt-5">
-        <div className="border-t border-gray-700 w-1/5"></div>
+        <div className="border-t border-gray-700 w-1/5" />
         <p className="text-gray-400 text-xs mx-4">OR</p>
-        <div className="border-t border-gray-700 w-1/5"></div>
+        <div className="border-t border-gray-700 w-1/5" />
       </div>
       <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"
         />

frontend/src/components/dashboard/GenerateSecretMenu.tsx

@@ -1,95 +1,106 @@
-import { Fragment,useState } from 'react';
-import { useTranslation } from "next-i18next";
+import { Fragment, useState } from 'react';
+import { useTranslation } from 'next-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)
  * @returns the popup-menu for randomly generating secrets
  */
-const GenerateSecretMenu = ({ modifyValue, position }: { modifyValue: (value: string, position: number) => void; position: number; }) => {
+const GenerateSecretMenu = ({
+  modifyValue,
+  position
+}: {
+  modifyValue: (value: string, position: number) => void;
+  position: number;
+}) => {
   const [randomStringLength, setRandomStringLength] = useState(32);
   const { t } = useTranslation();
 
-  return <Menu as="div" className="relative inline-block text-left">
-    <div>
-      <Menu.Button className="inline-flex w-full justify-center rounded-md text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
-        <div className='py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500'>
-          <FontAwesomeIcon icon={faShuffle} className='text-bunker-300'/>
-        </div>
-      </Menu.Button>
-    </div>
-    <Transition
-      as={Fragment}
-      enter="transition ease-out duration-100"
-      enterFrom="transform opacity-0 scale-95"
-      enterTo="transform opacity-100 scale-100"
-      leave="transition ease-in duration-75"
-      leaveFrom="transform opacity-100 scale-100"
-      leaveTo="transform opacity-0 scale-95"
-    >
-      <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none px-1 py-1">
-        <div
-          onClick={() => {
-            if (randomStringLength > 32) {
-              setRandomStringLength(32);
-            } else if (randomStringLength < 2) {
-              setRandomStringLength(2);
-            } else {
-              modifyValue(
-                [...Array(randomStringLength)]
-                  .map(() => Math.floor(Math.random() * 16).toString(16))
-                  .join(''),
-                position
-              );
-            }
-          }}
-          className="relative flex flex-row justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
-        >
-          <FontAwesomeIcon
-            className="text-lg pl-1.5 pr-3"
-            icon={faShuffle}
-          />
-          <div className="text-sm justify-between flex flex-row w-full">
-            <p>{t("dashboard:sidebar.generate-random-hex")}</p>
-            <p>{t("dashboard:sidebar.digits")}</p>
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="inline-flex w-full justify-center text-sm font-medium text-gray-200 rounded-md hover:bg-white/10 duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75">
+          <div className="py-1 px-2 rounded-md bg-bunker-800 hover:bg-bunker-500">
+            <FontAwesomeIcon icon={faShuffle} className="text-bunker-300" />
           </div>
-        </div>
-        <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">
+        </Menu.Button>
+      </div>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute z-50 drop-shadow-xl right-0 mt-0.5 w-[20rem] origin-top-right rounded-md bg-bunker border border-mineshaft-500 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none px-1 py-1">
           <div
-            className="m-0.5 px-1 cursor-pointer rounded-md hover:bg-chicago-700"
+            onKeyDown={() => null}
+            role="button"
+            tabIndex={0}
             onClick={() => {
-              if (randomStringLength > 1) {
-                setRandomStringLength(randomStringLength - 1);
+              if (randomStringLength > 32) {
+                setRandomStringLength(32);
+              } else if (randomStringLength < 2) {
+                setRandomStringLength(2);
+              } else {
+                modifyValue(
+                  [...Array(randomStringLength)]
+                    .map(() => Math.floor(Math.random() * 16).toString(16))
+                    .join(''),
+                  position
+                );
               }
             }}
+            className="relative flex flex-row justify-start items-center cursor-pointer select-none py-2 px-2 rounded-md text-gray-400 hover:bg-white/10 duration-200 hover:text-gray-200 w-full"
           >
-            -
+            <FontAwesomeIcon className="text-lg pl-1.5 pr-3" icon={faShuffle} />
+            <div className="text-sm justify-between flex flex-row w-full">
+              <p>{t('dashboard:sidebar.generate-random-hex')}</p>
+              <p>{t('dashboard:sidebar.digits')}</p>
+            </div>
           </div>
-          <input
-            onChange={(e) =>
-              setRandomStringLength(parseInt(e.target.value))
-            }
-            value={randomStringLength}
-            className="text-center z-20 peer text-sm bg-transparent w-full outline-none"
-            spellCheck="false"
-          />
-          <div
-            className="m-0.5 px-1 pb-0.5 cursor-pointer rounded-md hover:bg-chicago-700"
-            onClick={() => {
-              if (randomStringLength < 32) {
-                setRandomStringLength(randomStringLength + 1);
-              }
-            }}
-          >
-            +
+          <div className="flex flex-row absolute bottom-[0.4rem] right-[3.3rem] w-16 bg-bunker-800 border border-chicago-700 rounded-md text-bunker-200 ">
+            <div
+              onKeyDown={() => null}
+              role="button"
+              tabIndex={0}
+              className="m-0.5 px-1 cursor-pointer rounded-md hover:bg-chicago-700"
+              onClick={() => {
+                if (randomStringLength > 1) {
+                  setRandomStringLength(randomStringLength - 1);
+                }
+              }}
+            >
+              -
+            </div>
+            <input
+              onChange={(e) => setRandomStringLength(parseInt(e.target.value, 10))}
+              value={randomStringLength}
+              className="text-center z-20 peer text-sm bg-transparent w-full outline-none"
+              spellCheck="false"
+            />
+            <div
+              onKeyDown={() => null}
+              role="button"
+              tabIndex={0}
+              className="m-0.5 px-1 pb-0.5 cursor-pointer rounded-md hover:bg-chicago-700"
+              onClick={() => {
+                if (randomStringLength < 32) {
+                  setRandomStringLength(randomStringLength + 1);
+                }
+              }}
+            >
+              +
+            </div>
           </div>
-        </div>
-      </Menu.Items>
-    </Transition>
-  </Menu>
-}
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+};
 
 export default GenerateSecretMenu;

frontend/src/components/dashboard/KeyPair.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SecretDataProps } from 'public/data/frequentInterfaces';
@@ -7,9 +6,9 @@ import DashboardInputField from './DashboardInputField';
 
 interface KeyPairProps {
   keyPair: SecretDataProps;
-  modifyKey: (value: string, position: number) => void; 
-  modifyValue: (value: string, position: number) => void; 
-  modifyValueOverride: (value: string, position: number) => void; 
+  modifyKey: (value: string, position: number) => void;
+  modifyValue: (value: string, position: number) => void;
+  modifyValueOverride: (value: string, position: number) => void;
   isBlurred: boolean;
   isDuplicate: boolean;
   toggleSidebar: (id: string) => void;
@@ -28,7 +27,7 @@ interface KeyPairProps {
  * @param {boolean} obj.isDuplicate - list of all the duplicates secret names on the dashboard
  * @param {function} obj.toggleSidebar - open/close/switch sidebar
  * @param {string} obj.sidebarSecretId - the id of a secret for the side bar is displayed
- * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar 
+ * @param {boolean} obj.isSnapshot - whether this keyPair is in a snapshot. If so, it won't have some features like sidebar
  * @returns
  */
 const KeyPair = ({
@@ -41,48 +40,61 @@ const KeyPair = ({
   toggleSidebar,
   sidebarSecretId,
   isSnapshot
-}: KeyPairProps) => {
-  return (
-    <div className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && "pointer-events-none"} ${keyPair.id == sidebarSecretId && "bg-mineshaft-500 duration-200"} rounded-md`}>
-      <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
-      {keyPair.valueOverride && <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
-        <div className='w-1 h-1 rounded-full bg-primary z-40'></div>
-        <span className="absolute z-50 hidden group-hover:flex group-hover:animate-popdown duration-200 w-[10.5rem] -left-[0.4rem] -top-[1.7rem] translate-y-full px-2 py-2 bg-mineshaft-500 rounded-b-md rounded-r-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-0 after:bottom-[100%] after:-translate-x-0 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-mineshaft-500">
-          This secret is overriden
-        </span>
-      </div>}
-        <div className="min-w-xl w-96">
-          <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
-            <DashboardInputField
-              onChangeHandler={modifyKey}
-              type="varName"
-              position={keyPair.pos}
-              value={keyPair.key}
-              isDuplicate={isDuplicate}
-            />
-          </div>
+}: KeyPairProps) => (
+  <div
+    className={`mx-1 flex flex-col items-center ml-1 ${isSnapshot && 'pointer-events-none'} ${
+      keyPair.id === sidebarSecretId && 'bg-mineshaft-500 duration-200'
+    } rounded-md`}
+  >
+    <div className="relative flex flex-row justify-between w-full max-w-5xl mr-auto max-h-14 my-1 items-start px-1">
+      {keyPair.valueOverride && (
+        <div className="group font-normal group absolute top-[1rem] left-[0.2rem] z-40 inline-block text-gray-300 underline hover:text-primary duration-200">
+          <div className="w-1 h-1 rounded-full bg-primary z-40" />
+          <span className="absolute z-50 hidden group-hover:flex group-hover:animate-popdown duration-200 w-[10.5rem] -left-[0.4rem] -top-[1.7rem] translate-y-full px-2 py-2 bg-mineshaft-500 rounded-b-md rounded-r-md text-center text-gray-100 text-sm after:content-[''] after:absolute after:left-0 after:bottom-[100%] after:-translate-x-0 after:border-8 after:border-x-transparent after:border-t-transparent after:border-b-mineshaft-500">
+            This secret is overriden
+          </span>
         </div>
-        <div className="w-full min-w-xl">
-          <div className={`flex min-w-xl items-center ${!isSnapshot && "pr-1.5"} rounded-lg mt-4 md:mt-0 max-h-10`}>
-            <DashboardInputField
-              onChangeHandler={keyPair.valueOverride ? modifyValueOverride : modifyValue}
-              type="value"
-              position={keyPair.pos}
-              value={keyPair.valueOverride ? keyPair.valueOverride : keyPair.value}
-              blurred={isBlurred}
-              override={Boolean(keyPair.valueOverride)}
-            />
-          </div>
-        </div>
-        {!isSnapshot && <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
-          <FontAwesomeIcon
-            className="text-gray-300 px-2.5 text-lg mt-0.5"
-            icon={faEllipsis}
+      )}
+      <div className="min-w-xl w-96">
+        <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
+          <DashboardInputField
+            onChangeHandler={modifyKey}
+            type="varName"
+            position={keyPair.pos}
+            value={keyPair.key}
+            isDuplicate={isDuplicate}
           />
-        </div>}
+        </div>
       </div>
+      <div className="w-full min-w-xl">
+        <div
+          className={`flex min-w-xl items-center ${
+            !isSnapshot && 'pr-1.5'
+          } rounded-lg mt-4 md:mt-0 max-h-10`}
+        >
+          <DashboardInputField
+            onChangeHandler={keyPair.valueOverride ? modifyValueOverride : modifyValue}
+            type="value"
+            position={keyPair.pos}
+            value={keyPair.valueOverride ? keyPair.valueOverride : keyPair.value}
+            blurred={isBlurred}
+            override={Boolean(keyPair.valueOverride)}
+          />
+        </div>
+      </div>
+      {!isSnapshot && (
+        <div
+          onKeyDown={() => null}
+          role="button"
+          tabIndex={0}
+          onClick={() => toggleSidebar(keyPair.id)}
+          className="cursor-pointer w-[2.35rem] h-[2.35rem] bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200"
+        >
+          <FontAwesomeIcon className="text-gray-300 px-2.5 text-lg mt-0.5" icon={faEllipsis} />
+        </div>
+      )}
     </div>
-  );
-};
+  </div>
+);
 
-export default KeyPair;
+export default KeyPair;

frontend/src/components/dashboard/SideBar.tsx

@@ -1,6 +1,7 @@
+/* eslint-disable react/no-unused-prop-types */
 import { useState } from 'react';
 import Image from 'next/image';
-import { useTranslation } from "next-i18next";
+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';
@@ -12,7 +13,6 @@ import DashboardInputField from './DashboardInputField';
 import { DeleteActionButton } from './DeleteActionButton';
 import GenerateSecretMenu from './GenerateSecretMenu';
 
-
 interface SecretProps {
   key: string;
   value: string;
@@ -22,22 +22,18 @@ interface SecretProps {
   comment: string;
 }
 
-interface OverrideProps {
-  id: string;
-  valueOverride: string;
-}
-export interface DeleteRowFunctionProps { 
-  ids: string[]; 
-  secretName: string; 
+export interface DeleteRowFunctionProps {
+  ids: string[];
+  secretName: string;
 }
 
 interface SideBarProps {
-  toggleSidebar: (value: string) => void; 
+  toggleSidebar: (value: string) => void;
   data: SecretProps[];
-  modifyKey: (value: string, position: number) => void; 
-  modifyValue: (value: string, position: number) => void; 
-  modifyValueOverride: (value: string | undefined, position: number) => void; 
-  modifyComment: (value: string, position: number) => void; 
+  modifyKey: (value: string, position: number) => void;
+  modifyValue: (value: string, position: number) => void;
+  modifyValueOverride: (value: string | undefined, position: number) => void;
+  modifyComment: (value: string, position: number) => void;
   buttonReady: boolean;
   savePush: () => void;
   sharedToHide: string[];
@@ -57,112 +53,140 @@ interface SideBarProps {
  * @param {function} obj.deleteRow - a function to delete a certain keyPair
  * @returns the sidebar with 'secret's settings'
  */
-const SideBar = ({ 
-  toggleSidebar, 
-  data, 
-  modifyKey, 
-  modifyValue, 
-  modifyValueOverride, 
+const SideBar = ({
+  toggleSidebar,
+  data,
+  modifyKey,
+  modifyValue,
+  modifyValueOverride,
   modifyComment,
-  buttonReady, 
+  buttonReady,
   savePush,
   deleteRow
 }: SideBarProps) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isLoading, setIsLoading] = useState(false);
-  const [overrideEnabled, setOverrideEnabled] = useState(data[0].valueOverride != undefined);
+  const [overrideEnabled, setOverrideEnabled] = useState(data[0].valueOverride !== undefined);
   const { t } = useTranslation();
 
-  return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between'>
-    {isLoading ? (
-      <div className="flex items-center justify-center h-full">
-        <Image
-          src="/images/loading/loading.gif"
-          height={60}
-          width={100}
-          alt="infisical loading indicator"
-        ></Image>
-      </div> 
+  return (
+    <div className="absolute border-l border-mineshaft-500 bg-bunker h-full w-96 top-14 right-0 z-40 shadow-xl flex flex-col justify-between">
+      {isLoading ? (
+        <div className="flex items-center justify-center h-full">
+          <Image
+            src="/images/loading/loading.gif"
+            height={60}
+            width={100}
+            alt="infisical loading indicator"
+          />
+        </div>
       ) : (
-      <div className='h-min overflow-y-auto'>
-        <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
-          <p className="font-semibold text-lg text-bunker-200">{t("dashboard:sidebar.secret")}</p>
-          <div className='p-1' onClick={() => toggleSidebar("None")}>
-            <FontAwesomeIcon icon={faX} className='w-4 h-4 text-bunker-300 cursor-pointer'/>
-          </div>
-        </div>
-        <div className='mt-4 px-4 pointer-events-none'>
-          <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.key")}</p>
-          <DashboardInputField
-            onChangeHandler={modifyKey}
-            type="varName"
-            position={data[0]?.pos}
-            value={data[0]?.key}
-            isDuplicate={false}
-            blurred={false}
-          />
-        </div>
-        {data[0]?.value 
-          ? <div className={`relative mt-2 px-4 ${overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
-          <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.value")}</p>
-          <DashboardInputField
-            onChangeHandler={modifyValue}
-            type="value"
-            position={data[0].pos}
-            value={data[0]?.value}
-            isDuplicate={false}
-            blurred={true}     
-          />
-          <div className='absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50'>
-            <GenerateSecretMenu modifyValue={modifyValue} position={data[0]?.pos} />
-          </div>
-        </div>
-          : <div className='px-4 text-sm text-bunker-300 pt-4'>
-            <span className='py-0.5 px-1 rounded-md bg-primary-200/10 mr-1'>{t("common:note")}:</span>
-            {t("dashboard:sidebar.personal-explanation")}
-          </div>}
-        <div className='mt-4 px-4'>
-          {data[0]?.value &&
-          <div className='flex flex-row items-center justify-between my-2 pl-1 pr-2'>
-            <p className='text-sm text-bunker-300'>{t("dashboard:sidebar.override")}</p>
-            <Toggle 
-              enabled={overrideEnabled} 
-              setEnabled={setOverrideEnabled} 
-              addOverride={modifyValueOverride} 
-              pos={data[0]?.pos}
-            />
-          </div>}
-          <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
-            <DashboardInputField
-              onChangeHandler={modifyValueOverride}
-              type="value"
-              position={data[0]?.pos}
-              value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
-              isDuplicate={false}
-              blurred={true}
-            />
-            <div className='absolute right-[0.57rem] top-[0.3rem] z-50'>
-              <GenerateSecretMenu modifyValue={modifyValueOverride} position={data[0]?.pos} />
+        <div className="h-min overflow-y-auto">
+          <div className="flex flex-row px-4 py-3 border-b border-mineshaft-500 justify-between items-center">
+            <p className="font-semibold text-lg text-bunker-200">{t('dashboard:sidebar.secret')}</p>
+            <div
+              onKeyDown={() => null}
+              role="button"
+              tabIndex={0}
+              className="p-1"
+              onClick={() => toggleSidebar('None')}
+            >
+              <FontAwesomeIcon icon={faX} className="w-4 h-4 text-bunker-300 cursor-pointer" />
             </div>
           </div>
+          <div className="mt-4 px-4 pointer-events-none">
+            <p className="text-sm text-bunker-300">{t('dashboard:sidebar.key')}</p>
+            <DashboardInputField
+              onChangeHandler={modifyKey}
+              type="varName"
+              position={data[0]?.pos}
+              value={data[0]?.key}
+              isDuplicate={false}
+              blurred={false}
+            />
+          </div>
+          {data[0]?.value ? (
+            <div
+              className={`relative mt-2 px-4 ${
+                overrideEnabled && 'opacity-40 pointer-events-none'
+              } duration-200`}
+            >
+              <p className="text-sm text-bunker-300">{t('dashboard:sidebar.value')}</p>
+              <DashboardInputField
+                onChangeHandler={modifyValue}
+                type="value"
+                position={data[0].pos}
+                value={data[0]?.value}
+                isDuplicate={false}
+                blurred
+              />
+              <div className="absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50">
+                <GenerateSecretMenu modifyValue={modifyValue} position={data[0]?.pos} />
+              </div>
+            </div>
+          ) : (
+            <div className="px-4 text-sm text-bunker-300 pt-4">
+              <span className="py-0.5 px-1 rounded-md bg-primary-200/10 mr-1">
+                {t('common:note')}:
+              </span>
+              {t('dashboard:sidebar.personal-explanation')}
+            </div>
+          )}
+          <div className="mt-4 px-4">
+            {data[0]?.value && (
+              <div className="flex flex-row items-center justify-between my-2 pl-1 pr-2">
+                <p className="text-sm text-bunker-300">{t('dashboard:sidebar.override')}</p>
+                <Toggle
+                  enabled={overrideEnabled}
+                  setEnabled={setOverrideEnabled}
+                  addOverride={modifyValueOverride}
+                  pos={data[0]?.pos}
+                />
+              </div>
+            )}
+            <div
+              className={`relative ${
+                !overrideEnabled && 'opacity-40 pointer-events-none'
+              } duration-200`}
+            >
+              <DashboardInputField
+                onChangeHandler={modifyValueOverride}
+                type="value"
+                position={data[0]?.pos}
+                value={overrideEnabled ? data[0]?.valueOverride : data[0]?.value}
+                isDuplicate={false}
+                blurred
+              />
+              <div className="absolute right-[0.57rem] top-[0.3rem] z-50">
+                <GenerateSecretMenu modifyValue={modifyValueOverride} position={data[0]?.pos} />
+              </div>
+            </div>
+          </div>
+          <SecretVersionList secretId={data[0]?.id} />
+          <CommentField
+            comment={data[0]?.comment}
+            modifyComment={modifyComment}
+            position={data[0]?.pos}
+          />
         </div>
-        <SecretVersionList secretId={data[0]?.id} />
-        <CommentField comment={data[0]?.comment} modifyComment={modifyComment} position={data[0]?.pos} />
+      )}
+      <div className="flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]">
+        <Button
+          text={String(t('common:save-changes'))}
+          onButtonPressed={savePush}
+          color="primary"
+          size="md"
+          active={buttonReady}
+          textDisabled="Saved"
+        />
+        <DeleteActionButton
+          onSubmit={() =>
+            deleteRow({ ids: data.map((secret) => secret.id), secretName: data[0]?.key })
+          }
+        />
       </div>
-    )}
-    <div className={`flex justify-start max-w-sm mt-4 px-4 mt-full mb-[4.7rem]`}>
-      <Button
-        text={String(t("common:save-changes"))}
-        onButtonPressed={savePush}
-        color="primary"
-        size="md"
-        active={buttonReady}
-        textDisabled="Saved"
-      />
-      <DeleteActionButton 
-        onSubmit={() => deleteRow({ ids: data.map(secret => secret.id), secretName: data[0]?.key })}
-      />
     </div>
-  </div>
+  );
 };
 
 export default SideBar;