fix: Allow repo dropdown to open on input when empty#4422
fix: Allow repo dropdown to open on input when empty#4422jlsherrill wants to merge 1 commit intoosbuild:mainfrom
Conversation
There was a problem hiding this comment.
Hey - I've found 2 issues, and left some high level feedback:
- Setting
skip: falseon the repositories query means it will fire even when the dropdown is closed and no search is in progress; consider conditioningskiponisOpenand/ordebouncedFilterValueto avoid unnecessary network requests. - The new empty-state branches for filtered vs unfiltered results add more conditional complexity in the render; you might consider extracting this into a small helper function (e.g.,
renderEmptyState(debouncedFilterValue)) to keep the JSX easier to scan.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- Setting `skip: false` on the repositories query means it will fire even when the dropdown is closed and no search is in progress; consider conditioning `skip` on `isOpen` and/or `debouncedFilterValue` to avoid unnecessary network requests.
- The new empty-state branches for filtered vs unfiltered results add more conditional complexity in the render; you might consider extracting this into a small helper function (e.g., `renderEmptyState(debouncedFilterValue)`) to keep the JSX easier to scan.
## Individual Comments
### Comment 1
<location path="src/Components/CreateImageWizard/steps/Repositories/tests/Repositories.test.tsx" line_range="93-91" />
<code_context>
resolveSearch(JSON.stringify({ data: [], meta: { count: 0 } }));
});
+ test('shows unfiltered repositories when dropdown opens', async () => {
+ fetchMock.mockResponse(
+ createFetchHandler({ repositories: mockRepositoryResults }),
+ );
+ renderRepositoriesStep();
+ const user = createUser();
+
+ // Open dropdown by clicking toggle
+ const toggle = await screen.findByRole('button', { name: /menu toggle/i });
+ await user.click(toggle);
+
+ // Should show repositories without typing
+ expect(
+ await screen.findByRole('option', { name: /01-test-valid-repo/i }),
+ ).toBeInTheDocument();
+ expect(
+ await screen.findByRole('option', { name: /04-test-another-valid-repo/i }),
+ ).toBeInTheDocument();
+ });
+
+ test('shows appropriate empty state message based on filter state', async () => {
</code_context>
<issue_to_address>
**issue (testing):** Add a test that covers opening the dropdown via the search input click when the input is empty.
This change fixes behavior for clicking the empty search input, but the new test exercises opening via the toggle button instead. To directly cover the regression, please add a test that:
- Renders the component with no initial filter value
- Locates the search textbox (role="textbox", name /filter repositories/i)
- Clicks the textbox while the dropdown is closed and empty
- Asserts that the dropdown opens (options or the correct empty/loading state are visible)
That will specifically validate the `onInputClick` path this PR is addressing.
</issue_to_address>
### Comment 2
<location path="src/Components/CreateImageWizard/steps/Repositories/tests/Repositories.test.tsx" line_range="113-84" />
<code_context>
+ ).toBeInTheDocument();
+ });
+
+ test('shows appropriate empty state message based on filter state', async () => {
+ fetchMock.mockResponse(
+ createFetchHandler({ repositories: [] }),
+ );
+ renderRepositoriesStep();
+ const user = createUser();
+
+ // Open dropdown - should show "No repositories available"
+ const toggle = await screen.findByRole('button', { name: /menu toggle/i });
+ await user.click(toggle);
+
+ expect(
+ await screen.findByRole('option', { name: /no repositories available/i }),
+ ).toBeInTheDocument();
</code_context>
<issue_to_address>
**suggestion (testing):** Strengthen the empty‑state test by asserting that the previous message is no longer rendered after the filter changes.
In `shows appropriate empty state message based on filter state`, you already check that the message changes after typing. Please also assert that the initial "No repositories available" option is no longer present after typing (e.g. via `queryByRole` + `expect(...).not.toBeInTheDocument()`) to verify the component doesn’t render both empty states at once.
Suggested implementation:
```typescript
expect(
await screen.findByRole('option', { name: /no repositories match your filters/i }),
).toBeInTheDocument();
// Initial empty-state message should no longer be rendered
expect(
screen.queryByRole('option', { name: /no repositories available/i }),
).not.toBeInTheDocument();
```
If the text of the second empty-state message is slightly different (e.g. different casing or wording), adjust the `/no repositories match your filters/i` regex in the SEARCH block to match the actual string used in your test.
If you used a different role or label for the initial empty-state (instead of `role: 'option'` or label `/no repositories available/i`), update the `queryByRole` arguments accordingly so the assertion targets the same element as your first empty-state check.
</issue_to_address>Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
| ).toBeInTheDocument(); | ||
|
|
||
| resolveSearch(JSON.stringify({ data: [], meta: { count: 0 } })); | ||
| }); |
There was a problem hiding this comment.
issue (testing): Add a test that covers opening the dropdown via the search input click when the input is empty.
This change fixes behavior for clicking the empty search input, but the new test exercises opening via the toggle button instead. To directly cover the regression, please add a test that:
- Renders the component with no initial filter value
- Locates the search textbox (role="textbox", name /filter repositories/i)
- Clicks the textbox while the dropdown is closed and empty
- Asserts that the dropdown opens (options or the correct empty/loading state are visible)
That will specifically validate the onInputClick path this PR is addressing.
Codecov Report✅ All modified and coverable lines are covered by tests. @@ Coverage Diff @@
## main #4422 +/- ##
==========================================
+ Coverage 74.60% 74.62% +0.02%
==========================================
Files 229 229
Lines 7563 7563
Branches 2829 2832 +3
==========================================
+ Hits 5642 5644 +2
+ Misses 1664 1662 -2
Partials 257 257
Continue to review full report in Codecov by Sentry.
🚀 New features to boost your workflow:
|
Removes inputValue condition from onInputClick so the dropdown opens when clicking the search box, even when empty, allowing users to see unfiltered repositories immediately. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Removes inputValue condition from onInputClick so the dropdown opens when clicking the search box, even when empty, allowing users to see unfiltered repositories immediately.
Fixes HMS-10642