awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +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

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

@@ -260,12 +260,12 @@ export const SecretOverviewPage = () => {
/>
</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>
<Table>
<THead>
<THead className="sticky top-0">
<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) => {
const envSecKeyCount = getEnvSecretKeyCount(slug);
const missingKeyCount = secKeys.length - envSecKeyCount;
@@ -281,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 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>
</div>
</Tooltip>
@@ -323,13 +323,14 @@ export const SecretOverviewPage = () => {
/>
))}
<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 }) => (
<Td key={`explore-${name}-btn`} className=" border-x border-mineshaft-700">
<div className="flex items-center justify-center">
<Button
size="xs"
variant="outline_bg"
isFullWidth
onClick={() => handleExploreEnvClick(slug)}
>
Explore

10
frontend/src/views/SecretOverviewPage/components/SecretOverviewFolderRow/SecretOverviewFolderRow.tsx
View File

@@ -19,9 +19,9 @@ export const SecretOverviewFolderRow = ({
}: Props) => {
return (
<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">
<div className="flex items-center space-x-4">
<div className="text-primary">
<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-5">
<div className="text-yellow-700">
<FontAwesomeIcon icon={faFolder} />
</div>
<div>{folderName}</div>
@@ -33,8 +33,8 @@ export const SecretOverviewFolderRow = ({
<Td
key={`sec-overview-${slug}-${i + 1}-folder`}
className={twMerge(
"border-x border-mineshaft-700 py-3",
isPresent ? "text-green-600" : "text-red-800"
"border-x border-mineshaft-700 py-3 group-hover:bg-mineshaft-700",
isPresent ? "text-green-600" : "text-red-600"
)}
>
<div className="flex justify-center">

4
frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretEditRow.tsx
View File

@@ -85,8 +85,8 @@ export const SecretEditRow = ({
};
return (
<div className="group flex w-full cursor-text items-start space-x-2">
<div className="flex-grow border-r border-r-mineshaft-600 pr-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 pl-1">
<Controller
control={control}
name="value"

60
frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
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 { twMerge } from "tailwind-merge";
@@ -34,22 +35,31 @@ export const SecretOverviewTableRow = ({
return (
<>
<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">
{secretKey}
<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-5">
<div className="text-blue-300/70">
<FontAwesomeIcon icon={faKey} />
</div>
<div>{secretKey}</div>
</div>
</Td>
{environments.map(({ slug }, i) => {
const secret = getSecretByKey(slug, secretKey);
const isSecretPresent = Boolean(secret);
const isSecretEmpty = secret?.value === "";
return (
<Td
key={`sec-overview-${slug}-${i + 1}-value`}
className={twMerge(
"border-x border-mineshaft-700 py-3",
isSecretPresent ? "text-green-600" : "text-red-800"
"border-x border-mineshaft-600 py-3 group-hover:bg-mineshaft-700",
isSecretPresent && !isSecretEmpty ? "text-green-600" : "",
isSecretPresent && isSecretEmpty ? "text-yellow" : "",
!isSecretPresent && !isSecretEmpty ? "text-red-600" : ""
)}
>
<div className="flex justify-center">
<FontAwesomeIcon icon={isSecretPresent ? faCheck : faXmark} />
{!isSecretEmpty && <FontAwesomeIcon icon={!isSecretPresent ? faCheck : faXmark} />}
{isSecretEmpty && <FontAwesomeIcon icon={faCircle} />}
</div>
</Td>
);
@@ -59,7 +69,7 @@ export const SecretOverviewTableRow = ({
<Tr>
<Td colSpan={totalCols}>
<div
className="rounded-md bg-bunker-700 p-4 pb-6"
className="rounded-md bg-bunker-700 p-2"
style={{
width: `calc(${expandableColWidth}px - 2rem)`,
position: "sticky",
@@ -67,33 +77,30 @@ export const SecretOverviewTableRow = ({
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>
<table className="secret-table">
<thead>
<tr>
<tr className="h-10 border-b-2 border-mineshaft-600">
<th
style={{ padding: "0.5rem 1rem" }}
className="min-table-row min-w-[11rem]"
>
Environment
</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>
</thead>
<tbody>
<tbody className="border-t-2 border-mineshaft-600">
{environments.map(({ name, slug }) => {
const secret = getSecretByKey(slug, secretKey);
const isCreatable = !secret;
@@ -104,12 +111,9 @@ export const SecretOverviewTableRow = ({
className="hover:bg-mineshaft-700"
>
<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
className="h-10 border-l border-mineshaft-600"
style={{ padding: "0.5rem 1rem" }}
>
<td className="h-8 col-span-2 w-full">
<SecretEditRow
isVisible={isSecretVisible}
secretName={secretKey}