Fix: Improved UI import indicators

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

@@ -14,7 +14,8 @@ const replaceContentWithDot = (str: string) => {
   return finalStr;
 };
 
-const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
+const syntaxHighlight = (content?: string | null, isVisible?: boolean, isImport?: boolean) => {
+  if (isImport) return "IMPORTED";
   if (content === "") return "EMPTY";
   if (!content) return "EMPTY";
   if (!isVisible) return replaceContentWithDot(content);
@@ -46,6 +47,7 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
 type Props = TextareaHTMLAttributes<HTMLTextAreaElement> & {
   value?: string | null;
   isVisible?: boolean;
+  isImport?: boolean;
   isReadOnly?: boolean;
   isDisabled?: boolean;
   containerClassName?: string;
@@ -55,7 +57,17 @@ const commonClassName = "font-mono text-sm caret-white border-none outline-none
 
 export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
   (
-    { value, isVisible, containerClassName, onBlur, isDisabled, isReadOnly, onFocus, ...props },
+    {
+      value,
+      isVisible,
+      isImport,
+      containerClassName,
+      onBlur,
+      isDisabled,
+      isReadOnly,
+      onFocus,
+      ...props
+    },
     ref
   ) => {
     const [isSecretFocused, setIsSecretFocused] = useToggle();
@@ -69,7 +81,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
           <pre aria-hidden className="m-0 ">
             <code className={`inline-block w-full  ${commonClassName}`}>
               <span style={{ whiteSpace: "break-spaces" }}>
-                {syntaxHighlight(value, isVisible || isSecretFocused)}
+                {syntaxHighlight(value, isVisible || isSecretFocused, isImport)}
               </span>
             </code>
           </pre>

frontend/src/hooks/api/secretImports/queries.tsx

@@ -269,8 +269,8 @@ export const useGetImportedSecretsAllEnvs = ({
 
       if (selectedEnvIndex !== -1) {
         const isPresent = secretImports?.[selectedEnvIndex]?.data?.find(
-          ({ secretPath, ...rest }) =>
+          ({ secretPath, secrets }) =>
-            secretPath === secPath && rest.secrets.some((s) => s.key === secretName)
+            secretPath === secPath && secrets.some((s) => s.key === secretName)
         );
 
         return Boolean(isPresent);

frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx

@@ -55,7 +55,6 @@ import {
   useCreateSecretV3,
   useDeleteSecretV3,
   useGetFoldersByEnv,
-  useGetImportedFoldersByEnv,
   useGetImportedSecretsAllEnvs,
   useGetProjectSecretsAllEnv,
   useGetUserWsKey,
@@ -133,11 +132,6 @@ export const SecretOverviewPage = () => {
     environments: userAvailableEnvs.map(({ slug }) => slug)
   });
 
-  const { isImportedFolderPresentInEnv } = useGetImportedFoldersByEnv({
-    projectId: workspaceId,
-    environments: userAvailableEnvs.map(({ slug }) => slug)
-  });
-
   const { isImportedSecretPresentInEnv } = useGetImportedSecretsAllEnvs({
     projectId: workspaceId,
     decryptFileKey: latestFileKey!,
@@ -652,7 +646,6 @@ export const SecretOverviewPage = () => {
                     <SecretOverviewFolderRow
                       folderName={folderName}
                       isFolderPresentInEnv={isFolderPresentInEnv}
-                      isImportedFolderPresentInEnv={isImportedFolderPresentInEnv}
                       environments={visibleEnvs}
                       key={`overview-${folderName}-${index + 1}`}
                       onClick={handleFolderClick}

frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx

@@ -1,14 +1,13 @@
-import { faCheck, faFileImport, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { faCheck, faFolder, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Td, Tooltip, Tr } from "@app/components/v2";
+import { Td, Tr } from "@app/components/v2";
 
 type Props = {
   folderName: string;
   environments: { name: string; slug: string }[];
   isFolderPresentInEnv: (name: string, env: string) => boolean;
-  isImportedFolderPresentInEnv: (name: string, env: string) => boolean;
   onClick: (path: string) => void;
 };
 
@@ -16,7 +15,7 @@ export const SecretOverviewFolderRow = ({
   folderName,
   environments = [],
   isFolderPresentInEnv,
-  isImportedFolderPresentInEnv,
+
   onClick
 }: Props) => {
   return (
@@ -31,27 +30,21 @@ export const SecretOverviewFolderRow = ({
       </Td>
       {environments.map(({ slug }, i) => {
         const isPresent = isFolderPresentInEnv(folderName, slug);
-        const isImportPresent = isImportedFolderPresentInEnv(folderName, slug);
+
         return (
           <Td
             key={`sec-overview-${slug}-${i + 1}-folder`}
             className={twMerge(
               "border-r border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
-              isPresent || isImportPresent ? "text-green-600" : "text-red-600"
+              isPresent ? "text-green-600" : "text-red-600"
             )}
           >
-            <Tooltip
+            <div className="flex justify-center">
-              center
+              <FontAwesomeIcon
-              isDisabled={!isImportPresent}
+                // eslint-disable-next-line no-nested-ternary
-              content="Folder is imported from another environment"
+                icon={isPresent ? faCheck : faXmark}
-            >
+              />
-              <div className="flex justify-center">
+            </div>
-                <FontAwesomeIcon
-                  // eslint-disable-next-line no-nested-ternary
-                  icon={isPresent ? faCheck : isImportPresent ? faFileImport : faXmark}
-                />
-              </div>
-            </Tooltip>
           </Td>
         );
       })}

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

@@ -2,6 +2,7 @@ import { Controller, useForm } from "react-hook-form";
 import { subject } from "@casl/ability";
 import { faCheck, faCopy, faTrash, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { ProjectPermissionCan } from "@app/components/permissions";
@@ -15,6 +16,7 @@ type Props = {
   secretId?: string;
   isCreatable?: boolean;
   isVisible?: boolean;
+  isImportedSecret: boolean;
   environment: string;
   secretPath: string;
   onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
@@ -25,6 +27,7 @@ type Props = {
 export const SecretEditRow = ({
   defaultValue,
   isCreatable,
+  isImportedSecret,
   onSecretUpdate,
   secretName,
   onSecretCreate,
@@ -90,14 +93,25 @@ export const SecretEditRow = ({
     <div className="group flex w-full cursor-text items-center space-x-2">
       <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
         <Controller
+          disabled={isImportedSecret}
           control={control}
           name="value"
           render={({ field }) => (
-            <SecretInput {...field} value={field.value as string} isVisible={isVisible} />
+            <SecretInput
+              {...field}
+              value={field.value as string}
+              isVisible={isVisible}
+              isImport={isImportedSecret}
+            />
           )}
         />
       </div>
-      <div className="flex w-16 justify-center space-x-3 pl-2 transition-all">
+      <div
+        className={twMerge(
+          "flex w-16 justify-center space-x-3 pl-2 transition-all",
+          isImportedSecret && "pointer-events-none opacity-0"
+        )}
+      >
         {isDirty ? (
           <>
             <ProjectPermissionCan

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

@@ -90,7 +90,7 @@ export const SecretOverviewTableRow = ({
                         isSecretPresent
                           ? "Present secret"
                           : isSecretImported
-                          ? "Secret is imported from another environment"
+                          ? "Imported secret"
                           : "Missing secret"
                       }
                     >
@@ -162,6 +162,12 @@ export const SecretOverviewTableRow = ({
                       const secret = getSecretByKey(slug, secretKey);
                       const isCreatable = !secret;
 
+                      const isImportedSecret = isImportedSecretPresentInEnv(
+                        secretPath,
+                        slug,
+                        secretKey
+                      );
+
                       return (
                         <tr
                           key={`secret-expanded-${slug}-${secretKey}`}
@@ -182,6 +188,7 @@ export const SecretOverviewTableRow = ({
                               secretName={secretKey}
                               defaultValue={secret?.value}
                               secretId={secret?.id}
+                              isImportedSecret={isImportedSecret}
                               isCreatable={isCreatable}
                               onSecretDelete={onSecretDelete}
                               onSecretCreate={onSecretCreate}