mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-20 23:16:55 +00:00
feat: upgraded to tw v4
This commit is contained in:
@@ -69,16 +69,16 @@ export const SecretSyncImportStatusBadge = ({ secretSync, className, mini }: Pro
|
||||
label = "Failed to Import Secrets";
|
||||
icon = faTriangleExclamation;
|
||||
tooltipContent = (
|
||||
<div className="flex flex-col gap-2 whitespace-normal py-1">
|
||||
<div className="flex flex-col gap-2 py-1 whitespace-normal">
|
||||
{failureMessage && (
|
||||
<div>
|
||||
<div className="mb-2 flex self-start text-red">
|
||||
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
|
||||
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
|
||||
<div className="text-xs">
|
||||
{mini ? "Failed to Import Secrets" : "Failure Reason"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
|
||||
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -29,7 +29,7 @@ export const SecretSyncModalHeader = ({ destination, isConfigured }: Props) => {
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
|
||||
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
|
||||
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
|
||||
<span>Docs</span>
|
||||
<FontAwesomeIcon
|
||||
icon={faArrowUpRightFromSquare}
|
||||
|
||||
@@ -69,16 +69,16 @@ export const SecretSyncRemoveStatusBadge = ({ secretSync, className, mini }: Pro
|
||||
label = "Failed to Remove Secrets";
|
||||
icon = faTriangleExclamation;
|
||||
tooltipContent = (
|
||||
<div className="flex flex-col gap-2 whitespace-normal py-1">
|
||||
<div className="flex flex-col gap-2 py-1 whitespace-normal">
|
||||
{failureMessage && (
|
||||
<div>
|
||||
<div className="mb-2 flex self-start text-red">
|
||||
<FontAwesomeIcon icon={faXmark} className="ml-1 pr-1.5 pt-0.5 text-sm" />
|
||||
<FontAwesomeIcon icon={faXmark} className="ml-1 pt-0.5 pr-1.5 text-sm" />
|
||||
<div className="text-xs">
|
||||
{mini ? "Failed to Remove Secrets" : "Failure Reason"}
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
|
||||
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -58,7 +58,7 @@ export const SecretSyncSelect = ({ onSelect }: Props) => {
|
||||
placeholder="Search options..."
|
||||
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
|
||||
/>
|
||||
<div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
|
||||
<div className="grid h-118 grid-cols-4 content-start gap-2">
|
||||
{filteredOptions.slice(offset, perPage * page)?.map(({ destination, enterprise }) => {
|
||||
const { image, name } = SECRET_SYNC_MAP[destination];
|
||||
return (
|
||||
|
||||
@@ -138,7 +138,7 @@ export const CreateSecretSyncForm = ({
|
||||
if (showConfirmation)
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col rounded-sm border border-l-[2px] border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
|
||||
<div className="flex flex-col rounded-xs border border-l-2 border-mineshaft-600 border-l-primary bg-mineshaft-700/80 px-4 py-3">
|
||||
<div className="mb-1 flex items-center text-sm">
|
||||
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
|
||||
Secret Sync Behavior
|
||||
@@ -185,7 +185,7 @@ export const CreateSecretSyncForm = ({
|
||||
setSelectedTabIndex((prev) => (isEnabled ? index : prev));
|
||||
}}
|
||||
className={({ selected }) =>
|
||||
`w-30 -mb-[0.14rem] ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-none disabled:opacity-60 ${
|
||||
`-mb-[0.14rem] w-30 ${index > selectedTabIndex ? "opacity-30" : ""} px-4 py-2 text-sm font-medium outline-hidden disabled:opacity-60 ${
|
||||
selected
|
||||
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
|
||||
: "text-bunker-300"
|
||||
|
||||
+1
-1
@@ -26,7 +26,7 @@ export const DuplicateDestinationConfirmationModal = ({
|
||||
{duplicateProjectId && (
|
||||
<p className="mt-2 text-xs text-mineshaft-400">
|
||||
Duplicate found in project ID:{" "}
|
||||
<code className="rounded bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
|
||||
<code className="rounded-sm bg-mineshaft-600 px-1 py-0.5 text-mineshaft-200">
|
||||
{duplicateProjectId}
|
||||
</code>
|
||||
</p>
|
||||
|
||||
+3
-3
@@ -38,15 +38,15 @@ export const AwsParameterStoreSyncFields = () => {
|
||||
<>
|
||||
The path is required and will be prepended to the key schema. For example, if you
|
||||
have a path of{" "}
|
||||
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
|
||||
<code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
|
||||
/demo/path/
|
||||
</code>{" "}
|
||||
and a key schema of{" "}
|
||||
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
|
||||
<code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
|
||||
INFISICAL_{"{{secretKey}}"}
|
||||
</code>
|
||||
, then the result will be{" "}
|
||||
<code className="rounded bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
|
||||
<code className="rounded-sm bg-mineshaft-600 px-0.5 py-px text-sm text-mineshaft-300">
|
||||
/demo/path/INFISICAL_{"{{secretKey}}"}
|
||||
</code>
|
||||
</>
|
||||
|
||||
+1
-1
@@ -10,7 +10,7 @@ const Option = ({ isSelected, children, ...props }: OptionProps<(typeof AWS_REGI
|
||||
<components.Option isSelected={isSelected} {...props}>
|
||||
<div className="flex flex-row items-center justify-between">
|
||||
<p className="truncate">{children}</p>
|
||||
<Badge variant="success" className="ml-1 mr-auto cursor-pointer">
|
||||
<Badge variant="success" className="mr-auto ml-1 cursor-pointer">
|
||||
{props.data.slug}
|
||||
</Badge>
|
||||
{isSelected && (
|
||||
|
||||
@@ -38,7 +38,7 @@ export const SecretSyncDetailsFields = () => {
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder="Describe the purpose of this sync..."
|
||||
className="!resize-none"
|
||||
className="resize-none!"
|
||||
rows={4}
|
||||
/>
|
||||
</FormControl>
|
||||
|
||||
+5
-5
@@ -33,7 +33,7 @@ const AwsTagsSection = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mb-4 mt-2 flex flex-col pl-2">
|
||||
<div className="mt-2 mb-4 flex flex-col pl-2">
|
||||
<div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
|
||||
{tagFields.fields.map(({ id: tagFieldId }, i) => (
|
||||
<Fragment key={tagFieldId}>
|
||||
@@ -143,19 +143,19 @@ export const AwsParameterStoreSyncOptionsFields = () => {
|
||||
<p>
|
||||
To configure a KMS key, ensure the following permissions are present on the
|
||||
selected IAM role:{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:ListAliases"
|
||||
</span>
|
||||
,{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:DescribeKey"
|
||||
</span>
|
||||
,{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:Encrypt"
|
||||
</span>
|
||||
,{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:Decrypt"
|
||||
</span>
|
||||
.
|
||||
|
||||
+6
-6
@@ -34,7 +34,7 @@ const AwsTagsSection = () => {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mb-4 mt-2 flex flex-col pl-2">
|
||||
<div className="mt-2 mb-4 flex flex-col pl-2">
|
||||
<div className="grid max-h-[20vh] grid-cols-12 items-end gap-2 overflow-y-auto">
|
||||
{tagFields.fields.map(({ id: tagFieldId }, i) => (
|
||||
<Fragment key={tagFieldId}>
|
||||
@@ -145,19 +145,19 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
|
||||
<p>
|
||||
To configure a KMS key, ensure the following permissions are present on the
|
||||
selected IAM role:{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:ListAliases"
|
||||
</span>
|
||||
,{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:DescribeKey"
|
||||
</span>
|
||||
,{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:Encrypt"
|
||||
</span>
|
||||
,{" "}
|
||||
<span className="rounded bg-mineshaft-600 text-mineshaft-300">
|
||||
<span className="rounded-sm bg-mineshaft-600 text-mineshaft-300">
|
||||
"kms:Decrypt"
|
||||
</span>
|
||||
.
|
||||
@@ -224,7 +224,7 @@ export const AwsSecretsManagerSyncOptionsFields = () => {
|
||||
isChecked={value}
|
||||
onCheckedChange={onChange}
|
||||
>
|
||||
<p className="w-[14rem]">
|
||||
<p className="w-56">
|
||||
Sync Secret Metadata as Tags{" "}
|
||||
<Tooltip
|
||||
className="max-w-md"
|
||||
|
||||
+2
-2
@@ -224,14 +224,14 @@ export const SecretSyncOptionsFields = ({ hideInitialSync }: Props) => {
|
||||
onCheckedChange={onChange}
|
||||
isChecked={value}
|
||||
>
|
||||
<p className="w-[11rem]">
|
||||
<p className="w-44">
|
||||
Disable Secret Deletion{" "}
|
||||
<Tooltip
|
||||
className="max-w-md"
|
||||
content={
|
||||
<>
|
||||
<p>
|
||||
When enabled, Infisical will <span className="font-semibold">not</span>{" "}
|
||||
When enabled, Infisical will <span className="font-medium">not</span>{" "}
|
||||
remove secrets from the destination during a sync.
|
||||
</p>
|
||||
<p className="mt-4">
|
||||
|
||||
+2
-2
@@ -26,7 +26,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
|
||||
content={
|
||||
<Table>
|
||||
<THead>
|
||||
<Th className="whitespace-nowrap p-2">Key</Th>
|
||||
<Th className="p-2 whitespace-nowrap">Key</Th>
|
||||
<Th className="p-2">Value</Th>
|
||||
</THead>
|
||||
<TBody>
|
||||
@@ -41,7 +41,7 @@ export const AwsParameterStoreSyncOptionsReviewFields = () => {
|
||||
}
|
||||
>
|
||||
<div className="w-min">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
<span>
|
||||
{tags.length} Tag{tags.length > 1 ? "s" : ""}
|
||||
|
||||
+2
-2
@@ -58,7 +58,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
|
||||
content={
|
||||
<Table>
|
||||
<THead>
|
||||
<Th className="whitespace-nowrap p-2">Key</Th>
|
||||
<Th className="p-2 whitespace-nowrap">Key</Th>
|
||||
<Th className="p-2">Value</Th>
|
||||
</THead>
|
||||
<TBody>
|
||||
@@ -73,7 +73,7 @@ export const AwsSecretsManagerSyncOptionsReviewFields = () => {
|
||||
}
|
||||
>
|
||||
<div className="w-min">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
|
||||
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
|
||||
<FontAwesomeIcon icon={faEye} />
|
||||
<span>
|
||||
{tags.length} Tag{tags.length > 1 ? "s" : ""}
|
||||
|
||||
+5
-2
@@ -191,7 +191,7 @@ export const SecretSyncReviewFields = () => {
|
||||
{hasDuplicate && (
|
||||
<div className="mb-2 flex items-start rounded-md border border-yellow-600 bg-yellow-900/20 px-3 py-2">
|
||||
<div className="flex text-sm text-yellow-100">
|
||||
<FontAwesomeIcon icon={faWarning} className="mr-2 mt-1 text-yellow-600" />
|
||||
<FontAwesomeIcon icon={faWarning} className="mt-1 mr-2 text-yellow-600" />
|
||||
<div>
|
||||
<p>
|
||||
Another secret sync in your organization is already configured with the same
|
||||
@@ -199,7 +199,10 @@ export const SecretSyncReviewFields = () => {
|
||||
</p>
|
||||
{duplicateProjectId && (
|
||||
<p className="mt-1 text-xs text-yellow-200">
|
||||
Duplicate found in project ID: <code className="rounded bg-yellow-800/50 px-1 py-0.5">{duplicateProjectId}</code>
|
||||
Duplicate found in project ID:{" "}
|
||||
<code className="rounded-sm bg-yellow-800/50 px-1 py-0.5">
|
||||
{duplicateProjectId}
|
||||
</code>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user