feat: command palette #1611

d-rita · 2024-09-27T00:13:14Z

Implements 351

Description

The command palette is a one stop search for all apps, commands and shortcuts. (backend implementation pending for the last two). This PR builds the UI (views) to support the execution of this functionality.

Implementation details:

For the implementation, the major building blocks I worked on are:

Views

Default (Home view): this is the view on launching the command palette. It contains 2 sections, i.e. a grid section of 8 apps, and an actions section with: a logout link, and conditionally rendered links to the full lists.
List view: this is the view for the full lists of apps, shortcuts, and commands. As well as the filtered search results.

Sections:

All the smaller components making up the views: search field, list item, back button, app item, etc

Hooks

useFilter: this hook makes use of the filterItemsArray function to return filtered results of the apps, commands and shortcuts
useAvailableActions: this hook computes which actions are available to the user depending on the number of apps, commands, shortcuts returned by their respective API endpoints.
useNavigation: this hook handles the keyboard navigation of the command palette. This includes:
- highlighting an item and keeping track of its position inside the views using the arrow keys.
- the closing and opening of the command palette with the keyboard.
- switching back to the default view from the list view

Context

I added a CommandPaletteContext which contains states of the current view, filter, highlighted index, and active home view section, that are consumed and used by the different components within the command palette component to help with navigation, highlighting of items, filtering, and view selection.

Others:

Moved the previously implemented escapeRegExpCharacters into a utils directory.
Created a filterItemsArray utils function from this implementation to handle filtering of other items besides the apps.
Added unit tests for the command palette catering to different scenarios, including navigation, highlighting, search, (conditional) rendering of the components within the views.
Modified the header-bar cypress tests to accommodate the changes made in this component

How to test:

Pull and checkout the branch:

     git fetch origin LIBS-351/headerbar-apps-menu
     git checkout LIBS-351/headerbar-apps-menu

Go to http://localhost:5000/
Select the headerbar component.
Testing scenarios:
- Open the command palette by:
  - Click on the headerbar icon
  - Pressing Cmd/Ctrl + /
- Navigation by hovering or using the arrow keys
- Search for existing and non-existent items,
- Selecting items by clicking on them or pressing enter when they are highlighted,
- Close command palette by:
  - Clicking outside the command palette
  - Pressing Cmd/Ctrl + /
  - Pressing Esc

Checklist

API docs are generated
Tests were added
Storybook demos were added

Screenshots

Home view

Browse apps view

Search Results

Empty Search

dhis2-bot · 2024-10-01T09:23:09Z

🚀 Deployed on https://pr-1611--dhis2-ui.netlify.app

- Launch modal on clicking AllApps icon - Add ordered apps section and action buttons section - Add different views depending on what the user is doing

…cations

- update data-test ids and classes used to retrieve components - update test titles/scenarios to account for apps, shortcuts and commands

kabaros · 2024-11-04T10:46:52Z

components/header-bar/src/command-palette/hooks/use-navigation.js

+        setHighlightedIndex(0)
+    }, [setActiveSection, setCurrentView, setFilter, setHighlightedIndex])
+
+    const handleListViewNavigation = useCallback(


It'd be good to have a test for arrow navigation (focusing on edge cases, when list has only one item, when you're at the end of the list etc..)

kabaros · 2024-11-04T10:57:02Z

components/header-bar/src/command-palette/hooks/use-navigation.js

+            const lastIndex = itemsArray.length - 1
+            switch (event.key) {
+                case 'ArrowDown':
+                    setHighlightedIndex(


are we sure we don't need preventDefault for ArrowDown and Up? (maybe ArrowDown scrolls the page?)

kabaros

lgtm - it'd be good to add tests for navigation with arrow keys (and decide where this will be merged until the backend for shortcuts and commands is implemented)

cooper-joe · 2024-11-05T11:29:30Z

I noticed that the highlight position is carried over from a unfiltered state to the filtered state.
Example:

Open command palette
Move highlight to position 3 (the third app in the grid)
Start typing to enter the filtered state
Expectation: the highlight should be on the first item in the filtered state list
Current outcome: the highlight is on the third item in the filtered state list (and is potentially hidden if there are < 3 items).

- Retrieve respective actions based on the availability of apps, shortcuts, and commands - Track active index of the highlighted action from the dynamically rendered actions menu - Only show and select grid as active section if apps are available - Highlight first item in the list across all views, i.e. full lists, and search results

- Add tests for the Up and Down arrow key navigation in the list views - Add tests for the Right and Left arrow key navigation in the app grid - Add tests for the search and highlighting functionality in the command palette

amcgee · 2024-11-19T12:10:37Z

🎉 🎉 🎉

amcgee · 2024-11-19T12:10:53Z

Merging this to a feature branch 👍

d-rita changed the title ~~Libs 351/headerbar apps menu~~ feat: HeaderBar Apps Menu command palette Sep 27, 2024

d-rita force-pushed the LIBS-351/headerbar-apps-menu branch from 3ddb8df to 1b2bac1 Compare September 29, 2024 01:43

d-rita requested a review from amcgee October 1, 2024 05:31

d-rita force-pushed the LIBS-351/headerbar-apps-menu branch from 1b2bac1 to a529dc0 Compare October 1, 2024 09:17

d-rita changed the title ~~feat: HeaderBar Apps Menu command palette~~ feat: command palette Oct 1, 2024

dhis2-bot temporarily deployed to netlify October 1, 2024 09:23 Inactive

d-rita added 5 commits October 14, 2024 17:08

feat: make input clearable and add prefix icon

c9a17a3

fix: prefix and clear button css alignment

fbb2d4a

refactor: use onChange handler to clear text

5bed818

feat: implement command palette

6980665

- Launch modal on clicking AllApps icon - Add ordered apps section and action buttons section - Add different views depending on what the user is doing

refactor: replace multiple view components with one view + css modifi…

ba24ae8

…cations

d-rita force-pushed the LIBS-351/headerbar-apps-menu branch from a529dc0 to 521abe3 Compare October 16, 2024 16:19

d-rita added 3 commits October 16, 2024 19:20

fix: separate fields, views and command palette components

b6a17ee

feat: update Search field and list item components

5351210

refactor: move components into separate files

150e231

d-rita force-pushed the LIBS-351/headerbar-apps-menu branch from 521abe3 to 150e231 Compare October 16, 2024 16:22

dhis2-bot temporarily deployed to netlify October 16, 2024 16:25 Inactive

d-rita requested a review from a team October 17, 2024 08:57

d-rita added 3 commits October 18, 2024 09:55

fix: css adjustments

f72dec2

feat: add shortcuts section

27ea177

refactor: separate actions into separate component

7d44fb4

d-rita requested a review from cooper-joe October 18, 2024 11:21

d-rita added 3 commits October 21, 2024 12:59

refactor: create separate apps, commands, and shortcuts views

6f50168

feat: update function to filter items across all views

96ed25e

feat: switch search field placeholder depending on the view

284e284

dhis2-bot temporarily deployed to netlify October 21, 2024 14:09 Inactive

d-rita added 2 commits October 25, 2024 10:46

chore: refactor and add unit tests for command palette component

83243dd

chore: update HeaderBar tests

0579262

- update data-test ids and classes used to retrieve components - update test titles/scenarios to account for apps, shortcuts and commands

dhis2-bot temporarily deployed to netlify October 25, 2024 07:58 Inactive

dhis2-bot temporarily deployed to netlify October 25, 2024 08:29 Inactive

d-rita force-pushed the LIBS-351/headerbar-apps-menu branch from 781510b to 0579262 Compare October 25, 2024 08:49

dhis2-bot temporarily deployed to netlify October 25, 2024 08:53 Inactive

feat: handle navigation between the grid and list views

9d6d6ca

d-rita marked this pull request as ready for review October 30, 2024 13:04

d-rita requested a review from a team as a code owner October 30, 2024 13:04

dhis2-bot temporarily deployed to netlify October 30, 2024 13:06 Inactive

kabaros reviewed Nov 4, 2024

View reviewed changes

kabaros approved these changes Nov 4, 2024

View reviewed changes

d-rita added 3 commits November 6, 2024 03:27

test: add navigation tests across different views

5421520

- Add tests for the Up and Down arrow key navigation in the list views - Add tests for the Right and Left arrow key navigation in the app grid - Add tests for the search and highlighting functionality in the command palette

refactor(cleanup): remove hardcoded shortcuts and commands arrays

f6a5c9d

dhis2-bot temporarily deployed to netlify November 6, 2024 00:45 Inactive

refactor: split test file into multiple files for readability

731586e

dhis2-bot temporarily deployed to netlify November 6, 2024 17:06 Inactive

d-rita self-assigned this Nov 6, 2024

amcgee changed the base branch from master to feature-command-palette November 19, 2024 12:02

amcgee approved these changes Nov 19, 2024

View reviewed changes

amcgee merged commit 07931b9 into feature-command-palette Nov 19, 2024
20 checks passed

amcgee deleted the LIBS-351/headerbar-apps-menu branch November 19, 2024 12:11

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: command palette #1611

feat: command palette #1611

d-rita commented Sep 27, 2024 •

edited

Loading

dhis2-bot commented Oct 1, 2024 •

edited

Loading

kabaros Nov 4, 2024

kabaros Nov 4, 2024

kabaros left a comment

cooper-joe commented Nov 5, 2024

amcgee commented Nov 19, 2024

amcgee commented Nov 19, 2024

feat: command palette #1611

feat: command palette #1611

Conversation

d-rita commented Sep 27, 2024 • edited Loading

Description

Implementation details:

Views

Sections:

Hooks

Context

Others:

How to test:

Checklist

Screenshots

Home view

Browse apps view

Search Results

Empty Search

dhis2-bot commented Oct 1, 2024 • edited Loading

kabaros Nov 4, 2024

Choose a reason for hiding this comment

kabaros Nov 4, 2024

Choose a reason for hiding this comment

kabaros left a comment

Choose a reason for hiding this comment

cooper-joe commented Nov 5, 2024

amcgee commented Nov 19, 2024

amcgee commented Nov 19, 2024

d-rita commented Sep 27, 2024 •

edited

Loading

dhis2-bot commented Oct 1, 2024 •

edited

Loading