mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-21 01:16:49 +00:00
feat: upgraded to tw v4
This commit is contained in:
@@ -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")}
|
||||
|
||||
+1
-1
@@ -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"
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
+11
-11
@@ -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 && (
|
||||
|
||||
+1
-1
@@ -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}
|
||||
|
||||
+1
-1
@@ -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
|
||||
|
||||
+1
-1
@@ -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>
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
+1
-1
@@ -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}
|
||||
|
||||
@@ -54,7 +54,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"
|
||||
|
||||
+8
-8
@@ -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>
|
||||
|
||||
+1
-1
@@ -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"
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
+1
-1
@@ -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={() =>
|
||||
|
||||
+4
-4
@@ -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>
|
||||
|
||||
+1
-1
@@ -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"
|
||||
|
||||
+1
-1
@@ -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={() =>
|
||||
|
||||
+1
-1
@@ -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
|
||||
|
||||
+7
-7
@@ -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>
|
||||
|
||||
+2
-2
@@ -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 (
|
||||
|
||||
+1
-1
@@ -85,7 +85,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} />
|
||||
|
||||
+2
-2
@@ -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>
|
||||
|
||||
+1
-1
@@ -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
|
||||
|
||||
+1
-1
@@ -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
|
||||
|
||||
+4
-2
@@ -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>
|
||||
|
||||
+1
-1
@@ -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
|
||||
|
||||
+1
-1
@@ -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.">
|
||||
|
||||
@@ -112,7 +112,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
|
||||
|
||||
Reference in New Issue
Block a user