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
@@ -127,7 +127,7 @@ export const IntegrationDetailsByIDPage = () => {
<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={() => {
@@ -151,7 +151,7 @@ export const IntegrationDetailsByIDPage = () => {
<IntegrationDetailsSection integration={integration} />
<IntegrationConnectionSection integration={integration} />
</div>
<div className="flex-grow space-y-4">
<div className="grow space-y-4">
<IntegrationSettingsSection integration={integration} />
<IntegrationAuditLogsSection integration={integration} />
</div>
@@ -21,9 +21,9 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
// eslint-disable-next-line no-nested-ternary
return subscription?.auditLogs ? (
<div className="h-full w-full min-w-[51rem] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="h-full w-full min-w-204 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<p className="text-lg font-semibold text-gray-200">Integration Logs</p>
<p className="text-lg font-medium text-gray-200">Integration Logs</p>
<p className="text-xs text-gray-400">
Displaying audit logs from the last {Math.min(auditLogsRetentionDays, 60)} days
</p>
@@ -42,9 +42,9 @@ export const IntegrationAuditLogsSection = ({ integration }: Props) => {
/>
</div>
) : (
<div className="h-full w-full min-w-[51rem] rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 opacity-60">
<div className="h-full w-full min-w-204 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4 opacity-60">
<div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<p className="text-lg font-semibold text-gray-200">Integration Logs</p>
<p className="text-lg font-medium text-gray-200">Integration Logs</p>
</div>
<EmptyState
className="rounded-lg"
@@ -15,16 +15,16 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
return (
<div className="flex flex-row">
<div className="flex flex-col">
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Organization" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Organization" />
<div className="text-sm text-mineshaft-300">{integration?.owner || "-"}</div>
</div>
<div className="flex flex-col">
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Project" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Project" />
<div className="text-sm text-mineshaft-300">{integration?.targetService || "-"}</div>
</div>
<div className="flex flex-col">
<FormLabel
className="text-sm font-semibold text-mineshaft-300"
className="text-sm font-medium text-mineshaft-300"
label="Target Environment"
/>
<div className="text-sm text-mineshaft-300">{integration?.targetEnvironment || "-"}</div>
@@ -94,7 +94,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
return (
<div className="flex flex-col">
<FormLabel className="text-sm font-semibold text-mineshaft-300" label={formLabel()} />
<FormLabel className="text-sm font-medium text-mineshaft-300" label={formLabel()} />
<div className="text-sm text-mineshaft-300">{contents()}</div>
</div>
);
@@ -104,7 +104,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
if (integration.integration === "bitbucket") {
return (
<div className="flex flex-col">
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Workspace" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Workspace" />
<div className="text-sm text-mineshaft-300">
{integration.targetEnvironment || integration.targetEnvironmentId}
</div>
@@ -115,7 +115,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
if (integration.integration === "octopus-deploy") {
return (
<div>
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Space" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Space" />
<div className="text-sm text-mineshaft-300">{integration.targetEnvironment}</div>
</div>
);
@@ -128,7 +128,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
return (
<div className="flex flex-col">
<FormLabel
className="text-sm font-semibold text-mineshaft-300"
className="text-sm font-medium text-mineshaft-300"
label="Target Environment"
/>
<div className="text-sm text-mineshaft-300">
@@ -145,7 +145,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
if (integration.integration === "checkly" && integration.targetService) {
return (
<div>
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Group" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Group" />
<div className="text-sm text-mineshaft-300">{integration.targetService}</div>
</div>
);
@@ -154,7 +154,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
if (integration.integration === "circleci" && integration.owner) {
return (
<div>
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Organization" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Organization" />
<div className="text-sm text-mineshaft-300">{integration.owner}</div>
</div>
);
@@ -163,7 +163,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
if (integration.integration === "terraform-cloud" && integration.targetService) {
return (
<div>
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Category" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Category" />
<div className="text-sm text-mineshaft-300">{integration.targetService}</div>
</div>
);
@@ -172,7 +172,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
if (integration.integration === "checkly" || integration.integration === "github") {
return (
<div>
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Secret Suffix" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Secret Suffix" />
<div className="text-sm text-mineshaft-300">
{integration?.metadata?.secretSuffix || "-"}
</div>
@@ -184,7 +184,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
return (
<div>
<FormLabel
className="text-sm font-semibold text-mineshaft-300"
className="text-sm font-medium text-mineshaft-300"
label="Deployment Environment"
/>
<div className="text-sm text-mineshaft-300">{integration.targetService}</div>
@@ -195,7 +195,7 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
if (integration.integration === "windmill" && integration.url) {
return (
<div>
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Instance URL" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Instance URL" />
<div className="text-sm text-mineshaft-300">{integration.url}</div>
</div>
);
@@ -207,7 +207,7 @@ export const IntegrationConnectionSection = ({ integration }: 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">Connection</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Connection</h3>
</div>
<div className="mt-4">
@@ -215,18 +215,18 @@ export const IntegrationConnectionSection = ({ integration }: Props) => {
<div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
<div className="flex flex-col">
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Environment" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Environment" />
<div className="text-sm text-mineshaft-300">{integration.environment.name}</div>
</div>
<div className="flex flex-col">
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Secret Path" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Secret Path" />
<div className="text-sm text-mineshaft-300">{integration.secretPath}</div>
</div>
</div>
<FormLabel className="my-2" label="Destination" />
<div className="space-y-2 rounded-lg border border-mineshaft-700 bg-mineshaft-800 p-2">
<FormLabel className="text-sm font-semibold text-mineshaft-300" label="Platform" />
<FormLabel className="text-sm font-medium text-mineshaft-300" label="Platform" />
<div className="text-sm text-mineshaft-300">
{integrationSlugNameMapping?.[integration.integration]}
</div>
@@ -16,18 +16,18 @@ export const IntegrationDetailsSection = ({ integration }: Props) => {
<div>
<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">Integration Details</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Integration Details</h3>
</div>
<div className="mt-4">
<div className="space-y-3">
<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">
{integrationSlugNameMapping[integration.integration]}
</p>
</div>
<div>
<p className="text-sm font-semibold text-mineshaft-300">Sync Status</p>
<p className="text-sm font-medium text-mineshaft-300">Sync Status</p>
<div className="flex items-center">
<p
className={twMerge(
@@ -46,10 +46,10 @@ export const IntegrationDetailsSection = ({ integration }: Props) => {
</div>
{integration.lastUsed && (
<div>
<p className="text-sm font-semibold text-mineshaft-300">Latest Successful Sync</p>
<p className="text-sm font-medium text-mineshaft-300">Latest Successful Sync</p>
<div className="flex items-center gap-2 text-sm text-mineshaft-300">
{format(new Date(integration.lastUsed), "yyyy-MM-dd, hh:mm aaa")}
<FontAwesomeIcon icon={faCalendarCheck} className="pr-2 pt-0.5 text-sm" />
<FontAwesomeIcon icon={faCalendarCheck} className="pt-0.5 pr-2 text-sm" />
</div>
</div>
)}
@@ -57,7 +57,7 @@ export const IntegrationDetailsSection = ({ integration }: Props) => {
<div>
{!integration.isSynced && integration.syncMessage && (
<>
<p className="text-sm font-semibold text-mineshaft-300">Latest Sync Error</p>
<p className="text-sm font-medium text-mineshaft-300">Latest Sync Error</p>
<p className="text-sm text-mineshaft-300">{integration.syncMessage}</p>
</>
)}
@@ -82,7 +82,7 @@ export const IntegrationSettingsSection = ({ integration }: Props) => {
return (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<p className="text-lg font-semibold text-gray-200">Integration Settings</p>
<p className="text-lg font-medium text-gray-200">Integration Settings</p>
</div>
<div className="grid grid-cols-2 gap-4">
{integration.metadata &&
@@ -42,7 +42,7 @@ export const OctopusDeployScopeValues = ({ integration }: OctopusDeployScopeValu
if (!integration.metadata?.octopusDeployScopeValues)
return <span className="text-sm text-mineshaft-400">Not Configured</span>;
if (isPending) return <Spinner size="sm" className="ml-2 mt-2" />;
if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
const scopeValuesMap = new Map(
Object.entries(scopeValues).map(([key, values]) => [
@@ -73,7 +73,7 @@ export const OctopusDeployScopeValues = ({ integration }: OctopusDeployScopeValu
return (
<div className="mt-4" key={key}>
<FormLabel className="text-sm font-semibold text-mineshaft-200" label={getLabel(key)} />
<FormLabel className="text-sm font-medium text-mineshaft-200" label={getLabel(key)} />
<div className="text-sm text-mineshaft-300">
{values