feat(boxai-sidebar): Empty Sidebar for Box AI (#3668)

* feat(boxai-sidebar): PR fixes and Storybook test added

* feat(boxai-sidebar): Empty Sidebar for Box AI

* feat(boxai-sidebar): BoxAISidebar.tsx deleted

* feat(boxai-sidebar): SidebarPanels.test.js test fixed

* feat(boxai-sidebar): PR fixes

* feat(boxai-sidebar): PR fixes

* feat(boxai-sidebar): Storybook test fixes

* feat(boxai-sidebar): Fixed UT

* chore(i18n): translations

* Resolved issue with flow check

* feat(boxai-sidebar): flow check fixes

* chore(boxai-sidebar): BoxAISidebar.stories.tsx small fix

* chore(boxai-sidebar): PR fixes

* chore(boxai-sidebar): PR fixes

---------

Co-authored-by: Danila Rubleuski <drubleuski@box.com>
Co-authored-by: Greg Wong <gregorywong@box.com>
Co-authored-by: kkuliczkowski <kkuliczkowski@box.com>
Co-authored-by: greg-in-a-box <103291617+greg-in-a-box@users.noreply.github.com>
Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: 5 people

i18n/en-US.properties

@@ -646,6 +646,8 @@ be.shareDialogText = Shared Link:
 be.sidebarAccessStats = Access Stats
 # Title for the preview activity feed.
 be.sidebarActivityTitle = Activity
+# Title for the preview Box AI feed.
+be.sidebarBoxAITitle = Box AI
 # Title for the sidebar content insights.
 be.sidebarContentInsights = Content Insights
 # Title for the preview details sidebar.

src/constants.js

@@ -319,6 +319,7 @@ export const ERROR_CODE_UNKNOWN = 'unknown_error';
 export const ORIGIN_CONTENT_PREVIEW: 'content_preview' = 'content_preview';
 export const ORIGIN_CONTENT_SIDEBAR: 'content_sidebar' = 'content_sidebar';
 export const ORIGIN_ACTIVITY_SIDEBAR: 'activity_sidebar' = 'activity_sidebar';
+export const ORIGIN_BOXAI_SIDEBAR: 'boxai_sidebar' = 'boxai_sidebar';
 export const ORIGIN_DETAILS_SIDEBAR: 'details_sidebar' = 'details_sidebar';
 export const ORIGIN_DOCGEN_SIDEBAR: 'docgen_sidebar' = 'docgen_sidebar';
 export const ORIGIN_METADATA_SIDEBAR: 'metadata_sidebar' = 'metadata_sidebar';
@@ -405,6 +406,7 @@ export const SIDEBAR_VIEW_SKILLS: 'skills' = 'skills';
 export const SIDEBAR_VIEW_DETAILS: 'details' = 'details';
 export const SIDEBAR_VIEW_METADATA: 'metadata' = 'metadata';
 export const SIDEBAR_VIEW_METADATA_REDESIGN: 'metadata_redesign' = 'metadata_redesign';
+export const SIDEBAR_VIEW_BOXAI: 'boxai' = 'boxai';
 export const SIDEBAR_VIEW_ACTIVITY: 'activity' = 'activity';
 export const SIDEBAR_VIEW_VERSIONS: 'versions' = 'versions';
 export const SIDEBAR_VIEW_DOCGEN: 'docgen' = 'docgen';

src/elements/common/flowTypes.js

@@ -7,6 +7,7 @@ import {
     ORIGIN_PREVIEW,
     ORIGIN_CONTENT_PREVIEW,
     ORIGIN_DETAILS_SIDEBAR,
+    ORIGIN_BOXAI_SIDEBAR,
     ORIGIN_ACTIVITY_SIDEBAR,
     ORIGIN_SKILLS_SIDEBAR,
     ORIGIN_METADATA_SIDEBAR,
@@ -42,6 +43,7 @@ type ElementOrigin =
     | typeof ORIGIN_CONTENT_PREVIEW
     | typeof ORIGIN_PREVIEW
     | typeof ORIGIN_DETAILS_SIDEBAR
+    | typeof ORIGIN_BOXAI_SIDEBAR
     | typeof ORIGIN_ACTIVITY_SIDEBAR
     | typeof ORIGIN_SKILLS_SIDEBAR
     | typeof ORIGIN_METADATA_SIDEBAR

src/elements/common/interactionTargets.js

@@ -1,5 +1,6 @@
 // @flow strict
 export const SIDEBAR_NAV_TARGETS = {
+    BOXAI: 'sidebarboxai',
     ACTIVITY: 'sidebaractivity',
     DETAILS: 'sidebardetails',
     SIGN: 'sidebarsign',

src/elements/common/messages.js

@@ -452,6 +452,11 @@ const messages = defineMessages({
         description: 'Generic error content for skills editing.',
         defaultMessage: 'An error has occurred while updating skills. Please refresh the page and try again.',
     },
+    sidebarBoxAITitle: {
+        id: 'be.sidebarBoxAITitle',
+        description: 'Title for the preview Box AI feed.',
+        defaultMessage: 'Box AI',
+    },
     sidebarActivityTitle: {
         id: 'be.sidebarActivityTitle',
         description: 'Title for the preview activity feed.',

src/elements/content-sidebar/BoxAISidebar.js.flow

@@ -0,0 +1,25 @@
+/**
+ * Flowtype definitions for BoxAISidebar.tsx
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ */
+
+import * as React from "react";
+import flow from "lodash/flow";
+import { useIntl } from "react-intl";
+import SidebarContent from "./SidebarContent";
+import { withAPIContext } from "../common/api-context";
+import { withErrorBoundary } from "../common/error-boundary";
+import { withLogger } from "../common/logger";
+import { ORIGIN_BOXAI_SIDEBAR, SIDEBAR_VIEW_BOXAI } from "../../constants";
+import { EVENT_JS_READY } from "../common/logger/constants";
+import { mark } from "../../utils/performance";
+import messages from "../common/messages";
+declare var MARK_NAME_JS_READY: string;
+export interface BoxAISidebarProps {
+  onExpandPressed: () => void;
+}
+declare function BoxAISidebar(): void;
+declare export { BoxAISidebar as BoxAISidebarComponent };
+declare var BoxAISidebarDefaultExport: typeof withAPIContext;
+declare export default typeof BoxAISidebarDefaultExport;

src/elements/content-sidebar/BoxAISidebar.tsx

@@ -0,0 +1,49 @@
+/**
+ * @file Redesigned Metadata sidebar component
+ * @author Box
+ */
+import * as React from 'react';
+import flow from 'lodash/flow';
+import { useIntl } from 'react-intl';
+
+import SidebarContent from './SidebarContent';
+import { withAPIContext } from '../common/api-context';
+import { withErrorBoundary } from '../common/error-boundary';
+import { withLogger } from '../common/logger';
+import { ORIGIN_BOXAI_SIDEBAR, SIDEBAR_VIEW_BOXAI } from '../../constants';
+import { EVENT_JS_READY } from '../common/logger/constants';
+import { mark } from '../../utils/performance';
+
+import messages from '../common/messages';
+
+const MARK_NAME_JS_READY: string = `${ORIGIN_BOXAI_SIDEBAR}_${EVENT_JS_READY}`;
+
+mark(MARK_NAME_JS_READY);
+
+export interface BoxAISidebarProps {
+    onExpandPressed: () => void;
+}
+
+function BoxAISidebar() {
+    const { formatMessage } = useIntl();
+
+    return (
+        <SidebarContent
+            className={'bcs-BoxAISidebar'}
+            sidebarView={SIDEBAR_VIEW_BOXAI}
+            title={formatMessage(messages.sidebarBoxAITitle)}
+        >
+            <div className="bcs-BoxAISidebar-content" />
+        </SidebarContent>
+    );
+}
+
+export { BoxAISidebar as BoxAISidebarComponent };
+
+const BoxAISidebarDefaultExport: typeof withAPIContext = flow([
+    withLogger(ORIGIN_BOXAI_SIDEBAR),
+    withErrorBoundary(ORIGIN_BOXAI_SIDEBAR),
+    withAPIContext,
+])(BoxAISidebar);
+
+export default BoxAISidebarDefaultExport;

src/elements/content-sidebar/ContentSidebar.js

@@ -29,6 +29,7 @@ import {
 import { withLogger } from '../common/logger';
 
 import type { ActivitySidebarProps } from './ActivitySidebar';
+import type { BoxAISidebarProps } from './BoxAISidebar';
 import type { DetailsSidebarProps } from './DetailsSidebar';
 import type { DocGenSidebarProps } from './DocGenSidebar/DocGenSidebar';
 import type { MetadataSidebarProps } from './MetadataSidebar';
@@ -50,6 +51,7 @@ type Props = {
     activitySidebarProps: ActivitySidebarProps,
     additionalTabs?: Array<AdditionalSidebarTab>,
     apiHost: string,
+    boxAISidebarProps: BoxAISidebarProps,
     cache?: APICache,
     className: string,
     clientName: string,
@@ -107,6 +109,7 @@ class ContentSidebar extends React.Component<Props, State> {
     static defaultProps = {
         activitySidebarProps: {},
         apiHost: DEFAULT_HOSTNAME_API,
+        boxAISidebarProps: {},
         className: '',
         clientName: CLIENT_NAME_CONTENT_SIDEBAR,
         defaultView: '',
@@ -333,6 +336,7 @@ class ContentSidebar extends React.Component<Props, State> {
         const {
             activitySidebarProps,
             additionalTabs,
+            boxAISidebarProps,
             className,
             currentUser,
             defaultView,
@@ -372,6 +376,7 @@ class ContentSidebar extends React.Component<Props, State> {
                             <Sidebar
                                 activitySidebarProps={activitySidebarProps}
                                 additionalTabs={additionalTabs}
+                                boxAISidebarProps={boxAISidebarProps}
                                 className={className}
                                 currentUser={currentUser}
                                 detailsSidebarProps={detailsSidebarProps}

src/elements/content-sidebar/Sidebar.js

@@ -24,6 +24,7 @@ import type { ActivitySidebarProps } from './ActivitySidebar';
 import type { DetailsSidebarProps } from './DetailsSidebar';
 import type { DocGenSidebarProps } from './DocGenSidebar/DocGenSidebar';
 import type { MetadataSidebarProps } from './MetadataSidebar';
+import type { BoxAISidebarProps } from './BoxAISidebar';
 import type { VersionsSidebarProps } from './versions';
 import type { AdditionalSidebarTab } from './flowTypes';
 import type { MetadataEditor } from '../../common/types/metadata';
@@ -36,6 +37,7 @@ type Props = {
     activitySidebarProps: ActivitySidebarProps,
     additionalTabs?: Array<AdditionalSidebarTab>,
     api: API,
+    boxAISidebarProps: BoxAISidebarProps,
     className: string,
     currentUser?: User,
     currentUserError?: Errors,
@@ -247,6 +249,7 @@ class Sidebar extends React.Component<Props, State> {
         const {
             activitySidebarProps,
             additionalTabs,
+            boxAISidebarProps,
             className,
             currentUser,
             currentUserError,
@@ -268,6 +271,7 @@ class Sidebar extends React.Component<Props, State> {
             versionsSidebarProps,
         }: Props = this.props;
         const isOpen = this.isForcedSet() ? this.isForcedOpen() : !!isDefaultOpen;
+        const hasBoxAI = SidebarUtils.canHaveBoxAISidebar(this.props);
         const hasActivity = SidebarUtils.canHaveActivitySidebar(this.props);
         const hasDetails = SidebarUtils.canHaveDetailsSidebar(this.props);
         const hasMetadata = SidebarUtils.shouldRenderMetadataSidebar(this.props, metadataEditors);
@@ -292,6 +296,7 @@ class Sidebar extends React.Component<Props, State> {
                                 fileId={fileId}
                                 hasActivity={hasActivity}
                                 hasAdditionalTabs={hasAdditionalTabs}
+                                hasBoxAI={hasBoxAI}
                                 hasDetails={hasDetails}
                                 hasMetadata={hasMetadata}
                                 hasSkills={hasSkills}
@@ -301,6 +306,7 @@ class Sidebar extends React.Component<Props, State> {
                         )}
                         <SidebarPanels
                             activitySidebarProps={activitySidebarProps}
+                            boxAISidebarProps={boxAISidebarProps}
                             currentUser={currentUser}
                             currentUserError={currentUserError}
                             elementId={this.id}
@@ -311,6 +317,7 @@ class Sidebar extends React.Component<Props, State> {
                             getPreview={getPreview}
                             getViewer={getViewer}
                             hasActivity={hasActivity}
+                            hasBoxAI={hasBoxAI}
                             hasDetails={hasDetails}
                             hasDocGen={docGenSidebarProps.isDocGenTemplate}
                             hasMetadata={hasMetadata}

src/elements/content-sidebar/SidebarNav.js

@@ -7,6 +7,8 @@
 import * as React from 'react';
 import { injectIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
+import { BoxAiLogo } from '@box/blueprint-web-assets/icons/Logo';
+import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import AdditionalTabs from './additional-tabs';
 import DocGenIcon from '../../icon/fill/DocGenIcon';
 import IconChatRound from '../../icons/general/IconChatRound';
@@ -20,9 +22,10 @@ import SidebarToggle from './SidebarToggle';
 import messages from '../common/messages';
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 import {
-    SIDEBAR_VIEW_DOCGEN,
     SIDEBAR_VIEW_ACTIVITY,
+    SIDEBAR_VIEW_BOXAI,
     SIDEBAR_VIEW_DETAILS,
+    SIDEBAR_VIEW_DOCGEN,
     SIDEBAR_VIEW_METADATA,
     SIDEBAR_VIEW_SKILLS,
 } from '../../constants';
@@ -36,6 +39,7 @@ type Props = {
     fileId: string,
     hasActivity: boolean,
     hasAdditionalTabs: boolean,
+    hasBoxAI: boolean,
     hasDetails: boolean,
     hasDocGen?: boolean,
     hasMetadata: boolean,
@@ -51,6 +55,7 @@ const SidebarNav = ({
     fileId,
     hasActivity,
     hasAdditionalTabs,
+    hasBoxAI,
     hasDetails,
     hasMetadata,
     hasSkills,
@@ -65,6 +70,16 @@ const SidebarNav = ({
         <div className="bcs-SidebarNav" aria-label={intl.formatMessage(messages.sidebarNavLabel)}>
             <div className="bcs-SidebarNav-tabs">
                 <SidebarNavTablist elementId={elementId} isOpen={isOpen} onNavigate={onNavigate}>
+                    {hasBoxAI && (
+                        <SidebarNavButton
+                            data-resin-target={SIDEBAR_NAV_TARGETS.BOXAI}
+                            data-testid="sidebarboxai"
+                            sidebarView={SIDEBAR_VIEW_BOXAI}
+                            tooltip={intl.formatMessage(messages.sidebarBoxAITitle)}
+                        >
+                            <BoxAiLogo height={Size5} width={Size5} />
+                        </SidebarNavButton>
+                    )}
                     {hasActivity && (
                         <SidebarNavButton
                             data-resin-target={SIDEBAR_NAV_TARGETS.ACTIVITY}