mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

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

Просмотр исходного кода 
* Replace compass-components icon component with compass-icons
Этот коммит содержится в:
Ashish Dhama
2023-04-12 21:39:49 +05:30
коммит произвёл GitHub
родитель 155e896dcf
Коммит c3e69e97e4
10 изменённых файлов: 103 добавлений и 169 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
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
size={12}
glyph={'chart-line'}
/>
<ChartLineIcon size={14}/>
</span>
<div className='SidebarChannelLinkLabel_wrapper'>
<span className='SidebarChannelLinkLabel sidebar-item__name'>

9
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
size={16}
glyph={'view-grid-plus-outline'}
/>
<ViewGridPlusOutlineIcon size={18}/>
</button>
</OverlayTrigger>
);

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

4
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();
});
});

9
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
size={20}
glyph={currentProduct && typeof currentProduct.switcherIcon === 'string' ? currentProduct.switcherIcon : 'product-channels'}
/>
<Icon size={24}/>
<Heading
element='h1'
size={200}

56
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 => (
<MenuItem
to={destination}
onClick={onClick}
id={id}
>
<StyledIcon
size={20}
glyph={icon || 'none'}
/>
<MenuItemTextContainer>
{text}
</MenuItemTextContainer>
{active && (
<StyledIcon
size={16}
glyph='check'
const ProductMenuItem = ({icon, destination, text, active, onClick, tourTip, id}: ProductMenuItemProps): JSX.Element => {
const ProductIcon = glyphMap[icon];
return (
<MenuItem
to={destination}
onClick={onClick}
id={id}
>
<ProductIcon
size={24}
color={'var(--button-bg)'}
/>
)}
{tourTip || null}
</MenuItem>
);
<MenuItemTextContainer>
{text}
</MenuItemTextContainer>
{active && (
<CheckIcon
size={18}
color={'var(--button-bg)'}
/>
)}
{tourTip || null}
</MenuItem>
);
};
export default ProductMenuItem;

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

52
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
size={16}
glyph={'application-cog'}
/>
}
icon={<ApplicationCogIcon size={18}/>}
/>
</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
size={16}
glyph={'webhook-incoming'}
/>
}
icon={<WebhookIncomingIcon size={18}/>}
/>
<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
size={16}
glyph={'account-multiple-outline'}
/>
}
icon={<AccountMultipleOutlineIcon size={18}/>}
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
size={16}
glyph='view-grid-plus-outline'
/>
}
icon={<ViewGridPlusOutlineIcon size={18}/>}
/>
</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
size={16}
glyph={'download-outline'}
/>
}
icon={<DownloadOutlineIcon size={18}/>}
/>
<Menu.ItemToggleModalRedux
id='about'
modalId={ModalIdentifiers.ABOUT}
dialogType={AboutBuildModal}
text={formatMessage({id: 'navbar_dropdown.about', defaultMessage: 'About {appTitle}'}, {appTitle: siteName})}
icon={
<Icon
size={16}
glyph={'information-outline'}
/>
}
icon={<InformationOutlineIcon size={18}/>}
/>
</div>
</Menu.Group>

8
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
glyph={'pencil-outline'}
size={10}
/>
<PencilOutlineIcon size={12}/>
{editedText}
</span>
);

6
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