MM-51831 : Add ESLint rule to "channels/components" to error out if "compass-components" package is used (#22754)

webapp/channels/.eslintrc.json

@@ -80,11 +80,22 @@
     "react/style-prop-object": [2, {
       "allow": ["Timestamp"]
     }],
-    "no-restricted-imports": ["error", {
-      "paths": [
-        {"name": "react-bootstrap", "importNames": ["OverlayTrigger"], "message": "Please use OverlayTrigger from '/components/overlay_trigger' instead"}
-      ]
-    }],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": [
+          {
+            "group": ["react-bootstrap"],
+            "importNames": ["OverlayTrigger"],
+            "message": "Please use OverlayTrigger from '/components/overlay_trigger' instead."
+          },
+          {
+            "group": ["@mattermost/compass-components/*"],
+            "message": "compass-components is now archived"
+          }
+        ]
+      }
+    ],
     "max-lines": ["warn", {"max": 800, "skipBlankLines": true, "skipComments": true}],
     "formatjs/no-multiple-whitespaces": ["error"]
   },

webapp/channels/src/components/activity_and_insights/activity_and_insights_link/activity_and_insights_link.tsx

@@ -6,7 +6,7 @@ import {Link, useRouteMatch, useLocation, matchPath} from 'react-router-dom';
 import {useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 import classNames from 'classnames';
-import Icon from '@mattermost/compass-components/foundations/icon';
+import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 import {insightsAreEnabled} from 'mattermost-redux/selectors/entities/preferences';
 import {getIsRhsOpen, getRhsState} from 'selectors/rhs';

webapp/channels/src/components/activity_and_insights/insights/time_frame_dropdown/time_frame_dropdown.tsx

@@ -5,7 +5,7 @@ import React, {memo, useCallback} from 'react';
 
 import ReactSelect, {ValueType} from 'react-select';
 
-import Icon from '@mattermost/compass-components/foundations/icon/Icon';
+import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
 
 import {trackEvent} from 'actions/telemetry_actions';
 

webapp/channels/src/components/app_bar/app_bar_marketplace.tsx

@@ -6,7 +6,7 @@ import {useDispatch} from 'react-redux';
 import {useIntl} from 'react-intl';
 import {Tooltip} from 'react-bootstrap';
 
-import Icon from '@mattermost/compass-components/foundations/icon';
+import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 import {openModal} from 'actions/views/modals';
 

webapp/channels/src/components/compass_theme_provider/compass_theme_provider.tsx

@@ -3,7 +3,7 @@
 
 import React, {useState, useEffect} from 'react';
 
-import ThemeProvider, {lightTheme} from '@mattermost/compass-components/utilities/theme';
+import ThemeProvider, {lightTheme} from '@mattermost/compass-components/utilities/theme'; // eslint-disable-line no-restricted-imports
 
 import {Theme} from 'mattermost-redux/selectors/entities/preferences';
 

webapp/channels/src/components/custom_status/date_time_input.tsx

@@ -9,7 +9,7 @@ import {DateTime} from 'luxon';
 
 import moment, {Moment} from 'moment-timezone';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import MenuWrapper from 'components/widgets/menu/menu_wrapper';
 import Input from 'components/widgets/inputs/input/input';

webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 import {DayPickerProps} from 'react-day-picker';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import classNames from 'classnames';
 

webapp/channels/src/components/global_header/center_controls/global_search_nav/global_search_nav.tsx

@@ -4,7 +4,7 @@
 import React, {useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 
-import Flex from '@mattermost/compass-components/utilities/layout/Flex';
+import Flex from '@mattermost/compass-components/utilities/layout/Flex'; // eslint-disable-line no-restricted-imports
 
 import {closeRightHandSide, showMentions} from 'actions/views/rhs';
 import Search from 'components/search';

webapp/channels/src/components/global_header/center_controls/user_guide_dropdown/user_guide_dropdown.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {FormattedMessage, injectIntl, WrappedComponentProps} from 'react-intl';
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {trackEvent} from 'actions/telemetry_actions';
 

webapp/channels/src/components/global_header/left_controls/history_buttons/history_buttons.tsx

@@ -5,7 +5,7 @@ import React, {useEffect, useState, useCallback} from 'react';
 import {useHistory} from 'react-router-dom';
 import styled from 'styled-components';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {trackEvent} from 'actions/telemetry_actions';
 import * as Utils from 'utils/utils';

webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/product_branding.test.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {shallow} from 'enzyme';
-import Icon from '@mattermost/compass-components/foundations/icon';
+import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 import {TopLevelProducts} from 'utils/constants';
 

webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/product_branding.tsx

@@ -3,8 +3,8 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import Icon from '@mattermost/compass-components/foundations/icon';
-import Heading from '@mattermost/compass-components/components/heading';
+import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
+import Heading from '@mattermost/compass-components/components/heading'; // eslint-disable-line no-restricted-imports
 
 import {useCurrentProduct} from 'utils/products';
 

webapp/channels/src/components/global_header/left_controls/product_menu/product_menu.tsx

@@ -6,7 +6,7 @@ import {useIntl} from 'react-intl';
 import styled from 'styled-components';
 import {useDispatch, useSelector} from 'react-redux';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {getConfig} from 'mattermost-redux/selectors/entities/general';
 import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users';

webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_item/product_menu_item.tsx

@@ -7,7 +7,7 @@ import {Link} from 'react-router-dom';
 
 import styled from 'styled-components';
 
-import Icon, {TIconGlyph} from '@mattermost/compass-components/foundations/icon';
+import Icon, {TIconGlyph} from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 export interface ProductMenuItemProps {
     destination: string;

webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx

@@ -4,7 +4,7 @@
 import React, {useEffect} from 'react';
 import {useIntl} from 'react-intl';
 
-import Icon from '@mattermost/compass-components/foundations/icon';
+import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 import {Permissions} from 'mattermost-redux/constants';
 

webapp/channels/src/components/global_header/right_controls/at_mentions_button/at_mentions_button.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {GlobalState} from 'types/store';
 

webapp/channels/src/components/global_header/right_controls/at_mentions_button/at_mentions_button.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {closeRightHandSide, showMentions} from 'actions/views/rhs';
 import OverlayTrigger from 'components/overlay_trigger';

webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.test.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {GlobalState} from 'types/store';
 

webapp/channels/src/components/global_header/right_controls/saved_posts_button/saved_posts_button.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 import {useDispatch, useSelector} from 'react-redux';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {closeRightHandSide, showFlaggedPosts} from 'actions/views/rhs';
 import OverlayTrigger from 'components/overlay_trigger';

webapp/channels/src/components/global_header/right_controls/settings_button/settings_button.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import OverlayTrigger from 'components/overlay_trigger';
 import Tooltip from 'components/tooltip';

webapp/channels/src/components/info_toast/info_toast.tsx

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import {CSSTransition} from 'react-transition-group';
 import {useIntl} from 'react-intl';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 import './info_toast.scss';
 
 type Props = {

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx

@@ -5,7 +5,7 @@ import React, {useRef, useCallback, useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import styled, {css} from 'styled-components';
 
-import Icon from '@mattermost/compass-components/foundations/icon/Icon';
+import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
 
 import {FormattedMessage} from 'react-intl';
 

webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist_animations.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import StatusIcon from '@mattermost/compass-components/components/status-icon';
+import StatusIcon from '@mattermost/compass-components/components/status-icon'; // eslint-disable-line no-restricted-imports
 
 const Animation = styled.div`
     position: absolute;

webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx

@@ -6,7 +6,7 @@ import React, {memo, useCallback, useState} from 'react';
 import {defineMessages, useIntl} from 'react-intl';
 import classNames from 'classnames';
 
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 import {CheckIcon} from '@mattermost/compass-icons/components';
 
 import {Post} from '@mattermost/types/posts';

webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx

@@ -3,7 +3,7 @@
 
 import React, {MouseEvent} from 'react';
 import {useIntl} from 'react-intl';
-import Icon from '@mattermost/compass-components/foundations/icon';
+import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 import {getDateForTimezone} from 'mattermost-redux/utils/timezone_utils';
 import {isSameDay, isWithinLastWeek, isYesterday} from 'utils/datetime';

webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.test.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import {shallow} from 'enzyme';
-import IconButton from '@mattermost/compass-components/components/icon-button';
+import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports
 
 import {FileSizes} from 'utils/file_utils';
 import {CloudProducts} from 'utils/constants';

webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx

@@ -5,8 +5,8 @@ import React, {useCallback, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import styled from 'styled-components';
 
-import Flex from '@mattermost/compass-components/utilities/layout/Flex';
-import Heading from '@mattermost/compass-components/components/heading';
+import Flex from '@mattermost/compass-components/utilities/layout/Flex'; // eslint-disable-line no-restricted-imports
+import Heading from '@mattermost/compass-components/components/heading'; // eslint-disable-line no-restricted-imports
 
 import {getCurrentTeam} from 'mattermost-redux/selectors/entities/teams';
 import {GlobalState} from 'types/store';

webapp/channels/src/components/status_dropdown/status_dropdown.tsx

@@ -5,10 +5,10 @@ import React, {ReactNode} from 'react';
 import {IntlShape, injectIntl, FormattedDate, FormattedMessage, FormattedTime} from 'react-intl';
 import classNames from 'classnames';
 
-import StatusIcon from '@mattermost/compass-components/components/status-icon';
-import Text from '@mattermost/compass-components/components/text';
-import Icon from '@mattermost/compass-components/foundations/icon/Icon';
-import {TUserStatus} from '@mattermost/compass-components/shared';
+import StatusIcon from '@mattermost/compass-components/components/status-icon'; // eslint-disable-line no-restricted-imports
+import Text from '@mattermost/compass-components/components/text'; // eslint-disable-line no-restricted-imports
+import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
+import {TUserStatus} from '@mattermost/compass-components/shared'; // eslint-disable-line no-restricted-imports
 
 import {ActionFunc} from 'mattermost-redux/types/actions';
 

webapp/channels/src/components/suggestion/command_provider/command_provider.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import {Store} from 'redux';
 
-import Icon from '@mattermost/compass-components/foundations/icon/Icon';
+import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports
 
 import {Client4} from 'mattermost-redux/client';
 import {appsEnabled} from 'mattermost-redux/selectors/entities/apps';

webapp/channels/src/types/store/plugins.ts

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import {TIconGlyph} from '@mattermost/compass-components/foundations/icon';
+import {TIconGlyph} from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 import {ProductScope} from '@mattermost/types/products';