box-ui-elements 24.0.0-beta.2 → 24.0.0-beta.4

package/src/elements/content-explorer/ContentExplorer.tsx

@@ -100,6 +100,7 @@ import '../common/fonts.scss';
 import '../common/base.scss';
 import '../common/modal.scss';
 import './ContentExplorer.scss';
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 
 const GRID_VIEW_MAX_COLUMNS = 7;
 const GRID_VIEW_MIN_COLUMNS = 1;
@@ -1974,4 +1975,6 @@ class ContentExplorer extends Component<ContentExplorerProps, State> {
 }
 
 export { ContentExplorer as ContentExplorerComponent };
-export default flow([makeResponsive, withFeatureConsumer, withFeatureProvider])(ContentExplorer);
+export default flow([makeResponsive, withFeatureConsumer, withFeatureProvider, withBlueprintModernization])(
+    ContentExplorer,
+);

package/src/elements/content-explorer/stories/tests/ContentExplorer-visual.stories.js

@@ -28,6 +28,12 @@ export const basic = {
     },
 };
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const openExistingFolder = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);

package/src/elements/content-picker/ContentPicker.js

@@ -9,6 +9,7 @@ import React, { Component } from 'react';
 import type { Node } from 'react';
 import classNames from 'classnames';
 import debounce from 'lodash/debounce';
+import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import uniqueid from 'lodash/uniqueId';
 import noop from 'lodash/noop';
@@ -18,6 +19,8 @@ import UploadDialog from '../common/upload-dialog';
 import CreateFolderDialog from '../common/create-folder-dialog';
 import Internationalize from '../common/Internationalize';
 import makeResponsive from '../common/makeResponsive';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 // $FlowFixMe TypeScript file
 import ThemingStyles from '../common/theming';
 import Pagination from '../../features/pagination';
@@ -1345,4 +1348,4 @@ class ContentPicker extends Component<Props, State> {
 }
 
 export { ContentPicker as ContentPickerComponent };
-export default makeResponsive(ContentPicker);
+export default flow([makeResponsive, withBlueprintModernization])(ContentPicker);

package/src/elements/content-picker/stories/tests/ContentPicker-visual.stories.js

@@ -8,6 +8,12 @@ import { DEFAULT_HOSTNAME_API } from '../../../../constants';
 
 export const basic = {};
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const withPagination = {
     args: {
         initialPageSize: 1,

package/src/elements/content-preview/ContentPreview.js

@@ -35,6 +35,8 @@ import { withLogger } from '../common/logger';
 import { PREVIEW_FIELDS_TO_FETCH } from '../../utils/fields';
 import { mark } from '../../utils/performance';
 import { withFeatureConsumer, withFeatureProvider } from '../common/feature-checking';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import { EVENT_JS_READY } from '../common/logger/constants';
 import ReloadNotification from './ReloadNotification';
 import API from '../../api';
@@ -1418,6 +1420,7 @@ export default flow([
     withNavRouter,
     withFeatureConsumer,
     withFeatureProvider,
+    withBlueprintModernization,
     withLogger(ORIGIN_CONTENT_PREVIEW),
     withErrorBoundary(ORIGIN_CONTENT_PREVIEW),
 ])(ContentPreview);

package/src/elements/content-preview/stories/tests/ContentPreview-visual.stories.js

@@ -30,6 +30,12 @@ export const basic = {
     },
 };
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const closeModal = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);
@@ -92,7 +98,7 @@ export const hoverOverCitation = {
 
         expect(modal.getByText('Based on:')).toBeInTheDocument();
 
-        const citations = await modal.getAllByTestId('content-answers-citation-status')
+        const citations = await modal.getAllByTestId('content-answers-citation-status');
         const citation = citations[0];
         expect(citation).toBeInTheDocument();
         await userEvent.hover(citation);

package/src/elements/content-sharing/ContentSharing.js

@@ -9,6 +9,8 @@
 import 'regenerator-runtime/runtime';
 import * as React from 'react';
 import API from '../../api';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import SharingModal from './SharingModal';
 import { CLIENT_NAME_CONTENT_SHARING, DEFAULT_HOSTNAME_API } from '../../constants';
 import type { ItemType, StringMap } from '../../common/types/core';
@@ -118,4 +120,5 @@ function ContentSharing({
     );
 }
 
-export default ContentSharing;
+export { ContentSharing as ContentSharingComponent };
+export default withBlueprintModernization(ContentSharing);

package/src/elements/content-sidebar/ContentSidebar.js

@@ -21,6 +21,8 @@ import { EVENT_JS_READY } from '../common/logger/constants';
 import { mark } from '../../utils/performance';
 import { SIDEBAR_FIELDS_TO_FETCH, SIDEBAR_FIELDS_TO_FETCH_ARCHIVE } from '../../utils/fields';
 import { withErrorBoundary } from '../common/error-boundary';
+// $FlowFixMe
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import {
     isFeatureEnabled as isFeatureEnabledInContext,
     withFeatureConsumer,
@@ -432,6 +434,7 @@ export { ContentSidebar as ContentSidebarComponent };
 export default flow([
     withFeatureConsumer,
     withFeatureProvider,
+    withBlueprintModernization,
     withLogger(ORIGIN_CONTENT_SIDEBAR),
     withErrorBoundary(ORIGIN_CONTENT_SIDEBAR),
 ])(ContentSidebar);

package/src/elements/content-sidebar/stories/tests/ContentSidebar-visual.stories.tsx

@@ -23,6 +23,12 @@ export default {
     },
 };
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const ContentSidebarWithBoxAIDisabled: StoryObj<typeof BoxAISidebar> = {
     args: {
         features: {

package/src/elements/content-uploader/ContentUploader.tsx

@@ -2,6 +2,7 @@ import 'regenerator-runtime/runtime';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import cloneDeep from 'lodash/cloneDeep';
+import flow from 'lodash/flow';
 import getProp from 'lodash/get';
 import noop from 'lodash/noop';
 import uniqueid from 'lodash/uniqueId';
@@ -14,6 +15,7 @@ import API from '../../api';
 import Browser from '../../utils/Browser';
 import Internationalize from '../common/Internationalize';
 import makeResponsive from '../common/makeResponsive';
+import { withBlueprintModernization } from '../common/withBlueprintModernization';
 import ThemingStyles, { Theme } from '../common/theming';
 import FolderUpload from '../../api/uploads/FolderUpload';
 import { getTypedFileId, getTypedFolderId } from '../../utils/file';
@@ -1323,5 +1325,5 @@ class ContentUploader extends Component<ContentUploaderProps, State> {
     }
 }
 
-export default makeResponsive(ContentUploader);
+export default flow([makeResponsive, withBlueprintModernization])(ContentUploader);
 export { ContentUploader as ContentUploaderComponent, CHUNKED_UPLOAD_MIN_SIZE_BYTES };

package/src/elements/content-uploader/stories/tests/ContentUploader-visual.stories.js

@@ -23,6 +23,12 @@ export const basic = {
     },
 };
 
+export const Modernization = {
+    args: {
+        enableModernizedComponents: true,
+    },
+};
+
 export const singleUpload = {
     play: async ({ canvasElement }) => {
         const canvas = within(canvasElement);

package/src/features/classification/applied-by-ai-classification-reason/AppliedByAiClassificationReason.scss

@@ -0,0 +1,29 @@
+$reason-font-size: 13px; // Overriding Blueprint to match current sidebar styles
+
+.AppliedByAiClassificationReason {
+    .AppliedByAiClassificationReason-headerText {
+        font-size: $reason-font-size;
+    }
+
+    .AppliedByAiClassificationReason-answer {
+        font-size: $reason-font-size;
+        line-height: var(--body-default-line-height);
+    }
+
+    .AppliedByAiClassificationReason-references {
+        > * > * {
+            font-size: $reason-font-size;
+        }
+    }
+}
+
+.AppliedByAiClassificationReason-header {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    margin: 0 0 var(--space-2);
+}
+
+.AppliedByAiClassificationReason-references {
+    margin-top: var(--space-2);
+}

package/src/features/classification/applied-by-ai-classification-reason/AppliedByAiClassificationReason.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { AnswerContent, References } from '@box/box-ai-content-answers';
+import { Card, Text } from '@box/blueprint-web';
+import BoxAIIconColor from '@box/blueprint-web-assets/icons/Logo/BoxAiLogo';
+import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { FormattedDate, FormattedMessage } from 'react-intl';
+
+import { isValidDate } from '../../../utils/datetime';
+import type { AiClassificationReason } from '../types';
+
+import messages from './messages';
+
+import './AppliedByAiClassificationReason.scss';
+
+export type AppliedByAiClassificationReasonProps = AiClassificationReason;
+
+const AppliedByAiClassificationReason = ({ answer, modifiedAt, citations }: AppliedByAiClassificationReasonProps) => {
+    const modifiedDate = new Date(modifiedAt);
+    const isModifiedDateAvailable = Boolean(modifiedAt) && isValidDate(modifiedDate);
+
+    const formattedModifiedAt = isModifiedDateAvailable && (
+        <FormattedDate value={modifiedDate} month="long" year="numeric" day="numeric" />
+    );
+
+    return (
+        <Card className="AppliedByAiClassificationReason">
+            <h3 className="AppliedByAiClassificationReason-header">
+                <BoxAIIconColor data-testid="box-ai-icon" height={Size5} width={Size5} />
+                <Text
+                    className="AppliedByAiClassificationReason-headerText"
+                    as="span"
+                    color="textOnLightSecondary"
+                    variant="bodyDefaultSemibold"
+                >
+                    {isModifiedDateAvailable ? (
+                        <FormattedMessage
+                            {...messages.appliedByBoxAiOnDate}
+                            values={{ modifiedAt: formattedModifiedAt }}
+                        />
+                    ) : (
+                        <FormattedMessage {...messages.appliedByBoxAi} />
+                    )}
+                </Text>
+            </h3>
+            <AnswerContent className="AppliedByAiClassificationReason-answer" answer={answer} />
+            {citations && (
+                <div className="AppliedByAiClassificationReason-references">
+                    <References citations={citations} />
+                </div>
+            )}
+        </Card>
+    );
+};
+
+export default AppliedByAiClassificationReason;

package/src/features/classification/applied-by-ai-classification-reason/__tests__/AppliedByAiClassificationReason.test.tsx

@@ -0,0 +1,105 @@
+import * as React from 'react';
+
+import { render, screen } from '../../../../test-utils/testing-library';
+import AppliedByAiClassificationReason from '../AppliedByAiClassificationReason';
+
+import messages from '../messages';
+
+describe('AppliedByAiClassificationReason', () => {
+    let defaultProps;
+    let modifiedAtDisplayDate;
+
+    beforeEach(() => {
+        defaultProps = {
+            answer: 'This file is marked as Internal Only because it contains non-public financial results.',
+            modifiedAt: '2024-01-15T10:30:00Z',
+        };
+        modifiedAtDisplayDate = 'January 15, 2024';
+    });
+
+    const renderComponent = (props = {}) => {
+        return render(<AppliedByAiClassificationReason {...defaultProps} {...props} />);
+    };
+
+    test('should render AI classification reason with icon, applied date, and reasoning', () => {
+        const expectedIconSize = '1.25rem';
+
+        renderComponent();
+
+        const boxAiIcon = screen.getByTestId('box-ai-icon');
+        const appliedByWithDate = screen.getByRole('heading', {
+            level: 3,
+            name: messages.appliedByBoxAiOnDate.defaultMessage.replace('{modifiedAt}', modifiedAtDisplayDate),
+        });
+        const reasonText = screen.getByText(defaultProps.answer);
+        const citationsLabel = screen.queryByTestId('content-answers-references-label');
+        const noReferencesIconContainer = screen.queryByTestId('content-answers-references-no-references');
+
+        expect(boxAiIcon).toBeVisible();
+        expect(boxAiIcon).toHaveAttribute('height', expectedIconSize);
+        expect(boxAiIcon).toHaveAttribute('width', expectedIconSize);
+        expect(appliedByWithDate).toBeVisible();
+        expect(reasonText).toBeVisible();
+        // Assert none of the Reference components are rendered
+        expect(citationsLabel).toBeNull();
+        expect(noReferencesIconContainer).toBeNull();
+    });
+
+    test('should render no references icon when an empty citations array provided', () => {
+        renderComponent({ citations: [] });
+
+        const noReferencesIconContainer = screen.queryByTestId('content-answers-references-no-references');
+        const noReferencesIcon = noReferencesIconContainer.querySelector('svg');
+
+        expect(noReferencesIcon).toBeVisible();
+    });
+
+    test('should render references when non-empty citations are provided', () => {
+        const expectedCitationsCount = 5;
+        const expectedCitations = Array.from({ length: expectedCitationsCount }, () => ({
+            content: 'file content for citation',
+            fileId: 'fileId',
+            location: 'cited location',
+            title: 'file title',
+        }));
+
+        renderComponent({ citations: expectedCitations });
+
+        const citationsLabel = screen.queryByTestId('content-answers-references-label');
+        const citationElements = screen.getAllByTestId('content-answers-citation-status');
+
+        expect(citationsLabel).toBeVisible();
+        expect(citationElements).toHaveLength(expectedCitationsCount);
+    });
+
+    test.each([null, undefined, 'invalid date str'])(
+        'should render applied by without date when modifiedAt is invalid: %s',
+        invalidModifiedAt => {
+            renderComponent({ modifiedAt: invalidModifiedAt });
+
+            const appliedByWithoutDate = screen.getByRole('heading', {
+                level: 3,
+                name: messages.appliedByBoxAi.defaultMessage,
+            });
+
+            expect(appliedByWithoutDate).toBeVisible();
+        },
+    );
+
+    test('should render long answer text correctly', () => {
+        const longAnswer = 'A'.repeat(1000);
+        renderComponent({ answer: longAnswer });
+
+        expect(screen.getByText(longAnswer)).toBeVisible();
+    });
+
+    test('should render answer with special and unicode characters correctly', () => {
+        const nonPlainAnswer = 'Answer with special characters and unicode !@#$%^&*()_+-=[]{}|;:,.<>? 🚀🌟🎉中文日本語';
+
+        renderComponent({ answer: nonPlainAnswer });
+
+        const reasonText = screen.getByText(nonPlainAnswer);
+
+        expect(reasonText).toBeVisible();
+    });
+});

package/src/features/classification/applied-by-ai-classification-reason/messages.ts

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    appliedByBoxAi: {
+        defaultMessage: 'Box AI',
+        description:
+            'Title of the card that shows the reason why the AI classification was applied when no date is available.',
+        id: 'boxui.classification.appliedByBoxAi',
+    },
+    appliedByBoxAiOnDate: {
+        defaultMessage: 'Box AI on {modifiedAt}',
+        description:
+            'Title of the card that shows the reason why the AI classification was applied on a specific date.',
+        id: 'boxui.classification.appliedByBoxAiOnDate',
+    },
+});
+
+export default messages;

package/src/features/classification/types.ts

@@ -0,0 +1,7 @@
+import type { CitationType } from '@box/box-ai-content-answers';
+
+export type AiClassificationReason = {
+    answer: string;
+    modifiedAt?: string;
+    citations?: CitationType[];
+};