Chore/remove unpaginated projects endpoint from docs (#39771)

* Use paginated projects endpoint for docs

* Deprecate old projects query

* Fix

* Fix

* fix(docs branch selector)

* refactor(docs project selector): simplify dom

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>

apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx

@@ -1,11 +1,10 @@
 import { noop } from 'lodash-es'
 import { Check, ChevronsUpDown } from 'lucide-react'
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import {
   Button_Shadcn_ as Button,
   cn,
   Command_Shadcn_ as Command,
-  CommandEmpty_Shadcn_ as CommandEmpty,
   CommandGroup_Shadcn_ as CommandGroup,
   CommandInput_Shadcn_ as CommandInput,
   CommandItem_Shadcn_ as CommandItem,
@@ -15,6 +14,8 @@ import {
   PopoverTrigger_Shadcn_ as PopoverTrigger,
   ScrollArea,
 } from 'ui'
+import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
+import { useIntersectionObserver } from '~/hooks/useIntersectionObserver'
 
 export interface ComboBoxOption {
   id: string
@@ -28,25 +29,56 @@ export function ComboBox<Opt extends ComboBoxOption>({
   name,
   options,
   selectedOption,
+  selectedDisplayName,
   onSelectOption = noop,
   className,
+  search = '',
+  hasNextPage = false,
+  isFetching = false,
+  isFetchingNextPage = false,
+  fetchNextPage,
+  setSearch = () => {},
+  useCommandSearch = true,
 }: {
   isLoading: boolean
   disabled?: boolean
   name: string
   options: Opt[]
   selectedOption?: string
+  selectedDisplayName?: string
   onSelectOption?: (newValue: string) => void
   className?: string
+  search?: string
+  hasNextPage?: boolean
+  isFetching?: boolean
+  isFetchingNextPage?: boolean
+  fetchNextPage?: () => void
+  setSearch?: (value: string) => void
+  useCommandSearch?: boolean
 }) {
   const [open, setOpen] = useState(false)
 
-  const selectedOptionDisplayName = options.find(
-    (option) => option.value === selectedOption
-  )?.displayName
+  const scrollRootRef = useRef<HTMLDivElement | null>(null)
+  const [sentinelRef, entry] = useIntersectionObserver({
+    root: scrollRootRef.current,
+    threshold: 0,
+    rootMargin: '0px',
+  })
+
+  useEffect(() => {
+    if (!isLoading && !isFetching && !isFetchingNextPage && hasNextPage && entry?.isIntersecting) {
+      fetchNextPage?.()
+    }
+  }, [isLoading, isFetching, isFetchingNextPage, hasNextPage, entry?.isIntersecting, fetchNextPage])
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={(value) => {
+        setOpen(value)
+        if (!value) setSearch('')
+      }}
+    >
       <PopoverTrigger asChild>
         <Button
           variant="outline"
@@ -62,41 +94,64 @@ export function ComboBox<Opt extends ComboBoxOption>({
             className
           )}
         >
-          {isLoading
-            ? 'Loading...'
-            : options.length === 0
-              ? `No ${name} found`
-              : selectedOptionDisplayName ?? `Select a ${name}...`}
+          {selectedDisplayName ??
+            (isLoading && options.length > 0
+              ? 'Loading...'
+              : options.length === 0
+                ? `No ${name} found`
+                : `Select a ${name}...`)}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="p-0" side="bottom">
-        <Command>
-          <CommandInput placeholder={`Search ${name}...`} className="border-none ring-0" />
+      <PopoverContent className="p-0" side="bottom" align="start">
+        <Command shouldFilter={useCommandSearch}>
+          <CommandInput
+            placeholder={`Search ${name}...`}
+            className="border-none ring-0"
+            showResetIcon
+            value={search}
+            onValueChange={setSearch}
+            handleReset={() => setSearch('')}
+          />
           <CommandList>
-            <CommandEmpty>No {name} found.</CommandEmpty>
             <CommandGroup>
-              <ScrollArea className={options.length > 10 ? 'h-[280px]' : ''}>
-                {options.map((option) => (
-                  <CommandItem
-                    key={option.id}
-                    value={option.value}
-                    onSelect={(selectedValue: string) => {
-                      setOpen(false)
-                      onSelectOption(selectedValue)
-                    }}
-                    className="cursor-pointer"
-                  >
-                    <Check
-                      className={cn(
-                        'mr-2 h-4 w-4',
-                        selectedOption === option.value ? 'opacity-100' : 'opacity-0'
-                      )}
-                    />
-                    {option.displayName}
-                  </CommandItem>
-                ))}
-              </ScrollArea>
+              {isLoading ? (
+                <div className="px-2 py-1 flex flex-col gap-2">
+                  <ShimmeringLoader className="w-full" />
+                  <ShimmeringLoader className="w-4/5" />
+                </div>
+              ) : (
+                <>
+                  {search.length > 0 && options.length === 0 && (
+                    <p className="text-xs text-center text-foreground-lighter py-3">
+                      No {name}s found based on your search
+                    </p>
+                  )}
+                  <ScrollArea className={options.length > 7 ? 'h-[210px]' : ''}>
+                    {options.map((option) => (
+                      <CommandItem
+                        key={option.id}
+                        value={option.value}
+                        onSelect={(selectedValue: string) => {
+                          setOpen(false)
+                          onSelectOption(selectedValue)
+                        }}
+                        className="cursor-pointer"
+                      >
+                        <Check
+                          className={cn(
+                            'mr-2 h-4 w-4',
+                            selectedOption === option.value ? 'opacity-100' : 'opacity-0'
+                          )}
+                        />
+                        {option.displayName}
+                      </CommandItem>
+                    ))}
+                    <div ref={sentinelRef} className="h-1 -mt-1" />
+                    {hasNextPage && <ShimmeringLoader className="px-2 py-3" />}
+                  </ScrollArea>
+                </>
+              )}
             </CommandGroup>
           </CommandList>
         </Command>