coder · Parkreiner · Sep 16, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024
diff --git a/site/src/api/queries/audits.ts b/site/src/api/queries/audits.ts
@@ -1,6 +1,6 @@
 import { API } from "api/api";
 import type { AuditLogResponse } from "api/typesGenerated";
-import { useFilterParamsKey } from "components/Filter/filter";
+import { useFilterParamsKey } from "components/Filter/Filter";
 import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
 
 export function paginatedAudits(

diff --git a/site/src/components/Filter/filter.tsx → site/src/components/Filter/Filter.tsx b/site/src/components/Filter/filter.tsx → site/src/components/Filter/Filter.tsx
@@ -125,38 +125,40 @@ const BaseSkeleton: FC<SkeletonProps> = ({ children, ...skeletonProps }) => {
 	);
 };
 
-export const SearchFieldSkeleton: FC = () => {
-	return <BaseSkeleton width="100%" />;
-};
-
 export const MenuSkeleton: FC = () => {
 	return <BaseSkeleton css={{ minWidth: 200, flexShrink: 0 }} />;
 };
 
 type FilterProps = {
 	filter: ReturnType<typeof useFilter>;
-	skeleton: ReactNode;
+	optionsSkeleton: ReactNode;
 	isLoading: boolean;
 	learnMoreLink?: string;
 	learnMoreLabel2?: string;
 	learnMoreLink2?: string;
 	error?: unknown;
 	options?: ReactNode;
 	presets: PresetFilter[];
-	breakpoint?: Breakpoint;
+
+	/**
+	 * The CSS media query breakpoint that defines when the UI will try
+	 * displaying all options on one row, regardless of the number of options
+	 * present
+	 */
+	singleRowBreakpoint?: Breakpoint;
 };
 
 export const Filter: FC<FilterProps> = ({
 	filter,
 	isLoading,
 	error,
-	skeleton,
+	optionsSkeleton,
 	options,
 	learnMoreLink,
 	learnMoreLabel2,
 	learnMoreLink2,
 	presets,
-	breakpoint = "md",
+	singleRowBreakpoint = "lg",
 }) => {
 	const theme = useTheme();
 	// Storing local copy of the filter query so that it can be updated more
@@ -187,15 +189,18 @@ export const Filter: FC<FilterProps> = ({
 				display: "flex",
 				gap: 8,
 				marginBottom: 16,
-				flexWrap: "nowrap",
+				flexWrap: "wrap",
 
-				[theme.breakpoints.down(breakpoint)]: {
-					flexWrap: "wrap",
+				[theme.breakpoints.up(singleRowBreakpoint)]: {
+					flexWrap: "nowrap",
 				},
 			}}
 		>
 			{isLoading ? (
-				skeleton
+				<>
+					<BaseSkeleton width="100%" />
+					{optionsSkeleton}
+				</>
 			) : (
 				<>
 					<InputGroup css={{ width: "100%" }}>

diff --git a/site/src/components/Filter/SelectFilter.tsx b/site/src/components/Filter/SelectFilter.tsx
@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 			<SelectMenuTrigger>
 				<SelectMenuButton
 					startIcon={selectedOption?.startIcon}
-					css={{ width, flexGrow: 1 }}
+					css={{ flexBasis: width, flexGrow: 1 }}
 					aria-label={label}
 				>
 					{selectedOption?.label ?? placeholder}

diff --git a/site/src/components/Filter/UserFilter.tsx b/site/src/components/Filter/UserFilter.tsx
@@ -19,8 +19,8 @@ export const useUserFilterMenu = ({
 >) => {
 	const { user: me } = useAuthenticated();
 
-	const addMeAsFirstOption = (options: SelectFilterOption[]) => {
-		options = options.filter((option) => option.value !== me.username);
+	const addMeAsFirstOption = (options: readonly SelectFilterOption[]) => {
+		const filtered = options.filter((o) => o.value !== me.username);
 		return [
 			{
 				label: me.username,
@@ -33,7 +33,7 @@ export const useUserFilterMenu = ({
 					/>
 				),
 			},
-			...options,
+			...filtered,
 		];
 	};
 

diff --git a/site/src/components/Filter/storyHelpers.ts b/site/src/components/Filter/storyHelpers.ts
@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import type { UseFilterResult } from "./filter";
+import type { UseFilterResult } from "./Filter";
 import type { UseFilterMenuResult } from "./menu";
 
 export const MockMenu: UseFilterMenuResult = {

diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
@@ -21,6 +21,9 @@ export const SearchField: FC<SearchFieldProps> = ({
 	const theme = useTheme();
 	return (
 		<TextField
+			// Specifying `minWidth` so that the text box can't shrink so much
+			// that it becomes un-clickable as we add more filter controls
+			css={{ minWidth: "280px" }}
 			size="small"
 			value={value}
 			onChange={(e) => onChange(e.target.value)}

diff --git a/site/src/contexts/auth/RequireAuth.tsx b/site/src/contexts/auth/RequireAuth.tsx
@@ -1,14 +1,30 @@
 import { API } from "api/api";
 import { isApiError } from "api/errors";
 import { Loader } from "components/Loader/Loader";
-import { ProxyProvider } from "contexts/ProxyContext";
-import { DashboardProvider } from "modules/dashboard/DashboardProvider";
+import { ProxyProvider as ProductionProxyProvider } from "contexts/ProxyContext";
+import { DashboardProvider as ProductionDashboardProvider } from "modules/dashboard/DashboardProvider";
 import { type FC, useEffect } from "react";
 import { Navigate, Outlet, useLocation } from "react-router-dom";
 import { embedRedirect } from "utils/redirect";
 import { type AuthContextValue, useAuthContext } from "./AuthProvider";
 
-export const RequireAuth: FC = () => {
+type RequireAuthProps = Readonly<{
+	ProxyProvider?: typeof ProductionProxyProvider;
+	DashboardProvider?: typeof ProductionDashboardProvider;
+}>;
+
+/**
+ * Wraps any component and ensures that the user has been authenticated before
+ * they can access the component's contents.
+ *
+ * In production, it is assumed that this component will not be called with any
+ * props at all. But to make testing easier, you can call this component with
+ * specific providers to mock them out.
+ */
+export const RequireAuth: FC<RequireAuthProps> = ({
+	DashboardProvider = ProductionDashboardProvider,
+	ProxyProvider = ProductionProxyProvider,
+}) => {
 	const location = useLocation();
 	const { signOut, isSigningOut, isSignedOut, isSignedIn, isLoading } =
 		useAuthContext();

diff --git a/site/src/modules/tableFiltering/options.tsx b/site/src/modules/tableFiltering/options.tsx
@@ -0,0 +1,121 @@
+/**
+ * @file Defines a centralized place for filter dropdown groups that are
+ * relevant across multiple pages within the Coder UI.
+ *
+ * @todo 2024-09-06 - Figure out how to move the user dropdown group into this
+ * file (or whether there are enough subtle differences that it's not worth
+ * centralizing the logic). We currently have two separate implementations for
+ * the workspaces and audits page that have a risk of getting out of sync.
+ */
+import { API } from "api/api";
+import {
+	SelectFilter,
+	type SelectFilterOption,
+	SelectFilterSearch,
+} from "components/Filter/SelectFilter";
+import {
+	type UseFilterMenuOptions,
+	useFilterMenu,
+} from "components/Filter/menu";
+import { UserAvatar } from "components/UserAvatar/UserAvatar";
+import type { FC } from "react";
+
+// Organization helpers ////////////////////////////////////////////////////////
+
+export const useOrganizationsFilterMenu = ({
+	value,
+	onChange,
+}: Pick<UseFilterMenuOptions<SelectFilterOption>, "value" | "onChange">) => {
+	return useFilterMenu({
+		onChange,
+		value,
+		id: "organizations",
+		getSelectedOption: async () => {
+			if (value) {
+				const organizations = await API.getOrganizations();
+				const organization = organizations.find((o) => o.name === value);
+				if (organization) {
+					return {
+						label: organization.display_name || organization.name,
+						value: organization.name,
+						startIcon: (
+							<UserAvatar
+								key={organization.id}
+								size="xs"
+								username={organization.display_name || organization.name}
+								avatarURL={organization.icon}
+							/>
+						),
+					};
+				}
+			}
+			return null;
+		},
+		getOptions: async () => {
+			// Only show the organizations for which you can view audit logs.
+			const organizations = await API.getOrganizations();
+			const permissions = await API.checkAuthorization({
+				checks: Object.fromEntries(
+					organizations.map((organization) => [
+						organization.id,
+						{
+							object: {
+								resource_type: "audit_log",
+								organization_id: organization.id,
+							},
+							action: "read",
+						},
+					]),
+				),
+			});
+			return organizations
+				.filter((organization) => permissions[organization.id])
+				.map<SelectFilterOption>((organization) => ({
+					label: organization.display_name || organization.name,
+					value: organization.name,
+					startIcon: (
+						<UserAvatar
+							key={organization.id}
+							size="xs"
+							username={organization.display_name || organization.name}
+							avatarURL={organization.icon}
+						/>
+					),
+				}));
+		},
+	});
+};
+
+export type OrganizationsFilterMenu = ReturnType<
+	typeof useOrganizationsFilterMenu
+>;
+
+interface OrganizationsMenuProps {
+	menu: OrganizationsFilterMenu;
+	width?: number;
+}
+
+export const OrganizationsMenu: FC<OrganizationsMenuProps> = ({
+	menu,
+	width,
+}) => {
+	return (
+		<SelectFilter
+			label="Select an organization"
+			placeholder="All organizations"
+			emptyText="No organizations found"
+			options={menu.searchOptions}
+			onSelect={menu.selectOption}
+			selectedOption={menu.selectedOption ?? undefined}
+			selectFilterSearch={
+				<SelectFilterSearch
+					inputProps={{ "aria-label": "Search organization" }}
+					placeholder="Search organization..."
+					value={menu.query}
+					onChange={menu.setQuery}
+				/>
+			}
+			width={width}
+		/>
+	);
+};