From 9c7612beb5a3f30e0f493d3f3f70b3cb539ddcf3 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Fri, 14 Feb 2025 22:48:35 +0000
Subject: [PATCH 1/7] fix: sort orgs alphabetically in dropdown

---
 .../OrganizationSidebarView.stories.tsx       | 47 ++++++++++++++++++-
 .../management/OrganizationSidebarView.tsx    | 14 ++++--
 2 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.stories.tsx b/site/src/modules/management/OrganizationSidebarView.stories.tsx
index 4f1b17a27c181..3f323e5e90be8 100644
--- a/site/src/modules/management/OrganizationSidebarView.stories.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.stories.tsx
@@ -6,8 +6,12 @@ import {
 	MockOrganization2,
 	MockPermissions,
 } from "testHelpers/entities";
+import type { AuthorizationResponse } from "api/typesGenerated";
 import { withDashboardProvider } from "testHelpers/storybook";
-import { OrganizationSidebarView } from "./OrganizationSidebarView";
+import {
+	OrganizationSidebarView,
+	type OrganizationWithPermissions,
+} from "./OrganizationSidebarView";
 
 const meta: Meta<typeof OrganizationSidebarView> = {
 	title: "modules/management/OrganizationSidebarView",
@@ -286,3 +290,44 @@ export const OrgsDisabled: Story = {
 		showOrganizations: false,
 	},
 };
+
+const commonPerms: AuthorizationResponse = {
+	editOrganization: true,
+	editMembers: true,
+	editGroups: true,
+	auditOrganization: true,
+};
+
+const activeOrganization: OrganizationWithPermissions = {
+	...MockOrganization,
+	display_name: "Omega org",
+	name: "omega",
+	id: "1",
+	permissions: {
+		...commonPerms,
+	},
+};
+
+export const OrgsSortedAlphabetically: Story = {
+	args: {
+		activeOrganization,
+		permissions: MockPermissions,
+		organizations: [
+			{
+				...MockOrganization,
+				display_name: "Zeta Org",
+				id: "2",
+				name: "zeta",
+				permissions: commonPerms,
+			},
+			{
+				...MockOrganization,
+				display_name: "alpha Org",
+				id: "3",
+				name: "alpha",
+				permissions: commonPerms,
+			},
+			activeOrganization,
+		],
+	},
+};
diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
index 8d913edf87df3..0049b20e4a319 100644
--- a/site/src/modules/management/OrganizationSidebarView.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -88,11 +88,15 @@ const OrganizationsSettingsNavigation: FC<
 		return <Loader />;
 	}
 
-	// Sort organizations to put active organization first
-	const sortedOrganizations = [
-		activeOrganization,
-		...organizations.filter((org) => org.id !== activeOrganization.id),
-	];
+	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();

From 54c1ba4dab9a26902cbbec73028261f3bbd54a3e Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Fri, 14 Feb 2025 23:26:11 +0000
Subject: [PATCH 2/7] sort imports

---
 site/src/modules/management/OrganizationSidebarView.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.stories.tsx b/site/src/modules/management/OrganizationSidebarView.stories.tsx
index 3f323e5e90be8..974b19cc57285 100644
--- a/site/src/modules/management/OrganizationSidebarView.stories.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.stories.tsx
@@ -1,12 +1,12 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { expect, userEvent, waitFor, within } from "@storybook/test";
+import type { AuthorizationResponse } from "api/typesGenerated";
 import {
 	MockNoPermissions,
 	MockOrganization,
 	MockOrganization2,
 	MockPermissions,
 } from "testHelpers/entities";
-import type { AuthorizationResponse } from "api/typesGenerated";
 import { withDashboardProvider } from "testHelpers/storybook";
 import {
 	OrganizationSidebarView,

From 3484dd2d287a9e1f8875ed6739524f2073423b0d Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Tue, 18 Feb 2025 17:15:32 +0000
Subject: [PATCH 3/7] add search bar

---
 .../OrganizationSidebarView.stories.tsx       | 43 +++++++++++++++++++
 .../management/OrganizationSidebarView.tsx    |  4 +-
 2 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.stories.tsx b/site/src/modules/management/OrganizationSidebarView.stories.tsx
index 974b19cc57285..b19a5d5803471 100644
--- a/site/src/modules/management/OrganizationSidebarView.stories.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.stories.tsx
@@ -331,3 +331,46 @@ export const OrgsSortedAlphabetically: Story = {
 		],
 	},
 };
+
+export const SearchAndSelectOrg: Story = {
+	args: {
+		activeOrganization,
+		permissions: MockPermissions,
+		organizations: [
+			{
+				...MockOrganization,
+				display_name: "Zeta Org",
+				id: "2",
+				name: "zeta",
+				permissions: commonPerms,
+			},
+			{
+				...MockOrganization,
+				display_name: "alpha Org",
+				id: "3",
+				name: "fish",
+				permissions: commonPerms,
+			},
+			activeOrganization,
+		],
+	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: /Omega org/i }));
+
+		// searchInput is not in #storybook-root so must query full document
+		const globalScreen = within(document.body);
+		const searchInput =
+			await globalScreen.getByPlaceholderText("Find organization");
+
+		await userEvent.type(searchInput, "ALPHA");
+
+		const filteredResult = await globalScreen.findByText("alpha Org");
+		expect(filteredResult).toBeInTheDocument();
+
+		// Omega org remains visible as the default org
+		await waitFor(() => {
+			expect(globalScreen.queryByText("Zeta Org")).not.toBeInTheDocument();
+		});
+	},
+};
diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
index 0049b20e4a319..0d0b04ee41e69 100644
--- a/site/src/modules/management/OrganizationSidebarView.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -3,6 +3,7 @@ import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import {
 	Command,
+	CommandInput,
 	CommandGroup,
 	CommandItem,
 	CommandList,
@@ -127,6 +128,7 @@ const OrganizationsSettingsNavigation: FC<
 				</PopoverTrigger>
 				<PopoverContent align="start" className="w-60">
 					<Command loop>
+						<CommandInput placeholder="Find organization" />
 						<CommandList>
 							<CommandGroup className="pb-2">
 								{sortedOrganizations.length > 1 && (
@@ -134,7 +136,7 @@ const OrganizationsSettingsNavigation: FC<
 										{sortedOrganizations.map((organization) => (
 											<CommandItem
 												key={organization.id}
-												value={organization.name}
+												value={`${organization.display_name} ${organization.name}`}
 												onSelect={() => {
 													setIsPopoverOpen(false);
 													navigate(urlForSubpage(organization.name));

From 4d5ac449910b36da535ec67e6d9ce164c3c28d71 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Tue, 18 Feb 2025 17:18:31 +0000
Subject: [PATCH 4/7] import order fix

---
 site/src/modules/management/OrganizationSidebarView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
index 0d0b04ee41e69..ef31fc15726b1 100644
--- a/site/src/modules/management/OrganizationSidebarView.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -3,8 +3,8 @@ import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import {
 	Command,
-	CommandInput,
 	CommandGroup,
+	CommandInput,
 	CommandItem,
 	CommandList,
 } from "components/Command/Command";

From b39f5b5dbfab5990912f45a97033de227cad5bf7 Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Tue, 18 Feb 2025 20:25:38 +0000
Subject: [PATCH 5/7] fix: handle create org button when searching

---
 .../management/OrganizationSidebarView.tsx    | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.tsx b/site/src/modules/management/OrganizationSidebarView.tsx
index ef31fc15726b1..b618c4f72bd3d 100644
--- a/site/src/modules/management/OrganizationSidebarView.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.tsx
@@ -3,10 +3,12 @@ import { Avatar } from "components/Avatar/Avatar";
 import { Button } from "components/Button/Button";
 import {
 	Command,
+	CommandEmpty,
 	CommandGroup,
 	CommandInput,
 	CommandItem,
 	CommandList,
+	CommandSeparator,
 } from "components/Command/Command";
 import { Loader } from "components/Loader/Loader";
 import {
@@ -130,6 +132,7 @@ const OrganizationsSettingsNavigation: FC<
 					<Command loop>
 						<CommandInput placeholder="Find organization" />
 						<CommandList>
+							<CommandEmpty>No organization found.</CommandEmpty>
 							<CommandGroup className="pb-2">
 								{sortedOrganizations.length > 1 && (
 									<div className="flex flex-col max-h-[260px] overflow-y-auto">
@@ -164,11 +167,11 @@ const OrganizationsSettingsNavigation: FC<
 										))}
 									</div>
 								)}
-								{permissions.createOrganization && (
-									<>
-										{organizations.length > 1 && (
-											<hr className="h-px my-2 border-none bg-border -mx-2" />
-										)}
+							</CommandGroup>
+							{permissions.createOrganization && (
+								<>
+									{organizations.length > 1 && <CommandSeparator />}
+									<CommandGroup>
 										<CommandItem
 											className="flex justify-center data-[selected=true]:bg-transparent"
 											onSelect={() => {
@@ -180,9 +183,9 @@ const OrganizationsSettingsNavigation: FC<
 										>
 											<Plus /> Create Organization
 										</CommandItem>
-									</>
-								)}
-							</CommandGroup>
+									</CommandGroup>
+								</>
+							)}
 						</CommandList>
 					</Command>
 				</PopoverContent>

From ef75407f73767515c222fb4099fbbb894ccd3577 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Tue, 18 Feb 2025 21:27:19 +0000
Subject: [PATCH 6/7] improve test

---
 .../OrganizationSidebarView.stories.tsx       | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.stories.tsx b/site/src/modules/management/OrganizationSidebarView.stories.tsx
index b19a5d5803471..29517f8a21ad4 100644
--- a/site/src/modules/management/OrganizationSidebarView.stories.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.stories.tsx
@@ -311,7 +311,10 @@ const activeOrganization: OrganizationWithPermissions = {
 export const OrgsSortedAlphabetically: Story = {
 	args: {
 		activeOrganization,
-		permissions: MockPermissions,
+		permissions: {
+			...MockPermissions,
+			createOrganization: true,
+		},
 		organizations: [
 			{
 				...MockOrganization,
@@ -330,9 +333,30 @@ export const OrgsSortedAlphabetically: Story = {
 			activeOrganization,
 		],
 	},
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		await userEvent.click(canvas.getByRole("button", { name: /Omega org/i }));
+
+		// dropdown is not in #storybook-root so must query full document
+		const globalScreen = within(document.body);
+
+		await waitFor(() => {
+			expect(globalScreen.queryByText("alpha Org")).toBeInTheDocument();
+			expect(globalScreen.queryByText("Zeta Org")).toBeInTheDocument();
+		});
+
+		const orgElements = globalScreen.getAllByRole("option");
+		const orgNames = orgElements.map(
+			// handling fuzzy matching
+			(el) => el.textContent?.replace(/^[A-Z]/, "").trim() || "",
+		);
+
+		// active name first
+		expect(orgNames).toEqual(["Omega org", "alpha Org", "Zeta Org"]);
+	},
 };
 
-export const SearchAndSelectOrg: Story = {
+export const SearchForOrg: Story = {
 	args: {
 		activeOrganization,
 		permissions: MockPermissions,
@@ -358,7 +382,7 @@ export const SearchAndSelectOrg: Story = {
 		const canvas = within(canvasElement);
 		await userEvent.click(canvas.getByRole("button", { name: /Omega org/i }));
 
-		// searchInput is not in #storybook-root so must query full document
+		// dropdown is not in #storybook-root so must query full document
 		const globalScreen = within(document.body);
 		const searchInput =
 			await globalScreen.getByPlaceholderText("Find organization");

From c1e6f48132b861be0665be1d12403697fc481e08 Mon Sep 17 00:00:00 2001
From: Kira Pilot <kira@coder.com>
Date: Tue, 18 Feb 2025 21:40:12 +0000
Subject: [PATCH 7/7] filter button out

---
 .../modules/management/OrganizationSidebarView.stories.tsx   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/site/src/modules/management/OrganizationSidebarView.stories.tsx b/site/src/modules/management/OrganizationSidebarView.stories.tsx
index 29517f8a21ad4..6533a5e004ef5 100644
--- a/site/src/modules/management/OrganizationSidebarView.stories.tsx
+++ b/site/src/modules/management/OrganizationSidebarView.stories.tsx
@@ -346,7 +346,10 @@ export const OrgsSortedAlphabetically: Story = {
 		});
 
 		const orgElements = globalScreen.getAllByRole("option");
-		const orgNames = orgElements.map(
+		// filter out Create btn
+		const filteredElems = orgElements.slice(0, 3);
+
+		const orgNames = filteredElems.map(
 			// handling fuzzy matching
 			(el) => el.textContent?.replace(/^[A-Z]/, "").trim() || "",
 		);

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://rainy.clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16583.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16583.patch" target="_blank">pFad Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16583.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://rainy.clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/coder/coder/pull/16583.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>