diff --git a/i18n/en-US.properties b/i18n/en-US.properties index 61faa80f99..0a06a437aa 100644 --- a/i18n/en-US.properties +++ b/i18n/en-US.properties @@ -340,6 +340,8 @@ be.contentSidebar.addTask.general = General Task be.contentSidebar.addTask.general.description = Assignees will be responsible for marking tasks as complete # title for general task popup be.contentSidebar.addTask.general.title = Create General Task +# Default message for Box AI expand button in sidebar header +be.contentSidebar.boxAI.expand = Expand # body for first-time user experience tooltip shown to new users of Box Sign be.contentSidebar.boxSignFtuxBody = Sign documents or send signature requests, right from where your content lives # title for first-time user experience tooltip shown to new users of Box Sign diff --git a/src/elements/content-sidebar/BoxAISidebar.tsx b/src/elements/content-sidebar/BoxAISidebar.tsx index 659cd5a87b..31be45a2c6 100644 --- a/src/elements/content-sidebar/BoxAISidebar.tsx +++ b/src/elements/content-sidebar/BoxAISidebar.tsx @@ -6,6 +6,8 @@ import * as React from 'react'; import flow from 'lodash/flow'; import { useIntl } from 'react-intl'; +import { ArrowsExpand } from '@box/blueprint-web-assets/icons/Fill'; +import { IconButton } from '@box/blueprint-web'; import SidebarContent from './SidebarContent'; import { withAPIContext } from '../common/api-context'; import { withErrorBoundary } from '../common/error-boundary'; @@ -15,21 +17,30 @@ import { EVENT_JS_READY } from '../common/logger/constants'; import { mark } from '../../utils/performance'; import messages from '../common/messages'; +import sidebarMessages from './messages'; const MARK_NAME_JS_READY: string = `${ORIGIN_BOXAI_SIDEBAR}_${EVENT_JS_READY}`; mark(MARK_NAME_JS_READY); export interface BoxAISidebarProps { - onExpandPressed: () => void; + onExpandClick: () => void; } -function BoxAISidebar() { +function BoxAISidebar({ onExpandClick }: BoxAISidebarProps) { const { formatMessage } = useIntl(); return ( + } + className="bcs-BoxAISidebar" sidebarView={SIDEBAR_VIEW_BOXAI} title={formatMessage(messages.sidebarBoxAITitle)} > diff --git a/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx b/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx index 18b69db22a..f630a72bf9 100644 --- a/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx +++ b/src/elements/content-sidebar/__tests__/BoxAISidebar.test.tsx @@ -1,19 +1,41 @@ import React from 'react'; +import { userEvent } from '@testing-library/user-event'; import { screen, render } from '../../../test-utils/testing-library'; import BoxAISidebarComponent, { BoxAISidebarProps } from '../BoxAISidebar'; +const mockOnExpandClick = jest.fn(); + describe('elements/content-sidebar/BoxAISidebar', () => { const renderComponent = (props = {}) => { const defaultProps = { - onExpandPressed: jest.fn(), + onExpandClick: mockOnExpandClick, } satisfies BoxAISidebarProps; render(); }; + afterEach(() => { + jest.clearAllMocks(); + }); + test('should render title', () => { renderComponent(); expect(screen.getByRole('heading', { level: 3, name: 'Box AI' })).toBeInTheDocument(); }); + + test('should have accessible "Expand" button', () => { + renderComponent(); + + expect(screen.getByRole('button', { name: 'Expand' })).toBeInTheDocument(); + }); + + test('should call onExpandClick when click "Expand" button', async () => { + renderComponent(); + + const expandButton = screen.getByRole('button', { name: 'Expand' }); + await userEvent.click(expandButton); + + expect(mockOnExpandClick).toHaveBeenCalled(); + }); }); diff --git a/src/elements/content-sidebar/messages.js b/src/elements/content-sidebar/messages.js index ee5a9f669e..d24ba04b46 100644 --- a/src/elements/content-sidebar/messages.js +++ b/src/elements/content-sidebar/messages.js @@ -32,6 +32,11 @@ const messages = defineMessages({ defaultMessage: 'Tasks', description: 'Dropdown option for filtering tasks from activity list', }, + boxAISidebarExpand: { + id: 'be.contentSidebar.boxAI.expand', + description: 'Default message for Box AI expand button in sidebar header', + defaultMessage: 'Expand', + }, boxSignFtuxBody: { id: 'be.contentSidebar.boxSignFtuxBody', defaultMessage: 'Sign documents or send signature requests, right from where your content lives', diff --git a/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx b/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx index 3ad83e972b..040234cc95 100644 --- a/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx +++ b/src/elements/content-sidebar/stories/tests/BoxAISidebar-visual.stories.tsx @@ -1,4 +1,4 @@ -import { expect, within } from '@storybook/test'; +import { expect, userEvent, within } from '@storybook/test'; import { type StoryObj } from '@storybook/react'; import ContentSidebar from '../../ContentSidebar'; import BoxAISidebar from '../../BoxAISidebar'; @@ -24,3 +24,12 @@ export const BoxAIInSidebar: StoryObj = { expect(sidebar).toBeInTheDocument(); }, }; + +export const BoxAIWithExpandedView: StoryObj = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + const expandButton = await canvas.findByRole('button', { name: 'Expand' }, { timeout: 5000 }); + await userEvent.click(expandButton); + }, +};