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

[MM-58413] Migrate various components to use WithTooltip (#27163)

Просмотр исходного кода
Этот коммит содержится в:
Ashish Dhama
2024-06-01 08:55:38 +05:30
коммит произвёл GitHub
родитель 6593773959
Коммит b7cc4cb412
4 изменённых файлов: 122 добавлений и 169 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

66
webapp/channels/src/components/advanced_create_post/priority_labels.tsx
Просмотреть файл

@@ -3,18 +3,15 @@
import React, {memo} from 'react'; import React, {memo} from 'react';
import type {CSSProperties} from 'react'; import type {CSSProperties} from 'react';
import {FormattedMessage} from 'react-intl'; import {FormattedMessage, useIntl} from 'react-intl';
import styled from 'styled-components'; import styled from 'styled-components';
import {CheckCircleOutlineIcon, BellRingOutlineIcon} from '@mattermost/compass-icons/components'; import {CheckCircleOutlineIcon, BellRingOutlineIcon} from '@mattermost/compass-icons/components';
import type {PostPriorityMetadata} from '@mattermost/types/posts'; import type {PostPriorityMetadata} from '@mattermost/types/posts';
import OverlayTrigger from 'components/overlay_trigger';
import {HasNoMentions, HasSpecialMentions} from 'components/post_priority/error_messages'; import {HasNoMentions, HasSpecialMentions} from 'components/post_priority/error_messages';
import PriorityLabel from 'components/post_priority/post_priority_label'; import PriorityLabel from 'components/post_priority/post_priority_label';
import Tooltip from 'components/tooltip'; import WithTooltip from 'components/with_tooltip';
import Constants from 'utils/constants';
type Props = { type Props = {
canRemove: boolean; canRemove: boolean;
@@ -97,6 +94,7 @@ function PriorityLabels({
priority, priority,
requestedAck, requestedAck,
}: Props) { }: Props) {
const intl = useIntl();
return ( return (
<Priority padding={padding}> <Priority padding={padding}>
{priority && ( {priority && (
@@ -106,41 +104,31 @@ function PriorityLabels({
/> />
)} )}
{persistentNotifications && ( {persistentNotifications && (
<OverlayTrigger <WithTooltip
id='post-priority-picker-persistent-notifications-tooltip'
placement='top' placement='top'
delayShow={Constants.OVERLAY_TIME_DELAY} title={intl.formatMessage({
trigger={Constants.OVERLAY_DEFAULT_TRIGGER} id: 'post_priority.persistent_notifications.tooltip',
overlay={( defaultMessage: 'Persistent notifications will be sent',
<Tooltip id='post-priority-picker-persistent-notifications-tooltip'> })}
<FormattedMessage
id={'post_priority.persistent_notifications.tooltip'}
defaultMessage={'Persistent notifications will be sent'}
/>
</Tooltip>
)}
> >
<Notifications> <Notifications>
<BellRingOutlineIcon size={14}/> <BellRingOutlineIcon size={14}/>
</Notifications> </Notifications>
</OverlayTrigger> </WithTooltip>
)} )}
{requestedAck && ( {requestedAck && (
<Acknowledgements hasError={hasError}> <Acknowledgements hasError={hasError}>
<OverlayTrigger <WithTooltip
id='post-priority-picker-ack-tooltip'
placement='top' placement='top'
delayShow={Constants.OVERLAY_TIME_DELAY} title={intl.formatMessage({
trigger={Constants.OVERLAY_DEFAULT_TRIGGER} id: 'post_priority.request_acknowledgement.tooltip',
overlay={( defaultMessage: 'Acknowledgement will be requested',
<Tooltip id='post-priority-picker-ack-tooltip'> })}
<FormattedMessage
id={'post_priority.request_acknowledgement.tooltip'}
defaultMessage={'Acknowledgement will be requested'}
/>
</Tooltip>
)}
> >
<CheckCircleOutlineIcon size={14}/> <CheckCircleOutlineIcon size={14}/>
</OverlayTrigger> </WithTooltip>
{!(priority) && ( {!(priority) && (
<FormattedMessage <FormattedMessage
id={'post_priority.request_acknowledgement'} id={'post_priority.request_acknowledgement'}
@@ -155,19 +143,13 @@ function PriorityLabels({
</Error> </Error>
)} )}
{canRemove && ( {canRemove && (
<OverlayTrigger <WithTooltip
id='post-priority-picker-tooltip'
placement='top' placement='top'
delayShow={Constants.OVERLAY_TIME_DELAY} title={intl.formatMessage({
trigger={Constants.OVERLAY_DEFAULT_TRIGGER} id: 'post_priority.remove',
overlay={( defaultMessage: 'Remove {priority}',
<Tooltip id='post-priority-picker-tooltip'> }, {priority})}
<FormattedMessage
id={'post_priority.remove'}
defaultMessage={'Remove {priority}'}
values={{priority}}
/>
</Tooltip>
)}
> >
<Close <Close
type='button' type='button'
@@ -183,7 +165,7 @@ function PriorityLabels({
/> />
</span> </span>
</Close> </Close>
</OverlayTrigger> </WithTooltip>
)} )}
</Priority> </Priority>
); );

28
webapp/channels/src/components/common/comment_icon.tsx
Просмотреть файл

@@ -2,11 +2,10 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React from 'react';
import {FormattedMessage, useIntl} from 'react-intl'; import {useIntl} from 'react-intl';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import ReplyIcon from 'components/widgets/icons/reply_icon'; import ReplyIcon from 'components/widgets/icons/reply_icon';
import WithTooltip from 'components/with_tooltip';
import type {Locations} from 'utils/constants'; import type {Locations} from 'utils/constants';
@@ -42,23 +41,14 @@ const CommentIcon = ({
iconStyle = `${iconStyle} ${searchStyle}`; iconStyle = `${iconStyle} ${searchStyle}`;
} }
const tooltip = (
<Tooltip
id='comment-icon-tooltip'
className='hidden-xs'
>
<FormattedMessage
id='post_info.comment_icon.tooltip.reply'
defaultMessage='Reply'
/>
</Tooltip>
);
return ( return (
<OverlayTrigger <WithTooltip
delayShow={500} id='comment-icon-tooltip'
placement='top' placement='top'
overlay={tooltip} title={intl.formatMessage({
id: 'post_info.comment_icon.tooltip.reply',
defaultMessage: 'Reply',
})}
> >
<button <button
id={`${location}_commentIcon_${postId}`} id={`${location}_commentIcon_${postId}`}
@@ -71,7 +61,7 @@ const CommentIcon = ({
{commentCountSpan} {commentCountSpan}
</span> </span>
</button> </button>
</OverlayTrigger> </WithTooltip>
); );
}; };

169
webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
Просмотреть файл

@@ -813,79 +813,15 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
<div <div
className="Acknowledgements-kPkVCv dNydui" className="Acknowledgements-kPkVCv dNydui"
> >
<OverlayTrigger <WithTooltip
defaultOverlayShown={false} id="post-priority-picker-ack-tooltip"
delayShow={400}
overlay={
<Tooltip
id="post-priority-picker-ack-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Acknowledgement will be requested"
id="post_priority.request_acknowledgement.tooltip"
/>
</Tooltip>
}
placement="top" placement="top"
trigger={ title="Acknowledgement will be requested"
Array [
"hover",
"focus",
]
}
> >
<OverlayTrigger <OverlayTrigger
defaultOverlayShown={false} defaultOverlayShown={false}
delayShow={400} delay={400}
overlay={ overlay={<Unknown />}
<OverlayWrapper
id="post-priority-picker-ack-tooltip"
intl={
Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
"wrapRichTextChunksInFragment": undefined,
}
}
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Acknowledgement will be requested"
id="post_priority.request_acknowledgement.tooltip"
/>
</OverlayWrapper>
}
placement="top" placement="top"
trigger={ trigger={
Array [ Array [
@@ -894,34 +830,89 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
] ]
} }
> >
<CheckCircleOutlineIcon <OverlayTrigger
onBlur={[Function]} defaultOverlayShown={false}
onClick={null} delay={400}
onFocus={[Function]} overlay={
onMouseOut={[Function]} <OverlayWrapper
onMouseOver={[Function]} intl={
size={14} Object {
"$t": [Function],
"defaultFormats": Object {},
"defaultLocale": "en",
"defaultRichTextElements": undefined,
"fallbackOnEmptyString": true,
"formatDate": [Function],
"formatDateTimeRange": [Function],
"formatDateToParts": [Function],
"formatDisplayName": [Function],
"formatList": [Function],
"formatListToParts": [Function],
"formatMessage": [Function],
"formatNumber": [Function],
"formatNumberToParts": [Function],
"formatPlural": [Function],
"formatRelativeTime": [Function],
"formatTime": [Function],
"formatTimeToParts": [Function],
"formats": Object {},
"formatters": Object {
"getDateTimeFormat": [Function],
"getDisplayNames": [Function],
"getListFormat": [Function],
"getMessageFormat": [Function],
"getNumberFormat": [Function],
"getPluralRules": [Function],
"getRelativeTimeFormat": [Function],
},
"locale": "en",
"messages": Object {},
"onError": [Function],
"onWarn": [Function],
"textComponent": "span",
"timeZone": "Etc/UTC",
"wrapRichTextChunksInFragment": undefined,
}
}
/>
}
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
> >
<svg <CheckCircleOutlineIcon
fill="currentColor"
height={14}
onBlur={[Function]} onBlur={[Function]}
onClick={null} onClick={null}
onFocus={[Function]} onFocus={[Function]}
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
version="1.1" size={14}
viewBox="0 0 24 24"
width={14}
xmlns="http://www.w3.org/2000/svg"
> >
<path <svg
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z" fill="currentColor"
/> height={14}
</svg> onBlur={[Function]}
</CheckCircleOutlineIcon> onClick={null}
onFocus={[Function]}
onMouseOut={[Function]}
onMouseOver={[Function]}
version="1.1"
viewBox="0 0 24 24"
width={14}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
/>
</svg>
</CheckCircleOutlineIcon>
</OverlayTrigger>
</OverlayTrigger> </OverlayTrigger>
</OverlayTrigger> </WithTooltip>
<FormattedMessage <FormattedMessage
defaultMessage="Request acknowledgement" defaultMessage="Request acknowledgement"
id="post_priority.request_acknowledgement" id="post_priority.request_acknowledgement"

28
webapp/channels/src/components/sidebar/add_channel_dropdown.tsx
Просмотреть файл

@@ -2,15 +2,14 @@
// See LICENSE.txt for license information. // See LICENSE.txt for license information.
import React from 'react'; import React from 'react';
import {FormattedMessage, useIntl} from 'react-intl'; import {useIntl} from 'react-intl';
import {trackEvent} from 'actions/telemetry_actions'; import {trackEvent} from 'actions/telemetry_actions';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import {CreateAndJoinChannelsTour, InvitePeopleTour} from 'components/tours/onboarding_tour'; import {CreateAndJoinChannelsTour, InvitePeopleTour} from 'components/tours/onboarding_tour';
import Menu from 'components/widgets/menu/menu'; import Menu from 'components/widgets/menu/menu';
import MenuWrapper from 'components/widgets/menu/menu_wrapper'; import MenuWrapper from 'components/widgets/menu/menu_wrapper';
import WithTooltip from 'components/with_tooltip';
type Props = { type Props = {
canCreateChannel: boolean; canCreateChannel: boolean;
@@ -146,28 +145,19 @@ const AddChannelDropdown = ({
return null; return null;
} }
const tooltip = (
<Tooltip
id='new-group-tooltip'
className='hidden-xs'
>
<FormattedMessage
id={'sidebar_left.add_channel_dropdown.browseOrCreateChannels'}
defaultMessage='Browse or create channels'
/>
</Tooltip>
);
return ( return (
<MenuWrapper <MenuWrapper
className='AddChannelDropdown' className='AddChannelDropdown'
onToggle={trackOpen} onToggle={trackOpen}
open={isAddChannelOpen} open={isAddChannelOpen}
> >
<OverlayTrigger <WithTooltip
delayShow={500} id='new-group-tooltip'
placement='top' placement='top'
overlay={tooltip} title={intl.formatMessage({
id: 'sidebar_left.add_channel_dropdown.browseOrCreateChannels',
defaultMessage: 'Browse or create channels',
})}
> >
<button <button
className={'AddChannelDropdown_dropdownButton'} className={'AddChannelDropdown_dropdownButton'}
@@ -175,7 +165,7 @@ const AddChannelDropdown = ({
> >
<i className='icon-plus'/> <i className='icon-plus'/>
</button> </button>
</OverlayTrigger> </WithTooltip>
<Menu <Menu
id='AddChannelDropdown' id='AddChannelDropdown'
ariaLabel={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channel Dropdown'})} ariaLabel={intl.formatMessage({id: 'sidebar_left.add_channel_dropdown.dropdownAriaLabel', defaultMessage: 'Add Channel Dropdown'})}