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

mtojek · web-flow · commit b419b36adada · 2025-02-25T14:30:50.000+01:00
Fixes: coder#16077
diff --git a/site/src/components/Filter/storyHelpers.ts b/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,
diff --git a/site/src/pages/TemplatesPage/EmptyTemplates.tsx b/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) {
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/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,
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/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) => (
