chore(frontend): changed source code to src folder from root

frontend/src/components/dashboard/CommentField.tsx

@@ -0,0 +1,20 @@
+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 { 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>
+}
+
+export default CommentField;

frontend/src/components/dashboard/DashboardInputField.tsx

@@ -0,0 +1,166 @@
+import { memo, SyntheticEvent, useRef } from 'react';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import guidGenerator from '../utilities/randomId';
+
+const REGEX = /([$]{.*?})/g;
+
+interface DashboardInputFieldProps {
+  position: number;
+  onChangeHandler: (value: string, position: number) => void;
+  value: string | undefined;
+  type: 'varName' | 'value';
+  blurred?: boolean;
+  isDuplicate?: boolean;
+  override?: boolean;
+}
+
+/**
+ * This component renders the input fields on the dashboard
+ * @param {object} obj - the order number of a keyPair
+ * @param {number} obj.position - the order number of a keyPair
+ * @param {function} obj.onChangeHandler - what happens when the input is modified
+ * @param {string} obj.type - whether the input field is for a Key Name or for a Key Value
+ * @param {string} obj.value - value of the InputField
+ * @param {boolean} obj.blurred - whether the input field should be blurred (behind the gray dots) or not; this can be turned on/off in the dashboard
+ * @param {boolean} obj.isDuplicate - if the key name is duplicated
+ * @param {boolean} obj.override - whether a secret/row should be displalyed as overriden
+ * @returns
+ */
+
+const DashboardInputField = ({
+  position,
+  onChangeHandler,
+  type,
+  value,
+  blurred,
+  isDuplicate,
+  override
+}: DashboardInputFieldProps) => {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const syncScroll = (e: SyntheticEvent<HTMLDivElement>) => {
+    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 error = startsWithNumber || isDuplicate;
+
+    return (
+      <div className="flex-col w-full">
+        <div
+          className={`group relative flex flex-col justify-center w-full border ${
+            error ? 'border-red' : 'border-mineshaft-500'
+          } rounded-md`}
+        >
+          <input
+            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 ${
+              error ? 'focus:ring-red/50' : 'focus:ring-primary/50'
+            } duration-200`}
+            spellCheck="false"
+          />
+        </div>
+        {startsWithNumber && (
+          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
+            Should not start with a number
+          </p>
+        )}
+        {isDuplicate && !startsWithNumber && (
+          <p className="text-red text-xs mt-0.5 mx-1 mb-2 max-w-xs">
+            Secret names should be unique
+          </p>
+        )}
+      </div>
+    );
+  } else 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>}
+          <input
+            value={value}
+            onChange={(e) => onChangeHandler(e.target.value, position)}
+            onScroll={syncScroll}
+            className={`${
+              blurred
+                ? 'text-transparent group-hover:text-transparent focus:text-transparent active:text-transparent'
+                : ''
+            } z-10 peer font-mono ph-no-capture bg-transparent rounded-md caret-white text-transparent text-md px-2 py-1.5 w-full min-w-16 outline-none focus:ring-2 focus:ring-primary/50 duration-200 no-scrollbar no-scrollbar::-webkit-scrollbar`}
+            spellCheck="false"
+          />
+          <div
+            ref={ref}
+            className={`${
+              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'
+            }
+            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}>
+                    {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) == '}' ? (
+                      <span className="ph-no-capture text-yellow">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    ) : (
+                      <span className="ph-no-capture text-yellow-400">
+                        {word.slice(word.length - 1, word.length)}
+                      </span>
+                    )}
+                  </span>
+                );
+              } else {
+                return (
+                  <span key={id} className="ph-no-capture">
+                    {word}
+                  </span>
+                );
+              }
+            })}
+          </div>
+          {blurred && (
+            <div className="absolute flex flex-row items-center z-20 peer pr-2 bg-bunker-800 group-hover:hidden peer-hover:hidden peer-focus:hidden peer-active:invisible h-9 w-full rounded-md text-gray-400/50 text-clip">
+              <div className="px-2 flex flex-row items-center overflow-x-scroll no-scrollbar no-scrollbar::-webkit-scrollbar">
+                {value?.split('').map(() => (
+                  <FontAwesomeIcon
+                    key={guidGenerator()}
+                    className="text-xxs mx-0.5"
+                    icon={faCircle}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return <>Something Wrong</>;
+};
+
+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;
+}
+
+export default memo(DashboardInputField, inputPropsAreEqual);

frontend/src/components/dashboard/DeleteActionButton.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next';
+
+import Button from '../basic/buttons/Button';
+import { DeleteEnvVar } from '../basic/dialog/DeleteEnvVar';
+
+type Props = {
+  onSubmit: () => void
+}
+
+export function DeleteActionButton({ onSubmit }: Props) {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false)
+
+  return (
+    <div className="bg-[#9B3535] opacity-70 hover:opacity-100 w-[4.5rem] h-[2.5rem] rounded-md duration-200 ml-2">
+      <Button
+        text={String(t("Delete"))}
+        // onButtonPressed={onSubmit}
+        color="red"
+        size="md"
+        onButtonPressed={() => setOpen(true)}
+      />
+      <DeleteEnvVar 
+        isOpen={open}
+        onClose={() => {
+          setOpen(false)
+        }}
+        onSubmit={onSubmit}
+      />
+    </div>
+  )
+}

frontend/src/components/dashboard/DownloadSecretsMenu.tsx

@@ -0,0 +1,66 @@
+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';
+
+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)
+ * @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>
+}
+
+export default DownloadSecretMenu;

frontend/src/components/dashboard/DropZone.tsx

@@ -0,0 +1,237 @@
+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 { parseDotEnv } from '../utilities/parseDotEnv';
+import guidGenerator from "../utilities/randomId";
+
+interface DropZoneProps {
+  // TODO: change Data type from any
+  setData: (data: any) => void;
+  setErrorDragAndDrop: (hasError: boolean) => void;
+  createNewFile: () => void;
+  errorDragAndDrop: boolean;
+  setButtonReady: (isReady: boolean) => void;
+  keysExist: boolean;
+  numCurrentRows: number;
+}
+
+const DropZone = ({
+  setData,
+  setErrorDragAndDrop,
+  createNewFile,
+  errorDragAndDrop,
+  setButtonReady,
+  keysExist,
+  numCurrentRows,
+}: DropZoneProps) => {
+  const { t } = useTranslation();
+
+  const handleDragEnter = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDragLeave = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // set dropEffect to copy i.e copy of the source item
+    e.dataTransfer.dropEffect = "copy";
+  };
+
+  const [loading, setLoading] = useState(false);
+
+  const getSecrets = (file: ArrayBuffer, fileType: string) => {
+    let secrets;
+    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',
+          };
+        });
+        break;
+      }
+      case 'yml': {
+        const parsedFile = parseDocument(file.toString());
+        const keyPairs = parsedFile.contents!.toJSON();
+
+        secrets = Object.keys(keyPairs).map((key, index) => {
+          const fileContent = parsedFile.contents as YAMLMap<Scalar, Scalar>;
+          const comment =
+            fileContent!.items
+              .find((item) => item.key.value === key)
+              ?.key?.commentBefore?.split('\n')
+              .map((comment) => comment.trim())
+              .join('\n') ?? '';
+          return {
+            id: guidGenerator(),
+            pos: numCurrentRows + index,
+            key: key,
+            value: keyPairs[key as keyof typeof keyPairs]?.toString() ?? '',
+            comment,
+            type: 'shared',
+          };
+        });
+        break;
+      }
+      default:
+        secrets = '';
+        break;
+    }
+    return secrets;
+  };
+
+  // This function function immediately parses the file after it is dropped
+  const handleDrop = async (e: DragEvent) => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 5000);
+    e.preventDefault();
+    e.stopPropagation();
+    e.dataTransfer.dropEffect = "copy";
+
+    const file = e.dataTransfer.files[0];
+    const reader = new FileReader();
+    const fileType = file.name.split('.')[1];
+
+    reader.onload = (event) => {
+      if (event.target === null || event.target.result === null) return;
+      // parse function's argument looks like to be ArrayBuffer
+      const newData = getSecrets(event.target.result as ArrayBuffer, fileType);
+      setData(newData);
+      setButtonReady(true);
+    };
+
+    // If something is wrong show an error
+    try {
+      reader.readAsText(file);
+      setLoading(false);
+    } catch (error) {
+      setErrorDragAndDrop(true);
+      setLoading(false);
+    }
+  };
+
+  // This function is used when the user manually selects a file from the in-browser dircetory (not drag and drop)
+  const handleFileSelect = (e: ChangeEvent<HTMLInputElement>) => {
+    setLoading(true);
+    setTimeout(() => setLoading(false), 5000);
+    if (e.currentTarget.files === null) return;
+    const file = e.currentTarget.files[0];
+    const fileType = file.name.split('.')[1];
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      if (event.target === null || event.target.result === null) return;
+      const { result } = event.target;
+      const newData = getSecrets(result as ArrayBuffer, fileType);
+      setData(newData);
+      setButtonReady(true);
+    };
+    reader.readAsText(file);
+  };
+
+  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>
+    </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"
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <input
+        id="fileSelect"
+        type="file"
+        className="opacity-0 absolute w-full h-full"
+        accept=".txt,.env,.yml"
+        onChange={handleFileSelect}
+      />
+      {errorDragAndDrop ? (
+        <div className="my-3 max-w-xl opacity-80"></div>
+      ) : (
+        <div className=""></div>
+      )}
+      <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>
+      </div>
+      {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"
+      onDragEnter={handleDragEnter}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      <FontAwesomeIcon icon={faUpload} className="text-7xl mb-8" />
+      <p className="">{t("common:drop-zone")}</p>
+      <input
+        id="fileSelect"
+        type="file"
+        className="opacity-0 absolute w-full h-full"
+        accept=".txt,.env,.yml"
+        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>
+        <p className="text-gray-400 text-xs mx-4">OR</p>
+        <div className="border-t border-gray-700 w-1/5"></div>
+      </div>
+      <div className="z-10 mb-6">
+        <Button
+          color="mineshaft"
+          text={String(t("dashboard:add-secret"))}
+          onButtonPressed={createNewFile}
+          size="md"
+        />
+      </div>
+      {errorDragAndDrop ? (
+        <div className="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 className="py-3">
+          {/* <p className="text-xs text-gray-500"> If you are expecting to see a file here, contact your administrator for permission. </p> */}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DropZone;

frontend/src/components/dashboard/GenerateSecretMenu.tsx

@@ -0,0 +1,95 @@
+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 [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>
+          </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 ">
+          <div
+            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))
+            }
+            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>
+        </div>
+      </Menu.Items>
+    </Transition>
+  </Menu>
+}
+
+export default GenerateSecretMenu;

frontend/src/components/dashboard/KeyPair.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SecretDataProps } from 'public/data/frequentInterfaces';
+
+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; 
+  isBlurred: boolean;
+  isDuplicate: boolean;
+  toggleSidebar: (id: string) => void;
+  sidebarSecretId: string;
+  isSnapshot: boolean;
+}
+
+/**
+ * This component represent a single row for an environemnt variable on the dashboard
+ * @param {object} obj
+ * @param {String[]} obj.keyPair - data related to the environment variable (id, pos, key, value, public/private)
+ * @param {function} obj.modifyKey - modify the key of a certain environment variable
+ * @param {function} obj.modifyValue - modify the value of a certain environment variable
+ * @param {function} obj.modifyValueOverride - modify the value of a certain environment variable if it is overriden
+ * @param {boolean} obj.isBlurred - if the blurring setting is turned on
+ * @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 
+ * @returns
+ */
+const KeyPair = ({
+  keyPair,
+  modifyKey,
+  modifyValue,
+  modifyValueOverride,
+  isBlurred,
+  isDuplicate,
+  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>
+        </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>}
+      </div>
+    </div>
+  );
+};
+
+export default KeyPair;

frontend/src/components/dashboard/SideBar.tsx

@@ -0,0 +1,168 @@
+import { useState } from 'react';
+import Image from 'next/image';
+import { useTranslation } from "next-i18next";
+import SecretVersionList from '@app/ee/components/SecretVersionList';
+import { faX } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import Button from '../basic/buttons/Button';
+import Toggle from '../basic/Toggle';
+import CommentField from './CommentField';
+import DashboardInputField from './DashboardInputField';
+import { DeleteActionButton } from './DeleteActionButton';
+import GenerateSecretMenu from './GenerateSecretMenu';
+
+
+interface SecretProps {
+  key: string;
+  value: string;
+  valueOverride: string | undefined;
+  pos: number;
+  id: string;
+  comment: string;
+}
+
+interface OverrideProps {
+  id: string;
+  valueOverride: string;
+}
+export interface DeleteRowFunctionProps { 
+  ids: string[]; 
+  secretName: string; 
+}
+
+interface SideBarProps {
+  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; 
+  buttonReady: boolean;
+  savePush: () => void;
+  sharedToHide: string[];
+  setSharedToHide: (values: string[]) => void;
+  deleteRow: (props: DeleteRowFunctionProps) => void;
+}
+
+/**
+ * @param {object} obj
+ * @param {function} obj.toggleSidebar - function that opens or closes the sidebar
+ * @param {SecretProps[]} obj.data - data of a certain key valeu pair
+ * @param {function} obj.modifyKey - function that modifies the secret key
+ * @param {function} obj.modifyValue - function that modifies the secret value
+ * @param {function} obj.modifyValueOverride - function that modifies the secret value if it is an override
+ * @param {boolean} obj.buttonReady - is the button for saving chagnes active
+ * @param {function} obj.savePush - save changes andp ush secrets
+ * @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, 
+  modifyComment,
+  buttonReady, 
+  savePush,
+  deleteRow
+}: SideBarProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+  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> 
+      ) : (
+      <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>
+          </div>
+        </div>
+        <SecretVersionList secretId={data[0]?.id} />
+        <CommentField comment={data[0]?.comment} modifyComment={modifyComment} position={data[0]?.pos} />
+      </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;