{
// no filter view
const searchField = await findByPlaceholderText('Search apps')
- expect(queryByText(/All Apps/i)).toBeInTheDocument()
- const listItems = queryAllByTestId('headerbar-list-item')
- // 9 apps
- expect(listItems.length).toBe(9)
+ // back action
+ const list = queryAllByTestId('headerbar-list')
+ const backActionListItem = getByTestId('headerbar-back-action')
+ const appsListItems = queryAllByTestId('headerbar-list-item')
- // first item highlighted
- expect(listItems[0]).toHaveClass('highlighted')
- expect(listItems[0].querySelector('span')).toHaveTextContent(
- 'Test App 1'
- )
- listItems[0].focus()
+ const listItems = list[0].children
+ // 9 apps + back action
+ expect(listItems.length).toBe(10)
+ expect(appsListItems.length).toBe(9)
- await user.keyboard('{ArrowDown}')
- expect(listItems[0]).not.toHaveClass('highlighted')
+ // first list item not to be highlighted
+ expect(listItems[0]).toBe(backActionListItem)
+ expect(backActionListItem).not.toHaveClass('highlighted')
+
+ // first app item highlighted
expect(listItems[1]).toHaveClass('highlighted')
expect(listItems[1].querySelector('span')).toHaveTextContent(
- 'Test App 2'
+ 'Test App 1'
)
listItems[1].focus()
@@ -115,14 +115,22 @@ describe('Command Palette - List View - Browse Apps View', () => {
expect(listItems[1]).not.toHaveClass('highlighted')
expect(listItems[2]).toHaveClass('highlighted')
expect(listItems[2].querySelector('span')).toHaveTextContent(
+ 'Test App 2'
+ )
+ listItems[1].focus()
+
+ await user.keyboard('{ArrowDown}')
+ expect(listItems[2]).not.toHaveClass('highlighted')
+ expect(listItems[3]).toHaveClass('highlighted')
+ expect(listItems[3].querySelector('span')).toHaveTextContent(
'Test App 3'
)
listItems[2].focus()
await user.keyboard('{ArrowUp}')
- expect(listItems[2]).not.toHaveClass('highlighted')
- expect(listItems[1]).toHaveClass('highlighted')
- expect(listItems[1].querySelector('span')).toHaveTextContent(
+ expect(listItems[3]).not.toHaveClass('highlighted')
+ expect(listItems[2]).toHaveClass('highlighted')
+ expect(listItems[2].querySelector('span')).toHaveTextContent(
'Test App 2'
)
listItems[1].focus()
@@ -130,8 +138,6 @@ describe('Command Palette - List View - Browse Apps View', () => {
// filter items view
await user.type(searchField, 'Test App')
expect(searchField).toHaveValue('Test App')
- expect(queryByText(/All Apps/i)).not.toBeInTheDocument()
- expect(queryByText(/Results for "Test App"/i)).toBeInTheDocument()
// first item highlighted
expect(listItems[1]).not.toHaveClass('highlighted')
@@ -151,15 +157,7 @@ describe('Command Palette - List View - Browse Apps View', () => {
const clearButton = getAllByRole('button')[1]
await user.click(clearButton)
- // back to normal list view/no filter view
- expect(queryByText(/All Apps/i)).toBeInTheDocument()
- expect(queryByText(/Results for "Test App"/i)).not.toBeInTheDocument()
-
- // first item highlighted
- expect(listItems[8]).not.toHaveClass('highlighted')
+ // first item - back Action highlighted
expect(listItems[0]).toHaveClass('highlighted')
- expect(listItems[0].querySelector('span')).toHaveTextContent(
- 'Test App 1'
- )
})
})
diff --git a/components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js b/components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js
index 25cf89d67..3c0ae3a54 100644
--- a/components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js
+++ b/components/header-bar/src/command-palette/__tests__/browse-commands-view.test.js
@@ -16,13 +16,7 @@ describe('Command Palette - List View - Browse Commands', () => {
})
it('renders Browse Commands View', async () => {
const user = userEvent.setup()
- const {
- getByTestId,
- queryByTestId,
- getByPlaceholderText,
- queryByText,
- getByLabelText,
- } = render(
+ const { getByTestId, queryByTestId, getByPlaceholderText } = render(
)
// open command palette
@@ -37,22 +31,19 @@ describe('Command Palette - List View - Browse Commands', () => {
const searchField = getByPlaceholderText('Search commands')
expect(searchField).toHaveValue('')
- const backButton = getByLabelText('Back Button')
- expect(backButton).toBeInTheDocument()
+ const backActionListItem = getByTestId('headerbar-back-action')
+ expect(backActionListItem).not.toHaveClass('highlighted')
- expect(queryByText(/All Commands/i)).toBeInTheDocument()
-
- const listItem = queryByTestId('headerbar-list-item')
+ const commandsListItem = queryByTestId('headerbar-list-item')
// first item highlighted
- expect(listItem.querySelector('span')).toHaveTextContent(
+ expect(commandsListItem.querySelector('span')).toHaveTextContent(
'Test Command 1'
)
- expect(listItem).toHaveClass('highlighted')
- listItem.focus()
+ expect(commandsListItem).toHaveClass('highlighted')
+ commandsListItem.focus()
// Backspace key goes back to default view
await user.keyboard('{Backspace}')
- expect(queryByText(/All Commands/i)).not.toBeInTheDocument()
expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
})
})
diff --git a/components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js b/components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js
index 94b1e0f73..b0f011892 100644
--- a/components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js
+++ b/components/header-bar/src/command-palette/__tests__/browse-shortcuts-view.test.js
@@ -21,7 +21,6 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
queryByTestId,
getByPlaceholderText,
queryByText,
- getByLabelText,
} = render(
)
@@ -37,21 +36,19 @@ describe('Command Palette - List View - Browse Shortcuts', () => {
const searchField = getByPlaceholderText('Search shortcuts')
expect(searchField).toHaveValue('')
- const backButton = getByLabelText('Back Button')
- expect(backButton).toBeInTheDocument()
+ // back action
+ const backActionListItem = getByTestId('headerbar-back-action')
+ expect(backActionListItem).not.toHaveClass('highlighted')
- expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
-
- const listItem = queryByTestId('headerbar-list-item')
+ const shortcutsListItem = queryByTestId('headerbar-list-item')
// first item highlighted
- expect(listItem.querySelector('span')).toHaveTextContent(
+ expect(shortcutsListItem.querySelector('span')).toHaveTextContent(
'Test Shortcut 1'
)
- expect(listItem).toHaveClass('highlighted')
+ expect(shortcutsListItem).toHaveClass('highlighted')
// go back to default view
- await user.click(getByLabelText('Back Button'))
- expect(queryByText(/All Shortcuts/i)).not.toBeInTheDocument()
+ await user.click(getByTestId('headerbar-back-action'))
expect(queryByText(/Actions/i)).toBeInTheDocument()
})
})
diff --git a/components/header-bar/src/command-palette/__tests__/command-palette.test.js b/components/header-bar/src/command-palette/__tests__/command-palette.test.js
index 0c56f85ff..f938d9003 100644
--- a/components/header-bar/src/command-palette/__tests__/command-palette.test.js
+++ b/components/header-bar/src/command-palette/__tests__/command-palette.test.js
@@ -165,7 +165,6 @@ describe('Command Palette Component', () => {
// go to All Shortcuts (list) view
await user.click(getByTestId('headerbar-browse-shortcuts'))
expect(queryByText(/Top Apps/i)).not.toBeInTheDocument()
- expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
// Esc key closes the modal
await user.keyboard('{Escape}')
@@ -207,15 +206,14 @@ describe('Command Palette Component', () => {
it('moves to the default view with backspace key if there is no search filter', async () => {
const user = userEvent.setup()
- const {
- container,
- getByPlaceholderText,
- getByTestId,
- queryByTestId,
- queryByText,
- } = render(
-
- )
+ const { container, getByPlaceholderText, getByTestId, queryByTestId } =
+ render(
+
+ )
// open modal
fireEvent.keyDown(container, { key: 'k', ctrlKey: true })
@@ -223,7 +221,6 @@ describe('Command Palette Component', () => {
await user.click(getByTestId('headerbar-browse-shortcuts'))
expect(queryByTestId('headerbar-actions-menu')).not.toBeInTheDocument()
- expect(queryByText(/All Shortcuts/i)).toBeInTheDocument()
// Search field
const searchField = await getByPlaceholderText('Search shortcuts')
@@ -231,7 +228,6 @@ describe('Command Palette Component', () => {
// Backspace key goes back to default view
await user.keyboard('{Backspace}')
- expect(queryByText(/All Shortcuts/i)).not.toBeInTheDocument()
expect(queryByTestId('headerbar-actions-menu')).toBeInTheDocument()
})
})
diff --git a/components/header-bar/src/command-palette/__tests__/home-view.test.js b/components/header-bar/src/command-palette/__tests__/home-view.test.js
index 8fea4755e..2d86e922e 100644
--- a/components/header-bar/src/command-palette/__tests__/home-view.test.js
+++ b/components/header-bar/src/command-palette/__tests__/home-view.test.js
@@ -73,7 +73,6 @@ describe('Command Palette - Home View', () => {
expect(searchField).toHaveValue('Test')
expect(queryByTestId('headerbar-top-apps-list')).not.toBeInTheDocument()
- expect(queryByText(/Results for "Test"/i)).toBeInTheDocument()
const listItems = queryAllByTestId('headerbar-list-item')
// 9 apps + 1 command + 1 shortcut
@@ -89,7 +88,6 @@ describe('Command Palette - Home View', () => {
// back to default view
expect(queryByTestId('headerbar-top-apps-list')).toBeInTheDocument()
- expect(queryByText(/Results for "Test"/i)).not.toBeInTheDocument()
})
it('handles right arrow navigation in the grid on the home view', async () => {
diff --git a/components/header-bar/src/command-palette/sections/back-action.js b/components/header-bar/src/command-palette/sections/back-action.js
index 262b5a4c4..a3254ca9f 100644
--- a/components/header-bar/src/command-palette/sections/back-action.js
+++ b/components/header-bar/src/command-palette/sections/back-action.js
@@ -3,9 +3,9 @@ import React from 'react'
import { useCommandPaletteContext } from '../context/command-palette-context.js'
import ListItem from './list-item.js'
-function BackActionItem({ actions }) {
+function BackActionItem({ actionProps }) {
const { highlightedIndex } = useCommandPaletteContext()
- const { name, icon, dataTest, action } = actions?.[0]
+ const { name, icon, dataTest, action } = actionProps
const backActionIndexInListView = 0
return (
@@ -21,7 +21,12 @@ function BackActionItem({ actions }) {
}
BackActionItem.propTypes = {
- actions: PropTypes.array,
+ actionProps: PropTypes.shape({
+ action: PropTypes.func,
+ dataTest: PropTypes.string,
+ icon: PropTypes.element,
+ name: PropTypes.string,
+ }),
}
export default BackActionItem
diff --git a/components/header-bar/src/command-palette/sections/list.js b/components/header-bar/src/command-palette/sections/list.js
index 674987273..317081a40 100644
--- a/components/header-bar/src/command-palette/sections/list.js
+++ b/components/header-bar/src/command-palette/sections/list.js
@@ -2,14 +2,18 @@ import PropTypes from 'prop-types'
import React from 'react'
import { useCommandPaletteContext } from '../context/command-palette-context.js'
import { HOME_VIEW } from '../utils/constants.js'
+import BackActionItem from './back-action.js'
import ListItem from './list-item.js'
-function List({ filteredItems }) {
+function List({ filteredItems, backAction }) {
const { currentView, highlightedIndex, filter } = useCommandPaletteContext()
- const isBackActionActive = currentView !== HOME_VIEW && !filter
+ const showBackAction = currentView !== HOME_VIEW && !filter
return (
+ {showBackAction ? (
+
+ ) : null}
{filteredItems.map(
(
{
@@ -25,7 +29,7 @@ function List({ filteredItems }) {
) => {
const isImage = typeof icon === 'string'
const isIcon = React.isValidElement(icon)
- const index = isBackActionActive ? idx + 1 : idx
+ const index = showBackAction ? idx + 1 : idx
return (
0 ? (
- <>
- {!filter ? : null}
-
- >
- ) : (
- filter &&
- )
+
+ ) : filter ? (
+
+ ) : null
}
ListView.propTypes = {