feat(studio): Support searching for fileset file select

web/packages/common/src/components/FilesetSearchableSelect/index.tsx

@@ -0,0 +1,105 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useFilesetSearch } from '@nemo/common/src/components/FilesetSearchableSelect/useFilesetSearch';
+import {
+  ControlledSearchableSelect,
+  type SelectItemOption,
+} from '@nemo/common/src/components/form/ControlledSearchableSelect';
+import { getEntityReference } from '@nemo/common/src/namedEntity';
+import type { FilesetOutput, FilesetPurpose } from '@nemo/sdk/generated/platform/schema';
+import { type ReactElement, type ReactNode, useCallback, useMemo } from 'react';
+import { type FieldValues, type UseControllerProps } from 'react-hook-form';
+
+export interface FilesetSearchableSelectFormFieldProps {
+  slotLabel?: ReactNode;
+  slotInfo?: ReactNode;
+  slotError?: string;
+}
+
+export interface FilesetSearchableSelectProps<T extends FieldValues> {
+  workspace: string;
+  queryEnabled?: boolean;
+  useControllerProps: UseControllerProps<T>;
+  formFieldProps: FilesetSearchableSelectFormFieldProps;
+  triggerPlaceholder?: string;
+  /** Restrict to one fileset `purpose`. Omit to list every purpose. */
+  purpose?: FilesetPurpose;
+  /** Options rendered above the fileset list (e.g. a "New Dataset" entry). */
+  leadingOptions?: SelectItemOption[];
+  groupLabels?: Record<string, string>;
+  /** Build the option row for a fileset. Defaults to its `workspace/name` reference. */
+  renderOption?: (fileset: FilesetOutput) => SelectItemOption;
+  /** Fired with the picked option value, alongside the form field update. The matching
+   *  fileset is resolved from the loaded pages, and is undefined for `leadingOptions`. */
+  onChange?: (value: string, fileset?: FilesetOutput) => void;
+  disabled?: boolean;
+}
+
+const defaultRenderOption = (fileset: FilesetOutput): SelectItemOption => {
+  const ref = getEntityReference(fileset);
+  return { value: ref, label: ref };
+};
+
+/**
+ * A fileset picker with server-side search and pagination.
+ *
+ * Prefer this over a plain `Select` fed by a single `filesListFilesets` page: that shape
+ * caps out at the API's 100-item page and gives the user no way to reach the rest.
+ */
+export function FilesetSearchableSelect<T extends FieldValues>({
+  workspace,
+  queryEnabled = true,
+  useControllerProps,
+  formFieldProps,
+  triggerPlaceholder = 'Select a fileset',
+  purpose,
+  leadingOptions,
+  groupLabels,
+  renderOption = defaultRenderOption,
+  onChange,
+  disabled,
+}: FilesetSearchableSelectProps<T>): ReactElement {
+  const { filesets, setSearch, loadMore, hasMore, isLoading, isLoadingMore, isError } =
+    useFilesetSearch({
+      workspace,
+      purpose,
+      enabled: queryEnabled,
+    });
+
+  const filesetOptions = useMemo(
+    () => filesets.map((fileset) => ({ fileset, option: renderOption(fileset) })),
+    [filesets, renderOption]
+  );
+
+  const options = useMemo<SelectItemOption[]>(
+    () => [...(leadingOptions ?? []), ...filesetOptions.map(({ option }) => option)],
+    [filesetOptions, leadingOptions]
+  );
+
+  const handleChange = useCallback(
+    (value: string) => {
+      onChange?.(value, filesetOptions.find(({ option }) => option.value === value)?.fileset);
+    },
+    [onChange, filesetOptions]
+  );
+
+  return (
+    <ControlledSearchableSelect
+      useControllerProps={useControllerProps}
+      options={options}
+      groupLabels={groupLabels}
+      onChange={handleChange}
+      disabled={disabled}
+      onSearchChange={setSearch}
+      onLoadMore={loadMore}
+      hasMore={hasMore}
+      isLoading={isLoading}
+      isLoadingMore={isLoadingMore}
+      searchPlaceholder="Search filesets..."
+      emptyMessage={isError ? 'Failed to load filesets' : 'No filesets found'}
+      triggerPlaceholder={triggerPlaceholder}
+      formFieldProps={formFieldProps}
+    />
+  );
+}

web/packages/common/src/components/FilesetSearchableSelect/useFilesetSearch.test.tsx

@@ -0,0 +1,174 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { withOperators } from '@nemo/common/src/api/filterOperators';
+import { useFilesetSearch } from '@nemo/common/src/components/FilesetSearchableSelect/useFilesetSearch';
+import { filesListFilesets } from '@nemo/sdk/generated/platform/api';
+import type { FilesetOutput } from '@nemo/sdk/generated/platform/schema';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { act, renderHook, waitFor } from '@testing-library/react';
+
+vi.mock('@nemo/sdk/generated/platform/api', () => ({
+  filesListFilesets: vi.fn(),
+  getFilesListFilesetsQueryKey: vi.fn((workspace: string) => ['filesets', workspace]),
+}));
+
+const fileset = (name: string) => ({ id: `default/${name}`, name, workspace: 'default' });
+
+const page = (names: string[], pageNumber: number, totalPages: number) =>
+  ({
+    data: names.map(fileset) as FilesetOutput[],
+    pagination: { page: pageNumber, total_pages: totalPages },
+  }) as Awaited<ReturnType<typeof filesListFilesets>>;
+
+const wrapper = ({ children }: { children: React.ReactNode }) => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};
+
+/** A wrapper backed by one client, so two hook instances share a cache. */
+const createSharedWrapper = () => {
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};
+
+describe('useFilesetSearch', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('requests the first page newest-first, at the shared page size', async () => {
+    vi.mocked(filesListFilesets).mockResolvedValue(page(['a'], 1, 1));
+
+    const { result } = renderHook(() => useFilesetSearch({ workspace: 'ws' }), { wrapper });
+
+    await waitFor(() => expect(result.current.filesets).toHaveLength(1));
+    expect(filesListFilesets).toHaveBeenCalledWith(
+      'ws',
+      expect.objectContaining({ page: 1, page_size: 20, sort: '-created_at' }),
+      expect.anything()
+    );
+  });
+
+  it('accumulates pages instead of truncating at the first one', async () => {
+    vi.mocked(filesListFilesets)
+      .mockResolvedValueOnce(page(['a', 'b'], 1, 2))
+      .mockResolvedValueOnce(page(['c'], 2, 2));
+
+    const { result } = renderHook(() => useFilesetSearch({ workspace: 'ws' }), { wrapper });
+
+    await waitFor(() => expect(result.current.filesets).toHaveLength(2));
+    expect(result.current.hasMore).toBe(true);
+
+    await act(async () => {
+      await result.current.loadMore();
+    });
+
+    await waitFor(() => expect(result.current.filesets).toHaveLength(3));
+    expect(result.current.filesets.map((f) => f.name)).toEqual(['a', 'b', 'c']);
+    expect(result.current.hasMore).toBe(false);
+  });
+
+  it('stops paging at the last page', async () => {
+    vi.mocked(filesListFilesets).mockResolvedValue(page(['a'], 1, 1));
+
+    const { result } = renderHook(() => useFilesetSearch({ workspace: 'ws' }), { wrapper });
+
+    await waitFor(() => expect(result.current.hasMore).toBe(false));
+    await act(async () => {
+      await result.current.loadMore();
+    });
+    expect(filesListFilesets).toHaveBeenCalledTimes(1);
+  });
+
+  it('sends the search term as a server-side $like filter', async () => {
+    vi.mocked(filesListFilesets).mockResolvedValue(page(['a'], 1, 1));
+
+    const { result } = renderHook(() => useFilesetSearch({ workspace: 'ws' }), { wrapper });
+    await waitFor(() => expect(result.current.filesets).toHaveLength(1));
+
+    act(() => result.current.setSearch('pay'));
+
+    await waitFor(() =>
+      expect(filesListFilesets).toHaveBeenCalledWith(
+        'ws',
+        expect.objectContaining({ filter: withOperators({ name: { $like: '%pay%' } }) }),
+        expect.anything()
+      )
+    );
+  });
+
+  it('combines search and purpose into one filter', async () => {
+    vi.mocked(filesListFilesets).mockResolvedValue(page(['a'], 1, 1));
+
+    const { result } = renderHook(() => useFilesetSearch({ workspace: 'ws', purpose: 'generic' }), {
+      wrapper,
+    });
+    await waitFor(() => expect(result.current.filesets).toHaveLength(1));
+
+    act(() => result.current.setSearch('pay'));
+
+    await waitFor(() =>
+      expect(filesListFilesets).toHaveBeenCalledWith(
+        'ws',
+        expect.objectContaining({
+          filter: withOperators({ name: { $like: '%pay%' }, purpose: 'generic' }),
+        }),
+        expect.anything()
+      )
+    );
+  });
+
+  it('sends no filter when unfiltered, so every purpose is listed', async () => {
+    vi.mocked(filesListFilesets).mockResolvedValue(page(['a'], 1, 1));
+
+    const { result } = renderHook(() => useFilesetSearch({ workspace: 'ws' }), { wrapper });
+
+    await waitFor(() => expect(result.current.filesets).toHaveLength(1));
+    expect(filesListFilesets).toHaveBeenCalledWith(
+      'ws',
+      expect.objectContaining({ filter: undefined }),
+      expect.anything()
+    );
+  });
+
+  it('caches per page size, so a differently-sized hook does not reuse the wrong page', async () => {
+    vi.mocked(filesListFilesets).mockResolvedValue(page(['a'], 1, 1));
+    const sharedWrapper = createSharedWrapper();
+
+    const { result: defaultSized } = renderHook(() => useFilesetSearch({ workspace: 'ws' }), {
+      wrapper: sharedWrapper,
+    });
+    await waitFor(() => expect(defaultSized.current.filesets).toHaveLength(1));
+
+    const { result: smallPaged } = renderHook(
+      () => useFilesetSearch({ workspace: 'ws', pageSize: 5 }),
+      { wrapper: sharedWrapper }
+    );
+    await waitFor(() => expect(smallPaged.current.filesets).toHaveLength(1));
+
+    expect(filesListFilesets).toHaveBeenCalledTimes(2);
+    expect(filesListFilesets).toHaveBeenLastCalledWith(
+      'ws',
+      expect.objectContaining({ page_size: 5 }),
+      expect.anything()
+    );
+  });
+
+  it('reports the failure instead of an empty result set', async () => {
+    vi.mocked(filesListFilesets).mockRejectedValue(new Error('boom'));
+
+    const { result } = renderHook(() => useFilesetSearch({ workspace: 'ws' }), { wrapper });
+
+    await waitFor(() => expect(result.current.isError).toBe(true));
+    expect(result.current.error?.message).toBe('boom');
+    expect(result.current.filesets).toEqual([]);
+  });
+
+  it('does not query without a workspace', () => {
+    renderHook(() => useFilesetSearch({ workspace: '' }), { wrapper });
+    expect(filesListFilesets).not.toHaveBeenCalled();
+  });
+});

web/packages/common/src/components/FilesetSearchableSelect/useFilesetSearch.ts

@@ -0,0 +1,105 @@
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { withOperators } from '@nemo/common/src/api/filterOperators';
+import { filesListFilesets, getFilesListFilesetsQueryKey } from '@nemo/sdk/generated/platform/api';
+import type {
+  FilesetOutput,
+  FilesetPurpose,
+  FilesListFilesetsParams,
+} from '@nemo/sdk/generated/platform/schema';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useCallback, useMemo, useState } from 'react';
+
+/** The v2 API caps `page_size` at 100; 20 keeps the first paint small and pages on scroll. */
+export const FILESETS_PAGE_SIZE = 20;
+
+export interface UseFilesetSearchOptions {
+  workspace: string;
+  /** Restrict to one fileset `purpose`. Omit to list every purpose. */
+  purpose?: FilesetPurpose;
+  enabled?: boolean;
+  pageSize?: number;
+}
+
+export interface UseFilesetSearchResult {
+  /** Every fileset loaded so far, newest first. */
+  filesets: FilesetOutput[];
+  search: string;
+  setSearch: (value: string) => void;
+  loadMore: () => Promise<void>;
+  hasMore: boolean;
+  isLoading: boolean;
+  isLoadingMore: boolean;
+  /** The fileset query failed; the caller should say so rather than show an empty list. */
+  isError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Search + paginate a workspace's filesets.
+ *
+ * Server-side on both counts: name search goes out as a `$like` filter and results are
+ * paged, so this does not silently truncate the way a single capped page does. Sorted
+ * newest-first, since a fileset the user just created is the one they are looking for.
+ */
+export const useFilesetSearch = ({
+  workspace,
+  purpose,
+  enabled = true,
+  pageSize = FILESETS_PAGE_SIZE,
+}: UseFilesetSearchOptions): UseFilesetSearchResult => {
+  const [search, setSearch] = useState('');
+
+  const filter = useMemo<FilesListFilesetsParams['filter'] | undefined>(() => {
+    const clauses = {
+      ...(search ? { name: { $like: `%${search}%` } } : {}),
+      ...(purpose ? { purpose } : {}),
+    };
+    return Object.keys(clauses).length
+      ? withOperators<FilesListFilesetsParams['filter']>(clauses)
+      : undefined;
+  }, [search, purpose]);
+
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError, error } =
+    useInfiniteQuery({
+      queryKey: [
+        ...getFilesListFilesetsQueryKey(workspace),
+        'infinite',
+        'newest',
+        purpose ?? 'all',
+        search,
+        pageSize,
+      ] as const,
+      queryFn: ({ signal, pageParam }) =>
+        filesListFilesets(
+          workspace,
+          { page: pageParam, page_size: pageSize, sort: '-created_at', filter },
+          signal
+        ),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage) => {
+        const p = lastPage.pagination;
+        return p && p.page < p.total_pages ? p.page + 1 : undefined;
+      },
+      enabled: enabled && !!workspace,
+    });
+
+  const filesets = useMemo(() => data?.pages.flatMap((page) => page.data) ?? [], [data?.pages]);
+
+  const loadMore = useCallback(async () => {
+    if (hasNextPage && !isFetchingNextPage) await fetchNextPage();
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage]);
+
+  return {
+    filesets,
+    search,
+    setSearch,
+    loadMore,
+    hasMore: hasNextPage ?? false,
+    isLoading,
+    isLoadingMore: isFetchingNextPage,
+    isError,
+    error,
+  };
+};