feat: upgraded to tw v4

This commit is contained in:
=
2025-10-09 22:37:42 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
@@ -21,7 +21,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
return data ? (
<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">Authentication</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Authentication</h3>
</div>
{data.identity.authMethods.length > 0 ? (
<div className="flex flex-col divide-y divide-mineshaft-400/50">
@@ -36,7 +36,7 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
return (
<div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Client ID</p>
<p className="text-sm font-medium text-mineshaft-300">Client ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{identityUniversalAuth?.clientId ?? ""}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -58,7 +58,7 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
</div>
{clientSecrets?.length ? (
<div className="flex justify-between">
<p className="text-sm font-semibold text-mineshaft-300">{`Client Secrets (${clientSecrets.length})`}</p>
<p className="text-sm font-medium text-mineshaft-300">{`Client Secrets (${clientSecrets.length})`}</p>
<Button
variant="link"
onClick={() => {
@@ -90,7 +90,7 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
<div className="flex items-center">
<FontAwesomeIcon size="1x" icon={faKey} />
<div className="ml-4">
<p className="text-sm font-semibold text-mineshaft-300">
<p className="text-sm font-medium text-mineshaft-300">
{`${clientSecretPrefix}****`}
</p>
<p className="text-sm text-mineshaft-300">
@@ -83,7 +83,7 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
</IconButton>
</Tooltip>
</DropdownMenuTrigger>
<DropdownMenuContent align="start" className="z-[101] p-1">
<DropdownMenuContent align="start" className="z-101 p-1">
<DropdownMenuItem
onClick={async () => {
handlePopUpOpen("token", {
@@ -114,7 +114,7 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
);
})}
<Button
className="mr-4 mt-4 w-full"
className="mt-4 mr-4 w-full"
colorSchema="secondary"
type="submit"
size="xs"
@@ -159,7 +159,7 @@ export const IdentityClientSecretModal = ({ popUp, handlePopUpToggle }: Props) =
</div>
</form>
) : (
<div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all">{token}</p>
<Tooltip content={copyTextToken}>
<IconButton
@@ -43,7 +43,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
return data ? (
<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">Identity Details</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Identity Details</h3>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
@@ -94,7 +94,7 @@ export const IdentityDetailsSection = ({ identityId, 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={async () => {
@@ -115,7 +115,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Identity ID</p>
<p className="text-sm font-medium text-mineshaft-300">Identity ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{data.identity.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -136,33 +136,33 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
</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">{data.identity.name}</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Last Login Auth Method</p>
<p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>
<p className="text-sm text-mineshaft-300">
{data.lastLoginAuthMethod ? identityAuthToNameMap[data.lastLoginAuthMethod] : "-"}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Last Login Time</p>
<p className="text-sm font-medium text-mineshaft-300">Last Login Time</p>
<p className="text-sm text-mineshaft-300">
{data.lastLoginTime ? format(data.lastLoginTime, "PPpp") : "-"}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Delete Protection</p>
<p className="text-sm font-medium text-mineshaft-300">Delete Protection</p>
<p className="text-sm text-mineshaft-300">
{data.identity.hasDeleteProtection ? "On" : "Off"}
</p>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Organization Role</p>
<p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
<p className="text-sm text-mineshaft-300">{data.role}</p>
</div>
<div>
<p className="text-sm font-semibold text-mineshaft-300">Metadata</p>
<p className="text-sm font-medium text-mineshaft-300">Metadata</p>
{data?.metadata?.length ? (
<div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
{data.metadata?.map((el) => (
@@ -49,7 +49,7 @@ export const IdentityProjectsSection = ({ identityId }: 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">Projects</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Projects</h3>
<IconButton
ariaLabel="copy icon"
variant="plain"
@@ -159,7 +159,7 @@ export const IdentityTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
</div>
</form>
) : (
<div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all">{token}</p>
<Tooltip content={copyTextToken}>
<IconButton
@@ -11,9 +11,9 @@ export const IdentityAuthFieldDisplay = ({ label, children, className }: Props)
<div className={className}>
<span className="text-sm text-mineshaft-400">{label}</span>
{children ? (
<p className="break-words text-base leading-4">{children}</p>
<p className="text-base leading-4 break-words">{children}</p>
) : (
<p className="text-base italic leading-4 text-bunker-400">Not set</p>
<p className="text-base leading-4 text-bunker-400 italic">Not set</p>
)}
</div>
);
@@ -103,7 +103,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
<THead>
<Tr className="text-xs font-medium">
<Th className="py-1 font-normal">Name</Th>
<Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
<Th className="py-1 font-normal whitespace-nowrap">Number of Uses</Th>
<Th className="py-1 font-normal">Expires</Th>
<Th className="w-5 py-1 font-normal" />
</Tr>
@@ -93,7 +93,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
<Tr className="text-xs font-medium">
<Th className="py-1 font-normal">Secret</Th>
<Th className="py-1 font-normal">Description</Th>
<Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
<Th className="py-1 font-normal whitespace-nowrap">Number of Uses</Th>
<Th className="py-1 font-normal">Expires</Th>
<Th className="w-5 py-1 font-normal" />
</Tr>
@@ -75,11 +75,11 @@ export const ViewIdentityJwtAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<p className="break-words rounded bg-mineshaft-600 p-2">{data.jwksCaCert}</p>
<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.jwksCaCert}</p>
}
>
<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>Reveal</span>
</Badge>
@@ -98,13 +98,13 @@ export const ViewIdentityJwtAuthContent = ({
className="max-w-xl p-2"
key={key}
content={
<p className="whitespace-normal break-words rounded bg-mineshaft-600 p-2">
<p className="rounded-sm bg-mineshaft-600 p-2 break-words whitespace-normal">
{key}
</p>
}
>
<div className="inline-block 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>Key {index + 1}</span>
</Badge>
@@ -133,13 +133,13 @@ export const ViewIdentityJwtAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<pre className="whitespace-pre-wrap rounded bg-mineshaft-600 p-2">
<pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
{JSON.stringify(data.boundClaims, null, 2)}
</pre>
}
>
<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>Reveal</span>
</Badge>
@@ -84,20 +84,20 @@ export const ViewIdentityKubernetesAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<p className="break-words rounded bg-mineshaft-600 p-2">
<p className="rounded-sm bg-mineshaft-600 p-2 break-words">
{data.tokenReviewerJwt || "Not provided"}
</p>
}
>
<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>Reveal</span>
</Badge>
</div>
</Tooltip>
) : (
<p className="text-base italic leading-4 text-bunker-400">Not set</p>
<p className="text-base leading-4 text-bunker-400 italic">Not set</p>
)}
</IdentityAuthFieldDisplay>
<IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Account Names">
@@ -120,10 +120,10 @@ export const ViewIdentityKubernetesAuthContent = ({
<Tooltip
side="right"
className="max-w-xl p-2"
content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
>
<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>Reveal</span>
</Badge>
@@ -70,10 +70,10 @@ export const ViewIdentityLdapAuthContent = ({
<Tooltip
side="right"
className="max-w-xl p-2"
content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.bindPass}</p>}
content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.bindPass}</p>}
>
<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>Reveal</span>
</Badge>
@@ -90,11 +90,13 @@ export const ViewIdentityLdapAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<p className="break-words rounded bg-mineshaft-600 p-2">{data.ldapCaCertificate}</p>
<p className="rounded-sm bg-mineshaft-600 p-2 break-words">
{data.ldapCaCertificate}
</p>
}
>
<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>Reveal</span>
</Badge>
@@ -71,10 +71,10 @@ export const ViewIdentityOidcAuthContent = ({
<Tooltip
side="right"
className="max-w-xl p-2"
content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCert}</p>}
content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
>
<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>Reveal</span>
</Badge>
@@ -97,13 +97,13 @@ export const ViewIdentityOidcAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<pre className="whitespace-pre-wrap rounded bg-mineshaft-600 p-2">
<pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
{JSON.stringify(data.boundClaims, null, 2)}
</pre>
}
>
<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>Reveal</span>
</Badge>
@@ -117,13 +117,13 @@ export const ViewIdentityOidcAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<pre className="whitespace-pre-wrap rounded bg-mineshaft-600 p-2">
<pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
{JSON.stringify(data.claimMetadataMapping, null, 2)}
</pre>
}
>
<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>Reveal</span>
</Badge>
@@ -67,10 +67,12 @@ export const ViewIdentityTlsCertAuthContent = ({
<Tooltip
side="right"
className="max-w-xl p-2"
content={<p className="break-words rounded bg-mineshaft-600 p-2">{data.caCertificate}</p>}
content={
<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCertificate}</p>
}
>
<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>Reveal</span>
</Badge>