improvements: address feedback and additional bugs

2026-10-20 22:17:52 +00:00 · 2025-08-28 15:10:28 -07:00
parent 49b5ab8126
commit e7138f1be9
13 changed files with 200 additions and 75 deletions
@@ -66,6 +66,7 @@ import { CommitForm } from "./components/CommitForm";
 import { CreateSecretForm } from "./components/CreateSecretForm";
 import { DynamicSecretListView } from "./components/DynamicSecretListView";
 import { EnvironmentTabs } from "./components/EnvironmentTabs";
+import { FolderBreadCrumbs } from "./components/FolderBreadCrumbs";
 import { FolderListView } from "./components/FolderListView";
 import { PitDrawer } from "./components/PitDrawer";
 import { SecretDropzone } from "./components/SecretDropzone";
@@ -107,7 +108,7 @@ const Page = () => {
  const { permission } = useProjectPermission();
  const { mutateAsync: createCommit } = useCreateCommit();

-  const tableRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);

  const [isVisible, setIsVisible] = useState(false);
  const { isBatchMode, pendingChanges } = useBatchMode();
@@ -251,7 +252,8 @@ const Page = () => {
  const {
    data,
    isPending: isDetailsLoading,
-    isFetching: isDetailsFetching
+    isFetching: isDetailsFetching,
+    isFetched
  } = useGetProjectSecretsDetails({
    environment,
    projectId: workspaceId,
@@ -272,6 +274,18 @@ const Page = () => {
    tags: filter.tags
  });

+  useEffect(() => {
+    // if switching tabs in a folder path that doesn't exist in a separate env we navigate to the root
+    if (!data && isFetched) {
+      navigate({
+        search: (prev) => ({
+          ...prev,
+          secretPath: "/"
+        })
+      });
+    }
+  }, [data, isFetched]);
+
  const {
    imports,
    folders,
@@ -493,7 +507,8 @@ const Page = () => {
    minWidth: 100,
    maxWidth: tableRef.current
      ? tableRef.current.clientWidth - 148 // ensure value column can't collapse completely
-      : 800
+      : 800,
+    ref: tableRef
  });

  useEffect(() => {
@@ -767,6 +782,7 @@ const Page = () => {
        }
      />
      <SecretV2MigrationSection />
+      <FolderBreadCrumbs secretPath={secretPath} />
      <EnvironmentTabs secretPath={secretPath} />
      {!isRollbackMode ? (
        <>
@@ -86,7 +86,6 @@ const DEFAULT_FILTER_STATE = {
  [RowType.SecretRotation]: false
 };

-const TABLE_WIDTH_OFFSET = 17;
 const COL_WIDTH_OFFSET = 220;

 export const CompareEnvironments = ({ secretPath }: Props) => {
@@ -190,7 +189,6 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
    totalSecretCount,
    totalDynamicSecretCount,
    totalSecretRotationCount,
-    totalImportCount,
    totalCount = 0,
    totalUniqueFoldersInPage,
    totalUniqueSecretsInPage,
@@ -241,15 +239,15 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
  );

  const [tableWidth, setTableWidth] = useState(0);
-
-  const tableRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);

  const { handleMouseDown, isResizing, colWidth } = useResizableColWidth({
    initialWidth: 320,
    minWidth: 160,
    maxWidth: tableRef.current
      ? tableRef.current.clientWidth - COL_WIDTH_OFFSET // ensure value column can't collapse completely
-      : 800
+      : 800,
+    ref: tableRef
  });

  const handleToggleRowType = useCallback(
@@ -268,19 +266,21 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
  const isTableFiltered = isFilteredByResources;

  useEffect(() => {
-    const resizeObserver = new ResizeObserver((entries) => {
-      // eslint-disable-next-line no-restricted-syntax
-      for (const entry of entries) {
-        setTableWidth(entry.contentRect.width - TABLE_WIDTH_OFFSET);
-      }
-    });
+    const element = tableRef.current;
+    if (!element) return;

-    if (tableRef.current) {
-      resizeObserver.observe(tableRef.current);
-    }
+    const handleResize = () => {
+      setTableWidth(element.clientWidth - 1);
+    };

-    return () => resizeObserver.disconnect();
-  }, []);
+    const resizeObserver = new ResizeObserver(handleResize);
+    resizeObserver.observe(element);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [tableRef]);

  return (
    // scott: this is reverse to fix z-indexing bug of dropdown with sticky table cols; couldn't resolve with flex-col
@@ -292,7 +292,6 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
              dynamicSecretCount={totalDynamicSecretCount}
              secretCount={totalSecretCount}
              folderCount={totalFolderCount}
-              importCount={totalImportCount}
              secretRotationCount={totalSecretRotationCount}
            />
          }
@@ -304,8 +303,9 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
          onChangePerPage={handlePerPageChange}
        />
      )}
-      <div ref={tableRef} className="thin-scrollbar flex flex-1 flex-col overflow-y-auto">
+      <div className="thin-scrollbar flex flex-1 flex-col overflow-y-auto">
        <TableContainer
+          ref={tableRef}
          className={twMerge(
            "mt-4 flex flex-1 flex-col border-mineshaft-500 bg-mineshaft-700",
            !isTableEmpty && "rounded-b-none"
@@ -347,11 +347,11 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                      <div className="pointer-events-none absolute -right-[0.02rem] top-[0.67rem] z-30">
                        <div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
                      </div>
-                      <div className="flex h-full items-center border-b-2 border-r border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 px-4 py-2.5">
+                      <div className="flex h-full items-center border-b-2 border-r border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 px-4 py-2.5 text-sm normal-case">
                        Name
                        <IconButton
                          variant="plain"
-                          className="ml-2"
+                          className="ml-1 mt-[0.1rem]"
                          ariaLabel="sort"
                          onClick={() =>
                            setOrderDirection((prev) =>
@@ -362,6 +362,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                          }
                        >
                          <FontAwesomeIcon
+                            className="h-3"
                            icon={orderDirection === "asc" ? faArrowDown : faArrowUp}
                          />
                        </IconButton>
@@ -380,7 +381,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                      >
                        <div
                          className={twMerge(
-                            "flex h-full w-full items-center justify-center gap-x-2 border-b-2 border-mineshaft-500 bg-mineshaft-700 p-0 px-4 py-3 text-center",
+                            "flex h-full w-full items-center justify-center gap-x-2 border-b-2 border-mineshaft-500 bg-mineshaft-700 p-0 px-4 py-2.5 text-center text-sm normal-case",
                            index < compareEnvironments.length - 1 && "border-r"
                          )}
                        >
@@ -388,7 +389,12 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
                          {missingKeyCount > 0 && (
                            <Tooltip
                              className="max-w-none lowercase"
-                              content={`${missingKeyCount} secrets missing\n compared to other environments`}
+                              content={
+                                <>
+                                  {missingKeyCount} secret{missingKeyCount > 1 ? "s" : ""} missing
+                                  compared to other environments on this page
+                                </>
+                              }
                            >
                              <Badge
                                variant="primary"
@@ -2,7 +2,7 @@ import { faEye, faEyeSlash, faInfoCircle, faRotate } from "@fortawesome/free-sol
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";

-import { Button, TableContainer, Tag, Td, Tooltip, Tr } from "@app/components/v2";
+import { IconButton, TableContainer, Tag, Td, Tooltip, Tr } from "@app/components/v2";
 import { Blur } from "@app/components/v2/Blur";
 import { InfisicalSecretInput } from "@app/components/v2/InfisicalSecretInput";
 import { SECRET_ROTATION_MAP } from "@app/helpers/secretRotationsV2";
@@ -70,13 +70,13 @@ export const SecretRotationRow = ({
              <Td
                colSpan={totalCols}
                style={{ minWidth: tableWidth, maxWidth: tableWidth }}
-                className="sticky left-0 bg-mineshaft-800 bg-clip-padding px-0 py-0"
+                className="sticky left-0 bg-clip-padding px-0 py-0"
              >
                <div
                  style={{ minWidth: tableWidth, maxWidth: tableWidth }}
-                  className="sticky left-0 bg-mineshaft-800 bg-clip-padding px-0 py-0"
+                  className="sticky left-0 bg-clip-padding px-0 py-0"
                >
-                  <div className="flex !h-[40px] items-center justify-between gap-x-2 px-4">
+                  <div className="flex !h-[40px] items-center justify-between gap-x-2 bg-mineshaft-800 px-4">
                    <div className="w-full">
                      <div className="flex w-full flex-wrap items-center gap-x-2.5">
                        <span>{envName}</span>
@@ -95,17 +95,22 @@ export const SecretRotationRow = ({
                        )}
                      </div>
                    </div>
-                    <Button
-                      variant="plain"
-                      colorSchema="secondary"
-                      leftIcon={<FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />}
-                      onClick={() => setIsSecretVisible.toggle()}
+                    <Tooltip
+                      side="left"
+                      content={isSecretVisible ? "Hide Values" : "Reveal Values"}
                    >
-                      {isSecretVisible ? "Hide Values" : "Reveal Values"}
-                    </Button>
+                      <IconButton
+                        variant="plain"
+                        colorSchema="secondary"
+                        ariaLabel={isSecretVisible ? "Hide Values" : "Reveal Values"}
+                        onClick={() => setIsSecretVisible.toggle()}
+                      >
+                        <FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />
+                      </IconButton>
+                    </Tooltip>
                  </div>
                  <TableContainer className="rounded-none border-0">
-                    <table className="secret-table w-full border-b-0">
+                    <table className="secret-table w-full border-b-0 !bg-mineshaft-900">
                      <tbody className="!last:border-b-0 w-full border-t-2 border-mineshaft-600">
                        {secrets.map((secret, index) => {
                          return (
@@ -119,7 +124,7 @@ export const SecretRotationRow = ({
                              // eslint-disable-next-line react/no-array-index-key
                              key={`rotation-secret-${secretRotation.id}-${index}`}
                            >
-                              <tr className="hover:bg-mineshaft-700/70">
+                              <tr className="hover:bg-mineshaft-800/50">
                                <td
                                  style={{
                                    width: colWidth
@@ -9,7 +9,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import { Button, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
+import { IconButton, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
 import { useProjectPermission } from "@app/context";
 import {
  ProjectPermissionSecretActions,
@@ -122,16 +122,16 @@ export const SecretRow = ({
          <Td
            colSpan={totalCols}
            style={{ minWidth: tableWidth, maxWidth: tableWidth }}
-            className="sticky left-0 bg-mineshaft-800 bg-clip-padding px-0 py-0"
+            className="sticky left-0 bg-clip-padding px-0 py-0"
          >
            <div
              style={{ minWidth: tableWidth, maxWidth: tableWidth }}
-              className="sticky left-0 bg-mineshaft-800 bg-clip-padding px-0 py-0"
+              className="sticky left-0 bg-clip-padding px-0 py-0"
            >
              <TableContainer className="rounded-none border-0">
-                <table className="secret-table">
+                <table className="secret-table bg-mineshaft-900">
                  <thead>
-                    <tr className="h-10 border-b-2 border-mineshaft-600">
+                    <tr className="h-10 border-b-2 border-mineshaft-600 bg-mineshaft-800">
                      <th
                        style={{
                          width: colWidth
@@ -143,15 +143,20 @@ export const SecretRow = ({
                      <th style={{ padding: "0.5rem 1rem" }} className="border-none">
                        Value
                      </th>
-                      <div className="absolute right-3 top-[1px] ml-auto mr-1 mt-1 w-min">
-                        <Button
-                          variant="plain"
-                          colorSchema="secondary"
-                          leftIcon={<FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />}
-                          onClick={() => setIsSecretVisible.toggle()}
+                      <div className="absolute right-3 top-[4px] ml-auto mr-1 mt-1 w-min">
+                        <Tooltip
+                          side="left"
+                          content={isSecretVisible ? "Hide Values" : "Reveal Values"}
                        >
-                          {isSecretVisible ? "Hide Values" : "Reveal Values"}
-                        </Button>
+                          <IconButton
+                            variant="plain"
+                            colorSchema="secondary"
+                            ariaLabel={isSecretVisible ? "Hide Values" : "Reveal Values"}
+                            onClick={() => setIsSecretVisible.toggle()}
+                          >
+                            <FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />
+                          </IconButton>
+                        </Tooltip>
                      </div>
                    </tr>
                  </thead>
@@ -150,7 +150,7 @@ export const EnvironmentTabs = ({ secretPath }: Props) => {
              <DropdownMenuContent
                className="thin-scrollbar max-h-[70vh] overflow-y-auto"
                sideOffset={2}
-                align="end"
+                align="center"
              >
                <DropdownMenuLabel>Environments</DropdownMenuLabel>
                <div className="thin-scrollbar max-h-[40vh] overflow-auto">
@@ -0,0 +1,52 @@
+import { faFolderOpen } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useNavigate } from "@tanstack/react-router";
+
+type Props = {
+  secretPath: string;
+};
+
+export const FolderBreadCrumbs = ({ secretPath = "/" }: Props) => {
+  const navigate = useNavigate({
+    from: "/projects/secret-management/$projectId/secrets/$envSlug"
+  });
+
+  const onFolderCrumbClick = (index: number) => {
+    const newSecPath = `/${secretPath.split("/").filter(Boolean).slice(0, index).join("/")}`;
+    if (secretPath === newSecPath) return;
+    navigate({
+      search: (prev) => ({ ...prev, secretPath: newSecPath })
+    });
+  };
+
+  return (
+    <div className="mb-3 flex flex-wrap items-center gap-x-2 gap-y-3">
+      <div
+        className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pl-5 pr-2 text-sm hover:bg-mineshaft-600"
+        onClick={() => onFolderCrumbClick(0)}
+        onKeyDown={() => null}
+        role="button"
+        tabIndex={0}
+      >
+        <FontAwesomeIcon icon={faFolderOpen} className="text-primary-700" />
+      </div>
+      {(secretPath || "")
+        .split("/")
+        .filter(Boolean)
+        .map((path, index, arr) => (
+          <div
+            key={`secret-path-${index + 1}`}
+            className={`breadcrumb relative z-20 ${
+              index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
+            } border-solid border-mineshaft-600 py-1 pl-5 pr-2 text-sm text-mineshaft-200`}
+            onClick={() => onFolderCrumbClick(index + 1)}
+            onKeyDown={() => null}
+            role="button"
+            tabIndex={0}
+          >
+            {path}
+          </div>
+        ))}
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { FolderBreadCrumbs } from "./FolderBreadCrumbs";
				`@@ -0,0 +1 @@`
				`export { FolderBreadCrumbs } from "./FolderBreadCrumbs";`