merge main

This commit is contained in:
x032205
2025-10-10 20:33:52 -04:00
parent a61536adbb
commit a804672042
1020 changed files with 23364 additions and 13891 deletions
@@ -64,7 +64,7 @@ export const CommitDetailsPage = () => {
};
return (
<div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pb-4 pt-2 text-white">
<div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pt-2 pb-4 text-white">
<div className="w-full max-w-[75vw]">
<ProjectPermissionCan
renderGuardBanner
@@ -302,7 +302,7 @@ export const CommitDetailsTab = ({
<span className="text-sm font-medium text-white">
Roll back to this commit
</span>
<span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
<span className="text-xs leading-snug break-words whitespace-normal text-gray-400">
Return this folder to its exact state at the time of this commit,
discarding all other changes made after it
</span>
@@ -317,7 +317,7 @@ export const CommitDetailsTab = ({
<div className="flex items-center space-x-3">
<div className="flex flex-col">
<span className="text-sm font-medium text-white">Revert changes</span>
<span className="whitespace-normal break-words text-xs leading-snug text-gray-400">
<span className="text-xs leading-snug break-words whitespace-normal text-gray-400">
Will restore to the previous version of affected resources
</span>
</div>
@@ -330,7 +330,7 @@ export const CommitDetailsTab = ({
</PageHeader>
<div className="flex w-full flex-col rounded-lg border border-mineshaft-600 bg-mineshaft-900 pt-4">
<div className="mx-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<h3 className="text-lg font-semibold text-mineshaft-100">Commit Changes</h3>
<h3 className="text-lg font-medium text-mineshaft-100">Commit Changes</h3>
</div>
<div className="flex flex-col overflow-hidden px-4">
<div className="thin-scrollbar overflow-y-auto py-4">
@@ -339,7 +339,7 @@ export const CommitDetailsTab = ({
) : (
<EmptyState
title="No changes found."
className="h-full pb-0 pt-28"
className="h-full pt-28 pb-0"
icon={faCodeCommit}
/>
)}
@@ -221,7 +221,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
{deepRollback && nestedFolderChanges.length > 0 && (
<>
<div className="border-b border-mineshaft-600 bg-mineshaft-800 px-4 py-2">
<span className="text-sm font-semibold text-white">Child folders to be restored</span>
<span className="text-sm font-medium text-white">Child folders to be restored</span>
</div>
{nestedFolderChanges.map((folder) => (
<div
@@ -297,7 +297,7 @@ export const RollbackPreviewTab = (): JSX.Element => {
};
return (
<div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pb-4 pt-2 text-white">
<div className="mx-auto flex w-full max-w-7xl justify-center bg-bunker-800 pt-2 pb-4 text-white">
<ProjectPermissionCan
renderGuardBanner
I={ProjectPermissionCommitsActions.PerformRollback}
@@ -230,8 +230,8 @@ const renderJsonWithDiffs = (
const getLineClass = (different: boolean) => {
if (!different) return "flex";
return isOldVersion
? "flex bg-red-500/50 rounded-sm text-red-300"
: "flex bg-green-500/50 rounded-sm text-green-300";
? "flex bg-red-500/50 rounded-xs text-red-300"
: "flex bg-green-500/50 rounded-xs text-green-300";
};
const prefix = isDifferent ? (isOldVersion ? " -" : " +") : " ";
@@ -253,7 +253,7 @@ const renderJsonWithDiffs = (
return (
<div key={reactKey} className={getLineClass(isDifferent)}>
<div className="w-4 flex-shrink-0">{prefix}</div>
<div className="w-4 shrink-0">{prefix}</div>
<div>
{indent}
{keyName && <span>{keyDisplay}</span>}
@@ -267,7 +267,7 @@ const renderJsonWithDiffs = (
if (isArray(obj) && obj.length === 0) {
return (
<div key={reactKey} className={getLineClass(isDifferent)}>
<div className="w-4 flex-shrink-0">{prefix}</div>
<div className="w-4 shrink-0">{prefix}</div>
<div>
{indent}
{keyName && <span>{keyDisplay}</span>}
@@ -281,7 +281,7 @@ const renderJsonWithDiffs = (
if (isObject(obj) && Object.keys(obj).length === 0) {
return (
<div key={reactKey} className={getLineClass(isDifferent)}>
<div className="w-4 flex-shrink-0">{prefix}</div>
<div className="w-4 shrink-0">{prefix}</div>
<div>
{indent}
{keyName && <span>{keyDisplay}</span>}
@@ -320,7 +320,7 @@ const renderJsonWithDiffs = (
return (
<div key={reactKey}>
<div className={getLineClass(isContainerAddedOrRemoved)}>
<div className="w-4 flex-shrink-0">
<div className="w-4 shrink-0">
{isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
</div>
<div>
@@ -353,7 +353,7 @@ const renderJsonWithDiffs = (
})}
<div className={getLineClass(isContainerAddedOrRemoved)}>
<div className="w-4 flex-shrink-0">
<div className="w-4 shrink-0">
{isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
</div>
<div>
@@ -372,7 +372,7 @@ const renderJsonWithDiffs = (
return (
<div key={reactKey}>
<div className={getLineClass(isContainerAddedOrRemoved)}>
<div className="w-4 flex-shrink-0">
<div className="w-4 shrink-0">
{isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
</div>
<div>
@@ -406,7 +406,7 @@ const renderJsonWithDiffs = (
})}
<div className={getLineClass(isContainerAddedOrRemoved)}>
<div className="w-4 flex-shrink-0">
<div className="w-4 shrink-0">
{isContainerAddedOrRemoved ? (isOldVersion ? " -" : " +") : " "}
</div>
<div>
@@ -420,7 +420,7 @@ const renderJsonWithDiffs = (
return (
<div key={reactKey} className={getLineClass(isDifferent)}>
<div className="w-4 flex-shrink-0">{prefix}</div>
<div className="w-4 shrink-0">{prefix}</div>
<div>
{indent}
{keyDisplay}
@@ -439,7 +439,7 @@ const formatAddedJson = (json: JsonValue): JSX.Element => {
const lineKey = `added-${line.slice(0, 30)}-${lineIndex}`;
return (
<div key={lineKey} className="flex">
<div className="w-4 flex-shrink-0">+</div>
<div className="w-4 shrink-0">+</div>
<div>{line}</div>
</div>
);
@@ -456,7 +456,7 @@ const formatDeletedJson = (json: JsonValue): JSX.Element => {
const lineKey = `deleted-${line.slice(0, 30)}-${lineIndex}`;
return (
<div key={lineKey} className="flex">
<div className="w-4 flex-shrink-0">-</div>
<div className="w-4 shrink-0">-</div>
<div>{line}</div>
</div>
);
@@ -522,7 +522,7 @@ export const SecretVersionDiffView = ({
}
oldVersionContent = (
<div className="w-fit min-w-[100%] font-mono text-sm">
<div className="w-fit min-w-full font-mono text-sm">
{renderJsonWithDiffs(
cleanOldVersion,
diffPaths,
@@ -538,7 +538,7 @@ export const SecretVersionDiffView = ({
</div>
);
newVersionContent = (
<div className="w-fit min-w-[100%] font-mono text-sm">
<div className="w-fit min-w-full font-mono text-sm">
{renderJsonWithDiffs(
cleanNewVersion,
diffPaths,
@@ -578,19 +578,19 @@ export const SecretVersionDiffView = ({
if (item.isDeleted) {
textStyle = "line-through text-red-300";
changeBadge = (
<span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
{isSecret ? "Secret" : "Folder"} Deleted
</span>
);
} else if (item.isAdded) {
changeBadge = (
<span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
{isSecret ? "Secret" : "Folder"} Added
</span>
);
} else if (item.isUpdated) {
changeBadge = (
<span className="ml-2 whitespace-nowrap rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium">
<span className="ml-2 rounded-md bg-mineshaft-600 px-2 py-0.5 text-xs font-medium whitespace-nowrap">
{isSecret ? "Secret" : "Folder"} Updated
</span>
);
@@ -644,14 +644,14 @@ export const SecretVersionDiffView = ({
<div className="flex gap-3">
<div
ref={oldContainerRef}
className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
className="max-h-96 thin-scrollbar flex-1 overflow-auto whitespace-pre"
>
{oldVersionContent}
</div>
<div className="max-h-96 w-[0.05rem] self-stretch bg-mineshaft-600" />
<div
ref={newContainerRef}
className="thin-scrollbar max-h-96 flex-1 overflow-auto whitespace-pre"
className="max-h-96 thin-scrollbar flex-1 overflow-auto whitespace-pre"
>
{newVersionContent}
</div>
@@ -84,7 +84,7 @@ const DateGroup = ({
<h2 className="ml-4 text-sm text-mineshaft-400">Commits on {date}</h2>
</div>
<div className="relative">
<div className="absolute bottom-0 left-3 top-0 w-[0.1rem] bg-mineshaft-500" />
<div className="absolute top-0 bottom-0 left-3 w-[0.1rem] bg-mineshaft-500" />
<div className="ml-10">
{commits.map((commit) => (
<CommitItem key={commit.id} commit={commit} onSelectCommit={onSelectCommit} />
@@ -154,10 +154,10 @@ export const CommitHistoryTab = ({
return (
<div className="mt-4 w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-4 text-xl font-semibold text-mineshaft-100">Commit History</p>
<p className="mb-4 text-xl font-medium text-mineshaft-100">Commit History</p>
<div className="mb-4 flex flex-col sm:flex-row sm:justify-end">
<div className="flex w-full flex-wrap items-center gap-2">
<div className="relative flex-grow">
<div className="relative grow">
<Input
leftIcon={<FontAwesomeIcon icon={faSearch} aria-hidden="true" />}
placeholder="Search commits..."
@@ -203,7 +203,7 @@ export const CommitHistoryTab = ({
<Button
variant="outline_bg"
size="sm"
className="ml-10 mt-4 w-full"
className="mt-4 ml-10 w-full"
onClick={() => fetchNextPage()}
disabled={isFetchingNextPage}
isLoading={isFetchingNextPage}
@@ -17,7 +17,7 @@ export const IPAllowListPage = () => {
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl px-6">
<div className="my-6">
<p className="text-3xl font-semibold text-gray-200">IP Allowlist</p>
<p className="text-3xl font-medium text-gray-200">IP Allowlist</p>
<div />
</div>
<ProjectPermissionCan
@@ -55,7 +55,7 @@ export const IPAllowlistSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-8 flex items-center">
<h2 className="flex-1 text-xl font-semibold text-white">IP Allowlist</h2>
<h2 className="flex-1 text-xl font-medium text-white">IP Allowlist</h2>
<ProjectPermissionCan
I={ProjectPermissionActions.Create}
a={ProjectPermissionSub.IpAllowList}
@@ -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
@@ -45,7 +45,7 @@ export const IntegrationsListPage = () => {
<meta property="og:title" content="Manage your .env files in seconds" />
<meta name="og:description" content={t("integrations.description") as string} />
</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"
@@ -100,7 +100,7 @@ export const CloudIntegrationSection = ({
)}
<div className="flex w-full flex-col justify-between gap-4 whitespace-nowrap lg:flex-row lg:items-end lg:gap-8">
<div className="flex-1">
<h1 className="text-3xl font-semibold">{t("integrations.cloud-integrations")}</h1>
<h1 className="text-3xl font-medium">{t("integrations.cloud-integrations")}</h1>
<p className="text-base text-gray-400">{t("integrations.click-to-start")}</p>
</div>
<Input
@@ -173,16 +173,16 @@ export const CloudIntegrationSection = ({
alt="integration logo"
/>
<div
className={`mt-2 max-w-xs text-center text-sm font-semibold text-gray-300 duration-200 group-hover:text-gray-200 ${isSyncAvailable ? "mb-4" : ""}`}
className={`mt-2 max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200 ${isSyncAvailable ? "mb-4" : ""}`}
>
{cloudIntegration.name}
</div>
</div>
{cloudIntegration.isAvailable &&
Boolean(integrationAuths?.[cloudIntegration.slug]) && (
<div className="absolute right-0 top-0 z-30 h-full">
<div className="absolute top-0 right-0 z-30 h-full">
<div className="relative h-full">
<div className="absolute right-0 top-0 w-24 flex-row items-center overflow-hidden whitespace-nowrap rounded-bl-md rounded-tr-md bg-primary px-2 py-0.5 text-xs text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
<div className="absolute top-0 right-0 w-24 flex-row items-center overflow-hidden rounded-tr-md rounded-bl-md bg-primary px-2 py-0.5 text-xs whitespace-nowrap text-black opacity-80 transition-all duration-300 group-hover:w-0 group-hover:p-0">
<FontAwesomeIcon icon={faCheck} className="mr-2 text-xs" />
Authorized
</div>
@@ -197,7 +197,7 @@ export const CloudIntegrationSection = ({
provider: cloudIntegration.slug
});
}}
className="absolute right-0 top-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 hover:opacity-100 group-hover:h-full"
className="absolute top-0 right-0 flex h-0 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-r-md bg-red text-xs opacity-50 transition-all duration-300 group-hover:h-full hover:opacity-100"
>
<FontAwesomeIcon icon={faXmark} size="xl" />
</div>
@@ -208,7 +208,7 @@ export const CloudIntegrationSection = ({
{isSyncAvailable && (
<div className="absolute bottom-0 left-0 z-30 h-full w-full">
<div className="relative h-full">
<div className="absolute bottom-0 left-0 w-full flex-row overflow-hidden whitespace-nowrap rounded-bl-md rounded-br-md bg-yellow/20 px-2 py-0.5 text-center text-xs text-yellow">
<div className="absolute bottom-0 left-0 w-full flex-row overflow-hidden rounded-br-md rounded-bl-md bg-yellow/20 px-2 py-0.5 text-center text-xs whitespace-nowrap text-yellow">
Secret Sync Available
</div>
</div>
@@ -34,7 +34,7 @@ export const FrameworkIntegrationTab = () => {
/>
)}
{framework?.name && (
<div className="mt-auto max-w-xs text-center text-sm font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
<div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{framework.name}
</div>
)}
@@ -47,7 +47,7 @@ export const FrameworkIntegrationTab = () => {
className="relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
>
<FontAwesomeIcon className="mt-auto text-5xl text-white/90" icon={faKeyboard} />
<div className="mt-auto max-w-xs text-center text-sm font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
<div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
CLI
</div>
</a>
@@ -58,7 +58,7 @@ export const FrameworkIntegrationTab = () => {
className="relative flex h-32 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-800 p-4 duration-200 hover:bg-mineshaft-700"
>
<FontAwesomeIcon className="mt-auto text-5xl text-white/90" icon={faComputer} />
<div className="mt-auto max-w-xs text-center text-sm font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
<div className="mt-auto max-w-xs text-center text-sm font-medium text-gray-300 duration-200 group-hover:text-gray-200">
SDKs
</div>
</a>
@@ -32,7 +32,7 @@ export const InfrastructureIntegrationTab = () => {
width={integration?.name ? 60 : 90}
alt="integration logo"
/>
<div className="ml-4 max-w-xs text-xl font-semibold text-gray-300 duration-200 group-hover:text-gray-200">
<div className="ml-4 max-w-xs text-xl font-medium text-gray-300 duration-200 group-hover:text-gray-200">
{integration?.name && integration.name}
</div>
</div>
@@ -82,18 +82,18 @@ export const IntegrationRow = ({
<span className="hidden lg:inline">{cloudIntegration?.name}</span>
</div>
</Td>
<Td className="!min-w-[8rem] max-w-0">
<Td className="max-w-0 min-w-32!">
<Tooltip side="top" className="max-w-2xl break-words" content={secretPath}>
<p className="truncate">{secretPath}</p>
</Tooltip>{" "}
</Td>
<Td>{environment?.name ?? "-"}</Td>
<Td className="!min-w-[5rem] max-w-0">
<Td className="max-w-0 min-w-20!">
<div className="flex items-center gap-2">
<p className="truncate">{getIntegrationDestination(integration)}</p>
<Tooltip
position="left"
className="min-w-[20rem] max-w-lg"
className="max-w-lg min-w-[20rem]"
content={<IntegrationDetails integration={integration} />}
>
<FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400" />
@@ -119,11 +119,11 @@ export const IntegrationRow = ({
>
<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(integration.lastUsed!), "yyyy-MM-dd, hh:mm aaa")}
</div>
</div>
@@ -131,10 +131,10 @@ export const IntegrationRow = ({
{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="rounded bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
<div className="rounded-sm bg-mineshaft-600 p-2 text-xs">{failureMessage}</div>
</div>
)}
</div>
@@ -266,7 +266,7 @@ export const IntegrationsTable = ({
</Tooltip>
</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>
{Object.values(IntegrationStatus).map((status) => (
<DropdownMenuItem
@@ -168,7 +168,7 @@ export const NativeIntegrationsTab = () => {
{view === IntegrationView.List ? (
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Native Integrations</p>
<p className="text-xl font-medium text-mineshaft-100">Native Integrations</p>
<Button
colorSchema="secondary"
type="submit"
@@ -148,10 +148,10 @@ export const SecretSyncRow = ({
<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>
@@ -194,7 +194,7 @@ export const SecretSyncRow = ({
className="max-w-sm"
content={
[SecretSyncStatus.Succeeded, SecretSyncStatus.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
@@ -202,11 +202,11 @@ export const SecretSyncRow = ({
>
<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>
@@ -214,10 +214,10 @@ export const SecretSyncRow = ({
{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>
@@ -237,7 +237,7 @@ export const SecretSyncRow = ({
content="Auto-Sync is disabled. Changes to the source location 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>
@@ -23,7 +23,7 @@ export const SecretSyncTableCell = ({
secondaryClassName
}: SecretSyncTableCellProps) => {
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"
@@ -301,7 +301,7 @@ export const SecretSyncsTable = ({ secretSyncs }: 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>
{[SecretSyncStatus.Running, SecretSyncStatus.Succeeded, SecretSyncStatus.Failed].map(
(status) => (
@@ -441,7 +441,7 @@ export const SecretSyncsTable = ({ secretSyncs }: Props) => {
</IconButton>
</div>
</Th>
<Th className="min-w-[10.5rem]">
<Th className="min-w-42">
<div className="flex items-center">
Status
<IconButton
@@ -92,13 +92,13 @@ export const SecretSyncsTab = () => {
<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">Secret Syncs</p>
<p className="text-lg font-medium text-mineshaft-100">Secret Syncs</p>
<a
href="https://infisical.com/docs/integrations/secret-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
@@ -884,7 +884,7 @@ export const OverviewPage = () => {
if (isProjectV3 && visibleEnvs.length > 0 && isOverviewLoading) {
return (
<div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:[color-scheme:dark]">
<div className="container mx-auto flex h-screen w-full items-center justify-center px-8 text-mineshaft-50 dark:scheme-dark">
<Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
</div>
);
@@ -900,7 +900,7 @@ export const OverviewPage = () => {
if (!isProjectV3)
return (
<div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:[color-scheme:dark]">
<div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:scheme-dark">
<SecretV2MigrationSection />
</div>
);
@@ -911,7 +911,7 @@ export const OverviewPage = () => {
<meta property="og:title" content={String(t("dashboard.og-title"))} />
<meta name="og:description" content={String(t("dashboard.og-description"))} />
</Helmet>
<div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:[color-scheme:dark]">
<div className="relative mx-auto max-w-7xl text-mineshaft-50 dark:scheme-dark">
<div className="flex w-full items-baseline justify-between">
<PageHeader
title="Secrets Overview"
@@ -980,7 +980,7 @@ export const OverviewPage = () => {
size="sm"
variant="outline_bg"
className={twMerge(
"flex h-[2.5rem]",
"flex h-10",
isTableFiltered && "border-primary/40 bg-primary/10"
)}
leftIcon={
@@ -994,7 +994,7 @@ export const OverviewPage = () => {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="thin-scrollbar max-h-[70vh] overflow-y-auto"
className="max-h-[70vh] thin-scrollbar overflow-y-auto"
align="end"
sideOffset={2}
>
@@ -1204,7 +1204,7 @@ export const OverviewPage = () => {
<div ref={tableRef} className="mt-4">
<TableContainer
onScroll={(e) => setScrollOffset(e.currentTarget.scrollLeft)}
className="thin-scrollbar max-h-[66vh] overflow-y-auto rounded-b-none"
className="max-h-[66vh] thin-scrollbar overflow-y-auto rounded-b-none"
>
<Table>
<THead
@@ -1221,7 +1221,7 @@ export const OverviewPage = () => {
>
<div
className={twMerge(
"flex h-full border-b border-mineshaft-600 pb-3 pl-3 pr-5",
"flex h-full border-b border-mineshaft-600 pr-5 pb-3 pl-3",
!collapseEnvironments && "border-r pt-3.5"
)}
>
@@ -1238,7 +1238,7 @@ export const OverviewPage = () => {
: ""
}
>
<div className="ml-2 mr-4">
<div className="mr-4 ml-2">
<Checkbox
isDisabled={totalCount === 0}
id="checkbox-select-all-rows"
@@ -1276,7 +1276,7 @@ export const OverviewPage = () => {
ariaLabel="Toggle Environment View"
variant="plain"
colorSchema="secondary"
className="ml-auto mt-auto h-min p-1"
className="mt-auto ml-auto h-min p-1"
onClick={handleToggleNarrowHeader}
>
<FontAwesomeIcon
@@ -1297,14 +1297,14 @@ export const OverviewPage = () => {
<Th
className={twMerge(
"min-table-row border-b-0 p-0 text-xs",
collapseEnvironments && index === visibleEnvs.length - 1 && "!mr-8",
!collapseEnvironments && "min-w-[11rem] text-center"
collapseEnvironments && index === visibleEnvs.length - 1 && "mr-8!",
!collapseEnvironments && "min-w-44 text-center"
)}
style={
collapseEnvironments
? {
height: headerHeight,
width: "w-[1rem]"
width: "w-4"
}
: undefined
}
@@ -1331,7 +1331,7 @@ export const OverviewPage = () => {
"border-b border-mineshaft-600",
collapseEnvironments
? "relative"
: "flex items-center justify-center px-5 pb-[0.82rem] pt-3.5",
: "flex items-center justify-center px-5 pt-3.5 pb-[0.82rem]",
collapseEnvironments && isLast && "overflow-clip"
)}
style={{
@@ -1374,7 +1374,7 @@ export const OverviewPage = () => {
className="max-w-none lowercase"
content={`${missingKeyCount} secrets missing\n compared to other environments`}
>
<div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-sm border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
<div className="ml-2 flex h-[1.1rem] cursor-default items-center justify-center rounded-xs border border-red-400 bg-red-600 p-1 text-xs font-medium text-bunker-100">
<span className="text-bunker-100">{missingKeyCount}</span>
</div>
</Tooltip>
@@ -1541,7 +1541,7 @@ export const OverviewPage = () => {
<Tr className="sticky bottom-0 z-10 border-0 bg-mineshaft-800">
<Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 p-0">
<div
className="w-full border-r border-t border-mineshaft-600"
className="w-full border-t border-r border-mineshaft-600"
style={{ height: "45px" }}
/>
</Td>
@@ -1561,7 +1561,7 @@ export const OverviewPage = () => {
ariaLabel="Explore Environment"
size="xs"
variant="outline_bg"
className="mx-auto h-[1.76rem] rounded"
className="mx-auto h-[1.76rem] rounded-sm"
onClick={() => handleExploreEnvClick(slug)}
>
<FontAwesomeIcon icon={faArrowRightToBracket} />
@@ -23,7 +23,7 @@ export const FolderBreadCrumbs = ({ secretPath = "/", onResetSearch }: Props) =>
return (
<div className="flex items-center space-x-2">
<div
className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pl-5 pr-2 text-sm hover:bg-mineshaft-600"
className="breadcrumb relative z-20 border-solid border-mineshaft-600 bg-mineshaft-800 py-1 pr-2 pl-5 text-sm hover:bg-mineshaft-600"
onClick={() => onFolderCrumbClick(0)}
onKeyDown={() => null}
role="button"
@@ -39,7 +39,7 @@ export const FolderBreadCrumbs = ({ secretPath = "/", onResetSearch }: Props) =>
key={`secret-path-${index + 1}`}
className={`breadcrumb relative z-20 ${
index + 1 === arr.length ? "cursor-default" : "cursor-pointer"
} border-solid border-mineshaft-600 py-1 pl-5 pr-2 text-sm text-mineshaft-200`}
} border-solid border-mineshaft-600 py-1 pr-2 pl-5 text-sm text-mineshaft-200`}
onClick={() => onFolderCrumbClick(index + 1)}
onKeyDown={() => null}
role="button"
@@ -49,7 +49,7 @@ export const SecretOverviewFolderRow = ({
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/>
<FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
className={twMerge("block group-hover:!hidden", isSelected && "!hidden")}
icon={faFolder}
/>
</div>
@@ -50,12 +50,12 @@ export const SecretOverviewRotationSecretRow = ({
>
<tr className="!last:border-b-0 h-full hover:bg-mineshaft-700">
<td className="flex h-full items-center" style={{ padding: "0.5rem 1rem" }}>
<span className={twMerge(!secret && "blur")}>{secret?.key ?? "********"}</span>
<span className={twMerge(!secret && "blur-sm")}>{secret?.key ?? "********"}</span>
</td>
<td className="col-span-2 h-full w-full" style={{ padding: "0.5rem 1rem" }}>
{/* eslint-disable-next-line no-nested-ternary */}
{!secret ? (
<div className="h-full pl-4 blur">********</div>
<div className="h-full pl-4 blur-sm">********</div>
) : secret.secretValueHidden ? (
<Blur
className="py-0"
@@ -63,7 +63,7 @@ export const SecretOverviewSecretRotationRow = ({
<>
<Tr isHoverable isSelectable onClick={setIsExpanded.toggle} className="group">
<Td className="sticky left-0 z-10 border-0 bg-mineshaft-800 bg-clip-padding p-0 group-hover:bg-mineshaft-700">
<div className="flex w-full items-center space-x-5 border-r border-mineshaft-600 py-2.5 pl-5 pr-2">
<div className="flex w-full items-center space-x-5 border-r border-mineshaft-600 py-2.5 pr-2 pl-5">
<div className="text-mineshaft-400">
<FontAwesomeIcon icon={faRotate} />
</div>
@@ -123,11 +123,11 @@ export const SecretOverviewSecretRotationRow = ({
<div style={getExpandedRowStyle(scrollOffset)} className="ml-2 p-2">
<TableContainer>
<table className="secret-table">
<thead className="!border-b">
<thead className="border-b!">
<tr className="h-10">
<th
style={{ padding: "0.5rem 1rem" }}
className="min-table-row min-w-[30vw] !border-r-0"
className="min-table-row min-w-[30vw] border-r-0!"
>
<div className="flex w-full flex-wrap items-center">
<span>{envName}</span>
@@ -151,7 +151,7 @@ export const SecretOverviewSecretRotationRow = ({
)}
</div>
</th>
<div className="absolute right-1 top-0.5 ml-auto mr-1 mt-1 w-min">
<div className="absolute top-0.5 right-1 mt-1 mr-1 ml-auto w-min">
<div className="flex items-center gap-2">
<SecretRotationV2StatusBadge secretRotation={secretRotation} />
<Tooltip content={isSecretVisible ? "Hide Values" : "Reveal Values"}>
@@ -300,7 +300,7 @@ export const SecretEditRow = ({
<FontAwesomeIcon className="pl-2" size="sm" icon={faEyeSlash} />
</Tooltip>
)}
<div className="flex-grow border-r border-r-mineshaft-600 pl-1 pr-2">
<div className="grow border-r border-r-mineshaft-600 pr-2 pl-1">
<Controller
control={control}
name="value"
@@ -133,7 +133,7 @@ export const SecretOverviewTableRow = ({
className={twMerge("hidden group-hover:flex", isSelected && "flex")}
/>
<FontAwesomeIcon
className={twMerge("block group-hover:hidden", isSelected && "hidden")}
className={twMerge("block group-hover:!hidden", isSelected && "!hidden")}
icon={isFormExpanded ? faAngleDown : faKey}
/>
</div>
@@ -209,16 +209,13 @@ export const SecretOverviewTableRow = ({
<table className="secret-table">
<thead>
<tr className="h-10 border-b-2 border-mineshaft-600">
<th
style={{ padding: "0.5rem 1rem" }}
className="min-table-row min-w-[11rem]"
>
<th style={{ padding: "0.5rem 1rem" }} className="min-table-row min-w-44">
Environment
</th>
<th style={{ padding: "0.5rem 1rem" }} className="border-none">
Value
</th>
<div className="absolute right-0 top-0 ml-auto mr-1 mt-1 w-min">
<div className="absolute top-0 right-0 mt-1 mr-1 ml-auto w-min">
<Button
variant="outline_bg"
className="p-1"
@@ -247,7 +244,7 @@ export const SecretOverviewTableRow = ({
className="flex h-full items-center"
style={{ padding: "0.25rem 1rem" }}
>
<div title={name} className="flex h-8 w-[8rem] items-center space-x-2">
<div title={name} className="flex h-8 w-32 items-center space-x-2">
<span className="truncate">{name}</span>
{isImportedSecret && (
<Tooltip
@@ -150,10 +150,10 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
return (
<form
onSubmit={handleSubmit(handleFormSubmit)}
className="secret-table relative mb-2 flex w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
className="relative mb-2 flex secret-table w-full flex-row items-center justify-between overflow-hidden rounded-lg border border-solid border-mineshaft-700 bg-mineshaft-800 font-inter"
>
<div className="flex h-11 flex-1 flex-shrink-0 items-center">
<span className="flex h-full min-w-[11rem] items-center justify-between gap-2 border-r-2 border-mineshaft-600 px-4">
<div className="flex h-11 flex-1 shrink-0 items-center">
<span className="flex h-full min-w-44 items-center justify-between gap-2 border-r-2 border-mineshaft-600 px-4">
Key
{currentSecretValue?.trim()?.includes(" ") &&
currentSecretValue?.trim() !== secretKey && (
@@ -204,7 +204,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
{!isDirty ? (
<motion.div
key="options"
className="flex flex-shrink-0 items-center space-x-4 px-3"
className="flex shrink-0 items-center space-x-4 px-3"
initial={{ x: 0, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: 10, opacity: 0 }}
@@ -226,7 +226,7 @@ function SecretRenameRow({ environments, getSecretByKey, secretKey, secretPath }
) : (
<motion.div
key="options-save"
className="flex flex-shrink-0 items-center space-x-4 px-3"
className="flex shrink-0 items-center space-x-4 px-3"
initial={{ x: -10, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -10, opacity: 0 }}
@@ -37,7 +37,7 @@ export const SecretSearchInput = ({
<>
<div className="flex w-full items-center whitespace-nowrap">
<Tooltip content="Search Options">
<Combobox.Button className="button user-select-none relative inline-flex h-[2.42rem] cursor-pointer items-center justify-center rounded-md rounded-r-none border border-mineshaft-600 bg-mineshaft-600 p-3 font-inter text-sm font-medium text-bunker-200 transition-all duration-100 hover:border-primary-400/50 hover:bg-primary/[0.1] hover:text-bunker-100">
<Combobox.Button className="button user-select-none relative inline-flex h-[2.42rem] cursor-pointer items-center justify-center rounded-md rounded-r-none border border-mineshaft-600 bg-mineshaft-600 p-3 font-inter text-sm font-medium text-bunker-200 transition-all duration-100 hover:border-primary-400/50 hover:bg-primary/10 hover:text-bunker-100">
<FontAwesomeIcon
icon={faSearch}
size="sm"
@@ -53,7 +53,7 @@ export const SecretSearchInput = ({
}}
autoComplete="off"
className={twMerge(
"input text-md h-[2.3rem] w-full rounded-md rounded-l-none bg-mineshaft-800 py-[0.375rem] pl-2.5 text-gray-400 placeholder-mineshaft-50 placeholder-opacity-50 outline-none duration-200 placeholder:text-sm hover:ring-bunker-400/60 focus:bg-mineshaft-700/80 focus:ring-1 focus:ring-primary-400/50",
"input text-md h-[2.3rem] w-full rounded-md rounded-l-none bg-mineshaft-800 py-1.5 pl-2.5 text-gray-400 placeholder-mineshaft-50/50 outline-hidden duration-200 placeholder:text-sm hover:ring-bunker-400/60 focus:bg-mineshaft-700/80 focus:ring-1 focus:ring-primary-400/50",
hasSearch ? "pr-8" : "pr-2.5"
)}
placeholder={
@@ -82,17 +82,17 @@ export const SecretSearchInput = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Combobox.Options className="absolute z-30 mt-2 w-full min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow focus:outline-none">
<Combobox.Options className="absolute z-30 mt-2 w-full min-w-[220px] overflow-y-auto rounded-md border border-mineshaft-600 bg-mineshaft-900 text-bunker-300 shadow-sm focus:outline-hidden">
<Combobox.Option
onClick={() => setIsOpen(true)}
value={value}
className={({ active }) =>
`flex w-full cursor-pointer items-start rounded-sm px-4 py-2 font-inter text-sm text-mineshaft-200 outline-none hover:bg-mineshaft-400 ${
`flex w-full cursor-pointer items-start rounded-xs px-4 py-2 font-inter text-sm text-mineshaft-200 outline-hidden hover:bg-mineshaft-400 ${
active ? "bg-mineshaft-500" : ""
}`
}
>
<FontAwesomeIcon icon={faFolderTree} className="mr-2 mt-1 text-yellow-700" />
<FontAwesomeIcon icon={faFolderTree} className="mt-1 mr-2 text-yellow-700" />
{value.trim()
? `Search for "${
value.length > 10 ? `${value.substring(0, 10)}...` : value
@@ -205,7 +205,7 @@ const Content = ({
</DropdownSubMenuTrigger>
<DropdownSubMenuContent
collisionPadding={{ right: Infinity }} // forces dropdown to left
className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-r-none"
className="max-h-80 thin-scrollbar overflow-y-auto rounded-r-none"
>
<DropdownMenuLabel>Filter Secrets by Tag(s)</DropdownMenuLabel>
{tags.map(({ id, slug, color }) => (
@@ -234,7 +234,7 @@ const Content = ({
</DropdownMenu>
</div>
<div className="mt-4 max-h-[19rem] min-h-[19rem] overflow-auto">
<div className="mt-4 max-h-76 min-h-76 overflow-auto">
{/* eslint-disable-next-line no-nested-ternary */}
{isEnabled ? (
// eslint-disable-next-line no-nested-ternary
@@ -247,7 +247,7 @@ const Content = ({
icon={faMagnifyingGlass}
/>
) : (
<TableContainer className="thin-scrollbar h-full overflow-y-auto">
<TableContainer className="h-full thin-scrollbar overflow-y-auto">
<Table>
{showFilter[RowType.Folder] &&
Object.entries(folders).map(([key, folderGroup]) => (
@@ -247,13 +247,13 @@ export const QuickSearchSecretItem = ({
)}
<p
className={twMerge(
"hidden w-[12rem] max-w-[12rem] truncate text-sm group-hover:block",
"hidden w-48 max-w-48 truncate text-sm group-hover:block",
!secret.value && "text-mineshaft-400"
)}
>
{secret.value || "EMPTY"}
</p>
<p className="w-[12rem] text-sm group-hover:hidden">
<p className="w-48 text-sm group-hover:!hidden">
***************************
</p>
</div>
@@ -30,7 +30,7 @@ export const SecretTableResourceCount = ({
<Tooltip
className="max-w-sm"
content={
<p className="whitespace-nowrap text-center">
<p className="text-center whitespace-nowrap">
Total import count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
@@ -46,7 +46,7 @@ export const SecretTableResourceCount = ({
<Tooltip
className="max-w-sm"
content={
<p className="whitespace-nowrap text-center">
<p className="text-center whitespace-nowrap">
Total folder count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
@@ -62,7 +62,7 @@ export const SecretTableResourceCount = ({
<Tooltip
className="max-w-sm"
content={
<p className="whitespace-nowrap text-center">
<p className="text-center whitespace-nowrap">
Total dynamic secret count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
@@ -78,7 +78,7 @@ export const SecretTableResourceCount = ({
<Tooltip
className="max-w-sm"
content={
<p className="whitespace-nowrap text-center">
<p className="text-center whitespace-nowrap">
Total secret rotation count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
@@ -94,7 +94,7 @@ export const SecretTableResourceCount = ({
<Tooltip
className="max-w-sm"
content={
<p className="whitespace-nowrap text-center">
<p className="text-center whitespace-nowrap">
Total secret count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
@@ -38,7 +38,7 @@ export const SecretV2MigrationSection = () => {
currentProject?.upgradeStatus === ProjectUpgradeStatus.InProgress ? 2000 : false
}
);
const { membership } = useProjectPermission();
const { hasProjectRole } = useProjectPermission();
const migrateProjectToV3 = useMigrateProjectToV3();
const { handleSubmit, control, reset } = useForm({ resolver: zodResolver(formSchema) });
useEffect(() => {
@@ -81,11 +81,11 @@ export const SecretV2MigrationSection = () => {
}
};
const isAdmin = membership?.roles.includes(ProjectMembershipRole.Admin);
const isAdmin = hasProjectRole(ProjectMembershipRole.Admin);
return (
<div className="mt-4 flex max-w-2xl flex-col rounded-lg border border-primary/50 bg-primary/10 px-6 py-5">
{isUpgrading && (
<div className="absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500 bg-opacity-80">
<div className="bg-opacity-80 absolute top-0 left-0 z-50 flex h-screen w-screen items-center justify-center bg-bunker-500">
<Spinner size="lg" className="text-primary" />
<div className="ml-4 flex flex-col space-y-1">
<div className="text-3xl font-medium">Please wait</div>
@@ -95,7 +95,7 @@ export const SecretV2MigrationSection = () => {
)}
<div className="mb-4 flex items-start gap-2">
<FontAwesomeIcon icon={faWarning} size="xl" className="mt-1 text-primary" />
<p className="text-xl font-semibold">Upgrade secrets engine version</p>
<p className="text-xl font-medium">Upgrade secrets engine version</p>
</div>
<p className="mx-1 mb-4 leading-7 text-mineshaft-100">
Your existing workflows to fetch secrets will continue to work. However, viewing secrets on
@@ -227,7 +227,7 @@ export const SelectionPanel = ({
<>
<div
className={twMerge(
"h-0 flex-shrink-0 overflow-hidden transition-all",
"h-0 shrink-0 overflow-hidden transition-all",
isMultiSelectActive && "h-16"
)}
>
@@ -250,7 +250,7 @@ const Content = ({
return (
<div className="w-full">
<div className="mb-2">Results</div>
<div className="mb-4 flex flex-col divide-y divide-mineshaft-600 rounded bg-mineshaft-900 px-3 py-2">
<div className="mb-4 flex flex-col divide-y divide-mineshaft-600 rounded-sm bg-mineshaft-900 px-3 py-2">
{moveResults.map(({ id, name, status, message }) => {
let className: string;
let icon: IconDefinition;
@@ -327,7 +327,7 @@ const Content = ({
/>
</FormControl>
{Boolean(environmentsToBeSkipped.length) && (
<div className="rounded bg-mineshaft-900 px-3 py-2">
<div className="rounded-sm bg-mineshaft-900 px-3 py-2">
<span className="text-sm text-yellow">
<FontAwesomeIcon icon={faWarning} className="mr-0.5" /> The following environments will
not be affected
@@ -361,7 +361,7 @@ const Content = ({
onCheckedChange={setShouldOverwrite}
isChecked={shouldOverwrite}
>
<p className="w-[11rem]">Overwrite Existing Secrets</p>
<p className="w-44">Overwrite Existing Secrets</p>
</Switch>
</FormControl>
<div className="mt-6 flex items-center">
@@ -72,11 +72,11 @@ const generateRequestText = (request: TAccessApprovalRequest) => {
<div className="flex items-center justify-between text-sm">
<div>
Requested {isTemporary ? "temporary" : "permanent"} access to{" "}
<code className="mx-1 rounded bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
<code className="mx-1 rounded-sm bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
{request.policy.secretPath}
</code>{" "}
in{" "}
<code className="mx-1 rounded bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
<code className="mx-1 rounded-sm bg-mineshaft-600 px-1.5 py-0.5 font-mono text-[13px] text-mineshaft-200">
{request.environmentName}
</code>
</div>
@@ -311,13 +311,13 @@ export const AccessApprovalRequest = ({
<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">Access Requests</p>
<p className="text-xl font-medium text-mineshaft-100">Access Requests</p>
<a
href="https://infisical.com/docs/documentation/platform/access-controls/access-requests"
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
@@ -390,7 +390,7 @@ export const AccessApprovalRequest = ({
<FontAwesomeIcon icon={faCheck} className="mr-2" />
{!!requestCount && requestCount.finalizedCount} Closed
</div>
<div className="flex flex-grow justify-end space-x-8">
<div className="flex grow justify-end space-x-8">
<DropdownMenu>
<DropdownMenuTrigger>
<Button
@@ -405,7 +405,7 @@ export const AccessApprovalRequest = ({
<DropdownMenuContent
align="end"
sideOffset={1}
className="thin-scrollbar max-h-[20rem] overflow-y-auto"
className="max-h-80 thin-scrollbar overflow-y-auto"
>
<DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
Select an Environment
@@ -442,7 +442,7 @@ export const AccessApprovalRequest = ({
<DropdownMenuContent
align="end"
sideOffset={1}
className="thin-scrollbar max-h-[20rem] overflow-y-auto"
className="max-h-80 thin-scrollbar overflow-y-auto"
>
<DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
Select Requesting User
@@ -470,7 +470,7 @@ export const AccessApprovalRequest = ({
)}
</div>
</div>
<div className="flex flex-col rounded-b-md border-x border-b border-t border-mineshaft-600 bg-mineshaft-800">
<div className="flex flex-col rounded-b-md border-x border-t border-b border-mineshaft-600 bg-mineshaft-800">
{filteredRequests?.length === 0 && !isFiltered && (
<div className="py-12">
<EmptyState
@@ -526,7 +526,7 @@ export const AccessApprovalRequest = ({
</div>
<div className="flex items-center gap-3">
{request.requestedByUserId === user.id && (
<div className="flex items-center gap-1.5 whitespace-nowrap text-xs text-bunker-300">
<div className="flex items-center gap-1.5 text-xs whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faUser} size="sm" />
<span>Requested By You</span>
</div>
@@ -92,7 +92,7 @@ const Content = ({ accessRequest, onComplete, projectSlug }: ContentProps) => {
return (
<form onSubmit={handleSubmit(onSubmit)}>
<div className="mb-4 flex w-full items-start rounded-md border border-yellow/50 bg-yellow/30 px-4 py-2 text-sm text-yellow-200">
<FontAwesomeIcon icon={faWarning} className="mr-2.5 mt-1 text-base text-yellow" />
<FontAwesomeIcon icon={faWarning} className="mt-1 mr-2.5 text-base text-yellow" />
Updating this access request will restart the review process and require all approvers to
re-approve it.
</div>
@@ -121,7 +121,7 @@ const Content = ({ accessRequest, onComplete, projectSlug }: ContentProps) => {
errorText={error?.message}
>
<TextArea
className="!resize-none"
className="resize-none!"
rows={4}
{...field}
placeholder="Provide a reason for updating this request..."
@@ -300,7 +300,7 @@ export const ReviewAccessRequestModal = ({
is requesting access to the following resource:
</div>
<div className="">
<div className="mb-2 mt-4 text-mineshaft-200">
<div className="mt-4 mb-2 text-mineshaft-200">
<div className="flex flex-wrap gap-8">
<GenericFieldLabel label="Environment">{accessDetails.env}</GenericFieldLabel>
<GenericFieldLabel truncate label="Secret Path">
@@ -351,7 +351,7 @@ export const ReviewAccessRequestModal = ({
</Badge>
)}
</div>
<div className="thin-scrollbar max-h-[40vh] overflow-y-auto rounded py-2">
<div className="max-h-[40vh] thin-scrollbar overflow-y-auto rounded-sm py-2">
{approverSequence?.approvers &&
approverSequence.approvers.map((approver, index) => {
const isInactive =
@@ -397,7 +397,7 @@ export const ReviewAccessRequestModal = ({
<Badge
className={
isInactive
? "py-auto my-auto flex h-6 min-w-6 items-center justify-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-center text-bunker-200"
? "py-auto my-auto flex h-6 min-w-6 items-center justify-center gap-1.5 bg-mineshaft-400/50 text-center whitespace-nowrap text-bunker-200"
: ""
}
>
@@ -415,14 +415,14 @@ export const ReviewAccessRequestModal = ({
<div className="flex w-12 flex-col items-center gap-2 pr-4">
<div
className={twMerge(
"flex-grow border-mineshaft-600",
"grow border-mineshaft-600",
index !== 0 && "border-r"
)}
/>
{StepComponent}
<div
className={twMerge(
"flex-grow border-mineshaft-600",
"grow border-mineshaft-600",
index < approverSequence.approvers!.length - 1 && "border-r"
)}
/>
@@ -448,7 +448,7 @@ export const ReviewAccessRequestModal = ({
<span className="text-xs">
<Tooltip content="This user has been deactivated and no longer has an active organization membership.">
<div>
<Badge className="pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
<Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faBan} />
Inactive
</Badge>
@@ -480,7 +480,7 @@ export const ReviewAccessRequestModal = ({
content={
<div>
<div className="mb-1 text-sm text-bunker-300">Reviewers</div>
<div className="thin-scrollbar flex max-h-64 flex-col divide-y divide-mineshaft-500 overflow-y-auto rounded">
<div className="flex max-h-64 thin-scrollbar flex-col divide-y divide-mineshaft-500 overflow-y-auto rounded-sm">
{approver.reviewers.map((el, idx) => (
<div
key={`reviewer-${idx + 1}`}
@@ -533,7 +533,7 @@ export const ReviewAccessRequestModal = ({
onCheckedChange={(checked) => setBypassApproval(checked === true)}
isChecked={bypassApproval}
id="byPassApproval"
className={twMerge("mr-2", bypassApproval ? "!border-red/50 !bg-red/30" : "")}
className={twMerge("mr-2", bypassApproval ? "border-red/50! bg-red/30!" : "")}
>
<span className="text-xs text-red">
Approve without waiting for requirements to be met (bypass policy protection)
@@ -253,13 +253,13 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
<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">Policies</p>
<p className="text-xl font-medium text-mineshaft-100">Policies</p>
<a
href="https://infisical.com/docs/documentation/platform/pr-workflows"
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
@@ -318,7 +318,7 @@ export const ApprovalPolicyList = ({ projectId }: IProps) => {
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="thin-scrollbar max-h-[70vh] overflow-y-auto"
className="max-h-[70vh] thin-scrollbar overflow-y-auto"
align="end"
>
<DropdownMenuLabel>Policy Type</DropdownMenuLabel>
@@ -476,7 +476,7 @@ const Form = ({
tooltipText="The maximum amount of time someone can request access for. Ex: 1h, 3w, 30d"
isError={Boolean(error)}
errorText={error?.message}
className="flex-shrink"
className="shrink"
>
<Input {...field} value={field.value || ""} placeholder="permanent" />
</FormControl>
@@ -494,7 +494,7 @@ const Form = ({
label="Min. Approvals Required"
isError={Boolean(error)}
errorText={error?.message}
className="flex-shrink"
className="shrink"
>
<Input
{...field}
@@ -561,11 +561,11 @@ const Form = ({
</div>
{isAccessPolicyType ? (
<>
<div className="thin-scrollbar max-h-64 space-y-2 overflow-y-auto rounded border border-mineshaft-600 bg-mineshaft-900 p-2">
<div className="max-h-64 thin-scrollbar space-y-2 overflow-y-auto rounded-sm border border-mineshaft-600 bg-mineshaft-900 p-2">
{sequenceApproversFieldArray.fields.map((el, index) => (
<div
className={twMerge(
"rounded border border-mineshaft-500 bg-mineshaft-700 p-3 pb-0 shadow-inner",
"rounded-sm border border-mineshaft-500 bg-mineshaft-700 p-3 pb-0 shadow-inner",
dragOverItem === index ? "border-2 border-blue-400" : "",
draggedItem === index ? "opacity-50" : ""
)}
@@ -140,7 +140,7 @@ export const ApprovalPolicyRow = ({
</IconButton>
</DropdownMenuTrigger>
</DropdownMenuTrigger>
<DropdownMenuContent sideOffset={2} align="end" className="min-w-[12rem] p-1">
<DropdownMenuContent sideOffset={2} align="end" className="min-w-48 p-1">
<ProjectPermissionCan
I={ProjectPermissionActions.Edit}
a={ProjectPermissionSub.SecretApproval}
@@ -180,10 +180,10 @@ export const ApprovalPolicyRow = ({
</Td>
</Tr>
<Tr>
<Td colSpan={6} className="!border-none p-0">
<Td colSpan={6} className="border-none! p-0">
<div
className={`w-full overflow-hidden bg-mineshaft-900/75 transition-all duration-500 ease-in-out ${
isExpanded ? "thin-scrollbar max-h-[26rem] !overflow-y-auto opacity-100" : "max-h-0"
isExpanded ? "max-h-104 thin-scrollbar overflow-y-auto! opacity-100" : "max-h-0"
}`}
>
<div className="p-4">
@@ -193,19 +193,16 @@ export const ApprovalPolicyRow = ({
{labels.length > 1 && (
<div className="flex w-12 flex-col items-center gap-2 pr-4">
<div
className={twMerge(
"flex-grow border-mineshaft-600",
index !== 0 && "border-r"
)}
className={twMerge("grow border-mineshaft-600", index !== 0 && "border-r")}
/>
{labels.length > 1 && (
<Badge className="my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-center text-bunker-200">
<Badge className="my-auto flex h-5 w-min min-w-5 items-center justify-center gap-1.5 bg-mineshaft-400/50 text-center whitespace-nowrap text-bunker-200">
<span>{index + 1}</span>
</Badge>
)}
<div
className={twMerge(
"flex-grow border-mineshaft-600",
"grow border-mineshaft-600",
index < labels.length - 1 && "border-r"
)}
/>
@@ -228,7 +225,7 @@ export const ApprovalPolicyRow = ({
<span className="text-xs">
<Tooltip content="This user has been deactivated and no longer has an active organization membership.">
<div>
<Badge className="pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
<Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faBan} />
Inactive
</Badge>
@@ -26,7 +26,7 @@ export const PolicyMemberOption = ({
{children}
</p>
{!props.data.isOrgMembershipActive && (
<Badge className="pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
<Badge className="pointer-events-none mr-auto ml-1 flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faBan} />
Inactive
</Badge>
@@ -100,7 +100,7 @@ export const RemoveApprovalPolicyModal = ({
) : (
<div
className={twMerge(
"mt-4 flex w-full items-start gap-2 rounded border p-2 text-sm",
"mt-4 flex w-full items-start gap-2 rounded-sm border p-2 text-sm",
(openCount ?? 0) > 0
? "border-yellow/20 bg-yellow/10 text-yellow"
: "border-green/20 bg-green/10 text-green"
@@ -159,13 +159,13 @@ export const SecretApprovalRequest = () => {
<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">Change Requests</p>
<p className="text-xl font-medium text-mineshaft-100">Change Requests</p>
<a
href="https://infisical.com/docs/documentation/platform/pr-workflows"
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
@@ -217,7 +217,7 @@ export const SecretApprovalRequest = () => {
<FontAwesomeIcon icon={faCheck} className="mr-2" />
{isSecretApprovalReqCountSuccess && secretApprovalRequestCount.closed} Closed
</div>
<div className="flex flex-grow justify-end space-x-8">
<div className="flex grow justify-end space-x-8">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
@@ -234,7 +234,7 @@ export const SecretApprovalRequest = () => {
<DropdownMenuContent
align="end"
sideOffset={1}
className="thin-scrollbar max-h-[20rem] overflow-y-auto"
className="max-h-80 thin-scrollbar overflow-y-auto"
>
<DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
Select an Environment
@@ -271,7 +271,7 @@ export const SecretApprovalRequest = () => {
<DropdownMenuContent
align="end"
sideOffset={1}
className="thin-scrollbar max-h-[20rem] overflow-y-auto"
className="max-h-80 thin-scrollbar overflow-y-auto"
>
<DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
Select an Author
@@ -295,7 +295,7 @@ export const SecretApprovalRequest = () => {
)}
</div>
</div>
<div className="flex flex-col rounded-b-md border-x border-b border-t border-mineshaft-600 bg-mineshaft-800">
<div className="flex flex-col rounded-b-md border-x border-t border-b border-mineshaft-600 bg-mineshaft-800">
{isRequestListEmpty && !isFiltered && (
<div className="py-12">
<EmptyState
@@ -168,7 +168,7 @@ export const SecretApprovalRequestAction = ({
isChecked={byPassApproval}
id="byPassApproval"
checkIndicatorBg="text-white"
className={twMerge("mr-2", byPassApproval ? "!border-red/50 !bg-red/30" : "")}
className={twMerge("mr-2", byPassApproval ? "border-red/50! bg-red/30!" : "")}
>
<span className="text-sm">
Merge without waiting for approval (bypass secret change policy)
@@ -66,9 +66,9 @@ export const SecretApprovalRequestChangeItem = ({
const [isNewSecretValueVisible, setIsNewSecretValueVisible] = useState(false);
return (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 pb-4 pt-2">
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-4 pt-2 pb-4">
<div className="flex items-center px-1 py-1">
<div className="flex-grow">{generateItemTitle(op)}</div>
<div className="grow">{generateItemTitle(op)}</div>
{!hasMerged && isStale && (
<div className="flex items-center text-mineshaft-300">
<FontAwesomeIcon icon={faInfoCircle} className="text-xs" />
@@ -85,19 +85,19 @@ export const SecretApprovalRequestChangeItem = ({
)}
</div>
<div>
<div className="flex flex-col space-x-0 space-y-4 xl:flex-row xl:space-x-4 xl:space-y-0">
<div className="flex flex-col space-y-4 space-x-0 xl:flex-row xl:space-y-0 xl:space-x-4">
{op === CommitType.UPDATE || op === CommitType.DELETE ? (
<div className="flex w-full cursor-default flex-col rounded-md border border-red-600/60 bg-red-600/10 p-4 xl:w-1/2">
<div className="mb-4 flex flex-row justify-between">
<span className="text-md font-medium">Previous Secret</span>
<div className="rounded-full bg-red px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
<div className="rounded-full bg-red px-2 pt-[0.2rem] pb-[0.14rem] text-xs font-medium">
<FontAwesomeIcon icon={faCircleXmark} className="pr-1 text-white" />
Previous
</div>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Key</div>
<p className="max-w-lg break-words text-sm">{secretVersion?.secretKey}</p>
<p className="max-w-lg text-sm break-words">{secretVersion?.secretKey}</p>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Value</div>
@@ -109,7 +109,7 @@ export const SecretApprovalRequestChangeItem = ({
) : (
<div className="relative">
{secretVersion?.secretValueHidden && (
<div className="absolute left-1 top-1/2 z-50 -translate-y-1/2">
<div className="absolute top-1/2 left-1 z-50 -translate-y-1/2">
<Tooltip
position="right"
content="You do not have access to view the old secret value."
@@ -129,12 +129,12 @@ export const SecretApprovalRequestChangeItem = ({
value={secretVersion?.secretValue}
containerClassName={twMerge(
"border border-mineshaft-600 bg-bunker-700 py-1.5 text-bunker-300 hover:border-primary-400/50",
secretVersion?.secretValueHidden ? "pl-8 pr-2" : "px-2"
secretVersion?.secretValueHidden ? "pr-2 pl-8" : "px-2"
)}
/>
{!secretVersion?.secretValueHidden && (
<div
className="absolute right-1 top-1"
className="absolute top-1 right-1"
onClick={() => setIsOldSecretValueVisible(!isOldSecretValueVisible)}
>
<FontAwesomeIcon
@@ -149,7 +149,7 @@ export const SecretApprovalRequestChangeItem = ({
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="thin-scrollbar max-h-[5rem] max-w-[34rem] overflow-y-auto break-words text-sm xl:max-w-[28rem]">
<div className="max-h-20 thin-scrollbar max-w-136 overflow-y-auto text-sm break-words xl:max-w-md">
{secretVersion?.secretComment || (
<span className="text-sm text-mineshaft-300">-</span>
)}{" "}
@@ -189,7 +189,7 @@ export const SecretApprovalRequestChangeItem = ({
>
<FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
<Tooltip
className="max-w-lg whitespace-normal break-words"
className="max-w-lg break-words whitespace-normal"
content={el.key}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -202,7 +202,7 @@ export const SecretApprovalRequestChangeItem = ({
className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
>
<Tooltip
className="max-w-lg whitespace-normal break-words"
className="max-w-lg break-words whitespace-normal"
content={el.value}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -236,14 +236,14 @@ export const SecretApprovalRequestChangeItem = ({
<div className="flex w-full cursor-default flex-col rounded-md border border-green-600/60 bg-green-600/10 p-4 xl:w-1/2">
<div className="mb-4 flex flex-row justify-between">
<span className="text-md font-medium">New Secret</span>
<div className="rounded-full bg-green-600 px-2 pb-[0.14rem] pt-[0.2rem] text-xs font-medium">
<div className="rounded-full bg-green-600 px-2 pt-[0.2rem] pb-[0.14rem] text-xs font-medium">
<FontAwesomeIcon icon={faCircleCheck} className="pr-1 text-white" />
New
</div>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Key</div>
<div className="max-w-md break-words text-sm">{newVersion?.secretKey} </div>
<div className="max-w-md text-sm break-words">{newVersion?.secretKey} </div>
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Value</div>
@@ -255,7 +255,7 @@ export const SecretApprovalRequestChangeItem = ({
) : (
<div className="relative">
{newVersion?.secretValueHidden && (
<div className="absolute left-1 top-1/2 z-50 -translate-y-1/2">
<div className="absolute top-1/2 left-1 z-50 -translate-y-1/2">
<Tooltip
position="right"
content="You do not have access to view the new secret value."
@@ -275,12 +275,12 @@ export const SecretApprovalRequestChangeItem = ({
value={newVersion?.secretValue ?? secretVersion?.secretValue}
containerClassName={twMerge(
"border border-mineshaft-600 bg-bunker-700 py-1.5 text-bunker-300 hover:border-primary-400/50",
newVersion?.secretValueHidden ? "pl-8 pr-2" : "px-2"
newVersion?.secretValueHidden ? "pr-2 pl-8" : "px-2"
)}
/>
{!newVersion?.secretValueHidden && (
<div
className="absolute right-1 top-1"
className="absolute top-1 right-1"
onClick={() => setIsNewSecretValueVisible(!isNewSecretValueVisible)}
>
<FontAwesomeIcon
@@ -295,7 +295,7 @@ export const SecretApprovalRequestChangeItem = ({
</div>
<div className="mb-2">
<div className="text-sm font-medium text-mineshaft-300">Comment</div>
<div className="thin-scrollbar max-h-[5rem] max-w-[34rem] overflow-y-auto break-words text-sm xl:max-w-[28rem]">
<div className="max-h-20 thin-scrollbar max-w-136 overflow-y-auto text-sm break-words xl:max-w-md">
{(newVersion?.secretComment ?? secretVersion?.secretComment) || (
<span className="text-sm text-mineshaft-300">-</span>
)}{" "}
@@ -334,7 +334,7 @@ export const SecretApprovalRequestChangeItem = ({
>
<FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
<Tooltip
className="max-w-lg whitespace-normal break-words"
className="max-w-lg break-words whitespace-normal"
content={el.key}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -347,7 +347,7 @@ export const SecretApprovalRequestChangeItem = ({
className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
>
<Tooltip
className="max-w-lg whitespace-normal break-words"
className="max-w-lg break-words whitespace-normal"
content={el.value}
>
<div className="max-w-[125px] overflow-hidden text-ellipsis whitespace-nowrap">
@@ -228,7 +228,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
return (
<div className="flex flex-col space-x-6 lg:flex-row">
<div className="flex-1 lg:max-w-[calc(100%-17rem)]">
<div className="sticky -top-8 z-20 flex items-center space-x-4 bg-bunker-800 pb-6 pt-2">
<div className="sticky -top-8 z-20 flex items-center space-x-4 bg-bunker-800 pt-2 pb-6">
<IconButton variant="outline_bg" ariaLabel="go-back" onClick={onGoBack}>
<FontAwesomeIcon icon={faArrowLeft} />
</IconButton>
@@ -245,7 +245,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
: secretApprovalRequestDetails.status}
</span>
</div>
<div className="-mt-0.5 w-[calc(100%-20rem)] flex-grow flex-col">
<div className="-mt-0.5 w-[calc(100%-20rem)] grow flex-col">
<div className="text-xl">
{generateCommitText(
secretApprovalRequestDetails.commits,
@@ -389,12 +389,12 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
<div className="text-sm text-bunker-300">
A secret import in
<p
className="mx-1 inline rounded bg-mineshaft-600/80 text-mineshaft-300"
className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
style={{ padding: "2px 4px" }}
>
{secretApprovalRequestDetails?.environment}
</p>
<div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1.5 pr-2">
<div className="mr-1 inline-flex w-min items-center rounded-sm border border-mineshaft-500 pr-2 pl-1.5">
<p className="cursor-default border-r border-mineshaft-500 pr-1.5">
<FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
</p>
@@ -409,12 +409,12 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
</div>
has pending changes to be accepted from its source at{" "}
<p
className="mx-1 inline rounded bg-mineshaft-600/80 text-mineshaft-300"
className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
style={{ padding: "2px 4px" }}
>
{replicatedImport?.importEnv?.slug}
</p>
<div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1.5 pr-2">
<div className="mr-1 inline-flex w-min items-center rounded-sm border border-mineshaft-500 pr-2 pl-1.5">
<p className="cursor-default border-r border-mineshaft-500 pr-1.5">
<FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
</p>
@@ -433,12 +433,12 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
<div className="text-sm text-bunker-300">
<p className="inline">Secret(s) in</p>
<p
className="mx-1 inline rounded bg-mineshaft-600/80 text-mineshaft-300"
className="mx-1 inline rounded-sm bg-mineshaft-600/80 text-mineshaft-300"
style={{ padding: "2px 4px" }}
>
{secretApprovalRequestDetails?.environment}
</p>
<div className="mr-1 inline-flex w-min items-center rounded border border-mineshaft-500 pl-1.5 pr-2">
<div className="mr-1 inline-flex w-min items-center rounded-sm border border-mineshaft-500 pr-2 pl-1.5">
<p className="cursor-default border-r border-mineshaft-500 pr-1.5">
<FontAwesomeIcon icon={faFolder} className="text-yellow" size="sm" />
</p>
@@ -524,7 +524,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
/>
</div>
</div>
<div className="sticky top-0 z-[51] w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
<div className="sticky top-0 z-51 w-1/5 cursor-default pt-2" style={{ minWidth: "240px" }}>
<div className="text-sm text-bunker-300">Reviewers</div>
<div className="mt-2 flex flex-col space-y-2 text-sm">
{secretApprovalRequestDetails?.policy?.approvers
@@ -538,7 +538,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
return (
<div
className="flex flex-nowrap items-center justify-between space-x-2 rounded border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
className="flex flex-nowrap items-center justify-between space-x-2 rounded-sm border border-mineshaft-600 bg-mineshaft-800 px-2 py-1"
key={`required-approver-${requiredApprover.userId}`}
>
<div
@@ -583,7 +583,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
)}
<div className="flex gap-2">
<Tooltip
className="relative !z-[500]"
className="relative z-500!"
content={
<span className="text-sm">
Status:{" "}
@@ -612,7 +612,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
const { isOrgMembershipActive } = reviewer;
return (
<div
className="flex flex-nowrap items-center justify-between space-x-2 rounded bg-mineshaft-800 px-2 py-1"
className="flex flex-nowrap items-center justify-between space-x-2 rounded-sm bg-mineshaft-800 px-2 py-1"
key={`required-approver-${reviewer.userId}`}
>
<div
@@ -622,7 +622,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
)}
>
<Tooltip
className="relative !z-[500]"
className="relative z-500!"
content={
!isOrgMembershipActive
? "This user has been deactivated and no longer has an active organization membership."
@@ -644,7 +644,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
<div>
{reviewer.comment && (
<Tooltip className="relative !z-[500]" content={reviewer.comment}>
<Tooltip className="relative z-500!" content={reviewer.comment}>
<FontAwesomeIcon
icon={faComment}
size="xs"
@@ -653,7 +653,7 @@ export const SecretApprovalRequestChanges = ({ approvalRequestId, onGoBack }: Pr
</Tooltip>
)}
<Tooltip
className="relative !z-[500]"
className="relative z-500!"
content={
<span className="text-sm">
Status:{" "}
@@ -754,13 +754,13 @@ const Page = () => {
if (!(currentProject?.version === ProjectVersion.V3))
return (
<div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:[color-scheme:dark]">
<div className="flex h-full w-full flex-col items-center justify-center px-6 text-mineshaft-50 dark:scheme-dark">
<SecretV2MigrationSection />
</div>
);
return (
<div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:[color-scheme:dark]">
<div className="container mx-auto flex max-w-7xl flex-col text-mineshaft-50 dark:scheme-dark">
<PageHeader
title="Secrets Management"
description={
@@ -847,7 +847,7 @@ const Page = () => {
<div
ref={tableRef}
className={twMerge(
"thin-scrollbar mt-3 overflow-y-auto overflow-x-hidden rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300",
"mt-3 thin-scrollbar overflow-x-hidden overflow-y-auto rounded-md bg-mineshaft-800 text-left text-sm text-bunker-300",
isNotEmpty && "rounded-b-none"
)}
>
@@ -888,11 +888,11 @@ const Page = () => {
}`}
onMouseDown={handleMouseDown}
/>
<div className="pointer-events-none absolute -right-[0.04rem] top-2 z-30">
<div className="pointer-events-none absolute top-2 -right-[0.04rem] z-30">
<div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
</div>
<div
className="flex flex-shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
className="flex shrink-0 items-center border-r border-mineshaft-600 py-2 pl-4"
style={{ width: colWidth }}
role="button"
tabIndex={0}
@@ -908,7 +908,7 @@ const Page = () => {
/>
</div>
</div>
<div className="flex-grow px-4 py-2">Value</div>
<div className="grow px-4 py-2">Value</div>
</div>
)}
{hasPathPolicies &&
@@ -923,7 +923,7 @@ const Page = () => {
<div className="flex items-center text-sm">
<FontAwesomeIcon
icon={faInfoCircle}
className="ml-[0.15rem] mr-[1.65rem] text-primary"
className="mr-[1.65rem] ml-[0.15rem] text-primary"
/>
<span>You do not have permission to read secrets in this folder</span>
</div>
@@ -943,7 +943,7 @@ const Page = () => {
<div className="flex items-center text-sm">
<FontAwesomeIcon
icon={faInfoCircle}
className="ml-[0.15rem] mr-[1.65rem] text-primary"
className="mr-[1.65rem] ml-[0.15rem] text-primary"
/>
<span>
You do not have permission to {!canEditSecrets ? "edit" : ""}
@@ -687,7 +687,7 @@ export const ActionBar = ({
size="sm"
variant="outline_bg"
className={twMerge(
"flex h-[2.5rem]",
"flex h-10",
isTableFiltered && "border-primary/40 bg-primary/10"
)}
leftIcon={
@@ -784,7 +784,7 @@ export const ActionBar = ({
{Boolean(filteredTags) && <Badge>{filteredTags} Applied</Badge>}
</div>
</DropdownSubMenuTrigger>
<DropdownSubMenuContent className="thin-scrollbar max-h-[20rem] overflow-y-auto rounded-l-none">
<DropdownSubMenuContent className="max-h-80 thin-scrollbar overflow-y-auto rounded-l-none">
<DropdownMenuLabel className="sticky top-0 bg-mineshaft-900">
<div className="flex w-full items-center justify-between">
<span>Filter by Secret Tags</span>
@@ -823,7 +823,7 @@ export const ActionBar = ({
Clear Filters
</Button>
)}
<div className="flex-grow" />
<div className="grow" />
<div>
{isProtectedBranch && (
<Tooltip content={`Protected by policy ${protectedBranchPolicyName}`}>
@@ -1066,7 +1066,7 @@ export const ActionBar = ({
</div>
<div
className={twMerge(
"h-0 flex-shrink-0 overflow-hidden transition-all",
"h-0 shrink-0 overflow-hidden transition-all",
isMultiSelectActive && "h-16"
)}
>
@@ -139,7 +139,7 @@ export const AwsElastiCacheInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -189,7 +189,7 @@ export const AwsElastiCacheInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -201,7 +201,7 @@ export const AwsElastiCacheInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Cluster name"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -195,7 +195,7 @@ export const AwsIamInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -245,7 +245,7 @@ export const AwsIamInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -318,7 +318,7 @@ export const AwsIamInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="AWS Access Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -333,7 +333,7 @@ export const AwsIamInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="AWS Secret Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -352,7 +352,7 @@ export const AwsIamInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Assume Role ARN"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -371,7 +371,7 @@ export const AwsIamInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="AWS IAM Path"
className="flex-grow"
className="grow"
isOptional
isError={Boolean(error?.message)}
errorText={error?.message}
@@ -391,7 +391,7 @@ export const AwsIamInputForm = ({
className={
credentialType === DynamicSecretAwsIamCredentialType.TemporaryCredentials
? "w-full"
: "flex-grow"
: "grow"
}
isError={Boolean(error?.message)}
errorText={error?.message}
@@ -149,7 +149,7 @@ export const AzureEntraIdInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -199,11 +199,11 @@ export const AzureEntraIdInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -224,7 +224,7 @@ export const AzureEntraIdInputForm = ({
</div>
</div>
<div className="flex flex-col">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -245,7 +245,7 @@ export const AzureEntraIdInputForm = ({
</div>
</div>
<div className="flex flex-col">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -267,7 +267,7 @@ export const AzureEntraIdInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Select Users
</div>
<div className="mb-4 flex items-center text-sm font-normal text-mineshaft-400">
@@ -201,7 +201,7 @@ export const AzureSqlDatabaseInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -253,7 +253,7 @@ export const AzureSqlDatabaseInputForm = ({
</div>
<MetadataForm control={control} />
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div>
@@ -316,7 +316,7 @@ export const AzureSqlDatabaseInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -340,7 +340,7 @@ export const AzureSqlDatabaseInputForm = ({
/>
</div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="provider.username"
@@ -356,7 +356,7 @@ export const AzureSqlDatabaseInputForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="provider.password"
@@ -371,7 +371,7 @@ export const AzureSqlDatabaseInputForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="provider.database"
@@ -389,7 +389,7 @@ export const AzureSqlDatabaseInputForm = ({
</div>
</div>
<div>
<div className="mb-2 mt-2">
<div className="mt-2 mb-2">
<Controller
control={control}
name="provider.sslEnabled"
@@ -534,7 +534,7 @@ export const AzureSqlDatabaseInputForm = ({
</AccordionContent>
</AccordionItem>
</Accordion>
<Accordion type="multiple" className="mb-2 mt-4 w-full bg-mineshaft-700">
<Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
<AccordionItem value="password-config">
<AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
<AccordionContent>
@@ -140,7 +140,7 @@ export const CassandraInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -190,7 +190,7 @@ export const CassandraInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -202,7 +202,7 @@ export const CassandraInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -68,7 +68,7 @@ const BucketScopesConfiguration = ({
{scopeFields.map((_scope: any, scopeIndex: number) => (
<div
key={`scope-${scopeIndex + 1}`}
className="space-y-3 rounded border border-mineshaft-600 bg-mineshaft-700 p-3"
className="space-y-3 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-3"
>
<div className="flex items-center justify-between">
<h5 className="text-xs font-medium text-mineshaft-200">Scope {scopeIndex + 1}</h5>
@@ -146,7 +146,7 @@ const BucketScopesConfiguration = ({
{(!scopeFields[scopeIndex]?.collections ||
scopeFields[scopeIndex].collections.length === 0) && (
<div className="text-xs italic text-mineshaft-400">
<div className="text-xs text-mineshaft-400 italic">
No collections specified (access to all collections in scope)
</div>
)}
@@ -155,7 +155,7 @@ const BucketScopesConfiguration = ({
))}
{scopeFields.length === 0 && (
<div className="rounded border border-dashed border-mineshaft-600 bg-mineshaft-700 p-4 text-center">
<div className="rounded-sm border border-dashed border-mineshaft-600 bg-mineshaft-700 p-4 text-center">
<p className="mb-2 text-xs text-mineshaft-400">
No scopes configured (access to all scopes in bucket)
</p>
@@ -412,7 +412,7 @@ export const CouchbaseInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -462,7 +462,7 @@ export const CouchbaseInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -639,7 +639,7 @@ export const CouchbaseInputForm = ({
(bucketsValue as any[]).map((_, bucketIndex) => (
<div
key={`bucket-${bucketIndex + 1}`}
className="space-y-4 rounded border border-mineshaft-600 bg-mineshaft-800 p-4"
className="space-y-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4"
>
<div className="flex items-center justify-between">
<h4 className="text-sm font-medium text-mineshaft-200">
@@ -683,7 +683,7 @@ export const CouchbaseInputForm = ({
))}
{(!Array.isArray(bucketsValue) || bucketsValue.length === 0) && (
<div className="rounded border border-dashed border-mineshaft-600 p-8 text-center">
<div className="rounded-sm border border-dashed border-mineshaft-600 p-8 text-center">
<p className="mb-2 text-sm text-mineshaft-400">No buckets configured</p>
<Button
type="button"
@@ -710,7 +710,7 @@ export const CouchbaseInputForm = ({
label="API Key"
>
<SecretInput
containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
value={value}
valueAlwaysHidden
rows={1}
@@ -741,7 +741,7 @@ export const CouchbaseInputForm = ({
</FormControl>
)}
/>
<Accordion type="multiple" className="mb-2 mt-4 w-full bg-mineshaft-700">
<Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
<AccordionItem value="password-config">
<AccordionTrigger>
<div className="flex items-center space-x-2">
@@ -211,7 +211,7 @@ export const CreateDynamicSecretForm = ({
rel="noopener noreferrer"
>
<div className="inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -238,7 +238,7 @@ export const CreateDynamicSecretForm = ({
{DYNAMIC_SECRET_LIST.map(({ icon, provider, title }) => (
<div
key={`dynamic-secret-provider-${provider}`}
className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
className="flex h-32 w-32 cursor-pointer flex-col items-center space-y-4 rounded-sm border border-mineshaft-500 bg-bunker-600 p-6 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
role="button"
tabIndex={0}
onClick={() => {
@@ -253,7 +253,7 @@ export const CreateDynamicSecretForm = ({
}}
>
{icon}
<div className="whitespace-pre-wrap text-center text-sm">{title}</div>
<div className="text-center text-sm whitespace-pre-wrap">{title}</div>
</div>
))}
</div>
@@ -162,7 +162,7 @@ export const ElasticSearchInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -212,7 +212,7 @@ export const ElasticSearchInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -224,7 +224,7 @@ export const ElasticSearchInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -367,7 +367,7 @@ export const ElasticSearchInputForm = ({
<div className="flex h-9 items-center gap-2">
<Input
placeholder="Insert role name, (superuser, kibana_admin, custom_role)"
className="mb-0 flex-grow"
className="mb-0 grow"
{...field}
/>
<IconButton
@@ -112,7 +112,7 @@ export const GcpIamInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -162,7 +162,7 @@ export const GcpIamInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
@@ -174,7 +174,7 @@ export const GcpIamInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Service Account Email"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
helperText={
@@ -99,7 +99,7 @@ export const GithubInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -125,7 +125,7 @@ export const GithubInputForm = ({
<FontAwesomeIcon
icon={faQuestionCircle}
size="sm"
className="relative bottom-px right-1"
className="relative right-1 bottom-px"
/>
</Tooltip>
}
@@ -137,7 +137,7 @@ export const GithubInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
@@ -148,7 +148,7 @@ export const GithubInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="App ID"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
isRequired
@@ -164,7 +164,7 @@ export const GithubInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Installation ID"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
isRequired
@@ -180,14 +180,14 @@ export const GithubInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="App Private Key PEM"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
isRequired
>
<SecretInput
{...field}
containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
/>
</FormControl>
)}
@@ -236,7 +236,7 @@ export const KubernetesInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -286,12 +286,12 @@ export const KubernetesInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<div>
<OrgPermissionCan
I={OrgGatewayPermissionActions.AttachGateways}
@@ -599,7 +599,7 @@ export const KubernetesInputForm = ({
<Input
{...control.register(`provider.audiences.${index}`)}
placeholder="Enter audience"
className="flex-grow"
className="grow"
/>
<IconButton
onClick={() => remove(index)}
@@ -166,7 +166,7 @@ export const LdapInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -216,12 +216,12 @@ export const LdapInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="provider.url"
@@ -171,7 +171,7 @@ export const MongoAtlasInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -221,7 +221,7 @@ export const MongoAtlasInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -233,7 +233,7 @@ export const MongoAtlasInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Admin Public Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -248,7 +248,7 @@ export const MongoAtlasInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Admin Private Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -276,7 +276,7 @@ export const MongoAtlasInputForm = ({
<div className="mb-3 flex flex-col space-y-2">
{roleFields.fields.map(({ id: roleFieldId }, i) => (
<div key={roleFieldId} className="flex items-end space-x-2">
<div className="flex-grow">
<div className="grow">
{i === 0 && <span className="text-xs text-mineshaft-400">Database Name</span>}
<Controller
control={control}
@@ -292,7 +292,7 @@ export const MongoAtlasInputForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
{i === 0 && (
<FormLabel
label="Collection Name"
@@ -314,7 +314,7 @@ export const MongoAtlasInputForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
{i === 0 && (
<FormLabel
label="Role"
@@ -331,7 +331,7 @@ export const MongoAtlasInputForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input {...field} />
</FormControl>
@@ -399,7 +399,7 @@ export const MongoAtlasInputForm = ({
<div className="mb-2 flex flex-col space-y-2">
{scopeFields.fields.map(({ id: scopeFieldId }, i) => (
<div key={scopeFieldId} className="flex items-end space-x-2">
<div className="flex-grow">
<div className="grow">
{i === 0 && (
<FormLabel
label="Label"
@@ -415,14 +415,14 @@ export const MongoAtlasInputForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input {...field} placeholder="Cluster or data lake id" />
</FormControl>
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
{i === 0 && <span className="text-xs text-mineshaft-400">Type</span>}
<Controller
control={control}
@@ -431,7 +431,7 @@ export const MongoAtlasInputForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Select
defaultValue={field.value}
@@ -148,7 +148,7 @@ export const MongoDBDatabaseInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -198,7 +198,7 @@ export const MongoDBDatabaseInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -210,7 +210,7 @@ export const MongoDBDatabaseInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -283,10 +283,10 @@ export const MongoDBDatabaseInputForm = ({
tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role.
Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
/>
<div className="mb-3 mt-1 flex flex-col space-y-2">
<div className="mt-1 mb-3 flex flex-col space-y-2">
{roleFields.fields.map(({ id: roleFieldId }, i) => (
<div key={roleFieldId} className="flex items-end space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name={`provider.roles.${i}.roleName`}
@@ -294,7 +294,7 @@ export const MongoDBDatabaseInputForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input {...field} />
</FormControl>
@@ -151,7 +151,7 @@ export const RabbitMqInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -201,7 +201,7 @@ export const RabbitMqInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -213,7 +213,7 @@ export const RabbitMqInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -374,7 +374,7 @@ export const RabbitMqInputForm = ({
<div className="flex h-9 items-center gap-2">
<Input
placeholder="Insert tag name, (management, policymaker, etc.)"
className="mb-0 flex-grow"
className="mb-0 grow"
{...field}
/>
<IconButton
@@ -133,7 +133,7 @@ export const RedisInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -183,7 +183,7 @@ export const RedisInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -195,7 +195,7 @@ export const RedisInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -134,7 +134,7 @@ sp_droplogin '{{username}}';`
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -184,7 +184,7 @@ sp_droplogin '{{username}}';`
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -196,7 +196,7 @@ sp_droplogin '{{username}}';`
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -134,7 +134,7 @@ DROP USER {{username}};`,
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -184,7 +184,7 @@ DROP USER {{username}};`,
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -196,7 +196,7 @@ DROP USER {{username}};`,
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -131,7 +131,7 @@ export const SnowflakeInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -181,7 +181,7 @@ export const SnowflakeInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -193,7 +193,7 @@ export const SnowflakeInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Account Identifier"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -208,7 +208,7 @@ export const SnowflakeInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Organization Identifier"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -225,7 +225,7 @@ export const SnowflakeInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="User"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -240,7 +240,7 @@ export const SnowflakeInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Password"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -256,7 +256,7 @@ export const SqlDatabaseInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -308,7 +308,7 @@ export const SqlDatabaseInputForm = ({
</div>
<MetadataForm control={control} />
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div>
@@ -394,7 +394,7 @@ export const SqlDatabaseInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -462,7 +462,7 @@ export const SqlDatabaseInputForm = ({
</div>
<div>
{selectedClient === SqlProviders.MsSQL && (
<div className="mb-2 mt-2">
<div className="mt-2 mb-2">
<Controller
control={control}
name="provider.sslEnabled"
@@ -587,7 +587,7 @@ export const SqlDatabaseInputForm = ({
</AccordionContent>
</AccordionItem>
</Accordion>
<Accordion type="multiple" className="mb-2 mt-4 w-full bg-mineshaft-700">
<Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
<AccordionItem value="password-config">
<AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
<AccordionContent>
@@ -124,7 +124,7 @@ export const TotpInputForm = ({
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -142,7 +142,7 @@ export const TotpInputForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -183,7 +183,7 @@ export const TotpInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="OTP URL"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -201,7 +201,7 @@ export const TotpInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Secret Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -217,7 +217,7 @@ export const TotpInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Period"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -236,7 +236,7 @@ export const TotpInputForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Digits"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -172,7 +172,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
<form onSubmit={handleSubmit(handleCreateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -222,7 +222,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div>
@@ -285,7 +285,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -415,7 +415,7 @@ GRANT CREATE ON SCHEMA public TO {{username}};`,
</AccordionContent>
</AccordionItem>
</Accordion>
<Accordion type="multiple" className="mb-2 mt-4 w-full bg-mineshaft-700">
<Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
<AccordionItem value="password-config">
<AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
<AccordionContent>
@@ -114,7 +114,7 @@ export const FolderForm = ({
rows={3}
ref={descriptionRef}
onInput={handleInput}
className="thin-scrollbar w-full !resize-none bg-mineshaft-900"
className="thin-scrollbar w-full resize-none! bg-mineshaft-900"
maxLength={255}
/>
</FormControl>
@@ -278,7 +278,7 @@ export const ReplicateFolderFromBoard = ({
<FormControl
tooltipText="The folder to use as a root for replication. Using /foo as a root for /foo/bar will result in /bar being copied to this context."
label="Source Root Path"
className="flex-grow"
className="grow"
isRequired
>
<SecretPathInput
@@ -296,7 +296,7 @@ export const ReplicateFolderFromBoard = ({
render={({ field: { onChange } }) => (
<FormControl
tooltipText="The folders and secrets to replicate into this context"
className="flex-grow"
className="grow"
label="Affected Subjects"
isRequired
>
@@ -109,11 +109,11 @@ const Folder: React.FC<FolderProps> = ({
return (
<div className={`folder-container ml-${level > 0 ? "4" : 0}`}>
<Collapsible open={open} onOpenChange={setOpen}>
<div className="group flex items-center rounded px-2 py-1">
<div className="group flex items-center rounded-sm px-2 py-1">
<CollapsibleTrigger asChild>
<button
type="button"
className="mr-1 flex h-6 w-6 items-center justify-center rounded focus:outline-none"
className="mr-1 flex h-6 w-6 items-center justify-center rounded-sm focus:outline-hidden"
disabled={!hasContents}
aria-label={open ? "Collapse folder" : "Expand folder"}
>
@@ -142,7 +142,7 @@ const Folder: React.FC<FolderProps> = ({
<label
htmlFor={`folder-${path}`}
className={`ml-2 flex-1 cursor-pointer truncate ${basePath ? "italic text-mineshaft-300" : ""}`}
className={`ml-2 flex-1 cursor-pointer truncate ${basePath ? "text-mineshaft-300 italic" : ""}`}
title={displayName}
>
{displayName || `${basePath}`}
@@ -157,10 +157,10 @@ const Folder: React.FC<FolderProps> = ({
<CollapsibleContent className="overflow-hidden transition-all duration-300 ease-in-out">
<div className="relative mt-1">
<div className="absolute bottom-0 left-5 top-0 w-px bg-mineshaft-600" />
<div className="absolute top-0 bottom-0 left-5 w-px bg-mineshaft-600" />
{structure.items.map((item) => (
<div key={item.id} className="group ml-6 flex items-center rounded px-2 py-1">
<div className="ml-6 mr-2">
<div key={item.id} className="group ml-6 flex items-center rounded-sm px-2 py-1">
<div className="mr-2 ml-6">
<FontAwesomeIcon icon={faKey} className="h-3 w-3" />
</div>
{!isDisabled && (
@@ -295,7 +295,7 @@ export const SecretTreeView: React.FC<TreeViewProps> = ({
return (
<div className="flex w-full items-start gap-3 rounded-lg border border-mineshaft-600 bg-mineshaft-900">
<div className={`w-full rounded-lg shadow-sm ${className}`}>
<div className={`w-full rounded-lg shadow-xs ${className}`}>
<div className="h-[25vh] overflow-auto p-3">
{isEmptyData ? (
<div className="flex h-full w-full items-center justify-center text-center text-mineshaft-300">
@@ -321,7 +321,7 @@ export const SecretTreeView: React.FC<TreeViewProps> = ({
</div>
{!isDisabled && (
<div className="flex justify-end pb-2 pr-2 pt-2">
<div className="flex justify-end pt-2 pr-2 pb-2">
<h3 className="flex items-center text-mineshaft-400">
{selectedItems.length} Item{selectedItems.length === 1 ? "" : "s"} Selected
</h3>
@@ -343,13 +343,13 @@ export const CommitForm: React.FC<CommitFormProps> = ({
</div>
{/* Right Buttons */}
<div className="ml-6 mt-0.5 flex items-center gap-3">
<div className="mt-0.5 ml-6 flex items-center gap-3">
<Button
size="sm"
onClick={() => clearAllPendingChanges({ projectId, environment, secretPath })}
isDisabled={totalChangesCount === 0}
variant="outline_bg"
className="px-4 hover:border-red/40 hover:bg-red/[0.1]"
className="px-4 hover:border-red/40 hover:bg-red/10"
>
Discard
</Button>
@@ -392,7 +392,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
{/* Folder Changes */}
{pendingChanges.folders.length > 0 && (
<div>
<h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-semibold text-mineshaft-200">
<h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-medium text-mineshaft-200">
<FontAwesomeIcon icon={faFolder} className="text-mineshaft-300" />
Folders ({pendingChanges.folders.length})
</h4>
@@ -413,7 +413,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
{/* Secret Changes */}
{pendingChanges.secrets.length > 0 && (
<div>
<h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-semibold text-mineshaft-200">
<h4 className="mb-4 flex items-center gap-2 border-b border-mineshaft-700 pb-2 text-sm font-medium text-mineshaft-200">
<FontAwesomeIcon icon={faKey} className="mr-1 text-mineshaft-300" />
Secrets ({pendingChanges.secrets.length})
</h4>
@@ -303,7 +303,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
onChangePerPage={handlePerPageChange}
/>
)}
<div className="thin-scrollbar flex flex-1 flex-col overflow-y-auto">
<div className="flex thin-scrollbar flex-1 flex-col overflow-y-auto">
<TableContainer
ref={tableRef}
className={twMerge(
@@ -344,14 +344,14 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
}`}
onMouseDown={handleMouseDown}
/>
<div className="pointer-events-none absolute -right-[0.02rem] top-[0.67rem] z-30">
<div className="pointer-events-none absolute top-[0.67rem] -right-[0.02rem] z-30">
<div className="h-5 w-0.5 rounded-[1.5px] bg-gray-400 opacity-50" />
</div>
<div className="flex h-full items-center border-b-2 border-r border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 px-4 py-2.5 text-sm normal-case">
<div className="flex h-full items-center border-r border-b-2 border-mineshaft-500 bg-mineshaft-700 bg-clip-padding p-0 px-4 py-2.5 text-sm normal-case">
Name
<IconButton
variant="plain"
className="ml-1 mt-[0.1rem]"
className="mt-[0.1rem] ml-1"
ariaLabel="sort"
onClick={() =>
setOrderDirection((prev) =>
@@ -376,7 +376,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
return (
<Th
className="whitespace-nowrap border-none p-0 text-center"
className="border-none p-0 text-center whitespace-nowrap"
key={`environment-${slug}`}
>
<div
@@ -398,7 +398,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
>
<Badge
variant="primary"
className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] font-normal leading-3"
className="-mt-[0.05rem] flex h-4 items-center gap-x-1 pt-[0.1rem] leading-3 font-normal"
>
<FontAwesomeIcon icon={faWarning} className="-mt-[0.1rem] w-2.5" />
{missingKeyCount}
@@ -499,7 +499,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
size="sm"
variant="outline_bg"
className={twMerge(
"flex h-[2.5rem]",
"flex h-10",
isTableFiltered && "border-primary/40 bg-primary/10"
)}
leftIcon={
@@ -513,7 +513,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="thin-scrollbar max-h-[70vh] overflow-y-auto"
className="max-h-[70vh] thin-scrollbar overflow-y-auto"
align="end"
sideOffset={2}
>
@@ -574,7 +574,7 @@ export const CompareEnvironments = ({ secretPath }: Props) => {
</DropdownMenu>
)}
</div>
<div className="!z-[99999999]">
<div className="z-99999999!">
<FormLabel label="Select Environments to Compare" />
<FilterableSelect
value={selectedEnvironments}
@@ -76,7 +76,7 @@ export const SecretRotationRow = ({
style={{ minWidth: tableWidth, maxWidth: tableWidth }}
className="sticky left-0 bg-clip-padding px-0 py-0"
>
<div className="flex !h-[40px] items-center justify-between gap-x-2 bg-mineshaft-800 px-4">
<div className="flex h-[40px]! items-center justify-between gap-x-2 bg-mineshaft-800 px-4">
<div className="w-full">
<div className="flex w-full flex-wrap items-center gap-x-2.5">
<span>{envName}</span>
@@ -110,7 +110,7 @@ export const SecretRotationRow = ({
</Tooltip>
</div>
<TableContainer className="rounded-none border-0">
<table className="secret-table w-full border-b-0 !bg-mineshaft-900">
<table className="secret-table w-full border-b-0 bg-mineshaft-900!">
<tbody className="!last:border-b-0 w-full border-t-2 border-mineshaft-600">
{secrets.map((secret, index) => {
return (
@@ -129,7 +129,7 @@ export const SecretRotationRow = ({
style={{
width: colWidth
}}
className="!h-[1px] border-none !p-0"
className="h-px! border-none p-0!"
>
<div
className="flex h-full flex-1 items-center border-r border-mineshaft-500 px-4 py-1"
@@ -137,15 +137,15 @@ export const SecretRotationRow = ({
width: colWidth
}}
>
<span className={twMerge(!secret && "blur", "truncate")}>
<span className={twMerge(!secret && "blur-sm", "truncate")}>
{secret?.key ?? "********"}
</span>
</div>
</td>
<td className="!h-[40px] !px-4">
<td className="h-[40px]! px-4!">
{/* eslint-disable-next-line no-nested-ternary */}
{!secret ? (
<div className="h-full pl-4 blur">********</div>
<div className="h-full pl-4 blur-sm">********</div>
) : secret.secretValueHidden ? (
<Blur
className="py-0"
@@ -30,7 +30,7 @@ export const EnvironmentSecretRow = ({
<FontAwesomeIcon className="pl-2" size="sm" icon={faEyeSlash} />
</Tooltip>
)}
<div className="flex-1 pl-3 pr-2">
<div className="flex-1 pr-2 pl-3">
<InfisicalSecretInput
onChange={() => {}}
isReadOnly
@@ -143,7 +143,7 @@ export const SecretRow = ({
<th style={{ padding: "0.5rem 1rem" }} className="border-none">
Value
</th>
<div className="absolute right-3 top-[4px] ml-auto mr-1 mt-1 w-min">
<div className="absolute top-[4px] right-3 mt-1 mr-1 ml-auto w-min">
<Tooltip
side="left"
content={isSecretVisible ? "Hide Values" : "Reveal Values"}
@@ -173,7 +173,7 @@ export const SecretRow = ({
className="h-full hover:bg-mineshaft-700/70"
>
<td
className="h-[1px] border-none !p-0"
className="h-px border-none p-0!"
style={{
width: colWidth
}}
@@ -183,7 +183,7 @@ export const SecretRow = ({
style={{
width: colWidth
}}
className="flex h-full min-h-[40px] w-[8rem] items-center space-x-2 border-r border-mineshaft-500 px-4"
className="flex h-full min-h-[40px] w-32 items-center space-x-2 border-r border-mineshaft-500 px-4"
>
<span className="truncate">{name}</span>
{isImportedSecret && (
@@ -37,7 +37,7 @@ const OutputDisplay = ({
return (
<div className="relative">
<FormControl label={label} className="flex-grow" helperText={helperText}>
<FormControl label={label} className="grow" helperText={helperText}>
<SecretInput
isReadOnly
value={value}
@@ -49,7 +49,7 @@ const OutputDisplay = ({
ariaLabel="Copy to clipboard"
variant="plain"
size="md"
className="absolute right-2 top-7"
className="absolute top-7 right-2"
onClick={() => {
navigator.clipboard.writeText(value as string);
setCopyText("Copied");
@@ -291,7 +291,7 @@ const renderOutputForm = (
value={PASSWORD}
helperText="Important: Copy these credentials now. You will not be able to see them again after you close the modal."
/>
<FormControl label="DNs" className="flex-grow">
<FormControl label="DNs" className="grow">
<SecretInput
isReadOnly
isVisible
@@ -118,7 +118,7 @@ export const DynamicSecretListView = ({
<div className="flex w-11 items-center px-5 py-3 text-yellow-700">
<FontAwesomeIcon icon={faFingerprint} />
</div>
<div className="flex flex-grow items-center px-4 py-3" role="button" tabIndex={0}>
<div className="flex grow items-center px-4 py-3" role="button" tabIndex={0}>
{secret.name}
<Tag className="ml-4 px-2 py-0 text-xs normal-case">
{formatProviderName(secret.type)}
@@ -134,7 +134,7 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
<div>
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -181,7 +181,7 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -193,7 +193,7 @@ export const EditDynamicSecretAwsElastiCacheProviderForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Cluster name"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -174,7 +174,7 @@ export const EditDynamicSecretAwsIamForm = ({
<div>
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -292,7 +292,7 @@ export const EditDynamicSecretAwsIamForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="AWS Access Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -307,7 +307,7 @@ export const EditDynamicSecretAwsIamForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="AWS Secret Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -326,7 +326,7 @@ export const EditDynamicSecretAwsIamForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Assume Role ARN"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -345,7 +345,7 @@ export const EditDynamicSecretAwsIamForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="AWS IAM Path"
className="flex-grow"
className="grow"
isOptional
isError={Boolean(error?.message)}
errorText={error?.message}
@@ -365,7 +365,7 @@ export const EditDynamicSecretAwsIamForm = ({
className={
credentialType === DynamicSecretAwsIamCredentialType.TemporaryCredentials
? "w-full"
: "flex-grow"
: "grow"
}
isError={Boolean(error?.message)}
errorText={error?.message}
@@ -109,7 +109,7 @@ export const EditDynamicSecretAzureEntraIdForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -160,7 +160,7 @@ export const EditDynamicSecretAzureEntraIdForm = ({
</div>
</div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -175,7 +175,7 @@ export const EditDynamicSecretAzureEntraIdForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -193,7 +193,7 @@ export const EditDynamicSecretAzureEntraIdForm = ({
</div>
</div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -209,7 +209,7 @@ export const EditDynamicSecretAzureEntraIdForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -230,7 +230,7 @@ export const EditDynamicSecretAzureEntraIdForm = ({
</div>
</div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -196,7 +196,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -245,7 +245,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
</div>
<MetadataForm control={control} />
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div>
@@ -306,7 +306,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -329,7 +329,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
/>
</div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="inputs.username"
@@ -344,7 +344,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="inputs.password"
@@ -359,7 +359,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="inputs.database"
@@ -376,7 +376,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
</div>
</div>
<div>
<div className="mb-2 mt-2">
<div className="mt-2 mb-2">
<Controller
control={control}
name="inputs.sslEnabled"
@@ -520,7 +520,7 @@ export const EditDynamicSecretAzureSqlDatabaseForm = ({
</AccordionContent>
</AccordionItem>
</Accordion>
<Accordion type="multiple" className="mb-2 mt-4 w-full bg-mineshaft-700">
<Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
<AccordionItem value="password-config">
<AccordionTrigger>Password Configuration (optional)</AccordionTrigger>
<AccordionContent>
@@ -136,7 +136,7 @@ export const EditDynamicSecretCassandraForm = ({
<div>
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -193,7 +193,7 @@ export const EditDynamicSecretCassandraForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -68,7 +68,7 @@ const BucketScopesConfiguration = ({
{scopeFields.map((_scope: any, scopeIndex: number) => (
<div
key={`scope-${scopeIndex + 1}`}
className="space-y-3 rounded border border-mineshaft-600 bg-mineshaft-700 p-3"
className="space-y-3 rounded-sm border border-mineshaft-600 bg-mineshaft-700 p-3"
>
<div className="flex items-center justify-between">
<h5 className="text-xs font-medium text-mineshaft-200">Scope {scopeIndex + 1}</h5>
@@ -145,7 +145,7 @@ const BucketScopesConfiguration = ({
{(!scopeFields[scopeIndex]?.collections ||
scopeFields[scopeIndex].collections.length === 0) && (
<div className="text-xs italic text-mineshaft-400">
<div className="text-xs text-mineshaft-400 italic">
No collections specified (access to all collections in scope)
</div>
)}
@@ -154,7 +154,7 @@ const BucketScopesConfiguration = ({
))}
{scopeFields.length === 0 && (
<div className="rounded border border-dashed border-mineshaft-600 bg-mineshaft-700 p-4 text-center">
<div className="rounded-sm border border-dashed border-mineshaft-600 bg-mineshaft-700 p-4 text-center">
<p className="mb-2 text-xs text-mineshaft-400">
No scopes configured (access to all scopes in bucket)
</p>
@@ -424,7 +424,7 @@ export const EditDynamicSecretCouchbaseForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -474,7 +474,7 @@ export const EditDynamicSecretCouchbaseForm = ({
</div>
<MetadataForm control={control} />
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col space-y-4">
@@ -646,7 +646,7 @@ export const EditDynamicSecretCouchbaseForm = ({
(bucketsValue as any[]).map((_, bucketIndex) => (
<div
key={`bucket-${bucketIndex + 1}`}
className="space-y-4 rounded border border-mineshaft-600 bg-mineshaft-800 p-4"
className="space-y-4 rounded-sm border border-mineshaft-600 bg-mineshaft-800 p-4"
>
<div className="flex items-center justify-between">
<h4 className="text-sm font-medium text-mineshaft-200">
@@ -690,7 +690,7 @@ export const EditDynamicSecretCouchbaseForm = ({
))}
{(!Array.isArray(bucketsValue) || bucketsValue.length === 0) && (
<div className="rounded border border-dashed border-mineshaft-600 p-8 text-center">
<div className="rounded-sm border border-dashed border-mineshaft-600 p-8 text-center">
<p className="mb-2 text-sm text-mineshaft-400">No buckets configured</p>
<Button
type="button"
@@ -717,7 +717,7 @@ export const EditDynamicSecretCouchbaseForm = ({
label="API Key"
>
<SecretInput
containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
value={value}
valueAlwaysHidden
rows={1}
@@ -745,7 +745,7 @@ export const EditDynamicSecretCouchbaseForm = ({
</FormControl>
)}
/>
<Accordion type="multiple" className="mb-2 mt-4 w-full bg-mineshaft-700">
<Accordion type="multiple" className="mt-4 mb-2 w-full bg-mineshaft-700">
<AccordionItem value="password-config">
<AccordionTrigger>
<div className="flex items-center space-x-2">
@@ -160,7 +160,7 @@ export const EditDynamicSecretElasticSearchForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -210,7 +210,7 @@ export const EditDynamicSecretElasticSearchForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -222,7 +222,7 @@ export const EditDynamicSecretElasticSearchForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -353,11 +353,11 @@ export const EditDynamicSecretElasticSearchForm = ({
key={`role-${i}`}
render={({ field, fieldState: { error } }) => (
<div className="flex items-center gap-2">
<div className="flex-grow">
<div className="grow">
<FormControl isError={Boolean(error?.message)} errorText={error?.message}>
<Input
placeholder="Insert role name, (superuser, kibana_admin, custom_role)"
className="mb-0 flex-grow"
className="mb-0 grow"
{...field}
/>
</FormControl>
@@ -108,7 +108,7 @@ export const EditDynamicSecretGcpIamForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -155,7 +155,7 @@ export const EditDynamicSecretGcpIamForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
@@ -165,7 +165,7 @@ export const EditDynamicSecretGcpIamForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Service Account Email"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -90,7 +90,7 @@ export const EditDynamicSecretGithubForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -115,7 +115,7 @@ export const EditDynamicSecretGithubForm = ({
<FontAwesomeIcon
icon={faQuestionCircle}
size="sm"
className="relative bottom-px right-1"
className="relative right-1 bottom-px"
/>
</Tooltip>
}
@@ -127,7 +127,7 @@ export const EditDynamicSecretGithubForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
@@ -138,7 +138,7 @@ export const EditDynamicSecretGithubForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="App ID"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
isRequired
@@ -154,7 +154,7 @@ export const EditDynamicSecretGithubForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Installation ID"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
isRequired
@@ -170,14 +170,14 @@ export const EditDynamicSecretGithubForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="App Private Key PEM"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
isRequired
>
<SecretInput
{...field}
containerClassName="text-gray-400 group-focus-within:!border-primary-400/50 border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
containerClassName="text-gray-400 group-focus-within:border-primary-400/50! border border-mineshaft-500 bg-mineshaft-900 px-2.5 py-1.5"
/>
</FormControl>
)}
@@ -228,7 +228,7 @@ export const EditDynamicSecretKubernetesForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -278,12 +278,12 @@ export const EditDynamicSecretKubernetesForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<div>
<OrgPermissionCan
I={OrgGatewayPermissionActions.AttachGateways}
@@ -597,7 +597,7 @@ export const EditDynamicSecretKubernetesForm = ({
<Input
{...control.register(`inputs.audiences.${index}`)}
placeholder="Enter audience"
className="flex-grow"
className="grow"
/>
<IconButton
onClick={() => remove(index)}
@@ -152,7 +152,7 @@ export const EditDynamicSecretLdapForm = ({
<div>
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -175,7 +175,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
<div>
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -222,7 +222,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -234,7 +234,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Admin Public Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -249,7 +249,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Admin Private Key"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -277,7 +277,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
<div className="mb-3 flex flex-col space-y-2">
{roleFields.fields.map(({ id: roleFieldId }, i) => (
<div key={roleFieldId} className="flex items-end space-x-2">
<div className="flex-grow">
<div className="grow">
{i === 0 && <span className="text-xs text-mineshaft-400">Database Name</span>}
<Controller
control={control}
@@ -293,7 +293,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
{i === 0 && (
<FormLabel
label="Collection Name"
@@ -315,7 +315,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
{i === 0 && (
<FormLabel
label="Role"
@@ -332,7 +332,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input {...field} />
</FormControl>
@@ -399,7 +399,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
<div className="mb-2 flex flex-col space-y-2">
{scopeFields.fields.map(({ id: scopeFieldId }, i) => (
<div key={scopeFieldId} className="flex items-end space-x-2">
<div className="flex-grow">
<div className="grow">
{i === 0 && (
<FormLabel
label="Label"
@@ -415,14 +415,14 @@ export const EditDynamicSecretMongoAtlasForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input {...field} placeholder="Cluster or data lake id" />
</FormControl>
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
{i === 0 && <span className="text-xs text-mineshaft-400">Type</span>}
<Controller
control={control}
@@ -431,7 +431,7 @@ export const EditDynamicSecretMongoAtlasForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Select
defaultValue={field.value}
@@ -146,7 +146,7 @@ export const EditDynamicSecretMongoDBForm = ({
<div>
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -193,7 +193,7 @@ export const EditDynamicSecretMongoDBForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -205,7 +205,7 @@ export const EditDynamicSecretMongoDBForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -278,10 +278,10 @@ export const EditDynamicSecretMongoDBForm = ({
tooltipText={`Human-readable label that identifies a group of privileges assigned to a database user. This value can either be a built-in role or a custom role.
Built-in: atlasAdmin, backup, clusterMonitor, dbAdmin, dbAdminAnyDatabase, enableSharding, read, readAnyDatabase, readWrite, readWriteAnyDatabase.`}
/>
<div className="mb-3 mt-1 flex flex-col space-y-2">
<div className="mt-1 mb-3 flex flex-col space-y-2">
{roleFields.fields.map(({ id: roleFieldId }, i) => (
<div key={roleFieldId} className="flex items-end space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name={`inputs.roles.${i}.roleName`}
@@ -289,7 +289,7 @@ export const EditDynamicSecretMongoDBForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input {...field} />
</FormControl>
@@ -136,7 +136,7 @@ export const EditDynamicSecretRabbitMqForm = ({
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div>
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
defaultValue=""
@@ -186,7 +186,7 @@ export const EditDynamicSecretRabbitMqForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -198,7 +198,7 @@ export const EditDynamicSecretRabbitMqForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>
@@ -359,7 +359,7 @@ export const EditDynamicSecretRabbitMqForm = ({
<div className="flex h-9 items-center gap-2">
<Input
placeholder="Insert tag name, (management, policymaker, etc.)"
className="mb-0 flex-grow"
className="mb-0 grow"
{...field}
/>
<IconButton
@@ -136,7 +136,7 @@ export const EditDynamicSecretRedisProviderForm = ({
<div>
<form onSubmit={handleSubmit(handleUpdateDynamicSecret)} autoComplete="off">
<div className="flex items-center space-x-2">
<div className="flex-grow">
<div className="grow">
<Controller
control={control}
name="newName"
@@ -183,7 +183,7 @@ export const EditDynamicSecretRedisProviderForm = ({
</div>
</div>
<div>
<div className="mb-4 mt-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
<div className="mt-4 mb-4 border-b border-mineshaft-500 pb-2 pl-1 font-medium text-mineshaft-200">
Configuration
</div>
<div className="flex flex-col">
@@ -194,7 +194,7 @@ export const EditDynamicSecretRedisProviderForm = ({
render={({ field, fieldState: { error } }) => (
<FormControl
label="Host"
className="flex-grow"
className="grow"
isError={Boolean(error?.message)}
errorText={error?.message}
>

Some files were not shown because too many files have changed in this diff Show More