From 358ca3decda3fe45da29a8b4ceff9df30906073b Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Mon, 22 Apr 2024 23:26:44 +0800 Subject: [PATCH] adjustment: reverted changes made to SecretInput --- .../components/v2/SecretInput/SecretInput.tsx | 290 ++---------------- 1 file changed, 32 insertions(+), 258 deletions(-) diff --git a/frontend/src/components/v2/SecretInput/SecretInput.tsx b/frontend/src/components/v2/SecretInput/SecretInput.tsx index bfb858892..2dfafca74 100644 --- a/frontend/src/components/v2/SecretInput/SecretInput.tsx +++ b/frontend/src/components/v2/SecretInput/SecretInput.tsx @@ -1,15 +1,10 @@ /* eslint-disable react/no-danger */ -import React, { forwardRef, TextareaHTMLAttributes, useRef, useState } from "react"; +import { forwardRef, TextareaHTMLAttributes } from "react"; import { twMerge } from "tailwind-merge"; -import { - REGEX_SECRET_REFERENCE_FIND, - REGEX_SECRET_REFERENCE_INVALID -} from "@app/helpers/secret-reference"; import { useToggle } from "@app/hooks"; -import SecretReferenceSelect from "./SecretReferenceSelect"; - +const REGEX = /(\${([^}]+)})/g; const replaceContentWithDot = (str: string) => { let finalStr = ""; for (let i = 0; i < str.length; i += 1) { @@ -25,22 +20,13 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => { if (!isVisible) return replaceContentWithDot(content); let skipNext = false; - const formattedContent = content.split(REGEX_SECRET_REFERENCE_FIND).flatMap((el, i) => { + const formatedContent = content.split(REGEX).flatMap((el, i) => { const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}"); if (isInterpolationSyntax) { skipNext = true; return ( - ${ - - {el.slice(2, -1)} - + ${{el.slice(2, -1)} } ); @@ -54,7 +40,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => { // akhilmhdh: Dont remove this br. I am still clueless how this works but weirdly enough // when break is added a line break works properly - return formattedContent.concat(
); + return formatedContent.concat(
); }; type Props = TextareaHTMLAttributes & { @@ -63,259 +49,47 @@ type Props = TextareaHTMLAttributes & { isReadOnly?: boolean; isDisabled?: boolean; containerClassName?: string; - environment?: string; - secretPath?: string; }; const commonClassName = "font-mono text-sm caret-white border-none outline-none w-full break-all"; export const SecretInput = forwardRef( ( - { - value: propValue, - isVisible, - containerClassName, - onBlur, - isDisabled, - isReadOnly, - onFocus, - secretPath: propSecretPath, - environment: propEnvironment, - onChange, - ...props - }, + { value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props }, ref ) => { - const childRef = useRef(null); - const [isSecretFocused, setIsSecretFocused] = useToggle(); - const [value, setValue] = useState(propValue || ""); - const [showReferencePopup, setShowReferencePopup] = useState(false); - const [referenceKey, setReferenceKey] = useState(); - const [lastCaretPos, setLastCaretPos] = useState(0); - - function isCaretInsideReference(str: string, start: number) { - const matches = [...str.matchAll(REGEX_SECRET_REFERENCE_FIND)]; - for (let i = 0; i < matches.length; i += 1) { - const match = matches[i]; - if ( - typeof match?.index !== "undefined" && - match.index <= start && - start < match.index + match[0].length - ) { - return match; - } - } - return null; - } - - function setCaretPos(caretPos: number) { - if (childRef?.current) { - childRef.current.focus(); - setTimeout(() => { - if (!childRef?.current) return; - childRef.current.selectionStart = caretPos; - childRef.current.selectionEnd = caretPos; - }, 200); - } - } - - function referencePopup(text: string, pos: number) { - const match = isCaretInsideReference(text, pos); - if (match && typeof match.index !== "undefined") { - setLastCaretPos(pos); - setReferenceKey(match?.[2]); - } - setShowReferencePopup(!!match); - } - - function handleReferencePopup(element: HTMLTextAreaElement) { - const { selectionStart, selectionEnd, value: text } = element; - if (selectionStart !== selectionEnd || selectionStart === 0) { - return; - } - referencePopup(text, selectionStart); - } - - function handleKeyUp(event: React.KeyboardEvent) { - if (event.key === "Escape") { - setShowReferencePopup(false); - return; - } - - if (event.key === "{") { - // auto close the bracket - const currCaretPos = event.currentTarget.selectionEnd; - const isPrevDollar = value[currCaretPos - 2] === "$"; - if (!isPrevDollar) return; - - const newValue = `${value.slice(0, currCaretPos)}}${value.slice(currCaretPos)}`; - - setValue(newValue); - // TODO: there should be a better way to do - onChange?.({ target: { value: newValue } } as any); - setCaretPos(currCaretPos); - - if (event.currentTarget) { - setTimeout(() => { - referencePopup(newValue, currCaretPos); - }, 200); - - return; - } - } - if (!(event.key.startsWith("Arrow") || event.key === "Backspace" || event.key === "Delete")) { - handleReferencePopup(event.currentTarget); - } - } - - function handleKeyDown(event: React.KeyboardEvent) { - if ( - !( - event.key.startsWith("Arrow") || - ["Backspace", "Delete", "."].includes(event.key) || - (event.metaKey && event.key.toLowerCase() === "a") - ) - ) { - const match = isCaretInsideReference(value, event.currentTarget.selectionEnd); - if (match) event.preventDefault(); - } - } - - function handleMouseClick(event: React.MouseEvent) { - handleReferencePopup(event.currentTarget); - } - - async function handleReferenceSelect({ - name, - type, - slug - }: { - name: string; - type: "folder" | "secret" | "environment"; - slug?: string; - }) { - setShowReferencePopup(false); - - // forward ref for parent component - if (typeof ref === "function") { - ref(childRef.current); - } else if (ref && "current" in ref) { - const refCopy = ref; - refCopy.current = childRef.current; - } - - let newValue = value || ""; - const match = isCaretInsideReference(newValue, lastCaretPos); - const referenceStartIndex = match?.index || 0; - const referenceEndIndex = referenceStartIndex + (match?.[0]?.length || 0); - const [start, oldReference, end] = [ - value.slice(0, referenceStartIndex), - value.slice(referenceStartIndex, referenceEndIndex), - value.slice(referenceEndIndex) - ]; - - let oldReferenceStr = oldReference.slice(2, -1); - let currentPath = type === "environment" ? slug! : name; - currentPath = currentPath.replace(/\./g, "\\."); - - let replaceReference = ""; - let offset = 3; - switch (type) { - case "folder": - replaceReference = `${oldReferenceStr}${currentPath}.`; - offset -= 1; - break; - case "secret": { - if (oldReferenceStr.indexOf(".") === -1) oldReferenceStr = ""; - replaceReference = `${oldReferenceStr}${currentPath}`; - break; - } - case "environment": - replaceReference = `${currentPath}.`; - offset -= 1; - break; - default: - } - replaceReference = replaceReference.replace(/[//]/g, ""); - newValue = `${start}$\{${replaceReference}}${end}`; - setValue(newValue); - // TODO: there should be a better way to do - onChange?.({ target: { value: newValue } } as any); - setShowReferencePopup(type !== "secret"); - setTimeout(() => { - setIsSecretFocused.on(); - if (type !== "secret") setReferenceKey(replaceReference); - const caretPos = start.length + replaceReference.length + offset; - setCaretPos(caretPos); - }, 100); - } - - function handleChange(event: React.ChangeEvent) { - setValue(event.target.value); - if (typeof onChange === "function") onChange(event); - } - - function handleReferenceOpenChange(currOpen: boolean) { - if (!currOpen) setShowReferencePopup(false); - } return (
-
-
- 
-              
-                
-                  {syntaxHighlight(value, isVisible || isSecretFocused)}
-                
-              
-
- -