UI: Fixes for Sidebar and Search

[ghengeveld]

Issue: #13000

What I did

1. Update empty state for search: show a “no results” message. Currently we show no results and no messages which makes the UI appear broken.

I added a "No components found" message:

2. No recently opened: When there are no recently opened items continue showing the treeview. Currently we show nothing so it looks like the treeview completely disappeared. You can reproduce this state by clearing recently opened.

Instead of showing the treeview, I made sure that the history will always show at least one item. After all, you will always have a component selected, so technically that one should always be at the top of the list.

3. When you click on the expand all button, keyboard navigation no longer behaves as I'd expect. Every time I press enter the focus returns to the expand all button no matter what I focus on using my keyboard. Video here

Fixed this by removing focus from the expand-all button when using the arrow keys to navigate the tree.

4. Keyboard navigation skips items when a folder is expanded and collapsed. Video here. When expanding and collapsing using the right and left arrow keys I expect the focus to start at the very beginning of the list not in the middle.

This was a bug and is fixed now.

5. Keyboard navigation focus doesn't transfer to the "folder" items. Video here

Fixed. Now when you click a node to expand/collapse it, it will get highlighted as well.

How to test

See the above descriptions and videos for manual QA.

[domyen]

Nice, looks good. Suggested minor UI tweaks in the comments. Request below:

Recently opened back button
I realize that there's no obvious way to get back to the components list from the "Recently opened" view. Video description

To make it dead obvious, add a back button "« Back to components" above clear history. Perhaps it'd also make sense to allow the [esc] key to go back from this state as well.

[ghengeveld]

Done 👍

[shilman]

Build failing due to type errors:

@storybook/ui: src/components/sidebar/Search.stories.tsx(35,13): error TS2741: Property 'closeMenu' is missing in type '{ results: any; query: string; getMenuProps: (props?: any) => { key: any; }; getItemProps: (props?: any) => { key: any; }; highlightedIndex: number; }' but required in type '{ query: string; results: DownshiftItem[]; closeMenu: (cb?: () => void) => void; getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any; getItemProps: (options: GetItemPropsOptions<...>) => any; highlightedIndex: number; }'.
@storybook/ui: src/components/sidebar/Search.stories.tsx(42,8): error TS2741: Property 'closeMenu' is missing in type '{ query: string; results: DownshiftItem[]; getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any; getItemProps: (options: GetItemPropsOptions<...>) => any; highlightedIndex: number; }' but required in type '{ query: string; results: DownshiftItem[]; closeMenu: (cb?: () => void) => void; getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any; getItemProps: (options: GetItemPropsOptions<...>) => any; highlightedIndex: number; }'.
@storybook/ui: src/components/sidebar/SearchResults.stories.tsx(80,33): error TS2741: Property 'closeMenu' is missing in type '{ query: string; results: { item: SearchItem; matches: { value: string; indices: number[][]; }[]; score: number; }[]; getMenuProps: (props?: any) => { key: any; }; getItemProps: (props?: any) => { key: any; }; highlightedIndex: number; }' but required in type '{ query: string; results: DownshiftItem[]; closeMenu: (cb?: () => void) => void; getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any; getItemProps: (options: GetItemPropsOptions<...>) => any; highlightedIndex: number; }'.
@storybook/ui: src/components/sidebar/SearchResults.stories.tsx(82,33): error TS2741: Property 'closeMenu' is missing in type '{ results: any; query: string; getMenuProps: (props?: any) => { key: any; }; getItemProps: (props?: any) => { key: any; }; highlightedIndex: number; }' but required in type '{ query: string; results: DownshiftItem[]; closeMenu: (cb?: () => void) => void; getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any; getItemProps: (options: GetItemPropsOptions<...>) => any; highlightedIndex: number; }'.
@storybook/ui: src/components/sidebar/SearchResults.stories.tsx(84,34): error TS2741: Property 'closeMenu' is missing in type '{ query: string; results: { item: SearchItem; matches: any[]; score: number; }[]; getMenuProps: (props?: any) => { key: any; }; getItemProps: (props?: any) => { key: any; }; highlightedIndex: number; }' but required in type '{ query: string; results: DownshiftItem[]; closeMenu: (cb?: () => void) => void; getMenuProps: (options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions) => any; getItemProps: (options: GetItemPropsOptions<...>) => any; highlightedIndex: number; }'.

Can you please fix?

[ghengeveld]

Tests are failing for some reason not related to this PR.