diff --git a/webapp/channels/package.json b/webapp/channels/package.json index 0839a216b2..fc7f91e38a 100644 --- a/webapp/channels/package.json +++ b/webapp/channels/package.json @@ -167,7 +167,7 @@ "jest-junit": "16.0.0", "jest-styled-components": "7.2.0", "jest-watch-typeahead": "2.2.2", - "mmjstool": "github:mattermost/mattermost-utilities#83b1b311972b8f5e750aae4019457a40abb5aa44", + "mmjstool": "github:mattermost/mattermost-utilities#73e61d2ede0ebf802492df4cfbac481d35efed54", "nock": "13.2.8", "prettier": "2.3.2", "react-router-enzyme-context": "1.2.0", diff --git a/webapp/channels/src/components/localized_icon.test.tsx b/webapp/channels/src/components/localized_icon.test.tsx deleted file mode 100644 index b24fd42a03..0000000000 --- a/webapp/channels/src/components/localized_icon.test.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import React from 'react'; - -import {mountWithIntl} from 'tests/helpers/intl-test-helper'; - -import LocalizedIcon from './localized_icon'; - -describe('LocalizedIcon', () => { - const baseProps = { - title: { - id: 'test.id', - defaultMessage: 'test default message', - }, - }; - - test('should render localized title', () => { - const wrapper = mountWithIntl(); - - expect(wrapper.find('i').prop('title')).toBe(baseProps.title.defaultMessage); - }); - - test('should render using given component', () => { - const props = { - ...baseProps, - }; - - const wrapper = mountWithIntl( - , - ); - - expect(wrapper.find('i').exists()).toBe(false); - expect(wrapper.find('span').exists()).toBe(true); - expect(wrapper.find('span').prop('title')).toBe(baseProps.title.defaultMessage); - }); - - test('should pass other props to component', () => { - const props = { - ...baseProps, - className: 'my-icon', - }; - - const wrapper = mountWithIntl(); - - expect(wrapper.find('i').prop('className')).toBe(props.className); - }); -}); diff --git a/webapp/channels/src/components/localized_icon.tsx b/webapp/channels/src/components/localized_icon.tsx deleted file mode 100644 index aafabea7df..0000000000 --- a/webapp/channels/src/components/localized_icon.tsx +++ /dev/null @@ -1,59 +0,0 @@ -// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -import type {PrimitiveType, FormatXMLElementFn} from 'intl-messageformat'; -import React from 'react'; -import type {HTMLAttributes} from 'react'; -import {useIntl} from 'react-intl'; -import type {MessageDescriptor} from 'react-intl'; - -type Props = Omit, 'title' | 'component'> & { - component?: 'i' | 'span'; - ariaLabel?: MessageDescriptor & { - values?: Record>; - }; - title?: MessageDescriptor & { - values?: Record>; - }; -} - -/** - * @deprecated Use react-intl for title and aria-label instead and make revelant i or span tags for the icon - */ -const LocalizedIcon = React.forwardRef((props: Props, ref?: React.Ref) => { - const { - component = 'i', - ariaLabel, - title, - ...otherProps - } = props; - - const {formatMessage} = useIntl(); - - if (component !== 'i' && component !== 'span') { - return null; - } - - // Use an uppercase name since JSX thinks anything lowercase is an HTML tag - const Component = component; - - const iconProps: HTMLAttributes = { - ...otherProps, - }; - if (ariaLabel) { - iconProps['aria-label'] = formatMessage({id: ariaLabel.id, defaultMessage: ariaLabel.defaultMessage}, ariaLabel.values); - } - if (title) { - iconProps.title = formatMessage({id: title.id, defaultMessage: title.defaultMessage}, title.values); - } - - return ( - - ); -}); -LocalizedIcon.displayName = 'LocalizedIcon'; - -export default LocalizedIcon; diff --git a/webapp/package-lock.json b/webapp/package-lock.json index e5205100a6..851de409d7 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -213,7 +213,7 @@ "jest-junit": "16.0.0", "jest-styled-components": "7.2.0", "jest-watch-typeahead": "2.2.2", - "mmjstool": "github:mattermost/mattermost-utilities#83b1b311972b8f5e750aae4019457a40abb5aa44", + "mmjstool": "github:mattermost/mattermost-utilities#73e61d2ede0ebf802492df4cfbac481d35efed54", "nock": "13.2.8", "prettier": "2.3.2", "react-router-enzyme-context": "1.2.0", @@ -17036,8 +17036,8 @@ }, "node_modules/mmjstool": { "version": "1.0.0", - "resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#83b1b311972b8f5e750aae4019457a40abb5aa44", - "integrity": "sha512-SFAbT+eN1mvgSfRTe8k6IMKVWbhGItTJtxZ+Pt0mX+fe8pakB3MkIkWzHBHVnEDI9Ek9kmQFGF1aZwzKFHXyYQ==", + "resolved": "git+ssh://git@github.com/mattermost/mattermost-utilities.git#73e61d2ede0ebf802492df4cfbac481d35efed54", + "integrity": "sha512-FnyR3NE3UWkEwmhomKmArHxL3BIjZ2MCCiPX8L/hkDcCTsO5YCgrGzT9OBvJeQnB1RrIIu2Rm9DsK8k4NkCCQA==", "dev": true, "dependencies": { "estree-walk": "^2.2.0",