From c3e69e97e47f69f61fb603586091420854d166f1 Mon Sep 17 00:00:00 2001 From: Ashish Dhama <16203333+AshishDhama@users.noreply.github.com> Date: Wed, 12 Apr 2023 21:39:49 +0530 Subject: [PATCH] [MM-51445] Replace compass-components icon component with compass icons (#22527) * Replace compass-components icon component with compass-icons --- .../activity_and_insights_link.tsx | 8 +- .../app_bar/app_bar_marketplace.tsx | 9 +- .../product_branding.test.tsx.snap | 15 +-- .../product_branding.test.tsx | 4 - .../product_branding/product_branding.tsx | 9 +- .../product_menu_item/product_menu_item.tsx | 56 +++++----- .../product_menu_list.test.tsx.snap | 105 +++++++----------- .../product_menu_list/product_menu_list.tsx | 52 +++------ .../post_edited_indicator.tsx | 8 +- webapp/channels/src/types/store/plugins.ts | 6 +- 10 files changed, 103 insertions(+), 169 deletions(-) diff --git a/webapp/channels/src/components/activity_and_insights/activity_and_insights_link/activity_and_insights_link.tsx b/webapp/channels/src/components/activity_and_insights/activity_and_insights_link/activity_and_insights_link.tsx index 3f9ff03968..04293386d6 100644 --- a/webapp/channels/src/components/activity_and_insights/activity_and_insights_link/activity_and_insights_link.tsx +++ b/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} > - +
diff --git a/webapp/channels/src/components/app_bar/app_bar_marketplace.tsx b/webapp/channels/src/components/app_bar/app_bar_marketplace.tsx index 457a1b83e2..1bbfe5cafe 100644 --- a/webapp/channels/src/components/app_bar/app_bar_marketplace.tsx +++ b/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} > - + ); diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/__snapshots__/product_branding.test.tsx.snap b/webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/__snapshots__/product_branding.test.tsx.snap index b0df6be075..8892eb2521 100644 --- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/__snapshots__/product_branding.test.tsx.snap +++ b/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 - - - { , ); - expect(wrapper.find(Icon).prop('glyph')).toEqual('product-channels'); expect(wrapper).toMatchSnapshot(); }); @@ -32,7 +30,6 @@ describe('components/ProductBranding', () => { , ); - expect(wrapper.find(Icon).prop('glyph')).toEqual('product-playbooks'); expect(wrapper).toMatchSnapshot(); }); @@ -44,7 +41,6 @@ describe('components/ProductBranding', () => { , ); - expect(wrapper.find(Icon).prop('glyph')).toEqual('product-boards'); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/product_branding.tsx b/webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/product_branding.tsx index 628e26b3d7..c95f8e4f03 100644 --- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_branding/product_branding.tsx +++ b/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 ( - + 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 => ( - - - - {text} - - {active && ( - { + const ProductIcon = glyphMap[icon]; + + return ( + + - )} - {tourTip || null} - -); + + {text} + + {active && ( + + )} + {tourTip || null} + + ); +}; export default ProductMenuItem; diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap index d9fa569664..06e734c14b 100644 --- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/__snapshots__/product_menu_list.test.tsx.snap +++ b/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 > } id="systemConsole" @@ -101,9 +100,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1 } id="integrations" @@ -127,9 +125,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1 } disabled={false} icon={ - } id="userGroups" @@ -154,9 +151,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1 } dialogType={[Function]} icon={ - } id="marketplaceModal" @@ -167,9 +163,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1 } id="nativeAppLink" @@ -187,9 +182,8 @@ exports[`components/global/product_switcher_menu should match snapshot with id 1 } } icon={ - } id="about" @@ -285,9 +279,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most > } id="systemConsole" @@ -302,9 +295,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most } id="integrations" @@ -328,9 +320,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most } disabled={false} icon={ - } id="userGroups" @@ -355,9 +346,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most } dialogType={[Function]} icon={ - } id="marketplaceModal" @@ -368,9 +358,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most } id="nativeAppLink" @@ -388,9 +377,8 @@ exports[`components/global/product_switcher_menu should match snapshot with most } } icon={ - } id="about" @@ -419,9 +407,8 @@ exports[`components/global/product_switcher_menu should match userGroups snapsho } disabled={false} icon={ - } id="userGroups" @@ -449,9 +436,8 @@ exports[`components/global/product_switcher_menu should match userGroups snapsho } disabled={true} icon={ - } id="userGroups" @@ -492,9 +478,8 @@ exports[`components/global/product_switcher_menu should match userGroups snapsho } disabled={false} icon={ - } id="userGroups" @@ -606,9 +591,8 @@ exports[`components/global/product_switcher_menu should show integrations should > } id="systemConsole" @@ -623,9 +607,8 @@ exports[`components/global/product_switcher_menu should show integrations should } id="integrations" @@ -649,9 +632,8 @@ exports[`components/global/product_switcher_menu should show integrations should } disabled={false} icon={ - } id="userGroups" @@ -676,9 +658,8 @@ exports[`components/global/product_switcher_menu should show integrations should } dialogType={[Function]} icon={ - } id="marketplaceModal" @@ -689,9 +670,8 @@ exports[`components/global/product_switcher_menu should show integrations should } id="nativeAppLink" @@ -709,9 +689,8 @@ exports[`components/global/product_switcher_menu should show integrations should } } icon={ - } id="about" diff --git a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx b/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx index 13804b0b16..6c9cf91f47 100644 --- a/webapp/channels/src/components/global_header/left_controls/product_menu/product_menu_list/product_menu_list.tsx +++ b/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 Icon from '@mattermost/compass-components/foundations/icon'; // eslint-disable-line no-restricted-imports +import { + 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={} /> { show={isMessaging && showIntegrations} to={'/' + teamName + '/integrations'} text={formatMessage({id: 'navbar_dropdown.integrations', defaultMessage: 'Integrations'})} - icon={ - - } + icon={} /> { backButtonAction: openGroupsModal, }} text={formatMessage({id: 'navbar_dropdown.userGroups', defaultMessage: 'User Groups'})} - icon={ - - } + icon={} disabled={isStarterFree} sibling={(isStarterFree || isFreeTrial) && ( { dialogType={MarketplaceModal} dialogProps={{openedFrom: 'product_menu'}} text={formatMessage({id: 'navbar_dropdown.marketplace', defaultMessage: 'App Marketplace'})} - icon={ - - } + icon={} /> { show={appDownloadLink && !UserAgent.isMobileApp()} url={makeUrlSafe(appDownloadLink)} text={formatMessage({id: 'navbar_dropdown.nativeApps', defaultMessage: 'Download Apps'})} - icon={ - - } + icon={} /> - } + icon={} />
diff --git a/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx b/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx index c4a337fb98..8d6f52bcc4 100644 --- a/webapp/channels/src/components/post_view/post_edited_indicator/post_edited_indicator.tsx +++ b/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} > - + {editedText} ); diff --git a/webapp/channels/src/types/store/plugins.ts b/webapp/channels/src/types/store/plugins.ts index ba2c17594e..cffffb5fcd 100644 --- a/webapp/channels/src/types/store/plugins.ts +++ b/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