mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-21 21:28:14 +00:00
feat: upgraded to tw v4
This commit is contained in:
+2
-2
@@ -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>
|
||||
|
||||
+4
-4
@@ -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"
|
||||
|
||||
+17
-17
@@ -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>
|
||||
|
||||
+6
-6
@@ -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>
|
||||
</>
|
||||
)}
|
||||
|
||||
+1
-1
@@ -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 &&
|
||||
|
||||
+2
-2
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user