From afba6368508e48f37341317fc107bf3d78623acd Mon Sep 17 00:00:00 2001 From: lemmyMwaura Date: Thu, 1 Aug 2024 14:22:22 +0300 Subject: [PATCH 1/4] feat: parse full env secrets (key,value) when pasted from clipboard --- .../CreateSecretForm/CreateSecretForm.tsx | 17 +++++++++++++++++ .../CreateSecretForm/CreateSecretForm.tsx | 18 ++++++++++++++++++ 2 files changed, 35 insertions(+) diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx index c1ce05b4c..fc625ed67 100644 --- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -1,3 +1,4 @@ +import { ClipboardEvent } from 'react'; import { Controller, useForm } from "react-hook-form"; import { zodResolver } from "@hookform/resolvers/zod"; import { z } from "zod"; @@ -38,6 +39,7 @@ export const CreateSecretForm = ({ handleSubmit, control, reset, + setValue, formState: { errors, isSubmitting } } = useForm({ resolver: zodResolver(typeSchema) }); const { isOpen } = usePopUpState(PopUpNames.CreateSecretForm); @@ -73,6 +75,20 @@ export const CreateSecretForm = ({ } }; + const handlePaste = (e: ClipboardEvent) => { + e.preventDefault(); + const pastedContent = e.clipboardData.getData('text'); + const splitIndex = pastedContent.indexOf("="); + + if (splitIndex == -1) return + + const key = pastedContent.slice(0, splitIndex) + const value = pastedContent.slice(splitIndex + 1); + + setValue('key', key); + setValue('value', value); + } + return ( diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx index b13293602..cfb2baecd 100644 --- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -1,3 +1,4 @@ +import { ClipboardEvent } from 'react'; import { Controller, useForm } from "react-hook-form"; import { faWarning } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; @@ -54,6 +55,7 @@ export const CreateSecretForm = ({ control, reset, watch, + setValue, formState: { isSubmitting, errors } } = useForm({ resolver: zodResolver(typeSchema) }); const newSecretKey = watch("key"); @@ -133,6 +135,21 @@ export const CreateSecretForm = ({ }); } }; + + const handlePaste = (e: ClipboardEvent) => { + e.preventDefault(); + const pastedContent = e.clipboardData.getData('text'); + const splitIndex = pastedContent.indexOf("="); + + if (splitIndex == -1) return + + const key = pastedContent.slice(0, splitIndex) + const value = pastedContent.slice(splitIndex + 1); + + setValue('key', key); + setValue('value', value); + } + return ( From 7467a05fc4fd9581c3083e3955e37b253ef7b937 Mon Sep 17 00:00:00 2001 From: lemmyMwaura Date: Thu, 1 Aug 2024 14:42:15 +0300 Subject: [PATCH 2/4] fix(lint): fix triple equal strict check --- .../components/CreateSecretForm/CreateSecretForm.tsx | 2 +- .../components/CreateSecretForm/CreateSecretForm.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx index fc625ed67..d040bb859 100644 --- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -80,7 +80,7 @@ export const CreateSecretForm = ({ const pastedContent = e.clipboardData.getData('text'); const splitIndex = pastedContent.indexOf("="); - if (splitIndex == -1) return + if (splitIndex === -1) return const key = pastedContent.slice(0, splitIndex) const value = pastedContent.slice(splitIndex + 1); diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx index cfb2baecd..8c760bb6a 100644 --- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -141,7 +141,7 @@ export const CreateSecretForm = ({ const pastedContent = e.clipboardData.getData('text'); const splitIndex = pastedContent.indexOf("="); - if (splitIndex == -1) return + if (splitIndex === -1) return const key = pastedContent.slice(0, splitIndex) const value = pastedContent.slice(splitIndex + 1); From 43fded2350dfdc9b1bf833ea92891d39c4cc9759 Mon Sep 17 00:00:00 2001 From: lemmyMwaura Date: Fri, 2 Aug 2024 20:41:47 +0300 Subject: [PATCH 3/4] refactor: take into account other delimiters --- frontend/src/helpers/parseEnvVar.ts | 26 +++++++++++++++++++ .../CreateSecretForm/CreateSecretForm.tsx | 15 +++++------ .../CreateSecretForm/CreateSecretForm.tsx | 15 +++++------ 3 files changed, 38 insertions(+), 18 deletions(-) create mode 100644 frontend/src/helpers/parseEnvVar.ts diff --git a/frontend/src/helpers/parseEnvVar.ts b/frontend/src/helpers/parseEnvVar.ts new file mode 100644 index 000000000..20e09a16f --- /dev/null +++ b/frontend/src/helpers/parseEnvVar.ts @@ -0,0 +1,26 @@ +/** Extracts the key and value from a passed in env string based on the provided delimiters. */ +export const getKeyValue = (pastedContent: string, delimiters: string[]) => { + let splitIndex = -1 + let key = "" + let value = "" + + for (const delimiter of delimiters) { + const idx = pastedContent.indexOf(delimiter) + + if (idx !== -1) { + splitIndex = idx + break; + } + } + + // if only key is pasted + if (splitIndex === -1) { + key = pastedContent.trim() + return { key, value: "" } + } + + key = pastedContent.slice(0, splitIndex).trim() + value = pastedContent.slice(splitIndex + 1).trim() + + return { key, value } +}; diff --git a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx index d040bb859..17fad2b72 100644 --- a/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretMainPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -8,6 +8,7 @@ import { Button, FormControl, Input, Modal, ModalContent } from "@app/components import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { useCreateSecretV3 } from "@app/hooks/api"; import { SecretType } from "@app/hooks/api/types"; +import { getKeyValue } from '@app/helpers/parseEnvVar'; import { PopUpNames, usePopUpAction, usePopUpState } from "../../SecretMainPage.store"; @@ -77,16 +78,12 @@ export const CreateSecretForm = ({ const handlePaste = (e: ClipboardEvent) => { e.preventDefault(); - const pastedContent = e.clipboardData.getData('text'); - const splitIndex = pastedContent.indexOf("="); + const delimitters = [":", "="]; + const pastedContent = e.clipboardData.getData("text"); + const { key, value } = getKeyValue(pastedContent, delimitters); - if (splitIndex === -1) return - - const key = pastedContent.slice(0, splitIndex) - const value = pastedContent.slice(splitIndex + 1); - - setValue('key', key); - setValue('value', value); + setValue("key", key); + setValue("value", value); } return ( diff --git a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx index 8c760bb6a..a38b3db91 100644 --- a/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx +++ b/frontend/src/views/SecretOverviewPage/components/CreateSecretForm/CreateSecretForm.tsx @@ -20,6 +20,7 @@ import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput"; import { useWorkspace } from "@app/context"; import { useCreateFolder, useCreateSecretV3, useUpdateSecretV3 } from "@app/hooks/api"; import { SecretType,SecretV3RawSanitized } from "@app/hooks/api/types"; +import { getKeyValue } from '@app/helpers/parseEnvVar'; const typeSchema = z .object({ @@ -138,16 +139,12 @@ export const CreateSecretForm = ({ const handlePaste = (e: ClipboardEvent) => { e.preventDefault(); - const pastedContent = e.clipboardData.getData('text'); - const splitIndex = pastedContent.indexOf("="); + const delimitters = [":", "="]; + const pastedContent = e.clipboardData.getData("text"); + const { key, value } = getKeyValue(pastedContent, delimitters); - if (splitIndex === -1) return - - const key = pastedContent.slice(0, splitIndex) - const value = pastedContent.slice(splitIndex + 1); - - setValue('key', key); - setValue('value', value); + setValue("key", key); + setValue("value", value); } return ( From 1aee50a7518af57aaac354b634e64cbdbdc4be46 Mon Sep 17 00:00:00 2001 From: Daniel Hougaard Date: Sat, 3 Aug 2024 03:29:45 +0200 Subject: [PATCH 4/4] Fix: Parser improvements and lint fixes --- frontend/src/helpers/parseEnvVar.ts | 28 ++++++++-------------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/frontend/src/helpers/parseEnvVar.ts b/frontend/src/helpers/parseEnvVar.ts index 20e09a16f..27640b515 100644 --- a/frontend/src/helpers/parseEnvVar.ts +++ b/frontend/src/helpers/parseEnvVar.ts @@ -1,26 +1,14 @@ /** Extracts the key and value from a passed in env string based on the provided delimiters. */ export const getKeyValue = (pastedContent: string, delimiters: string[]) => { - let splitIndex = -1 - let key = "" - let value = "" + const foundDelimiter = delimiters.find((delimiter) => pastedContent.includes(delimiter)); - for (const delimiter of delimiters) { - const idx = pastedContent.indexOf(delimiter) - - if (idx !== -1) { - splitIndex = idx - break; - } + if (!foundDelimiter) { + return { key: pastedContent.trim(), value: "" }; } - // if only key is pasted - if (splitIndex === -1) { - key = pastedContent.trim() - return { key, value: "" } - } - - key = pastedContent.slice(0, splitIndex).trim() - value = pastedContent.slice(splitIndex + 1).trim() - - return { key, value } + const [key, value] = pastedContent.split(foundDelimiter); + return { + key: key.trim(), + value: (value ?? "").trim() + }; };