feat: upgraded to tw v4

This commit is contained in:
=
2025-10-09 22:37:42 +05:30
parent 2da35b389d
commit 7b0a51f5cf
669 changed files with 2856 additions and 3143 deletions
@@ -86,12 +86,12 @@ export const AccessManagementPage = () => {
description="Manage fine-grained access for users, groups, roles, and identities within your organization resources."
/>
{!currentOrg.shouldUseNewPrivilegeSystem && (
<div className="mb-4 mt-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
<div className="mt-4 mb-4 flex flex-col rounded-r border-l-2 border-l-primary bg-mineshaft-300/5 px-4 py-2.5">
<div className="mb-1 flex items-center text-sm">
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Your organization is using legacy privilege management
</div>
<p className="mb-2 mt-1 text-sm text-bunker-300">
<p className="mt-1 mb-2 text-sm text-bunker-300">
We&apos;ve developed an improved privilege management system to better serve your
security needs. Upgrade to our new permission-based approach that allows you to
explicitly designate who can modify specific access levels, rather than relying on
@@ -57,7 +57,7 @@ export const OrgGroupsSection = () => {
return (
<div className="mb-6 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">Groups</p>
<p className="text-xl font-medium text-mineshaft-100">Groups</p>
<OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => (
<Button
@@ -264,7 +264,7 @@ export const IdentityAliCloudAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -302,7 +302,7 @@ export const IdentityAwsAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -298,7 +298,7 @@ export const IdentityAzureAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -337,7 +337,7 @@ export const IdentityGcpAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -368,7 +368,7 @@ export const IdentityJwtAuthForm = ({
name={`publicKeys.${index}.value`}
render={({ field, fieldState: { error } }) => (
<FormControl
className="flex-grow"
className="grow"
label={`Public Key ${index + 1}`}
errorText={error?.message}
isError={Boolean(error)}
@@ -482,7 +482,7 @@ export const IdentityJwtAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Claims" : undefined}
icon={
index === 0 ? (
@@ -512,7 +512,7 @@ export const IdentityJwtAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
isError={Boolean(error)}
errorText={error?.message}
>
@@ -606,7 +606,7 @@ export const IdentityJwtAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -547,7 +547,7 @@ export const IdentityKubernetesAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -632,7 +632,7 @@ export const IdentityLdapAuthForm = ({
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={isFirstField ? "Required Attributes" : undefined}
icon={
isFirstField ? (
@@ -689,7 +689,7 @@ export const IdentityLdapAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
isError={Boolean(error)}
errorText={error?.message}
>
@@ -817,7 +817,7 @@ export const IdentityLdapAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -234,7 +234,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
render={({ field: { onChange, value }, fieldState: { error } }) => (
<FormControl errorText={error?.message} isError={Boolean(error)}>
<Switch
className="ml-0 mr-2 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
className="mr-2 ml-0 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
containerClassName="flex-row-reverse w-fit"
id="delete-protection-enabled"
thumbClassName="bg-mineshaft-800"
@@ -252,7 +252,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
<div className="mb-3 flex flex-col space-y-2">
{metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
<div key={metadataFieldId} className="flex items-end space-x-2">
<div className="flex-grow">
<div className="grow">
{i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
<Controller
control={control}
@@ -268,7 +268,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
)}
/>
</div>
<div className="flex-grow">
<div className="grow">
{i === 0 && (
<FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
)}
@@ -284,7 +284,7 @@ export const IdentityOciAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -364,7 +364,7 @@ export const IdentityOidcAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Claims" : undefined}
icon={
index === 0 ? (
@@ -394,7 +394,7 @@ export const IdentityOidcAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
isError={Boolean(error)}
errorText={error?.message}
>
@@ -502,7 +502,7 @@ export const IdentityOidcAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Token Claim Mapping" : undefined}
icon={
index === 0 ? (
@@ -543,7 +543,7 @@ export const IdentityOidcAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
isError={Boolean(error)}
errorText={error?.message}
>
@@ -593,7 +593,7 @@ export const IdentityOidcAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -107,13 +107,13 @@ export const IdentitySection = withPermission(
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-1">
<p className="text-xl font-semibold text-mineshaft-100">Identities</p>
<p className="text-xl font-medium text-mineshaft-100">Identities</p>
<a
href="https://infisical.com/docs/documentation/platform/identities/overview"
target="_blank"
rel="noopener noreferrer"
>
<div className="ml-1 mt-[0.16rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<div className="mt-[0.16rem] 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
@@ -155,13 +155,13 @@ export const IdentitySection = withPermission(
<div className="mt-4 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between">
<div className="flex items-center gap-1">
<p className="text-xl font-semibold text-mineshaft-100">Identity Auth Templates</p>
<p className="text-xl font-medium text-mineshaft-100">Identity Auth Templates</p>
<a
href="https://infisical.com/docs/documentation/platform/identities/auth-templates"
target="_blank"
rel="noopener noreferrer"
>
<div className="ml-1 mt-[0.16rem] inline-block rounded-md bg-yellow/20 px-1.5 text-sm text-yellow opacity-80 hover:opacity-100">
<div className="mt-[0.16rem] 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
@@ -192,7 +192,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
variant="plain"
size="sm"
className={twMerge(
"flex h-[2.375rem] w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
"flex h-9.5 w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
isTableFiltered && "border-primary/50 text-primary"
)}
>
@@ -208,7 +208,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
>
Roles
</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">
Apply Roles to Filter Identities
</DropdownMenuLabel>
@@ -317,7 +317,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
{name}
{lastLoginAuthMethod && lastLoginTime && (
<Tooltip
className="min-w-52 max-w-96 px-3"
className="max-w-96 min-w-52 px-3"
content={
<LastLoginSection
lastLoginAuthMethod={identityAuthToNameMap[lastLoginAuthMethod]}
@@ -272,7 +272,7 @@ export const IdentityTlsCertAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -235,7 +235,7 @@ export const IdentityTokenAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -396,7 +396,7 @@ export const IdentityUniversalAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Client Secret Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -464,7 +464,7 @@ export const IdentityUniversalAuthForm = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className="mb-0 flex-grow"
className="mb-0 grow"
label={index === 0 ? "Access Token Trusted IPs" : undefined}
isError={Boolean(error)}
errorText={error?.message}
@@ -35,7 +35,7 @@ export const LockoutTab = ({
errorText={error?.message}
>
<Switch
className="ml-0 mr-3 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
className="mr-3 ml-0 bg-mineshaft-400/80 shadow-inner data-[state=checked]:bg-green/80"
containerClassName="flex-row-reverse w-fit"
id="lockout-enabled"
thumbClassName="bg-mineshaft-800"
@@ -55,7 +55,7 @@ export const LockoutTab = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className={`mb-0 flex-grow ${lockoutEnabled ? "" : "opacity-70"}`}
className={`mb-0 grow ${lockoutEnabled ? "" : "opacity-70"}`}
label="Lockout Threshold"
isError={Boolean(error)}
errorText={error?.message}
@@ -77,7 +77,7 @@ export const LockoutTab = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className={`mb-0 flex-grow ${lockoutEnabled ? "" : "opacity-70"}`}
className={`mb-0 grow ${lockoutEnabled ? "" : "opacity-70"}`}
label="Lockout Duration"
isError={Boolean(error)}
errorText={error?.message}
@@ -110,25 +110,25 @@ export const LockoutTab = ({
>
<SelectItem
value="s"
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">Seconds</div>
</SelectItem>
<SelectItem
value="m"
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">Minutes</div>
</SelectItem>
<SelectItem
value="h"
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">Hours</div>
</SelectItem>
<SelectItem
value="d"
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">Days</div>
</SelectItem>
@@ -144,7 +144,7 @@ export const LockoutTab = ({
render={({ field, fieldState: { error } }) => {
return (
<FormControl
className={`mb-0 flex-grow ${lockoutEnabled ? "" : "opacity-70"}`}
className={`mb-0 grow ${lockoutEnabled ? "" : "opacity-70"}`}
label="Lockout Counter Reset"
isError={Boolean(error)}
errorText={error?.message}
@@ -177,19 +177,19 @@ export const LockoutTab = ({
>
<SelectItem
value="s"
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">Seconds</div>
</SelectItem>
<SelectItem
value="m"
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">Minutes</div>
</SelectItem>
<SelectItem
value="h"
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">Hours</div>
</SelectItem>
@@ -219,7 +219,7 @@ export const AddOrgMemberModal = ({
<FormControl label="Emails" isError={Boolean(error)} errorText={error?.message}>
<TextArea
{...field}
className="mt-1 h-20 w-full min-w-[30rem] rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 outline-none ring-primary-800 ring-opacity-70 transition-all placeholder:text-bunker-400 focus:ring-2"
className="ring-opacity-70 mt-1 h-20 w-full min-w-120 rounded-md border border-mineshaft-500 bg-mineshaft-900/70 px-2 py-1 text-sm text-bunker-300 ring-primary-800 outline-hidden transition-all placeholder:text-bunker-400 focus:ring-2"
placeholder="[email protected], [email protected]..."
/>
</FormControl>
@@ -30,7 +30,7 @@ export const OrgInviteLink = ({ invite }: Props) => {
<p className="text-sm text-mineshaft-400">
Invite for <span className="font-medium">{invite.email}</span>
</p>
<div className="flex flex-col gap-1 rounded-md bg-white/[0.04] p-2 text-base text-gray-400">
<div className="flex flex-col gap-1 rounded-md bg-white/4 p-2 text-base text-gray-400">
<p
className={twMerge(
"mr-4 line-clamp-1",
@@ -154,7 +154,7 @@ export const OrgMembersSection = () => {
<>
<div
className={twMerge(
"h-0 flex-shrink-0 overflow-hidden transition-all",
"h-0 shrink-0 overflow-hidden transition-all",
selectedMemberIds.length > 0 && "h-16"
)}
>
@@ -203,7 +203,7 @@ export const OrgMembersSection = () => {
</div>
<div className="mb-6 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">Users</p>
<p className="text-xl font-medium text-mineshaft-100">Users</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
{(isAllowed) => (
<Button
@@ -270,7 +270,7 @@ export const OrgMembersSection = () => {
<div className="mt-4 text-sm text-mineshaft-400">
The following members will be removed:
</div>
<div className="mt-2 max-h-[20rem] overflow-y-auto rounded border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
<div className="mt-2 max-h-80 overflow-y-auto rounded-sm border border-mineshaft-600 bg-red/10 p-4 pl-8 text-sm text-red-200">
<ul className="list-disc">
{(popUp.removeMembers.data?.selectedOrgMemberships as OrgUser[])?.map((member) => {
const email = member.user.email ?? member.user.username ?? member.inviteEmail;
@@ -292,7 +292,7 @@ export const OrgMembersSection = () => {
<div className="inline-block">
<Badge
variant="danger"
className="ml-1 mt-[0.05rem] inline-flex w-min items-center gap-1.5 whitespace-nowrap"
className="mt-[0.05rem] ml-1 inline-flex w-min items-center gap-1.5 whitespace-nowrap"
>
<FontAwesomeIcon icon={faBan} />
<span>Ignored</span>
@@ -332,7 +332,7 @@ export const OrgMembersTable = ({
variant="plain"
size="sm"
className={twMerge(
"flex h-[2.375rem] w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
"flex h-9.5 w-[2.6rem] items-center justify-center overflow-hidden border border-mineshaft-600 bg-mineshaft-800 p-0 transition-all hover:border-primary/60 hover:bg-primary/10",
isTableFiltered && "border-primary/50 text-primary"
)}
>
@@ -348,7 +348,7 @@ export const OrgMembersTable = ({
>
Roles
</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">
Apply Roles to Filter Users
</DropdownMenuLabel>
@@ -533,7 +533,7 @@ export const OrgMembersTable = ({
)}
{lastLoginAuthMethod && lastLoginTime && (
<Tooltip
className="min-w-52 max-w-96 px-3"
className="max-w-96 min-w-52 px-3"
content={
<LastLoginSection
lastLoginAuthMethod={lastLoginAuthMethod}
@@ -200,7 +200,7 @@ export const OrgRoleTable = () => {
return (
<div className="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">Organization Roles</p>
<p className="text-xl font-medium text-mineshaft-100">Organization Roles</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
{(isAllowed) => (
<Button
@@ -312,7 +312,7 @@ export const OrgRoleTable = () => {
{slug}
</Td>
<Td>
<Badge className="w-min whitespace-nowrap bg-mineshaft-400/50 text-bunker-200">
<Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
{isCustomProjectRole(slug) ? "Custom" : "Default"}
</Badge>
</Td>
@@ -328,7 +328,7 @@ export const OrgRoleTable = () => {
<FontAwesomeIcon icon={faEllipsisV} />
</IconButton>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-[12rem]" sideOffset={2} align="end">
<DropdownMenuContent className="min-w-48" sideOffset={2} align="end">
<OrgPermissionCan
I={OrgPermissionActions.Edit}
a={OrgPermissionSubjects.Role}