Fix refetch on error

coder · BrunoQuaresma · May 30, 2023 · May 19, 2023 · May 23, 2023 · May 23, 2023
commit d6a7c6f20a6748e63f9cab4ab98eb50957501cdc
diff --git a/site/src/pages/WorkspacesPage/Filter.tsx b/site/src/pages/WorkspacesPage/Filter.tsx
@@ -115,24 +115,28 @@ type UseAutocompleteOptions<TOption extends BaseOption> = {
   getInitialOption: () => Promise<TOption | null>
   getOptions: (query: string) => Promise<TOption[]>
   onChange: (option: TOption | undefined) => void
+  enabled?: boolean
 }
 
 const useAutocomplete = <TOption extends BaseOption = BaseOption>({
   id,
   getInitialOption,
   getOptions,
   onChange,
+  enabled,
 }: UseAutocompleteOptions<TOption>) => {
   const [query, setQuery] = useState("")
   const [selectedOption, setSelectedOption] = useState<TOption>()
   const initialOptionQuery = useQuery({
     queryKey: [id, "autocomplete", "initial"],
     queryFn: () => getInitialOption(),
     onSuccess: (option) => setSelectedOption(option ?? undefined),
+    enabled,
   })
   const searchOptionsQuery = useQuery({
     queryKey: [id, "autoComplete", "search"],
     queryFn: () => getOptions(query),
+    enabled,
   })
   const searchOptions = useMemo(() => {
     const isDataLoaded =
@@ -202,6 +206,7 @@ const useAutocomplete = <TOption extends BaseOption = BaseOption>({
 export const useUsersAutocomplete = (
   initialOptionValue: string | undefined,
   onChange: (option: OwnerOption | undefined) => void,
+  enabled?: boolean,
 ) =>
   useAutocomplete({
     id: "owner",
@@ -226,6 +231,7 @@ export const useUsersAutocomplete = (
       }))
     },
     onChange,
+    enabled,
   })
 
 type UsersAutocomplete = ReturnType<typeof useUsersAutocomplete>
@@ -320,7 +326,7 @@ export const Filter = ({
 }: {
   filter: UseFilterResult
   autocomplete: {
-    users: UsersAutocomplete
+    users?: UsersAutocomplete
     templates: TemplatesAutocomplete
     status: StatusAutocomplete
   }
@@ -329,13 +335,13 @@ export const Filter = ({
   const isIinitializingFilters =
     autocomplete.status.isInitializing ||
     autocomplete.templates.isInitializing ||
-    autocomplete.users.isInitializing
+    (autocomplete.users && autocomplete.users.isInitializing)
 
   if (isIinitializingFilters) {
     return (
       <Box display="flex" sx={{ gap: 1, mb: 2 }}>
         <FilterSkeleton width="100%" />
-        <FilterSkeleton width="200px" />
+        {autocomplete.users && <FilterSkeleton width="200px" />}
         <FilterSkeleton width="200px" />
         <FilterSkeleton width="200px" />
       </Box>
@@ -375,9 +381,12 @@ export const Filter = ({
                   size="small"
                   onClick={() => {
                     filter.update("")
-                    autocomplete.users.clearSelection()
                     autocomplete.templates.clearSelection()
                     autocomplete.status.clearSelection()
+
+                    if (autocomplete.users) {
+                      autocomplete.users.clearSelection()
+                    }
                   }}
                 >
                   <CloseOutlined sx={{ fontSize: 14 }} />
@@ -387,7 +396,7 @@ export const Filter = ({
           ),
         }}
       />
-      <OwnerFilter autocomplete={autocomplete.users} />
+      {autocomplete.users && <OwnerFilter autocomplete={autocomplete.users} />}
       <TemplatesFilter autocomplete={autocomplete.templates} />
       <StatusFilter autocomplete={autocomplete.status} />
     </Box>

diff --git a/site/src/pages/WorkspacesPage/WorkspacesPage.tsx b/site/src/pages/WorkspacesPage/WorkspacesPage.tsx
@@ -10,7 +10,7 @@ import {
   useTemplatesAutocomplete,
   useUsersAutocomplete,
 } from "./Filter"
-import { useOrganizationId } from "hooks"
+import { useOrganizationId, usePermissions } from "hooks"
 
 const WorkspacesPage: FC = () => {
   const orgId = useOrganizationId()
@@ -21,9 +21,12 @@ const WorkspacesPage: FC = () => {
     query: filter.query,
   })
   const updateWorkspace = useWorkspaceUpdate(queryKey)
+  const permissions = usePermissions()
+  const canFilterByUser = permissions.viewDeploymentValues
   const usersAutocomplete = useUsersAutocomplete(
     filter.values.owner,
     (option) => filter.update({ ...filter.values, owner: option?.value }),
+    canFilterByUser,
   )
   const templatesAutocomplete = useTemplatesAutocomplete(
     orgId,
@@ -50,7 +53,7 @@ const WorkspacesPage: FC = () => {
         filterProps={{
           filter,
           autocomplete: {
-            users: usersAutocomplete,
+            users: canFilterByUser ? usersAutocomplete : undefined,
             templates: templatesAutocomplete,
             status: statusAutocomplete,
           },

diff --git a/site/src/pages/WorkspacesPage/data.ts b/site/src/pages/WorkspacesPage/data.ts
@@ -12,6 +12,7 @@ import {
   WorkspacesResponse,
 } from "api/typesGenerated"
 import { displayError } from "components/GlobalSnackbar/utils"
+import { useState } from "react"
 import { useTranslation } from "react-i18next"
 
 type UseWorkspacesDataParams = {
@@ -26,17 +27,22 @@ export const useWorkspacesData = ({
   query,
 }: UseWorkspacesDataParams) => {
   const queryKey = ["workspaces", query, page]
+  const [shouldRefetch, setShouldRefetch] = useState(true)
   const result = useQuery({
     queryKey,
     queryFn: () =>
       getWorkspaces({
         q: query,
         limit: limit,
-        // If the page is <= 0, just use offset 0. This usually happens
-        // if the page is not provided.
         offset: page <= 0 ? 0 : (page - 1) * limit,
       }),
-    refetchInterval: 5_000,
+    onSuccess: () => {
+      setShouldRefetch(true)
+    },
+    onError: () => {
+      setShouldRefetch(false)
+    },
+    refetchInterval: shouldRefetch ? 5_000 : undefined,
   })
 
   return {