synced/coder
1
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2025-07-13 21:36:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* chore: make templates search error the same as workspaces
This commit is contained in:
Steven Masley
2024-08-30 15:14:59 -05:00
committed by GitHub
parent 0f8251be41
commit 0ef85147cd
3 changed files with 63 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
site/src/pages/TemplatesPage/TemplatesFilter.tsx
View File

@ -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

19
site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx
View File

@ -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,
},
};

75
site/src/pages/TemplatesPage/TemplatesPageView.tsx
View File

@ -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>
);
};