fix: correct lint

This commit is contained in:
Scott Wilson
2025-10-10 11:46:46 -07:00
parent 48ea19f807
commit cd703a77e9
835 changed files with 3457 additions and 3457 deletions
@@ -76,7 +76,7 @@ export const AccessManagementPage = () => {
const hasNoAccess = tabSections.every((tab) => tab.isHidden);
return (
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
<Helmet>
<title>{t("common.head-title", { title: t("settings.org.title") })}</title>
</Helmet>
@@ -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="border-l-primary bg-mineshaft-300/5 mb-4 mt-4 flex flex-col rounded-r border-l-2 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="text-primary mr-1.5" />
<FontAwesomeIcon icon={faInfoCircle} size="sm" className="mr-1.5 text-primary" />
Your organization is using legacy privilege management
</div>
<p className="text-bunker-300 mb-2 mt-1 text-sm">
<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
@@ -55,9 +55,9 @@ export const OrgGroupsSection = () => {
};
return (
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<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-mineshaft-100 text-xl font-medium">Groups</p>
<p className="text-xl font-medium text-mineshaft-100">Groups</p>
<OrgPermissionCan I={OrgPermissionGroupActions.Create} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => (
<Button
@@ -249,7 +249,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
}
})
}
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`org-group-${id}`}
>
<Td>{name}</Td>
@@ -264,7 +264,7 @@ export const OrgGroupsTable = ({ handlePopUpOpen }: Props) => {
<Select
value={role === "custom" ? (customRole?.slug as string) : role}
isDisabled={!isAllowed}
className="bg-mineshaft-700 h-8 w-48"
className="h-8 w-48 bg-mineshaft-700"
position="popper"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
@@ -182,7 +182,7 @@ export const IdentityAuthTemplatesTable = ({ handlePopUpOpen }: Props) => {
{!isPending &&
templates?.map((template) => (
<Tr
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`template-${template.id}`}
>
<Td>{template.name}</Td>
@@ -192,7 +192,7 @@ export const IdentityAuthTemplatesTable = ({ handlePopUpOpen }: Props) => {
</div>
</Td>
<Td>
<span className="text-mineshaft-400 text-sm">
<span className="text-sm text-mineshaft-400">
{template.templateFields.url}
</span>
</Td>
@@ -343,7 +343,7 @@ export const IdentityKubernetesAuthForm = ({
);
}
}}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
isLoading={isGatewayLoading}
placeholder="Default: Internet Gateway"
@@ -233,7 +233,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
render={({ field: { onChange, value }, fieldState: { error } }) => (
<FormControl errorText={error?.message} isError={Boolean(error)}>
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 ml-0 mr-2 shadow-inner"
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) => {
{metadataFormFields.fields.map(({ id: metadataFieldId }, i) => (
<div key={metadataFieldId} className="flex items-end space-x-2">
<div className="grow">
{i === 0 && <span className="text-mineshaft-400 text-xs">Key</span>}
{i === 0 && <span className="text-xs text-mineshaft-400">Key</span>}
<Controller
control={control}
name={`metadata.${i}.key`}
@@ -269,7 +269,7 @@ export const IdentityModal = ({ popUp, handlePopUpToggle }: Props) => {
</div>
<div className="grow">
{i === 0 && (
<FormLabel label="Value" className="text-mineshaft-400 text-xs" isOptional />
<FormLabel label="Value" className="text-xs text-mineshaft-400" isOptional />
)}
<Controller
control={control}
@@ -104,16 +104,16 @@ export const IdentitySection = withPermission(
return (
<div>
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<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-mineshaft-100 text-xl font-medium">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="bg-yellow/20 text-yellow ml-1 mt-[0.16rem] inline-block rounded-md px-1.5 text-sm 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
@@ -152,16 +152,16 @@ export const IdentitySection = withPermission(
<IdentityTable handlePopUpOpen={handlePopUpOpen} />
</div>
{/* Identity Auth Templates Section */}
<div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
<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-mineshaft-100 text-xl font-medium">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="bg-yellow/20 text-yellow ml-1 mt-[0.16rem] inline-block rounded-md px-1.5 text-sm 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(
"h-9.5 border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex w-[2.6rem] items-center justify-center overflow-hidden border p-0 transition-all",
"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,8 +208,8 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
>
Roles
</DropdownSubMenuTrigger>
<DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
<DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
<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>
{roles?.map(({ id, slug, name }) => (
@@ -302,7 +302,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
}) => {
return (
<Tr
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`identity-${id}`}
onClick={() =>
navigate({
@@ -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]}
@@ -327,7 +327,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
>
<FontAwesomeIcon
icon={faInfoCircle}
className="text-mineshaft-400 ml-2 opacity-0 transition-all group-hover:opacity-100"
className="ml-2 text-mineshaft-400 opacity-0 transition-all group-hover:opacity-100"
/>
</Tooltip>
)}
@@ -342,7 +342,7 @@ export const IdentityTable = ({ handlePopUpOpen }: Props) => {
<Select
value={role === "custom" ? (customRole?.slug as string) : role}
isDisabled={!isAllowed}
className="bg-mineshaft-700 h-8 w-48"
className="h-8 w-48 bg-mineshaft-700"
position="popper"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
@@ -312,7 +312,7 @@ export const IdentityUniversalAuthForm = ({
</TabList>
<TabPanel value={IdentityFormTab.Configuration}>
{accessTokenPeriodValue > 0 ? (
<div className="text-bunker-400 mb-4 text-xs">
<div className="mb-4 text-xs text-bunker-400">
When Access Token Period is set, TTL and Max TTL are ignored.
</div>
) : (
@@ -57,7 +57,7 @@ export const MachineAuthTemplateUsagesModal = ({
{!isPending &&
usages.map((usage) => (
<Tr
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`usage-${usage.identityId}`}
onClick={() =>
navigate({
@@ -70,7 +70,7 @@ export const MachineAuthTemplateUsagesModal = ({
>
<Td>{usage.identityName}</Td>
<Td>
<span className="text-mineshaft-400 text-sm">{usage.identityId}</span>
<span className="text-sm text-mineshaft-400">{usage.identityId}</span>
</Td>
</Tr>
))}
@@ -35,7 +35,7 @@ export const LockoutTab = ({
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/80 data-[state=checked]:bg-green/80 ml-0 mr-3 shadow-inner"
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"
@@ -110,25 +110,25 @@ export const LockoutTab = ({
>
<SelectItem
value="s"
className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
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="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
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="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
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="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
>
<div className="ml-3 font-medium">Days</div>
</SelectItem>
@@ -177,19 +177,19 @@ export const LockoutTab = ({
>
<SelectItem
value="s"
className="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
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="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
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="hover:bg-mineshaft-700 relative py-2 pl-6 pr-8 text-sm"
className="relative py-2 pr-8 pl-6 text-sm hover:bg-mineshaft-700"
>
<div className="ml-3 font-medium">Hours</div>
</SelectItem>
@@ -232,7 +232,7 @@ export const AddOrgMemberModal = ({
<FormControl label="Emails" isError={Boolean(error)} errorText={error?.message}>
<TextArea
{...field}
className="min-w-120 border-mineshaft-500 bg-mineshaft-900/70 text-bunker-300 ring-primary-800 outline-hidden placeholder:text-bunker-400 mt-1 h-20 w-full rounded-md border px-2 py-1 text-sm ring-opacity-70 transition-all 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>
@@ -27,10 +27,10 @@ export const OrgInviteLink = ({ invite }: Props) => {
return (
<div key={`invite-${invite.email}`}>
<p className="text-mineshaft-400 text-sm">
<p className="text-sm text-mineshaft-400">
Invite for <span className="font-medium">{invite.email}</span>
</p>
<div className="bg-white/4 flex flex-col gap-1 rounded-md 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",
@@ -158,11 +158,11 @@ export const OrgMembersSection = () => {
selectedMemberIds.length > 0 && "h-16"
)}
>
<div className="border-mineshaft-600 bg-mineshaft-800 text-bunker-300 flex items-center rounded-md border px-4 py-2">
<div className="flex items-center rounded-md border border-mineshaft-600 bg-mineshaft-800 px-4 py-2 text-bunker-300">
<div className="mr-2 text-sm">{selectedMemberIds.length} Selected</div>
<button
type="button"
className="text-mineshaft-400 hover:text-mineshaft-200 mr-auto text-xs underline-offset-2 hover:underline"
className="mr-auto text-xs text-mineshaft-400 underline-offset-2 hover:text-mineshaft-200 hover:underline"
onClick={() => setSelectedMemberIds([])}
>
Unselect All
@@ -201,9 +201,9 @@ export const OrgMembersSection = () => {
</OrgPermissionCan>
</div>
</div>
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<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-mineshaft-100 text-xl font-medium">Users</p>
<p className="text-xl font-medium text-mineshaft-100">Users</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Member}>
{(isAllowed) => (
<Button
@@ -267,10 +267,10 @@ export const OrgMembersSection = () => {
}
buttonText="Remove"
>
<div className="text-mineshaft-400 mt-4 text-sm">
<div className="mt-4 text-sm text-mineshaft-400">
The following members will be removed:
</div>
<div className="border-mineshaft-600 bg-red/10 mt-2 max-h-80 overflow-y-auto rounded-sm border 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(
"h-9.5 border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex w-[2.6rem] items-center justify-center overflow-hidden border p-0 transition-all",
"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,8 +348,8 @@ export const OrgMembersTable = ({
>
Roles
</DropdownSubMenuTrigger>
<DropdownSubMenuContent className="thin-scrollbar max-h-80 overflow-y-auto rounded-l-none">
<DropdownMenuLabel className="bg-mineshaft-900 sticky top-0">
<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>
{roles?.map(({ id, slug, name }) => (
@@ -492,7 +492,7 @@ export const OrgMembersTable = ({
return (
<Tr
key={`org-membership-${orgMembershipId}`}
className="hover:bg-mineshaft-700 h-10 w-full cursor-pointer transition-colors duration-100"
className="h-10 w-full cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
onClick={() =>
navigate({
to: "/organization/members/$membershipId" as const,
@@ -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}
@@ -543,7 +543,7 @@ export const OrgMembersTable = ({
>
<FontAwesomeIcon
icon={faInfoCircle}
className="text-mineshaft-400 ml-2 opacity-0 transition-all group-hover:opacity-100"
className="ml-2 text-mineshaft-400 opacity-0 transition-all group-hover:opacity-100"
/>
</Tooltip>
)}
@@ -561,7 +561,7 @@ export const OrgMembersTable = ({
<Select
value={role === "custom" ? findRoleFromId(roleId)?.slug : role}
isDisabled={userId === u?.id || !isAllowed}
className="bg-mineshaft-700 h-8 w-48"
className="h-8 w-48 bg-mineshaft-700"
position="popper"
dropdownContainerClassName="border border-mineshaft-600 bg-mineshaft-800"
onValueChange={(selectedRole) =>
@@ -594,7 +594,7 @@ export const OrgMembersTable = ({
{(isAllowed) => (
<Button
isDisabled={!isAllowed || isResendInvitePending}
className="border-mineshaft-600 bg-mineshaft-700 h-8 font-normal"
className="h-8 border-mineshaft-600 bg-mineshaft-700 font-normal"
colorSchema="primary"
variant="outline_bg"
isLoading={
@@ -198,9 +198,9 @@ export const OrgRoleTable = () => {
orderDirection === OrderByDirection.DESC && orderBy === col ? faArrowUp : faArrowDown;
return (
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<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-mineshaft-100 text-xl font-medium">Organization Roles</p>
<p className="text-xl font-medium text-mineshaft-100">Organization Roles</p>
<OrgPermissionCan I={OrgPermissionActions.Create} a={OrgPermissionSubjects.Role}>
{(isAllowed) => (
<Button
@@ -282,7 +282,7 @@ export const OrgRoleTable = () => {
return (
<Tr
key={`role-list-${id}`}
className="hover:bg-mineshaft-700 h-10 cursor-pointer transition-colors duration-100"
className="h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
onClick={() =>
navigate({
to: "/organization/roles/$roleId",
@@ -312,7 +312,7 @@ export const OrgRoleTable = () => {
{slug}
</Td>
<Td>
<Badge className="bg-mineshaft-400/50 text-bunker-200 w-min whitespace-nowrap">
<Badge className="w-min bg-mineshaft-400/50 whitespace-nowrap text-bunker-200">
{isCustomProjectRole(slug) ? "Custom" : "Default"}
</Badge>
</Td>
@@ -73,15 +73,15 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
<ModalContent title="Privilege Management System Upgrade" className="max-w-2xl">
{step === "info" ? (
<div className="mb-4">
<p className="text-mineshaft-300 mb-4 text-sm">
<p className="mb-4 text-sm text-mineshaft-300">
We&apos;ve developed an improved privilege management system that enhances how access
controls work in your organization.
</p>
<div className="border-mineshaft-600 bg-mineshaft-800 mb-4 rounded-lg border p-4">
<div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<div className="mb-3">
<div className="mb-3">
<p className="text-mineshaft-300 mb-3 text-sm">
<p className="mb-3 text-sm text-mineshaft-300">
<strong>Current system: </strong>
Users with higher privilege levels can modify access for anyone below them. This
rigid hierarchy makes it difficult to implement precise access control policies,
@@ -89,7 +89,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
specialized roles (like team leads) need to manage their team&apos;s access
without receiving broader administrative powers.
</p>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm text-mineshaft-300">
<strong>New system:</strong> Users need explicit permission to modify specific
access levels, providing targeted control. After upgrading, you&apos;ll need to
grant the new &apos;Grant Privileges&apos; permission. At the organization
@@ -98,7 +98,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-groups"
target="_blank"
rel="noreferrer"
className="hover:text-bunker-200 hover:decoration-primary-700 underline"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Group
</a>{" "}
@@ -107,7 +107,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
href="https://infisical.com/docs/internals/permissions/organization-permissions#subject%3A-identity"
target="_blank"
rel="noreferrer"
className="hover:text-bunker-200 hover:decoration-primary-700 underline"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Identity
</a>{" "}
@@ -116,7 +116,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-member"
target="_blank"
rel="noreferrer"
className="hover:text-bunker-200 hover:decoration-primary-700 underline"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Member,
</a>{" "}
@@ -124,7 +124,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-groups"
target="_blank"
rel="noreferrer"
className="hover:text-bunker-200 hover:decoration-primary-700 underline"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Group,
</a>{" "}
@@ -133,7 +133,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
href="https://infisical.com/docs/internals/permissions/project-permissions#subject%3A-identity"
target="_blank"
rel="noreferrer"
className="hover:text-bunker-200 hover:decoration-primary-700 underline"
className="underline hover:text-bunker-200 hover:decoration-primary-700"
>
Identity
</a>{" "}
@@ -149,7 +149,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
variant="solid"
colorSchema="primary"
size="md"
className="bg-primary hover:bg-primary-600 w-[120px]"
className="w-[120px] bg-primary hover:bg-primary-600"
>
Continue
</Button>
@@ -157,19 +157,19 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
</div>
) : (
<div className="mb-4">
<p className="text-mineshaft-300 mb-4 text-sm">
<p className="mb-4 text-sm text-mineshaft-300">
Your existing access control workflows will continue to function. However, actions
that involve modifying privileges or permissions will now use the new permission-based
system, requiring users to have explicit permission to modify given resource.
</p>
<p className="text-mineshaft-300 mb-4 text-sm">
<p className="mb-4 text-sm text-mineshaft-300">
This upgrade affects operations like updating roles, managing group memberships, and
modifying privileges across your organization and projects.
</p>
<div className="border-mineshaft-600 bg-mineshaft-800 mb-4 rounded-lg border p-4">
<p className="text-mineshaft-300 mb-4 text-sm">
<div className="mb-4 rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<p className="mb-4 text-sm text-mineshaft-300">
Once upgraded, your organization <span className="font-bold">cannot</span> revert to
the legacy privilege system. Please ensure you&apos;ve completed all preparations
before proceeding.
@@ -268,7 +268,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
<button
type="button"
onClick={() => setStep("info")}
className="text-mineshaft-300 hover:text-mineshaft-200 w-[120px] text-sm"
className="w-[120px] text-sm text-mineshaft-300 hover:text-mineshaft-200"
>
Cancel
</button>
@@ -285,7 +285,7 @@ export const UpgradePrivilegeSystemModal = ({ isOpen, onOpenChange }: Props) =>
variant="solid"
colorSchema="primary"
size="md"
className="bg-primary hover:bg-primary-600 w-[120px]"
className="w-[120px] bg-primary hover:bg-primary-600"
isDisabled={!isAllChecksCompleted || !isAdmin}
isLoading={isSubmitting}
>
@@ -19,7 +19,7 @@ export const AppConnectionsPage = withPermission(
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
</Helmet>
<div className="bg-bunker-800 flex w-full justify-center text-white">
<div className="flex w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader
className="w-full"
@@ -28,7 +28,7 @@ export const AppConnectionsPage = withPermission(
/>
<div className="mb-4 flex w-full flex-col rounded-md border border-blue-500/50 bg-blue-500/30 px-4 py-2 text-sm text-blue-200">
<div className="flex items-center">
<FontAwesomeIcon icon={faInfoCircle} className="mb-0.5 mr-2 text-sm" />
<FontAwesomeIcon icon={faInfoCircle} className="mr-2 mb-0.5 text-sm" />
<span className="text-sm text-blue-200">
App connections can also be created and managed independently in projects now.
</span>
@@ -78,7 +78,7 @@ export const OnePassConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -80,7 +80,7 @@ export const Auth0ConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -87,7 +87,7 @@ export const AwsConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -114,7 +114,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -131,13 +131,13 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
/>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List
className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} border-mineshaft-600 w-full border-b-2`}
className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
>
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -146,9 +146,9 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -157,11 +157,11 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
</Tab.List>
{selectedTabIndex === 1 && (
<div className="text-mineshaft-300 mb-2 text-xs">
<div className="mb-2 text-xs text-mineshaft-300">
SSL configuration for HTTPS connections
</div>
)}
<Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
<Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
<Tab.Panel>
<Controller
name="credentials.adcsUrl"
@@ -222,7 +222,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
isOptional
>
<TextArea
className="resize-none! h-[3.6rem]"
className="h-[3.6rem] resize-none!"
{...field}
isDisabled={!sslEnabled}
placeholder="-----BEGIN CERTIFICATE-----
@@ -242,7 +242,7 @@ export const AzureADCSConnectionForm = ({ appConnection, onSubmit }: Props) => {
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
id="ssl-reject-unauthorized"
thumbClassName="bg-mineshaft-800"
isChecked={sslEnabled ? value : false}
@@ -202,7 +202,7 @@ export const AzureAppConfigurationConnectionForm = ({
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -190,7 +190,7 @@ export const AzureClientSecretsConnectionForm = ({ appConnection, onSubmit, proj
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -227,7 +227,7 @@ export const AzureDevOpsConnectionForm = ({ appConnection, onSubmit, projectId }
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -200,7 +200,7 @@ export const AzureKeyVaultConnectionForm = ({ appConnection, onSubmit, projectId
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -78,7 +78,7 @@ export const BitbucketConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -78,7 +78,7 @@ export const CamundaConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -79,7 +79,7 @@ export const ChecklyConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -78,7 +78,7 @@ export const CloudflareConnectionForm = ({ appConnection, onSubmit }: Props) =>
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -82,7 +82,7 @@ export const DatabricksConnectionForm = ({ appConnection, onSubmit }: Props) =>
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -79,7 +79,7 @@ export const DigitalOceanConnectionForm = ({ appConnection, onSubmit }: Props) =
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -80,7 +80,7 @@ export const FlyioConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -87,7 +87,7 @@ export const GcpConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -185,7 +185,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -220,7 +220,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
setValue("gatewayId", null);
}
}}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
placeholder="Enterprise Cloud"
position="popper"
@@ -272,7 +272,7 @@ export const GitHubConnectionForm = ({ appConnection, projectId }: Props) => {
isDisabled={!isAllowed}
value={value || (null as unknown as string)}
onValueChange={onChange}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
isLoading={isGatewaysLoading}
placeholder="Default: Internet Gateway"
@@ -132,7 +132,7 @@ export const GitHubRadarConnectionForm = ({ appConnection, projectId }: Props) =
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -240,7 +240,7 @@ export const GitLabConnectionForm = ({ appConnection, onSubmit: formSubmit, proj
setValue("credentials.code", "custom");
}
}}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -277,7 +277,7 @@ export const GitLabConnectionForm = ({ appConnection, onSubmit: formSubmit, proj
setValue("credentials.code", "custom");
}
}}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -112,7 +112,7 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -151,7 +151,7 @@ export const HCVaultConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={!isAllowed}
value={value as string}
onValueChange={onChange}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
isLoading={isGatewaysLoading}
placeholder="Default: Internet Gateway"
@@ -191,7 +191,7 @@ export const HerokuConnectionForm = ({ appConnection, onSubmit: formSubmit, proj
setValue("credentials.code", "custom");
}
}}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -76,7 +76,7 @@ export const HumanitecConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -131,7 +131,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -159,7 +159,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border capitalize"
className="w-full border border-mineshaft-500 capitalize"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -177,13 +177,13 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
</div>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List
className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} border-mineshaft-600 w-full border-b-2`}
className={`-pb-1 ${selectedTabIndex === 1 ? "mb-3" : "mb-6"} w-full border-b-2 border-mineshaft-600`}
>
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -192,9 +192,9 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -203,9 +203,9 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
</Tab.List>
{selectedTabIndex === 1 && (
<div className="text-mineshaft-300 mb-2 text-xs">Requires ldaps:// URL</div>
<div className="mb-2 text-xs text-mineshaft-300">Requires ldaps:// URL</div>
)}
<Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
<Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
<Tab.Panel>
<Controller
name="credentials.url"
@@ -266,7 +266,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
isOptional
>
<TextArea
className="resize-none! h-[3.6rem]"
className="h-[3.6rem] resize-none!"
{...field}
isDisabled={!sslEnabled}
/>
@@ -283,7 +283,7 @@ export const LdapConnectionForm = ({ appConnection, onSubmit }: Props) => {
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
id="ssl-reject-unauthorized"
thumbClassName="bg-mineshaft-800"
isChecked={sslEnabled ? value : false}
@@ -126,7 +126,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={!isAllowed}
value={value as string}
onValueChange={onChange}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
isLoading={isGatewaysLoading}
placeholder="Default: Internet Gateway"
@@ -168,7 +168,7 @@ export const MsSqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -123,7 +123,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={!isAllowed}
value={value as string}
onValueChange={onChange}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
isLoading={isGatewaysLoading}
placeholder="Default: Internet Gateway"
@@ -165,7 +165,7 @@ export const MySqlConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -79,7 +79,7 @@ export const NetlifyConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -89,7 +89,7 @@ export const OCIConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -87,7 +87,7 @@ export const OktaConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -123,7 +123,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={!isAllowed}
value={value as string}
onValueChange={onChange}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
isLoading={isGatewaysLoading}
placeholder="Default: Internet Gateway"
@@ -165,7 +165,7 @@ export const OracleDBConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -123,7 +123,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={!isAllowed}
value={value as string}
onValueChange={onChange}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
dropdownContainerClassName="max-w-none"
isLoading={isGatewaysLoading}
placeholder="Default: Internet Gateway"
@@ -165,7 +165,7 @@ export const PostgresConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -79,7 +79,7 @@ export const RailwayConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -107,7 +107,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -124,12 +124,12 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
/>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -138,9 +138,9 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
</Tab>
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected
? "border-mineshaft-300 text-mineshaft-200 border-b-2"
? "border-b-2 border-mineshaft-300 text-mineshaft-200"
: "text-bunker-300"
}`
}
@@ -148,7 +148,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
SSL ({sslEnabled ? "Enabled" : "Disabled"})
</Tab>
</Tab.List>
<Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
<Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
<Tab.Panel>
<div className="mt-[0.675rem] flex items-start gap-2">
<Controller
@@ -222,7 +222,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl isError={Boolean(error?.message)} errorText={error?.message}>
<Switch
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
id="ssl-enabled"
thumbClassName="bg-mineshaft-800"
isChecked={value}
@@ -244,7 +244,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
label="SSL Certificate"
isOptional
>
<TextArea className="resize-none! h-14" {...field} isDisabled={!sslEnabled} />
<TextArea className="h-14 resize-none!" {...field} isDisabled={!sslEnabled} />
</FormControl>
)}
/>
@@ -258,7 +258,7 @@ export const RedisConnectionForm = ({ appConnection, onSubmit }: Props) => {
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
id="ssl-reject-unauthorized"
thumbClassName="bg-mineshaft-800"
isChecked={sslEnabled ? value : false}
@@ -76,7 +76,7 @@ export const RenderConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -102,7 +102,7 @@ export const SupabaseConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -78,7 +78,7 @@ export const TeamCityConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -79,7 +79,7 @@ export const TerraformCloudConnectionForm = ({ appConnection, onSubmit }: Props)
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -79,7 +79,7 @@ export const VercelConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -85,7 +85,7 @@ export const WindmillConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -70,7 +70,7 @@ export const ZabbixConnectionForm = ({ appConnection, onSubmit }: Props) => {
isDisabled={isUpdate}
value={value}
onValueChange={(val) => onChange(val)}
className="border-mineshaft-500 w-full border"
className="w-full border border-mineshaft-500"
position="popper"
dropdownContainerClassName="max-w-none"
>
@@ -12,10 +12,10 @@ export const PlatformManagedConfirmationModal = ({ isOpen, onOpenChange, onConfi
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<ModalContent className="max-w-2xl" title="Platform Managed Credentials">
<NoticeBannerV2 title="Are you sure you want have Infisical manage the credentials of this connection?">
<p className="text-mineshaft-300 my-1 text-sm">
<p className="my-1 text-sm text-mineshaft-300">
Once created, Infisical will update the password of this connection.
</p>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm text-mineshaft-300">
You will not be able to access the updated password.
</p>
</NoticeBannerV2>
@@ -2,7 +2,7 @@ import { NoticeBannerV2 } from "@app/components/v2/NoticeBannerV2/NoticeBannerV2
export const PlatformManagedNoticeBanner = () => (
<NoticeBannerV2 title="Platform Managed Credentials">
<p className="text-bunker-300 text-sm">
<p className="text-sm text-bunker-300">
This App Connection&#39;s credentials are managed by Infisical and cannot be updated.
</p>
</NoticeBannerV2>
@@ -23,11 +23,11 @@ export const SqlConnectionFields = ({
return (
<>
<Tab.Group selectedIndex={selectedTabIndex} onChange={setSelectedTabIndex}>
<Tab.List className="-pb-1 border-mineshaft-600 mb-6 w-full border-b-2">
<Tab.List className="-pb-1 mb-6 w-full border-b-2 border-mineshaft-600">
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
}`
}
>
@@ -35,15 +35,15 @@ export const SqlConnectionFields = ({
</Tab>
<Tab
className={({ selected }) =>
`outline-hidden -mb-[0.14rem] whitespace-nowrap px-4 py-2 text-sm font-medium disabled:opacity-60 ${
selected ? "border-mineshaft-300 text-mineshaft-200 border-b-2" : "text-bunker-300"
`-mb-[0.14rem] px-4 py-2 text-sm font-medium whitespace-nowrap outline-hidden disabled:opacity-60 ${
selected ? "border-b-2 border-mineshaft-300 text-mineshaft-200" : "text-bunker-300"
}`
}
>
SSL ({sslEnabled ? "Enabled" : "Disabled"})
</Tab>
</Tab.List>
<Tab.Panels className="border-mineshaft-600 bg-mineshaft-700/70 mb-4 rounded-sm border p-3 pb-0">
<Tab.Panels className="mb-4 rounded-sm border border-mineshaft-600 bg-mineshaft-700/70 p-3 pb-0">
<Tab.Panel>
<div className="mt-[0.675rem] flex items-start gap-2">
<Controller
@@ -132,7 +132,7 @@ export const SqlConnectionFields = ({
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl isError={Boolean(error?.message)} errorText={error?.message}>
<Switch
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
id="ssl-enabled"
thumbClassName="bg-mineshaft-800"
isChecked={value}
@@ -156,7 +156,7 @@ export const SqlConnectionFields = ({
isOptional
>
<TextArea
className="resize-none! h-14"
className="h-14 resize-none!"
{...field}
isDisabled={isPlatformManagedCredentials || !sslEnabled}
/>
@@ -173,7 +173,7 @@ export const SqlConnectionFields = ({
errorText={error?.message}
>
<Switch
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
id="ssl-reject-unauthorized"
thumbClassName="bg-mineshaft-800"
isChecked={sslEnabled ? value : false}
@@ -208,7 +208,7 @@ export const SqlConnectionFields = ({
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl isError={Boolean(error?.message)} errorText={error?.message}>
<Switch
className="bg-mineshaft-400/50 data-[state=checked]:bg-green/80 shadow-inner"
className="bg-mineshaft-400/50 shadow-inner data-[state=checked]:bg-green/80"
id="platform-managed"
thumbClassName="bg-mineshaft-800"
isChecked={value}
@@ -14,22 +14,22 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
const appDetails = APP_CONNECTION_MAP[app];
return (
<div className="border-mineshaft-500 mb-4 flex w-full items-start gap-2 border-b pb-4">
<div className="mb-4 flex w-full items-start gap-2 border-b border-mineshaft-500 pb-4">
<div className="relative">
<img
alt={`${appDetails.name} logo`}
src={`/images/integrations/${appDetails.image}`}
className="bg-bunker-500 h-12 w-12 rounded-md p-2"
className="h-12 w-12 rounded-md bg-bunker-500 p-2"
/>
{appDetails.icon && (
<FontAwesomeIcon
icon={appDetails.icon}
className="text-primary-700 absolute bottom-1 right-1"
className="absolute right-1 bottom-1 text-primary-700"
/>
)}
</div>
<div>
<div className="text-mineshaft-300 flex items-center">
<div className="flex items-center text-mineshaft-300">
{appDetails.name}
<a
href={`https://infisical.com/docs/integrations/app-connections/${app}`}
@@ -37,8 +37,8 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
className="mb-1 ml-1"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<FontAwesomeIcon icon={faBookOpen} className="mb-[0.03rem] mr-1 text-[12px]" />
<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="mr-1 mb-[0.03rem] text-[12px]" />
<span>Docs</span>
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -47,14 +47,14 @@ export const AppConnectionHeader = ({ app, isConnected, onBack }: Props) => {
</div>
</a>
</div>
<p className="text-mineshaft-400 text-sm leading-4">
<p className="text-sm leading-4 text-mineshaft-400">
{isConnected ? `${appDetails.name} Connection` : `Connect to ${appDetails.name}`}
</p>
</div>
{onBack && (
<button
type="button"
className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto mt-1 text-xs underline underline-offset-2"
className="mt-1 ml-auto text-xs text-mineshaft-400 underline underline-offset-2 hover:text-mineshaft-300"
onClick={onBack}
>
Select another App
@@ -46,7 +46,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
return (
<div className="flex h-full flex-col items-center justify-center py-2.5">
<Spinner size="lg" className="text-mineshaft-500" />
<p className="text-mineshaft-400 mt-4 text-sm">Loading options...</p>
<p className="mt-4 text-sm text-mineshaft-400">Loading options...</p>
</div>
);
}
@@ -60,7 +60,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
placeholder="Search options..."
className="bg-mineshaft-800 placeholder:text-mineshaft-400"
/>
<div className="h-118 grid 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,
@@ -78,7 +78,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
? handlePopUpOpen("upgradePlan")
: onSelect(option.app)
}
className="border-mineshaft-600 bg-mineshaft-700 hover:bg-mineshaft-600 group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border p-4 duration-200"
className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
>
<div className="relative">
<img
@@ -91,7 +91,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
/>
{icon && (
<FontAwesomeIcon
className="text-primary-700 absolute -bottom-1.5 -right-1.5"
className="absolute -right-1.5 -bottom-1.5 text-primary-700"
size="xl"
icon={icon}
/>
@@ -125,7 +125,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
service you're looking for,`}{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://infisical.com/slack"
rel="noopener noreferrer"
>
@@ -134,7 +134,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
or{" "}
<a
target="_blank"
className="hover:text-mineshaft-300 underline"
className="underline hover:text-mineshaft-300"
href="https://github.com/Infisical/infisical/discussions"
rel="noopener noreferrer"
>
@@ -145,7 +145,7 @@ export const AppConnectionsSelect = ({ onSelect, projectType }: Props) => {
</>
}
>
<div className="text-mineshaft-400 -ml-3 flex items-center gap-1.5">
<div className="-ml-3 flex items-center gap-1.5 text-mineshaft-400">
<span className="text-xs">
Don&#39;t see the third-party service you&#39;re looking for?
</span>
@@ -78,7 +78,7 @@ export const AppConnectionRow = ({
return (
<Tr
className={twMerge("hover:bg-mineshaft-700 group h-12 transition-colors duration-100")}
className={twMerge("group h-12 transition-colors duration-100 hover:bg-mineshaft-700")}
key={`app-connection-${id}`}
>
<Td>
@@ -93,35 +93,35 @@ export const AppConnectionRow = ({
<FontAwesomeIcon
icon={connectionDetails.icon}
size="xs"
className="text-primary-700 absolute -bottom-0.5 -right-0.5"
className="absolute -right-0.5 -bottom-0.5 text-primary-700"
/>
)}
</div>
<span className="hidden lg:inline">{connectionDetails.name}</span>
</div>
</Td>
<Td className="min-w-32! max-w-0">
<Td className="max-w-0 min-w-32!">
<div className="flex w-full items-center">
<p className="truncate">{name}</p>
{description && (
<Tooltip content={description}>
<FontAwesomeIcon icon={faInfoCircle} className="text-mineshaft-400 ml-1" />
<FontAwesomeIcon icon={faInfoCircle} className="ml-1 text-mineshaft-400" />
</Tooltip>
)}
</div>
</Td>
<Td className="min-w-32! max-w-0">
<Td className="max-w-0 min-w-32!">
<p className="truncate">
<FontAwesomeIcon
size="sm"
className="text-mineshaft-300/75 mr-1.5"
className="mr-1.5 text-mineshaft-300/75"
icon={methodDetails.icon}
/>
{methodDetails.name}
</p>
</Td>
{!isProjectView && (
<Td className="min-w-32! max-w-0">
<Td className="max-w-0 min-w-32!">
{project ? (
<Link
// @ts-expect-error app-connections aren't in kms/ssh
@@ -134,7 +134,7 @@ export const AppConnectionRow = ({
<p className="truncate">
<FontAwesomeIcon
size="sm"
className="text-mineshaft-300/75 mr-1.5"
className="mr-1.5 text-mineshaft-300/75"
icon={faTable}
/>
{project.name}
@@ -144,7 +144,7 @@ export const AppConnectionRow = ({
<p className="truncate">
<FontAwesomeIcon
size="sm"
className="text-mineshaft-300/75 mr-1.5"
className="mr-1.5 text-mineshaft-300/75"
icon={faBuilding}
/>
Organization
@@ -209,17 +209,17 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
handlePopUpOpen("editDetails", appConnection);
return (
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex items-center justify-between">
<div>
<div className="flex items-center gap-1">
<p className="text-mineshaft-100 text-xl font-medium">App Connections</p>
<p className="text-xl font-medium text-mineshaft-100">App Connections</p>
<a
href="https://infisical.com/docs/integrations/app-connections/overview"
target="_blank"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow ml-1 mt-[0.12rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<div className="mt-[0.12rem] 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
@@ -229,7 +229,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
</div>
</a>
</div>
<p className="text-bunker-300 text-sm">
<p className="text-sm text-bunker-300">
Create and configure connections with third-party apps for re-use across your project
{isProjectView ? "" : "s"}.
</p>
@@ -261,7 +261,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
</div>
<div className="flex gap-2">
{!isProjectView && (
<div className="border-mineshaft-600 bg-mineshaft-800 flex gap-x-0.5 rounded-md border p-1">
<div className="flex gap-x-0.5 rounded-md border border-mineshaft-600 bg-mineshaft-800 p-1">
<Button
variant="outline_bg"
onClick={() => {
@@ -271,7 +271,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
size="xs"
className={`${
view === View.Scope ? "bg-mineshaft-500" : "bg-transparent"
} hover:bg-mineshaft-600 min-w-20 rounded border-none`}
} min-w-20 rounded border-none hover:bg-mineshaft-600`}
>
Organization
</Button>
@@ -284,7 +284,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
size="xs"
className={`${
view === View.All ? "bg-mineshaft-500" : "bg-transparent"
} hover:bg-mineshaft-600 min-w-20 rounded border-none`}
} min-w-20 rounded border-none hover:bg-mineshaft-600`}
>
All
</Button>
@@ -304,7 +304,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
variant="plain"
size="sm"
className={twMerge(
"border-mineshaft-600 bg-mineshaft-800 hover:border-primary/60 hover:bg-primary/10 flex h-10 w-11 items-center justify-center overflow-hidden border p-0 transition-all",
"flex h-10 w-11 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"
)}
>
@@ -313,7 +313,7 @@ export const AppConnectionsTable = ({ projectId, projectType }: Props) => {
</DropdownMenuTrigger>
<DropdownMenuContent
sideOffset={2}
className="thin-scrollbar max-h-[70vh] overflow-y-auto"
className="max-h-[70vh] thin-scrollbar overflow-y-auto"
align="end"
>
<DropdownMenuLabel>Filter by Apps</DropdownMenuLabel>
@@ -50,10 +50,10 @@ export const DeleteAppConnectionModal = ({ isOpen, onOpenChange, appConnection }
>
{appConnection.isPlatformManagedCredentials && (
<NoticeBannerV2 className="mt-3" title="Platform Managed Credentials">
<p className="text-bunker-300 text-sm">
<p className="text-sm text-bunker-300">
This App Connection&#39;s credentials are managed by Infisical.
</p>
<p className="text-bunker-300 mt-3 text-sm">
<p className="mt-3 text-sm text-bunker-300">
By deleting this connection you may lose permanent access to the associated resource.
</p>
</NoticeBannerV2>
@@ -6,14 +6,14 @@ import { LogsSection } from "./components";
export const AuditLogsPage = () => {
return (
<div className="bg-bunker-800 h-full">
<div className="h-full bg-bunker-800">
<Helmet>
<title>Infisical | Audit Logs</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
</Helmet>
<div className="bg-bunker-800 flex h-full w-full justify-center text-white">
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl">
<PageHeader
title="Audit logs"
@@ -29,14 +29,14 @@ export const LogFilterItem = ({
<Tooltip content={tooltipText} className="max-w-sm">
<FontAwesomeIcon
icon={faInfoCircle}
className="text-mineshaft-400 -mt-[0.05rem] ml-1 text-[11px]"
className="-mt-[0.05rem] ml-1 text-[11px] text-mineshaft-400"
/>
</Tooltip>
)}
<Button
onClick={() => onClear()}
variant="link"
className="text-mineshaft-400 hover:text-mineshaft-300 ml-auto font-normal transition-all duration-75"
className="ml-auto font-normal text-mineshaft-400 transition-all duration-75 hover:text-mineshaft-300"
size="xs"
>
Clear
@@ -98,7 +98,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
))}
</>
) : (
<div className="bg-mineshaft-600 text-bunker-200 flex w-[19.1rem] items-center justify-between rounded-l-md border border-transparent px-5 py-2 text-sm">
<div className="flex w-[19.1rem] items-center justify-between rounded-l-md border border-transparent bg-mineshaft-600 px-5 py-2 text-sm text-bunker-200">
<div>
{formatDateTime({
timezone,
@@ -234,7 +234,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
</FormControl>
</div>
{error && (
<span className="text-xs text-red-600 text-opacity-90">
<span className="text-opacity-90 text-xs text-red-600">
{error.message}
</span>
)}
@@ -276,7 +276,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
<FontAwesomeIcon
icon={faChevronRight}
size="xs"
className="text-mineshaft-400 mt-6"
className="mt-6 text-mineshaft-400"
/>
<Controller
name="endDate"
@@ -324,7 +324,7 @@ export const LogsDateFilter = ({ setFilter, filter, timezone, setTimezone }: Pro
<Select
value={timezone}
onValueChange={(val) => setTimezone(val as Timezone)}
className="border-mineshaft-500! bg-mineshaft-600! w-[10.6rem] border capitalize"
className="w-[10.6rem] border border-mineshaft-500! bg-mineshaft-600! capitalize"
dropdownContainerClassName="max-w-none"
position="popper"
dropdownContainerStyle={{
@@ -124,7 +124,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
<Button variant="outline_bg" colorSchema="primary" className="relative">
<FontAwesomeIcon icon={faFilterCircleXmark} />
{activeFilterCount > 0 && (
<Badge className="absolute bottom-0 right-0" variant="primary">
<Badge className="absolute right-0 bottom-0" variant="primary">
{activeFilterCount}
</Badge>
)}
@@ -132,8 +132,8 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="mt-4 overflow-visible py-4">
<form onSubmit={handleSubmit(setFilter)}>
<div className="font-inter flex min-w-64 flex-col">
<div className="border-b-mineshaft-500 mb-3 flex items-center border-b px-3 pb-2">
<div className="flex min-w-64 flex-col font-inter">
<div className="mb-3 flex items-center border-b border-b-mineshaft-500 px-3 pb-2">
<div className="flex w-full items-center justify-between">
<div className="flex items-center gap-2">
<span>Filters</span>
@@ -175,7 +175,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
<FormControl>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="thin-scrollbar border-mineshaft-500 bg-mineshaft-700 font-inter text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200 inline-flex w-full cursor-pointer items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm font-normal">
<div className="inline-flex thin-scrollbar w-full cursor-pointer items-center justify-between rounded-md border border-mineshaft-500 bg-mineshaft-700 px-3 py-2 font-inter text-sm font-normal whitespace-nowrap text-bunker-200 outline-hidden data-placeholder:text-mineshaft-200">
{selectedEventTypes?.length === 1
? filteredEventTypes.find(
(eventType) => eventType.value === selectedEventTypes[0]
@@ -189,7 +189,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
<DropdownMenuContent
align="end"
sideOffset={2}
className="z-100 thin-scrollbar max-h-80 overflow-hidden"
className="z-100 max-h-80 thin-scrollbar overflow-hidden"
>
<div className="max-h-80 overflow-y-auto">
{filteredEventTypes.length > 0 ? (
@@ -224,7 +224,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
isSelected ? (
<FontAwesomeIcon
icon={faCheckCircle}
className="text-primary pr-0.5"
className="pr-0.5 text-primary"
/>
) : (
<div className="pl-[1.01rem]" />
@@ -269,7 +269,7 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
if (e === "all") onChange(undefined);
else setValue("userAgentType", e as UserAgentType, { shouldDirty: true });
}}
className={twMerge("border-mineshaft-500 bg-mineshaft-700 w-full border")}
className={twMerge("w-full border border-mineshaft-500 bg-mineshaft-700")}
position="popper"
>
<SelectItem value="all" key="all">
@@ -337,9 +337,9 @@ export const LogsFilter = ({ presets, setFilter, filter, project }: Props) => {
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.3 }}
>
<div className="mb-3 mt-2">
<div className="mt-2 mb-3">
<p className="text-xs opacity-60">Secrets</p>
<div className="bg-mineshaft-500 h-px w-full rounded-full" />
<div className="h-px w-full rounded-full bg-mineshaft-500" />
</div>
<LogFilterItem
label="Environment"
@@ -73,17 +73,17 @@ const LogsSectionComponent = ({
if (pageView)
return (
<div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
<div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="mb-4 flex flex-wrap items-center justify-between gap-y-2">
<div>
<div className="flex items-center gap-1 whitespace-nowrap">
<p className="text-mineshaft-100 text-xl font-medium">Audit History</p>
<p className="text-xl font-medium text-mineshaft-100">Audit History</p>
<a
href="https://infisical.com/docs/documentation/platform/audit-logs"
target="_blank"
rel="noopener noreferrer"
>
<div className="bg-yellow/20 text-yellow ml-1 mt-[0.1rem] inline-block rounded-md px-1.5 text-sm opacity-80 hover:opacity-100">
<div className="mt-[0.1rem] 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
@@ -22,7 +22,7 @@ const Tag = ({ label, value }: TagProps) => {
return (
<div className="flex items-center space-x-1.5">
<div className="bg-mineshaft-600 rounded-sm p-0.5 pl-1 font-mono">{label}:</div>
<div className="rounded-sm bg-mineshaft-600 p-0.5 pl-1 font-mono">{label}:</div>
<div>{value}</div>
</div>
);
@@ -34,7 +34,7 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
return (
<>
<Tr
className="hover:bg-mineshaft-700 h-10 cursor-pointer border-x-0 border-b border-t-0"
className="h-10 cursor-pointer border-x-0 border-t-0 border-b hover:bg-mineshaft-700"
role="button"
tabIndex={0}
onClick={() => setIsOpen.toggle()}
@@ -62,9 +62,9 @@ export const LogsTableRow = ({ auditLog, rowNumber, timezone }: Props) => {
</Td>
</Tr>
{isOpen && (
<Tr className={`log-${auditLog.id} h-10 border-x-0 border-b border-t-0`}>
<Tr className={`log-${auditLog.id} h-10 border-x-0 border-t-0 border-b`}>
<Td colSpan={3} className="px-3 py-2">
<div className="thin-scrollbar border-mineshaft-600 bg-bunker-800 my-1 max-h-96 overflow-auto whitespace-pre-wrap rounded-sm border p-2 font-mono leading-6">
<div className="my-1 max-h-96 thin-scrollbar overflow-auto rounded-sm border border-mineshaft-600 bg-bunker-800 p-2 font-mono leading-6 whitespace-pre-wrap">
{JSON.stringify(auditLog, null, 4)}
</div>
</Td>
@@ -11,13 +11,13 @@ export const BillingPage = () => {
const { t } = useTranslation();
return (
<div className="bg-bunker-800 h-full">
<div className="h-full bg-bunker-800">
<Helmet>
<title>{t("common.head-title", { title: t("billing.title") })}</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
</Helmet>
<div className="bg-bunker-800 flex h-full w-full justify-center text-white">
<div className="flex h-full w-full justify-center bg-bunker-800 text-white">
<div className="w-full max-w-7xl px-6">
<PageHeader
title={t("billing.title")}
@@ -38,7 +38,7 @@ export const CurrentPlanSection = () => {
};
return (
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Current usage</h2>
<TableContainer className="mt-4">
<Table>
@@ -21,14 +21,14 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
>
<ModalContent className="max-w-(--breakpoint-lg)" title="Infisical Cloud Plans">
<Tab.Group>
<Tab.List className="max-w-(--breakpoint-lg) border-mineshaft-600 border-b-2">
<Tab.List className="max-w-(--breakpoint-lg) border-b-2 border-mineshaft-600">
<Tab as={Fragment}>
{({ selected }) => (
<button
type="button"
className={`p-4 ${
selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
} w-30 outline-hidden whitespace-nowrap font-medium`}
} w-30 font-medium whitespace-nowrap outline-hidden`}
>
Bill monthly
</button>
@@ -40,7 +40,7 @@ export const ManagePlansModal = ({ popUp, handlePopUpToggle }: Props) => {
type="button"
className={`p-4 ${
selected ? "border-b-2 border-white text-white" : "text-mineshaft-400"
} w-30 outline-hidden font-medium`}
} w-30 font-medium outline-hidden`}
>
Bill yearly
</button>
@@ -110,9 +110,9 @@ export const PreviewSection = () => {
subscription?.slug !== "pro" &&
subscription?.slug !== "pro-annual" && (
<div className="flex flex-row space-x-6">
<div className="border-primary/40 bg-primary/10 mb-6 flex flex-1 items-center rounded-lg border p-4">
<div className="mb-6 flex flex-1 items-center rounded-lg border border-primary/40 bg-primary/10 p-4">
<div className="flex-1">
<h2 className="text-mineshaft-100 text-xl font-medium">
<h2 className="text-xl font-medium text-mineshaft-100">
Unleash the full power of{" "}
<span className="bg-linear-to-r from-primary-500 to-yellow bg-clip-text font-medium text-transparent">
Infisical
@@ -137,8 +137,8 @@ export const PreviewSection = () => {
)}
</OrgPermissionCan>
</div>
<div className="border-mineshaft-600 bg-mineshaft-800 mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border p-4">
<div className="text-mineshaft-200 mb-4 flex w-full justify-center font-medium">
<div className="mb-6 flex w-full max-w-48 flex-col items-center rounded-lg border border-mineshaft-600 bg-mineshaft-800 p-4">
<div className="mb-4 flex w-full justify-center font-medium text-mineshaft-200">
Want to learn more?{" "}
</div>
<div className="flex w-full justify-center">
@@ -147,7 +147,7 @@ export const PreviewSection = () => {
target="_blank"
rel="noopener noreferrer"
>
<span className="border-mineshaft-500 bg-mineshaft-600 hover:border-primary/40 hover:bg-primary/10 cursor-pointer rounded-full border px-4 py-2 duration-200">
<span className="cursor-pointer rounded-full border border-mineshaft-500 bg-mineshaft-600 px-4 py-2 duration-200 hover:border-primary/40 hover:bg-primary/10">
Book a demo{" "}
<FontAwesomeIcon
icon={faArrowUpRightFromSquare}
@@ -161,9 +161,9 @@ export const PreviewSection = () => {
)}
{!isPending && subscription && data && (
<div className="mb-6 flex">
<div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
<div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Current plan</p>
<p className="text-mineshaft-50 mb-8 text-2xl font-medium">
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{`${formatPlanSlug(subscription.slug)} ${
subscription.status === "trialing" ? "(Trial)" : ""
}`}
@@ -190,17 +190,17 @@ export const PreviewSection = () => {
</OrgPermissionCan>
)}
</div>
<div className="border-mineshaft-600 bg-mineshaft-900 mr-4 flex-1 rounded-lg border p-4">
<div className="mr-4 flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Price</p>
<p className="text-mineshaft-50 mb-8 text-2xl font-medium">
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{subscription.status === "trialing"
? "$0.00 / month"
: `${formatAmount(data.amount)} / ${data.interval}`}
</p>
</div>
<div className="border-mineshaft-600 bg-mineshaft-900 flex-1 rounded-lg border p-4">
<div className="flex-1 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<p className="mb-2 text-gray-400">Subscription renews on</p>
<p className="text-mineshaft-50 mb-8 text-2xl font-medium">
<p className="mb-8 text-2xl font-medium text-mineshaft-50">
{data.currentPeriodEnd ? formatDate(data.currentPeriodEnd) : "-"}
</p>
</div>
@@ -59,9 +59,9 @@ export const CompanyNameSection = () => {
return (
<form
onSubmit={handleSubmit(onFormSubmit)}
className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<h2 className="text-mineshaft-100 mb-8 flex-1 text-xl font-medium">Business name</h2>
<h2 className="mb-8 flex-1 text-xl font-medium text-mineshaft-100">Business name</h2>
<div className="max-w-md">
<Controller
defaultValue=""
@@ -60,7 +60,7 @@ export const InvoiceEmailSection = () => {
return (
<form
onSubmit={handleSubmit(onFormSubmit)}
className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4"
className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
>
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Invoice email recipient</h2>
<div className="max-w-md">
@@ -24,7 +24,7 @@ export const PmtMethodsSection = () => {
};
return (
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<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-medium text-white">Payment methods</h2>
<OrgPermissionCan
@@ -15,7 +15,7 @@ export const TaxIDSection = () => {
] as const);
return (
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<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-medium text-white">Tax ID</h2>
<OrgPermissionCan
@@ -2,7 +2,7 @@ import { InvoicesTable } from "./InvoicesTable";
export const BillingReceiptsTab = () => {
return (
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="flex-1 text-xl font-medium text-white">Invoices</h2>
<InvoicesTable />
</div>
@@ -19,7 +19,7 @@ export const LicensesSection = () => {
const { data, isPending } = useGetOrgLicenses(currentOrg?.id ?? "");
return (
<div className="border-mineshaft-600 bg-mineshaft-900 mb-6 rounded-lg border p-4">
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<h2 className="mb-8 flex-1 text-xl font-medium text-white">Enterprise licenses</h2>
<TableContainer className="mt-4">
<Table>
@@ -77,10 +77,10 @@ const Page = () => {
handlePopUpClose("deleteGroup");
};
if (isPending) return <Spinner size="sm" className="ml-2 mt-2" />;
if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
return (
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.group.name}>
@@ -16,12 +16,12 @@ type Props = {
export const GroupDetailsSection = ({ groupId, handlePopUpOpen }: Props) => {
const { data, isPending } = useGetGroupById(groupId);
if (isPending) return <Spinner size="sm" className="ml-2 mt-2" />;
if (isPending) return <Spinner size="sm" className="mt-2 ml-2" />;
return data ? (
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Group Details</h3>
<div className="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-medium text-mineshaft-100">Group Details</h3>
<OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => {
return (
@@ -49,38 +49,38 @@ export const GroupDetailsSection = ({ groupId, handlePopUpOpen }: Props) => {
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Group ID</p>
<p className="text-sm font-medium text-mineshaft-300">Group ID</p>
<div className="group flex items-center gap-2">
<p className="text-mineshaft-300 text-sm">{data.group.id}</p>
<p className="text-sm text-mineshaft-300">{data.group.id}</p>
<CopyButton value={data.group.id} name="Group ID" size="xs" variant="plain" />
</div>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Name</p>
<p className="text-mineshaft-300 text-sm">{data.group.name}</p>
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{data.group.name}</p>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Slug</p>
<p className="text-sm font-medium text-mineshaft-300">Slug</p>
<div className="group flex items-center gap-2">
<p className="text-mineshaft-300 text-sm">{data.group.slug}</p>
<p className="text-sm text-mineshaft-300">{data.group.slug}</p>
<CopyButton value={data.group.slug} name="Slug" size="xs" variant="plain" />
</div>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
<p className="text-mineshaft-300 text-sm">{data.group.role}</p>
<p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
<p className="text-sm text-mineshaft-300">{data.group.role}</p>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Created At</p>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm font-medium text-mineshaft-300">Created At</p>
<p className="text-sm text-mineshaft-300">
{new Date(data.group.createdAt).toLocaleString()}
</p>
</div>
</div>
</div>
) : (
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<div className="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">
<p className="text-mineshaft-300">Group data not found</p>
</div>
</div>
@@ -51,9 +51,9 @@ export const GroupMembersSection = ({ groupId, groupSlug }: Props) => {
};
return (
<div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Group Members</h3>
<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-medium text-mineshaft-100">Group Members</h3>
<OrgPermissionCan I={OrgPermissionGroupActions.Edit} a={OrgPermissionSubjects.Groups}>
{(isAllowed) => (
<Tooltip
@@ -72,7 +72,7 @@ const Page = () => {
};
return (
<div className="bg-bunker-800 container mx-auto flex flex-col justify-between text-white">
<div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
{data && (
<div className="mx-auto mb-6 w-full max-w-7xl">
<PageHeader title={data.identity.name} />
@@ -19,12 +19,12 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
const { data, refetch } = useGetIdentityById(identityId);
return data ? (
<div className="border-mineshaft-600 bg-mineshaft-900 mt-4 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Authentication</h3>
<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-medium text-mineshaft-100">Authentication</h3>
</div>
{data.identity.authMethods.length > 0 ? (
<div className="divide-mineshaft-400/50 flex flex-col divide-y">
<div className="flex flex-col divide-y divide-mineshaft-400/50">
{data.identity.authMethods.map((authMethod) => (
<button
key={authMethod}
@@ -36,7 +36,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
})
}
type="button"
className="bg-mineshaft-900 hover:bg-mineshaft-700 data-[state=open]:bg-mineshaft-600 flex w-full items-center justify-between px-4 py-2 text-sm"
className="flex w-full items-center justify-between bg-mineshaft-900 px-4 py-2 text-sm hover:bg-mineshaft-700 data-[state=open]:bg-mineshaft-600"
>
<span>{identityAuthToNameMap[authMethod]}</span>
<div className="flex gap-2">
@@ -52,7 +52,7 @@ export const IdentityAuthenticationSection = ({ identityId, handlePopUpOpen }: P
</div>
) : (
<div className="w-full space-y-2 pt-2">
<p className="text-mineshaft-300 text-sm">
<p className="text-sm text-mineshaft-300">
No authentication methods configured. Get started by creating a new auth method.
</p>
</div>
@@ -36,9 +36,9 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
return (
<div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Client ID</p>
<p className="text-sm font-medium text-mineshaft-300">Client ID</p>
<div className="group flex align-top">
<p className="text-mineshaft-300 text-sm">{identityUniversalAuth?.clientId ?? ""}</p>
<p className="text-sm text-mineshaft-300">{identityUniversalAuth?.clientId ?? ""}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextClientId}>
<IconButton
@@ -58,7 +58,7 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
</div>
{clientSecrets?.length ? (
<div className="flex justify-between">
<p className="text-mineshaft-300 text-sm font-medium">{`Client Secrets (${clientSecrets.length})`}</p>
<p className="text-sm font-medium text-mineshaft-300">{`Client Secrets (${clientSecrets.length})`}</p>
<Button
variant="link"
onClick={() => {
@@ -90,10 +90,10 @@ export const IdentityClientSecrets = ({ identityId, handlePopUpOpen }: Props) =>
<div className="flex items-center">
<FontAwesomeIcon size="1x" icon={faKey} />
<div className="ml-4">
<p className="text-mineshaft-300 text-sm font-medium">
<p className="text-sm font-medium text-mineshaft-300">
{`${clientSecretPrefix}****`}
</p>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm text-mineshaft-300">
{expiresAt ? `Expires on ${format(expiresAt, "yyyy-MM-dd")}` : "No Expiry"}
</p>
</div>
@@ -28,8 +28,8 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
return (
<div>
{tokens?.length ? (
<div className="border-bunker-400 flex items-center justify-between border-b pb-1">
<p className="text-bunker-300 text-sm font-medium">{`Access Tokens (${tokens.length})`}</p>
<div className="flex items-center justify-between border-b border-bunker-400 pb-1">
<p className="text-sm font-medium text-bunker-300">{`Access Tokens (${tokens.length})`}</p>
<Button
size="xs"
className="underline"
@@ -54,16 +54,16 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
);
return (
<div
className="border-mineshaft-500 group flex items-center justify-between border-b px-2 py-2 last:pb-0"
className="group flex items-center justify-between border-b border-mineshaft-500 px-2 py-2 last:pb-0"
key={`identity-token-${token.id}`}
>
<div className="flex items-center">
<FontAwesomeIcon size="xs" className="text-mineshaft-400" icon={faKey} />
<div className="ml-3">
<p className="text-mineshaft-300 text-sm font-medium">
<p className="text-sm font-medium text-mineshaft-300">
{token.name ? token.name : "-"}
</p>
<p className="text-mineshaft-400 text-xs">
<p className="text-xs text-mineshaft-400">
{token.isAccessTokenRevoked
? "Revoked"
: `Expires on ${format(expiresAt, "yyyy-MM-dd")}`}
@@ -114,7 +114,7 @@ export const IdentityTokens = ({ identityId, handlePopUpOpen }: Props) => {
);
})}
<Button
className="mr-4 mt-4 w-full"
className="mt-4 mr-4 w-full"
colorSchema="secondary"
type="submit"
size="xs"
@@ -159,7 +159,7 @@ export const IdentityClientSecretModal = ({ popUp, handlePopUpToggle }: Props) =
</div>
</form>
) : (
<div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all">{token}</p>
<Tooltip content={copyTextToken}>
<IconButton
@@ -41,9 +41,9 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
const { data } = useGetIdentityById(identityId);
return data ? (
<div className="border-mineshaft-600 bg-mineshaft-900 rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Identity Details</h3>
<div className="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-medium text-mineshaft-100">Identity Details</h3>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
@@ -116,9 +116,9 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
</div>
<div className="pt-4">
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Identity ID</p>
<p className="text-sm font-medium text-mineshaft-300">Identity ID</p>
<div className="group flex align-top">
<p className="text-mineshaft-300 text-sm">{data.identity.id}</p>
<p className="text-sm text-mineshaft-300">{data.identity.id}</p>
<div className="opacity-0 transition-opacity duration-300 group-hover:opacity-100">
<Tooltip content={copyTextId}>
<IconButton
@@ -137,47 +137,47 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
</div>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Name</p>
<p className="text-mineshaft-300 text-sm">{data.identity.name}</p>
<p className="text-sm font-medium text-mineshaft-300">Name</p>
<p className="text-sm text-mineshaft-300">{data.identity.name}</p>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Last Login Auth Method</p>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm font-medium text-mineshaft-300">Last Login Auth Method</p>
<p className="text-sm text-mineshaft-300">
{data.lastLoginAuthMethod ? identityAuthToNameMap[data.lastLoginAuthMethod] : "-"}
</p>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Last Login Time</p>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm font-medium text-mineshaft-300">Last Login Time</p>
<p className="text-sm text-mineshaft-300">
{data.lastLoginTime ? format(data.lastLoginTime, "PPpp") : "-"}
</p>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Delete Protection</p>
<p className="text-mineshaft-300 text-sm">
<p className="text-sm font-medium text-mineshaft-300">Delete Protection</p>
<p className="text-sm text-mineshaft-300">
{data.identity.hasDeleteProtection ? "On" : "Off"}
</p>
</div>
<div className="mb-4">
<p className="text-mineshaft-300 text-sm font-medium">Organization Role</p>
<p className="text-mineshaft-300 text-sm">{data.role}</p>
<p className="text-sm font-medium text-mineshaft-300">Organization Role</p>
<p className="text-sm text-mineshaft-300">{data.role}</p>
</div>
<div>
<p className="text-mineshaft-300 text-sm font-medium">Metadata</p>
<p className="text-sm font-medium text-mineshaft-300">Metadata</p>
{data?.metadata?.length ? (
<div className="text-mineshaft-300 mt-1 flex flex-wrap gap-2 text-sm">
<div className="mt-1 flex flex-wrap gap-2 text-sm text-mineshaft-300">
{data.metadata?.map((el) => (
<div key={el.id} className="flex items-center">
<Tag
size="xs"
className="border-mineshaft-500 mr-0 flex items-center rounded-r-none border"
className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
>
<FontAwesomeIcon icon={faKey} size="xs" className="mr-1" />
<div>{el.key}</div>
</Tag>
<Tag
size="xs"
className="border-mineshaft-500 bg-mineshaft-900 flex items-center rounded-l-none border pl-1"
className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
>
<div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
{el.value}
@@ -187,7 +187,7 @@ export const IdentityDetailsSection = ({ identityId, handlePopUpOpen }: Props) =
))}
</div>
) : (
<p className="text-mineshaft-300 text-sm">-</p>
<p className="text-sm text-mineshaft-300">-</p>
)}
</div>
</div>
@@ -46,7 +46,7 @@ export const IdentityProjectRow = ({
return (
<Tr
className="hover:bg-mineshaft-700 group h-10 cursor-pointer transition-colors duration-100"
className="group h-10 cursor-pointer transition-colors duration-100 hover:bg-mineshaft-700"
key={`identity-project-membership-${id}`}
onClick={() => {
if (isAccessible) {
@@ -47,9 +47,9 @@ export const IdentityProjectsSection = ({ identityId }: Props) => {
};
return (
<div className="border-mineshaft-600 bg-mineshaft-900 w-full rounded-lg border p-4">
<div className="border-mineshaft-400 flex items-center justify-between border-b pb-4">
<h3 className="text-mineshaft-100 text-lg font-medium">Projects</h3>
<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-medium text-mineshaft-100">Projects</h3>
<IconButton
ariaLabel="copy icon"
variant="plain"
@@ -159,7 +159,7 @@ export const IdentityTokenModal = ({ popUp, handlePopUpToggle }: Props) => {
</div>
</form>
) : (
<div className="mb-3 mr-2 mt-2 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<div className="mt-2 mr-2 mb-3 flex items-center justify-end rounded-md bg-white/[0.07] p-2 text-base text-gray-400">
<p className="mr-4 break-all">{token}</p>
<Tooltip content={copyTextToken}>
<IconButton
@@ -9,11 +9,11 @@ type Props = {
export const IdentityAuthFieldDisplay = ({ label, children, className }: Props) => {
return (
<div className={className}>
<span className="text-mineshaft-400 text-sm">{label}</span>
<span className="text-sm text-mineshaft-400">{label}</span>
{children ? (
<p className="break-words text-base leading-4">{children}</p>
<p className="text-base leading-4 break-words">{children}</p>
) : (
<p className="text-bunker-400 text-base italic leading-4">Not set</p>
<p className="text-base leading-4 text-bunker-400 italic">Not set</p>
)}
</div>
);
@@ -51,7 +51,7 @@ export const LockoutFields = ({
return (
<>
<div className="border-mineshaft-500 col-span-2 mt-3 flex justify-between border-b pb-2">
<div className="col-span-2 mt-3 flex justify-between border-b border-mineshaft-500 pb-2">
<span className="text-bunker-300">Lockout Options</span>
<OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
{(isAllowed) => (
@@ -77,7 +77,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
return (
<div className="col-span-2 mt-3">
<div className="border-mineshaft-500 flex items-end justify-between border-b pb-2">
<div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
<span className="text-bunker-300">Access Tokens</span>
<OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
{(isAllowed) => (
@@ -103,7 +103,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
<THead>
<Tr className="text-xs font-medium">
<Th className="py-1 font-normal">Name</Th>
<Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
<Th className="py-1 font-normal whitespace-nowrap">Number of Uses</Th>
<Th className="py-1 font-normal">Expires</Th>
<Th className="w-5 py-1 font-normal" />
</Tr>
@@ -128,7 +128,7 @@ export const IdentityTokenAuthTokensTable = ({ tokens, identityId }: Props) => {
}
return (
<Tr className="hover:bg-mineshaft-700 text-xs" key={id}>
<Tr className="text-xs hover:bg-mineshaft-700" key={id}>
<Td>{name || "-"}</Td>
<Td>
{`${accessTokenNumUses}${accessTokenNumUsesLimit ? `/${accessTokenNumUsesLimit}` : ""}`}
@@ -66,7 +66,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
return (
<div className="col-span-2">
<div className="border-mineshaft-500 flex items-end justify-between border-b pb-2">
<div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
<span className="text-bunker-300">Client Secrets</span>
<OrgPermissionCan I={OrgPermissionIdentityActions.Edit} a={OrgPermissionSubjects.Identity}>
{(isAllowed) => (
@@ -93,7 +93,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
<Tr className="text-xs font-medium">
<Th className="py-1 font-normal">Secret</Th>
<Th className="py-1 font-normal">Description</Th>
<Th className="whitespace-nowrap py-1 font-normal">Number of Uses</Th>
<Th className="py-1 font-normal whitespace-nowrap">Number of Uses</Th>
<Th className="py-1 font-normal">Expires</Th>
<Th className="w-5 py-1 font-normal" />
</Tr>
@@ -118,7 +118,7 @@ export const IdentityUniversalAuthClientSecretsTable = ({ clientSecrets, identit
}
return (
<Tr className="hover:bg-mineshaft-700 text-xs" key={id}>
<Tr className="text-xs hover:bg-mineshaft-700" key={id}>
<Td>{clientSecretPrefix}***</Td>
<Td>{description || "-"}</Td>
<Td>
@@ -22,7 +22,7 @@ export const ViewIdentityContentWrapper = ({ children, onDelete, onEdit }: Props
return (
<div className="flex flex-col gap-4">
<div>
<div className="border-mineshaft-500 flex items-end justify-between border-b pb-2">
<div className="flex items-end justify-between border-b border-mineshaft-500 pb-2">
<span className="text-bunker-300">Details</span>
<div className="flex items-center gap-2">
<DropdownMenu>
@@ -75,11 +75,11 @@ export const ViewIdentityJwtAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<p className="bg-mineshaft-600 break-words rounded-sm p-2">{data.jwksCaCert}</p>
<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.jwksCaCert}</p>
}
>
<div className="w-min">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} />
<span>Reveal</span>
</Badge>
@@ -98,13 +98,13 @@ export const ViewIdentityJwtAuthContent = ({
className="max-w-xl p-2"
key={key}
content={
<p className="bg-mineshaft-600 whitespace-normal break-words rounded-sm p-2">
<p className="rounded-sm bg-mineshaft-600 p-2 break-words whitespace-normal">
{key}
</p>
}
>
<div className="inline-block w-min">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} />
<span>Key {index + 1}</span>
</Badge>
@@ -133,13 +133,13 @@ export const ViewIdentityJwtAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<pre className="bg-mineshaft-600 whitespace-pre-wrap rounded-sm p-2">
<pre className="rounded-sm bg-mineshaft-600 p-2 whitespace-pre-wrap">
{JSON.stringify(data.boundClaims, null, 2)}
</pre>
}
>
<div className="w-min">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} />
<span>Reveal</span>
</Badge>
@@ -84,20 +84,20 @@ export const ViewIdentityKubernetesAuthContent = ({
side="right"
className="max-w-xl p-2"
content={
<p className="bg-mineshaft-600 break-words rounded-sm p-2">
<p className="rounded-sm bg-mineshaft-600 p-2 break-words">
{data.tokenReviewerJwt || "Not provided"}
</p>
}
>
<div className="w-min">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} />
<span>Reveal</span>
</Badge>
</div>
</Tooltip>
) : (
<p className="text-bunker-400 text-base italic leading-4">Not set</p>
<p className="text-base leading-4 text-bunker-400 italic">Not set</p>
)}
</IdentityAuthFieldDisplay>
<IdentityAuthFieldDisplay className="col-span-2" label="Allowed Service Account Names">
@@ -120,10 +120,10 @@ export const ViewIdentityKubernetesAuthContent = ({
<Tooltip
side="right"
className="max-w-xl p-2"
content={<p className="bg-mineshaft-600 break-words rounded-sm p-2">{data.caCert}</p>}
content={<p className="rounded-sm bg-mineshaft-600 p-2 break-words">{data.caCert}</p>}
>
<div className="w-min">
<Badge className="bg-mineshaft-400/50 text-bunker-300 flex h-5 w-min items-center gap-1.5 whitespace-nowrap">
<Badge className="flex h-5 w-min items-center gap-1.5 bg-mineshaft-400/50 whitespace-nowrap text-bunker-300">
<FontAwesomeIcon icon={faEye} />
<span>Reveal</span>
</Badge>

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