Moved the delete button to the sidebar

frontend/components/dashboard/DashboardInputField.tsx

@@ -53,7 +53,7 @@ const DashboardInputField = ({
     return (
       <div className="flex-col w-full">
         <div
-          className={`group relative flex flex-col justify-center w-full max-w-2xl border ${
+          className={`group relative flex flex-col justify-center w-full border ${
             error ? 'border-red' : 'border-mineshaft-500'
           } rounded-md`}
         >
@@ -85,7 +85,7 @@ const DashboardInputField = ({
     return (
       <div className="flex-col w-full">
         <div
-          className={`group relative whitespace-pre	flex flex-col justify-center w-full max-w-2xl border border-mineshaft-500 rounded-md`}
+          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
@@ -108,9 +108,9 @@ const DashboardInputField = ({
             } ${
               override ? 'text-primary-300' : 'text-gray-400'
             }
-            absolute flex flex-row whitespace-pre font-mono z-0 ph-no-capture max-w-2xl 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`}
+            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) => {
+            {value?.split(REGEX).map((word, id) => {
               if (word.match(REGEX) !== null) {
                 return (
                   <span className="ph-no-capture text-yellow" key={id}>
@@ -139,7 +139,7 @@ const DashboardInputField = ({
             })}
           </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 max-w-2xl rounded-md text-gray-400/50 text-clip">
+            <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

frontend/components/dashboard/KeyPair.tsx

@@ -15,7 +15,6 @@ interface SecretDataProps {
 
 interface KeyPairProps {
   keyPair: SecretDataProps;
-  deleteRow: (id: string) => void;
   modifyKey: (value: string, position: number) => void; 
   modifyValue: (value: string, position: number) => void; 
   isBlurred: boolean;
@@ -28,7 +27,6 @@ interface KeyPairProps {
  * 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.deleteRow - a function to delete a certain keyPair
  * @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 {boolean} obj.isBlurred - if the blurring setting is turned on
@@ -39,7 +37,6 @@ interface KeyPairProps {
  */
 const KeyPair = ({
   keyPair,
-  deleteRow,
   modifyKey,
   modifyValue,
   isBlurred,
@@ -57,7 +54,7 @@ const KeyPair = ({
         </span>
       </div>}
         <div className="min-w-xl w-96">
-          <div className="flex pr-1 items-center rounded-lg mt-4 md:mt-0 max-h-16">
+          <div className="flex pr-1.5 items-center rounded-lg mt-4 md:mt-0 max-h-16">
             <DashboardInputField
               onChangeHandler={modifyKey}
               type="varName"
@@ -67,8 +64,8 @@ const KeyPair = ({
             />
           </div>
         </div>
-        <div className="w-full min-w-5xl">
-          <div className="flex min-w-7xl items-center pl-1 pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10 ">
+        <div className="w-full min-w-xl">
+          <div className="flex min-w-xl items-center pr-1.5 rounded-lg mt-4 md:mt-0 max-h-10">
             <DashboardInputField
               onChangeHandler={modifyValue}
               type="value"
@@ -79,21 +76,12 @@ const KeyPair = ({
             />
           </div>
         </div>
-        <div onClick={() => toggleSidebar(keyPair.id)} className="cursor-pointer w-9 h-9 bg-mineshaft-700 hover:bg-chicago-700 rounded-md flex flex-row justify-center items-center duration-200">
+        <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 className="w-2"></div>
-        <div className="bg-[#9B3535] hover:bg-red rounded-md duration-200">
-          <Button
-            onButtonPressed={() => deleteRow(keyPair.id)}
-            color="none"
-            size="icon-sm"
-            icon={faX}
-          />
-        </div>
       </div>
     </div>
   );

frontend/components/dashboard/SideBar.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import Image from 'next/image';
 import { useTranslation } from "next-i18next";
 import { faX } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -40,6 +41,7 @@ interface SideBarProps {
   savePush: () => void;
   sharedToHide: string[];
   setSharedToHide: (values: string[]) => void;
+  deleteRow: any;
 }
 
 /**
@@ -54,6 +56,7 @@ interface SideBarProps {
  * @param {function} obj.savePush - save changes andp ush secrets
  * @param {string[]} obj.sharedToHide - an array of shared secrets that we want to hide visually because they are overriden. 
  * @param {function} obj.setSharedToHide - a function that updates the array of secrets that we want to hide visually
+ * @param {function} obj.deleteRow - a function to delete a certain keyPair
  * @returns the sidebar with 'secret's settings'
  */
 const SideBar = ({ 
@@ -67,93 +70,97 @@ const SideBar = ({
   buttonReady, 
   savePush,
   sharedToHide,
-  setSharedToHide 
+  setSharedToHide,
+  deleteRow
 }: SideBarProps) => {
+  const [isLoading, setIsLoading] = useState(false);
   const [overrideEnabled, setOverrideEnabled] = useState(data.map(secret => secret.type).includes("personal"));
   const { t } = useTranslation();
 
   return <div className='absolute border-l border-mineshaft-500 bg-bunker fixed h-full w-96 top-14 right-0 z-50 shadow-xl flex flex-col justify-between'>
-    <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'/>
+    {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>
-      <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.filter(secret => secret.type == "shared")[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.filter(secret => secret.type == "shared")[0]?.pos}
-          value={data.filter(secret => secret.type == "shared")[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.filter(secret => secret.type == "shared")[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.filter(secret => secret.type == "shared")[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={addOverride} 
-            keyName={data[0]?.key}
-            value={data[0]?.value}
-            pos={data[0]?.pos}
-            id={data[0]?.id}
-            comment={data[0]?.comment}
-            deleteOverride={deleteOverride}
-            sharedToHide={sharedToHide}
-            setSharedToHide={setSharedToHide}
+        <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>}
-        <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
+        </div>
+        {data.filter(secret => secret.type == "shared")[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={overrideEnabled ? data.filter(secret => secret.type == "personal")[0]?.pos : data[0]?.pos}
-            value={overrideEnabled ? data.filter(secret => secret.type == "personal")[0]?.value : data[0]?.value}
+            position={data.filter(secret => secret.type == "shared")[0]?.pos}
+            value={data.filter(secret => secret.type == "shared")[0]?.value}
             isDuplicate={false}
-            blurred={true}
+            blurred={true}     
           />
-          <div className='absolute right-[0.57rem] top-[0.3rem] z-50'>
-            <GenerateSecretMenu modifyValue={modifyValue} position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0]?.pos : data[0]?.pos} />
+          <div className='absolute bg-bunker-800 right-[1.07rem] top-[1.6rem] z-50'>
+            <GenerateSecretMenu modifyValue={modifyValue} position={data.filter(secret => secret.type == "shared")[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.filter(secret => secret.type == "shared")[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={addOverride} 
+              keyName={data[0]?.key}
+              value={data[0]?.value}
+              pos={data[0]?.pos}
+              id={data[0]?.id}
+              comment={data[0]?.comment}
+              deleteOverride={deleteOverride}
+              sharedToHide={sharedToHide}
+              setSharedToHide={setSharedToHide}
+            />
+          </div>}
+          <div className={`relative ${!overrideEnabled && "opacity-40 pointer-events-none"} duration-200`}>
+            <DashboardInputField
+              onChangeHandler={modifyValue}
+              type="value"
+              position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0]?.pos : data[0]?.pos}
+              value={overrideEnabled ? data.filter(secret => secret.type == "personal")[0]?.value : data[0]?.value}
+              isDuplicate={false}
+              blurred={true}
+            />
+            <div className='absolute right-[0.57rem] top-[0.3rem] z-50'>
+              <GenerateSecretMenu modifyValue={modifyValue} position={overrideEnabled ? data.filter(secret => secret.type == "personal")[0]?.pos : data[0]?.pos} />
+            </div>
+          </div>
+        </div>
+        <SecretVersionList secretId={data[0]?.id} />
+        <CommentField comment={data.filter(secret => secret.type == "shared")[0]?.comment} modifyComment={modifyComment} position={data[0]?.pos} />
       </div>
-      {/* <div className={`relative mt-4 px-4 opacity-80 duration-200`}>
-        <p className='text-sm text-bunker-200'>Group</p>
-        <ListBox
-          selected={"Database Secrets"}
-          onChange={() => {}}
-          data={["Group1"]}
-          isFull={true}
-        />
-      </div> */}
-      <SecretVersionList secretId={data[0]?.id} />
-      <CommentField comment={data.filter(secret => secret.type == "shared")[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"))}
@@ -163,6 +170,14 @@ const SideBar = ({
         active={buttonReady}
         textDisabled="Saved"
       />
+      <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={() => deleteRow({ ids: overrideEnabled ? data.map(secret => secret.id) : [data.filter(secret => secret.type == "shared")[0]?.id], secretName: data[0]?.key })}
+          color="red"
+          size="md"
+        />
+      </div>
     </div>
   </div>
 };

frontend/pages/dashboard/[id].tsx

@@ -241,9 +241,14 @@ export default function Dashboard() {
     sortValuesHandler(tempdata, sortMethod == "alhpabetical" ? "-alphabetical" : "alphabetical");
   };
 
-  const deleteRow = (id: string) => {
+  const deleteRow = ({ ids, secretName }: { ids: string[]; secretName: string; }) => {
     setButtonReady(true);
-    setData(data!.filter((row: SecretDataProps) => row.id !== id));
+    toggleSidebar("None");
+    createNotification({
+      text: `${secretName} has been deleted. Remember to save changes.`,
+      type: 'error'
+    });
+    setData(data!.filter((row: SecretDataProps) => !ids.includes(row.id)));
   };
 
   /**
@@ -395,8 +400,8 @@ export default function Dashboard() {
     alink.click();
   };
 
-  const deleteCertainRow = (id: string) => {
-    deleteRow(id);
+  const deleteCertainRow = ({ ids, secretName }: { ids: string[]; secretName: string; }) => {
+    deleteRow({ids, secretName});
   };
 
   /**
@@ -438,6 +443,7 @@ export default function Dashboard() {
           savePush={savePush}
           sharedToHide={sharedToHide}
           setSharedToHide={setSharedToHide}
+          deleteRow={deleteCertainRow}
         />}
         <div className="w-full max-h-96 pb-2">
           <NavHeader pageName={t("dashboard:title")} isProjectRelated={true} />
@@ -585,7 +591,6 @@ export default function Dashboard() {
                       <KeyPair 
                         key={keyPair.id}
                         keyPair={keyPair}
-                        deleteRow={deleteCertainRow}
                         modifyValue={listenChangeValue}
                         modifyKey={listenChangeKey}
                         isBlurred={blurred}