Merge pull request #1606 from Infisical/daniel/ui-imported-folders-fix

Fix: UI indicator for imports
2026-09-22 13:39:35 +00:00 · 2024-03-20 22:08:50 -04:00
parent 04c1ea9b11 609ce8e5cc
commit 878e4a79e7
11 changed files with 284 additions and 23 deletions
--- a/backend/src/services/secret-folder/secret-folder-service.ts
+++ b/backend/src/services/secret-folder/secret-folder-service.ts
@@ -232,6 +232,7 @@ export const secretFolderServiceFactory = ({
    if (!parentFolder) return [];

    const folders = await folderDAL.find({ envId: env.id, parentId: parentFolder.id });
+
    return folders;
  };

--- a/frontend/src/components/v2/SecretInput/SecretInput.tsx
+++ b/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>
--- a/frontend/src/components/v2/Tooltip/Tooltip.tsx
+++ b/frontend/src/components/v2/Tooltip/Tooltip.tsx
@@ -11,6 +11,8 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
  onOpenChange?: (isOpen: boolean) => void;
  defaultOpen?: boolean;
  position?: "top" | "bottom" | "left" | "right";
+  isDisabled?: boolean;
+  center?: boolean;
 };

 export const Tooltip = ({
@@ -20,7 +22,9 @@ export const Tooltip = ({
  onOpenChange,
  defaultOpen,
  className,
+  center,
  asChild = true,
+  isDisabled,
  position = "top",
  ...props
 }: TooltipProps) => (
@@ -38,11 +42,13 @@ export const Tooltip = ({
      {...props}
      className={twMerge(
        `z-50 max-w-[15rem] select-none rounded-md border border-mineshaft-600 bg-mineshaft-800 py-2 px-4 text-sm font-light text-bunker-200 shadow-md 
-data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
-data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
-data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
-data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
-`,
+        data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade
+        data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade
+        data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade
+        data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade
+      `,
+        isDisabled && "!hidden",
+        center && "text-center",
        className
      )}
    >
--- a/frontend/src/hooks/api/secretImports/index.ts
+++ b/frontend/src/hooks/api/secretImports/index.ts
@@ -1,2 +1,7 @@
 export { useCreateSecretImport, useDeleteSecretImport, useUpdateSecretImport } from "./mutation";
-export { useGetImportedSecrets, useGetSecretImports } from "./queries";
+export {
+  useGetImportedFoldersByEnv,
+  useGetImportedSecretsAllEnvs,
+  useGetImportedSecretsSingleEnv,
+  useGetSecretImports
+} from "./queries";
--- a/frontend/src/hooks/api/secretImports/queries.tsx
+++ b/frontend/src/hooks/api/secretImports/queries.tsx
@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { useQueries, useQuery, UseQueryOptions } from "@tanstack/react-query";

 import {
  decryptAssymmetric,
@@ -7,7 +7,15 @@ import {
 } from "@app/components/utilities/cryptography/crypto";
 import { apiRequest } from "@app/config/request";

-import { TGetImportedSecrets, TGetSecretImports, TImportedSecrets, TSecretImport } from "./types";
+import {
+  TGetImportedFoldersByEnvDTO,
+  TGetImportedSecrets,
+  TGetSecretImports,
+  TGetSecretImportsAllEnvs,
+  TImportedSecrets,
+  TSecretImport,
+  TuseGetImportedFoldersByEnv
+} from "./types";

 export const secretImportKeys = {
  getProjectSecretImports: ({ environment, projectId, path }: TGetSecretImports) =>
@@ -17,7 +25,11 @@ export const secretImportKeys = {
    projectId,
    path
  }: Omit<TGetImportedSecrets, "decryptFileKey">) =>
-    [{ environment, path, projectId }, "secrets-import-sec"] as const
+    [{ environment, path, projectId }, "secrets-import-sec"] as const,
+  getImportedFoldersByEnv: ({ environment, projectId, path }: TGetImportedFoldersByEnvDTO) =>
+    [{ environment, projectId, path }, "imported-folders"] as const,
+  getImportedFoldersAllEnvs: ({ projectId, path, environment }: TGetImportedFoldersByEnvDTO) =>
+    [{ projectId, path, environment }, "imported-folders-all-envs"] as const
 };

 const fetchSecretImport = async ({ projectId, environment, path = "/" }: TGetSecretImports) => {
@@ -75,7 +87,25 @@ const fetchImportedSecrets = async (
  return data.secrets;
 };

-export const useGetImportedSecrets = ({
+const fetchImportedFolders = async ({
+  projectId,
+  environment,
+  path
+}: TGetImportedFoldersByEnvDTO) => {
+  const { data } = await apiRequest.get<{ secretImports: TSecretImport[] }>(
+    "/api/v1/secret-imports",
+    {
+      params: {
+        workspaceId: projectId,
+        environment,
+        path
+      }
+    }
+  );
+  return data.secretImports;
+};
+
+export const useGetImportedSecretsSingleEnv = ({
  environment,
  decryptFileKey,
  path,
@@ -159,3 +189,138 @@ export const useGetImportedSecrets = ({
      [decryptFileKey]
    )
  });
+
+export const useGetImportedSecretsAllEnvs = ({
+  projectId,
+  environments,
+  path = "/",
+  decryptFileKey
+}: TGetSecretImportsAllEnvs) => {
+  const secretImports = useQueries({
+    queries: environments.map((env) => ({
+      queryKey: secretImportKeys.getImportedFoldersAllEnvs({
+        environment: env,
+        projectId,
+        path
+      }),
+      queryFn: () => fetchImportedSecrets(projectId, env, path).catch(() => []),
+      enabled: Boolean(projectId) && Boolean(env),
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      select: useCallback(
+        (data: TImportedSecrets[]) => {
+          const PRIVATE_KEY = localStorage.getItem("PRIVATE_KEY") as string;
+          const latestKey = decryptFileKey;
+          const key = decryptAssymmetric({
+            ciphertext: latestKey.encryptedKey,
+            nonce: latestKey.nonce,
+            publicKey: latestKey.sender.publicKey,
+            privateKey: PRIVATE_KEY
+          });
+
+          return data.map((el) => ({
+            environment: el.environment,
+            secretPath: el.secretPath,
+            environmentInfo: el.environmentInfo,
+            folderId: el.folderId,
+            secrets: el.secrets.map((encSecret) => {
+              const secretKey = decryptSymmetric({
+                ciphertext: encSecret.secretKeyCiphertext,
+                iv: encSecret.secretKeyIV,
+                tag: encSecret.secretKeyTag,
+                key
+              });
+
+              const secretValue = decryptSymmetric({
+                ciphertext: encSecret.secretValueCiphertext,
+                iv: encSecret.secretValueIV,
+                tag: encSecret.secretValueTag,
+                key
+              });
+
+              const secretComment = decryptSymmetric({
+                ciphertext: encSecret.secretCommentCiphertext,
+                iv: encSecret.secretCommentIV,
+                tag: encSecret.secretCommentTag,
+                key
+              });
+
+              return {
+                id: encSecret.id,
+                env: encSecret.environment,
+                key: secretKey,
+                value: secretValue,
+                tags: encSecret.tags,
+                comment: secretComment,
+                createdAt: encSecret.createdAt,
+                updatedAt: encSecret.updatedAt,
+                version: encSecret.version
+              };
+            })
+          }));
+        },
+        [decryptFileKey]
+      )
+    }))
+  });
+
+  const isImportedSecretPresentInEnv = useCallback(
+    (secPath: string, envSlug: string, secretName: string) => {
+      const selectedEnvIndex = environments.indexOf(envSlug);
+
+      if (selectedEnvIndex !== -1) {
+        const isPresent = secretImports?.[selectedEnvIndex]?.data?.find(
+          ({ secretPath, secrets }) =>
+            secretPath === secPath && secrets.some((s) => s.key === secretName)
+        );
+
+        return Boolean(isPresent);
+      }
+      return false;
+    },
+    [(secretImports || []).map((response) => response.data)]
+  );
+
+  return { secretImports, isImportedSecretPresentInEnv };
+};
+
+export const useGetImportedFoldersByEnv = ({
+  projectId,
+  environments,
+  path = "/"
+}: TuseGetImportedFoldersByEnv) => {
+  const queryParams = new URLSearchParams(window.location.search);
+
+  const currentPath = path;
+
+  const importedFolders = useQueries({
+    queries: environments.map((env) => ({
+      queryKey: secretImportKeys.getImportedFoldersByEnv({
+        projectId,
+        environment: env,
+        path: currentPath
+      }),
+      queryFn: async () => fetchImportedFolders({ projectId, environment: env, path: currentPath }),
+      enabled: Boolean(projectId) && Boolean(env)
+    }))
+  });
+
+  const isImportedFolderPresentInEnv = useCallback(
+    (name: string, env: string) => {
+      const selectedEnvIndex = environments.indexOf(env);
+
+      if (selectedEnvIndex !== -1) {
+        const currentlyBrowsingPath = queryParams.get("secretPath") || "";
+
+        const isPresent = importedFolders?.[selectedEnvIndex]?.data?.find(
+          ({ importPath }) => importPath === `${currentlyBrowsingPath}/${name}`
+        );
+
+        return Boolean(isPresent);
+      }
+      return false;
+    },
+    [(importedFolders || []).map((response) => response.data)]
+  );
+
+  return { importedFolders, isImportedFolderPresentInEnv };
+};
--- a/frontend/src/hooks/api/secretImports/types.ts
+++ b/frontend/src/hooks/api/secretImports/types.ts
@@ -12,6 +12,12 @@ export type TSecretImport = {
  updatedAt: string;
 };

+export type TGetImportedFoldersByEnvDTO = {
+  projectId: string;
+  environment: string;
+  path?: string;
+};
+
 export type TImportedSecrets = {
  environment: string;
  environmentInfo: WorkspaceEnv;
@@ -26,6 +32,13 @@ export type TGetSecretImports = {
  path?: string;
 };

+export type TGetSecretImportsAllEnvs = {
+  projectId: string;
+  decryptFileKey: UserWsKeyPair;
+  path?: string;
+  environments: string[];
+};
+
 export type TGetImportedSecrets = {
  projectId: string;
  environment: string;
@@ -33,6 +46,12 @@ export type TGetImportedSecrets = {
  decryptFileKey: UserWsKeyPair;
 };

+export type TuseGetImportedFoldersByEnv = {
+  environments: string[];
+  projectId: string;
+  path?: string;
+};
+
 export type TCreateSecretImportDTO = {
  projectId: string;
  environment: string;
--- a/frontend/src/views/SecretMainPage/SecretMainPage.tsx
+++ b/frontend/src/views/SecretMainPage/SecretMainPage.tsx
@@ -17,7 +17,7 @@ import {
 } from "@app/context";
 import { usePopUp } from "@app/hooks";
 import {
-  useGetImportedSecrets,
+  useGetImportedSecretsSingleEnv,
  useGetProjectFolders,
  useGetProjectSecrets,
  useGetSecretApprovalPolicyOfABoard,
@@ -124,7 +124,7 @@ export const SecretMainPage = () => {
  });

  // fetch imported secrets to show user the overriden ones
-  const { data: importedSecrets } = useGetImportedSecrets({
+  const { data: importedSecrets } = useGetImportedSecretsSingleEnv({
    projectId: workspaceId,
    environment,
    decryptFileKey: decryptFileKey!,
--- a/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+++ b/frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
@@ -55,6 +55,7 @@ import {
  useCreateSecretV3,
  useDeleteSecretV3,
  useGetFoldersByEnv,
+  useGetImportedSecretsAllEnvs,
  useGetProjectSecretsAllEnv,
  useGetUserWsKey,
  useUpdateSecretV3
@@ -131,6 +132,12 @@ export const SecretOverviewPage = () => {
    environments: userAvailableEnvs.map(({ slug }) => slug)
  });

+  const { isImportedSecretPresentInEnv } = useGetImportedSecretsAllEnvs({
+    projectId: workspaceId,
+    decryptFileKey: latestFileKey!,
+    environments: userAvailableEnvs.map(({ slug }) => slug)
+  });
+
  const { mutateAsync: createSecretV3 } = useCreateSecretV3();
  const { mutateAsync: updateSecretV3 } = useUpdateSecretV3();
  const { mutateAsync: deleteSecretV3 } = useDeleteSecretV3();
@@ -649,6 +656,7 @@ export const SecretOverviewPage = () => {
                  filteredSecretNames.map((key, index) => (
                    <SecretOverviewTableRow
                      secretPath={secretPath}
+                      isImportedSecretPresentInEnv={isImportedSecretPresentInEnv}
                      onSecretCreate={handleSecretCreate}
                      onSecretDelete={handleSecretDelete}
                      onSecretUpdate={handleSecretUpdate}
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
@@ -15,6 +15,7 @@ export const SecretOverviewFolderRow = ({
  folderName,
  environments = [],
  isFolderPresentInEnv,
+
  onClick
 }: Props) => {
  return (
@@ -29,6 +30,7 @@ export const SecretOverviewFolderRow = ({
      </Td>
      {environments.map(({ slug }, i) => {
        const isPresent = isFolderPresentInEnv(folderName, slug);
+
        return (
          <Td
            key={`sec-overview-${slug}-${i + 1}-folder`}
@@ -38,7 +40,10 @@ export const SecretOverviewFolderRow = ({
            )}
          >
            <div className="flex justify-center">
-              <FontAwesomeIcon icon={isPresent ? faCheck : faXmark} />
+              <FontAwesomeIcon
+                // eslint-disable-next-line no-nested-ternary
+                icon={isPresent ? faCheck : faXmark}
+              />
            </div>
          </Td>
        );
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+++ b/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
--- a/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+++ b/frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
@@ -4,6 +4,7 @@ import {
  faCheck,
  faEye,
  faEyeSlash,
+  faFileImport,
  faKey,
  faXmark
 } from "@fortawesome/free-solid-svg-icons";
@@ -26,6 +27,7 @@ type Props = {
  onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
  onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
  onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
+  isImportedSecretPresentInEnv: (name: string, env: string, secretName: string) => boolean;
 };

 export const SecretOverviewTableRow = ({
@@ -36,6 +38,7 @@ export const SecretOverviewTableRow = ({
  onSecretUpdate,
  onSecretCreate,
  onSecretDelete,
+  isImportedSecretPresentInEnv,
  expandableColWidth
 }: Props) => {
  const [isFormExpanded, setIsFormExpanded] = useToggle();
@@ -61,6 +64,9 @@ export const SecretOverviewTableRow = ({
        </Td>
        {environments.map(({ slug }, i) => {
          const secret = getSecretByKey(slug, secretKey);
+
+          const isSecretImported = isImportedSecretPresentInEnv(secretPath, slug, secretKey);
+
          const isSecretPresent = Boolean(secret);
          const isSecretEmpty = secret?.value === "";
          return (
@@ -69,16 +75,29 @@ export const SecretOverviewTableRow = ({
              className={twMerge(
                "py-0 px-0 group-hover:bg-mineshaft-700",
                isFormExpanded && "border-t-2 border-mineshaft-500",
-                isSecretPresent && !isSecretEmpty ? "text-green-600" : "",
-                isSecretPresent && isSecretEmpty ? "text-yellow" : "",
-                !isSecretPresent && !isSecretEmpty ? "text-red-600" : ""
+                (isSecretPresent && !isSecretEmpty) || isSecretImported ? "text-green-600" : "",
+                isSecretPresent && isSecretEmpty && !isSecretImported ? "text-yellow" : "",
+                !isSecretPresent && !isSecretEmpty && !isSecretImported ? "text-red-600" : ""
              )}
            >
              <div className="h-full w-full border-r border-mineshaft-600 py-[0.85rem] px-5">
                <div className="flex justify-center">
                  {!isSecretEmpty && (
-                    <Tooltip content={isSecretPresent ? "Present secret" : "Missing secret"}>
-                      <FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />
+                    <Tooltip
+                      center
+                      content={
+                        // eslint-disable-next-line no-nested-ternary
+                        isSecretPresent
+                          ? "Present secret"
+                          : isSecretImported
+                          ? "Imported secret"
+                          : "Missing secret"
+                      }
+                    >
+                      <FontAwesomeIcon
+                        // eslint-disable-next-line no-nested-ternary
+                        icon={isSecretPresent ? faCheck : isSecretImported ? faFileImport : faXmark}
+                      />
                    </Tooltip>
                  )}
                  {isSecretEmpty && (
@@ -143,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}`}
@@ -163,6 +188,7 @@ export const SecretOverviewTableRow = ({
                              secretName={secretKey}
                              defaultValue={secret?.value}
                              secretId={secret?.id}
+                              isImportedSecret={isImportedSecret}
                              isCreatable={isCreatable}
                              onSecretDelete={onSecretDelete}
                              onSecretCreate={onSecretCreate}