mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-10 22:28:47 +00:00
improvement: add collapsed environment view to secret overview page and minor ui adjustments
This commit is contained in:
Scott Wilson
@@ -6,6 +6,9 @@ import { faCheckCircle } from "@fortawesome/free-regular-svg-icons";
|
||||
import {
|
||||
faAngleDown,
|
||||
faArrowDown,
|
||||
faArrowLeft,
|
||||
faArrowRight,
|
||||
faArrowRightToBracket,
|
||||
faArrowUp,
|
||||
faFileImport,
|
||||
faFingerprint,
|
||||
@@ -69,7 +72,7 @@ import {
|
||||
PreferenceKey,
|
||||
setUserTablePreference
|
||||
} from "@app/helpers/userTablePreferences";
|
||||
import { useDebounce, usePagination, usePopUp, useResetPageHelper } from "@app/hooks";
|
||||
import { useDebounce, usePagination, usePopUp, useResetPageHelper, useToggle } from "@app/hooks";
|
||||
import {
|
||||
useCreateFolder,
|
||||
useCreateSecretV3,
|
||||
@@ -164,6 +167,18 @@ export const OverviewPage = () => {
|
||||
const [debouncedSearchFilter, setDebouncedSearchFilter] = useDebounce(searchFilter);
|
||||
const secretPath = (routerSearch?.secretPath as string) || "/";
|
||||
const { subscription } = useSubscription();
|
||||
const [collapseEnvironments, setCollapseEnvironments] = useToggle(
|
||||
Boolean(localStorage.getItem("overview-collapse-environments"))
|
||||
);
|
||||
|
||||
const handleToggleNarrowHeader = () => {
|
||||
setCollapseEnvironments.toggle();
|
||||
if (collapseEnvironments) {
|
||||
localStorage.removeItem("overview-collapse-environments");
|
||||
} else {
|
||||
localStorage.setItem("overview-collapse-environments", "true");
|
||||
}
|
||||
};
|
||||
|
||||
const [filter, setFilter] = useState<Filter>(DEFAULT_FILTER_STATE);
|
||||
const [filterHistory, setFilterHistory] = useState<
|
||||
@@ -1173,10 +1188,25 @@ export const OverviewPage = () => {
|
||||
className="thin-scrollbar rounded-b-none"
|
||||
>
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr className="sticky top-0 z-20 border-0">
|
||||
<Th className="sticky left-0 z-20 min-w-[20rem] border-b-0 p-0">
|
||||
<div className="flex items-center border-b border-r border-mineshaft-600 pb-3 pl-3 pr-5 pt-3.5">
|
||||
<THead className={collapseEnvironments ? "h-24" : ""}>
|
||||
<Tr
|
||||
className={twMerge("sticky top-0 z-20 border-0", collapseEnvironments && "h-24")}
|
||||
>
|
||||
<Th
|
||||
className={twMerge(
|
||||
"sticky left-0 z-20 min-w-[20rem] border-b-0 p-0",
|
||||
collapseEnvironments && "h-24"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex h-full border-b border-mineshaft-600 pb-3 pl-3 pr-5",
|
||||
!collapseEnvironments && "border-r pt-3.5"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={twMerge("flex items-center", collapseEnvironments && "mt-auto")}
|
||||
>
|
||||
<Tooltip
|
||||
className="max-w-[20rem] whitespace-nowrap capitalize"
|
||||
content={
|
||||
@@ -1215,6 +1245,25 @@ export const OverviewPage = () => {
|
||||
/>
|
||||
</IconButton>
|
||||
</div>
|
||||
<Tooltip
|
||||
content={
|
||||
collapseEnvironments ? "Expand Environments" : "Collapse Environments"
|
||||
}
|
||||
className="capitalize"
|
||||
>
|
||||
<IconButton
|
||||
ariaLabel="Toggle Environment View"
|
||||
variant="plain"
|
||||
colorSchema="secondary"
|
||||
className="ml-auto mt-auto h-min p-1"
|
||||
onClick={handleToggleNarrowHeader}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={collapseEnvironments ? faArrowLeft : faArrowRight}
|
||||
/>
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
{visibleEnvs?.map(({ name, slug }, index) => {
|
||||
const envSecKeyCount = getEnvSecretKeyCount(slug);
|
||||
@@ -1223,18 +1272,55 @@ export const OverviewPage = () => {
|
||||
|
||||
return (
|
||||
<Th
|
||||
className="min-table-row min-w-[11rem] border-b-0 p-0 text-center"
|
||||
className={twMerge(
|
||||
"min-table-row border-b-0 p-0 text-xs",
|
||||
collapseEnvironments && index === visibleEnvs.length - 1 && "mr-8",
|
||||
collapseEnvironments ? "h-24 w-[1rem]" : "min-w-[11rem] text-center"
|
||||
)}
|
||||
key={`secret-overview-${name}-${index + 1}`}
|
||||
>
|
||||
<div className="flex items-center justify-center border-b border-mineshaft-600 px-5 pb-[0.83rem] pt-3.5">
|
||||
<Tooltip
|
||||
content={collapseEnvironments ? name : ""}
|
||||
side="bottom"
|
||||
sideOffset={-1}
|
||||
className="text-xs normal-case"
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"border-b border-mineshaft-600",
|
||||
collapseEnvironments
|
||||
? "relative h-24 w-[2.9rem]"
|
||||
: "flex items-center justify-center px-5 pb-[0.82rem] pt-3.5",
|
||||
collapseEnvironments &&
|
||||
index === visibleEnvs.length - 1 &&
|
||||
"overflow-clip"
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"border-mineshaft-600",
|
||||
collapseEnvironments
|
||||
? "ml-[0.85rem] h-24 -skew-x-[16rad] transform border-l text-xs"
|
||||
: "flex items-center justify-center"
|
||||
)}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="text-sm font-medium duration-100 hover:text-mineshaft-100"
|
||||
className={twMerge(
|
||||
"duration-100 hover:text-mineshaft-100",
|
||||
collapseEnvironments &&
|
||||
(index === visibleEnvs.length - 1
|
||||
? "bottom-[1.75rem] w-14"
|
||||
: "bottom-10 w-20"),
|
||||
collapseEnvironments
|
||||
? "absolute -rotate-[72.25deg] text-left !text-[12px] font-normal"
|
||||
: "flex items-center text-center text-sm font-medium"
|
||||
)}
|
||||
onClick={() => handleExploreEnvClick(slug)}
|
||||
>
|
||||
{name}
|
||||
<p className="truncate font-medium">{name}</p>
|
||||
</button>
|
||||
{missingKeyCount > 0 && (
|
||||
{!collapseEnvironments && missingKeyCount > 0 && (
|
||||
<Tooltip
|
||||
className="max-w-none lowercase"
|
||||
content={`${missingKeyCount} secrets missing\n compared to other environments`}
|
||||
@@ -1245,6 +1331,7 @@ export const OverviewPage = () => {
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</Th>
|
||||
);
|
||||
})}
|
||||
@@ -1409,16 +1496,40 @@ export const OverviewPage = () => {
|
||||
/>
|
||||
</Td>
|
||||
{visibleEnvs?.map(({ name, slug }) => (
|
||||
<Td key={`explore-${name}-btn`} className="border-0 border-mineshaft-600 p-0">
|
||||
<div className="flex w-full items-center justify-center border-r border-t border-mineshaft-600 px-5 py-2">
|
||||
<Button
|
||||
<Td
|
||||
key={`explore-${name}-btn`}
|
||||
className="border-0 border-r border-mineshaft-600 p-0"
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex w-full items-center justify-center border-t border-mineshaft-600 py-2"
|
||||
)}
|
||||
>
|
||||
{collapseEnvironments ? (
|
||||
<Tooltip className="normal-case" content="Explore Environment">
|
||||
<IconButton
|
||||
ariaLabel="Explore Environment"
|
||||
size="xs"
|
||||
variant="outline_bg"
|
||||
isFullWidth
|
||||
className="mx-auto h-[1.76rem] rounded"
|
||||
onClick={() => handleExploreEnvClick(slug)}
|
||||
>
|
||||
<FontAwesomeIcon icon={faArrowRightToBracket} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Button
|
||||
leftIcon={
|
||||
<FontAwesomeIcon className="mr-1" icon={faArrowRightToBracket} />
|
||||
}
|
||||
variant="outline_bg"
|
||||
size="xs"
|
||||
className="mx-2 w-full"
|
||||
onClick={() => handleExploreEnvClick(slug)}
|
||||
>
|
||||
Explore
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Td>
|
||||
))}
|
||||
|
||||
+1
-1
@@ -36,7 +36,7 @@ export const SecretOverviewDynamicSecretRow = ({
|
||||
isPresent ? "text-green-600" : "text-red-600"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<div className="mx-auto flex w-[0.03rem] justify-center">
|
||||
<FontAwesomeIcon
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
icon={isPresent ? faCheck : faXmark}
|
||||
|
||||
+1
-1
@@ -70,7 +70,7 @@ export const SecretOverviewFolderRow = ({
|
||||
isPresent ? "text-green-600" : "text-red-600"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<div className="mx-auto flex w-[0.03rem] justify-center">
|
||||
<FontAwesomeIcon
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
icon={isPresent ? faCheck : faXmark}
|
||||
|
||||
+1
-1
@@ -94,7 +94,7 @@ export const SecretOverviewSecretRotationRow = ({
|
||||
isPresent ? "text-green-600" : "text-red-600"
|
||||
)}
|
||||
>
|
||||
<div className="flex justify-center">
|
||||
<div className="mx-auto flex w-[0.03rem] justify-center">
|
||||
<FontAwesomeIcon
|
||||
// eslint-disable-next-line no-nested-ternary
|
||||
icon={isPresent ? faCheck : faXmark}
|
||||
|
||||
+3
-3
@@ -1,8 +1,8 @@
|
||||
import { subject } from "@casl/ability";
|
||||
import { faCircle } from "@fortawesome/free-regular-svg-icons";
|
||||
import {
|
||||
faAngleDown,
|
||||
faCheck,
|
||||
faCircle,
|
||||
faCodeBranch,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
@@ -145,14 +145,14 @@ export const SecretOverviewTableRow = ({
|
||||
<Td
|
||||
key={`sec-overview-${slug}-${i + 1}-value`}
|
||||
className={twMerge(
|
||||
"px-0 py-0 group-hover:bg-mineshaft-700",
|
||||
"border-r border-mineshaft-600 px-0 py-3 group-hover:bg-mineshaft-700",
|
||||
isFormExpanded && "border-t-2 border-mineshaft-500",
|
||||
(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 px-5 py-[0.85rem]">
|
||||
<div className="mx-auto flex w-[0.03rem] justify-center">
|
||||
<div className="flex justify-center">
|
||||
{!isSecretEmpty && (
|
||||
<Tooltip
|
||||
|
||||
Reference in New Issue
Block a user