chore: match templates search error with workspace search error (#14479)

* chore: make templates search error the same as workspaces

site/src/pages/TemplatesPage/TemplatesFilter.tsx

@@ -16,9 +16,13 @@ import type { FC } from "react";
 
 interface TemplatesFilterProps {
 	filter: ReturnType<typeof useFilter>;
+	error?: unknown;
 }
 
-export const TemplatesFilter: FC<TemplatesFilterProps> = ({ filter }) => {
+export const TemplatesFilter: FC<TemplatesFilterProps> = ({
+	filter,
+	error,
+}) => {
 	const organizationMenu = useFilterMenu({
 		onChange: (option) =>
 			filter.update({ ...filter.values, organization: option?.value }),
@@ -48,6 +52,7 @@ export const TemplatesFilter: FC<TemplatesFilterProps> = ({ filter }) => {
 			// learnMoreLink={docs("/templates#template-filtering")}
 			isLoading={false}
 			filter={filter}
+			error={error}
 			options={
 				<>
 					<SelectFilter

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

@@ -112,3 +112,22 @@ export const WithError: Story = {
 		canCreateTemplates: false,
 	},
 };
+
+export const WithValidationError: Story = {
+	args: {
+		error: mockApiError({
+			message: "Something went wrong fetching templates.",
+			detail:
+				"This is a more detailed error message that should help you understand what went wrong.",
+			validations: [
+				{
+					field: "search",
+					detail: "That search query was invalid, why did you do that?",
+				},
+			],
+		}),
+		templates: undefined,
+		examples: undefined,
+		canCreateTemplates: false,
+	},
+};

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -9,6 +9,7 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
+import { hasError, isApiValidationError } from "api/errors";
 import type { Template, TemplateExample } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { ExternalAvatar } from "components/Avatar/Avatar";
@@ -228,11 +229,12 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
 				</PageHeaderSubtitle>
 			</PageHeader>
 
-			<TemplatesFilter filter={filter} />
-
-			{error ? (
+			<TemplatesFilter filter={filter} error={error} />
+			{/* Validation errors are shown on the filter, other errors are an alert box. */}
+			{hasError(error) && !isApiValidationError(error) && (
 				<ErrorAlert error={error} />
-			) : (
+			)}
+
 			<TableContainer>
 				<Table>
 					<TableHead>
@@ -266,7 +268,6 @@ export const TemplatesPageView: FC<TemplatesPageViewProps> = ({
 					</TableBody>
 				</Table>
 			</TableContainer>
-			)}
 		</Margins>
 	);
 };