From 407ba567a039ad7bde1780722ebb61f20ea695fc Mon Sep 17 00:00:00 2001 From: miloschwartz Date: Mon, 8 Jun 2026 22:07:44 -0700 Subject: [PATCH] various visual changes --- .../settings/resources/public/create/page.tsx | 90 ++++++++++--------- src/components/AuthPageBrandingForm.tsx | 2 +- .../resource-policy/CreatePolicyForm.tsx | 32 +------ .../PolicyAuthStackSection.tsx | 2 - .../PolicyAuthStackSectionCreate.tsx | 61 +++++-------- src/components/ui/button.tsx | 2 +- src/components/ui/controlled-data-table.tsx | 11 --- src/components/ui/table.tsx | 2 +- 8 files changed, 73 insertions(+), 129 deletions(-) diff --git a/src/app/[orgId]/settings/resources/public/create/page.tsx b/src/app/[orgId]/settings/resources/public/create/page.tsx index ff4fd938b..5ab1d912b 100644 --- a/src/app/[orgId]/settings/resources/public/create/page.tsx +++ b/src/app/[orgId]/settings/resources/public/create/page.tsx @@ -41,6 +41,7 @@ import { FormMessage } from "@app/components/ui/form"; import { Input } from "@app/components/ui/input"; +import { Label } from "@app/components/ui/label"; import { Popover, PopoverContent, @@ -1172,52 +1173,55 @@ export default function Page() { {isNative ? ( - - + + - - - - { - setNativeSelectedSite( + + + + - - + ) => { + setNativeSelectedSite( + site + ); + setNativeSiteOpen( + false + ); + }} + /> + + + ) : standardDaemonLocation !== "site" || diff --git a/src/components/AuthPageBrandingForm.tsx b/src/components/AuthPageBrandingForm.tsx index b4dc5c521..5561df314 100644 --- a/src/components/AuthPageBrandingForm.tsx +++ b/src/components/AuthPageBrandingForm.tsx @@ -91,7 +91,7 @@ export default function AuthPageBrandingForm({ orgSubtitle: branding?.orgSubtitle ?? `Log in to {{orgName}}`, resourceTitle: branding?.resourceTitle ?? - `Authenticate to access {{resourceName}}`, + `Authenticate to Access {{resourceName}}`, resourceSubtitle: branding?.resourceSubtitle ?? `Choose your preferred authentication method for {{resourceName}}`, diff --git a/src/components/resource-policy/CreatePolicyForm.tsx b/src/components/resource-policy/CreatePolicyForm.tsx index b4cd146b5..f8d942c4f 100644 --- a/src/components/resource-policy/CreatePolicyForm.tsx +++ b/src/components/resource-policy/CreatePolicyForm.tsx @@ -12,11 +12,9 @@ import { import { useEnvContext } from "@app/hooks/useEnvContext"; import { useOrgContext } from "@app/hooks/useOrgContext"; import { usePaidStatus } from "@app/hooks/usePaidStatus"; -import { getUserDisplayName } from "@app/lib/getUserDisplayName"; import { orgQueries } from "@app/lib/queries"; import { zodResolver } from "@hookform/resolvers/zod"; import { build } from "@server/build"; -import { UserType } from "@server/types/UserTypes"; import { useQuery } from "@tanstack/react-query"; import { useTranslations } from "next-intl"; import { @@ -67,12 +65,6 @@ export function CreatePolicyForm({}: CreatePolicyFormProps) { env.server.maxmind_asn_path && env.server.maxmind_asn_path.length > 0 ); - const { data: orgRoles = [], isLoading: isLoadingOrgRoles } = useQuery( - orgQueries.roles({ orgId: org.org.orgId }) - ); - const { data: orgUsers = [], isLoading: isLoadingOrgUsers } = useQuery( - orgQueries.users({ orgId: org.org.orgId }) - ); const { data: orgIdps = [], isLoading: isLoadingOrgIdps } = useQuery( orgQueries.identityProviders({ orgId: org.org.orgId, @@ -163,26 +155,6 @@ export function CreatePolicyForm({}: CreatePolicyFormProps) { } } - const allRoles = useMemo( - () => - orgRoles - .map((role) => ({ - id: role.roleId.toString(), - text: role.name - })) - .filter((role) => role.text !== "Admin"), - [orgRoles] - ); - - const allUsers = useMemo( - () => - orgUsers.map((user) => ({ - id: user.id.toString(), - text: `${getUserDisplayName({ email: user.email, username: user.username })}${user.type !== UserType.Internal ? ` (${user.idpName})` : ""}` - })), - [orgUsers] - ); - const allIdps = useMemo(() => { if (build === "saas") { if (isPaidUser(tierMatrix.orgOidc)) { @@ -197,7 +169,7 @@ export function CreatePolicyForm({}: CreatePolicyFormProps) { return []; }, [orgIdps, isPaidUser]); - if (isLoadingOrgRoles || isLoadingOrgUsers || isLoadingOrgIdps) { + if (isLoadingOrgIdps) { return <>; } @@ -252,8 +224,6 @@ export function CreatePolicyForm({}: CreatePolicyFormProps) { form={form} orgId={org.org.orgId} allIdps={allIdps} - allRoles={allRoles} - allUsers={allUsers} emailEnabled={env.email.emailEnabled} /> ; orgId: string; allIdps: { id: number; text: string }[]; - allRoles: { id: string; text: string }[]; - allUsers: { id: string; text: string }[]; emailEnabled: boolean; }; diff --git a/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx b/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx index 5c3738e84..9b0685700 100644 --- a/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx +++ b/src/components/resource-policy/PolicyAuthStackSectionCreate.tsx @@ -12,7 +12,8 @@ import { SettingsSubsectionTitle, SettingsSectionTitle } from "@app/components/Settings"; -import { TagInput } from "@app/components/tags/tag-input"; +import { RolesSelector } from "@app/components/roles-selector"; +import { UsersSelector } from "@app/components/users-selector"; import { FormField } from "@app/components/ui/form"; import { useTranslations } from "next-intl"; import { useState } from "react"; @@ -38,27 +39,18 @@ export type PolicyAuthStackSectionCreateProps = { form: UseFormReturn; orgId: string; allIdps: { id: number; text: string }[]; - allRoles: { id: string; text: string }[]; - allUsers: { id: string; text: string }[]; emailEnabled: boolean; }; export function PolicyAuthStackSectionCreate({ form: parentForm, + orgId, allIdps, - allRoles, - allUsers, emailEnabled }: PolicyAuthStackSectionCreateProps) { const t = useTranslations(); const [editingMethod, setEditingMethod] = useState(null); - const [activeRolesTagIndex, setActiveRolesTagIndex] = useState< - number | null - >(null); - const [activeUsersTagIndex, setActiveUsersTagIndex] = useState< - number | null - >(null); const sso = useWatch({ control: parentForm.control, name: "sso" }); const skipToIdpId = useWatch({ @@ -126,47 +118,38 @@ export function PolicyAuthStackSectionCreate({ } allIdps={allIdps} rolesEditor={ - + ( - + parentForm.setValue( + "roles", + selected + ) } - placeholder={t("accessRoleSelect2")} - tags={field.value ?? []} - setTags={(newRoles) => - field.onChange(newRoles) - } - autocompleteOptions={allRoles} - allowDuplicates={false} - size="sm" + restrictAdminRole /> )} /> } usersEditor={ - + ( - + parentForm.setValue( + "users", + selected + ) } - placeholder={t("accessUserSelect")} - tags={field.value ?? []} - setTags={(newUsers) => - field.onChange(newUsers) - } - autocompleteOptions={allUsers} - allowDuplicates={false} - size="sm" /> )} /> diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index aca27270c..7753b43c0 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@app/lib/cn"; const buttonVariants = cva( - "cursor-pointer inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50", + "cursor-pointer inline-flex items-center justify-center whitespace-nowrap text-sm font-normal ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { diff --git a/src/components/ui/controlled-data-table.tsx b/src/components/ui/controlled-data-table.tsx index dbb74cd28..957883398 100644 --- a/src/components/ui/controlled-data-table.tsx +++ b/src/components/ui/controlled-data-table.tsx @@ -351,10 +351,6 @@ export function ControlledDataTable({ dataTableFilterDropdownContentClassName } > - - {filter.label} - - {filter.options.map( (option) => { const isChecked = @@ -484,13 +480,6 @@ export function ControlledDataTable({ align="end" className="w-48" > - - {t( - "toggleColumns" - ) || - "Toggle columns"} - - {table .getAllColumns() .filter( diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx index 8f504ab65..0e3f19001 100644 --- a/src/components/ui/table.tsx +++ b/src/components/ui/table.tsx @@ -91,7 +91,7 @@ const TableHead = React.forwardRef<