Merge pull request #4642 from Infisical/feat/tw-upgrade

Feat/tw upgrade
This commit is contained in:
Akhil Mohan
2025-10-10 11:36:17 +05:30
committed by GitHub
669 changed files with 2856 additions and 3367 deletions
@@ -86,7 +86,7 @@ export const AzureProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Pr
label="Client Secret"
>
<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}
onChange={(e) => onChange(e.target.value)}
/>
@@ -78,7 +78,7 @@ export const CriblProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: Pr
label="Cribl Stream Token"
>
<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}
onChange={(e) => onChange(e.target.value)}
/>
@@ -92,7 +92,7 @@ export const CustomProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: P
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="flex-grow"
className="grow"
>
<Input
{...field}
@@ -102,7 +102,7 @@ export const DatadogProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }:
label="Datadog Token"
>
<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}
onChange={(e) => onChange(e.target.value)}
/>
@@ -90,7 +90,7 @@ export const SplunkProviderAuditLogStreamForm = ({ auditLogStream, onSubmit }: P
label="Splunk Token"
>
<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}
onChange={(e) => onChange(e.target.value)}
/>
@@ -23,7 +23,7 @@ export const AuditLogStreamsTab = withPermission(
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Audit Log Streams</p>
<p className="text-xl font-medium text-mineshaft-100">Audit Log Streams</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Settings}>
{(isAllowed) => (
<Button
@@ -43,7 +43,7 @@ export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Prop
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-px mr-1 text-xs" />
<FontAwesomeIcon icon={faBookOpen} className="mr-1 mb-px text-xs" />
<span>Docs</span>
<FontAwesomeIcon icon={faArrowUpRightFromSquare} className="mb-px ml-1 text-[10px]" />
</div>
@@ -58,7 +58,7 @@ export const AuditLogStreamHeader = ({ provider, logStreamExists, onBack }: Prop
{onBack && (
<button
type="button"
className="ml-auto mt-1 text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
onClick={onBack}
>
Select another provider
@@ -56,7 +56,7 @@ export const AuditLogStreamRow = ({ logStream, onDelete, onEditCredentials }: Pr
<span className="hidden lg:inline">{providerDetails.name}</span>
</div>
</Td>
<Td className="!min-w-[8rem] max-w-0">
<Td className="max-w-0 min-w-32!">
<div className="flex w-full items-center">
<p className="truncate">{url}</p>
</div>
@@ -171,7 +171,7 @@ export const AuditLogStreamTable = () => {
<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>Filter by Provider</DropdownMenuLabel>
{logStreams.length ? (
[...new Set(logStreams.map(({ provider }) => provider))].map((provider) => {
@@ -61,7 +61,7 @@ export const LogStreamProviderSelect = ({ onSelect }: Props) => {
return (
<div className="flex flex-col gap-4">
<div className="grid h-[29.5rem] grid-cols-4 content-start gap-2">
<div className="grid h-118 grid-cols-4 content-start gap-2">
{filteredOptions.slice(offset, perPage * page)?.map((option) => {
const { image, icon, name, size = 50 } = AUDIT_LOG_STREAM_PROVIDER_MAP[option.provider];
@@ -17,7 +17,7 @@ export const ExternalMigrationsTab = () => {
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex justify-between">
<div className="flex items-center gap-2">
<p className="text-xl font-semibold text-mineshaft-100">Import from external source</p>
<p className="text-xl font-medium text-mineshaft-100">Import from external source</p>
<div>
<a
@@ -25,12 +25,12 @@ export const ExternalMigrationsTab = () => {
rel="noopener noreferrer"
href="https://infisical.com/docs/documentation/platform/external-migrations/overview"
>
<div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pb-[0.03rem] pt-[0.04rem] text-sm text-yellow opacity-80 hover:opacity-100">
<div className="ml-2 inline-block rounded-md bg-yellow/20 px-1.5 pt-[0.04rem] pb-[0.03rem] text-sm text-yellow opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mr-1.5" />
Docs
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
className="mb-[0.07rem] ml-1.5 text-xxs"
className="text-xxs mb-[0.07rem] ml-1.5"
/>
</div>
</a>
@@ -82,7 +82,7 @@ export const GenericDropzone = forwardRef<HTMLInputElement, Props>(
onDragOver={handleDrag}
onDrop={handleDrop}
className={twMerge(
"relative mx-0.5 mb-4 mt-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 px-2 py-4 text-sm text-mineshaft-200 opacity-60 outline-dashed outline-2 outline-chicago-600 duration-200 hover:opacity-100",
"relative mx-0.5 mt-4 mb-4 flex cursor-pointer items-center justify-center rounded-md bg-mineshaft-900 px-2 py-4 text-sm text-mineshaft-200 opacity-60 outline-2 outline-chicago-600 duration-200 outline-dashed hover:opacity-100",
isDragActive && "opacity-100",
!isSmaller && "mx-auto w-full max-w-3xl flex-col space-y-4 py-20"
)}
@@ -67,7 +67,7 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
{PLATFORM_LIST.map((platform, idx) => (
<div
key={`platform-${idx + 1}`}
className="flex h-28 w-32 cursor-pointer flex-col items-center justify-between rounded border border-mineshaft-500 bg-mineshaft-700 p-6 py-5 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
className="flex h-28 w-32 cursor-pointer flex-col items-center justify-between rounded-sm border border-mineshaft-500 bg-mineshaft-700 p-6 py-5 transition-all hover:border-primary/70 hover:bg-primary/10 hover:text-white"
role="button"
tabIndex={0}
onClick={() => {
@@ -86,7 +86,7 @@ export const SelectImportFromPlatformModal = ({ isOpen, onToggle }: Props) => {
alt={`${platform.title} logo`}
style={{ width: platform.size }}
/>
<div className="whitespace-pre-wrap text-center text-sm">{platform.title}</div>
<div className="text-center text-sm whitespace-pre-wrap">{platform.title}</div>
</div>
))}
</div>
@@ -255,14 +255,14 @@ export const VaultPlatformModal = ({ onClose }: Props) => {
<div
key={el.value}
className={twMerge(
"flex w-full cursor-pointer flex-col items-center gap-2 rounded border border-mineshaft-600 p-4 opacity-75 transition-all",
"flex w-full cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 p-4 opacity-75 transition-all",
field.value === el.value
? "border-primary-700 border-opacity-70 bg-mineshaft-700 opacity-100"
? "border-opacity-70 border-primary-700 bg-mineshaft-700 opacity-100"
: "hover:border-primary-800/75 hover:bg-mineshaft-600",
el.isCustom && "col-span-2",
el.isCustom &&
!isCustomMigrationAvailable?.data?.enabled &&
"!cursor-not-allowed !border-mineshaft-600 !bg-mineshaft-600 !opacity-40"
"cursor-not-allowed! border-mineshaft-600! bg-mineshaft-600! opacity-40!"
)}
onClick={() => {
if (el.isCustom && !isCustomMigrationAvailable?.data?.enabled) return;
@@ -79,7 +79,7 @@ const OrgConfigSection = ({
return (
<>
<div className="flex flex-col justify-start">
<div className="mb-2 text-xl font-semibold text-mineshaft-100">KMIP configuration</div>
<div className="mb-2 text-xl font-medium text-mineshaft-100">KMIP configuration</div>
{isKmipConfigLoading && (
<div className="mt-8 flex justify-center">
<Spinner />
@@ -64,7 +64,7 @@ export const AddExternalKmsForm = ({ isOpen, onToggle }: Props) => {
{EXTERNAL_KMS_LIST.map(({ icon, provider, title }) => (
<div
key={`kms-${provider}`}
className="flex h-28 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-28 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={() => {
@@ -79,7 +79,7 @@ export const AddExternalKmsForm = ({ isOpen, onToggle }: Props) => {
}}
>
<FontAwesomeIcon icon={icon} size="lg" />
<div className="whitespace-pre-wrap text-center text-sm">{title}</div>
<div className="text-center text-sm whitespace-pre-wrap">{title}</div>
</div>
))}
</div>
@@ -68,7 +68,7 @@ export const OrgEncryptionTab = withPermission(
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Key Management System (KMS)</p>
<p className="text-xl font-medium text-mineshaft-100">Key Management System (KMS)</p>
<OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Kms}>
{(isAllowed) => (
<Button
@@ -83,7 +83,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
if (!isFormInitialized) {
return (
<div className="flex h-[25.25rem] w-full items-center justify-center">
<div className="flex h-101 w-full items-center justify-center">
<Spinner size="lg" />
</div>
);
@@ -80,7 +80,7 @@ export const OrgProductSelectSection = () => {
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 px-6 py-5">
<h2 className="text-xl font-semibold text-mineshaft-100">Enabled Products</h2>
<h2 className="text-xl font-medium text-mineshaft-100">Enabled Products</h2>
<p className="mb-4 text-gray-400">
Select which products are available for your organization.
</p>
@@ -105,7 +105,7 @@ export const ExternalGroupOrgRoleMappings = () => {
<div className="mb-2 flex flex-col space-y-2">
{mappingField.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="SCIM Group Name"
@@ -121,7 +121,7 @@ export const ExternalGroupOrgRoleMappings = () => {
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input
isDisabled={disableScimEdit}
@@ -145,7 +145,7 @@ export const ExternalGroupOrgRoleMappings = () => {
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Select
isDisabled={disableScimEdit}
@@ -149,7 +149,7 @@ export const GithubOrgSyncConfigModal = ({
>
Cancel
</Button>
<div className="flex-grow" />
<div className="grow" />
{isUpdate && (
<Button
onClick={() => handlePopUpOpen("deleteGithubOrgSyncConfig")}
@@ -98,7 +98,7 @@ export const OrgGithubSyncSection = () => {
return (
<div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
<p className="text-xl font-semibold text-gray-200">
<p className="text-xl font-medium text-gray-200">
Sync user groups from your GitHub Organization
</p>
<div className="py-4">
@@ -60,7 +60,7 @@ export const OrgScimSection = () => {
return (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
<p className="text-xl font-semibold text-gray-200">Provision users via SCIM</p>
<p className="text-xl font-medium text-gray-200">Provision users via SCIM</p>
<div className="py-4">
<div className="mb-2 flex items-center justify-between">
<h2 className="text-md text-mineshaft-100">SCIM</h2>
@@ -166,7 +166,7 @@ export const ScimTokenModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pr
}}
>
<FontAwesomeIcon icon={isScimUrlCopied ? faCheck : faCopy} />
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
<span className="group-hover:animate-fade-in absolute -top-20 -left-8 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
{t("common.click-to-copy")}
</span>
</IconButton>
@@ -199,7 +199,7 @@ export const ScimTokenModal = ({ popUp, handlePopUpOpen, handlePopUpToggle }: Pr
}}
>
<FontAwesomeIcon icon={isScimTokenCopied ? faCheck : faCopy} />
<span className="absolute -left-8 -top-20 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex group-hover:animate-fadeIn">
<span className="group-hover:animate-fade-in absolute -top-20 -left-8 hidden w-28 translate-y-full rounded-md bg-bunker-800 py-2 pl-3 text-center text-sm text-gray-400 group-hover:flex">
{t("common.click-to-copy")}
</span>
</IconButton>
@@ -88,9 +88,9 @@ export const OrgUserAccessTokenLimitSection = () => {
return (
<div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex w-full items-center justify-between">
<p className="text-xl font-semibold">Session Length</p>
<p className="text-xl font-medium">Session Length</p>
</div>
<p className="mb-4 mt-2 text-sm text-gray-400">
<p className="mt-2 mb-4 text-sm text-gray-400">
Specify the duration of each login session for users in this organization.
</p>
<OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
@@ -140,7 +140,7 @@ export const OrgUserAccessTokenLimitSection = () => {
<SelectItem
key={value}
value={value}
className="relative py-2 pl-6 pr-8 text-sm hover:bg-mineshaft-700"
className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
>
<div className="ml-3 font-medium">{label}</div>
</SelectItem>
@@ -144,8 +144,8 @@ export const OrgGeneralAuthSection = ({
return (
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
<div>
<p className="text-xl font-semibold text-gray-200">SSO Enforcement</p>
<p className="mb-2 mt-1 text-gray-400">
<p className="text-xl font-medium text-gray-200">SSO Enforcement</p>
<p className="mt-1 mb-2 text-gray-400">
Manage strict enforcement of specific authentication methods for your organization.
</p>
</div>
@@ -101,7 +101,7 @@ export const OrgLDAPSection = (): JSX.Element => {
<div className="py-4">
<div className="mb-4 flex items-center justify-between">
<div>
<p className="text-xl font-semibold text-gray-200">LDAP</p>
<p className="text-xl font-medium text-gray-200">LDAP</p>
<p className="mb-2 text-gray-400">Manage LDAP authentication configuration</p>
</div>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Ldap}>
@@ -89,7 +89,7 @@ export const OrgOIDCSection = (): JSX.Element => {
<div className="mb-4 rounded-lg border-mineshaft-600 bg-mineshaft-900">
<div className="mb-4 flex items-center justify-between">
<div>
<p className="text-xl font-semibold text-gray-200">OIDC</p>
<p className="text-xl font-medium text-gray-200">OIDC</p>
<p className="mb-2 text-gray-400">Manage OIDC authentication configuration</p>
</div>
@@ -180,7 +180,7 @@ export const OrgOIDCSection = (): JSX.Element => {
<FontAwesomeIcon
icon={faInfoCircle}
size="sm"
className="ml-1 mt-0.5 inline-block text-mineshaft-400"
className="mt-0.5 ml-1 inline-block text-mineshaft-400"
/>
</Tooltip>
</div>
@@ -118,7 +118,7 @@ export const OrgSSOSection = (): JSX.Element => {
<div className="space-y-4">
<div className="mb-4 flex items-center justify-between">
<div>
<p className="text-xl font-semibold text-gray-200">SAML</p>
<p className="text-xl font-medium text-gray-200">SAML</p>
<p className="mb-2 text-gray-400">Manage SAML authentication configuration</p>
</div>
{!isPending && (
@@ -206,7 +206,7 @@ export const OrgSSOSection = (): JSX.Element => {
<FontAwesomeIcon
icon={faInfoCircle}
size="sm"
className="ml-1 mt-0.5 inline-block text-mineshaft-400"
className="mt-0.5 ml-1 inline-block text-mineshaft-400"
/>
</Tooltip>
</div>
@@ -73,8 +73,8 @@ export const OrgSsoTab = withPermission(
<>
<div className="mb-4 space-y-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-6">
<div>
<p className="text-xl font-semibold text-gray-200">Connect an Identity Provider</p>
<p className="mb-2 mt-1 text-gray-400">
<p className="text-xl font-medium text-gray-200">Connect an Identity Provider</p>
<p className="mt-1 mb-2 text-gray-400">
Connect your identity provider to simplify user management with options like SAML,
OIDC, and LDAP.
</p>
@@ -166,7 +166,7 @@ export const OrgSsoTab = withPermission(
/>
</>
) : (
<EmptyState title="" iconSize="2x" className="!pb-10 pt-14">
<EmptyState title="" iconSize="2x" className="pt-14 pb-10!">
<p className="text-center text-lg">Single Sign-On (SSO) has been disabled</p>
<p className="text-center">Contact your server administrator</p>
</EmptyState>
@@ -33,7 +33,7 @@ export const SSOModalHeader = ({ providerDetails, isConnected }: Props) => {
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}
@@ -63,7 +63,7 @@ export const AddWorkflowIntegrationForm = ({ isOpen, onToggle }: Props) => {
{PLATFORM_LIST.map(({ icon, platform, title }) => (
<div
key={platform}
className="flex h-28 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-28 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={() => {
@@ -78,7 +78,7 @@ export const AddWorkflowIntegrationForm = ({ isOpen, onToggle }: Props) => {
}}
>
<div>{icon}</div>
<div className="whitespace-pre-wrap text-center text-sm">{title}</div>
<div className="text-center text-sm whitespace-pre-wrap">{title}</div>
</div>
))}
</div>
@@ -132,7 +132,7 @@ export const OrgWorkflowIntegrationTab = withPermission(
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex justify-between">
<p className="text-xl font-semibold text-mineshaft-100">Workflow Integrations</p>
<p className="text-xl font-medium text-mineshaft-100">Workflow Integrations</p>
<OrgPermissionCan I={OrgPermissionActions.Create} an={OrgPermissionSubjects.Settings}>
{(isAllowed) => (
<Button
@@ -54,7 +54,7 @@ export const EditProjectTemplate = ({ isInfisicalTemplate, projectTemplate, onBa
<>
<div className="mb-4 flex items-start justify-between border-b border-bunker-400 pb-4">
<div className="flex-col">
<h3 className="text-xl font-semibold">{name}</h3>
<h3 className="text-xl font-medium">{name}</h3>
<h2 className="text-sm text-mineshaft-400">
{`${getProjectTitle(type)} - `}
{description || "Project Template"}
@@ -93,7 +93,7 @@ export const ProjectTemplateEditRoleForm = ({
<div className="flex items-center justify-between border-b border-mineshaft-400 pb-2">
<Button
leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
className="text-base font-semibold text-mineshaft-200"
className="text-base font-medium text-mineshaft-200"
variant="link"
onClick={onGoBack}
>
@@ -134,7 +134,7 @@ export const ProjectTemplateEditRoleForm = ({
<div className="mt-2 border-b border-gray-800 p-4 pt-2 first:rounded-t-md last:rounded-b-md">
{isDisabled ? (
<div className="flex flex-col">
<span className="text-lg font-semibold">{role?.name}</span>
<span className="text-lg font-medium">{role?.name}</span>
<span className="text-mineshaft-400">{role?.slug}</span>
</div>
) : (
@@ -102,7 +102,7 @@ export const ProjectTemplateEnvironmentsForm = ({
>
<div className="mb-4 flex items-center justify-between border-b border-mineshaft-400 pb-4">
<div>
<h2 className="text-lg font-semibold">Project Environments</h2>
<h2 className="text-lg font-medium">Project Environments</h2>
{!isInfisicalTemplate && (
<p className="text-sm text-mineshaft-400">
Add, rename, remove and reorder environments for this project template
@@ -185,7 +185,7 @@ export const ProjectTemplateEnvironmentsForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input isDisabled={!isAllowed} {...field} placeholder="Name..." />
</FormControl>
@@ -211,7 +211,7 @@ export const ProjectTemplateEnvironmentsForm = ({
<FormControl
isError={Boolean(error?.message)}
errorText={error?.message}
className="mb-0 flex-grow"
className="mb-0 grow"
>
<Input isDisabled={!isAllowed} {...field} placeholder="Slug..." />
</FormControl>
@@ -78,7 +78,7 @@ export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTempla
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
className="absolute min-h-[10rem] w-full"
className="absolute min-h-40 w-full"
>
<ProjectTemplateEditRoleForm
onGoBack={() => handlePopUpClose("editRole")}
@@ -106,7 +106,7 @@ export const ProjectTemplateRolesSection = ({ projectTemplate, isInfisicalTempla
<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">
<div>
<h2 className="text-lg font-semibold">Project Roles</h2>
<h2 className="text-lg font-medium">Project Roles</h2>
<p className="text-sm text-mineshaft-400">
{isInfisicalTemplate
? "Click a role to view the associated permissions"
@@ -140,7 +140,7 @@ const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
<div
key={el.value}
className={twMerge(
"flex cursor-pointer flex-col items-center gap-2 rounded border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
"flex cursor-pointer flex-col items-center gap-2 rounded-sm border border-mineshaft-600 px-2 py-4 opacity-75 transition-all hover:border-primary-400 hover:bg-mineshaft-600",
field.value === el.value && "border-primary-400 bg-mineshaft-600 opacity-100"
)}
onClick={() => field.onChange(el.value)}
@@ -166,7 +166,7 @@ const ProjectTemplateForm = ({ onComplete, projectTemplate }: FormProps) => {
isError={Boolean(errors.description?.message)}
>
<TextArea
className="max-h-[20rem] min-h-[10rem] min-w-full max-w-full"
className="max-h-80 min-h-40 max-w-full min-w-full"
{...register("description")}
/>
</FormControl>
@@ -33,7 +33,7 @@ export const ProjectTemplatesSection = () => {
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
className="absolute min-h-[10rem] w-full"
className="absolute min-h-40 w-full"
>
<EditProjectTemplateSection
template={editTemplate}
@@ -47,7 +47,7 @@ export const ProjectTemplatesSection = () => {
initial={{ opacity: 0, translateX: 30 }}
animate={{ opacity: 1, translateX: 0 }}
exit={{ opacity: 0, translateX: 30 }}
className="absolute min-h-[10rem] w-full"
className="absolute min-h-40 w-full"
>
<div>
<p className="mb-6 font-inter text-bunker-300">
@@ -56,13 +56,13 @@ export const ProjectTemplatesSection = () => {
</p>
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-start">
<p className="text-xl font-semibold text-mineshaft-100">Project Templates</p>
<p className="text-xl font-medium text-mineshaft-100">Project Templates</p>
<a
target="_blank"
rel="noopener noreferrer"
href="https://infisical.com/docs/documentation/platform/project-templates"
>
<div className="ml-2 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-2 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