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

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

@@ -0,0 +1,59 @@
+/**
+ * @flow
+ * @file Activity feed sidebar filter component
+ * @author Box
+ */
+
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import DropdownMenu, { MenuToggle } from '../../components/dropdown-menu';
+import PlainButton from '../../components/plain-button';
+import messages from './messages';
+import { COMMENT_STATUS_OPEN } from '../../constants';
+import { Menu, SelectMenuItem } from '../../components/menu';
+import type { FeedItemStatus } from '../../common/types/feed';
+import './ActivitySidebarFilter.scss';
+
+type ActivitySidebarFilterProps = {
+    feedItemStatus?: FeedItemStatus,
+    onFeedItemStatusClick: (status?: FeedItemStatus) => void,
+};
+
+const ACTIVITY_FEED_ITEM_ALL = 'all';
+const ACTIVITY_FEED_ITEM_OPEN = COMMENT_STATUS_OPEN;
+
+const statuses = [ACTIVITY_FEED_ITEM_ALL, ACTIVITY_FEED_ITEM_OPEN];
+const statusMap = {
+    [ACTIVITY_FEED_ITEM_ALL]: { msg: messages.activitySidebarFilterOptionAll, val: undefined },
+    [ACTIVITY_FEED_ITEM_OPEN]: { msg: messages.activitySidebarFilterOptionOpen, val: COMMENT_STATUS_OPEN },
+};
+
+function ActivitySidebarFilter({
+    feedItemStatus = ACTIVITY_FEED_ITEM_ALL,
+    onFeedItemStatusClick,
+}: ActivitySidebarFilterProps) {
+    return (
+        <div className="bcs-ActivitySidebarFilter">
+            <DropdownMenu className="bcs-ActivitySidebarFilter-dropdownMenu" constrainToWindow>
+                <PlainButton type="button">
+                    <MenuToggle>
+                        <FormattedMessage {...statusMap[feedItemStatus].msg} />
+                    </MenuToggle>
+                </PlainButton>
+                <Menu>
+                    {statuses.map(status => (
+                        <SelectMenuItem
+                            key={status}
+                            isSelected={status === feedItemStatus}
+                            onClick={() => onFeedItemStatusClick(statusMap[status].val)}
+                        >
+                            <FormattedMessage {...statusMap[status].msg} />
+                        </SelectMenuItem>
+                    ))}
+                </Menu>
+            </DropdownMenu>
+        </div>
+    );
+}
+
+export default ActivitySidebarFilter;

package/src/elements/content-sidebar/ActivitySidebarFilter.scss

@@ -0,0 +1,4 @@
+.bcs-ActivitySidebarFilter .menu-toggle {
+    font-weight: bold;
+    font-size: 16px;
+}

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

@@ -13,6 +13,8 @@ import API from '../../api';
 import messages from '../common/messages';
 import SidebarAccessStats from './SidebarAccessStats';
 import SidebarClassification from './SidebarClassification';
+// $FlowFixMe typescript component
+import SidebarContentInsights from './SidebarContentInsights';
 import SidebarContent from './SidebarContent';
 import SidebarFileProperties from './SidebarFileProperties';
 import SidebarNotices from './SidebarNotices';
@@ -32,7 +34,8 @@ import {
     IS_ERROR_DISPLAYED,
     SIDEBAR_VIEW_DETAILS,
 } from '../../constants';
-import type { ClassificationInfo, FileAccessStats, Errors } from './flowTypes';
+import type { Errors } from '../common/flowTypes';
+import type { ClassificationInfo, ContentInsights, FileAccessStats } from './flowTypes';
 import type { WithLoggerProps } from '../../common/types/logging';
 import type { ElementsErrorCallback, ErrorContextProps, ElementsXhrError } from '../../common/types/api';
 import type { BoxItem } from '../../common/types/core';
@@ -40,10 +43,13 @@ import './DetailsSidebar.scss';
 
 type ExternalProps = {
     classification?: ClassificationInfo,
+    contentInsights?: ContentInsights,
     elementId: string,
+    fetchContentInsights?: () => void,
     fileId: string,
     hasAccessStats?: boolean,
     hasClassification?: boolean,
+    hasContentInsights?: boolean,
     hasNotices?: boolean,
     hasProperties?: boolean,
     hasRetentionPolicy?: boolean,
@@ -51,6 +57,7 @@ type ExternalProps = {
     hasVersions?: boolean,
     onAccessStatsClick?: Function,
     onClassificationClick?: (e: SyntheticEvent<HTMLButtonElement>) => void,
+    onContentInsightsClick?: () => void,
     onRetentionPolicyExtendClick?: Function,
     onVersionHistoryClick?: Function,
     retentionPolicy?: Object,
@@ -97,16 +104,24 @@ class DetailsSidebar extends React.PureComponent<Props, State> {
     }
 
     componentDidMount() {
+        const { hasAccessStats, hasContentInsights, fetchContentInsights } = this.props;
+
         this.fetchFile();
-        if (this.props.hasAccessStats) {
+        if (hasAccessStats) {
             this.fetchAccessStats();
         }
+
+        if (hasContentInsights && fetchContentInsights) {
+            fetchContentInsights();
+        }
     }
 
-    componentDidUpdate({ hasAccessStats: prevHasAccessStats }: Props) {
-        const { hasAccessStats } = this.props;
+    componentDidUpdate({ hasAccessStats: prevHasAccessStats, hasContentInsights: prevHasContentInsights }: Props) {
+        const { hasAccessStats, hasContentInsights, fetchContentInsights } = this.props;
         // Component visibility props such as hasAccessStats can sometimes be flipped after an async call
         const hasAccessStatsChanged = prevHasAccessStats !== hasAccessStats;
+        const hasContentInsightsChanged = prevHasContentInsights !== hasContentInsights;
+
         if (hasAccessStatsChanged) {
             if (hasAccessStats) {
                 this.fetchAccessStats();
@@ -118,6 +133,10 @@ class DetailsSidebar extends React.PureComponent<Props, State> {
                 });
             }
         }
+
+        if (hasContentInsightsChanged && hasContentInsights && fetchContentInsights) {
+            fetchContentInsights();
+        }
     }
 
     /**
@@ -316,16 +335,19 @@ class DetailsSidebar extends React.PureComponent<Props, State> {
     render() {
         const {
             classification,
+            contentInsights,
             elementId,
             hasProperties,
             hasNotices,
             hasAccessStats,
             hasClassification,
+            hasContentInsights,
             hasRetentionPolicy,
             hasVersions,
             onAccessStatsClick,
             onVersionHistoryClick,
             onClassificationClick,
+            onContentInsightsClick,
             onRetentionPolicyExtendClick,
             retentionPolicy,
         }: Props = this.props;
@@ -356,6 +378,12 @@ class DetailsSidebar extends React.PureComponent<Props, State> {
                         {...accessStatsError}
                     />
                 )}
+                {file && hasContentInsights && (
+                    <SidebarContentInsights
+                        contentInsights={contentInsights}
+                        onContentInsightsClick={onContentInsightsClick}
+                    />
+                )}
                 {file && hasProperties && (
                     <SidebarSection
                         interactionTarget={SECTION_TARGETS.FILE_PROPERTIES}

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

@@ -17,6 +17,7 @@ import LocalStore from '../../utils/LocalStore';
 import SidebarNav from './SidebarNav';
 import SidebarPanels from './SidebarPanels';
 import SidebarUtils from './SidebarUtils';
+import { withCurrentUser } from '../common/current-user';
 import { withFeatureConsumer } from '../common/feature-checking';
 import type { FeatureConfig } from '../common/feature-checking';
 import type { ActivitySidebarProps } from './ActivitySidebar';
@@ -26,12 +27,14 @@ import type { VersionsSidebarProps } from './versions';
 import type { AdditionalSidebarTab } from './flowTypes';
 import type { MetadataEditor } from '../../common/types/metadata';
 import type { BoxItem, User } from '../../common/types/core';
+import type { Errors } from '../common/flowTypes';
 
 type Props = {
     activitySidebarProps: ActivitySidebarProps,
     additionalTabs?: Array<AdditionalSidebarTab>,
     className: string,
     currentUser?: User,
+    currentUserError?: Errors,
     detailsSidebarProps: DetailsSidebarProps,
     features: FeatureConfig,
     file: BoxItem,
@@ -210,6 +213,7 @@ class Sidebar extends React.Component<Props, State> {
             additionalTabs,
             className,
             currentUser,
+            currentUserError,
             detailsSidebarProps,
             file,
             fileId,
@@ -260,6 +264,7 @@ class Sidebar extends React.Component<Props, State> {
                         <SidebarPanels
                             activitySidebarProps={activitySidebarProps}
                             currentUser={currentUser}
+                            currentUserError={currentUserError}
                             elementId={this.id}
                             detailsSidebarProps={detailsSidebarProps}
                             file={file}
@@ -288,4 +293,4 @@ class Sidebar extends React.Component<Props, State> {
 }
 
 export { Sidebar as SidebarComponent };
-export default flow([withFeatureConsumer, withRouter])(Sidebar);
+export default flow([withCurrentUser, withFeatureConsumer, withRouter])(Sidebar);

package/src/elements/content-sidebar/SidebarContentInsights.scss

@@ -0,0 +1,6 @@
+.bcs-SidebarContentInsights {
+    .ContentAnalyticsErrorState {
+        margin-top: 25px;
+        margin-bottom: 30px;
+    }
+}

package/src/elements/content-sidebar/SidebarContentInsights.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import noop from 'lodash/noop';
+import { FormattedMessage } from 'react-intl';
+
+import ContentInsightsSummary from '../../features/content-insights/ContentInsightsSummary';
+import { GraphData, ResponseError } from '../../features/content-insights/types';
+// @ts-ignore Module is written in Flow
+import messages from '../common/messages';
+// @ts-ignore Module is written in Flow
+import SidebarSection from './SidebarSection';
+// @ts-ignore Module is written in Flow
+// eslint-disable-next-line import/no-named-as-default, import/no-named-as-default-member
+import withErrorHandling from './withErrorHandling'; // Above eslint rules disabled because typescript chokes on flow type import in withErrorHandling
+
+import './SidebarContentInsights.scss';
+
+export interface ContentInsights {
+    error?: ResponseError;
+    graphData: GraphData;
+    isLoading: boolean;
+    previousPeriodCount: number;
+    totalCount: number;
+}
+
+export interface Props {
+    contentInsights?: ContentInsights;
+    onContentInsightsClick?: () => void;
+}
+
+const defaultContentInsights = {
+    graphData: [],
+    isLoading: true,
+    previousPeriodCount: 0,
+    totalCount: 0,
+};
+
+const SidebarContentInsights = ({ contentInsights = defaultContentInsights, onContentInsightsClick = noop }: Props) => {
+    const { error, graphData, isLoading, previousPeriodCount, totalCount } = contentInsights;
+
+    return (
+        <SidebarSection
+            className="bcs-SidebarContentInsights"
+            title={<FormattedMessage {...messages.sidebarContentInsights} />}
+        >
+            <ContentInsightsSummary
+                error={error}
+                graphData={graphData}
+                isLoading={isLoading}
+                onClick={onContentInsightsClick}
+                previousPeriodCount={previousPeriodCount}
+                totalCount={totalCount}
+            />
+        </SidebarSection>
+    );
+};
+
+export default withErrorHandling(SidebarContentInsights);

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

@@ -29,10 +29,12 @@ import type { ActivitySidebarProps } from './ActivitySidebar';
 import type { MetadataSidebarProps } from './MetadataSidebar';
 import type { VersionsSidebarProps } from './versions';
 import type { User, BoxItem } from '../../common/types/core';
+import type { Errors } from '../common/flowTypes';
 
 type Props = {
     activitySidebarProps: ActivitySidebarProps,
     currentUser?: User,
+    currentUserError?: Errors,
     detailsSidebarProps: DetailsSidebarProps,
     elementId: string,
     file: BoxItem,
@@ -131,6 +133,7 @@ class SidebarPanels extends React.Component<Props, State> {
         const {
             activitySidebarProps,
             currentUser,
+            currentUserError,
             detailsSidebarProps,
             elementId,
             file,
@@ -194,6 +197,7 @@ class SidebarPanels extends React.Component<Props, State> {
                                 <LoadableActivitySidebar
                                     elementId={elementId}
                                     currentUser={currentUser}
+                                    currentUserError={currentUserError}
                                     file={file}
                                     hasSidebarInitialized={isInitialized}
                                     onAnnotationSelect={onAnnotationSelect}