Aug 30, 2024 · Aug 29, 2024 · Aug 30, 2024 · Aug 30, 2024 · Aug 30, 2024
diff --git a/site/src/pages/TemplatesPage/TemplatesFilter.tsx b/site/src/pages/TemplatesPage/TemplatesFilter.tsx

 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 }),
 // 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
 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
 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";
 </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 ?? []}
 <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}
 />
 ) : (
 templates?.map((template) => (
 <TemplateRow
 key={template.id}
 showOrganizations={showOrganizations}
 template={template}
 />
 ))
 )}
 </TableBody>
 </Table>
 </TableContainer>
 )}
 ))
 )}
 </TableBody>
 </Table>
 </TableContainer>
 </Margins>
 );
 };
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 }),
Expand DownExpand Up		@@ -48,6 +52,7 @@ export const TemplatesFilter: FC<TemplatesFilterProps> = ({ filter }) => {
		// learnMoreLink={docs("/templates#template-filtering")}
		isLoading={false}
		filter={filter}
		error={error}
		options={
		<>
		<SelectFilter
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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,
		},
		};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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";
Expand DownExpand Up		@@ -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 ?? []}
		<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}
		/>
		) : (
		templates?.map((template) => (
		<TemplateRow
		key={template.id}
		showOrganizations={showOrganizations}
		template={template}
		/>
		))
		)}
		</TableBody>
		</Table>
		</TableContainer>
		)}
		))
		)}
		</TableBody>
		</Table>
		</TableContainer>
		</Margins>
		);
		};
Expand Down