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
@@ -69,7 +69,7 @@ export const ProjectSshConfigCasSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-8 text-xl font-semibold">Certificate Authorities</p>
<p className="mb-8 text-xl font-medium">Certificate Authorities</p>
<form onSubmit={handleSubmit(onFormSubmit)}>
<Controller
control={control}
@@ -88,7 +88,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={() =>
@@ -34,7 +34,7 @@ export const SshCaDetailsSection = ({ caId, 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">SSH CA Details</h3>
<h3 className="text-lg font-medium text-mineshaft-100">SSH CA Details</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.SshCertificateAuthorities}
@@ -63,7 +63,7 @@ export const SshCaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">SSH CA ID</p>
<p className="text-sm font-medium text-mineshaft-300">SSH 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">
@@ -84,21 +84,21 @@ export const SshCaDetailsSection = ({ caId, handlePopUpOpen }: Props) => {
</div>
</div>
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">Friendly Name</p>
<p className="text-sm font-medium text-mineshaft-300">Friendly Name</p>
<p className="text-sm text-mineshaft-300">{ca.friendlyName}</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">
{sshCertKeyAlgorithmToNameMap[ca.keyAlgorithm]}
</p>
</div>
<div>
<p className="text-sm font-semibold text-mineshaft-300">Public Key</p>
<p className="text-sm font-medium text-mineshaft-300">Public Key</p>
<div className="group flex align-top">
<p className="flex-1 text-sm text-mineshaft-300">{ca.publicKey.substring(0, 20)}...</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -93,7 +93,7 @@ export const SshCertificateContent = ({
</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">{signedKey}</p>
<p className="mr-4 break-all whitespace-pre-wrap">{signedKey}</p>
</div>
{privateKey && (
<>
@@ -128,7 +128,7 @@ export const SshCertificateContent = ({
</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>
</>
)}
@@ -165,7 +165,7 @@ export const SshCertificateContent = ({
</div>
</div>
<div className="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">{publicKey}</p>
<p className="mr-4 break-all whitespace-pre-wrap">{publicKey}</p>
</div>
</>
)}
@@ -85,7 +85,7 @@ export const SshCertificateTemplatesSection = ({ caId }: 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">Certificate Templates</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Certificate Templates</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.SshCertificateTemplates}
@@ -63,7 +63,7 @@ export const SshCaSection = () => {
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 Authorities</p>
<p className="text-xl font-medium text-mineshaft-100">Certificate Authorities</p>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.SshCertificateAuthorities}
@@ -14,7 +14,7 @@ export const SshCertificatesSection = () => {
return (
<div className="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={ProjectPermissionActions.Create}
a={ProjectPermissionSub.SshCertificates}
@@ -89,7 +89,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={() =>
@@ -23,7 +23,7 @@ export const SshHostGroupDetailsSection = ({ sshHostGroupId, handlePopUpOpen }:
return sshHostGroup ? (
<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">SSH Host Group Details</h3>
<h3 className="text-lg font-medium text-mineshaft-100">SSH Host Group Details</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.SshHostGroups}
@@ -52,7 +52,7 @@ export const SshHostGroupDetailsSection = ({ sshHostGroupId, handlePopUpOpen }:
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-sm font-semibold text-mineshaft-300">SSH Host Group ID</p>
<p className="text-sm font-medium text-mineshaft-300">SSH Host Group ID</p>
<div className="group flex align-top">
<p className="text-sm text-mineshaft-300">{sshHostGroup.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -73,7 +73,7 @@ export const SshHostGroupDetailsSection = ({ sshHostGroupId, handlePopUpOpen }:
</div>
</div>
<div>
<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">{sshHostGroup.name}</p>
</div>
</div>
@@ -64,7 +64,7 @@ export const SshHostGroupHostsSection = ({ sshHostGroupId }: 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">SSH Hosts</h3>
<h3 className="text-lg font-medium text-mineshaft-100">SSH Hosts</h3>
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.SshHostGroups}
@@ -272,7 +272,7 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
control={control}
name={`loginMappings.${i}.loginUser`}
render={({ field }) => (
<span className="text-sm font-medium leading-tight">
<span className="text-sm leading-tight font-medium">
{field.value || "New Login Mapping"}
</span>
)}
@@ -326,7 +326,7 @@ export const SshHostGroupModal = ({ popUp, handlePopUpToggle }: Props) => {
/>
</div>
<div className="flex flex-col space-y-2">
<div className="mb-2 mt-4 flex items-center justify-between">
<div className="mt-4 mb-2 flex items-center justify-between">
<FormLabel
label="Allowed Principals"
className="text-xs text-mineshaft-400"
@@ -55,7 +55,7 @@ export const SshHostGroupsSection = () => {
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">Host Groups</p>
<p className="text-xl font-medium text-mineshaft-100">Host Groups</p>
<div className="flex justify-end">
<a
target="_blank"
@@ -79,7 +79,7 @@ export const SshHostGroupsTable = ({ handlePopUpOpen }: Props) => {
<Td>{group.hostCount}</Td>
<Td>
{group.loginMappings.length === 0 ? (
<span className="italic text-mineshaft-400">None</span>
<span className="text-mineshaft-400 italic">None</span>
) : (
group.loginMappings.map(({ loginUser, allowedPrincipals }) => (
<div key={`${group.id}-${loginUser}`} className="mb-2">
@@ -343,7 +343,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
control={control}
name={`loginMappings.${i}.loginUser`}
render={({ field }) => (
<span className="text-sm font-medium leading-tight">
<span className="text-sm leading-tight font-medium">
{field.value || "New Login Mapping"}
{loginMappingsFormFields.fields[i].source ===
LoginMappingSource.HOST_GROUP && (
@@ -419,7 +419,7 @@ export const SshHostModal = ({ popUp, handlePopUpToggle }: Props) => {
/>
</div>
<div className="flex flex-col space-y-2">
<div className="mb-2 mt-4 flex items-center justify-between">
<div className="mt-4 mb-2 flex items-center justify-between">
<FormLabel
label="Allowed Principals"
className="text-xs text-mineshaft-400"
@@ -41,7 +41,7 @@ export const SshHostsSection = () => {
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">Hosts</p>
<p className="text-xl font-medium text-mineshaft-100">Hosts</p>
<div className="flex justify-end">
<a
target="_blank"
@@ -92,7 +92,7 @@ export const SshHostsTable = ({ handlePopUpOpen }: Props) => {
<Td>{host.hostname}</Td>
<Td>
{host.loginMappings.length === 0 ? (
<span className="italic text-mineshaft-400">None</span>
<span className="text-mineshaft-400 italic">None</span>
) : (
(() => {
const hostMappings = host.loginMappings.filter(