Sep 16, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 4, 2024 · Sep 5, 2024 · Sep 5, 2024
diff --git a/site/src/api/queries/audits.ts b/site/src/api/queries/audits.ts
 import{API}from"api/api";
 importtype{AuditLogResponse}from"api/typesGenerated";
 import{useFilterParamsKey}from"components/Filter/filter";
 import{useFilterParamsKey}from"components/Filter/Filter";
 importtype{UsePaginatedQueryOptions}from"hooks/usePaginatedQuery";

 exportfunctionpaginatedAudits(
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
 );
 };

 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
 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
 <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
 >) => {
 const { user: me } = useAuthenticated();

 const addMeAsFirstOption = (options: SelectFilterOption[]) => {
 options= options.filter((option) =>option.value !== me.username);
 const addMeAsFirstOption = (options:readonlySelectFilterOption[]) => {
 const filtered= options.filter((o) =>o.value !== me.username);
 return [
 {
 label: me.username,
 />
 ),
 },
 ...options,
 ...filtered,
 ];
 };

diff --git a/site/src/components/Filter/storyHelpers.ts b/site/src/components/Filter/storyHelpers.ts
 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
 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
 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 { ProxyProvideras ProductionProxyProvider} from "contexts/ProxyContext";
 import { DashboardProvideras 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
 /**
 * @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}
 />
 );
 };
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,6 @@
		import{API}from"api/api";
		importtype{AuditLogResponse}from"api/typesGenerated";
		import{useFilterParamsKey}from"components/Filter/filter";
		import{useFilterParamsKey}from"components/Filter/Filter";
Copy link Member aslilacSep 10, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. MY HERO
		importtype{UsePaginatedQueryOptions}from"hooks/usePaginatedQuery";

		exportfunctionpaginatedAudits(
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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
Expand DownExpand Up		@@ -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}
		</>
Comment on lines +200 to +203 Copy link ContributorAuthor ParkreinerSep 9, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Inlined the base skeleton because: I don't think there will ever be a situation where we don't want a skeleton for the main search box itself It felt weird that the component was never in control ofany of its skeletons
		) : (
		<>
		<InputGroup css={{ width: "100%" }}>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -52,7 +52,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
		<SelectMenuTrigger>
		<SelectMenuButton
		startIcon={selectedOption?.startIcon}
		css={{ width, flexGrow: 1 }}
		css={{flexBasis:width, flexGrow: 1 }}
Copy link Member aslilacSep 10, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. `flexBasis`!!!!! you're literally so good at your job
		aria-label={label}
		>
		{selectedOption?.label ?? placeholder}
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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:readonlySelectFilterOption[]) => {
		const filtered= options.filter((o) =>o.value !== me.username);
Copy link Member aslilacSep 10, 2024 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. the only way this line would make me happier is if you did the thing I like where the closure names the parameter`it`
		return [
		{
		label: me.username,
Expand All		@@ -33,7 +33,7 @@ export const useUserFilterMenu = ({
		/>
		),
		},
		...options,
		...filtered,
		];
		};

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 = {
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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)}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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 { ProxyProvideras ProductionProxyProvider} from "contexts/ProxyContext";
		import { DashboardProvideras 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();
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -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}
		/>
		);
		};