synced/infisical
1
0
Fork 0
mirror of https://github.com/Infisical/infisical.git synced 2025-03-27 09:40:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: added width for expandable table and secret missing count ui fix

Browse Source
This commit is contained in:
akhilmhdh
2023-07-27 20:57:38 +05:30
parent 7bbbdcc58b
commit f31e8ddfe9
2 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useRouter } from "next/router";
import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
@ -39,6 +39,26 @@ export const SecretOverviewPage = () => {
const { createNotification } = useNotificationContext();
const router = useRouter();
// this is to set expandable table width
// coz when overflow the table goes to the right
const parentTableRef = useRef<HTMLTableElement>(null);
const [expandableTableWidth, setExpandableTableWidth] = useState(0);
useEffect(() => {
const handleParentTableWidthResize = () => {
setExpandableTableWidth(parentTableRef.current?.clientWidth || 0);
};
window.addEventListener("resize", handleParentTableWidthResize);
return () => window.removeEventListener("resize", handleParentTableWidthResize);
}, []);
useEffect(() => {
if (parentTableRef.current) {
setExpandableTableWidth(parentTableRef.current.clientWidth);
}
}, [parentTableRef.current]);
const { currentWorkspace, isLoading: isWorkspaceLoading } = useWorkspace();
const { currentOrg } = useOrganization();
const workspaceId = currentWorkspace?._id as string;
@ -240,12 +260,12 @@ export const SecretOverviewPage = () => {
/>
</div>
</div>
<div className="mt-6">
<div className="thin-scrollbar mt-6" ref={parentTableRef}>
<TableContainer>
<Table>
<THead>
<Tr>
<Th className="sticky left-0 z-10 bg-clip-padding">Secret</Th>
<Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Secret</Th>
{userAvailableEnvs?.map(({ name, slug }, index) => {
const envSecKeyCount = getEnvSecretKeyCount(slug);
const missingKeyCount = secKeys.length - envSecKeyCount;
@ -261,7 +281,7 @@ export const SecretOverviewPage = () => {
className="max-w-none lowercase"
content={`${missingKeyCount} secrets missing\n compared to other environments`}
>
<div className="ml-2 flex h-5 w-5 cursor-default items-center justify-center rounded-sm bg-red-700 text-xs text-bunker-100">
<div className="ml-2 flex h-5 cursor-default items-center justify-center rounded-sm bg-red-700 p-1 text-xs text-bunker-100">
<span className="text-bunker-100">{missingKeyCount}</span>
</div>
</Tooltip>
@ -299,10 +319,11 @@ export const SecretOverviewPage = () => {
environments={userAvailableEnvs}
secretKey={key}
getSecretByKey={getSecretByKey}
expandableColWidth={expandableTableWidth}
/>
))}
<Tr>
<Td />
<Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" />
{userAvailableEnvs.map(({ name, slug }) => (
<Td key={`explore-${name}-btn`} className=" border-x border-mineshaft-700">
<div className="flex items-center justify-center">

14
frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
View File

@ -11,6 +11,7 @@ import { SecretEditRow } from "./SecretEditRow";
type Props = {
secretKey: string;
environments: { name: string; slug: string }[];
expandableColWidth: number;
getSecretByKey: (slug: string, key: string) => DecryptedSecret | undefined;
onSecretCreate: (env: string, key: string, value: string) => Promise<void>;
onSecretUpdate: (env: string, key: string, value: string) => Promise<void>;
@ -23,7 +24,8 @@ export const SecretOverviewTableRow = ({
getSecretByKey,
onSecretUpdate,
onSecretCreate,
onSecretDelete
onSecretDelete,
expandableColWidth
}: Props) => {
const [isFormExpanded, setIsFormExpanded] = useToggle();
const totalCols = environments.length + 1; // secret key row
@ -56,7 +58,15 @@ export const SecretOverviewTableRow = ({
{isFormExpanded && (
<Tr>
<Td colSpan={totalCols}>
<div className="rounded-md bg-bunker-700 p-4 pb-6">
<div
className="rounded-md bg-bunker-700 p-4 pb-6"
style={{
width: `calc(${expandableColWidth}px - 2rem)`,
position: "sticky",
left: "1.25rem",
right: "1.25rem"
}}
>
<div className="mb-4 flex items-center justify-between">
<div className="text-lg font-medium">Secrets</div>
<div>