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

package/src/elements/content-sidebar/activity-feed/comment/__tests__/__snapshots__/Comment.test.js.snap

@@ -69,10 +69,11 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should correctly
           date={1506534041000}
         />
       </div>
-      <ActivityMessage
+      <ActivityStatus />
+      <ForwardRef(withFeatureConsumer(ActivityMessage))
         id="123"
+        isEdited={false}
         tagged_message="test"
-        translationEnabled={false}
         translationFailed={null}
       />
     </MediaBody>
@@ -112,8 +113,10 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should correctly
           date={1506534041000}
         />
       </div>
-      <ActivityMessage
+      <ActivityStatus />
+      <ForwardRef(withFeatureConsumer(ActivityMessage))
         id="123"
+        isEdited={false}
         onTranslate={[MockFunction]}
         tagged_message="test"
         translationEnabled={true}
@@ -156,10 +159,11 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should render an
           date={1506534041000}
         />
       </div>
-      <ActivityMessage
+      <ActivityStatus />
+      <ForwardRef(withFeatureConsumer(ActivityMessage))
         id="123"
+        isEdited={false}
         tagged_message="test"
-        translationEnabled={false}
         translationFailed={true}
       />
     </MediaBody>
@@ -203,10 +207,11 @@ exports[`elements/content-sidebar/ActivityFeed/comment/Comment should render com
           date={1506534041000}
         />
       </div>
-      <ActivityMessage
+      <ActivityStatus />
+      <ForwardRef(withFeatureConsumer(ActivityMessage))
         id="123"
+        isEdited={false}
         tagged_message="test"
-        translationEnabled={false}
         translationFailed={null}
       />
     </MediaBody>

package/src/elements/content-sidebar/activity-feed/comment/messages.js

@@ -27,6 +27,16 @@ const messages = defineMessages({
         defaultMessage: '{time, date, full} at {time, time, short}',
         description: 'Comment posted full date time for title',
     },
+    commentResolveMenuItem: {
+        id: 'be.contentSidebar.activityFeed.comment.commentResolveMenuItem',
+        defaultMessage: 'Resolve',
+        description: 'Text to show on menu item to resolve the comment',
+    },
+    commentUnresolveMenuItem: {
+        id: 'be.contentSidebar.activityFeed.comment.commentUnresolveMenuItem',
+        defaultMessage: 'Unresolve',
+        description: 'Text to show on menu item to unresolve the comment',
+    },
 });
 
 export default messages;

package/src/elements/content-sidebar/activity-feed/comment-form/CommentForm.js

@@ -36,6 +36,7 @@ type Props = {
     onCancel: Function,
     onFocus?: Function,
     onSubmit?: Function,
+    placeholder?: string,
     showTip?: boolean,
     tagged_message?: string,
     updateComment?: Function,
@@ -119,6 +120,7 @@ class CommentForm extends React.Component<Props, State> {
             tagged_message,
             getAvatarUrl,
             showTip = true,
+            placeholder = formatMessage(messages.commentWrite),
         } = this.props;
         const { commentEditorState } = this.state;
         const inputContainerClassNames = classNames('bcs-CommentForm', className, {
@@ -149,7 +151,7 @@ class CommentForm extends React.Component<Props, State> {
                             onChange={this.onMentionSelectorChangeHandler}
                             onFocus={onFocus}
                             onMention={getMentionWithQuery}
-                            placeholder={tagged_message ? undefined : formatMessage(messages.commentWrite)}
+                            placeholder={tagged_message ? undefined : placeholder}
                             validateOnBlur={false}
                         />
                         {showTip && (

package/src/elements/content-sidebar/activity-feed/comment-form/__tests__/CommentForm.test.js

@@ -152,4 +152,15 @@ describe('elements/content-sidebar/ActivityFeed/comment-form/CommentForm', () =>
 
         expect(wrapper.find('.bcs-CommentForm-tip').length).toEqual(0);
     });
+
+    test('should show custom placeholder when provided', () => {
+        const wrapper = render({ placeholder: 'Your comment goes here' });
+
+        expect(
+            wrapper
+                .find('DraftJSMentionSelector')
+                .at(0)
+                .prop('placeholder'),
+        ).toEqual('Your comment goes here');
+    });
 });

package/src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.js

@@ -1,16 +1,25 @@
 // @flow
 import * as React from 'react';
 import noop from 'lodash/noop';
-import LoadingIndicator from '../../../../../components/loading-indicator';
+import { FormattedMessage } from 'react-intl';
+import CollapsableMessage from './CollapsableMessage';
 import formatTaggedMessage from '../../utils/formatTaggedMessage';
+import LoadingIndicator from '../../../../../components/loading-indicator';
+import messages from './messages';
 import ShowOriginalButton from './ShowOriginalButton';
 import TranslateButton from './TranslateButton';
+import { withFeatureConsumer, isFeatureEnabled } from '../../../../common/feature-checking';
+
 import type { GetProfileUrlCallback } from '../../../../common/flowTypes';
+import type { FeatureConfig } from '../../../../common/feature-checking';
+
 import './ActivityMessage.scss';
 
 type Props = {
+    features: FeatureConfig,
     getUserProfileUrl?: GetProfileUrlCallback,
     id: string,
+    isEdited?: boolean,
     onTranslate?: Function,
     tagged_message: string,
     translatedTaggedMessage?: string,
@@ -25,6 +34,7 @@ type State = {
 
 class ActivityMessage extends React.Component<Props, State> {
     static defaultProps = {
+        isEdited: false,
         translationEnabled: false,
     };
 
@@ -74,21 +84,41 @@ class ActivityMessage extends React.Component<Props, State> {
     };
 
     render(): React.Node {
-        const { id, tagged_message, translatedTaggedMessage, translationEnabled, getUserProfileUrl } = this.props;
+        const {
+            features,
+            getUserProfileUrl,
+            id,
+            isEdited,
+            tagged_message,
+            translatedTaggedMessage,
+            translationEnabled,
+        } = this.props;
         const { isLoading, isTranslation } = this.state;
         const commentToDisplay =
             translationEnabled && isTranslation && translatedTaggedMessage ? translatedTaggedMessage : tagged_message;
+        const MessageWrapper = isFeatureEnabled(features, 'activityFeed.collapsableMessages.enabled')
+            ? CollapsableMessage
+            : React.Fragment;
+
         return isLoading ? (
             <div className="bcs-ActivityMessageLoading">
                 <LoadingIndicator size="small" />
             </div>
         ) : (
             <div className="bcs-ActivityMessage">
-                {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl)}
+                <MessageWrapper>
+                    {formatTaggedMessage(commentToDisplay, id, false, getUserProfileUrl)}
+                    {isEdited && (
+                        <span className="bcs-ActivityMessage-edited">
+                            <FormattedMessage {...messages.activityMessageEdited} />
+                        </span>
+                    )}
+                </MessageWrapper>
                 {translationEnabled ? this.getButton(isTranslation) : null}
             </div>
         );
     }
 }
 
-export default ActivityMessage;
+export { ActivityMessage };
+export default withFeatureConsumer(ActivityMessage);

package/src/elements/content-sidebar/activity-feed/common/activity-message/ActivityMessage.scss

@@ -13,14 +13,51 @@
     }
 }
 
+.bcs-ActivityMessage-edited {
+    color: $bdl-gray-62;
+}
+
 .bcs-ActivityMessage-mention {
     overflow: initial;
     white-space: normal;
 }
 
-.bcs-ActivityMessage-translate {
-    display: block;
-    color: $bdl-box-blue;
+.bcs-ActivityMessage-collapsed {
+    /* webkit-line-clamp only works in combination with -webkit-box */
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    overflow-wrap: break-word;
+    -webkit-line-clamp: 7;
+    -webkit-box-orient: vertical;
+}
+
+.bcs-ActivityMessage-translate,
+.bcs-ActivityMessage-toggleMoreLess {
+    &.btn-plain {
+        display: block;
+        margin-left: -2px;
+        color: $bdl-box-blue;
+        font-weight: bold;
+        // to align with rest of text despite invisible border
+        line-height: $bdl-line-height - 4px;
+        border: 2px solid transparent;
+        border-radius: 2px;
+
+        &:hover,
+        &:active {
+            text-decoration: underline;
+        }
+
+        &:active {
+            color: $bdl-light-blue;
+        }
+
+        &:focus-visible {
+            border-color: $bdl-box-blue;
+        }
+    }
 }
 
 .bcs-ActivityMessageLoading {

package/src/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessage.js

@@ -0,0 +1,42 @@
+// @flow
+import * as React from 'react';
+import classNames from 'classnames';
+import CollapsableMessageToggle from './CollapsableMessageToggle';
+import './ActivityMessage.scss';
+
+type Props = {
+    children: React.Node,
+};
+
+export default function CollapsableMessage({ children }: Props) {
+    const [isCollapsed, setIsCollapsed] = React.useState(true);
+    const [shouldCollapse, setShouldCollapse] = React.useState(false);
+    const messageContainer = React.useRef<HTMLDivElement | null>(null);
+
+    React.useLayoutEffect(() => {
+        if (messageContainer.current) {
+            const { clientHeight, scrollHeight } = messageContainer.current;
+            setShouldCollapse(clientHeight !== scrollHeight);
+        }
+    }, []);
+
+    return (
+        <>
+            <div
+                className={classNames({
+                    'bcs-ActivityMessage-collapsed': isCollapsed,
+                })}
+                ref={messageContainer}
+            >
+                {children}
+            </div>
+
+            {shouldCollapse && (
+                <CollapsableMessageToggle
+                    isMore={isCollapsed}
+                    onClick={() => setIsCollapsed(prevState => !prevState)}
+                />
+            )}
+        </>
+    );
+}

package/src/elements/content-sidebar/activity-feed/common/activity-message/CollapsableMessageToggle.js

@@ -0,0 +1,24 @@
+/**
+ * @flow
+ * @file Show more/less button
+ */
+
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import PlainButton from '../../../../../components/plain-button';
+
+import messages from './messages';
+
+type Props = {
+    isMore: boolean,
+    onClick: () => void,
+};
+
+const CollapsableMessageToggle = ({ isMore, onClick }: Props): React.Node => (
+    <PlainButton className="bcs-ActivityMessage-toggleMoreLess" onClick={onClick} type="button">
+        <FormattedMessage {...(isMore ? messages.activityMessageSeeMore : messages.activityMessageSeeLess)} />
+    </PlainButton>
+);
+
+export default CollapsableMessageToggle;

package/src/elements/content-sidebar/activity-feed/common/activity-message/__tests__/ActivityMessage.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { mount, shallow } from 'enzyme';
 
-import ActivityMessage from '../ActivityMessage';
+import { ActivityMessage } from '../ActivityMessage';
 
 describe('elements/content-sidebar/ActivityFeed/common/activity-message', () => {
     test('should properly format tagged comment', () => {
@@ -136,4 +136,51 @@ describe('elements/content-sidebar/ActivityFeed/common/activity-message', () =>
         expect(wrapper.state('isTranslation')).toBe(false);
         expect(wrapper.state('isLoading')).toBe(false);
     });
+
+    test('should not have CollapsableMessage when `collapsableMessages` is not enabled in features', () => {
+        const commentText = {
+            features: {
+                activityFeed: {
+                    collapsableMessages: { enabled: false },
+                },
+            },
+            id: '123',
+            tagged_message: 'How u doing @[2030326577:Young Jeezy]?',
+        };
+
+        const wrapper = shallow(<ActivityMessage {...commentText} />);
+
+        expect(wrapper.exists('CollapsableMessage')).toBe(false);
+    });
+
+    test('should have CollapsableMessage when `collapsableMessages` is enabled in features', () => {
+        const commentText = {
+            features: {
+                activityFeed: {
+                    collapsableMessages: { enabled: true },
+                },
+            },
+            id: '123',
+            tagged_message: 'How u doing @[2030326577:Young Jeezy]?',
+        };
+
+        const wrapper = shallow(<ActivityMessage {...commentText} />);
+
+        expect(wrapper.exists('CollapsableMessage')).toBe(true);
+    });
+
+    test.each`
+        isEdited | expected
+        ${false} | ${false}
+        ${true}  | ${true}
+    `(`given isEdited = $isEdited prop message should text "(edited)" be $expected`, ({ isEdited, expected }) => {
+        const comment = {
+            tagged_message: 'Hi ﹫[123:Half] ＠[222:Full] @[432:Latin]',
+            isEdited,
+        };
+
+        const wrapper = shallow(<ActivityMessage id="123" {...comment} />);
+
+        expect(wrapper.exists({ id: 'be.contentSidebar.activityFeed.common.editedMessage' })).toBe(expected);
+    });
 });

package/src/elements/content-sidebar/activity-feed/common/activity-message/messages.js

@@ -12,6 +12,21 @@ const messages = defineMessages({
         defaultMessage: 'Translate',
         description: 'Translate button for translating comment',
     },
+    activityMessageSeeMore: {
+        id: 'be.contentSidebar.activityFeed.common.seeMoreMessage',
+        defaultMessage: 'See more',
+        description: 'See more button for showing whole long message',
+    },
+    activityMessageSeeLess: {
+        id: 'be.contentSidebar.activityFeed.common.seeLessMessage',
+        defaultMessage: 'See less',
+        description: 'See less button for hiding part of long message',
+    },
+    activityMessageEdited: {
+        id: 'be.contentSidebar.activityFeed.common.editedMessage',
+        defaultMessage: ' (edited)',
+        description: 'Label indicating that message was edited, should be lowercase',
+    },
 });
 
 export default messages;

package/src/elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus.js

@@ -0,0 +1,30 @@
+// @flow
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import LabelPill from '../../../../../components/label-pill';
+import { COMMENT_STATUS_RESOLVED } from '../../../../../constants';
+import messages from './messages';
+import type { FeedItemStatus } from '../../../../../common/types/feed';
+import './ActivityStatus.scss';
+
+type Props = {
+    status?: FeedItemStatus,
+};
+
+const ActivityStatus = ({ status }: Props): React.Node => {
+    if (status !== COMMENT_STATUS_RESOLVED) {
+        return null;
+    }
+
+    return (
+        <div className="bcs-ActivityStatus" data-testid="bcs-ActivityStatus">
+            <LabelPill.Pill type="success">
+                <LabelPill.Text>
+                    <FormattedMessage {...messages.activityStatusResolved} />
+                </LabelPill.Text>
+            </LabelPill.Pill>
+        </div>
+    );
+};
+
+export default ActivityStatus;

package/src/elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus.scss

@@ -0,0 +1,6 @@
+@import '../../../../../styles/variables';
+
+.bcs-ActivityStatus {
+    margin-top: 5 * $bdl-grid-unit;
+    margin-bottom: 3 * $bdl-grid-unit;
+}

package/src/elements/content-sidebar/activity-feed/common/activity-status/__tests__/ActivityStatus.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ActivityStatus from '../ActivityStatus';
+
+describe('elements/content-sidebar/activity-feed/common/activity-status/ActivityStatus', () => {
+    test.each`
+        status
+        ${undefined}
+        ${'open'}
+    `('should not render when status prop is: $status', ({ status }) => {
+        render(<ActivityStatus status={status} />);
+        expect(screen.queryByTestId('bcs-ActivityStatus')).not.toBeInTheDocument();
+    });
+
+    test('should render when status prop is: resolved', () => {
+        render(<ActivityStatus status="resolved" />);
+        expect(screen.queryByTestId('bcs-ActivityStatus')).toBeInTheDocument();
+    });
+});

package/src/elements/content-sidebar/activity-feed/common/activity-status/index.js

@@ -0,0 +1,2 @@
+// @flow
+export { default } from './ActivityStatus';

package/src/elements/content-sidebar/activity-feed/common/activity-status/messages.js

@@ -0,0 +1,13 @@
+// @flow
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    activityStatusResolved: {
+        id: 'be.contentSidebar.activityFeed.common.activityStatusResolved',
+        defaultMessage: 'RESOLVED',
+        description:
+            'Indicator of resolved status of Comment or Annotation, visible in Feed Item (in upper-case in supported language)',
+    },
+});
+
+export default messages;

package/src/elements/content-sidebar/activity-feed/common/activity-timestamp/ActivityTimestamp.scss

@@ -1,7 +1,7 @@
 @import '../../../../../styles/variables';
 
 .bcs-ActivityTimestamp {
-    color: $bdl-gray-62;
+    color: $bdl-gray-80;
     font-size: 12px;
     line-height: 20px;
     cursor: default;

package/src/elements/content-sidebar/activity-feed/task-new/__tests__/Task.test.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { mount, shallow } from 'enzyme';
 import cloneDeep from 'lodash/cloneDeep';
 
+import { FEED_ITEM_TYPE_TASK } from '../../../../../constants';
 import { TaskComponent as Task } from '..';
 
 const allHandlers = {
@@ -68,7 +69,7 @@ describe('elements/content-sidebar/ActivityFeed/task-new/Task', () => {
                 {
                     type: 'task_link',
                     id: '6231775',
-                    task: { id: taskId, type: 'task', due_at: null },
+                    task: { id: taskId, type: FEED_ITEM_TYPE_TASK, due_at: null },
                     target: {
                         type: 'file',
                         id: '7895970959',
@@ -85,14 +86,14 @@ describe('elements/content-sidebar/ActivityFeed/task-new/Task', () => {
             next_marker: null,
         },
         task_type: 'GENERAL',
-        type: 'task',
+        type: FEED_ITEM_TYPE_TASK,
     };
 
     const taskMultifile = cloneDeep(task);
     taskMultifile.task_links.entries.push({
         type: 'task_link',
         id: taskId,
-        task: { id: '16431755', type: 'task', due_at: null },
+        task: { id: '16431755', type: FEED_ITEM_TYPE_TASK, due_at: null },
         target: {
             type: 'file',
             id: '7895975164',

package/src/elements/content-sidebar/activity-feed/task-new/__tests__/__snapshots__/Task.test.js.snap

@@ -115,10 +115,9 @@ exports[`elements/content-sidebar/ActivityFeed/task-new/Task should correctly re
         className="bcs-Task-dueDate"
       />
       <div>
-        <ActivityMessage
+        <ForwardRef(withFeatureConsumer(ActivityMessage))
           id="123125"
           tagged_message="This is where we tell each other what we need to do"
-          translationEnabled={false}
           translationFailed={null}
         />
       </div>