Function useTemplateFilterMenu

site/src/pages/WorkspacesPage/filter/menus.tsx:20–56

({
	value,
	onChange,
}: Pick<UseFilterMenuOptions, "value" | "onChange">)

import { getDisplayWorkspaceStatus } from "#/utils/workspace";

export const useTemplateFilterMenu = ({
	value,
	onChange,
}: Pick<UseFilterMenuOptions, "value" | "onChange">) => {
	return useFilterMenu({
		onChange,
		value,
		id: "template",
		getSelectedOption: async () => {
			// Show all templates including deprecated
			const templates = await API.getTemplates();
			const template = templates.find((template) => template.name === value);
			if (template) {
				return {
					label: template.display_name || template.name,
					value: template.name,
					startIcon: <TemplateAvatar template={template} />,
				} satisfies SelectFilterOption;
			}
			return null;
		},
		getOptions: async (query) => {
			// Show all templates including deprecated
			const templates = await API.getTemplates();
			const filteredTemplates = templates.filter(
				(template) =>
					template.name.toLowerCase().includes(query.toLowerCase()) ||
					template.display_name.toLowerCase().includes(query.toLowerCase()),
			);
			return filteredTemplates.map((template) => ({
				label: template.display_name || template.name,
				value: template.name,
				startIcon: <TemplateAvatar template={template} />,
			}));
		},
	});
};

const TemplateAvatar: FC<{ template: Template }> = ({ template }) => {
	return (