diff --git a/app/react/components/form-components/FilePicker/FilePicker.stories.tsx b/app/react/components/form-components/FilePicker/FilePicker.stories.tsx index 55fa81a46d..b64115e8ad 100644 --- a/app/react/components/form-components/FilePicker/FilePicker.stories.tsx +++ b/app/react/components/form-components/FilePicker/FilePicker.stories.tsx @@ -130,6 +130,13 @@ const REPO_NODES: FileNode[] = [ { name: 'tsconfig.json' }, ]; +const HUGE_REPO_NODES: FileNode[] = Array.from({ length: 100 }, (_, dir) => ({ + name: `service-${dir}`, + children: Array.from({ length: 100 }, (_, file) => ({ + name: `config-${file}.yml`, + })), +})); + // ─── Skeleton ───────────────────────────────────────────────────────────────── export const Skeleton: StoryObj<{ loading: boolean }> = { @@ -217,3 +224,29 @@ export const Default: Story = { }, }, }; + +// ─── Huge repo (BE-13263) ────────────────────────────────────────────────────── + +export const HugeRepo: Story = { + args: { + files: HUGE_REPO_NODES, + exampleExpressions: ['*.yml'], + }, + render: (args) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const [value, setValue] = useState([]); + return ( +
+ +
+ ); + }, + parameters: { + docs: { + description: { + story: + 'Repro for BE-13263: 10,000 files, all matching `*.yml`. Click the `*.yml` chip (or type it into the filter bar) to render the full 10,000-row match list and see how the dropdown behaves at that scale.', + }, + }, + }, +}; diff --git a/app/react/components/form-components/FilePicker/FilePicker.tsx b/app/react/components/form-components/FilePicker/FilePicker.tsx index 00b5ccda80..243f528257 100644 --- a/app/react/components/form-components/FilePicker/FilePicker.tsx +++ b/app/react/components/form-components/FilePicker/FilePicker.tsx @@ -135,7 +135,7 @@ export function FilePicker({ No matching files

) : ( -