May 30, 2023 · May 19, 2023 · May 23, 2023 · May 23, 2023 · May 23, 2023 · May 24, 2023
diff --git a/site/src/pages/WorkspacesPage/Filter.tsx b/site/src/pages/WorkspacesPage/Filter.tsx
  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 =
 export const useUsersAutocomplete = (
  initialOptionValue: string | undefined,
  onChange: (option: OwnerOption | undefined) => void,
  enabled?: boolean,
 ) =>
  useAutocomplete({
    id: "owner",
      }))
    },
    onChange,
    enabled,
  })

 type UsersAutocomplete = ReturnType<typeof useUsersAutocomplete>
 }: {
  filter: UseFilterResult
  autocomplete: {
    users: UsersAutocomplete
    users?: UsersAutocomplete
    templates: TemplatesAutocomplete
    status: StatusAutocomplete
  }
  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>
                  size="small"
                  onClick={() => {
                    filter.update("")
                    autocomplete.users.clearSelection()
                    autocomplete.templates.clearSelection()
                    autocomplete.status.clearSelection()

                    if (autocomplete.users) {
                      autocomplete.users.clearSelection()
                    }
                  }}
                >
                  <CloseOutlined sx={{ fontSize: 14 }} />
          ),
        }}
      />
      <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
  useTemplatesAutocomplete,
  useUsersAutocomplete,
 } from "./Filter"
 import { useOrganizationId } from "hooks"
 import { useOrganizationId, usePermissions } from "hooks"

 const WorkspacesPage: FC = () => {
  const orgId = useOrganizationId()
    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,
        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
  WorkspacesResponse,
 } from "api/typesGenerated"
 import { displayError } from "components/GlobalSnackbar/utils"
 import { useState } from "react"
 import { useTranslation } from "react-i18next"

 type UseWorkspacesDataParams = {
  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 {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 =
Expand DownExpand Up		@@ -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",
Expand All		@@ -226,6 +231,7 @@ export const useUsersAutocomplete = (
		}))
		},
		onChange,
		enabled,
		})

		type UsersAutocomplete = ReturnType<typeof useUsersAutocomplete>
Expand DownExpand Up		@@ -320,7 +326,7 @@ export const Filter = ({
		}: {
		filter: UseFilterResult
		autocomplete: {
		users: UsersAutocomplete
		users?: UsersAutocomplete
		templates: TemplatesAutocomplete
		status: StatusAutocomplete
		}
Expand All		@@ -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>
Expand DownExpand Up		@@ -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 }} />
Expand All		@@ -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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,7 +10,7 @@ import {
		useTemplatesAutocomplete,
		useUsersAutocomplete,
		} from "./Filter"
		import { useOrganizationId } from "hooks"
		import { useOrganizationId, usePermissions } from "hooks"

		const WorkspacesPage: FC = () => {
		const orgId = useOrganizationId()
Expand All		@@ -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,
Expand All		@@ -50,7 +53,7 @@ const WorkspacesPage: FC = () => {
		filterProps={{
		filter,
		autocomplete: {
		users: usersAutocomplete,
		users:canFilterByUser ?usersAutocomplete : undefined,
		templates: templatesAutocomplete,
		status: statusAutocomplete,
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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 = {
Expand All		@@ -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 {
Expand Down