Add eslint rule and fix as many issues as possible

frontend/src/views/DashboardPage/components/CompareSecret/CompareSecret.tsx

@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
+import { useCallback } from "react";
 
-import { FormControl, Input, Spinner } from '@app/components/v2';
-import { useGetProjectSecrets, useGetUserWsKey } from '@app/hooks/api';
+import { FormControl, Input, Spinner } from "@app/components/v2";
+import { useGetProjectSecrets, useGetUserWsKey } from "@app/hooks/api";
 
 type SecretValueProps = {
   workspaceId: string;
@@ -21,7 +21,7 @@ const SecretValue = ({ workspaceId, env, envName, secretKey }: SecretValueProps)
   const getValue = useCallback(
     (data: typeof secret) => {
       const sec = data?.secrets?.find(({ key: secKey }) => secKey === secretKey);
-      return sec?.value || 'Not found';
+      return sec?.value || "Not found";
     },
     [secretKey]
   );

frontend/src/views/DashboardPage/components/CompareSecret/index.tsx

@@ -1 +1 @@
-export { CompareSecret } from './CompareSecret';
+export { CompareSecret } from "./CompareSecret";

frontend/src/views/DashboardPage/components/CreateTagModal/CreateTagModal.tsx

@@ -1,15 +1,15 @@
-import { Controller, useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
-import { Button, FormControl, Input, ModalClose } from '@app/components/v2';
+import { Button, FormControl, Input, ModalClose } from "@app/components/v2";
 
 type Props = {
   onCreateTag: (tagName: string) => Promise<void>;
 };
 
 const createTagSchema = yup.object({
-  name: yup.string().required().trim().label('Tag Name')
+  name: yup.string().required().trim().label("Tag Name")
 });
 type FormData = yup.InferType<typeof createTagSchema>;
 

frontend/src/views/DashboardPage/components/CreateTagModal/index.tsx

@@ -1 +1 @@
-export {CreateTagModal} from './CreateTagModal'
+export {CreateTagModal} from "./CreateTagModal"

frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { useCallback, useState } from 'react';
-import { faCircle, faEye, faEyeSlash, faKey, faMinus } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { twMerge } from 'tailwind-merge';
+import { useCallback, useState } from "react";
+import { faCircle, faEye, faEyeSlash, faKey, faMinus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 type Props = {
   secrets: any[] | undefined;
@@ -39,7 +39,7 @@ const DashboardInput = ({
         <span className="ph-no-capture text-yellow" key={`${val}-${index + 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>
@@ -59,29 +59,29 @@ const DashboardInput = ({
 
   return (
     <td
-      key={`row-${secret?.key || ''}--`}
+      key={`row-${secret?.key || ""}--`}
       className={`flex h-10 w-full cursor-default flex-row items-center justify-center ${
-        !(secret?.value || secret?.value === '') ? 'bg-red-800/10' : 'bg-mineshaft-900/30'
+        !(secret?.value || secret?.value === "") ? "bg-red-800/10" : "bg-mineshaft-900/30"
       }`}
     >
       <div className="group relative flex	w-full cursor-default flex-col justify-center whitespace-pre">
         <input
-          value={isOverridden ? secret.valueOverride : secret?.value || ''}
+          value={isOverridden ? secret.valueOverride : secret?.value || ""}
           readOnly={isReadOnly}
           className={twMerge(
-            'ph-no-capture no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full cursor-default bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-transparent outline-none no-scrollbar',
-            isSecretValueHidden && 'text-transparent focus:text-transparent active:text-transparent'
+            "ph-no-capture no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full cursor-default bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-transparent outline-none no-scrollbar",
+            isSecretValueHidden && "text-transparent focus:text-transparent active:text-transparent"
           )}
           spellCheck="false"
         />
         <div
           className={twMerge(
-            'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full cursor-default flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible',
-            isSecretValueHidden && secret?.value ? 'invisible' : 'visible',
+            "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full cursor-default flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible",
+            isSecretValueHidden && secret?.value ? "invisible" : "visible",
             isSecretValueHidden &&
               secret?.value &&
-              'duration-50 text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400',
-            !secret?.value && 'justify-center text-bunker-400'
+              "duration-50 text-bunker-800 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400",
+            !secret?.value && "justify-center text-bunker-400"
           )}
         >
           {syntaxHighlight(secret?.value)}
@@ -89,8 +89,8 @@ const DashboardInput = ({
         {isSecretValueHidden && secret?.value && (
           <div className="duration-50 peer absolute z-0 flex h-10 w-full flex-row items-center justify-between text-clip pr-2 text-bunker-400 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden">
             <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
-              {(isOverridden ? secret.valueOverride : secret?.value || '')
-                ?.split('')
+              {(isOverridden ? secret.valueOverride : secret?.value || "")
+                ?.split("")
                 .map((_a: string, index: number) => (
                   <FontAwesomeIcon
                     key={`${secret?.value}_${index + 1}`}
@@ -98,7 +98,7 @@ const DashboardInput = ({
                     icon={faCircle}
                   />
                 ))}
-              {(isOverridden ? secret.valueOverride : secret?.value || '')?.split('').length ===
+              {(isOverridden ? secret.valueOverride : secret?.value || "")?.split("").length ===
                 0 && <span className="text-sm text-bunker-400/80">EMPTY</span>}
             </div>
           </div>
@@ -130,7 +130,7 @@ export const EnvComparisonRow = ({
       </td>
       <td className="flex h-full min-w-[200px] flex-row items-center justify-between lg:min-w-[220px] xl:min-w-[250px]">
         <div className="flex h-8 cursor-default flex-row items-center truncate">
-          {secrets![0].key || ''}
+          {secrets![0].key || ""}
         </div>
         <button
           type="button"
@@ -143,7 +143,7 @@ export const EnvComparisonRow = ({
       {userAvailableEnvs?.map(({ slug }) => (
         <DashboardInput
           isReadOnly={isReadOnly}
-          key={`row-${secrets![0].key || ''}-${slug}`}
+          key={`row-${secrets![0].key || ""}-${slug}`}
           isOverridden={false}
           secret={getSecretByEnv(slug, secrets)}
           isSecretValueHidden={areValuesHiddenThisRow && isSecretValueHidden}

frontend/src/views/DashboardPage/components/EnvComparisonRow/FolderComparisonRow.tsx

@@ -1,5 +1,5 @@
-import { faCheck, faFolder, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheck, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props = {
   folderInEnv: Record<string, boolean>;
@@ -30,8 +30,8 @@ export const FolderComparisonRow = ({
       <td
         className={`flex h-10 w-full cursor-default flex-row items-center justify-center ${
           folderInEnv[slug]
-            ? 'bg-mineshaft-900/30 text-green-500/80'
-            : 'bg-red-800/10 text-red-500/80'
+            ? "bg-mineshaft-900/30 text-green-500/80"
+            : "bg-red-800/10 text-red-500/80"
         }`}
         key={`${folderName}-${slug}`}
       >

frontend/src/views/DashboardPage/components/EnvComparisonRow/index.tsx

@@ -1 +1 @@
-export { EnvComparisonRow } from './EnvComparisonRow';
+export { EnvComparisonRow } from "./EnvComparisonRow";

frontend/src/views/DashboardPage/components/FolderSection/FolderForm.tsx

@@ -1,8 +1,8 @@
-import { Controller, useForm } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
-import * as yup from 'yup';
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
 
-import { Button, FormControl, Input, ModalClose } from '@app/components/v2';
+import { Button, FormControl, Input, ModalClose } from "@app/components/v2";
 
 type Props = {
   onCreateFolder: (folderName: string) => Promise<void>;
@@ -16,8 +16,8 @@ const formSchema = yup.object({
     .string()
     .required()
     .trim()
-    .matches(/^[a-zA-Z0-9-_]+$/, 'Folder name cannot contain spaces. Only underscore and dashes')
-    .label('Tag Name')
+    .matches(/^[a-zA-Z0-9-_]+$/, "Folder name cannot contain spaces. Only underscore and dashes")
+    .label("Tag Name")
 });
 type TFormData = yup.InferType<typeof formSchema>;
 
@@ -62,7 +62,7 @@ export const FolderForm = ({
       />
       <div className="mt-8 flex items-center">
         <Button className="mr-4" type="submit" isDisabled={isSubmitting} isLoading={isSubmitting}>
-          {isEdit ? 'Save' : 'Create'}
+          {isEdit ? "Save" : "Create"}
         </Button>
         <ModalClose asChild>
           <Button variant="plain" colorSchema="secondary">

frontend/src/views/DashboardPage/components/FolderSection/FolderSection.tsx

@@ -1,7 +1,7 @@
-import { faEdit, faFolder, faXmark } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { IconButton, Tooltip } from '@app/components/v2';
+import { IconButton, Tooltip } from "@app/components/v2";
 
 type Props = {
   folders?: Array<{ id: string; name: string }>;
@@ -15,7 +15,7 @@ export const FolderSection = ({
   onFolderUpdate: handleFolderUpdate,
   onFolderDelete: handleFolderDelete,
   onFolderOpen: handleFolderOpen,
-  search = '',
+  search = "",
   folders = []
 }: Props) => {
   return (
@@ -33,7 +33,7 @@ export const FolderSection = ({
             <td
               colSpan={2}
               className="relative flex w-full min-w-[220px] items-center justify-between overflow-hidden text-ellipsis lg:min-w-[240px] xl:min-w-[280px]"
-              style={{ paddingTop: '0', paddingBottom: '0' }}
+              style={{ paddingTop: "0", paddingBottom: "0" }}
             >
               <div
                 className="flex-grow cursor-default p-2"

frontend/src/views/DashboardPage/components/FolderSection/index.tsx

@@ -1,3 +1,3 @@
-export { FolderForm } from './FolderForm';
-export { FolderSection } from './FolderSection';
-export * from './types';
+export { FolderForm } from "./FolderForm";
+export { FolderSection } from "./FolderSection";
+export * from "./types";

frontend/src/views/DashboardPage/components/PitDrawer/PitDrawer.tsx

@@ -1,9 +1,9 @@
-import { Fragment, useCallback } from 'react';
-import { InfiniteData } from '@tanstack/react-query';
+import { Fragment, useCallback } from "react";
+import { InfiniteData } from "@tanstack/react-query";
 
-import { Button, Drawer, DrawerContent } from '@app/components/v2';
-import timeSince from '@app/ee/utilities/timeSince';
-import { TWorkspaceSecretSnapshot } from '@app/hooks/api/secretSnapshots/types';
+import { Button, Drawer, DrawerContent } from "@app/components/v2";
+import timeSince from "@app/ee/utilities/timeSince";
+import { TWorkspaceSecretSnapshot } from "@app/hooks/api/secretSnapshots/types";
 
 type Props = {
   isDrawerOpen: boolean;
@@ -27,9 +27,9 @@ export const PitDrawer = ({
   fetchNextPage
 }: Props): JSX.Element => {
   const getButtonLabel = useCallback((isFirstChild: boolean, isSelectedSnapshot: boolean) => {
-    if (isFirstChild) return 'Current Version';
-    if (isSelectedSnapshot) return 'Currently Viewing';
-    return 'Explore';
+    if (isFirstChild) return "Current Version";
+    if (isSelectedSnapshot) return "Currently Viewing";
+    return "Explore";
   }, []);
 
   return (
@@ -48,13 +48,13 @@ export const PitDrawer = ({
                   isFullWidth
                   colorSchema={
                     (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
-                      ? 'primary'
-                      : 'secondary'
+                      ? "primary"
+                      : "secondary"
                   }
                   variant={
                     (i === 0 && index === 0 && snapshotId === null) || snapshotId === _id
-                      ? 'selected'
-                      : 'star'
+                      ? "selected"
+                      : "star"
                   }
                   onClick={() => onSelectSnapshot(_id)}
                 >
@@ -75,7 +75,7 @@ export const PitDrawer = ({
           isDisabled={isFetchingNextPage || !hasNextPage}
           onClick={fetchNextPage}
         >
-          {hasNextPage ? 'Load More' : 'End of history'}
+          {hasNextPage ? "Load More" : "End of history"}
         </Button>
       </DrawerContent>
     </Drawer>

frontend/src/views/DashboardPage/components/PitDrawer/index.tsx

@@ -1 +1 @@
-export { PitDrawer } from './PitDrawer';
+export { PitDrawer } from "./PitDrawer";

frontend/src/views/DashboardPage/components/SecretDetailDrawer/GenRandomNumber.tsx

@@ -1,11 +1,11 @@
-import crypto from 'crypto';
+import crypto from "crypto";
 
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faMinus, faPlus, faShuffle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { faMinus, faPlus, faShuffle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Button, Input } from '@app/components/v2';
+import { Button, Input } from "@app/components/v2";
 
 type Props = {
   onGenerate: (val: string) => void;
@@ -16,7 +16,7 @@ export const GenRandomNumber = ({ onGenerate }: Props) => {
   const [value, setValue] = useState(32);
 
   const onGenerateRandomHex = () => {
-    const rand = crypto.randomBytes(value).toString('hex');
+    const rand = crypto.randomBytes(value).toString("hex");
     onGenerate(rand);
   };
 
@@ -28,7 +28,7 @@ export const GenRandomNumber = ({ onGenerate }: Props) => {
         leftIcon={<FontAwesomeIcon icon={faShuffle} />}
         onClick={onGenerateRandomHex}
       >
-        {t('dashboard.sidebar.generate-random-hex')}
+        {t("dashboard.sidebar.generate-random-hex")}
       </Button>
       <div className="rounded-r-md bg-mineshaft p-2">
         <div className="flex rounded-md border-mineshaft-400 bg-bunker-800 p-1 px-2">

frontend/src/views/DashboardPage/components/SecretDetailDrawer/SecretDetailDrawer.tsx

@@ -1,6 +1,6 @@
-import { useFormContext, useWatch } from 'react-hook-form';
-import { faCircle, faCircleDot, faShuffle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useFormContext, useWatch } from "react-hook-form";
+import { faCircle, faCircleDot, faShuffle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import {
   Button,
@@ -13,11 +13,11 @@ import {
   PopoverTrigger,
   Switch,
   TextArea
-} from '@app/components/v2';
-import { useToggle } from '@app/hooks';
+} from "@app/components/v2";
+import { useToggle } from "@app/hooks";
 
-import { FormData, SecretActionType } from '../../DashboardPage.utils';
-import { GenRandomNumber } from './GenRandomNumber';
+import { FormData, SecretActionType } from "../../DashboardPage.utils";
+import { GenRandomNumber } from "./GenRandomNumber";
 
 type Props = {
   isDrawerOpen: boolean;
@@ -55,7 +55,7 @@ export const SecretDetailDrawer = ({
     if (isOverridden) {
       // when user created a new override but then removes
       if (SecretActionType.Created) {
-        setValue(`secrets.${index}.valueOverride`, '', { shouldDirty: true });
+        setValue(`secrets.${index}.valueOverride`, "", { shouldDirty: true });
       }
       setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, { shouldDirty: true });
     } else {
@@ -114,7 +114,7 @@ export const SecretDetailDrawer = ({
                 placeholder="EMPTY"
                 onBlur={setCanRevealSecVal.off}
                 onFocus={setCanRevealSecVal.on}
-                type={canRevealSecVal ? 'text' : 'password'}
+                type={canRevealSecVal ? "text" : "password"}
                 rightIcon={
                   <PopoverTrigger disabled={isOverridden || isReadOnly}>
                     <FontAwesomeIcon icon={faShuffle} />
@@ -150,7 +150,7 @@ export const SecretDetailDrawer = ({
                 isReadOnly={!isOverridden || isReadOnly}
                 {...register(`secrets.${index}.valueOverride`)}
                 placeholder="EMPTY"
-                type={canRevealSecOverride ? 'text' : 'password'}
+                type={canRevealSecOverride ? "text" : "password"}
                 onBlur={setCanRevealSecOverride.off}
                 onFocus={setCanRevealSecOverride.on}
                 rightIcon={
@@ -182,13 +182,13 @@ export const SecretDetailDrawer = ({
                       <FontAwesomeIcon icon={i === 0 ? faCircleDot : faCircle} size="sm" />
                     </div>
                     <div>
-                      {new Date(createdAt).toLocaleDateString('en-US', {
-                        year: 'numeric',
-                        month: '2-digit',
-                        day: '2-digit',
-                        hour: '2-digit',
-                        minute: '2-digit',
-                        second: '2-digit'
+                      {new Date(createdAt).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "2-digit",
+                        day: "2-digit",
+                        hour: "2-digit",
+                        minute: "2-digit",
+                        second: "2-digit"
                       })}
                     </div>
                   </div>

frontend/src/views/DashboardPage/components/SecretDetailDrawer/index.tsx

@@ -1 +1 @@
-export {SecretDetailDrawer} from './SecretDetailDrawer'
+export {SecretDetailDrawer} from "./SecretDetailDrawer"

frontend/src/views/DashboardPage/components/SecretDropzone/SecretDropzone.tsx

@@ -1,14 +1,14 @@
-import { ChangeEvent, DragEvent } from 'react';
-import { useTranslation } from 'react-i18next';
-import { faUpload } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { twMerge } from 'tailwind-merge';
+import { ChangeEvent, DragEvent } from "react";
+import { useTranslation } from "react-i18next";
+import { faUpload } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
-import { useNotificationContext } from '@app/components/context/Notifications/NotificationProvider';
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 // TODO:(akhilmhdh) convert all the util functions like this into a lib folder grouped by functionalityj
-import { parseDotEnv } from '@app/components/utilities/parseDotEnv';
-import { Button } from '@app/components/v2';
-import { useToggle } from '@app/hooks/useToggle';
+import { parseDotEnv } from "@app/components/utilities/parseDotEnv";
+import { Button } from "@app/components/v2";
+import { useToggle } from "@app/hooks/useToggle";
 
 type Props = {
   isSmaller: boolean;
@@ -25,9 +25,9 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
   const handleDrag = (e: DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    if (e.type === 'dragenter' || e.type === 'dragover') {
+    if (e.type === "dragenter" || e.type === "dragover") {
       setDragActive.on();
-    } else if (e.type === 'dragleave') {
+    } else if (e.type === "dragleave") {
       setDragActive.off();
     }
   };
@@ -36,8 +36,8 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
     const reader = new FileReader();
     if (!file) {
       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
       });
       return;
@@ -67,7 +67,7 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
       return;
     }
 
-    e.dataTransfer.dropEffect = 'copy';
+    e.dataTransfer.dropEffect = "copy";
     setDragActive.off();
     parseFile(e.dataTransfer.files[0]);
   };
@@ -84,10 +84,10 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
       onDragOver={handleDrag}
       onDrop={handleDrop}
       className={twMerge(
-        'relative mx-0.5 mb-4 mt-4 flex w-full max-w-[calc(100vw-292px)] cursor-pointer items-center justify-center space-x-2 rounded-md bg-mineshaft-900 py-8 px-2 text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100',
-        isDragActive && 'opacity-100',
-        !isSmaller && 'max-w-3xl flex-col space-y-4 py-20',
-        isLoading && 'bg-bunker-800'
+        "relative mx-0.5 mb-4 mt-4 flex w-full max-w-[calc(100vw-292px)] cursor-pointer items-center justify-center space-x-2 rounded-md bg-mineshaft-900 py-8 px-2 text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100",
+        isDragActive && "opacity-100",
+        !isSmaller && "max-w-3xl flex-col space-y-4 py-20",
+        isLoading && "bg-bunker-800"
       )}
     >
       {isLoading ? (
@@ -97,10 +97,10 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
       ) : (
         <>
           <div>
-            <FontAwesomeIcon icon={faUpload} size={isSmaller ? '2x' : '5x'} />
+            <FontAwesomeIcon icon={faUpload} size={isSmaller ? "2x" : "5x"} />
           </div>
           <div>
-            <p className="">{t(isSmaller ? 'common.drop-zone-keys' : 'common.drop-zone')}</p>
+            <p className="">{t(isSmaller ? "common.drop-zone-keys" : "common.drop-zone")}</p>
           </div>
           <input
             id="fileSelect"
@@ -122,7 +122,7 @@ export const SecretDropzone = ({ isSmaller, onParsedEnv, onAddNewSecret }: Props
                 </Button>
               </div>
             </>
-          )}{' '}
+          )}{" "}
         </>
       )}
     </div>

frontend/src/views/DashboardPage/components/SecretDropzone/index.tsx

@@ -1 +1 @@
-export { SecretDropzone } from './SecretDropzone';
+export { SecretDropzone } from "./SecretDropzone";

frontend/src/views/DashboardPage/components/SecretInputRow/MaskedInput.tsx

@@ -1,10 +1,10 @@
-import { useCallback } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { faCircle } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { twMerge } from 'tailwind-merge';
+import { useCallback } from "react";
+import { useFormContext, useWatch } from "react-hook-form";
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
-import { FormData } from '../../DashboardPage.utils';
+import { FormData } from "../../DashboardPage.utils";
 
 type Props = {
   isReadOnly?: boolean;
@@ -29,7 +29,7 @@ export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridd
         <span className="ph-no-capture text-yellow" key={`${val}-${i + 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>
@@ -54,9 +54,9 @@ export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridd
           {...register(`secrets.${index}.valueOverride`)}
           readOnly={isReadOnly}
           className={twMerge(
-            'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar',
+            "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar",
             !isSecretValueHidden &&
-              'text-transparent focus:text-transparent active:text-transparent'
+              "text-transparent focus:text-transparent active:text-transparent"
           )}
           spellCheck="false"
         />
@@ -65,39 +65,39 @@ export const MaskedInput = ({ isReadOnly, isSecretValueHidden, index, isOverridd
           {...register(`secrets.${index}.value`)}
           readOnly={isReadOnly}
           className={twMerge(
-            'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar',
+            "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 peer z-10 w-full bg-transparent px-2 py-2 font-mono text-sm text-transparent caret-white outline-none no-scrollbar",
             !isSecretValueHidden &&
-              'text-transparent focus:text-transparent active:text-transparent'
+              "text-transparent focus:text-transparent active:text-transparent"
           )}
           spellCheck="false"
         />
       )}
       <div
         className={twMerge(
-          'ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible',
-          isSecretValueHidden ? 'invisible' : 'visible',
+          "ph-no-capture min-w-16 no-scrollbar::-webkit-scrollbar duration-50 absolute z-0 mt-0.5 flex h-10 w-full flex-row overflow-x-scroll whitespace-pre bg-transparent px-2 py-2 font-mono text-sm outline-none no-scrollbar peer-focus:visible",
+          isSecretValueHidden ? "invisible" : "visible",
           isOverridden
-            ? 'text-primary-300'
-            : 'duration-50 text-gray-400 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400'
+            ? "text-primary-300"
+            : "duration-50 text-gray-400 group-hover:text-gray-400 peer-focus:text-gray-100 peer-active:text-gray-400"
         )}
       >
-        {syntaxHighlight(value || '')}
+        {syntaxHighlight(value || "")}
       </div>
       <div
         className={twMerge(
-          'duration-50 peer absolute z-0 flex h-10 w-full flex-row items-center justify-between text-clip pr-2 text-bunker-400 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden',
-          !isSecretValueHidden ? 'invisible' : 'visible'
+          "duration-50 peer absolute z-0 flex h-10 w-full flex-row items-center justify-between text-clip pr-2 text-bunker-400 group-hover:bg-white/[0.00] peer-focus:hidden peer-active:hidden",
+          !isSecretValueHidden ? "invisible" : "visible"
         )}
       >
         <div className="no-scrollbar::-webkit-scrollbar flex flex-row items-center overflow-x-scroll px-2 no-scrollbar">
-          {value?.split('').map((val, i) => (
+          {value?.split("").map((val, i) => (
             <FontAwesomeIcon
               key={`${value}_${val}_${i + 1}`}
               className="mr-0.5 text-xxs"
               icon={faCircle}
             />
           ))}
-          {value?.split('').length === 0 && (
+          {value?.split("").length === 0 && (
             <span className="text-sm text-bunker-400/80">EMPTY</span>
           )}
         </div>

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { memo, useRef } from 'react';
-import { Controller, useFieldArray, useFormContext, useWatch } from 'react-hook-form';
+import { memo, useRef } from "react";
+import { Controller, useFieldArray, useFormContext, useWatch } from "react-hook-form";
 import {
   faCodeBranch,
   faComment,
@@ -9,10 +9,10 @@ import {
   faPlus,
   faTags,
   faXmark
-} from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { cx } from 'cva';
-import { twMerge } from 'tailwind-merge';
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { cx } from "cva";
+import { twMerge } from "tailwind-merge";
 
 import {
   Button,
@@ -29,11 +29,11 @@ import {
   Tag,
   TextArea,
   Tooltip
-} from '@app/components/v2';
-import { WsTag } from '@app/hooks/api/types';
+} from "@app/components/v2";
+import { WsTag } from "@app/hooks/api/types";
 
-import { FormData, SecretActionType } from '../../DashboardPage.utils';
-import { MaskedInput } from './MaskedInput';
+import { FormData, SecretActionType } from "../../DashboardPage.utils";
+import { MaskedInput } from "./MaskedInput";
 
 type Props = {
   index: number;
@@ -53,14 +53,14 @@ type Props = {
 };
 
 const tagColors = [
-  { bg: 'bg-[#f1c40f]/40', text: 'text-[#fcf0c3]/70' },
-  { bg: 'bg-[#cb1c8d]/40', text: 'text-[#f2c6e3]/70' },
-  { bg: 'bg-[#badc58]/40', text: 'text-[#eef6d5]/70' },
-  { bg: 'bg-[#ff5400]/40', text: 'text-[#ffddcc]/70' },
-  { bg: 'bg-[#3AB0FF]/40', text: 'text-[#f0fffd]/70' },
-  { bg: 'bg-[#6F1AB6]/40', text: 'text-[#FFE5F1]/70' },
-  { bg: 'bg-[#C40B13]/40', text: 'text-[#FFDEDE]/70' },
-  { bg: 'bg-[#332FD0]/40', text: 'text-[#DFF6FF]/70' }
+  { bg: "bg-[#f1c40f]/40", text: "text-[#fcf0c3]/70" },
+  { bg: "bg-[#cb1c8d]/40", text: "text-[#f2c6e3]/70" },
+  { bg: "bg-[#badc58]/40", text: "text-[#eef6d5]/70" },
+  { bg: "bg-[#ff5400]/40", text: "text-[#ffddcc]/70" },
+  { bg: "bg-[#3AB0FF]/40", text: "text-[#f0fffd]/70" },
+  { bg: "bg-[#6F1AB6]/40", text: "text-[#FFE5F1]/70" },
+  { bg: "bg-[#C40B13]/40", text: "text-[#FFDEDE]/70" },
+  { bg: "bg-[#332FD0]/40", text: "text-[#DFF6FF]/70" }
 ];
 
 export const SecretInputRow = memo(
@@ -111,12 +111,12 @@ export const SecretInputRow = memo(
       if (isOverridden) {
         // when user created a new override but then removes
         if (overrideAction === SecretActionType.Created)
-          setValue(`secrets.${index}.valueOverride`, '');
+          setValue(`secrets.${index}.valueOverride`, "");
         setValue(`secrets.${index}.overrideAction`, SecretActionType.Deleted, {
           shouldDirty: true
         });
       } else {
-        setValue(`secrets.${index}.valueOverride`, '');
+        setValue(`secrets.${index}.valueOverride`, "");
         setValue(
           `secrets.${index}.overrideAction`,
           idOverride ? SecretActionType.Modified : SecretActionType.Created,
@@ -147,7 +147,7 @@ export const SecretInputRow = memo(
         secKey?.toUpperCase().includes(searchTerm?.toUpperCase()) ||
         tags
           ?.map((tag) => tag.name)
-          .join(' ')
+          .join(" ")
           ?.toUpperCase()
           .includes(searchTerm?.toUpperCase()) ||
         secComment?.toUpperCase().includes(searchTerm?.toUpperCase())
@@ -168,7 +168,7 @@ export const SecretInputRow = memo(
           render={({ fieldState: { error }, field }) => (
             <HoverCard openDelay={0} open={error?.message ? undefined : false}>
               <HoverCardTrigger asChild>
-                <td className={cx(error?.message ? 'rounded ring ring-red/50' : null)}>
+                <td className={cx(error?.message ? "rounded ring ring-red/50" : null)}>
                   <div className="relative flex w-full min-w-[220px] items-center justify-end lg:min-w-[240px] xl:min-w-[280px]">
                     <Input
                       autoComplete="off"
@@ -246,7 +246,7 @@ export const SecretInputRow = memo(
                     hideCloseBtn
                   >
                     <div className="mb-2 px-2 text-center text-sm font-medium text-bunker-200">
-                      Add tags to {secKey || 'this secret'}
+                      Add tags to {secKey || "this secret"}
                     </div>
                     <div className="flex flex-col space-y-1">
                       {wsTags?.map((wsTag) => (
@@ -254,8 +254,8 @@ export const SecretInputRow = memo(
                           variant="plain"
                           size="sm"
                           className={twMerge(
-                            'justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500',
-                            selectedTagIds?.[wsTag.slug] && 'text-primary'
+                            "justify-start bg-mineshaft-600 text-bunker-100 hover:bg-mineshaft-500",
+                            selectedTagIds?.[wsTag.slug] && "text-primary"
                           )}
                           onClick={() => onSelectTag(wsTag)}
                           leftIcon={
@@ -296,8 +296,8 @@ export const SecretInputRow = memo(
                   <IconButton
                     variant="plain"
                     className={twMerge(
-                      'mt-0.5 w-0 overflow-hidden p-0 group-hover:ml-1 group-hover:w-7',
-                      isOverridden && 'ml-1 w-7 text-primary'
+                      "mt-0.5 w-0 overflow-hidden p-0 group-hover:ml-1 group-hover:w-7",
+                      isOverridden && "ml-1 w-7 text-primary"
                     )}
                     onClick={onSecretOverride}
                     size="md"
@@ -312,14 +312,14 @@ export const SecretInputRow = memo(
               </div>
             )}
             <Tooltip content="Comment">
-              <div className={`mt-0.5 overflow-hidden `}>
+              <div className="mt-0.5 overflow-hidden ">
                 <Popover>
                   <PopoverTrigger asChild>
                     <IconButton
                       className={twMerge(
-                        'w-7 overflow-hidden p-0',
-                        'w-0 group-hover:w-7 data-[state=open]:w-7',
-                        hasComment ? 'w-7 text-primary' : 'group-hover:w-7'
+                        "w-7 overflow-hidden p-0",
+                        "w-0 group-hover:w-7 data-[state=open]:w-7",
+                        hasComment ? "w-7 text-primary" : "group-hover:w-7"
                       )}
                       variant="plain"
                       size="md"
@@ -383,4 +383,4 @@ export const SecretInputRow = memo(
   }
 );
 
-SecretInputRow.displayName = 'SecretInputRow';
+SecretInputRow.displayName = "SecretInputRow";

frontend/src/views/DashboardPage/components/SecretInputRow/index.tsx

@@ -1 +1 @@
-export { SecretInputRow } from './SecretInputRow';
+export { SecretInputRow } from "./SecretInputRow";

frontend/src/views/DashboardPage/components/SecretTableHeader/SecretTableHeader.tsx

@@ -1,10 +1,10 @@
-import { faArrowDown, faArrowUp } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowDown, faArrowUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { IconButton } from '@app/components/v2';
+import { IconButton } from "@app/components/v2";
 
 type Props = {
-  sortDir: 'asc' | 'desc';
+  sortDir: "asc" | "desc";
   onSort: () => void;
 };
 
@@ -19,7 +19,7 @@ export const SecretTableHeader = ({ sortDir, onSort }: Props): JSX.Element => (
           <div className="text-md inline-flex items-end font-medium">
             Key
             <IconButton variant="plain" className="ml-2" ariaLabel="sort" onClick={onSort}>
-              <FontAwesomeIcon icon={sortDir === 'asc' ? faArrowDown : faArrowUp} />
+              <FontAwesomeIcon icon={sortDir === "asc" ? faArrowDown : faArrowUp} />
             </IconButton>
           </div>
           <div className="flex w-max flex-row items-center justify-end">

frontend/src/views/DashboardPage/components/SecretTableHeader/index.tsx

@@ -1 +1 @@
-export { SecretTableHeader } from './SecretTableHeader';
+export { SecretTableHeader } from "./SecretTableHeader";