[MM-58400] Migrate tooltips of 'components/rename_channel_modal' & 'components/size_aware_image' to WithTooltip (#27145)

Этот коммит содержится в:
M-ZubairAhmed
2024-05-30 13:04:09 +00:00
коммит произвёл GitHub
родитель 34c7b76fae
Коммит f1cc96defb
4 изменённых файлов: 81 добавлений и 200 удалений

Просмотреть файл

@@ -46,28 +46,14 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
<span
className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
>
<OverlayTrigger
className="hidden-xs"
defaultOverlayShown={false}
delayShow={500}
overlay={
<Tooltip
className="hidden-xs"
id="copy-link-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy link"
id="single_image_view.copy_link_tooltip"
/>
</Tooltip>
}
<WithTooltip
id="single_image_view.copy_link_tooltip.text"
placement="top"
rootClose={true}
trigger={
Array [
"hover",
"focus",
]
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy link"
id="single_image_view.copy_link_tooltip"
/>
}
>
<button
@@ -80,29 +66,15 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
size={20}
/>
</button>
</OverlayTrigger>
<OverlayTrigger
className="hidden-xs"
defaultOverlayShown={false}
delayShow={500}
overlay={
<Tooltip
className="hidden-xs"
id="download-preview-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Download"
id="single_image_view.download_tooltip"
/>
</Tooltip>
}
</WithTooltip>
<WithTooltip
id="single_image_view.download_tooltip.text"
placement="top"
rootClose={true}
trigger={
Array [
"hover",
"focus",
]
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Download"
id="single_image_view.download_tooltip"
/>
}
>
<a
@@ -119,7 +91,7 @@ exports[`components/SizeAwareImage should load download and copy link buttons wh
size={20}
/>
</a>
</OverlayTrigger>
</WithTooltip>
</span>
</figure>
</div>
@@ -172,28 +144,14 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
<span
className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
>
<OverlayTrigger
className="hidden-xs"
defaultOverlayShown={false}
delayShow={500}
overlay={
<Tooltip
className="hidden-xs"
id="copy-link-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy link"
id="single_image_view.copy_link_tooltip"
/>
</Tooltip>
}
<WithTooltip
id="single_image_view.copy_link_tooltip.text"
placement="top"
rootClose={true}
trigger={
Array [
"hover",
"focus",
]
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy link"
id="single_image_view.copy_link_tooltip"
/>
}
>
<button
@@ -206,29 +164,15 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
size={20}
/>
</button>
</OverlayTrigger>
<OverlayTrigger
className="hidden-xs"
defaultOverlayShown={false}
delayShow={500}
overlay={
<Tooltip
className="hidden-xs"
id="download-preview-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Download"
id="single_image_view.download_tooltip"
/>
</Tooltip>
}
</WithTooltip>
<WithTooltip
id="single_image_view.download_tooltip.text"
placement="top"
rootClose={true}
trigger={
Array [
"hover",
"focus",
]
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Download"
id="single_image_view.download_tooltip"
/>
}
>
<a
@@ -244,7 +188,7 @@ exports[`components/SizeAwareImage should match snapshot when handleSmallImageCo
size={20}
/>
</a>
</OverlayTrigger>
</WithTooltip>
</span>
</figure>
</div>
@@ -311,28 +255,14 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
<span
className="image-preview-utility-buttons-container image-preview-utility-buttons-container--small-image"
>
<OverlayTrigger
className="hidden-xs"
defaultOverlayShown={false}
delayShow={500}
overlay={
<Tooltip
className="hidden-xs"
id="copy-link-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy link"
id="single_image_view.copy_link_tooltip"
/>
</Tooltip>
}
<WithTooltip
id="single_image_view.copy_link_tooltip.text"
placement="top"
rootClose={true}
trigger={
Array [
"hover",
"focus",
]
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Copy link"
id="single_image_view.copy_link_tooltip"
/>
}
>
<button
@@ -345,29 +275,15 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
size={20}
/>
</button>
</OverlayTrigger>
<OverlayTrigger
className="hidden-xs"
defaultOverlayShown={false}
delayShow={500}
overlay={
<Tooltip
className="hidden-xs"
id="download-preview-tooltip"
>
<Memo(MemoizedFormattedMessage)
defaultMessage="Download"
id="single_image_view.download_tooltip"
/>
</Tooltip>
}
</WithTooltip>
<WithTooltip
id="single_image_view.download_tooltip.text"
placement="top"
rootClose={true}
trigger={
Array [
"hover",
"focus",
]
title={
<Memo(MemoizedFormattedMessage)
defaultMessage="Download"
id="single_image_view.download_tooltip"
/>
}
>
<a
@@ -383,7 +299,7 @@ exports[`components/SizeAwareImage should render a placeholder and has loader wh
size={20}
/>
</a>
</OverlayTrigger>
</WithTooltip>
</span>
</figure>
</div>

Просмотреть файл

@@ -87,30 +87,17 @@ exports[`components/RenameChannelModal should match snapshot 1`] = `
<div
className="input-group input-group--limit"
>
<OverlayTrigger
defaultOverlayShown={false}
delayShow={400}
overlay={
<Tooltip
id="urlTooltip"
>
fake-channel/channels
</Tooltip>
}
<WithTooltip
id="renameChannelModalShortUrlTooltip"
placement="top"
trigger={
Array [
"hover",
"focus",
]
}
title="fake-channel/channels"
>
<span
className="input-group-addon"
>
fake-channel/channels/
</span>
</OverlayTrigger>
</WithTooltip>
<input
aria-label="rename channel"
className="form-control"

Просмотреть файл

@@ -13,8 +13,7 @@ import type {Team} from '@mattermost/types/teams';
import type {ActionResult} from 'mattermost-redux/types/actions';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import WithTooltip from 'components/with_tooltip';
import {getHistory} from 'utils/browser_history';
import Constants from 'utils/constants';
@@ -256,9 +255,6 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
const fullUrl = this.props.currentTeamUrl + '/channels';
const shortUrl = `${getShortenedURL(fullUrl, 35)}/`;
const urlTooltip = (
<Tooltip id='urlTooltip'>{fullUrl}</Tooltip>
);
return (
<Modal
@@ -310,13 +306,13 @@ export class RenameChannelModal extends React.PureComponent<Props, State> {
<label className='control-label'>{urlInputLabel}</label>
<div className={urlInputClass}>
<OverlayTrigger
delayShow={Constants.OVERLAY_TIME_DELAY}
<WithTooltip
id='renameChannelModalShortUrlTooltip'
placement='top'
overlay={urlTooltip}
title={fullUrl}
>
<span className='input-group-addon'>{shortUrl}</span>
</OverlayTrigger>
</WithTooltip>
<input
onChange={this.onNameChange}
type='text'

Просмотреть файл

@@ -16,8 +16,7 @@ import type {ActionResult} from 'mattermost-redux/types/actions';
import {getFileMiniPreviewUrl} from 'mattermost-redux/utils/file_utils';
import LoadingImagePreview from 'components/loading_image_preview';
import OverlayTrigger from 'components/overlay_trigger';
import Tooltip from 'components/tooltip';
import WithTooltip from 'components/with_tooltip';
import {localizeMessage, copyToClipboard} from 'utils/utils';
@@ -236,31 +235,22 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
// copyLinkTooltip, downloadTooltip are tooltips for the buttons respectively.
// if linkCopiedRecently is true, defaultMessage would be 'Copy Link', else 'Copied!'
const copyLinkTooltip = (
<Tooltip
id='copy-link-tooltip'
className='hidden-xs'
>
{this.state.linkCopiedRecently ? (
<FormattedMessage
id='single_image_view.copied_link_tooltip'
defaultMessage='Copied'
/>
) : (
<FormattedMessage
id='single_image_view.copy_link_tooltip'
defaultMessage='Copy link'
/>
)}
</Tooltip>
const copyLinkTooltipText = this.state.linkCopiedRecently ? (
<FormattedMessage
id={'single_image_view.copied_link_tooltip'}
defaultMessage={'Copied'}
/>
) : (
<FormattedMessage
id={'single_image_view.copy_link_tooltip'}
defaultMessage={'Copy link'}
/>
);
const copyLink = (
<OverlayTrigger
className='hidden-xs'
delayShow={500}
<WithTooltip
id='single_image_view.copy_link_tooltip.text'
title={copyLinkTooltipText}
placement='top'
overlay={copyLinkTooltip}
rootClose={true}
>
<button
className={classNames('style--none', 'size-aware-image__copy_link', {
@@ -281,28 +271,20 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
/>
)}
</button>
</OverlayTrigger>
</WithTooltip>
);
const downloadTooltip = (
<Tooltip
id='download-preview-tooltip'
className='hidden-xs'
>
<FormattedMessage
id='single_image_view.download_tooltip'
defaultMessage='Download'
/>
</Tooltip>
const downloadTooltipText = (
<FormattedMessage
id='single_image_view.download_tooltip'
defaultMessage='Download'
/>
);
const download = (
<OverlayTrigger
className='hidden-xs'
delayShow={500}
<WithTooltip
id='single_image_view.download_tooltip.text'
placement='top'
overlay={downloadTooltip}
rootClose={true}
title={downloadTooltipText}
>
<a
target='_blank'
@@ -318,7 +300,7 @@ export default class SizeAwareImage extends React.PureComponent<Props, State> {
size={20}
/>
</a>
</OverlayTrigger>
</WithTooltip>
);
if (this.props.handleSmallImageContainer && this.state.isSmallImage) {