fix: display banner when no matching templates found (#16696)

Fixes: https://github.com/coder/coder/issues/16077

site/src/components/Filter/storyHelpers.ts

@@ -17,17 +17,19 @@ export const getDefaultFilterProps = <TFilterProps>({
 	query = "",
 	values,
 	menus,
+	used = false,
 }: {
 	query?: string;
 	values: Record<string, string | undefined>;
 	menus: Record<string, UseFilterMenuResult>;
+	used?: boolean;
 }) =>
 	({
 		filter: {
 			query,
 			update: () => action("update"),
 			debounceUpdate: action("debounce") as UseFilterResult["debounceUpdate"],
-			used: false,
+			used: used,
 			values,
 		},
 		menus,

site/src/pages/TemplatesPage/EmptyTemplates.tsx

@@ -38,12 +38,18 @@ const findFeaturedExamples = (examples: TemplateExample[]) => {
 interface EmptyTemplatesProps {
 	canCreateTemplates: boolean;
 	examples: TemplateExample[];
+	isUsingFilter: boolean;
 }
 
 export const EmptyTemplates: FC<EmptyTemplatesProps> = ({
 	canCreateTemplates,
 	examples,
+	isUsingFilter,
 }) => {
+	if (isUsingFilter) {
+		return <TableEmpty message="No results matched your search" />;
+	}
+
 	const featuredExamples = findFeaturedExamples(examples);
 
 	if (canCreateTemplates) {

site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx

@@ -84,6 +84,19 @@ export const MultipleOrganizations: Story = {
 	},
 };
 
+export const WithFilteredAllTemplates: Story = {
+	args: {
+		...WithTemplates.args,
+		templates: [],
+		...getDefaultFilterProps({
+			query: "deprecated:false searchnotfound",
+			menus: {},
+			values: {},
+			used: true,
+		}),
+	},
+};
+
 export const EmptyCanCreate: Story = {
 	args: {
 		canCreateTemplates: true,

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -246,6 +246,7 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
 							<EmptyTemplates
 								canCreateTemplates={canCreateTemplates}
 								examples={examples ?? []}
+								isUsingFilter={filter.used}
 							/>
 						) : (
 							templates?.map((template) => (