From 0ef85147cd57b9874fd460e021c3a0fe609e08a9 Mon Sep 17 00:00:00 2001
From: Steven Masley <Emyrk@users.noreply.github.com>
Date: Fri, 30 Aug 2024 15:14:59 -0500
Subject: [PATCH] chore: match templates search error with workspace search
 error (#14479)

* chore: make templates search error the same as workspaces
---
 .../pages/TemplatesPage/TemplatesFilter.tsx   |  7 +-
 .../TemplatesPageView.stories.tsx             | 19 +++++
 .../pages/TemplatesPage/TemplatesPageView.tsx | 75 ++++++++++---------
 3 files changed, 63 insertions(+), 38 deletions(-)

diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx
index 581858aabe..f463a35ff5 100644
--- a/site/src/pages/TemplatesPage/TemplatesFilter.tsx
+++ b/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
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
index 11cd08a2ce..f07ad24df1 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
+++ b/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,
+	},
+};
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index f61dd1ceb1..591c3971b7 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/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,45 +229,45 @@ 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>
-							<TableRow>
-								<TableCell width="35%">{Language.nameLabel}</TableCell>
-								<TableCell width="15%">
-									{showOrganizations ? "Organization" : Language.usedByLabel}
-								</TableCell>
-								<TableCell width="10%">{Language.buildTimeLabel}</TableCell>
-								<TableCell width="15%">{Language.lastUpdatedLabel}</TableCell>
-								<TableCell width="1%" />
-							</TableRow>
-						</TableHead>
-						<TableBody>
-							{isLoading && <TableLoader />}
-
-							{isEmpty ? (
-								<EmptyTemplates
-									canCreateTemplates={canCreateTemplates}
-									examples={examples ?? []}
-								/>
-							) : (
-								templates?.map((template) => (
-									<TemplateRow
-										key={template.id}
-										showOrganizations={showOrganizations}
-										template={template}
-									/>
-								))
-							)}
-						</TableBody>
-					</Table>
-				</TableContainer>
 			)}
+
+			<TableContainer>
+				<Table>
+					<TableHead>
+						<TableRow>
+							<TableCell width="35%">{Language.nameLabel}</TableCell>
+							<TableCell width="15%">
+								{showOrganizations ? "Organization" : Language.usedByLabel}
+							</TableCell>
+							<TableCell width="10%">{Language.buildTimeLabel}</TableCell>
+							<TableCell width="15%">{Language.lastUpdatedLabel}</TableCell>
+							<TableCell width="1%" />
+						</TableRow>
+					</TableHead>
+					<TableBody>
+						{isLoading && <TableLoader />}
+
+						{isEmpty ? (
+							<EmptyTemplates
+								canCreateTemplates={canCreateTemplates}
+								examples={examples ?? []}
+							/>
+						) : (
+							templates?.map((template) => (
+								<TemplateRow
+									key={template.id}
+									showOrganizations={showOrganizations}
+									template={template}
+								/>
+							))
+						)}
+					</TableBody>
+				</Table>
+			</TableContainer>
 		</Margins>
 	);
 };