fix: fix UI bugs for orgs (#16302)

resolves coder/internal#288
resolves coder/internal#287

Fixes alignment issue on create organizations page when license banner
is visible.

before
<img width="1178" alt="Screenshot 2025-01-27 at 18 36 35"
src="https://github.com/user-attachments/assets/b845f1df-adb3-4876-aba5-8fa9d56eb22b"
/>

after
<img width="961" alt="Screenshot 2025-01-27 at 18 47 06"
src="https://github.com/user-attachments/assets/4a6374f9-9571-453c-9258-9cc4631afb77"
/>
This commit is contained in:
Jaayden Halko
2025-01-28 20:47:05 +00:00
committed by GitHub
parent 1336925c9f
commit d32a5e1a01
4 changed files with 15 additions and 6 deletions

View File

@ -86,6 +86,12 @@ const OrganizationsSettingsNavigation: FC<
return <Loader />; return <Loader />;
} }
// Sort organizations to put active organization first
const sortedOrganizations = [
activeOrganization,
...organizations.filter((org) => org.id !== activeOrganization.id),
];
const [isPopoverOpen, setIsPopoverOpen] = useState(false); const [isPopoverOpen, setIsPopoverOpen] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
@ -117,9 +123,9 @@ const OrganizationsSettingsNavigation: FC<
<Command loop> <Command loop>
<CommandList> <CommandList>
<CommandGroup className="pb-2"> <CommandGroup className="pb-2">
{organizations.length > 1 && ( {sortedOrganizations.length > 1 && (
<div className="flex flex-col max-h-[260px] overflow-y-auto"> <div className="flex flex-col max-h-[260px] overflow-y-auto">
{organizations.map((organization) => ( {sortedOrganizations.map((organization) => (
<CommandItem <CommandItem
key={organization.id} key={organization.id}
value={organization.name} value={organization.name}

View File

@ -18,7 +18,7 @@ const CreateOrganizationPage: FC = () => {
const error = createOrganizationMutation.error; const error = createOrganizationMutation.error;
return ( return (
<main className="py-20 sm:py-7"> <main className="py-7">
<CreateOrganizationPageView <CreateOrganizationPageView
error={error} error={error}
isEntitled={feats.multiple_organizations} isEntitled={feats.multiple_organizations}

View File

@ -64,7 +64,7 @@ export const CreateOrganizationPageView: FC<
return ( return (
<div className="flex flex-row font-medium"> <div className="flex flex-row font-medium">
<div className="absolute top-40 left-12"> <div className="absolute left-12">
<Link <Link
to="/organizations" to="/organizations"
className="flex flex-row items-center gap-2 no-underline text-content-secondary hover:text-content-primary" className="flex flex-row items-center gap-2 no-underline text-content-secondary hover:text-content-primary"
@ -73,7 +73,7 @@ export const CreateOrganizationPageView: FC<
Go Back Go Back
</Link> </Link>
</div> </div>
<div className="flex flex-col gap-4 w-full min-w-72 mx-auto"> <div className="flex flex-col gap-4 w-full min-w-96 mx-auto">
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
{Boolean(error) && !isApiValidationError(error) && ( {Boolean(error) && !isApiValidationError(error) && (
<div css={{ marginBottom: 32 }}> <div css={{ marginBottom: 32 }}>

View File

@ -29,7 +29,10 @@ const OrganizationProvisionersPage: FC = () => {
<> <>
<Helmet> <Helmet>
<title> <title>
{pageTitle("Members", organization.display_name || organization.name)} {pageTitle(
"Provisioners",
organization.display_name || organization.name,
)}
</title> </title>
</Helmet> </Helmet>
<OrganizationProvisionersPageView <OrganizationProvisionersPageView