mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-21 17:28:13 +00:00
improvements: address feedback and additional bugs
This commit is contained in:
Scott Wilson
+28
-22
@@ -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"
|
||||
|
||||
+18
-13
@@ -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
|
||||
|
||||
+18
-13
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user