box-ui-elements 16.0.0-beta.9 → 16.0.0

package/src/features/classification/security-controls/utils.js

@@ -2,10 +2,10 @@
 import * as React from 'react';
 import getProp from 'lodash/get';
 import isNil from 'lodash/isNil';
+import { FormattedMessage } from 'react-intl';
 
 import type { Controls, MessageItem } from '../flowTypes';
 
-import FormattedCompMessage from '../../../components/i18n/FormattedCompMessage';
 import Link from '../../../components/link/Link';
 import appRestrictionsMessageMap from './appRestrictionsMessageMap';
 import downloadRestrictionsMessageMap from './downloadRestrictionsMessageMap';
@@ -100,23 +100,19 @@ const getWatermarkingMessages = (controls: Controls): Array<MessageItem> => {
     const items = [];
     const isWatermarkEnabled = getProp(controls, `${WATERMARK}.enabled`, false);
     if (isWatermarkEnabled) {
-        const formattedCompMessage = (
-            <FormattedCompMessage
-                id="boxui.securityControls.watermarkingAppliedWithLink"
-                description="Bullet point that summarizes watermarking applied to classification"
-            >
-                Watermarking will be applied, click{' '}
+        const formattedMessages = (
+            <>
+                <FormattedMessage {...messages.watermarkingApplied} />
                 <Link
                     className="support-link"
                     href="https://support.box.com/hc/en-us/articles/360044195253"
                     target="_blank"
                 >
-                    here
-                </Link>{' '}
-                more details on Watermarking
-            </FormattedCompMessage>
+                    <FormattedMessage {...messages.linkForMoreDetails} />
+                </Link>
+            </>
         );
-        items.push({ message: formattedCompMessage });
+        items.push({ message: formattedMessages });
     }
 
     return items;

package/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarLogo.test.js.snap

@@ -40,6 +40,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebar render 1`] = `
       Object {
         "formatDate": [Function],
         "formatMessage": [Function],
+        "formatNumber": [Function],
         "formatRelativeTime": [Function],
       }
     }
@@ -201,6 +202,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebar render 2`] = `
       Object {
         "formatDate": [Function],
         "formatMessage": [Function],
+        "formatNumber": [Function],
         "formatRelativeTime": [Function],
       }
     }

package/src/features/content-explorer/content-explorer/ContentExplorer.js

@@ -19,6 +19,8 @@ class ContentExplorer extends Component {
     static propTypes = {
         /** Props for the action buttons container */
         actionButtonsProps: PropTypes.object,
+        /** Props for breadcrumbs */
+        breadcrumbProps: PropTypes.object,
         /** Props for the cancel button */
         cancelButtonProps: PropTypes.object,
         /** Props for the choose button */
@@ -387,6 +389,7 @@ class ContentExplorer extends Component {
     render() {
         const {
             actionButtonsProps,
+            breadcrumbProps,
             cancelButtonProps,
             chooseButtonProps,
             chooseButtonText,
@@ -470,6 +473,7 @@ class ContentExplorer extends Component {
                 {...contentExplorerProps}
             >
                 <ContentExplorerHeaderActions
+                    breadcrumbProps={breadcrumbProps}
                     contentExplorerMode={contentExplorerMode}
                     customInput={customInput}
                     foldersPath={foldersPath}

package/src/features/content-explorer/content-explorer/ContentExplorer.scss

@@ -112,4 +112,8 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+
+    .content-explorer-breadcrumbs-up-button {
+        display: none;
+    }
 }

package/src/features/content-explorer/content-explorer/ContentExplorerBreadcrumbs.js

@@ -3,15 +3,16 @@ import React from 'react';
 import { injectIntl } from 'react-intl';
 
 import Button from '../../../components/button';
-import PlainButton from '../../../components/plain-button';
 import Breadcrumb from '../../../components/breadcrumb';
 import IconChevron from '../../../icons/general/IconChevron';
 import IconAllFiles from '../../../icons/general/IconAllFiles';
+import PlainButton from '../../../components/plain-button';
 
 import { FoldersPathPropType } from '../prop-types';
 import messages from '../messages';
 
 const ContentExplorerBreadcrumbs = ({
+    breadcrumbProps,
     foldersPath,
     intl: { formatMessage },
     isUpButtonDisabled = false,
@@ -28,23 +29,25 @@ const ContentExplorerBreadcrumbs = ({
         >
             <IconChevron direction="left" size="6px" color="#333" />
         </Button>
-        <Breadcrumb label={formatMessage(messages.breadcrumb)}>
+        <Breadcrumb label={formatMessage(messages.breadcrumb)} {...breadcrumbProps}>
             {foldersPath.map((folder, i) => (
-                <PlainButton
-                    className="lnk"
-                    key={folder.id}
-                    title={folder.name}
-                    onClick={event => onBreadcrumbClick(i, event)}
-                >
-                    {i === 0 && <IconAllFiles />}
-                    <span>{folder.name}</span>
-                </PlainButton>
+                <div key={folder.id} className="lnk">
+                    <PlainButton
+                        data-testid="breadcrumb-lnk"
+                        onClick={event => onBreadcrumbClick(i, event)}
+                        title={folder.name}
+                    >
+                        {i === 0 && <IconAllFiles />}
+                        <span>{folder.name}</span>
+                    </PlainButton>
+                </div>
             ))}
         </Breadcrumb>
     </div>
 );
 
 ContentExplorerBreadcrumbs.propTypes = {
+    breadcrumbProps: PropTypes.object,
     foldersPath: FoldersPathPropType.isRequired,
     intl: PropTypes.any,
     isUpButtonDisabled: PropTypes.bool,

package/src/features/content-explorer/content-explorer/ContentExplorerHeaderActions.js

@@ -6,7 +6,7 @@ import ContentExplorerSearch from './ContentExplorerSearch';
 import ContentExplorerNewFolderButton from './ContentExplorerNewFolderButton';
 import ContentExplorerBreadcrumbs from './ContentExplorerBreadcrumbs';
 
-import { ContentExplorerModePropType, FoldersPathPropType } from '../prop-types';
+import { BreadcrumbPropType, ContentExplorerModePropType, FoldersPathPropType } from '../prop-types';
 import messages from '../messages';
 
 const SEARCH_RESULTS_FOLDER_ID = 'search_results_id';
@@ -15,6 +15,7 @@ const isSearchResultsFolder = folder => folder && folder.id === SEARCH_RESULTS_F
 
 class ContentExplorerHeaderActions extends Component {
     static propTypes = {
+        breadcrumbProps: BreadcrumbPropType,
         children: PropTypes.node,
         contentExplorerMode: ContentExplorerModePropType.isRequired,
         customInput: PropTypes.func,
@@ -147,6 +148,7 @@ class ContentExplorerHeaderActions extends Component {
 
     render() {
         const {
+            breadcrumbProps,
             children,
             contentExplorerMode,
             customInput: CustomInput,
@@ -184,6 +186,7 @@ class ContentExplorerHeaderActions extends Component {
                     {children}
                 </div>
                 <ContentExplorerBreadcrumbs
+                    breadcrumbProps={breadcrumbProps}
                     foldersPath={foldersPath}
                     isUpButtonDisabled={foldersPath.length <= 1 && !isInSearchMode}
                     onUpButtonClick={this.handleBreadcrumbsUpButtonClick}

package/src/features/content-explorer/content-explorer/__tests__/ContentExplorerBreadcrumbs.test.js

@@ -29,7 +29,7 @@ describe('features/content-explorer/content-explorer/ContentExplorerBreadcrumbs'
             expect(wrapper.find('Breadcrumb').length).toBe(1);
             expect(wrapper.find('IconAllFiles').length).toBe(1);
 
-            const breadcrumbs = wrapper.find('.lnk');
+            const breadcrumbs = wrapper.find('[data-testid="breadcrumb-lnk"]');
 
             expect(breadcrumbs.length).toBe(foldersPath.length);
 
@@ -76,7 +76,7 @@ describe('features/content-explorer/content-explorer/ContentExplorerBreadcrumbs'
             });
 
             wrapper
-                .find('.lnk')
+                .find('[data-testid="breadcrumb-lnk"]')
                 .at(breadcrumbIndex)
                 .simulate('click', event);
 

package/src/features/content-explorer/content-explorer-modal/ContentExplorerModal.js

@@ -2,13 +2,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
 
+import ContentExplorer from '../content-explorer';
 import { Modal } from '../../../components/modal';
 
-import ContentExplorer from '../content-explorer';
+import type { BreadcrumbProps } from '../../../components/breadcrumb/Breadcrumb';
 
 import './ContentExplorerModal.scss';
 
 type Props = {
+    breadcrumbProps?: BreadcrumbProps,
     className?: string,
     customInput?: React.ComponentType<any>,
     description?: string,
@@ -21,6 +23,7 @@ type Props = {
 };
 
 const ContentExplorerModal = ({
+    breadcrumbProps = {},
     className = '',
     customInput,
     title = '',
@@ -42,6 +45,7 @@ const ContentExplorerModal = ({
     >
         {description}
         <ContentExplorer
+            breadcrumbProps={breadcrumbProps}
             customInput={customInput}
             isResponsive={isResponsive}
             onCancelButtonClick={onRequestClose}

package/src/features/content-explorer/content-explorer-modal/__tests__/__snapshots__/ContentExplorerModal.test.js.snap

@@ -14,6 +14,7 @@ exports[`features/content-explorer/content-explorer-modal/ContentExplorerModal r
 >
   <ContentExplorer
     actionButtonsProps={Object {}}
+    breadcrumbProps={Object {}}
     cancelButtonProps={Object {}}
     chooseButtonProps={Object {}}
     className=""

package/src/features/content-explorer/content-explorer-modal-container/ContentExplorerModalContainer.js

@@ -2,12 +2,14 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classNames from 'classnames';
 
-import { ContentExplorerModePropType, FoldersPathPropType, ItemsPropType } from '../prop-types';
+import { BreadcrumbPropType, ContentExplorerModePropType, FoldersPathPropType, ItemsPropType } from '../prop-types';
 import ContentExplorerModal from '../content-explorer-modal';
 import NewFolderModal from '../new-folder-modal';
 
 class ContentExplorerModalContainer extends Component {
     static propTypes = {
+        /** Breadcrumb component options */
+        breadcrumbProps: BreadcrumbPropType,
         /** Adds class name. */
         className: PropTypes.string,
         /** Any extra items in the header to the right of the search input (and new folder button) */
@@ -161,6 +163,7 @@ class ContentExplorerModalContainer extends Component {
 
     render() {
         const {
+            breadcrumbProps,
             className,
             headerActionsAccessory,
             modalTitle,
@@ -199,6 +202,7 @@ class ContentExplorerModalContainer extends Component {
         return (
             <div className={classNames('content-explorer-modal-container', className)}>
                 <ContentExplorerModal
+                    breadcrumbProps={breadcrumbProps}
                     className={isNewFolderModalOpen ? 'hidden' : ''}
                     headerActionsAccessory={headerActionsAccessory}
                     title={modalTitle}

package/src/features/content-explorer/prop-types.js

@@ -43,7 +43,15 @@ const ItemsPropType = PropTypes.arrayOf(ItemOrPlaceholderPropType);
 
 const ItemsMapPropType = PropTypes.objectOf(ItemPropType);
 
+const BreadcrumbPropType = PropTypes.shape({
+    className: PropTypes.string,
+    itemsBeforeOverflow: PropTypes.number,
+    overflowIcon: PropTypes.node,
+    threshold: PropTypes.number,
+});
+
 export {
+    BreadcrumbPropType,
     ContentExplorerModePropType,
     FolderPropType,
     FoldersPathPropType,

package/src/features/content-insights/CompactCount.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { injectIntl, IntlShape } from 'react-intl';
+import classNames from 'classnames';
+
+import { formatCount } from './numberUtils';
+
+interface Props {
+    className?: string;
+    count: number;
+    intl: IntlShape;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}
+
+function CompactCount({ className, count, intl, ...rest }: Props) {
+    return (
+        <span className={classNames('CompactCount', className)} {...rest}>
+            {formatCount(count, intl)}
+        </span>
+    );
+}
+
+export default injectIntl(CompactCount);

package/src/features/content-insights/ContentAnalyticsErrorState.scss

@@ -0,0 +1,17 @@
+@import '../../styles/variables';
+
+.ContentAnalyticsErrorState {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.ContentAnalyticsErrorState-text,
+.ContentAnalyticsErrorState-text--permission {
+    width: 100%;
+    margin-top: $bdl-grid-unit * 5;
+    font-size: $bdl-fontSize--dejaBlue;
+    text-align: center;
+}

package/src/features/content-insights/ContentAnalyticsErrorState.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import MetricsReview56 from '../../illustration/MetricsReview56';
+import messages from './messages';
+import { ResponseError } from './types';
+
+import './ContentAnalyticsErrorState.scss';
+
+interface Props {
+    error?: ResponseError;
+}
+
+const ContentAnalyticsErrorState = ({ error }: Props) => {
+    const renderErrorMessage = (responseError?: ResponseError) => {
+        const isPermissionError = !!responseError && responseError.status === 403;
+
+        if (isPermissionError) {
+            return (
+                <div
+                    className="ContentAnalyticsErrorState-text--permission"
+                    data-testid="ContentAnalyticsErrorState-text--permission"
+                >
+                    <FormattedMessage {...messages.contentAnalyticsPermissionError} />
+                </div>
+            );
+        }
+
+        return (
+            <div className="ContentAnalyticsErrorState-text" data-testid="ContentAnalyticsErrorState-text">
+                <FormattedMessage {...messages.contentAnalyticsErrorText} />
+            </div>
+        );
+    };
+
+    return (
+        <div className="ContentAnalyticsErrorState" data-testid="ContentAnalyticsErrorState">
+            <MetricsReview56 data-testid="ContentAnalyticsErrorState-image" />
+            {renderErrorMessage(error)}
+        </div>
+    );
+};
+
+export default ContentAnalyticsErrorState;

package/src/features/content-insights/ContentInsightsSummary.scss

@@ -0,0 +1,12 @@
+@import '../../styles/variables';
+
+.ContentInsightsSummary {
+    display: flex;
+    flex-direction: column;
+
+    .OpenContentInsightsButton {
+        margin-top: $bdl-grid-unit * 5;
+        margin-right: 0;
+        margin-left: 0;
+    }
+}

package/src/features/content-insights/ContentInsightsSummary.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+import ContentAnalyticsErrorState from './ContentAnalyticsErrorState';
+import ContentInsightsSummaryGhostState from './ContentInsightsSummaryGhostState';
+import GraphCardPreviewsSummary from './GraphCardPreviewsSummary';
+import OpenContentInsightsButton from './OpenContentInsightsButton';
+import { GraphData, ResponseError } from './types';
+
+import './ContentInsightsSummary.scss';
+
+interface Props {
+    graphData: GraphData;
+    error?: ResponseError;
+    isLoading: boolean;
+    onClick: () => void;
+    previousPeriodCount: number;
+    totalCount: number;
+}
+
+const ContentInsightsSummary = ({ error, graphData, isLoading, previousPeriodCount, onClick, totalCount }: Props) => {
+    const renderContentAnalyticsSummary = () => {
+        if (error) {
+            return <ContentAnalyticsErrorState error={error} />;
+        }
+
+        if (isLoading) {
+            return <ContentInsightsSummaryGhostState />;
+        }
+
+        return (
+            <>
+                <GraphCardPreviewsSummary
+                    graphData={graphData}
+                    previousPeriodCount={previousPeriodCount}
+                    totalCount={totalCount}
+                />
+                <OpenContentInsightsButton onClick={onClick} />
+            </>
+        );
+    };
+
+    return <div className="ContentInsightsSummary">{renderContentAnalyticsSummary()}</div>;
+};
+
+export default ContentInsightsSummary;

package/src/features/content-insights/ContentInsightsSummaryGhostState.scss

@@ -0,0 +1,9 @@
+@import '../../styles/variables';
+
+.ContentInsightsSummaryGhostState-cta {
+    margin-top: $bdl-grid-unit * 5;
+}
+
+.ContentInsightsSummaryGhostState-ctaButton {
+    margin: 0;
+}

package/src/features/content-insights/ContentInsightsSummaryGhostState.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import Ghost from '../../components/ghost';
+
+import GraphCardGhostState from './GraphCardGhostState';
+
+import './ContentInsightsSummaryGhostState.scss';
+
+const ContentInsightsSummaryGhostState = () => (
+    <div className="ContentInsightsSummaryGhostState">
+        <GraphCardGhostState />
+        <div className="ContentInsightsSummaryGhostState-cta">
+            <Ghost borderRadius={6} className="ContentInsightsSummaryGhostState-ctaButton" height={32} />
+        </div>
+    </div>
+);
+
+export default ContentInsightsSummaryGhostState;

package/src/features/content-insights/GraphCardGhostState.scss

@@ -0,0 +1,18 @@
+@import '../../styles/variables';
+
+.GraphCardGhostState {
+    display: flex;
+    flex-direction: column;
+}
+
+.GraphCardGhostState-header {
+    display: flex;
+    flex: 0 0 70px;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.GraphCardGhostState-headlinePill {
+    margin-top: $bdl-grid-unit * 2;
+    margin-bottom: $bdl-grid-unit * 6;
+}

package/src/features/content-insights/GraphCardGhostState.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import Ghost from '../../components/ghost';
+
+import GraphGhostState from './GraphGhostState';
+
+import './GraphCardGhostState.scss';
+
+const GraphCardGhostState = () => (
+    <div className="GraphCardGhostState" data-testid="GraphCardGhostState">
+        <div className="GraphCardGhostState-header">
+            <Ghost borderRadius={4} height={16} width={56} />
+            <Ghost borderRadius={4} className="GraphCardGhostState-headlinePill" height={20} width={96} />
+        </div>
+        <GraphGhostState />
+    </div>
+);
+
+export default GraphCardGhostState;

package/src/features/content-insights/GraphCardPreviewsSummary.scss

@@ -0,0 +1,10 @@
+@import './variables';
+
+.GraphCardPreviewsSummary-chart.ca-BarChart {
+    flex: 0 0 $ContentInsights-chart-height-small;
+    margin-top: $bdl-grid-unit * 5.5;
+
+    .ca-Bar-value {
+        background: $ContentInsights-chart-color-previews;
+    }
+}

package/src/features/content-insights/GraphCardPreviewsSummary.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { injectIntl, IntlShape } from 'react-intl';
+
+import BarChart from './charts/bar/BarChart';
+import messages from './messages';
+import MetricSummary from './MetricSummary';
+import { METRIC, PERIOD } from './constants';
+import { GraphData } from './types';
+
+import './GraphCardPreviewsSummary.scss';
+
+interface Props {
+    graphData: GraphData;
+    intl: IntlShape;
+    previousPeriodCount: number;
+    totalCount: number;
+}
+
+function GraphCardPreviewsSummary({ graphData, intl, previousPeriodCount, totalCount }: Props) {
+    return (
+        <>
+            <MetricSummary
+                data={graphData}
+                metric={METRIC.PREVIEWS}
+                period={PERIOD.WEEK}
+                previousPeriodCount={previousPeriodCount}
+                totalCount={totalCount}
+            />
+            <BarChart
+                className="GraphCardPreviewsSummary-chart"
+                data={graphData}
+                label={intl.formatMessage(messages.previewGraphLabel)}
+                labelAccessor="start"
+                valueAccessor="previewsCount"
+            />
+        </>
+    );
+}
+
+export default injectIntl(GraphCardPreviewsSummary);

package/src/features/content-insights/GraphGhostState.scss

@@ -0,0 +1,11 @@
+@import '../../styles/variables';
+
+.GraphGhostState {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-around;
+
+    .bdl-Ghost + .bdl-Ghost {
+        margin-left: $bdl-grid-unit * .5;
+    }
+}

package/src/features/content-insights/GraphGhostState.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Ghost from '../../components/ghost';
+
+import './GraphGhostState.scss';
+
+const GRAPH_BAR_HEIGHTS = [28, 36, 54, 80, 36, 48, 28];
+
+const GraphGhostState = () => (
+    <div className="GraphGhostState">
+        {GRAPH_BAR_HEIGHTS.map((height, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Ghost key={index} borderRadius={4} height={height} />
+        ))}
+    </div>
+);
+
+export default GraphGhostState;

package/src/features/content-insights/HeaderWithCount.scss

@@ -0,0 +1,10 @@
+@import './mixins';
+
+.HeaderWithCount {
+    @include ContentInsightsHeaderText;
+}
+
+.HeaderWithCount-titleCount::before {
+    margin: 0 $bdl-grid-unit;
+    content: '•';
+}

package/src/features/content-insights/HeaderWithCount.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import CompactCount from './CompactCount';
+
+import './HeaderWithCount.scss';
+
+interface Props {
+    title: string;
+    totalCount?: number;
+}
+
+function isNumber(count?: number): count is number {
+    return typeof count === 'number';
+}
+
+function HeaderWithCount({ title, totalCount }: Props) {
+    return (
+        <div className="HeaderWithCount">
+            <span className="HeaderWithCount-title">{title}</span>
+            {isNumber(totalCount) ? <CompactCount className="HeaderWithCount-titleCount" count={totalCount} /> : null}
+        </div>
+    );
+}
+
+export default HeaderWithCount;

package/src/features/content-insights/MetricSummary.scss

@@ -0,0 +1,14 @@
+@import '../../styles/variables';
+
+.MetricSummary-periodCount {
+    font-size: 21px;
+}
+
+.MetricSummary-period {
+    display: flex;
+    margin-top: $bdl-grid-unit * 1.5;
+
+    .MetricSummary-periodCount {
+        margin-right: $bdl-grid-unit * 2;
+    }
+}