awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-05 12:26:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor style changes

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-07-27 12:37:18 -07:00
parent f31e8ddfe9
commit b7c7544baf
4 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/SecretOverviewPage/SecretOverviewPage.tsx
+6 -5
View File
@@ -260,12 +260,12 @@ export const SecretOverviewPage = () => {
/> />
</div> </div>
</div> </div>
<div className="thin-scrollbar mt-6" ref={parentTableRef}> <div className="thin-scrollbar mt-4 max-h-[calc(100vh-250px)] overflow-y-auto" ref={parentTableRef}>
<TableContainer> <TableContainer>
<Table> <Table>
<THead> <THead className="sticky top-0">
<Tr> <Tr>
<Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Secret</Th> <Th className="sticky left-0 z-10 min-w-[20rem] bg-clip-padding">Name</Th>
{userAvailableEnvs?.map(({ name, slug }, index) => { {userAvailableEnvs?.map(({ name, slug }, index) => {
const envSecKeyCount = getEnvSecretKeyCount(slug); const envSecKeyCount = getEnvSecretKeyCount(slug);
const missingKeyCount = secKeys.length - envSecKeyCount; const missingKeyCount = secKeys.length - envSecKeyCount;
@@ -281,7 +281,7 @@ export const SecretOverviewPage = () => {
className="max-w-none lowercase" className="max-w-none lowercase"
content={`${missingKeyCount} secrets missing\n compared to other environments`} content={`${missingKeyCount} secrets missing\n compared to other environments`}
> >
<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"> <div className="ml-2 h-[1.1rem] font-medium flex cursor-default items-center justify-center rounded-sm bg-red-600 border border-red-400 p-1 text-xs text-bunker-100">
<span className="text-bunker-100">{missingKeyCount}</span> <span className="text-bunker-100">{missingKeyCount}</span>
</div> </div>
</Tooltip> </Tooltip>
@@ -323,13 +323,14 @@ export const SecretOverviewPage = () => {
/> />
))} ))}
<Tr> <Tr>
<Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" /> <Td className="fixed left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding" />
{userAvailableEnvs.map(({ name, slug }) => ( {userAvailableEnvs.map(({ name, slug }) => (
<Td key={`explore-${name}-btn`} className=" border-x border-mineshaft-700"> <Td key={`explore-${name}-btn`} className=" border-x border-mineshaft-700">
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<Button <Button
size="xs" size="xs"
variant="outline_bg" variant="outline_bg"
isFullWidth
onClick={() => handleExploreEnvClick(slug)} onClick={() => handleExploreEnvClick(slug)}
> >
Explore Explore
frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
+5 -5
View File
@@ -19,9 +19,9 @@ export const SecretOverviewFolderRow = ({
}: Props) => { }: Props) => {
return ( return (
<Tr isHoverable isSelectable className="group" onClick={() => onClick(folderName)}> <Tr isHoverable isSelectable className="group" onClick={() => onClick(folderName)}>
<Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-3 group-hover:bg-mineshaft-600"> <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-2.5 group-hover:bg-mineshaft-700">
<div className="flex items-center space-x-4"> <div className="flex items-center space-x-5">
<div className="text-primary"> <div className="text-yellow-700">
<FontAwesomeIcon icon={faFolder} /> <FontAwesomeIcon icon={faFolder} />
</div> </div>
<div>{folderName}</div> <div>{folderName}</div>
@@ -33,8 +33,8 @@ export const SecretOverviewFolderRow = ({
<Td <Td
key={`sec-overview-${slug}-${i + 1}-folder`} key={`sec-overview-${slug}-${i + 1}-folder`}
className={twMerge( className={twMerge(
"border-x border-mineshaft-700 py-3", "border-x border-mineshaft-700 py-3 group-hover:bg-mineshaft-700",
isPresent ? "text-green-600" : "text-red-800" isPresent ? "text-green-600" : "text-red-600"
)} )}
> >
<div className="flex justify-center"> <div className="flex justify-center">
frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
+2 -2
View File
@@ -85,8 +85,8 @@ export const SecretEditRow = ({
}; };
return ( return (
<div className="group flex w-full cursor-text items-start space-x-2"> <div className="group flex w-full cursor-text items-start space-x-2 items-center">
<div className="flex-grow border-r border-r-mineshaft-600 pr-2"> <div className="flex-grow border-r border-r-mineshaft-600 pr-2 pl-1">
<Controller <Controller
control={control} control={control}
name="value" name="value"
frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+32 -28
View File
@@ -1,4 +1,5 @@
import { faCheck, faEye, faEyeSlash, faXmark } from "@fortawesome/free-solid-svg-icons"; import { faCircle } from "@fortawesome/free-regular-svg-icons";
import { faCheck, faEye, faEyeSlash, faKey, faXmark } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
@@ -34,22 +35,31 @@ export const SecretOverviewTableRow = ({
return ( return (
<> <>
<Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group"> <Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
<Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-3 group-hover:bg-mineshaft-600"> <Td className="sticky left-0 z-10 border-x border-mineshaft-700 bg-mineshaft-800 bg-clip-padding py-2.5 group-hover:bg-mineshaft-700">
{secretKey} <div className="flex items-center space-x-5">
<div className="text-blue-300/70">
<FontAwesomeIcon icon={faKey} />
</div>
<div>{secretKey}</div>
</div>
</Td> </Td>
{environments.map(({ slug }, i) => { {environments.map(({ slug }, i) => {
const secret = getSecretByKey(slug, secretKey); const secret = getSecretByKey(slug, secretKey);
const isSecretPresent = Boolean(secret); const isSecretPresent = Boolean(secret);
const isSecretEmpty = secret?.value === "";
return ( return (
<Td <Td
key={`sec-overview-${slug}-${i + 1}-value`} key={`sec-overview-${slug}-${i + 1}-value`}
className={twMerge( className={twMerge(
"border-x border-mineshaft-700 py-3", "border-x border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
isSecretPresent ? "text-green-600" : "text-red-800" isSecretPresent && !isSecretEmpty ? "text-green-600" : "",
isSecretPresent && isSecretEmpty ? "text-yellow" : "",
!isSecretPresent && !isSecretEmpty ? "text-red-600" : ""
)} )}
> >
<div className="flex justify-center"> <div className="flex justify-center">
<FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} /> {!isSecretEmpty && <FontAwesomeIcon icon={!isSecretPresent ? faCheck : faXmark} />}
{isSecretEmpty && <FontAwesomeIcon icon={faCircle} />}
</div> </div>
</Td> </Td>
); );
@@ -59,7 +69,7 @@ export const SecretOverviewTableRow = ({
<Tr> <Tr>
<Td colSpan={totalCols}> <Td colSpan={totalCols}>
<div <div
className="rounded-md bg-bunker-700 p-4 pb-6" className="rounded-md bg-bunker-700 p-2"
style={{ style={{
width: `calc(${expandableColWidth}px - 2rem)`, width: `calc(${expandableColWidth}px - 2rem)`,
position: "sticky", position: "sticky",
@@ -67,33 +77,30 @@ export const SecretOverviewTableRow = ({
right: "1.25rem" right: "1.25rem"
}} }}
> >
<div className="mb-4 flex items-center justify-between">
<div className="text-lg font-medium">Secrets</div>
<div>
<Button
variant="outline_bg"
className="p-1"
leftIcon={<FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />}
onClick={() => setIsSecretVisible.toggle()}
>
{isSecretVisible ? "Hide" : "Reveal"}
</Button>
</div>
</div>
<TableContainer> <TableContainer>
<table className="secret-table"> <table className="secret-table">
<thead> <thead>
<tr> <tr className="h-10 border-b-2 border-mineshaft-600">
<th <th
style={{ padding: "0.5rem 1rem" }} style={{ padding: "0.5rem 1rem" }}
className="min-table-row min-w-[11rem]" className="min-table-row min-w-[11rem]"
> >
Environment Environment
</th> </th>
<th style={{ padding: "0.5rem 1rem" }}>Value</th> <th style={{ padding: "0.5rem 1rem" }} className="border-none">Value</th>
<div className="absolute top-0 right-0 w-min ml-auto mt-1 mr-1">
<Button
variant="outline_bg"
className="p-1"
leftIcon={<FontAwesomeIcon icon={isSecretVisible ? faEyeSlash : faEye} />}
onClick={() => setIsSecretVisible.toggle()}
>
{isSecretVisible ? "Hide Values" : "Reveal Values"}
</Button>
</div>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className="border-t-2 border-mineshaft-600">
{environments.map(({ name, slug }) => { {environments.map(({ name, slug }) => {
const secret = getSecretByKey(slug, secretKey); const secret = getSecretByKey(slug, secretKey);
const isCreatable = !secret; const isCreatable = !secret;
@@ -104,12 +111,9 @@ export const SecretOverviewTableRow = ({
className="hover:bg-mineshaft-700" className="hover:bg-mineshaft-700"
> >
<td className="flex" style={{ padding: "0.25rem 1rem" }}> <td className="flex" style={{ padding: "0.25rem 1rem" }}>
<div className="flex h-10 items-center">{name}</div> <div className="flex h-8 items-center">{name}</div>
</td> </td>
<td <td className="h-8 col-span-2 w-full">
className="h-10 border-l border-mineshaft-600"
style={{ padding: "0.5rem 1rem" }}
>
<SecretEditRow <SecretEditRow
isVisible={isSecretVisible} isVisible={isSecretVisible}
secretName={secretKey} secretName={secretKey}