From fe0c46652355c5ce3b8ff5cabefe310f9f104e4d Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Mon, 2 Jan 2023 20:17:16 -0800 Subject: [PATCH] Moved the delete button to the sidebar --- .../dashboard/DashboardInputField.tsx | 10 +- frontend/components/dashboard/KeyPair.tsx | 20 +-- frontend/components/dashboard/SideBar.tsx | 159 ++++++++++-------- frontend/pages/dashboard/[id].tsx | 15 +- 4 files changed, 106 insertions(+), 98 deletions(-) diff --git a/frontend/components/dashboard/DashboardInputField.tsx b/frontend/components/dashboard/DashboardInputField.tsx index 29761bf07d..a667c39d0f 100644 --- a/frontend/components/dashboard/DashboardInputField.tsx +++ b/frontend/components/dashboard/DashboardInputField.tsx @@ -53,7 +53,7 @@ const DashboardInputField = ({ return (
@@ -85,7 +85,7 @@ const DashboardInputField = ({ return (
{override == true &&
Override enabled
} - {value.split(REGEX).map((word, id) => { + {value?.split(REGEX).map((word, id) => { if (word.match(REGEX) !== null) { return ( @@ -139,7 +139,7 @@ const DashboardInputField = ({ })}
{blurred && ( -
+
{value.split('').map(() => ( 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 = ({
}
-
+
-
-
+
+
-
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"> +
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">
-
-
-
); diff --git a/frontend/components/dashboard/SideBar.tsx b/frontend/components/dashboard/SideBar.tsx index 0a9fca6a1c..41ac9c1440 100644 --- a/frontend/components/dashboard/SideBar.tsx +++ b/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
-
-
-

{t("dashboard:sidebar.secret")}

-
toggleSidebar("None")}> - -
-
-
-

{t("dashboard:sidebar.key")}

- -
- {data.filter(secret => secret.type == "shared")[0]?.value - ?
-

{t("dashboard:sidebar.value")}

- secret.type == "shared")[0]?.pos} - value={data.filter(secret => secret.type == "shared")[0]?.value} - isDuplicate={false} - blurred={true} - /> -
- secret.type == "shared")[0]?.pos} /> + {isLoading ? ( +
+ infisical loading indicator +
+ ) : ( +
+
+

{t("dashboard:sidebar.secret")}

+
toggleSidebar("None")}> + +
-
- :
- {t("common:note")}: - {t("dashboard:sidebar.personal-explanation")} -
} -
- {data.filter(secret => secret.type == "shared")[0]?.value && -
-

{t("dashboard:sidebar.override")}

- +

{t("dashboard:sidebar.key")}

+ -
} -
+
+ {data.filter(secret => secret.type == "shared")[0]?.value + ?
+

{t("dashboard:sidebar.value")}

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} /> -
- secret.type == "personal")[0]?.pos : data[0]?.pos} /> +
+ secret.type == "shared")[0]?.pos} /> +
+
+ :
+ {t("common:note")}: + {t("dashboard:sidebar.personal-explanation")} +
} +
+ {data.filter(secret => secret.type == "shared")[0]?.value && +
+

{t("dashboard:sidebar.override")}

+ +
} +
+ 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} + /> +
+ secret.type == "personal")[0]?.pos : data[0]?.pos} /> +
+ + secret.type == "shared")[0]?.comment} modifyComment={modifyComment} position={data[0]?.pos} />
- {/*
-

Group

- {}} - data={["Group1"]} - isFull={true} - /> -
*/} - - secret.type == "shared")[0]?.comment} modifyComment={modifyComment} position={data[0]?.pos} /> -
+ )}
}; diff --git a/frontend/pages/dashboard/[id].tsx b/frontend/pages/dashboard/[id].tsx index 60fcc7a007..d61ff4afb0 100644 --- a/frontend/pages/dashboard/[id].tsx +++ b/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} />}
@@ -585,7 +591,6 @@ export default function Dashboard() {