Merge branch 'main' into lilac/fix-a-bunch-of-orgs-stuff

coder · aslilac · Feb 19, 2025 · Feb 5, 2025 · Feb 5, 2025 · Feb 7, 2025
commit b6024b519efdd46c9bcb4c1e7c31b8d0a9f10945
diff --git a/site/src/modules/management/OrganizationSidebarView.stories.tsx b/site/src/modules/management/OrganizationSidebarView.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
-import type { AuthorizationResponse } from "api/typesGenerated";
+import type { Organization } from "api/typesGenerated";
 import {
 	MockNoOrganizationPermissions,
 	MockNoPermissions,
@@ -10,10 +10,7 @@ import {
 	MockPermissions,
 } from "testHelpers/entities";
 import { withDashboardProvider } from "testHelpers/storybook";
-import {
-	OrganizationSidebarView,
-	type OrganizationWithPermissions,
-} from "./OrganizationSidebarView";
+import { OrganizationSidebarView } from "./OrganizationSidebarView";
 
 const meta: Meta<typeof OrganizationSidebarView> = {
 	title: "modules/management/OrganizationSidebarView",
@@ -182,26 +179,17 @@ export const OrgsDisabled: Story = {
 	},
 };
 
-const commonPerms: AuthorizationResponse = {
-	editOrganization: true,
-	editMembers: true,
-	editGroups: true,
-	auditOrganization: true,
-};
-
-const activeOrganization: OrganizationWithPermissions = {
+const activeOrganization: Organization = {
 	...MockOrganization,
 	display_name: "Omega org",
 	name: "omega",
 	id: "1",
-	permissions: {
-		...commonPerms,
-	},
 };
 
 export const OrgsSortedAlphabetically: Story = {
 	args: {
 		activeOrganization,
+		orgPermissions: MockOrganizationPermissions,
 		permissions: {
 			...MockPermissions,
 			createOrganization: true,
@@ -212,14 +200,12 @@ export const OrgsSortedAlphabetically: Story = {
 				display_name: "Zeta Org",
 				id: "2",
 				name: "zeta",
-				permissions: commonPerms,
 			},
 			{
 				...MockOrganization,
 				display_name: "alpha Org",
 				id: "3",
 				name: "alpha",
-				permissions: commonPerms,
 			},
 			activeOrganization,
 		],
@@ -260,14 +246,12 @@ export const SearchForOrg: Story = {
 				display_name: "Zeta Org",
 				id: "2",
 				name: "zeta",
-				permissions: commonPerms,
 			},
 			{
 				...MockOrganization,
 				display_name: "alpha Org",
 				id: "3",
 				name: "fish",
-				permissions: commonPerms,
 			},
 			activeOrganization,
 		],

diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -1,4 +1,4 @@
-import type { AuthorizationResponse, Organization } from "api/typesGenerated";
+import type { Organization } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import {
@@ -22,8 +22,8 @@ import { type FC, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import type { OrganizationPermissions } from "./organizationPermissions";
 
-interface SidebarProps {
-	/** The active org name, if any.  Overrides activeSettings. */
+interface OrganizationsSettingsNavigationProps {
+	/** The organization selected from the dropdown */
 	activeOrganization: Organization | undefined;
 	/** Permissions for the active organization */
 	orgPermissions: OrganizationPermissions | undefined;
@@ -34,21 +34,23 @@ interface SidebarProps {
 }
 
 /**
- * Organization settings left sidebar menu.
+ * Displays navigation items for the active organization and a combobox to
+ * switch between organizations.
+ *
+ * If organizations or their permissions are still loading, show a loader.
  */
-export const OrganizationSidebarView: FC<SidebarProps> = ({
-	activeOrganization,
-	orgPermissions,
-	organizations,
-	permissions,
-}) => {
-	// Sort organizations to put active organization first
-	const sortedOrganizations = activeOrganization
-		? [
-				activeOrganization,
-				...organizations.filter((org) => org.id !== activeOrganization.id),
-			]
-		: organizations;
+export const OrganizationSidebarView: FC<
+	OrganizationsSettingsNavigationProps
+> = ({ activeOrganization, orgPermissions, organizations, permissions }) => {
+	const sortedOrganizations = [...organizations].sort((a, b) => {
+		// active org first
+		if (a.id === activeOrganization?.id) return -1;
+		if (b.id === activeOrganization?.id) return 1;
+
+		return a.display_name
+			.toLowerCase()
+			.localeCompare(b.display_name.toLowerCase());
+	});
 
 	const [isPopoverOpen, setIsPopoverOpen] = useState(false);
 	const navigate = useNavigate();