Merge remote-tracking branch 'origin/main' into pki-revamp

This commit is contained in:
Carlos Monastyrski
2025-10-10 19:58:06 -03:00
942 changed files with 16524 additions and 12472 deletions
@@ -68,7 +68,7 @@ export const PkiAlertRow = ({ alert, handlePopUpOpen }: Props) => {
<DropdownMenuItem
className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
? "hover:bg-red-500! hover:text-white!"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={(e) => {
@@ -48,7 +48,7 @@ export const PkiAlertsSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Alerts</p>
<p className="text-xl font-medium text-mineshaft-100">Alerts</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.PkiAlerts}
@@ -48,7 +48,7 @@ export const PkiCollectionSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Certificate Collections</p>
<p className="text-xl font-medium text-mineshaft-100">Certificate Collections</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.PkiCollections}
@@ -107,7 +107,7 @@ export const PkiCollectionTable = ({ handlePopUpOpen }: Props) => {
<DropdownMenuItem
className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
? "hover:bg-red-500! hover:text-white!"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={(e) => {
@@ -105,7 +105,7 @@ const Page = () => {
<DropdownMenuItem
className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
? "hover:bg-red-500! hover:text-white!"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={() => handlePopUpOpen("deleteCa")}
@@ -8,7 +8,7 @@ export const CaCertificatesSection = ({ caId }: Props) => {
return (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">CA Certificates</h3>
<h3 className="text-lg font-medium text-mineshaft-100">CA Certificates</h3>
{/* <IconButton
ariaLabel="copy icon"
variant="plain"
@@ -8,7 +8,7 @@ export const CaCrlsSection = ({ caId }: Props) => {
return (
<div className="mt-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">
<h3 className="text-lg font-medium text-mineshaft-100">
CA Certificate Revocation Lists (CRLs)
</h3>
</div>
@@ -40,7 +40,7 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
return ca ? (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">CA Details</h3>
<h3 className="text-lg font-medium text-mineshaft-100">CA Details</h3>
<ProjectPermissionCan I={ProjectPermissionActions.Edit} a={ProjectPermissionSub.Identity}>
{(isAllowed) => {
return (
@@ -66,11 +66,11 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">CA Type</p>
<p className="text-sm font-medium text-mineshaft-300">CA Type</p>
<p className="text-sm text-mineshaft-300">{caTypeToNameMap[ca.configuration.type]}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">CA ID</p>
<p className="text-sm font-medium text-mineshaft-300">CA ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{ca.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -93,7 +93,7 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
{ca.configuration.type === InternalCaType.INTERMEDIATE &&
ca.status !== CaStatus.PENDING_CERTIFICATE && (
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Parent CA ID</p>
<p className="text-sm font-medium text-mineshaft-300">Parent CA ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">
{ca.configuration.parentCaId
@@ -121,25 +121,25 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
</div>
)}
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Name</p>
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{ca.name}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Status</p>
<p className="text-sm font-medium text-mineshaft-300">Status</p>
<p className="text-sm text-mineshaft-300">{caStatusToNameMap[ca.status]}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Key Algorithm</p>
<p className="text-sm font-medium text-mineshaft-300">Key Algorithm</p>
<p className="text-sm text-mineshaft-300">
{certKeyAlgorithmToNameMap[ca.configuration.keyAlgorithm]}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Max Path Length</p>
<p className="text-sm font-medium text-mineshaft-300">Max Path Length</p>
<p className="text-sm text-mineshaft-300">{ca.configuration.maxPathLength ?? "-"}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Not Before</p>
<p className="text-sm font-medium text-mineshaft-300">Not Before</p>
<p className="text-sm text-mineshaft-300">
{ca.configuration.notBefore
? format(new Date(ca.configuration.notBefore), "yyyy-MM-dd")
@@ -147,7 +147,7 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Not After</p>
<p className="text-sm font-medium text-mineshaft-300">Not After</p>
<p className="text-sm text-mineshaft-300">
{ca.configuration.notAfter
? format(new Date(ca.configuration.notAfter), "yyyy-MM-dd")
@@ -155,7 +155,7 @@ export const CaDetailsSection = ({ caName, handlePopUpOpen }: Props) => {
</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Enable Direct Issuance</p>
<p className="text-sm font-medium text-mineshaft-300">Enable Direct Issuance</p>
<p className="text-sm text-mineshaft-300">{ca.enableDirectIssuance ? "True" : "False"}</p>
</div>
{ca.status === CaStatus.ACTIVE && (
@@ -113,7 +113,7 @@ export const ExternalCaInstallForm = ({ caId, handlePopUpToggle }: Props) => {
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 whitespace-pre-wrap break-all">{csr}</p>
<p className="mr-4 break-all whitespace-pre-wrap">{csr}</p>
</div>
</>
)}
@@ -72,7 +72,7 @@ export const CaSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Internal Certificate Authorities</p>
<p className="text-xl font-medium text-mineshaft-100">Internal Certificate Authorities</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.CertificateAuthorities}
@@ -76,7 +76,7 @@ export const ExternalCaSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">External Certificate Authorities</p>
<p className="text-xl font-medium text-mineshaft-100">External Certificate Authorities</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.CertificateAuthorities}
@@ -92,7 +92,7 @@ export const CertificateContent = ({
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 whitespace-pre-wrap break-all">{certificate}</p>
<p className="mr-4 break-all whitespace-pre-wrap">{certificate}</p>
</div>
{certificateChain && (
<>
@@ -127,7 +127,7 @@ export const CertificateContent = ({
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 whitespace-pre-wrap break-all">{certificateChain}</p>
<p className="mr-4 break-all whitespace-pre-wrap">{certificateChain}</p>
</div>
</>
)}
@@ -164,7 +164,7 @@ export const CertificateContent = ({
</div>
</div>
<div className="mb-8 flex items-center justify-between rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 whitespace-pre-wrap break-all">{privateKey}</p>
<p className="mr-4 break-all whitespace-pre-wrap">{privateKey}</p>
</div>
</>
)}
@@ -440,7 +440,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -474,7 +474,7 @@ export const CertificateModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -198,7 +198,7 @@ export const CertificateTemplateEnrollmentModal = ({ popUp, handlePopUpToggle }:
<TextArea
{...field}
isDisabled={disableBootstrapCertValidation}
className="min-h-[15rem] border-none bg-mineshaft-900 text-gray-400"
className="min-h-60 border-none bg-mineshaft-900 text-gray-400"
reSize="none"
/>
</FormControl>
@@ -399,7 +399,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -432,7 +432,7 @@ export const CertificateTemplateModal = ({ popUp, handlePopUpToggle, caId }: Pro
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -65,7 +65,7 @@ export const CertificateTemplatesSection = ({ caId }: Props) => {
return (
<div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Certificate Templates</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Certificate Templates</h3>
<ProjectPermissionCan
I={ProjectPermissionPkiTemplateActions.Create}
a={ProjectPermissionSub.CertificateTemplates}
@@ -60,7 +60,7 @@ export const CertificatesSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Certificates</p>
<p className="text-xl font-medium text-mineshaft-100">Certificates</p>
<ProjectPermissionCan
I={ProjectPermissionCertificateActions.Create}
a={ProjectPermissionSub.Certificates}
@@ -42,7 +42,7 @@ export const IntegrationsListPage = () => {
<meta property="og:title" content="Manage your certificates in seconds" />
<meta name="og:description" content="Sync and manage PKI certificates across services" />
</Helmet>
<div className="container relative mx-auto max-w-7xl pb-12 text-white">
<div className="relative container mx-auto max-w-7xl pb-12 text-white">
<div className="mb-8">
<PageHeader
title="Integrations"
@@ -143,10 +143,10 @@ export const PkiSyncRow = ({
<img
alt={`${destinationDetails.name} sync`}
src={`/images/integrations/${destinationDetails.image}`}
className="min-w-[1.75rem]"
className="min-w-7"
/>
</Td>
<Td className="!min-w-[8rem] max-w-0">
<Td className="max-w-0 min-w-32!">
<div>
<div className="flex w-full items-center">
<p className="truncate">{name}</p>
@@ -192,7 +192,7 @@ export const PkiSyncRow = ({
className="max-w-sm"
content={
[PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].includes(syncStatus) ? (
<div className="flex flex-col gap-2 whitespace-normal py-1">
<div className="flex flex-col gap-2 py-1 whitespace-normal">
{lastSyncedAt && (
<div>
<div
@@ -200,11 +200,11 @@ export const PkiSyncRow = ({
>
<FontAwesomeIcon
icon={faCalendarCheck}
className="ml-1 pr-1.5 pt-0.5 text-sm"
className="ml-1 pt-0.5 pr-1.5 text-sm"
/>
<div className="text-xs">Last Synced</div>
</div>
<div className="rounded bg-mineshaft-600 p-2 text-xs">
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">
{format(new Date(lastSyncedAt), "yyyy-MM-dd, hh:mm aaa")}
</div>
</div>
@@ -212,10 +212,10 @@ export const PkiSyncRow = ({
{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">Failure Reason</div>
</div>
<div className="break-words rounded bg-mineshaft-600 p-2 text-xs">
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{failureMessage}
</div>
</div>
@@ -235,7 +235,7 @@ export const PkiSyncRow = ({
content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
>
<div>
<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={faBan} />
{!syncStatus && "Auto-Sync Disabled"}
</Badge>
@@ -23,7 +23,7 @@ export const PkiSyncTableCell = ({
secondaryClassName
}: PkiSyncTableCellProps) => {
return (
<Td className="!min-w-[8rem] max-w-0">
<Td className="max-w-0 min-w-32!">
<Tooltip
side="left"
className="max-w-2xl break-words"
@@ -292,7 +292,7 @@ export const PkiSyncsTable = ({ pkiSyncs }: Props) => {
<FontAwesomeIcon icon={faFilter} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="thin-scrollbar max-h-[70vh] overflow-y-auto" align="end">
<DropdownMenuContent className="max-h-[70vh] thin-scrollbar overflow-y-auto" align="end">
<DropdownMenuLabel>Status</DropdownMenuLabel>
{[PkiSyncStatus.Running, PkiSyncStatus.Succeeded, PkiSyncStatus.Failed].map(
(status) => (
@@ -409,7 +409,7 @@ export const PkiSyncsTable = ({ pkiSyncs }: Props) => {
</IconButton>
</div>
</Th>
<Th className="min-w-[10.5rem]">
<Th className="min-w-42">
<div className="flex items-center">
Status
<IconButton
@@ -64,13 +64,13 @@ export const PkiSyncsTab = () => {
<div className="mb-4 flex items-center justify-between">
<div>
<div className="flex items-start gap-1">
<p className="text-xl font-semibold text-mineshaft-100">Certificate Syncs</p>
<p className="text-xl font-medium text-mineshaft-100">Certificate Syncs</p>
<a
href="https://infisical.com/docs/integrations/pki-syncs/overview"
target="_blank"
rel="noopener noreferrer"
>
<div className="ml-1 mt-[0.32rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<div className="mt-[0.32rem] ml-1 inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
<span>Docs</span>
<FontAwesomeIcon
@@ -111,7 +111,7 @@ export const PkiCollectionPage = () => {
<DropdownMenuItem
className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
? "hover:bg-red-500! hover:text-white!"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={() =>
@@ -23,7 +23,7 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
return pkiCollection ? (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Collection Details</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Collection Details</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.PkiCollections}
@@ -51,7 +51,7 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">PKI Collection ID</p>
<p className="text-sm font-medium text-mineshaft-300">PKI Collection ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{pkiCollection.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -72,11 +72,11 @@ export const PkiCollectionDetailsSection = ({ collectionId, handlePopUpOpen }: P
</div>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Name</p>
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{pkiCollection.name}</p>
</div>
<div>
<p className="text-sm font-semibold text-mineshaft-300">Description</p>
<p className="text-sm font-medium text-mineshaft-300">Description</p>
<p className="text-sm text-mineshaft-300">{pkiCollection.description}</p>
</div>
</div>
@@ -47,7 +47,7 @@ export const PkiCollectionItemsSection = ({ collectionId, type }: Props) => {
return pkiCollection ? (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">{sectionName}</h3>
<h3 className="text-lg font-medium text-mineshaft-100">{sectionName}</h3>
<IconButton
ariaLabel="copy icon"
variant="plain"
@@ -96,7 +96,7 @@ const Page = () => {
<DropdownMenuItem
className={twMerge(
isAllowed
? "hover:!bg-red-500 hover:!text-white"
? "hover:bg-red-500! hover:text-white!"
: "pointer-events-none cursor-not-allowed opacity-50"
)}
onClick={() =>
@@ -13,7 +13,7 @@ export const PkiSubscriberCertificatesSection = ({ subscriberName }: Props) => {
return (
<div className="h-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Certificates</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Certificates</h3>
</div>
<div className="py-4">
<PkiSubscriberCertificatesTable
@@ -114,7 +114,7 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
return pkiSubscriber ? (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">PKI Subscriber Details</h3>
<h3 className="text-lg font-medium text-mineshaft-100">PKI Subscriber Details</h3>
<ProjectPermissionCan
I={ProjectPermissionPkiSubscriberActions.Edit}
a={ProjectPermissionSub.PkiSubscribers}
@@ -143,7 +143,7 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">PKI Subscriber ID</p>
<p className="text-sm font-medium text-mineshaft-300">PKI Subscriber ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{pkiSubscriber.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -164,22 +164,22 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
</div>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Name</p>
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{pkiSubscriber.name}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Status</p>
<p className="text-sm font-medium text-mineshaft-300">Status</p>
<p className="text-sm text-mineshaft-300">
{pkiSubscriberStatusToNameMap[pkiSubscriber.status]}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Common Name</p>
<p className="text-sm font-medium text-mineshaft-300">Common Name</p>
<p className="text-sm text-mineshaft-300">{pkiSubscriber.commonName}</p>
</div>
{pkiSubscriber.lastOperationAt && (
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Last Operation (Local Time)</p>
<p className="text-sm font-medium text-mineshaft-300">Last Operation (Local Time)</p>
<p className="text-sm text-mineshaft-300">
{new Date(pkiSubscriber.lastOperationAt).toLocaleString()}
</p>
@@ -188,7 +188,7 @@ export const PkiSubscriberDetailsSection = ({ subscriberName, handlePopUpOpen }:
{pkiSubscriber.lastOperationStatus === SubscriberOperationStatus.FAILED && (
<div className="mb-4">
<GenericFieldLabel labelClassName="text-red" label="Last Operation Status">
<p className="break-words rounded bg-mineshaft-600 p-2 text-xs">
<p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{pkiSubscriber.lastOperationMessage}
</p>
</GenericFieldLabel>
@@ -655,7 +655,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -688,7 +688,7 @@ export const PkiSubscriberModal = ({ popUp, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(
({ label, value: optionValue }) => {
return (
@@ -87,7 +87,7 @@ export const PkiSubscriberSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Subscribers</p>
<p className="text-xl font-medium text-mineshaft-100">Subscribers</p>
<div className="flex w-full justify-end">
<a
target="_blank"
@@ -92,10 +92,10 @@ const PageContent = () => {
<img
alt={`${destinationDetails.name} sync`}
src={`/images/integrations/${destinationDetails.image}`}
className="ml-1 mt-3 w-16"
className="mt-3 ml-1 w-16"
/>
<div>
<p className="text-3xl font-semibold text-white">{pkiSync.name}</p>
<p className="text-3xl font-medium text-white">{pkiSync.name}</p>
<p className="leading-3 text-bunker-300">{destinationDetails.name} PKI Sync</p>
</div>
<PkiSyncActionTriggers pkiSync={pkiSync} />
@@ -132,7 +132,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
return (
<>
<div className="ml-auto mt-4 flex flex-wrap items-center justify-end gap-2">
<div className="mt-4 ml-auto flex flex-wrap items-center justify-end gap-2">
{syncOption?.canImportCertificates && <PkiSyncImportStatusBadge pkiSync={pkiSync} />}
<PkiSyncRemoveStatusBadge pkiSync={pkiSync} />
{pkiSync.isAutoSyncEnabled ? (
@@ -149,7 +149,7 @@ export const PkiSyncActionTriggers = ({ pkiSync }: Props) => {
content="Auto-Sync is disabled. Certificate changes in the PKI subscriber will not be automatically synced to the destination."
>
<div>
<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={faBan} />
<span>Auto-Sync Disabled</span>
</Badge>
@@ -26,7 +26,7 @@ export const PkiSyncAuditLogsSection = ({ pkiSync }: Props) => {
return (
<div className="flex max-h-full w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Sync Logs</h3>
<h3 className="font-medium text-mineshaft-100">Sync Logs</h3>
{subscription.auditLogs && (
<p className="text-xs text-bunker-300">
Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
@@ -47,7 +47,7 @@ export const PkiSyncDestinationSection = ({ pkiSync, onEditDestination }: Props)
return (
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Destination Configuration</h3>
<h3 className="font-medium text-mineshaft-100">Destination Configuration</h3>
<ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => (
<IconButton
@@ -57,7 +57,7 @@ export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
return (
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Details</h3>
<h3 className="font-medium text-mineshaft-100">Details</h3>
<ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => (
<IconButton
@@ -91,7 +91,9 @@ export const PkiSyncDetailsSection = ({ pkiSync, onEditDetails }: Props) => {
)}
{syncStatus === PkiSyncStatus.Failed && failureMessage && (
<GenericFieldLabel labelClassName="text-red" label="Last Sync Error">
<p className="break-words rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</p>
<p className="rounded-sm bg-mineshaft-600 p-2 text-xs break-words">
{failureMessage}
</p>
</GenericFieldLabel>
)}
</div>
@@ -27,7 +27,7 @@ export const PkiSyncOptionsSection = ({ pkiSync, onEditOptions }: Props) => {
<div>
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Sync Options</h3>
<h3 className="font-medium text-mineshaft-100">Sync Options</h3>
<ProjectPermissionCan I={ProjectPermissionPkiSyncActions.Edit} a={permissionSubject}>
{(isAllowed) => (
<IconButton
@@ -32,7 +32,7 @@ export const PkiSyncSourceSection = ({ pkiSync, onEditSource }: Props) => {
<div>
<div className="flex w-full flex-col gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 py-3">
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<h3 className="font-semibold text-mineshaft-100">Source</h3>
<h3 className="font-medium text-mineshaft-100">Source</h3>
<div>
{!subscriberId && (
<Tooltip content="The PKI subscriber for this sync has been deleted. Configure a new source or remove this sync.">
@@ -113,7 +113,7 @@ export const PkiTemplateListPage = () => {
</div>
<div className="container mx-auto mb-6 max-w-7xl rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Templates</p>
<p className="text-xl font-medium text-mineshaft-100">Templates</p>
<div className="flex w-full justify-end">
<ProjectPermissionCan
I={ProjectPermissionPkiTemplateActions.Create}
@@ -327,7 +327,7 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox
@@ -360,7 +360,7 @@ export const PkiTemplateForm = ({ certTemplate, handlePopUpToggle }: Props) => {
errorText={error?.message}
isError={Boolean(error)}
>
<div className="mb-7 mt-2 grid grid-cols-2 gap-2">
<div className="mt-2 mb-7 grid grid-cols-2 gap-2">
{EXTENDED_KEY_USAGES_OPTIONS.map(({ label, value: optionValue }) => {
return (
<Checkbox