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

package/src/features/content-insights/charts/bar/BarChart.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import Bar from './Bar';
+import { AccessorFunction, Direction } from '../types';
+
+import './BarChart.scss';
+
+type ValueAccessor = string | AccessorFunction;
+
+interface Props {
+    className?: string;
+    data: Array<any>;
+    direction?: Direction;
+    label: string;
+    labelAccessor: string;
+    onBarMouseEnter?: (arg1: { datum: any }) => void;
+    onBarMouseLeave?: (arg1: { datum: any }) => void;
+    valueAccessor: ValueAccessor;
+}
+
+function isFunction(valueAccessor: ValueAccessor): valueAccessor is AccessorFunction {
+    return typeof valueAccessor === 'function';
+}
+
+function BarChart({
+    className,
+    data = [],
+    direction = 'vertical',
+    label,
+    onBarMouseEnter,
+    onBarMouseLeave,
+    labelAccessor,
+    valueAccessor,
+}: Props) {
+    const isHorizontal = direction === 'horizontal';
+    const isInteractive = !!onBarMouseEnter || !!onBarMouseLeave;
+    const max = data
+        .map(datum => (isFunction(valueAccessor) ? valueAccessor(datum) : datum[valueAccessor]))
+        .reduce((previousValue, currentValue) => Math.max(previousValue, currentValue), 0);
+
+    const getSize = (datum: any) => {
+        // If max is 0 then all other values in the data array are 0 so return 0
+        // instead of allowing the following calculation to return Infinity
+        if (max === 0) {
+            return 0;
+        }
+
+        return ((isFunction(valueAccessor) ? valueAccessor(datum) : datum[valueAccessor]) / max) * 100;
+    };
+
+    const handleBarMouseEnter = onBarMouseEnter || noop;
+    const handleBarMouseLeave = onBarMouseLeave || noop;
+
+    return (
+        <div
+            aria-label={label}
+            className={classNames('ca-BarChart', className, {
+                'is-horizontal': isHorizontal,
+                'is-interactive': isInteractive,
+            })}
+            role="img"
+        >
+            {data.map(datum => (
+                <Bar
+                    key={datum[labelAccessor]}
+                    direction={direction}
+                    onMouseEnter={() => handleBarMouseEnter({ datum })}
+                    onMouseLeave={() => handleBarMouseLeave({ datum })}
+                    size={getSize(datum)}
+                />
+            ))}
+        </div>
+    );
+}
+
+export default BarChart;

package/src/features/content-insights/charts/bar/__tests__/Bar.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { fireEvent, render, RenderResult } from '@testing-library/react';
+import Bar from '../Bar';
+
+describe('features/content-insights/charts/bar/Bar', () => {
+    const getDefaultProps = () => ({
+        size: 80,
+    });
+    const getWrapper = (props = {}) => {
+        return render(<Bar {...getDefaultProps()} {...props} />);
+    };
+    const getFirstChild = (wrapper: RenderResult): HTMLElement => wrapper.container.firstChild as HTMLElement;
+
+    describe('render', () => {
+        test('should render correctly', () => {
+            const wrapper = getWrapper();
+            const element = getFirstChild(wrapper);
+
+            expect(element).toHaveClass('ca-Bar');
+            expect(element.querySelector('.ca-Bar-value')).toHaveStyle(`height: 80%`);
+        });
+
+        test('should render a minimum bar if value is 0', () => {
+            const wrapper = getWrapper({ size: 0 });
+            const element = getFirstChild(wrapper);
+
+            expect(element.querySelector('.ca-Bar-value')).toHaveStyle(`height: 2px`);
+        });
+
+        test('should render a minimum bar if value is < 0', () => {
+            const wrapper = getWrapper({ size: -5 });
+            const element = getFirstChild(wrapper);
+
+            expect(element.querySelector('.ca-Bar-value')).toHaveStyle(`height: 2px`);
+        });
+
+        test('should render a color if provided', () => {
+            const wrapper = getWrapper({ color: 'blue' });
+            const element = getFirstChild(wrapper);
+
+            expect(element.querySelector('.ca-Bar-value')).toHaveStyle(`background-color: blue`);
+        });
+
+        test('should render horizontally if provided', () => {
+            const wrapper = getWrapper({ direction: 'horizontal' });
+            const element = getFirstChild(wrapper);
+
+            expect(element).toHaveClass('is-horizontal');
+            expect(element.querySelector('.ca-Bar-value')).toHaveStyle(`width: 80%`);
+        });
+    });
+
+    describe('callbacks', () => {
+        test('should call onMouseEnter', () => {
+            const onMouseEnter = jest.fn();
+            const wrapper = getWrapper({ onMouseEnter });
+            const element = getFirstChild(wrapper);
+
+            fireEvent.mouseEnter(element);
+
+            expect(onMouseEnter).toBeCalled();
+        });
+
+        test('should call onMouseLeave', () => {
+            const onMouseLeave = jest.fn();
+            const wrapper = getWrapper({ onMouseLeave });
+            const element = getFirstChild(wrapper);
+
+            fireEvent.mouseLeave(element);
+
+            expect(onMouseLeave).toBeCalled();
+        });
+    });
+});

package/src/features/content-insights/charts/bar/__tests__/BarChart.test.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { fireEvent, render, RenderResult } from '@testing-library/react';
+import BarChart from '../BarChart';
+
+describe('features/content-insights/charts/bar/BarChart', () => {
+    const defaultAccessorsData = [
+        { x: 1, y: 2 },
+        { x: 2, y: 4 },
+        { x: 3, y: 10 },
+    ];
+    const horizontalAccessorsData = [
+        { x: 1, y: 1 },
+        { x: 2, y: 2 },
+        { x: 10, y: 3 },
+    ];
+    const zeroData = [
+        { x: 1, y: 0 },
+        { x: 2, y: 0 },
+        { x: 3, y: 0 },
+    ];
+
+    const getDefaultProps = () => ({
+        data: defaultAccessorsData,
+        label: 'Chart Label',
+        labelAccessor: 'x',
+        valueAccessor: 'y',
+    });
+
+    const getWrapper = (props = {}) => {
+        return render(<BarChart {...getDefaultProps()} {...props} />);
+    };
+
+    const getFirstChild = (wrapper: RenderResult): HTMLElement => wrapper.container.firstChild as HTMLElement;
+
+    describe('render', () => {
+        test('should render correctly', () => {
+            const wrapper = getWrapper();
+            const element = getFirstChild(wrapper);
+
+            expect(element).toHaveClass('ca-BarChart');
+            expect(element.getAttribute('aria-label')).toBe('Chart Label');
+            expect(element.getAttribute('role')).toBe('img');
+            expect(element.children.length).toBe(3);
+            expect(element.children.item(0)?.querySelector('.ca-Bar-value')).toHaveStyle(`height: 20%`); // max value of the data is 10, since the first item is 2, 2/10 is 20%
+        });
+
+        test('should render horizontally if provided', () => {
+            const wrapper = getWrapper({
+                data: horizontalAccessorsData,
+                direction: 'horizontal',
+                labelAccessor: 'y',
+                valueAccessor: 'x',
+            });
+            const element = getFirstChild(wrapper);
+
+            expect(element).toHaveClass('is-horizontal');
+            expect(element.children.length).toBe(3);
+            expect(element.children.item(0)?.querySelector('.ca-Bar-value')).toHaveStyle(`width: 10%`); // max value of the data is 10, since the first item is 1, 1/10 is 10%
+        });
+
+        test('should use valueAccessor as function if provided', () => {
+            const data = [
+                { x: 1, y: ['a', 'b'] },
+                { x: 2, y: ['a', 'b', 'c', 'd'] },
+                { x: 3, y: ['a'] },
+            ];
+            const valueAccessor = ({ y }: { y: Array<string> }) => y.length;
+            const wrapper = getWrapper({ data, valueAccessor });
+            const element = getFirstChild(wrapper);
+
+            expect(element).toHaveClass('ca-BarChart');
+            expect(element.getAttribute('aria-label')).toBe('Chart Label');
+            expect(element.getAttribute('role')).toBe('img');
+            expect(element.children.length).toBe(3);
+            expect(element.children.item(0)?.querySelector('.ca-Bar-value')).toHaveStyle(`height: 50%`); // max value of the data is 4, since the first item is 2, 2/4 is 50%
+        });
+
+        test('should have all bars be minimum height if all values are zero', () => {
+            const wrapper = getWrapper({ data: zeroData });
+            const element = getFirstChild(wrapper);
+
+            expect(element.children.length).toBe(3);
+            expect(element.children.item(0)?.querySelector('.ca-Bar-value')).toHaveStyle(`height: 2px`);
+            expect(element.children.item(1)?.querySelector('.ca-Bar-value')).toHaveStyle(`height: 2px`);
+            expect(element.children.item(2)?.querySelector('.ca-Bar-value')).toHaveStyle(`height: 2px`);
+        });
+    });
+
+    describe('callbacks', () => {
+        test('should call onBarMouseEnter with the data', () => {
+            const onBarMouseEnter = jest.fn();
+            const wrapper = getWrapper({ onBarMouseEnter });
+            const element = getFirstChild(wrapper);
+
+            fireEvent.mouseEnter(element.children.item(0) as HTMLElement);
+
+            expect(onBarMouseEnter).toBeCalledWith({ datum: { x: 1, y: 2 } });
+        });
+
+        test('should call onBarMouseLeave with the data', () => {
+            const onBarMouseLeave = jest.fn();
+            const wrapper = getWrapper({ onBarMouseLeave });
+            const element = getFirstChild(wrapper);
+
+            fireEvent.mouseLeave(element.children.item(0) as HTMLElement);
+
+            expect(onBarMouseLeave).toBeCalledWith({ datum: { x: 1, y: 2 } });
+        });
+    });
+});

package/src/features/content-insights/charts/types.ts

@@ -0,0 +1,3 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AccessorFunction = (datum: any) => number;
+export type Direction = 'horizontal' | 'vertical';

package/src/features/content-insights/constants.ts

@@ -0,0 +1,60 @@
+const DOWNLOADS = 'DOWNLOADS';
+const PREVIEWS = 'PREVIEWS';
+const USERS = 'USERS';
+
+export const METRIC = Object.freeze({
+    DOWNLOADS,
+    PREVIEWS,
+    USERS,
+});
+
+const WEEK = 'week';
+const MONTH = 'month';
+const THREEMONTHS = 'threemonths';
+const YEAR = 'year';
+
+export const PERIOD = Object.freeze({
+    WEEK,
+    MONTH,
+    THREEMONTHS,
+    YEAR,
+});
+
+const ONE_WEEK = 'one_week';
+const TWO_WEEKS = 'two_weeks';
+const ONE_MONTH = 'one_month';
+const TWO_MONTHS = 'two_months';
+const THREE_MONTHS = 'three_months';
+const SIX_MONTHS = 'six_months';
+const ONE_YEAR = 'one_year';
+const TWO_YEARS = 'two_years';
+
+export const PRESET_TIMES = Object.freeze({
+    ONE_WEEK,
+    TWO_WEEKS,
+    ONE_MONTH,
+    TWO_MONTHS,
+    THREE_MONTHS,
+    SIX_MONTHS,
+    ONE_YEAR,
+    TWO_YEARS,
+});
+
+export const PRESET_TO_TIMESTAMPS_MAP = {
+    [PERIOD.WEEK]: {
+        currentPeriod: PRESET_TIMES.ONE_WEEK,
+        previousPeriod: PRESET_TIMES.TWO_WEEKS,
+    },
+    [PERIOD.MONTH]: {
+        currentPeriod: PRESET_TIMES.ONE_MONTH,
+        previousPeriod: PRESET_TIMES.TWO_MONTHS,
+    },
+    [PERIOD.THREEMONTHS]: {
+        currentPeriod: PRESET_TIMES.THREE_MONTHS,
+        previousPeriod: PRESET_TIMES.SIX_MONTHS,
+    },
+    [PERIOD.YEAR]: {
+        currentPeriod: PRESET_TIMES.ONE_YEAR,
+        previousPeriod: PRESET_TIMES.TWO_YEARS,
+    },
+} as const;

package/src/features/content-insights/messages.ts

@@ -0,0 +1,90 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+    contentAnalyticsErrorText: {
+        defaultMessage: 'There was a problem loading content insights. Please try again.',
+        description: 'Text shown to users when opening the content insights flyout and there is an error',
+        id: 'be.contentInsights.contentAnalyticsErrorText',
+    },
+    contentAnalyticsPermissionError: {
+        defaultMessage: 'Oops! You no longer have access to view content insights.',
+        description: 'Message shown when the user does not have access to view content insights anymore',
+        id: 'be.contentInsights.contentAnalyticsPermissionError',
+    },
+    contentInsightsTitle: {
+        defaultMessage: 'Content Insights',
+        description: 'Title for Content Insights section in file sidebar',
+        id: 'be.contentInsights.contentInsightsTitle',
+    },
+    downloadGraphLabel: {
+        defaultMessage: 'Chart displaying the number of downloads over the selected time period',
+        description: 'Label for the chart displaying the number of downloads over the selected time period',
+        id: 'be.contentInsights.downloadGraphLabel',
+    },
+    downloadGraphType: {
+        defaultMessage: 'DOWNLOADS',
+        description: 'Title for the content insights graph card regarding number of Previews',
+        id: 'be.contentInsights.downloadGraphType',
+    },
+    trendMonth: {
+        defaultMessage: 'PAST MONTH',
+        description:
+            'Trend description for the content insights graph card regarding the count of events from the past month',
+        id: 'be.contentInsights.trendMonth',
+    },
+    trendThreeMonths: {
+        defaultMessage: 'PAST 3 MONTHS',
+        description:
+            'Trend description for the content insights graph card regarding the count of events from the past three months',
+        id: 'be.contentInsights.trendThreeMonths',
+    },
+    trendWeek: {
+        defaultMessage: 'PAST WEEK',
+        description:
+            'Trend description for the content insights graph card regarding the count of events from the past week',
+        id: 'be.contentInsights.trendWeek',
+    },
+    trendYear: {
+        defaultMessage: 'PAST YEAR',
+        description:
+            'Trend description for the content insights graph card regarding the count of events from the past year',
+        id: 'be.contentInsights.trendYear',
+    },
+    trendDown: {
+        defaultMessage: 'Trending down',
+        description: 'Label for the arrow indicator in the trend pill',
+        id: 'be.contentInsights.trendDown',
+    },
+    trendUp: {
+        defaultMessage: 'Trending up',
+        description: 'Label for the arrow indicator in the trend pill',
+        id: 'be.contentInsights.trendUp',
+    },
+    peopleGraphLabel: {
+        defaultMessage: 'Chart displaying the number of users over the selected time period',
+        description: 'Label for the chart displaying the number of users over the selected time period',
+        id: 'be.contentInsights.peopleGraphLabel',
+    },
+    peopleTitle: {
+        defaultMessage: 'PEOPLE',
+        description: 'Title used to represent how many users have interacted with the file',
+        id: 'be.contentInsights.peopleTitle',
+    },
+    previewGraphLabel: {
+        defaultMessage: 'Chart displaying the number of previews over the selected time period',
+        description: 'Label for the chart displaying the number of previews over the selected time period',
+        id: 'be.contentInsights.previewGraphLabel',
+    },
+    previewGraphType: {
+        defaultMessage: 'PREVIEWS',
+        description: 'Title for the content insights graph card regarding number of Previews',
+        id: 'be.contentInsights.previewGraphType',
+    },
+    openContentInsightsButton: {
+        defaultMessage: 'See Details',
+        description: 'Open Content Insights button which opens the Content Insights Modal',
+        id: 'be.contentInsights.openContentInsightsButton',
+    },
+});
+
+export default messages;

package/src/features/content-insights/numberUtils.ts

@@ -0,0 +1,9 @@
+import { IntlShape } from 'react-intl';
+
+const formatCount = (count: number, intl: IntlShape): string | string[] => {
+    const shouldAbbreviate = count >= 10000;
+    return shouldAbbreviate ? intl.formatNumber(count, { notation: 'compact' }) : intl.formatNumber(count);
+};
+
+// eslint-disable-next-line import/prefer-default-export
+export { formatCount };

package/src/features/content-insights/types.ts

@@ -0,0 +1,33 @@
+import { METRIC, PERIOD, PRESET_TIMES } from './constants';
+
+export type Metric = typeof METRIC[keyof typeof METRIC];
+
+export type Period = typeof PERIOD[keyof typeof PERIOD];
+
+export type PresetTimes = typeof PRESET_TIMES[keyof typeof PRESET_TIMES];
+
+export type TimeRangeType = 'day' | 'week' | 'month';
+
+export type TimeRange = {
+    end: number;
+    start: number;
+    type: TimeRangeType;
+};
+
+export type MetricsData = {
+    downloadsCount: number;
+    previewsCount: number;
+    users: Set<string>;
+};
+
+export type GraphDatum = TimeRange & MetricsData;
+
+export type GraphData = Array<GraphDatum>;
+
+export type ResponseError = Error & {
+    data?: string;
+    detail?: string;
+    errorCode?: string;
+    status: number;
+    title?: string;
+};

package/src/features/item-details/ItemProperties.scss

@@ -4,7 +4,7 @@
     margin: 0;
 
     dt {
-        color: $bdl-gray-62;
+        color: $bdl-gray-80;
     }
 
     dd {

package/src/features/shared-link-settings-modal/SharedLinkSettingsModal.js

@@ -8,7 +8,7 @@ import { Modal, ModalActions } from '../../components/modal';
 import InlineNotice from '../../components/inline-notice';
 import Link from '../../components/link/LinkBase';
 import commonMessages from '../../common/messages';
-import Classification from '../classification';
+import Classification, { getClassificationLabelColor } from '../classification';
 
 import VanityNameSection from './VanityNameSection';
 import PasswordSection from './PasswordSection';
@@ -363,15 +363,17 @@ class SharedLinkSettingsModal extends Component {
     renderModalTitle() {
         const { item } = this.props;
         const { bannerPolicy, classification } = item;
+        const classificationColor = getClassificationLabelColor(bannerPolicy);
 
         return (
             <span className="bdl-SharedLinkSettingsModal-title">
                 <FormattedMessage {...messages.modalTitle} />
                 <Classification
+                    className="bdl-SharedLinkSettingsModal-classification"
+                    color={classificationColor}
                     definition={bannerPolicy ? bannerPolicy.body : undefined}
                     messageStyle="tooltip"
                     name={classification}
-                    className="bdl-SharedLinkSettingsModal-classification"
                 />
             </span>
         );

package/src/features/shared-link-settings-modal/__tests__/SharedLinkSettingsModal.test.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import sinon from 'sinon';
 
+import classificationColorsMap from '../../classification/classificationColorsMap';
+
 import SharedLinkSettingsModal from '../SharedLinkSettingsModal';
 
 const sandbox = sinon.sandbox.create();
@@ -285,9 +287,26 @@ describe('features/shared-link-settings-modal/SharedLinkSettingsModal', () => {
     });
 
     describe('renderModalTitle()', () => {
-        const wrapper = getWrapper();
-        const title = shallow(wrapper.instance().renderModalTitle());
-        expect(title).toMatchSnapshot();
+        test('should render modal title and match snapshot', () => {
+            const wrapper = getWrapper();
+            const title = shallow(wrapper.instance().renderModalTitle());
+            expect(title).toMatchSnapshot();
+        });
+
+        test('should render classification label with fill and stroke colors that match the classification color id', () => {
+            const colorID = 3;
+            const { color } = classificationColorsMap[colorID];
+
+            const item = {
+                bannerPolicy: {
+                    colorID,
+                },
+            };
+
+            const wrapper = getWrapper({ item });
+            const title = shallow(wrapper.instance().renderModalTitle());
+            expect(title.find('Classification').props().color).toBe(color);
+        });
     });
 
     describe('render()', () => {

package/src/features/shared-link-settings-modal/__tests__/__snapshots__/SharedLinkSettingsModal.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[` 1`] = `
+exports[`features/shared-link-settings-modal/SharedLinkSettingsModal renderModalTitle() should render modal title and match snapshot 1`] = `
 <span
   className="bdl-SharedLinkSettingsModal-title"
 >
@@ -10,6 +10,7 @@ exports[` 1`] = `
   />
   <Classification
     className="bdl-SharedLinkSettingsModal-classification"
+    color="#ffeb7f"
     definition="test"
     messageStyle="tooltip"
     name="internal"

package/src/features/unified-share-modal/ContactRestrictionNotice.js

@@ -11,6 +11,7 @@ import PlainButton from '../../components/plain-button';
 import InlineNotice from '../../components/inline-notice';
 import LoadingIndicator from '../../components/loading-indicator/LoadingIndicator';
 import SingleSelectField from '../../components/select-field/SingleSelectField';
+import isRestrictedContact from './utils/isRestrictedContact';
 import { COLLAB_RESTRICTION_TYPE_ACCESS_POLICY, COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER } from './constants';
 
 import messages from './messages';
@@ -22,6 +23,8 @@ import './ContactRestrictionNotice.scss';
 
 const SINGLE_CONTACT = 'singleContact';
 const MULTIPLE_CONTACTS = 'multipleContacts';
+const EMAIL_CONTACT = 'email';
+const GROUP_CONTACT = 'group';
 const RESTRICTION_JUSTIFICATION_ENABLED = 'restrictionJustificationEnabled';
 const RESTRICTION_JUSTIFICATION_DISABLED = 'restrictionJustificationDisabled';
 
@@ -37,7 +40,10 @@ const restrictionNoticeMessageMap = {
         },
     },
     [COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER]: {
-        [SINGLE_CONTACT]: messages.contactRestrictionNoticeInformationBarrierSingular,
+        [SINGLE_CONTACT]: {
+            [EMAIL_CONTACT]: messages.contactRestrictionNoticeInformationBarrierSingular,
+            [GROUP_CONTACT]: messages.contactRestrictionNoticeInformationBarrierSingularGroup,
+        },
         [MULTIPLE_CONTACTS]: messages.contactRestrictionNoticeInformationBarrier,
     },
 };
@@ -51,6 +57,7 @@ type Props = {
     onRemoveRestrictedContacts: () => void,
     onSelectJustificationReason: (justificationReasonOption: SelectOptionProp) => void,
     restrictedEmails: Array<string>,
+    restrictedGroups: Array<number>,
     selectedContacts: Array<Contact>,
     selectedJustificationReason: ?SelectOptionProp,
 } & InjectIntlProvidedProps;
@@ -65,17 +72,24 @@ const ContactRestrictionNotice = ({
     onRemoveRestrictedContacts,
     onSelectJustificationReason,
     restrictedEmails,
+    restrictedGroups,
     selectedContacts,
     selectedJustificationReason,
 }: Props) => {
-    const restrictedContacts = selectedContacts.filter(({ value }) => restrictedEmails.includes(value));
+    const restrictedContacts = selectedContacts.filter(contact =>
+        isRestrictedContact(contact, restrictedEmails, restrictedGroups),
+    );
     const restrictedContactCount = restrictedContacts.length;
 
     if (!restrictedContactCount) {
         return null;
     }
 
-    const firstEmail = restrictedContacts[0].value;
+    const [firstContact] = restrictedContacts;
+    const isFirstContactAGroup = firstContact.type === 'group';
+    const firstContactEmail = isFirstContactAGroup ? undefined : firstContact.value;
+    const firstContactGroupName = isFirstContactAGroup ? firstContact.text : undefined;
+
     const selectedValue = getProp(selectedJustificationReason, 'value', null);
     const isErrorTooltipShown = !!error;
 
@@ -91,8 +105,17 @@ const ContactRestrictionNotice = ({
     let restrictionNoticeMessage;
     // Information Barrier restrictions do not allow justifications
     if (collabRestrictionType === COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER) {
-        restrictionNoticeMessage =
-            restrictionNoticeMessageMap[COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER][restrictedContactCountType];
+        if (restrictedContactCountType === SINGLE_CONTACT) {
+            const contactType = isFirstContactAGroup ? GROUP_CONTACT : EMAIL_CONTACT;
+
+            // Group names are displayed in quotes, which need to be localized, hence why
+            // we need to use different messages for groups and emails
+            restrictionNoticeMessage =
+                restrictionNoticeMessageMap[COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER][SINGLE_CONTACT][contactType];
+        } else {
+            restrictionNoticeMessage =
+                restrictionNoticeMessageMap[COLLAB_RESTRICTION_TYPE_INFORMATION_BARRIER][MULTIPLE_CONTACTS];
+        }
     } else {
         restrictionNoticeMessage =
             restrictionNoticeMessageMap[collabRestrictionType][justificationStatus][restrictedContactCountType];
@@ -119,7 +142,13 @@ const ContactRestrictionNotice = ({
             >
                 <FormattedMessage
                     {...restrictionNoticeMessage}
-                    values={{ count: restrictedContactCount, email: firstEmail }}
+                    values={{
+                        count: restrictedContactCount,
+                        // We use the first contact because email address and
+                        // group name are only displayed for single contact messages
+                        email: firstContactEmail,
+                        groupName: firstContactGroupName,
+                    }}
                 />
                 &nbsp;
                 {isRestrictionJustificationEnabled && justificationSelectSection}
@@ -128,6 +157,7 @@ const ContactRestrictionNotice = ({
                     data-resin-target="removeBtn"
                     onClick={onRemoveRestrictedContacts}
                 >
+                    {/* TODO: count was removed but need to keep it while translations are updated otherwise non-English messages will break */}
                     <FormattedMessage {...removeButtonLabelMessage} values={{ count: restrictedContactCount }} />
                 </PlainButton>
             </InlineNotice>