From 1781b7139927730b8f7d38863380875e2e4e1d3f Mon Sep 17 00:00:00 2001 From: Mohammed Date: Fri, 3 Feb 2023 22:33:39 +0100 Subject: [PATCH 1/3] add new modal to compare secrets across environments --- .../dashboard/CompareSecretsModal.tsx | 75 +++++++++++++++++++ frontend/src/components/dashboard/SideBar.tsx | 60 +++++++++++---- 2 files changed, 119 insertions(+), 16 deletions(-) create mode 100644 frontend/src/components/dashboard/CompareSecretsModal.tsx diff --git a/frontend/src/components/dashboard/CompareSecretsModal.tsx b/frontend/src/components/dashboard/CompareSecretsModal.tsx new file mode 100644 index 000000000..8c41ae8ca --- /dev/null +++ b/frontend/src/components/dashboard/CompareSecretsModal.tsx @@ -0,0 +1,75 @@ +import { SetStateAction, useEffect, useState } from 'react'; + +import { WorkspaceEnv } from '~/pages/dashboard/[id]'; + +import getSecretsForProject from '../utilities/secrets/getSecretsForProject'; +import { Modal, ModalContent } from '../v2'; + +interface Secrets { + label: string; + secret: string; +} + +interface CompareSecretsModalProps { + compareModal: boolean; + setCompareModal: React.Dispatch>; + selectedEnv: WorkspaceEnv; + workspaceEnvs: WorkspaceEnv[]; + workspaceId: string; + currentSecret: { + key: string; + value: string; + }; +} + +const CompareSecretsModal = ({ + compareModal, + setCompareModal, + selectedEnv, + workspaceEnvs, + workspaceId, + currentSecret +}: CompareSecretsModalProps) => { + const [secrets, setSecrets] = useState([]); + + const getEnvSecrets = async () => { + const workspaceEnvironments = workspaceEnvs.filter((env) => env !== selectedEnv); + const newSecrets = await Promise.all( + workspaceEnvironments.map(async (env) => { + const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId }); + const secret = + allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found'; + return { label: env.name, secret }; + }) + ); + setSecrets([{ label: selectedEnv.name, secret: currentSecret.value }, ...newSecrets]); + }; + + useEffect(() => { + if (compareModal) { + (async () => { + await getEnvSecrets(); + })(); + } + }, [compareModal]); + + return ( + + e.preventDefault()}> +
+ {secrets.map((item) => ( +
+

{item.label}

+ +
+ ))} +
+ + + ); +}; +export default CompareSecretsModal; diff --git a/frontend/src/components/dashboard/SideBar.tsx b/frontend/src/components/dashboard/SideBar.tsx index 1a3f99a29..b6c20d8d6 100644 --- a/frontend/src/components/dashboard/SideBar.tsx +++ b/frontend/src/components/dashboard/SideBar.tsx @@ -7,9 +7,12 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import SecretVersionList from '@app/ee/components/SecretVersionList'; +import { WorkspaceEnv } from '~/pages/dashboard/[id]'; + import Button from '../basic/buttons/Button'; import Toggle from '../basic/Toggle'; import CommentField from './CommentField'; +import CompareSecretsModal from './CompareSecretsModal'; import DashboardInputField from './DashboardInputField'; import { DeleteActionButton } from './DeleteActionButton'; import GenerateSecretMenu from './GenerateSecretMenu'; @@ -40,6 +43,9 @@ interface SideBarProps { sharedToHide: string[]; setSharedToHide: (values: string[]) => void; deleteRow: (props: DeleteRowFunctionProps) => void; + workspaceEnvs: WorkspaceEnv[]; + selectedEnv: WorkspaceEnv; + workspaceId: string; } /** @@ -63,11 +69,15 @@ const SideBar = ({ modifyComment, buttonReady, savePush, - deleteRow + deleteRow, + workspaceEnvs, + selectedEnv, + workspaceId }: SideBarProps) => { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [isLoading, setIsLoading] = useState(false); - const [overrideEnabled, setOverrideEnabled] = useState(data[0].valueOverride !== undefined); + const [overrideEnabled, setOverrideEnabled] = useState(data[0]?.valueOverride !== undefined); + const [compareModal, setCompareModal] = useState(false); const { t } = useTranslation(); return ( @@ -171,20 +181,38 @@ const SideBar = ({ /> )} -
-
+
+
); From 16883cf168047826603dbf94d116f776327564c2 Mon Sep 17 00:00:00 2001 From: Mohammed Date: Fri, 3 Feb 2023 22:34:18 +0100 Subject: [PATCH 2/3] make some params optional --- .../utilities/secrets/getSecretsForProject.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/utilities/secrets/getSecretsForProject.ts b/frontend/src/components/utilities/secrets/getSecretsForProject.ts index c00f13d04..62c1e2e2d 100644 --- a/frontend/src/components/utilities/secrets/getSecretsForProject.ts +++ b/frontend/src/components/utilities/secrets/getSecretsForProject.ts @@ -29,8 +29,8 @@ interface SecretProps { interface FunctionProps { env: string; - setIsKeyAvailable: any; - setData: any; + setIsKeyAvailable?: any; + setData?: any; workspaceId: string; } @@ -58,7 +58,9 @@ const getSecretsForProject = async ({ const latestKey = await getLatestFileKey({ workspaceId }); // This is called isKeyAvailable but what it really means is if a person is able to create new key pairs - setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true); + if (typeof setIsKeyAvailable === 'function') { + setIsKeyAvailable(!latestKey ? encryptedSecrets.length === 0 : true); + } const PRIVATE_KEY = localStorage.getItem('PRIVATE_KEY') as string; @@ -131,7 +133,10 @@ const getSecretsForProject = async ({ )[0]?.comment })); - setData(result); + if (typeof setData === 'function') { + setData(result); + } + return result; } catch (error) { console.log('Something went wrong during accessing or decripting secrets.'); From 56710657bd508f5c5fd52c56a7179d48a479dcf0 Mon Sep 17 00:00:00 2001 From: Vladyslav Matsiiako Date: Fri, 3 Feb 2023 23:49:03 -0800 Subject: [PATCH 3/3] Minor styling updates --- .../dashboard/CompareSecretsModal.tsx | 33 +++++++++++++------ frontend/src/components/dashboard/SideBar.tsx | 5 ++- frontend/src/components/v2/Modal/Modal.tsx | 2 +- frontend/src/pages/dashboard/[id].tsx | 4 ++- frontend/src/pages/users/[id].tsx | 1 - 5 files changed, 29 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/dashboard/CompareSecretsModal.tsx b/frontend/src/components/dashboard/CompareSecretsModal.tsx index 8c41ae8ca..b5d81bc04 100644 --- a/frontend/src/components/dashboard/CompareSecretsModal.tsx +++ b/frontend/src/components/dashboard/CompareSecretsModal.tsx @@ -1,6 +1,7 @@ import { SetStateAction, useEffect, useState } from 'react'; +import Image from 'next/image'; -import { WorkspaceEnv } from '~/pages/dashboard/[id]'; +import { WorkspaceEnv } from '@app/hooks/api/types'; import getSecretsForProject from '../utilities/secrets/getSecretsForProject'; import { Modal, ModalContent } from '../v2'; @@ -33,9 +34,10 @@ const CompareSecretsModal = ({ const [secrets, setSecrets] = useState([]); const getEnvSecrets = async () => { - const workspaceEnvironments = workspaceEnvs.filter((env) => env !== selectedEnv); + const workspaceEnvironments = workspaceEnvs?.filter((env) => env !== selectedEnv); const newSecrets = await Promise.all( workspaceEnvironments.map(async (env) => { + // #TODO: optimize this query somehow... const allSecrets = await getSecretsForProject({ env: env.slug, workspaceId }); const secret = allSecrets.find((item) => item.key === currentSecret.key)?.value ?? 'Not found'; @@ -57,16 +59,27 @@ const CompareSecretsModal = ({ e.preventDefault()}>
- {secrets.map((item) => ( -
-

{item.label}

- + infisical loading indicator
- ))} + ) : ( + secrets.map((item) => ( +
+

{item.label}

+ +
+ )) + )}
diff --git a/frontend/src/components/dashboard/SideBar.tsx b/frontend/src/components/dashboard/SideBar.tsx index d04055af0..d602e2c93 100644 --- a/frontend/src/components/dashboard/SideBar.tsx +++ b/frontend/src/components/dashboard/SideBar.tsx @@ -6,8 +6,7 @@ import { faX } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import SecretVersionList from '@app/ee/components/SecretVersionList'; - -import { WorkspaceEnv } from '~/pages/dashboard/[id]'; +import { WorkspaceEnv } from '@app/hooks/api/types'; import Button from '../basic/buttons/Button'; import Toggle from '../basic/Toggle'; @@ -181,7 +180,7 @@ const SideBar = ({ /> )} -
+
) : (
-
loading animation
); diff --git a/frontend/src/pages/users/[id].tsx b/frontend/src/pages/users/[id].tsx index abd1cfc6f..27b531444 100644 --- a/frontend/src/pages/users/[id].tsx +++ b/frontend/src/pages/users/[id].tsx @@ -207,7 +207,6 @@ export default function Users() {
) : (
-
loading animation
);