From b5ce8ac741e8baad26bdc5bd3f61b3f7a5250a75 Mon Sep 17 00:00:00 2001 From: Ashish Dhama <16203333+AshishDhama@users.noreply.github.com> Date: Wed, 3 May 2023 19:54:01 +0530 Subject: [PATCH] [WebApp][MM-52138]: Wrap all the components using compass-components with compass-components theme provider (#22941) * wrap all the components using compass-components with compass-components theme provider Co-authored-by: Mattermost Build --- .../time_frame_dropdown.tsx | 8 +- .../custom_status/date_time_input.tsx | 128 ++--- .../dnd_custom_time_picker_modal.tsx | 116 +++-- .../dnd_custom_time_picker_modal/index.ts | 3 + .../global_header/global_header.tsx | 16 +- .../onboarding_tasklist.tsx | 31 +- .../edited_post_item.test.tsx.snap | 488 +++++++++--------- .../edited_post_item.test.tsx | 2 + .../edited_post_item/edited_post_item.tsx | 68 +-- .../edited_post_item/index.ts | 3 + .../sidebar/sidebar_header/sidebar_header.tsx | 7 +- .../status_dropdown.test.tsx.snap | 99 ++-- .../status_dropdown/status_dropdown.tsx | 21 +- .../command_provider/command_provider.tsx | 8 +- 14 files changed, 494 insertions(+), 504 deletions(-) diff --git a/webapp/channels/src/components/activity_and_insights/insights/time_frame_dropdown/time_frame_dropdown.tsx b/webapp/channels/src/components/activity_and_insights/insights/time_frame_dropdown/time_frame_dropdown.tsx index 501da6d717..b7bf7c91ef 100644 --- a/webapp/channels/src/components/activity_and_insights/insights/time_frame_dropdown/time_frame_dropdown.tsx +++ b/webapp/channels/src/components/activity_and_insights/insights/time_frame_dropdown/time_frame_dropdown.tsx @@ -4,8 +4,7 @@ import React, {memo, useCallback} from 'react'; import ReactSelect, {ValueType} from 'react-select'; - -import Icon from '@mattermost/compass-components/foundations/icon/Icon'; // eslint-disable-line no-restricted-imports +import ChevronDownIcon from '@mattermost/compass-icons/components/chevron-down'; import {trackEvent} from 'actions/telemetry_actions'; @@ -57,10 +56,7 @@ const TimeFrameDropdown = (props: Props) => { const CustomDropwdown = () => { return ( - + ); }; diff --git a/webapp/channels/src/components/custom_status/date_time_input.tsx b/webapp/channels/src/components/custom_status/date_time_input.tsx index 8c1f83b3a8..252ba2f58e 100644 --- a/webapp/channels/src/components/custom_status/date_time_input.tsx +++ b/webapp/channels/src/components/custom_status/date_time_input.tsx @@ -16,11 +16,14 @@ import Input from 'components/widgets/inputs/input/input'; import DatePicker from 'components/date_picker'; import Menu from 'components/widgets/menu/menu'; import Timestamp from 'components/timestamp'; +import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider'; + import {getCurrentLocale} from 'selectors/i18n'; import {isKeyPressed} from 'utils/keyboard'; import {localizeMessage} from 'utils/utils'; import {getCurrentMomentForTimezone} from 'utils/timezone'; import Constants, {A11yCustomEventTypes, A11yFocusEventDetail} from 'utils/constants'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; const CUSTOM_STATUS_TIME_PICKER_INTERVALS_IN_MINUTES = 30; @@ -62,6 +65,7 @@ const DateTimeInputContainer: React.FC = (props: Props) => { const [isPopperOpen, setIsPopperOpen] = useState(false); const {formatMessage} = useIntl(); const timeButtonRef = useRef(null); + const theme = useSelector(getTheme); const handlePopperOpenState = useCallback((isOpen: boolean) => { setIsPopperOpen(isOpen); @@ -150,71 +154,73 @@ const DateTimeInputContainer: React.FC = (props: Props) => { }; return ( -
-
- - handlePopperOpenState(true)} - tabIndex={-1} - inputPrefix={inputIcon} - /> - -
-
- -
- - - - {Array.isArray(timeOptions) && timeOptions.map((option, index) => ( - - } + {formatMessage({id: 'custom_status.expiry.time_picker.title', defaultMessage: 'Time'})} + + + +
+ - ))} - -
- +
+ + + + {Array.isArray(timeOptions) && timeOptions.map((option, index) => ( + + } + /> + ))} + + + + - + ); }; diff --git a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx index f4932ceb86..3601380eb2 100644 --- a/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx +++ b/webapp/channels/src/components/dnd_custom_time_picker_modal/dnd_custom_time_picker_modal.tsx @@ -15,6 +15,7 @@ import {ActionFunc} from 'mattermost-redux/types/actions'; import {UserStatus} from '@mattermost/types/users'; import GenericModal from 'components/generic_modal'; +import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider'; import Constants, {A11yCustomEventTypes, A11yFocusEventDetail, UserStatuses} from 'utils/constants'; import Menu from 'components/widgets/menu/menu'; @@ -26,12 +27,15 @@ import {isKeyPressed} from 'utils/keyboard'; import {localizeMessage} from 'utils/utils'; import Input from 'components/widgets/inputs/input/input'; import DatePicker from 'components/date_picker'; +import {Theme} from 'mattermost-redux/selectors/entities/preferences'; type Props = { onExited: () => void; userId: string; currentDate: Date; locale: string; + + theme: Theme; actions: { setStatus: (status: UserStatus) => ActionFunc; }; @@ -232,63 +236,65 @@ export default class DndCustomTimePicker extends React.PureComponent -
- - this.handlePopperOpenState(true)} - tabIndex={-1} - inputPrefix={inputIcon} - /> - - - - this.handlePopperOpenState(true)} + tabIndex={-1} + inputPrefix={inputIcon} + /> + + - {timeMenuItems} - - -
- + + + {timeMenuItems} + + + + + ); } } diff --git a/webapp/channels/src/components/dnd_custom_time_picker_modal/index.ts b/webapp/channels/src/components/dnd_custom_time_picker_modal/index.ts index fc5ef38e18..b0aaf0a014 100644 --- a/webapp/channels/src/components/dnd_custom_time_picker_modal/index.ts +++ b/webapp/channels/src/components/dnd_custom_time_picker_modal/index.ts @@ -7,6 +7,7 @@ import {connect} from 'react-redux'; import {bindActionCreators, Dispatch} from 'redux'; import {setStatus} from 'mattermost-redux/actions/users'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; import {getCurrentUserId} from 'mattermost-redux/selectors/entities/users'; @@ -19,10 +20,12 @@ const DndCustomTimePicker = makeAsyncComponent('DndCustomTimePicker', React.lazy function mapStateToProps(state: GlobalState) { const userId = getCurrentUserId(state); const locale = getCurrentLocale(state); + const theme = getTheme(state); return { userId, locale, + theme, }; } diff --git a/webapp/channels/src/components/global_header/global_header.tsx b/webapp/channels/src/components/global_header/global_header.tsx index adbfcaf992..435a358890 100644 --- a/webapp/channels/src/components/global_header/global_header.tsx +++ b/webapp/channels/src/components/global_header/global_header.tsx @@ -12,6 +12,9 @@ import LeftControls from './left_controls/left_controls'; import RightControls from './right_controls/right_controls'; import {useIsLoggedIn} from './hooks'; +import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider'; +import {useSelector} from 'react-redux'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; const GlobalHeaderContainer = styled.header` position: relative; @@ -38,17 +41,20 @@ const GlobalHeaderContainer = styled.header` const GlobalHeader = (): JSX.Element | null => { const isLoggedIn = useIsLoggedIn(); const currentProductID = useCurrentProductId(); + const theme = useSelector(getTheme); if (!isLoggedIn) { return null; } return ( - - - - - + + + + + + + ); }; diff --git a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx index 5a13d35521..9680140c6b 100644 --- a/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx +++ b/webapp/channels/src/components/onboarding_tasklist/onboarding_tasklist.tsx @@ -5,8 +5,6 @@ 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'; // eslint-disable-line no-restricted-imports - import {FormattedMessage} from 'react-intl'; import {getShowTaskListBool} from 'selectors/onboarding'; @@ -15,6 +13,7 @@ import {shouldShowAutoLinkedBoard} from 'selectors/plugins'; import { getBool, getMyPreferences as getMyPreferencesSelector, + getTheme, } from 'mattermost-redux/selectors/entities/preferences'; import {getMyPreferences, savePreferences} from 'mattermost-redux/actions/preferences'; import {getPrevTrialLicense} from 'mattermost-redux/actions/admin'; @@ -29,6 +28,7 @@ import { import {useFirstAdminUser, useIsCurrentUserSystemAdmin} from 'components/global_header/hooks'; import {useHandleOnBoardingTaskTrigger} from 'components/onboarding_tasks/onboarding_tasks_manager'; import OnBoardingVideoModal from 'components/onboarding_tasks/onboarding_video_modal/onboarding_video_modal'; +import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider'; import {openModal} from 'actions/views/modals'; import {GlobalState} from 'types/store'; @@ -42,6 +42,7 @@ import {TaskListPopover} from './onboarding_tasklist_popover'; import {Task} from './onboarding_tasklist_task'; import Completed from './onboarding_tasklist_completed'; import {CompletedAnimation} from './onboarding_tasklist_animations'; +import {CloseIcon, PlayIcon, PlaylistCheckIcon} from '@mattermost/compass-icons/components'; const TaskItems = styled.div` border-radius: 4px; @@ -102,18 +103,12 @@ const Button = styled.button<{open: boolean}>(({open}) => { background: var(--center-channel-bg); border: solid 1px rgba(var(--center-channel-color-rgb), 0.16); box-shadow: var(--elevation-3); - - i { - color: rgba(var(--center-channel-color-rgb), 0.56); - } + color: rgba(var(--center-channel-color-rgb), 0.56); &:hover { border-color: rgba(var(--center-channel-color-rgb), 0.24); box-shadow: var(--elevation-4); - - i { - color: rgba(var(--center-channel-color-rgb), 0.72) - } + color: rgba(var(--center-channel-color-rgb), 0.72) } span { @@ -154,8 +149,8 @@ const PlayButton = styled.button` box-shadow: var(--elevation-4); } - i { - margin-right: 10px; + svg { + margin-right: 6px; vertical-align: middle; } `; @@ -190,6 +185,7 @@ const OnBoardingTaskList = (): JSX.Element | null => { const isFirstAdmin = useFirstAdminUser(); const isEnableOnboardingFlow = useSelector((state: GlobalState) => getConfig(state).EnableOnboardingFlow === 'true'); const [showTaskList, firstTimeOnboarding] = useSelector(getShowTaskListBool); + const theme = useSelector(getTheme); // a/b test auto show linked boards const autoShowLinkedBoard = useSelector((state: GlobalState) => shouldShowAutoLinkedBoard(state)); @@ -318,7 +314,7 @@ const OnBoardingTaskList = (): JSX.Element | null => { } return ( - <> + { - + { )} - + ); }; diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap index daf58a3104..7cb1404380 100644 --- a/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap +++ b/webapp/channels/src/components/post_edit_history/edited_post_item/__snapshots__/edited_post_item.test.tsx.snap @@ -1,273 +1,281 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`components/post_edit_history/edited_post_item should match snapshot 1`] = ` -
- - - -
+ , + "equals": Array [ + "day", + 0, + ], + }, + Object { + "display": , + "equals": Array [ + "day", + -1, + ], + }, + ] + } + value={0} + /> + + + + Restore this version + + } + placement="left" + trigger={ + Array [ + "hover", + "focus", + ] + } + > + + + + + + `; exports[`components/post_edit_history/edited_post_item should match snapshot when isCurrent is true 1`] = ` -
- - -
-
- - - -
- + + , + "equals": Array [ + "day", + 0, + ], + }, + Object { + "display": , + "equals": Array [ + "day", + -1, + ], + }, + ] + } + value={0} + /> + +
+ Current Version +
- + + +
+ +
+
+
+
+ + showPostEditedIndicator={false} + /> +
-
- -
+ + + `; diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.test.tsx b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.test.tsx index 87efdf9404..a77e53d2b9 100644 --- a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.test.tsx +++ b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.test.tsx @@ -4,6 +4,7 @@ import React, {ComponentProps} from 'react'; import {shallow} from 'enzyme'; +import {Theme} from 'mattermost-redux/selectors/entities/preferences'; import {TestHelper} from 'utils/test_helper'; import {ModalIdentifiers} from 'utils/constants'; @@ -18,6 +19,7 @@ describe('components/post_edit_history/edited_post_item', () => { message: 'post message', }), isCurrent: false, + theme: {} as Theme, postCurrentVersion: TestHelper.getPostMock({ id: 'post_current_version_id', message: 'post current version message', diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx index e12dabadab..a15cdc065f 100644 --- a/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx +++ b/webapp/channels/src/components/post_edit_history/edited_post_item/edited_post_item.tsx @@ -6,6 +6,8 @@ import React, {memo, useCallback, useState} from 'react'; import {defineMessages, useIntl} from 'react-intl'; import classNames from 'classnames'; +import {Theme} from 'mattermost-redux/selectors/entities/preferences'; + import IconButton from '@mattermost/compass-components/components/icon-button'; // eslint-disable-line no-restricted-imports import {CheckIcon} from '@mattermost/compass-icons/components'; @@ -15,6 +17,7 @@ import Constants, {ModalIdentifiers} from 'utils/constants'; import {imageURLForUser} from 'utils/utils'; import {t} from 'utils/i18n'; +import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider'; import PostAriaLabelDiv from 'components/post_view/post_aria_label_div'; import OverlayTrigger from 'components/overlay_trigger'; import PostMessageContainer from 'components/post_view/post_message_view'; @@ -51,9 +54,10 @@ const itemMessages = defineMessages({ export type Props = PropsFromRedux & { post: Post; isCurrent?: boolean; + theme: Theme; } -const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, actions}: Props) => { +const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, theme, actions}: Props) => { const {formatMessage} = useIntl(); const [open, setOpen] = useState(isCurrent); @@ -202,40 +206,42 @@ const EditedPostItem = ({post, isCurrent = false, postCurrentVersion, actions}: const timeStampValue = post.edit_at === 0 ? post.create_at : post.edit_at; return ( -
- +
- - {open && messageContainer} - -
+ {open && messageContainer} + +
+ ); }; diff --git a/webapp/channels/src/components/post_edit_history/edited_post_item/index.ts b/webapp/channels/src/components/post_edit_history/edited_post_item/index.ts index fba37f1fb1..ce4f6c92f6 100644 --- a/webapp/channels/src/components/post_edit_history/edited_post_item/index.ts +++ b/webapp/channels/src/components/post_edit_history/edited_post_item/index.ts @@ -17,11 +17,14 @@ import {closeRightHandSide} from 'actions/views/rhs'; import {openModal} from 'actions/views/modals'; import EditedPostItem from './edited_post_item'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; function mapStateToProps(state: GlobalState) { const selectedPostId = getSelectedPostId(state) || ''; + const theme = getTheme(state); return { + theme, postCurrentVersion: getPost(state, selectedPostId), }; } diff --git a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx index b25bbd2c4a..a42129dc49 100644 --- a/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx +++ b/webapp/channels/src/components/sidebar/sidebar_header/sidebar_header.tsx @@ -23,6 +23,8 @@ import {useShowOnboardingTutorialStep} from 'components/tours/onboarding_tour'; import {OnboardingTourSteps} from 'components/tours'; import {setAddChannelDropdown} from 'actions/views/add_channel_dropdown'; +import CompassThemeProvider from 'components/compass_theme_provider/compass_theme_provider'; +import {getTheme} from 'mattermost-redux/selectors/entities/preferences'; type SidebarHeaderContainerProps = { id?: string; @@ -106,6 +108,7 @@ const SidebarHeader: React.FC = (props: Props): JSX.Element => { const showInviteTutorialTip = useShowOnboardingTutorialStep(OnboardingTourSteps.INVITE_PEOPLE); const usageDeltas = useGetUsageDeltas(); const isAddChannelOpen = useSelector(isAddChannelDropdownOpen); + const theme = useSelector(getTheme); const openAddChannelOpen = useCallback((open: boolean) => { dispatch(setAddChannelDropdown(open)); }, []); @@ -117,7 +120,7 @@ const SidebarHeader: React.FC = (props: Props): JSX.Element => { }; return ( - <> + @@ -164,7 +167,7 @@ const SidebarHeader: React.FC = (props: Props): JSX.Element => { showWorkTemplateButton={props.showWorkTemplateButton} /> - + ); }; diff --git a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap index 8c3080b6ba..6917b40d72 100644 --- a/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap +++ b/webapp/channels/src/components/status_dropdown/__snapshots__/status_dropdown.test.tsx.snap @@ -93,9 +93,8 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] = id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -208,8 +207,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] = } } icon={ - } @@ -222,8 +220,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] = } @@ -411,9 +408,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -526,8 +522,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and } } icon={ - } @@ -540,8 +535,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and } @@ -681,9 +675,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -796,8 +789,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab } } icon={ - } @@ -810,8 +802,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab } @@ -951,9 +942,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -1066,8 +1056,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi } } icon={ - } @@ -1080,8 +1069,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi } @@ -1222,9 +1210,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -1337,8 +1324,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls } } icon={ - } @@ -1351,8 +1337,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls } @@ -1467,9 +1452,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -1582,8 +1566,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR } } icon={ - } @@ -1596,8 +1579,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR } @@ -1704,9 +1686,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -1819,8 +1800,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op } } icon={ - } @@ -1833,8 +1813,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op } @@ -1974,9 +1953,8 @@ exports[`components/StatusDropdown should not show clear status button when cust id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -2089,8 +2067,7 @@ exports[`components/StatusDropdown should not show clear status button when cust } } icon={ - } @@ -2103,8 +2080,7 @@ exports[`components/StatusDropdown should not show clear status button when cust } @@ -2292,9 +2268,8 @@ exports[`components/StatusDropdown should show clear status button when custom s id="status-menu-away" onClick={[Function]} rightDecorator={ - } @@ -2407,8 +2382,7 @@ exports[`components/StatusDropdown should show clear status button when custom s } } icon={ - } @@ -2421,8 +2395,7 @@ exports[`components/StatusDropdown should show clear status button when custom s } diff --git a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx index 3afb723ad8..604b8b7087 100644 --- a/webapp/channels/src/components/status_dropdown/status_dropdown.tsx +++ b/webapp/channels/src/components/status_dropdown/status_dropdown.tsx @@ -7,7 +7,6 @@ import classNames from 'classnames'; 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'; @@ -40,6 +39,7 @@ import {PulsatingDot} from '@mattermost/components'; import {PreferenceType} from '@mattermost/types/preferences'; import './status_dropdown.scss'; +import {AccountOutlineIcon, CheckIcon, ExitToAppIcon} from '@mattermost/compass-icons/components'; type Props = { intl: IntlShape; @@ -353,10 +353,9 @@ export class StatusDropdown extends React.PureComponent { const setCustomTimedDnd = needsConfirm ? () => this.showStatusChangeConfirmation('dnd') : this.setCustomTimedDnd; const selectedIndicator = ( - ); @@ -571,12 +570,7 @@ export class StatusDropdown extends React.PureComponent { dialogType={UserSettingsModal} dialogProps={{isContentProductSettings: false}} text={localizeMessage('navbar_dropdown.profileSettings', 'Profile')} - icon={( - - )} + icon={} > {this.props.showCompleteYourProfileTour && (
{ id='logout' onClick={this.handleEmitUserLoggedOutEvent} text={localizeMessage('navbar_dropdown.logout', 'Log Out')} - icon={( - - )} + icon={} /> diff --git a/webapp/channels/src/components/suggestion/command_provider/command_provider.tsx b/webapp/channels/src/components/suggestion/command_provider/command_provider.tsx index 81388a97d5..a4e8f5151c 100644 --- a/webapp/channels/src/components/suggestion/command_provider/command_provider.tsx +++ b/webapp/channels/src/components/suggestion/command_provider/command_provider.tsx @@ -5,8 +5,6 @@ import React from 'react'; import {Store} from 'redux'; -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'; import {AutocompleteSuggestion, CommandArgs} from '@mattermost/types/integrations'; @@ -23,6 +21,7 @@ import {GlobalState} from 'types/store'; import {AppCommandParser} from './app_command_parser/app_command_parser'; import {intlShim} from './app_command_parser/app_command_parser_dependencies'; +import {DockWindowIcon} from '@mattermost/compass-icons/components'; const EXECUTE_CURRENT_COMMAND_ITEM_ID = Constants.Integrations.EXECUTE_CURRENT_COMMAND_ITEM_ID; const OPEN_COMMAND_IN_MODAL_ITEM_ID = Constants.Integrations.OPEN_COMMAND_IN_MODAL_ITEM_ID; @@ -45,10 +44,7 @@ export class CommandSuggestion extends Suggestion { case OPEN_COMMAND_IN_MODAL_ITEM_ID: symbolSpan = ( - + ); break;