Fix errors

coder · BrunoQuaresma · May 30, 2023 · May 19, 2023 · May 23, 2023 · May 23, 2023
commit 8fe547cfbaf7f4f59ff0149df4080487192318d8
diff --git a/site/src/api/errors.ts b/site/src/api/errors.ts
@@ -34,6 +34,9 @@ export const isApiValidationError = (error: unknown): error is ApiError => {
   return isApiError(error) && hasApiFieldErrors(error)
 }
 
+export const hasError = (error: unknown) =>
+  error !== undefined && error !== null
+
 export const mapApiErrorToFieldErrors = (
   apiErrorResponse: ApiErrorResponse,
 ): FieldErrors => {

diff --git a/site/src/pages/WorkspacesPage/Filter.tsx b/site/src/pages/WorkspacesPage/Filter.tsx
@@ -22,6 +22,11 @@ import { useQuery } from "@tanstack/react-query"
 import { getUsers, getTemplates } from "api/api"
 import Skeleton, { SkeletonProps } from "@mui/material/Skeleton"
 import CheckOutlined from "@mui/icons-material/CheckOutlined"
+import {
+  getValidationErrorMessage,
+  hasError,
+  isApiValidationError,
+} from "api/errors"
 
 /** Filter */
 
@@ -323,14 +328,17 @@ const FilterSkeleton = (props: SkeletonProps) => {
 export const Filter = ({
   filter,
   autocomplete,
+  error,
 }: {
   filter: UseFilterResult
+  error?: unknown
   autocomplete: {
     users?: UsersAutocomplete
     templates: TemplatesAutocomplete
     status: StatusAutocomplete
   }
 }) => {
+  const shouldDisplayError = hasError(error) && isApiValidationError(error)
   const hasFilterQuery = filter.query !== ""
   const isIinitializingFilters =
     autocomplete.status.isInitializing ||
@@ -351,6 +359,10 @@ export const Filter = ({
   return (
     <Box display="flex" sx={{ gap: 1, mb: 2 }}>
       <TextField
+        error={shouldDisplayError}
+        helperText={
+          shouldDisplayError ? getValidationErrorMessage(error) : undefined
+        }
         sx={{ width: "100%" }}
         color="success"
         size="small"

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -18,6 +18,7 @@ import difference from "lodash/difference"
 import { ImpendingDeletionBanner } from "components/WorkspaceDeletion"
 import { ErrorAlert } from "components/Alert/ErrorAlert"
 import { Filter } from "./Filter"
+import { hasError, isApiValidationError } from "api/errors"
 
 export const Language = {
   pageTitle: "Workspaces",
@@ -98,7 +99,7 @@ export const WorkspacesPageView: FC<
       </PageHeader>
 
       <Stack>
-        <Maybe condition={Boolean(error)}>
+        <Maybe condition={hasError(error) && !isApiValidationError(error)}>
           <ErrorAlert error={error} />
         </Maybe>
         <ImpendingDeletionBanner
@@ -112,7 +113,7 @@ export const WorkspacesPageView: FC<
           }
         />
 
-        <Filter {...filterProps} />
+        <Filter error={error} {...filterProps} />
       </Stack>
       <WorkspacesTable
         workspaces={workspaces}

diff --git a/site/src/pages/WorkspacesPage/data.ts b/site/src/pages/WorkspacesPage/data.ts
@@ -26,7 +26,8 @@ export const useWorkspacesData = ({
   limit,
   query,
 }: UseWorkspacesDataParams) => {
-  const queryKey = ["workspaces", query, page]
+  const debouncedQuery = useState(query)
+  const queryKey = ["workspaces", debouncedQuery, page]
   const [shouldRefetch, setShouldRefetch] = useState(true)
   const result = useQuery({
     queryKey,