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

[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 <build@mattermost.com>
Этот коммит содержится в:
Ashish Dhama
2023-05-03 19:54:01 +05:30
коммит произвёл GitHub
родитель 698613c002
Коммит b5ce8ac741
14 изменённых файлов: 494 добавлений и 504 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

8
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 (
<span className='icon'>
<Icon
size={12}
glyph={'chevron-down'}
/>
<ChevronDownIcon size={12}/>
</span>
);
};

128
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: Props) => {
const [isPopperOpen, setIsPopperOpen] = useState(false);
const {formatMessage} = useIntl();
const timeButtonRef = useRef<HTMLButtonElement>(null);
const theme = useSelector(getTheme);
const handlePopperOpenState = useCallback((isOpen: boolean) => {
setIsPopperOpen(isOpen);
@@ -150,71 +154,73 @@ const DateTimeInputContainer: React.FC<Props> = (props: Props) => {
};
return (
<div className='dateTime'>
<div className='dateTime__date'>
<DatePicker
isPopperOpen={isPopperOpen}
handlePopperOpenState={handlePopperOpenState}
locale={locale}
datePickerProps={datePickerProps}
>
<Input
value={formatDate(time.toDate())}
id='customStatus__calendar-input'
readOnly={true}
className='dateTime__calendar-input'
label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
onClick={() => handlePopperOpenState(true)}
tabIndex={-1}
inputPrefix={inputIcon}
/>
</DatePicker>
</div>
<div className='dateTime__time'>
<MenuWrapper
className='dateTime__time-menu'
>
<button
className='style--none'
ref={timeButtonRef}
<CompassThemeProvider theme={theme}>
<div className='dateTime'>
<div className='dateTime__date'>
<DatePicker
isPopperOpen={isPopperOpen}
handlePopperOpenState={handlePopperOpenState}
locale={locale}
datePickerProps={datePickerProps}
>
<span className='dateTime__input-title'>{formatMessage({id: 'custom_status.expiry.time_picker.title', defaultMessage: 'Time'})}</span>
<span className='dateTime__time-icon'>
<i className='icon-clock-outline'/>
</span>
<div
className='dateTime__input'
<Input
value={formatDate(time.toDate())}
id='customStatus__calendar-input'
readOnly={true}
className='dateTime__calendar-input'
label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
onClick={() => handlePopperOpenState(true)}
tabIndex={-1}
inputPrefix={inputIcon}
/>
</DatePicker>
</div>
<div className='dateTime__time'>
<MenuWrapper
className='dateTime__time-menu'
>
<button
className='style--none'
ref={timeButtonRef}
>
<Timestamp
useRelative={false}
useDate={false}
value={time.toString()}
/>
</div>
</button>
<Menu
ariaLabel={formatMessage({id: 'time_dropdown.choose_time', defaultMessage: 'Choose a time'})}
id='expiryTimeMenu'
>
<Menu.Group>
{Array.isArray(timeOptions) && timeOptions.map((option, index) => (
<Menu.ItemAction
onClick={handleTimeChange.bind(this, option)}
key={index}
text={
<Timestamp
useRelative={false}
useDate={false}
value={option}
/>
}
<span className='dateTime__input-title'>{formatMessage({id: 'custom_status.expiry.time_picker.title', defaultMessage: 'Time'})}</span>
<span className='dateTime__time-icon'>
<i className='icon-clock-outline'/>
</span>
<div
className='dateTime__input'
>
<Timestamp
useRelative={false}
useDate={false}
value={time.toString()}
/>
))}
</Menu.Group>
</Menu>
</MenuWrapper>
</div>
</button>
<Menu
ariaLabel={formatMessage({id: 'time_dropdown.choose_time', defaultMessage: 'Choose a time'})}
id='expiryTimeMenu'
>
<Menu.Group>
{Array.isArray(timeOptions) && timeOptions.map((option, index) => (
<Menu.ItemAction
onClick={handleTimeChange.bind(this, option)}
key={index}
text={
<Timestamp
useRelative={false}
useDate={false}
value={option}
/>
}
/>
))}
</Menu.Group>
</Menu>
</MenuWrapper>
</div>
</div>
</div>
</CompassThemeProvider>
);
};

116
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<Props, Stat
};
return (
<GenericModal
ariaLabel={localizeMessage('dnd_custom_time_picker_modal.defaultMsg', 'Disable notifications until')}
onExited={this.props.onExited}
modalHeaderText={modalHeaderText}
confirmButtonText={confirmButtonText}
handleConfirm={this.handleConfirm}
handleEnterKeyPress={this.handleConfirm}
id='dndCustomTimePickerModal'
className={'DndModal modal-overflow'}
tabIndex={-1}
keyboardEscape={false}
>
<div className='DndModal__content'>
<DatePicker
isPopperOpen={isPopperOpen}
handlePopperOpenState={this.handlePopperOpenState}
locale={this.props.locale}
datePickerProps={dayPickerProps}
>
<Input
value={this.formatDate(selectedDate)}
readOnly={true}
id='DndModal__calendar-input'
className={classNames('DndModal__calendar-input', {'popper-open': isPopperOpen})}
label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
onClick={() => this.handlePopperOpenState(true)}
tabIndex={-1}
inputPrefix={inputIcon}
/>
</DatePicker>
<MenuWrapper
id='dropdown-no-caret'
stopPropagationOnToggle={true}
>
<button
className='DndModal__input'
type='button'
ref={this.buttonRef}
<CompassThemeProvider theme={this.props.theme}>
<GenericModal
ariaLabel={localizeMessage('dnd_custom_time_picker_modal.defaultMsg', 'Disable notifications until')}
onExited={this.props.onExited}
modalHeaderText={modalHeaderText}
confirmButtonText={confirmButtonText}
handleConfirm={this.handleConfirm}
handleEnterKeyPress={this.handleConfirm}
id='dndCustomTimePickerModal'
className={'DndModal modal-overflow'}
tabIndex={-1}
keyboardEscape={false}
>
<div className='DndModal__content'>
<DatePicker
isPopperOpen={isPopperOpen}
handlePopperOpenState={this.handlePopperOpenState}
locale={this.props.locale}
datePickerProps={dayPickerProps}
>
<div className='DndModal__input__label'>
<FormattedMessage
id='dnd_custom_time_picker_modal.time'
defaultMessage='Time'
/>
</div>
<i className='icon icon--no-spacing icon-clock-outline icon--xs icon-14'/>
<span>{selectedTime}</span>
</button>
<Menu
openLeft={false}
ariaLabel={'Clear custom status after'}
<Input
value={this.formatDate(selectedDate)}
readOnly={true}
id='DndModal__calendar-input'
className={classNames('DndModal__calendar-input', {'popper-open': isPopperOpen})}
label={localizeMessage('dnd_custom_time_picker_modal.date', 'Date')}
onClick={() => this.handlePopperOpenState(true)}
tabIndex={-1}
inputPrefix={inputIcon}
/>
</DatePicker>
<MenuWrapper
id='dropdown-no-caret'
stopPropagationOnToggle={true}
>
{timeMenuItems}
</Menu>
</MenuWrapper>
</div>
</GenericModal>
<button
className='DndModal__input'
type='button'
ref={this.buttonRef}
>
<div className='DndModal__input__label'>
<FormattedMessage
id='dnd_custom_time_picker_modal.time'
defaultMessage='Time'
/>
</div>
<i className='icon icon--no-spacing icon-clock-outline icon--xs icon-14'/>
<span>{selectedTime}</span>
</button>
<Menu
openLeft={false}
ariaLabel={'Clear custom status after'}
>
{timeMenuItems}
</Menu>
</MenuWrapper>
</div>
</GenericModal>
</CompassThemeProvider>
);
}
}

3
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,
};
}

16
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 (
<GlobalHeaderContainer id='global-header'>
<LeftControls/>
<CenterControls productId={currentProductID}/>
<RightControls productId={currentProductID}/>
</GlobalHeaderContainer>
<CompassThemeProvider theme={theme}>
<GlobalHeaderContainer id='global-header'>
<LeftControls/>
<CenterControls productId={currentProductID}/>
<RightControls productId={currentProductID}/>
</GlobalHeaderContainer>
</CompassThemeProvider>
);
};

31
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 (
<>
<CompassThemeProvider theme={theme}>
<CompletedAnimation completed={showAnimation}/>
<Button
onClick={toggleTaskList}
@@ -326,7 +322,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
open={open}
data-cy='onboarding-task-list-action-button'
>
<Icon glyph={open ? 'close' : 'playlist-check'}/>
{open ? <CloseIcon size={20}/> : <PlaylistCheckIcon size={20}/>}
{itemsLeft !== 0 && (<span>{itemsLeft}</span>)}
</Button>
<TaskListPopover
@@ -363,10 +359,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
<PlayButton
onClick={openVideoModal}
>
<Icon
glyph={'play'}
size={16}
/>
<PlayIcon size={18}/>
<FormattedMessage
id='onboardingTask.checklist.video_title'
defaultMessage='Watch overview'
@@ -396,7 +389,7 @@ const OnBoardingTaskList = (): JSX.Element | null => {
)}
</TaskItems>
</TaskListPopover>
</>
</CompassThemeProvider>
);
};

488
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`] = `
<div
className="edit-post-history__container"
onClick={[Function]}
<CompassThemeProvider
theme={Object {}}
>
<PostAriaLabelDiv
className="a11y__section post"
id="searchResult_post_id"
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id",
"is_pinned": false,
"message": "post message",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
<div
className="edit-post-history__container"
onClick={[Function]}
>
<div
aria-hidden="true"
className="edit-post-history__title__container"
<PostAriaLabelDiv
className="a11y__section post"
id="searchResult_post_id"
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id",
"is_pinned": false,
"message": "post message",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
>
<div
className="edit-post-history__date__badge__container"
aria-hidden="true"
className="edit-post-history__title__container"
>
<ForwardRef
aria-label="Toggle to see an old message."
className="edit-post-history__icon__button"
compact={true}
icon="chevron-right"
size="sm"
/>
<span
className="edit-post-history__date"
<div
className="edit-post-history__date__badge__container"
>
<Connect(injectIntl(Timestamp))
ranges={
Array [
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Today"
id="date_separator.today"
/>,
"equals": Array [
"day",
0,
],
},
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Yesterday"
id="date_separator.yesterday"
/>,
"equals": Array [
"day",
-1,
],
},
]
}
value={0}
<ForwardRef
aria-label="Toggle to see an old message."
className="edit-post-history__icon__button"
compact={true}
icon="chevron-right"
size="sm"
/>
</span>
</div>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
className="hidden-xs"
id="editPostRestoreTooltip"
<span
className="edit-post-history__date"
>
Restore this version
</Tooltip>
}
placement="left"
trigger={
Array [
"hover",
"focus",
]
}
>
<ForwardRef
aria-label="Select to restore an old message."
className="edit-post-history__icon__button restore-icon"
compact={true}
icon="restore"
onClick={[Function]}
size="sm"
/>
</OverlayTrigger>
</div>
</PostAriaLabelDiv>
</div>
<Connect(injectIntl(Timestamp))
ranges={
Array [
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Today"
id="date_separator.today"
/>,
"equals": Array [
"day",
0,
],
},
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Yesterday"
id="date_separator.yesterday"
/>,
"equals": Array [
"day",
-1,
],
},
]
}
value={0}
/>
</span>
</div>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
className="hidden-xs"
id="editPostRestoreTooltip"
>
Restore this version
</Tooltip>
}
placement="left"
trigger={
Array [
"hover",
"focus",
]
}
>
<ForwardRef
aria-label="Select to restore an old message."
className="edit-post-history__icon__button restore-icon"
compact={true}
icon="restore"
onClick={[Function]}
size="sm"
/>
</OverlayTrigger>
</div>
</PostAriaLabelDiv>
</div>
</CompassThemeProvider>
`;
exports[`components/post_edit_history/edited_post_item should match snapshot when isCurrent is true 1`] = `
<div
className="edit-post-history__container edit-post-history__container__background"
onClick={[Function]}
<CompassThemeProvider
theme={Object {}}
>
<PostAriaLabelDiv
className="a11y__section post"
id="searchResult_post_id"
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id",
"is_pinned": false,
"message": "post message",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
<div
className="edit-post-history__container edit-post-history__container__background"
onClick={[Function]}
>
<div
aria-hidden="true"
className="edit-post-history__title__container"
<PostAriaLabelDiv
className="a11y__section post"
id="searchResult_post_id"
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id",
"is_pinned": false,
"message": "post message",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
>
<div
className="edit-post-history__date__badge__container"
aria-hidden="true"
className="edit-post-history__title__container"
>
<ForwardRef
aria-label="Toggle to see an old message."
className="edit-post-history__icon__button"
compact={true}
icon="chevron-down"
size="sm"
/>
<span
className="edit-post-history__date"
>
<Connect(injectIntl(Timestamp))
ranges={
Array [
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Today"
id="date_separator.today"
/>,
"equals": Array [
"day",
0,
],
},
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Yesterday"
id="date_separator.yesterday"
/>,
"equals": Array [
"day",
-1,
],
},
]
}
value={0}
/>
</span>
<div
className="edit-post-history__current__indicator"
className="edit-post-history__date__badge__container"
>
Current Version
</div>
</div>
</div>
<div
className="edit-post-history__content_container"
>
<div
className="edit-post-history__header"
>
<span
className="profile-icon"
>
<Memo(Avatar)
className="avatar-post-preview"
<ForwardRef
aria-label="Toggle to see an old message."
className="edit-post-history__icon__button"
compact={true}
icon="chevron-down"
size="sm"
url="/api/v4/users/user_id/image?_=0"
/>
</span>
<div
className="edit-post-history__header__username"
>
<Connect(UserProfile)
disablePopover={true}
hasMention={true}
userId="user_id"
/>
<span
className="edit-post-history__date"
>
<Connect(injectIntl(Timestamp))
ranges={
Array [
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Today"
id="date_separator.today"
/>,
"equals": Array [
"day",
0,
],
},
Object {
"display": <Memo(MemoizedFormattedMessage)
defaultMessage="Yesterday"
id="date_separator.yesterday"
/>,
"equals": Array [
"day",
-1,
],
},
]
}
value={0}
/>
</span>
<div
className="edit-post-history__current__indicator"
>
Current Version
</div>
</div>
</div>
<div
className="post__content"
className="edit-post-history__content_container"
>
<div
className="search-item-snippet post__body"
className="edit-post-history__header"
>
<Connect(PostMessageView)
isRHS={true}
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id",
"is_pinned": false,
"message": "post message",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
<span
className="profile-icon"
>
<Memo(Avatar)
className="avatar-post-preview"
size="sm"
url="/api/v4/users/user_id/image?_=0"
/>
</span>
<div
className="edit-post-history__header__username"
>
<Connect(UserProfile)
disablePopover={true}
hasMention={true}
userId="user_id"
/>
</div>
</div>
<div
className="post__content"
>
<div
className="search-item-snippet post__body"
>
<Connect(PostMessageView)
isRHS={true}
post={
Object {
"channel_id": "",
"create_at": 0,
"delete_at": 0,
"edit_at": 0,
"hashtags": "",
"id": "post_id",
"is_pinned": false,
"message": "post message",
"metadata": Object {
"embeds": Array [],
"emojis": Array [],
"files": Array [],
"images": Object {},
"reactions": Array [],
},
"original_id": "",
"pending_post_id": "",
"props": Object {},
"reply_count": 0,
"root_id": "",
"type": "system_add_remove",
"update_at": 0,
"user_id": "user_id",
}
}
}
showPostEditedIndicator={false}
/>
showPostEditedIndicator={false}
/>
</div>
</div>
</div>
</div>
</PostAriaLabelDiv>
</div>
</PostAriaLabelDiv>
</div>
</CompassThemeProvider>
`;

2
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',

68
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 (
<div
className={postContainerClass}
onClick={togglePost}
>
<PostAriaLabelDiv
className={'a11y__section post'}
id={'searchResult_' + post.id}
post={post}
<CompassThemeProvider theme={theme}>
<div
className={postContainerClass}
onClick={togglePost}
>
<div
className='edit-post-history__title__container'
aria-hidden='true'
<PostAriaLabelDiv
className={'a11y__section post'}
id={'searchResult_' + post.id}
post={post}
>
<div className='edit-post-history__date__badge__container'>
<IconButton
size={'sm'}
icon={open ? 'chevron-down' : 'chevron-right'}
compact={true}
aria-label='Toggle to see an old message.'
className='edit-post-history__icon__button'
/>
<span className='edit-post-history__date'>
<Timestamp
value={timeStampValue}
ranges={DATE_RANGES}
<div
className='edit-post-history__title__container'
aria-hidden='true'
>
<div className='edit-post-history__date__badge__container'>
<IconButton
size={'sm'}
icon={open ? 'chevron-down' : 'chevron-right'}
compact={true}
aria-label='Toggle to see an old message.'
className='edit-post-history__icon__button'
/>
</span>
{currentVersionIndicator}
<span className='edit-post-history__date'>
<Timestamp
value={timeStampValue}
ranges={DATE_RANGES}
/>
</span>
{currentVersionIndicator}
</div>
{restoreButton}
</div>
{restoreButton}
</div>
{open && messageContainer}
</PostAriaLabelDiv>
</div>
{open && messageContainer}
</PostAriaLabelDiv>
</div>
</CompassThemeProvider>
);
};

3
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),
};
}

7
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: 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: Props): JSX.Element => {
};
return (
<>
<CompassThemeProvider theme={theme}>
<SidebarHeaderContainer
id={'sidebar-header-container'}
>
@@ -164,7 +167,7 @@ const SidebarHeader: React.FC<Props> = (props: Props): JSX.Element => {
showWorkTemplateButton={props.showWorkTemplateButton}
/>
</SidebarHeaderContainer>
</>
</CompassThemeProvider>
);
};

99
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={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -208,8 +207,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -222,8 +220,7 @@ exports[`components/StatusDropdown should match snapshot in default state 1`] =
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -411,9 +408,8 @@ exports[`components/StatusDropdown should match snapshot with custom status and
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -526,8 +522,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -540,8 +535,7 @@ exports[`components/StatusDropdown should match snapshot with custom status and
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -681,9 +675,8 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -796,8 +789,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -810,8 +802,7 @@ exports[`components/StatusDropdown should match snapshot with custom status enab
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -951,9 +942,8 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -1066,8 +1056,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -1080,8 +1069,7 @@ exports[`components/StatusDropdown should match snapshot with custom status expi
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -1222,9 +1210,8 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -1337,8 +1324,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -1351,8 +1337,7 @@ exports[`components/StatusDropdown should match snapshot with custom status puls
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -1467,9 +1452,8 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -1582,8 +1566,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -1596,8 +1579,7 @@ exports[`components/StatusDropdown should match snapshot with profile picture UR
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -1704,9 +1686,8 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -1819,8 +1800,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -1833,8 +1813,7 @@ exports[`components/StatusDropdown should match snapshot with status dropdown op
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -1974,9 +1953,8 @@ exports[`components/StatusDropdown should not show clear status button when cust
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -2089,8 +2067,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -2103,8 +2080,7 @@ exports[`components/StatusDropdown should not show clear status button when cust
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}
@@ -2292,9 +2268,8 @@ exports[`components/StatusDropdown should show clear status button when custom s
id="status-menu-away"
onClick={[Function]}
rightDecorator={
<Icon
color="success"
glyph="check"
<CheckIcon
color="var(--semantic-color-success)"
size={16}
/>
}
@@ -2407,8 +2382,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
}
}
icon={
<Icon
glyph="account-outline"
<AccountOutlineIcon
size={16}
/>
}
@@ -2421,8 +2395,7 @@ exports[`components/StatusDropdown should show clear status button when custom s
<MenuGroup>
<MenuItemAction
icon={
<Icon
glyph="exit-to-app"
<ExitToAppIcon
size={16}
/>
}

21
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<Props, State> {
const setCustomTimedDnd = needsConfirm ? () => this.showStatusChangeConfirmation('dnd') : this.setCustomTimedDnd;
const selectedIndicator = (
<Icon
glyph={'check'}
<CheckIcon
size={16}
color={'success'}
color={'var(--semantic-color-success)'}
/>
);
@@ -571,12 +570,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
dialogType={UserSettingsModal}
dialogProps={{isContentProductSettings: false}}
text={localizeMessage('navbar_dropdown.profileSettings', 'Profile')}
icon={(
<Icon
size={16}
glyph={'account-outline'}
/>
)}
icon={<AccountOutlineIcon size={16}/>}
>
{this.props.showCompleteYourProfileTour && (
<div
@@ -593,12 +587,7 @@ export class StatusDropdown extends React.PureComponent<Props, State> {
id='logout'
onClick={this.handleEmitUserLoggedOutEvent}
text={localizeMessage('navbar_dropdown.logout', 'Log Out')}
icon={(
<Icon
size={16}
glyph={'exit-to-app'}
/>
)}
icon={<ExitToAppIcon size={16}/>}
/>
</Menu.Group>
</Menu>

8
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 = (
<span className='block mt-1'>
<Icon
size={28}
glyph={'dock-window'}
/>
<DockWindowIcon size={28}/>
</span>
);
break;