Function DatabaseSelect

frontend/src/react/components/DatabaseSelect.tsx:43–243

(props: DatabaseSelectProps)

export type DatabaseSelectProps = BaseProps & (SingleProps | MultiProps);

export function DatabaseSelect(props: DatabaseSelectProps) {
  const {
    placeholder,
    disabled,
    className,
    portal,
    projectName,
    environmentName,
    allowedEngineTypeList,
  } = props;
  const { t } = useTranslation();
  const workspaceResourceName = useAppStore((s) => s.workspaceResourceName());
  // The app store's global database cache — populated by every fetch below
  // (upserted fresh) plus databases fetched elsewhere (e.g. Sync Schema's
  // deep-link preload) and not evicted by this picker's own project-parent
  // fetches. It resolves a selected value that is not on the current page, so
  // chips stay labeled across searches and `onChange` payloads carry the real,
  // fresh `Database`. Read non-reactively on purpose: `onChange` reads it live
  // at click time (payload always current), and every flow that sets a selected
  // value either populates the cache first (deep-link) or triggers a local
  // re-render (search -> setDatabases), so a selected option never lingers as a
  // synthesized label in practice.
  const getDatabaseByName = useAppStore((s) => s.getDatabaseByName);

  // Current page / latest search results (drives the dropdown rows).
  const [databases, setDatabases] = useState<Database[]>([]);
  // Monotonic fetch id: only the latest in-flight fetch may apply its result,
  // so an out-of-order (slow mount / stale search) response can't clobber newer
  // results. Mirrors DatabaseResourceSelector / the plan-detail DatabaseSelector.
  const fetchIdRef = useRef(0);

  // Stabilize engines array to avoid re-fetching on every render.
  const enginesRef = useRef(allowedEngineTypeList);
  const stableEngines = useMemo(() => {
    const prev = enginesRef.current;
    if (
      prev &&
      allowedEngineTypeList &&
      prev.length === allowedEngineTypeList.length &&
      prev.every((e, i) => e === allowedEngineTypeList[i])
    ) {
      return prev;
    }
    enginesRef.current = allowedEngineTypeList;
    return allowedEngineTypeList;
  }, [allowedEngineTypeList]);

  const fetchDatabases = useCallback(
    (query: string) => {
      const fetchId = ++fetchIdRef.current;
      useAppStore
        .getState()
        .fetchDatabases({
          parent: projectName ?? workspaceResourceName,
          filter: {
            environment: environmentName,
            engines: stableEngines,
            query,