fix(multi-line): resolved linting issues

frontend/src/hooks/useSyntaxHighlight.tsx

@@ -1,6 +1,6 @@
+import { useCallback } from "react";
 import { faCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useCallback } from "react";
 
 const REGEX = /([$]{.*?})/g;
 

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

@@ -2,9 +2,11 @@
 import { useCallback, useRef, useState } from "react";
 import { faEye, faEyeSlash, faKey, faMinus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useToggle } from "~/hooks/useToggle";
+
 import { useSyntaxHighlight } from "@app/hooks";
 
+import { useToggle } from "~/hooks/useToggle";
+
 type Props = {
   secrets: any[] | undefined;
   // permission and external state's that decided to hide or show
@@ -31,7 +33,7 @@ const DashboardInput = ({
   const [isFocused, setIsFocused] = useToggle();
   const syntaxHighlight = useSyntaxHighlight();
 
-  const value = isOverridden ? secret.valueOverride : secret?.value || "";
+  const value = isOverridden ? secret.valueOverride : secret?.value;
   const multilineExpandUnit = ((value?.match(/\n/g)?.length || 0) + 1) * SEC_VAL_LINE_HEIGHT;
   const maxMultilineHeight = Math.min(multilineExpandUnit, 21 * MAX_MULTI_LINE);
 
@@ -72,7 +74,13 @@ const DashboardInput = ({
             }`}
             style={{ height: `${maxMultilineHeight}px`, width: "calc(100% - 12px)" }}
           >
-            {syntaxHighlight(value || "", isSecretValueHidden ? !isFocused : isSecretValueHidden)}
+            {value === undefined ? (
+              <span className="cursor-default font-sans text-xs italic text-red-500/80">
+                <FontAwesomeIcon icon={faMinus} className="mt-1" />
+              </span>
+            ) : (
+              syntaxHighlight(value || "", isSecretValueHidden ? !isFocused : isSecretValueHidden)
+            )}
           </code>
         </pre>
       </div>

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

@@ -1,9 +1,10 @@
 import { useRef } from "react";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 
-import { FormData } from "../../DashboardPage.utils";
 import { useSyntaxHighlight, useToggle } from "@app/hooks";
 
+import { FormData } from "../../DashboardPage.utils";
+
 type Props = {
   isReadOnly?: boolean;
   isSecretValueHidden?: boolean;

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

@@ -34,7 +34,6 @@ import { WsTag } from "@app/hooks/api/types";
 
 import { FormData, SecretActionType } from "../../DashboardPage.utils";
 import { MaskedInput } from "./MaskedInput";
-import { useToggle } from "~/hooks/useToggle";
 
 type Props = {
   index: number;