feat(boxai-sidebar): BoxAISidebar header added (#3698)

* feat(boxai-sidebar): BoxAISidebar header added * chore(boxai-sidebar): Minor PR fix * chore(boxai-sidebar): PR fixes * chore(boxai-sidebar): PR fixes * chore(i18n): translations * chore(boxai-sidebar): UT fix * chore(boxai-sidebar): PR fixes * chore(boxai-sidebar): PR fixes * chore(boxai-sidebar): Minor PR fixes * chore(boxai-sidebar): Minor PR fixes * chore(boxai-sidebar): Minor PR fixes --------- Co-authored-by: Greg Wong <[email protected]>
box · Oct 16, 2024 · 130b6b6 · 130b6b6
1 parent f4a562d
commit 130b6b6
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 5 deletions.
diff --git 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
@@ -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 (
         <SidebarContent
-            className={'bcs-BoxAISidebar'}
+            actions={
+                <IconButton
+                    aria-label={formatMessage(sidebarMessages.boxAISidebarExpand)}
+                    icon={ArrowsExpand}
+                    onClick={onExpandClick}
+                    size="x-small"
+                />
+            }
+            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
@@ -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(<BoxAISidebarComponent {...defaultProps} {...props} />);
     };
 
+    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
@@ -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
@@ -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<typeof BoxAISidebar> = {
         expect(sidebar).toBeInTheDocument();
     },
 };
+
+export const BoxAIWithExpandedView: StoryObj<typeof BoxAISidebar> = {
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+
+        const expandButton = await canvas.findByRole('button', { name: 'Expand' }, { timeout: 5000 });
+        await userEvent.click(expandButton);
+    },
+};