From 5612a01039440e77f97c768c20af4c53edbb7a65 Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Wed, 28 Jun 2023 20:50:02 +0530
Subject: [PATCH] fix(multi-line): resolved linting issues

---
 frontend/src/hooks/useSyntaxHighlight.tsx          |  2 +-
 .../EnvComparisonRow/EnvComparisonRow.tsx          | 14 +++++++++++---
 .../components/SecretInputRow/MaskedInput.tsx      |  3 ++-
 .../components/SecretInputRow/SecretInputRow.tsx   |  1 -
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/frontend/src/hooks/useSyntaxHighlight.tsx b/frontend/src/hooks/useSyntaxHighlight.tsx
index edb3f85cd..325917c83 100644
--- a/frontend/src/hooks/useSyntaxHighlight.tsx
+++ b/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;
 
diff --git a/frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx b/frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx
index 2c40e78f6..201012fa1 100644
--- a/frontend/src/views/DashboardPage/components/EnvComparisonRow/EnvComparisonRow.tsx
+++ b/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>
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/MaskedInput.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/MaskedInput.tsx
index 81e1ee5fd..a41589a1f 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/MaskedInput.tsx
+++ b/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;
diff --git a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx b/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
index 274e8db2b..fdb413226 100644
--- a/frontend/src/views/DashboardPage/components/SecretInputRow/SecretInputRow.tsx
+++ b/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;