[MM-51445] Replace compass-components icon component with compass icons (#22527)

* Replace compass-components icon component with compass-icons

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

@@ -6,8 +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'; // eslint-disable-line no-restricted-imports
+import {ChartLineIcon} from '@mattermost/compass-icons/components';
-
 import {insightsAreEnabled} from 'mattermost-redux/selectors/entities/preferences';
 import {getIsRhsOpen, getRhsState} from 'selectors/rhs';
 
@@ -62,10 +61,7 @@ const ActivityAndInsightsLink = () => {
                     tabIndex={0}
                 >
                     <span className='icon'>
-                        <Icon
+                        <ChartLineIcon size={14}/>
-                            size={12}
-                            glyph={'chart-line'}
-                        />
                     </span>
                     <div className='SidebarChannelLinkLabel_wrapper'>
                         <span className='SidebarChannelLinkLabel sidebar-item__name'>

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

@@ -5,15 +5,13 @@ import React, {useCallback} from 'react';
 import {useDispatch} from 'react-redux';
 import {useIntl} from 'react-intl';
 import {Tooltip} from 'react-bootstrap';
-
-import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
-
 import {openModal} from 'actions/views/modals';
 
 import MarketplaceModal from 'components/plugin_marketplace/marketplace_modal';
 import OverlayTrigger from 'components/overlay_trigger';
 
 import {Constants, ModalIdentifiers} from 'utils/constants';
+import {ViewGridPlusOutlineIcon} from '@mattermost/compass-icons/components';
 
 const AppBarMarketplace = () => {
     const {formatMessage} = useIntl();
@@ -48,10 +46,7 @@ const AppBarMarketplace = () => {
                 aria-label={label}
                 onClick={handleOpenMarketplace}
             >
-                <Icon
+                <ViewGridPlusOutlineIcon size={18}/>
-                    size={16}
-                    glyph={'view-grid-plus-outline'}
-                />
             </button>
         </OverlayTrigger>
     );

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

@@ -4,9 +4,8 @@ exports[`components/ProductBranding should show correct icon glyph when we are o
 <ProductBrandingContainer
   tabIndex={0}
 >
-  <Icon
+  <ProductBoardsIcon
-    glyph="product-boards"
+    size={24}
-    size={20}
   />
   <Heading
     element="h1"
@@ -22,9 +21,8 @@ exports[`components/ProductBranding should show correct icon glyph when we are o
 <ProductBrandingContainer
   tabIndex={0}
 >
-  <Icon
+  <ProductChannelsIcon
-    glyph="product-channels"
+    size={24}
-    size={20}
   />
   <Heading
     element="h1"
@@ -40,9 +38,8 @@ exports[`components/ProductBranding should show correct icon glyph when we are o
 <ProductBrandingContainer
   tabIndex={0}
 >
-  <Icon
+  <ProductPlaybooksIcon
-    glyph="product-playbooks"
+    size={24}
-    size={20}
   />
   <Heading
     element="h1"

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

@@ -3,7 +3,6 @@
 
 import React from 'react';
 import {shallow} from 'enzyme';
-import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
 
 import {TopLevelProducts} from 'utils/constants';
 
@@ -21,7 +20,6 @@ describe('components/ProductBranding', () => {
             <ProductBranding/>,
         );
 
-        expect(wrapper.find(Icon).prop('glyph')).toEqual('product-channels');
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -32,7 +30,6 @@ describe('components/ProductBranding', () => {
             <ProductBranding/>,
         );
 
-        expect(wrapper.find(Icon).prop('glyph')).toEqual('product-playbooks');
         expect(wrapper).toMatchSnapshot();
     });
 
@@ -44,7 +41,6 @@ describe('components/ProductBranding', () => {
             <ProductBranding/>,
         );
 
-        expect(wrapper.find(Icon).prop('glyph')).toEqual('product-boards');
         expect(wrapper).toMatchSnapshot();
     });
 });

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

@@ -3,7 +3,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
+import glyphMap, {ProductChannelsIcon} from '@mattermost/compass-icons/components';
 import Heading from '@mattermost/compass-components/components/heading'; // eslint-disable-line no-restricted-imports
 
 import {useCurrentProduct} from 'utils/products';
@@ -20,12 +20,11 @@ const ProductBrandingContainer = styled.div`
 const ProductBranding = (): JSX.Element => {
     const currentProduct = useCurrentProduct();
 
+    const Icon = currentProduct?.switcherIcon ? glyphMap[currentProduct.switcherIcon] : ProductChannelsIcon;
+
     return (
         <ProductBrandingContainer tabIndex={0}>
-            <Icon
+            <Icon size={24}/>
-                size={20}
-                glyph={currentProduct && typeof currentProduct.switcherIcon === 'string' ? currentProduct.switcherIcon : 'product-channels'}
-            />
             <Heading
                 element='h1'
                 size={200}

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

@@ -7,11 +7,11 @@ import {Link} from 'react-router-dom';
 
 import styled from 'styled-components';
 
-import Icon, {TIconGlyph} from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
+import {IconGlyphTypes} from '@mattermost/compass-icons/IconGlyphs';
-
+import glyphMap, {CheckIcon} from '@mattermost/compass-icons/components';
 export interface ProductMenuItemProps {
     destination: string;
-    icon: TIconGlyph;
+    icon: IconGlyphTypes;
     text: React.ReactNode;
     active: boolean;
     onClick: () => void;
@@ -46,10 +46,6 @@ const MenuItem = styled(Link)`
     }
 `;
 
-const StyledIcon = styled(Icon)`
-    color: var(--button-bg);
-`;
-
 const MenuItemTextContainer = styled.div`
     margin-left: 8px;
     flex-grow: 1;
@@ -58,27 +54,31 @@ const MenuItemTextContainer = styled.div`
     line-height: 20px;
 `;
 
-const ProductMenuItem = ({icon, destination, text, active, onClick, tourTip, id}: ProductMenuItemProps): JSX.Element => (
+const ProductMenuItem = ({icon, destination, text, active, onClick, tourTip, id}: ProductMenuItemProps): JSX.Element => {
+    const ProductIcon = glyphMap[icon];
+
+    return (
         <MenuItem
             to={destination}
             onClick={onClick}
             id={id}
         >
-        <StyledIcon
+            <ProductIcon
-            size={20}
+                size={24}
-            glyph={icon || 'none'}
+                color={'var(--button-bg)'}
             />
             <MenuItemTextContainer>
                 {text}
             </MenuItemTextContainer>
             {active && (
-            <StyledIcon
+                <CheckIcon
-                size={16}
+                    size={18}
-                glyph='check'
+                    color={'var(--button-bg)'}
                 />
             )}
             {tourTip || null}
         </MenuItem>
-);
+    );
+};
 
 export default ProductMenuItem;

webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap

@@ -84,9 +84,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
     >
       <MenuItemLink
         icon={
-          <Icon
+          <ApplicationCogIcon
-            glyph="application-cog"
+            size={18}
-            size={16}
           />
         }
         id="systemConsole"
@@ -101,9 +100,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
     </Connect(SystemPermissionGate)>
     <MenuItemLink
       icon={
-        <Icon
+        <WebhookIncomingIcon
-          glyph="webhook-incoming"
+          size={18}
-          size={16}
         />
       }
       id="integrations"
@@ -127,9 +125,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
       }
       disabled={false}
       icon={
-        <Icon
+        <AccountMultipleOutlineIcon
-          glyph="account-multiple-outline"
+          size={18}
-          size={16}
         />
       }
       id="userGroups"
@@ -154,9 +151,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
         }
         dialogType={[Function]}
         icon={
-          <Icon
+          <ViewGridPlusOutlineIcon
-            glyph="view-grid-plus-outline"
+            size={18}
-            size={16}
           />
         }
         id="marketplaceModal"
@@ -167,9 +163,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
     </Connect(TeamPermissionGate)>
     <MenuItemExternalLink
       icon={
-        <Icon
+        <DownloadOutlineIcon
-          glyph="download-outline"
+          size={18}
-          size={16}
         />
       }
       id="nativeAppLink"
@@ -187,9 +182,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1
         }
       }
       icon={
-        <Icon
+        <InformationOutlineIcon
-          glyph="information-outline"
+          size={18}
-          size={16}
         />
       }
       id="about"
@@ -285,9 +279,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most
     >
       <MenuItemLink
         icon={
-          <Icon
+          <ApplicationCogIcon
-            glyph="application-cog"
+            size={18}
-            size={16}
           />
         }
         id="systemConsole"
@@ -302,9 +295,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most
     </Connect(SystemPermissionGate)>
     <MenuItemLink
       icon={
-        <Icon
+        <WebhookIncomingIcon
-          glyph="webhook-incoming"
+          size={18}
-          size={16}
         />
       }
       id="integrations"
@@ -328,9 +320,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most
       }
       disabled={false}
       icon={
-        <Icon
+        <AccountMultipleOutlineIcon
-          glyph="account-multiple-outline"
+          size={18}
-          size={16}
         />
       }
       id="userGroups"
@@ -355,9 +346,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most
         }
         dialogType={[Function]}
         icon={
-          <Icon
+          <ViewGridPlusOutlineIcon
-            glyph="view-grid-plus-outline"
+            size={18}
-            size={16}
           />
         }
         id="marketplaceModal"
@@ -368,9 +358,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most
     </Connect(TeamPermissionGate)>
     <MenuItemExternalLink
       icon={
-        <Icon
+        <DownloadOutlineIcon
-          glyph="download-outline"
+          size={18}
-          size={16}
         />
       }
       id="nativeAppLink"
@@ -388,9 +377,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most
         }
       }
       icon={
-        <Icon
+        <InformationOutlineIcon
-          glyph="information-outline"
+          size={18}
-          size={16}
         />
       }
       id="about"
@@ -419,9 +407,8 @@ exports[`components/global/product_switcher_menu should match userGroups snapsho
   }
   disabled={false}
   icon={
-    <Icon
+    <AccountMultipleOutlineIcon
-      glyph="account-multiple-outline"
+      size={18}
-      size={16}
     />
   }
   id="userGroups"
@@ -449,9 +436,8 @@ exports[`components/global/product_switcher_menu should match userGroups snapsho
   }
   disabled={true}
   icon={
-    <Icon
+    <AccountMultipleOutlineIcon
-      glyph="account-multiple-outline"
+      size={18}
-      size={16}
     />
   }
   id="userGroups"
@@ -492,9 +478,8 @@ exports[`components/global/product_switcher_menu should match userGroups snapsho
   }
   disabled={false}
   icon={
-    <Icon
+    <AccountMultipleOutlineIcon
-      glyph="account-multiple-outline"
+      size={18}
-      size={16}
     />
   }
   id="userGroups"
@@ -606,9 +591,8 @@ exports[`components/global/product_switcher_menu should show integrations should
     >
       <MenuItemLink
         icon={
-          <Icon
+          <ApplicationCogIcon
-            glyph="application-cog"
+            size={18}
-            size={16}
           />
         }
         id="systemConsole"
@@ -623,9 +607,8 @@ exports[`components/global/product_switcher_menu should show integrations should
     </Connect(SystemPermissionGate)>
     <MenuItemLink
       icon={
-        <Icon
+        <WebhookIncomingIcon
-          glyph="webhook-incoming"
+          size={18}
-          size={16}
         />
       }
       id="integrations"
@@ -649,9 +632,8 @@ exports[`components/global/product_switcher_menu should show integrations should
       }
       disabled={false}
       icon={
-        <Icon
+        <AccountMultipleOutlineIcon
-          glyph="account-multiple-outline"
+          size={18}
-          size={16}
         />
       }
       id="userGroups"
@@ -676,9 +658,8 @@ exports[`components/global/product_switcher_menu should show integrations should
         }
         dialogType={[Function]}
         icon={
-          <Icon
+          <ViewGridPlusOutlineIcon
-            glyph="view-grid-plus-outline"
+            size={18}
-            size={16}
           />
         }
         id="marketplaceModal"
@@ -689,9 +670,8 @@ exports[`components/global/product_switcher_menu should show integrations should
     </Connect(TeamPermissionGate)>
     <MenuItemExternalLink
       icon={
-        <Icon
+        <DownloadOutlineIcon
-          glyph="download-outline"
+          size={18}
-          size={16}
         />
       }
       id="nativeAppLink"
@@ -709,9 +689,8 @@ exports[`components/global/product_switcher_menu should show integrations should
         }
       }
       icon={
-        <Icon
+        <InformationOutlineIcon
-          glyph="information-outline"
+          size={18}
-          size={16}
         />
       }
       id="about"

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

@@ -3,8 +3,14 @@
 
 import React, {useEffect} from 'react';
 import {useIntl} from 'react-intl';
-
+import {
-import Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
+    AccountMultipleOutlineIcon,
+    ApplicationCogIcon,
+    DownloadOutlineIcon,
+    InformationOutlineIcon,
+    ViewGridPlusOutlineIcon,
+    WebhookIncomingIcon,
+} from '@mattermost/compass-icons/components';
 
 import {Permissions} from 'mattermost-redux/constants';
 
@@ -128,12 +134,7 @@ const ProductMenuList = (props: Props): JSX.Element | null => {
                                 )}
                             </>
                         )}
-                        icon={
+                        icon={<ApplicationCogIcon size={18}/>}
-                            <Icon
-                                size={16}
-                                glyph={'application-cog'}
-                            />
-                        }
                     />
                 </SystemPermissionGate>
                 <Menu.ItemLink
@@ -141,12 +142,7 @@ const ProductMenuList = (props: Props): JSX.Element | null => {
                     show={isMessaging && showIntegrations}
                     to={'/' + teamName + '/integrations'}
                     text={formatMessage({id: 'navbar_dropdown.integrations', defaultMessage: 'Integrations'})}
-                    icon={
+                    icon={<WebhookIncomingIcon size={18}/>}
-                        <Icon
-                            size={16}
-                            glyph={'webhook-incoming'}
-                        />
-                    }
                 />
                 <Menu.ItemToggleModalRedux
                     id='userGroups'
@@ -157,12 +153,7 @@ const ProductMenuList = (props: Props): JSX.Element | null => {
                         backButtonAction: openGroupsModal,
                     }}
                     text={formatMessage({id: 'navbar_dropdown.userGroups', defaultMessage: 'User Groups'})}
-                    icon={
+                    icon={<AccountMultipleOutlineIcon size={18}/>}
-                        <Icon
-                            size={16}
-                            glyph={'account-multiple-outline'}
-                        />
-                    }
                     disabled={isStarterFree}
                     sibling={(isStarterFree || isFreeTrial) && (
                         <RestrictedIndicator
@@ -215,12 +206,7 @@ const ProductMenuList = (props: Props): JSX.Element | null => {
                         dialogType={MarketplaceModal}
                         dialogProps={{openedFrom: 'product_menu'}}
                         text={formatMessage({id: 'navbar_dropdown.marketplace', defaultMessage: 'App Marketplace'})}
-                        icon={
+                        icon={<ViewGridPlusOutlineIcon size={18}/>}
-                            <Icon
-                                size={16}
-                                glyph='view-grid-plus-outline'
-                            />
-                        }
                     />
                 </TeamPermissionGate>
                 <Menu.ItemExternalLink
@@ -228,24 +214,14 @@ const ProductMenuList = (props: Props): JSX.Element | null => {
                     show={appDownloadLink && !UserAgent.isMobileApp()}
                     url={makeUrlSafe(appDownloadLink)}
                     text={formatMessage({id: 'navbar_dropdown.nativeApps', defaultMessage: 'Download Apps'})}
-                    icon={
+                    icon={<DownloadOutlineIcon size={18}/>}
-                        <Icon
-                            size={16}
-                            glyph={'download-outline'}
-                        />
-                    }
                 />
                 <Menu.ItemToggleModalRedux
                     id='about'
                     modalId={ModalIdentifiers.ABOUT}
                     dialogType={AboutBuildModal}
                     text={formatMessage({id: 'navbar_dropdown.about', defaultMessage: 'About {appTitle}'}, {appTitle: siteName})}
-                    icon={
+                    icon={<InformationOutlineIcon size={18}/>}
-                        <Icon
-                            size={16}
-                            glyph={'information-outline'}
-                        />
-                    }
                 />
             </div>
         </Menu.Group>

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

@@ -3,11 +3,12 @@
 
 import React, {MouseEvent} from 'react';
 import {useIntl} from 'react-intl';
-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';
 
+import {PencilOutlineIcon} from '@mattermost/compass-icons/components';
+
 import OverlayTrigger from '../../overlay_trigger';
 import Tooltip from '../../tooltip';
 
@@ -87,10 +88,7 @@ const PostEditedIndicator = ({postId, isMilitaryTime, timeZone, editedAt = 0, po
             data-post-id={postId}
             data-edited-at={editedAt}
         >
-            <Icon
+            <PencilOutlineIcon size={12}/>
-                glyph={'pencil-outline'}
-                size={10}
-            />
             {editedText}
         </span>
     );

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

@@ -2,9 +2,6 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-
-import {TIconGlyph} from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports
-
 import {ProductScope} from '@mattermost/types/products';
 
 import {ClientPluginManifest} from '@mattermost/types/plugins';
@@ -13,6 +10,7 @@ import {FileInfo} from '@mattermost/types/files';
 import {Post, PostEmbed} from '@mattermost/types/posts';
 import {IDMappedObjects} from '@mattermost/types/utilities';
 import {TopBoardResponse} from '@mattermost/types/insights';
+import {IconGlyphTypes} from '@mattermost/compass-icons/IconGlyphs';
 
 import {WebSocketClient} from '@mattermost/client';
 
@@ -165,7 +163,7 @@ export type ProductComponent = {
     /**
      * A compass-icon glyph to display as the icon in the product switcher
      */
-    switcherIcon: TIconGlyph;
+    switcherIcon: IconGlyphTypes;
 
     /**
      * A string or React element to display in the product switcher