Skip to content

feat: add user filter to templates page to filter by template author #19561

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Aug 28, 2025
+149 −41
Merged

feat: add user filter to templates page to filter by template author #19561

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c659df8
feat: add user filter to templates page
rafrdz Aug 26, 2025
8c0ed0b
linter fix: remove unused import
rafrdz Aug 26, 2025
85bb44b
fix WithFilteredAllTemplates story to use new filterState
rafrdz Aug 26, 2025
08e5cb6
add default user filter width variable
rafrdz Aug 27, 2025
7f4754c
remove no-op function
rafrdz Aug 27, 2025
a16545c
update filterstate return type
rafrdz Aug 27, 2025
c80dc12
Adjust width determination logic
rafrdz Aug 28, 2025
a76100e
Linter fix
rafrdz Aug 28, 2025
4ec6776
restore width prop in UserMenu component
rafrdz Aug 28, 2025
6032ee6
restore width to templatesfilter for usermenu
rafrdz Aug 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
add default user filter width variable
  • Loading branch information
@rafrdz
rafrdz committed Aug 27, 2025
commit 08e5cb6580ab7d70a86218b3e1feea4affe25622
7 changes: 4 additions & 3 deletions site/src/components/Filter/UserFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { useAuthenticated } from "hooks";
import type { FC } from "react";
import { type UseFilterMenuOptions, useFilterMenu } from "./menu";

export const DEFAULT_USER_FILTER_WIDTH = 175;

export const useUserFilterMenu = ({
value,
onChange,
Expand Down Expand Up @@ -83,10 +85,9 @@ export type UserFilterMenu = ReturnType<typeof useUserFilterMenu>;
interface UserMenuProps {
menu: UserFilterMenu;
placeholder?: string;
width?: number;
}

export const UserMenu: FC<UserMenuProps> = ({ menu, width, placeholder }) => {
export const UserMenu: FC<UserMenuProps> = ({ menu, placeholder }) => {
return (
<SelectFilter
label="Select user"
Expand All @@ -103,7 +104,7 @@ export const UserMenu: FC<UserMenuProps> = ({ menu, width, placeholder }) => {
onChange={menu.setQuery}
/>
}
width={width}
width={DEFAULT_USER_FILTER_WIDTH}
/>
);
};
22 changes: 15 additions & 7 deletions site/src/pages/AuditPage/AuditFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
SelectFilter,
type SelectFilterOption,
} from "components/Filter/SelectFilter";
import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
import {
DEFAULT_USER_FILTER_WIDTH,
type UserFilterMenu,
UserMenu,
} from "components/Filter/UserFilter";
import capitalize from "lodash/capitalize";
import {
type OrganizationsFilterMenu,
Expand Down Expand Up @@ -47,8 +51,6 @@ interface AuditFilterProps {
}

export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
const width = menus.organization ? 175 : undefined;

return (
<Filter
learnMoreLink={docs("/admin/security/audit-logs#filtering-logs")}
Expand All @@ -58,11 +60,17 @@ export const AuditFilter: FC<AuditFilterProps> = ({ filter, error, menus }) => {
error={error}
options={
<>
<ResourceTypeMenu width={width} menu={menus.resourceType} />
<ActionMenu width={width} menu={menus.action} />
<UserMenu width={width} menu={menus.user} />
<ResourceTypeMenu
width={DEFAULT_USER_FILTER_WIDTH}
menu={menus.resourceType}
/>
<ActionMenu width={DEFAULT_USER_FILTER_WIDTH} menu={menus.action} />
<UserMenu menu={menus.user} />
{menus.organization && (
<OrganizationsMenu width={width} menu={menus.organization} />
<OrganizationsMenu
width={DEFAULT_USER_FILTER_WIDTH}
menu={menus.organization}
/>
)}
</>
}
Expand Down
19 changes: 12 additions & 7 deletions site/src/pages/ConnectionLogPage/ConnectionLogFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,11 @@ import {
SelectFilter,
type SelectFilterOption,
} from "components/Filter/SelectFilter";
import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
import {
DEFAULT_USER_FILTER_WIDTH,
type UserFilterMenu,
UserMenu,
} from "components/Filter/UserFilter";
import capitalize from "lodash/capitalize";
import {
type OrganizationsFilterMenu,
Expand Down Expand Up @@ -42,8 +46,6 @@ export const ConnectionLogFilter: FC<ConnectionLogFilterProps> = ({
error,
menus,
}) => {
const width = menus.organization ? 175 : undefined;

return (
<Filter
learnMoreLink={docs(
Expand All @@ -55,11 +57,14 @@ export const ConnectionLogFilter: FC<ConnectionLogFilterProps> = ({
error={error}
options={
<>
<UserMenu placeholder="All owners" menu={menus.user} width={width} />
<StatusMenu menu={menus.status} width={width} />
<TypeMenu menu={menus.type} width={width} />
<UserMenu placeholder="All owners" menu={menus.user} />
<StatusMenu menu={menus.status} width={DEFAULT_USER_FILTER_WIDTH} />
<TypeMenu menu={menus.type} width={DEFAULT_USER_FILTER_WIDTH} />
{menus.organization && (
<OrganizationsMenu menu={menus.organization} width={width} />
<OrganizationsMenu
menu={menus.organization}
width={DEFAULT_USER_FILTER_WIDTH}
/>
)}
</>
}
Expand Down
5 changes: 1 addition & 4 deletions site/src/pages/TemplatesPage/TemplatesFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import {
type UserFilterMenu,
UserMenu,
} from "../../components/Filter/UserFilter";
import { useDashboard } from "../../modules/dashboard/useDashboard";

interface TemplatesFilterProps {
filter: UseFilterResult;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much better. Thank you!

Expand All @@ -30,8 +29,6 @@ export const TemplatesFilter: FC<TemplatesFilterProps> = ({
error,
userMenu,
}) => {
const { showOrganizations } = useDashboard();
const width = showOrganizations ? 175 : undefined;
const organizationMenu = useFilterMenu({
onChange: (option) =>
filter.update({ ...filter.values, organization: option?.value }),
Expand Down Expand Up @@ -65,7 +62,7 @@ export const TemplatesFilter: FC<TemplatesFilterProps> = ({
error={error}
options={
<>
{userMenu && <UserMenu width={width} menu={userMenu} />}
{userMenu && <UserMenu menu={userMenu} />}
<SelectFilter
placeholder="All organizations"
label="Select an organization"
Expand Down
18 changes: 12 additions & 6 deletions site/src/pages/WorkspacesPage/filter/WorkspacesFilter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import {
MenuSkeleton,
type UseFilterResult,
} from "components/Filter/Filter";
import { type UserFilterMenu, UserMenu } from "components/Filter/UserFilter";
import {
DEFAULT_USER_FILTER_WIDTH,
type UserFilterMenu,
UserMenu,
} from "components/Filter/UserFilter";
import { useDashboard } from "modules/dashboard/useDashboard";
import {
type OrganizationsFilterMenu,
Expand Down Expand Up @@ -96,7 +100,6 @@ export const WorkspacesFilter: FC<WorkspaceFilterProps> = ({
organizationsMenu,
}) => {
const { entitlements, showOrganizations } = useDashboard();
const width = showOrganizations ? 175 : undefined;
const presets = entitlements.features.advanced_template_scheduling.enabled
? PRESETS_WITH_DORMANT
: PRESET_FILTERS;
Expand All @@ -114,11 +117,14 @@ export const WorkspacesFilter: FC<WorkspaceFilterProps> = ({
)}
options={
<>
{userMenu && <UserMenu width={width} menu={userMenu} />}
<TemplateMenu width={width} menu={templateMenu} />
<StatusMenu width={width} menu={statusMenu} />
{userMenu && <UserMenu menu={userMenu} />}
<TemplateMenu width={DEFAULT_USER_FILTER_WIDTH} menu={templateMenu} />
<StatusMenu width={DEFAULT_USER_FILTER_WIDTH} menu={statusMenu} />
{organizationsActive && (
<OrganizationsMenu width={width} menu={organizationsMenu} />
<OrganizationsMenu
width={DEFAULT_USER_FILTER_WIDTH}
menu={organizationsMenu}
/>
)}
</>
}
Expand Down
Loading