Revert "fix(multi-line): resolved breaking ui when secret value contains < or >"

frontend/src/components/v2/SecretInput/SecretInput.tsx

@@ -1,35 +1,36 @@
 /* eslint-disable react/no-danger */
-import { forwardRef, HTMLAttributes } from "react";
+import { HTMLAttributes } from "react";
 import ContentEditable from "react-contenteditable";
-import sanitizeHtml, { DisallowedTagsModes } from "sanitize-html";
+import sanitizeHtml from "sanitize-html";
 
 import { useToggle } from "@app/hooks";
 
 const REGEX = /\${([^}]+)}/g;
+const stripSpanTags = (str: string) => str.replace(/<\/?span[^>]*>/g, "");
 const replaceContentWithDot = (str: string) => {
   let finalStr = "";
+  let isHtml = false;
   for (let i = 0; i < str.length; i += 1) {
     const char = str.at(i);
-    finalStr += char === "\n" ? "\n" : "&#8226;";
+
+    if (char === "<" || char === ">") {
+      isHtml = char === "<";
+      finalStr += char;
+    } else if (!isHtml && char !== "\n") {
+      finalStr += "&#8226;";
+    } else {
+      finalStr += char;
+    }
   }
   return finalStr;
 };
 
-const sanitizeConf = {
-  allowedTags: ["span"],
-  disallowedTagsMode: "escape" as DisallowedTagsModes
-};
-
-const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
-  if (content === "") return "EMPTY";
-  if (!content) return "missing";
-  if (!isVisible) return replaceContentWithDot(content);
-
-  const sanitizedContent = sanitizeHtml(
-    content.replaceAll("<", "&lt;").replaceAll(">", "&gt;"),
-    sanitizeConf
-  );
-  const newContent = sanitizedContent.replace(
+const syntaxHighlight = (orgContent?: string | null, isVisible?: boolean) => {
+  if (orgContent === "") return "EMPTY";
+  if (!orgContent) return "missing";
+  if (!isVisible) return replaceContentWithDot(orgContent);
+  const content = stripSpanTags(orgContent);
+  const newContent = content.replace(
     REGEX,
     (_a, b) =>
       `<span class="ph-no-capture text-yellow">&#36;&#123;<span class="ph-no-capture text-yello-200/80">${b}</span>&#125;</span>`
@@ -38,58 +39,57 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
   return newContent;
 };
 
+const sanitizeConf = {
+  allowedTags: ["div", "span", "br", "p"]
+};
+
 type Props = Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur"> & {
   value?: string | null;
   isVisible?: boolean;
   isDisabled?: boolean;
-  onChange?: (val: string) => void;
-  onBlur?: () => void;
+  onChange?: (val: string, html: string) => void;
+  onBlur?: (sanitizedHtml: string) => void;
 };
 
-export const SecretInput = forwardRef<HTMLDivElement, Props>(
-  ({ value, isVisible, onChange, onBlur, isDisabled, ...props }, ref) => {
-    const [isSecretFocused, setIsSecretFocused] = useToggle();
+export const SecretInput = ({
+  value,
+  isVisible,
+  onChange,
+  onBlur,
+  isDisabled,
+  ...props
+}: Props) => {
+  const [isSecretFocused, setIsSecretFocused] = useToggle();
 
-    return (
+  return (
+    <div
+      className="thin-scrollbar relative overflow-y-auto overflow-x-hidden"
+      style={{ maxHeight: `${21 * 7}px` }}
+    >
       <div
-        className="thin-scrollbar relative overflow-y-auto overflow-x-hidden"
-        style={{ maxHeight: `${21 * 7}px` }}
-      >
-        <div
-          dangerouslySetInnerHTML={{
-            __html: syntaxHighlight(value, isVisible || isSecretFocused)
-          }}
-          className={`absolute top-0 left-0 z-0 h-full w-full inline-block text-ellipsis whitespace-pre-wrap break-all ${
-            !value && value !== "" && "italic text-red-600/70"
-          }`}
-          ref={ref}
-        />
-        <ContentEditable
-          className="relative z-10 h-full w-full text-ellipsis inline-block whitespace-pre-wrap  break-all text-transparent caret-white outline-none"
-          role="textbox"
-          onChange={(evt) => {
-            if (onChange) onChange(evt.currentTarget.innerText.trim());
-          }}
-          onFocus={() => setIsSecretFocused.on()}
-          disabled={isDisabled}
-          spellCheck={false}
-          onBlur={() => {
-            if (onBlur) onBlur();
-            setIsSecretFocused.off();
-          }}
-          html={
-            isVisible || isSecretFocused
-              ? sanitizeHtml(
-                  value?.replaceAll("<", "&lt;").replaceAll(">", "&gt;") || "",
-                  sanitizeConf
-                )
-              : syntaxHighlight(value, false)
-          }
-          {...props}
-        />
-      </div>
-    );
-  }
-);
-
-SecretInput.displayName = "SecretInput";
+        dangerouslySetInnerHTML={{
+          __html: syntaxHighlight(value, isVisible || isSecretFocused)
+        }}
+        className={`absolute top-0 left-0 z-0 h-full w-full text-ellipsis whitespace-pre-line break-all ${
+          !value && value !== "" && "italic text-red-600/70"
+        }`}
+      />
+      <ContentEditable
+        className="relative z-10 h-full w-full text-ellipsis whitespace-pre-line  break-all text-transparent caret-white outline-none"
+        role="textbox"
+        onChange={(evt) => {
+          if (onChange) onChange(evt.currentTarget.innerText.trim(), evt.currentTarget.innerHTML);
+        }}
+        onFocus={() => setIsSecretFocused.on()}
+        disabled={isDisabled}
+        spellCheck={false}
+        onBlur={(evt) => {
+          if (onBlur) onBlur(sanitizeHtml(evt.currentTarget.innerHTML || "", sanitizeConf));
+          setIsSecretFocused.off();
+        }}
+        html={isVisible || isSecretFocused ? value || "" : syntaxHighlight(value, false)}
+        {...props}
+      />
+    </div>
+  );
+};

frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useEffect,useRef, useState } from "react";
 import {
   Control,
   Controller,
@@ -32,8 +32,7 @@ import {
   PopoverTrigger,
   SecretInput,
   Tag,
-  Tooltip
-} from "@app/components/v2";
+  Tooltip} from "@app/components/v2";
 import { useToggle } from "@app/hooks";
 import { WsTag } from "@app/hooks/api/types";
 
@@ -84,7 +83,7 @@ export const SecretInputRow = memo(
     isKeyError,
     keyError,
     secUniqId,
-    autoCapitalization
+    autoCapitalization,
   }: Props): JSX.Element => {
     const isKeySubDisabled = useRef<boolean>(false);
     // comment management in a row
@@ -95,7 +94,7 @@ export const SecretInputRow = memo(
     } = useFieldArray({ control, name: `secrets.${index}.tags` });
 
     // display the tags in alphabetical order
-    secretTags.sort((a, b) => a?.name?.localeCompare(b?.name));
+    secretTags.sort((a, b) => a?.name?.localeCompare(b?.name))
 
     // to get details on a secret
     const overrideAction = useWatch({
@@ -128,40 +127,47 @@ export const SecretInputRow = memo(
     const isOverridden =
       overrideAction === SecretActionType.Created || overrideAction === SecretActionType.Modified;
 
+
+    const [editorRef, setEditorRef] = useState(isOverridden ? secValueOverride : secValue);
     const [hoveredTag, setHoveredTag] = useState<WsTag | null>(null);
 
     const handleTagOnMouseEnter = (wsTag: WsTag) => {
       setHoveredTag(wsTag);
-    };
+    }
 
     const handleTagOnMouseLeave = () => {
       setHoveredTag(null);
-    };
+    }
 
-    const checkIfTagIsVisible = (wsTag: WsTag) => wsTag._id === hoveredTag?._id;
+    const checkIfTagIsVisible = (wsTag: WsTag) =>  wsTag._id === hoveredTag?._id;
 
     const secId = useWatch({ control, name: `secrets.${index}._id`, exact: true });
-    const tags =
-      useWatch({ control, name: `secrets.${index}.tags`, exact: true, defaultValue: [] }) || [];
+    const tags = useWatch({ control, name: `secrets.${index}.tags`, exact: true, defaultValue: [] }) || [];
 
     const selectedTagIds = tags.reduce<Record<string, boolean>>(
       (prev, curr) => ({ ...prev, [curr.slug]: true }),
       {}
     );
 
-    const [isSecValueCopied, setIsSecValueCopied] = useToggle(false);
+    const [isInviteLinkCopied, setInviteLinkCopied] = useToggle(false);
+
 
     useEffect(() => {
       let timer: NodeJS.Timeout;
-      if (isSecValueCopied) {
-        timer = setTimeout(() => setIsSecValueCopied.off(), 2000);
+      if (isInviteLinkCopied) {
+        timer = setTimeout(() => setInviteLinkCopied.off(), 2000);
       }
       return () => clearTimeout(timer);
-    }, [isSecValueCopied]);
+    }, [isInviteLinkCopied]);
+
+
+    useEffect(() => {
+      setEditorRef(isOverridden ? secValueOverride : secValue);
+    }, [isOverridden]);
 
     const copyTokenToClipboard = () => {
       navigator.clipboard.writeText((secValueOverride || secValue) as string);
-      setIsSecValueCopied.on();
+      setInviteLinkCopied.on();
     };
 
     const onSecretOverride = () => {
@@ -185,8 +191,8 @@ export const SecretInputRow = memo(
     const onSelectTag = (selectedTag: WsTag) => {
       const shouldAppend = !selectedTagIds[selectedTag.slug];
       if (shouldAppend) {
-        const { _id: id, name, slug, tagColor } = selectedTag;
-        append({ _id: id, name, slug, tagColor });
+        const {_id: id, name, slug, tagColor} = selectedTag
+        append({_id: id, name, slug, tagColor});
       } else {
         const pos = tags.findIndex(({ slug }: { slug: string }) => selectedTag.slug === slug);
         remove(pos);
@@ -266,7 +272,7 @@ export const SecretInputRow = memo(
               <Controller
                 control={control}
                 name={`secrets.${index}.valueOverride`}
-                render={({ field }) => (
+                render={({ field: { onChange, onBlur } }) => (
                   <SecretInput
                     key={`secrets.${index}.valueOverride`}
                     isDisabled={
@@ -274,8 +280,16 @@ export const SecretInputRow = memo(
                       isRollbackMode ||
                       (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
                     }
+                    value={editorRef}
                     isVisible={!isSecretValueHidden}
-                    {...field}
+                    onChange={(val, html) => {
+                      onChange(val);
+                      setEditorRef(html);
+                    }}
+                    onBlur={(html) => {
+                      setEditorRef(html);
+                      onBlur();
+                    }}
                   />
                 )}
               />
@@ -283,7 +297,7 @@ export const SecretInputRow = memo(
               <Controller
                 control={control}
                 name={`secrets.${index}.value`}
-                render={({ field }) => (
+                render={({ field: { onBlur, onChange } }) => (
                   <SecretInput
                     key={`secrets.${index}.value`}
                     isVisible={!isSecretValueHidden}
@@ -292,7 +306,15 @@ export const SecretInputRow = memo(
                       isRollbackMode ||
                       (isOverridden ? isAddOnly : shouldBeBlockedInAddOnly)
                     }
-                    {...field}
+                    onChange={(val, html) => {
+                      onChange(val);
+                      setEditorRef(html);
+                    }}
+                    value={editorRef}
+                    onBlur={(html) => {
+                      setEditorRef(html);
+                      onBlur();
+                    }}
                   />
                 )}
               />
@@ -301,41 +323,38 @@ export const SecretInputRow = memo(
         </td>
         <td className="min-w-sm flex">
           <div className="flex h-8 items-center pl-2">
-            {secretTags.map(({ id, slug, tagColor }) => {
+            {secretTags.map(({ id, slug, tagColor}) => {
               return (
-                <>
-                  <Popover>
-                    <PopoverTrigger asChild>
-                      <div>
-                        <Tag
-                          // isDisabled={isReadOnly || isAddOnly || isRollbackMode}
-                          // onClose={() => remove(i)}
-                          key={id}
-                          className="cursor-pointer"
-                        >
-                          <div className="rounded-full border-mineshaft-500 bg-transparent flex items-center  gap-1.5 justify-around">
-                            <div
-                              className="w-[10px] h-[10px] rounded-full"
-                              style={{ background: tagColor || "#bec2c8" }}
-                            />
-                            {slug}
-                          </div>
-                        </Tag>
-                      </div>
-                    </PopoverTrigger>
-                    <AddTagPopoverContent
-                      wsTags={wsTags}
-                      secKey={secKey || "this secret"}
-                      selectedTagIds={selectedTagIds}
-                      handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
-                      handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
-                      handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
-                      checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
-                      handleOnCreateTagOpen={() => onCreateTagOpen()}
-                    />
-                  </Popover>
-                </>
-              );
+               <>
+                 <Popover>
+                  <PopoverTrigger asChild>
+                    <div>
+                      <Tag
+                        // isDisabled={isReadOnly || isAddOnly || isRollbackMode}
+                        // onClose={() => remove(i)}
+                        key={id}
+                        className="cursor-pointer"
+                      >
+                        <div className="rounded-full border-mineshaft-500 bg-transparent flex items-center  gap-1.5 justify-around">
+                          <div className="w-[10px] h-[10px] rounded-full" style={{ background: tagColor || "#bec2c8" }} />
+                          {slug}
+                        </div>
+                      </Tag>
+                    </div>
+                  </PopoverTrigger>
+                  <AddTagPopoverContent
+                    wsTags={wsTags}
+                    secKey={secKey || "this secret"}
+                    selectedTagIds={selectedTagIds}
+                    handleSelectTag={(wsTag: WsTag) => onSelectTag(wsTag)}
+                    handleTagOnMouseEnter={(wsTag: WsTag) => handleTagOnMouseEnter(wsTag)}
+                    handleTagOnMouseLeave={() => handleTagOnMouseLeave()}
+                    checkIfTagIsVisible={(wsTag: WsTag) => checkIfTagIsVisible(wsTag)}
+                    handleOnCreateTagOpen={() => onCreateTagOpen()}
+                  />
+                </Popover>
+               </>
+              )
             })}
             <div className="w-0 overflow-hidden group-hover:w-6">
               <Tooltip content="Copy value">
@@ -346,7 +365,7 @@ export const SecretInputRow = memo(
                   className="py-[0.42rem]"
                   onClick={copyTokenToClipboard}
                 >
-                  <FontAwesomeIcon icon={isSecValueCopied ? faCheck : faCopy} />
+                  <FontAwesomeIcon icon={isInviteLinkCopied ? faCheck : faCopy} />
                 </IconButton>
               </Tooltip>
             </div>

frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { faCheck, faCopy, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -38,11 +39,14 @@ export const SecretEditRow = ({
       value: defaultValue
     }
   });
+  const editorRef = useRef(defaultValue);
   const [isDeleting, setIsDeleting] = useToggle();
   const { createNotification } = useNotificationContext();
 
   const handleFormReset = () => {
     reset();
+    const val = getValues();
+    editorRef.current = val.value;
   };
 
   const handleCopySecretToClipboard = async () => {
@@ -74,6 +78,7 @@ export const SecretEditRow = ({
     try {
       await onSecretDelete(environment, secretName);
       reset({ value: undefined });
+      editorRef.current = undefined;
     } finally {
       setIsDeleting.off();
     }
@@ -85,7 +90,20 @@ export const SecretEditRow = ({
         <Controller
           control={control}
           name="value"
-          render={({ field }) => <SecretInput {...field} isVisible={isVisible} />}
+          render={({ field: { onChange, onBlur } }) => (
+            <SecretInput
+              value={editorRef.current}
+              onChange={(val, html) => {
+                onChange(val);
+                editorRef.current = html;
+              }}
+              onBlur={(html) => {
+                editorRef.current = html;
+                onBlur();
+              }}
+              isVisible={isVisible}
+            />
+          )}
         />
       </div>
       <div className="flex w-16 justify-center space-x-3 pl-2 transition-all">