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

[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 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

180
webapp/channels/src/components/__snapshots__/size_aware_image.test.tsx.snap
Просмотреть файл

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

21
webapp/channels/src/components/rename_channel_modal/__snapshots__/rename_channel_modal.test.tsx.snap
Просмотреть файл

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

14
webapp/channels/src/components/rename_channel_modal/rename_channel_modal.tsx
Просмотреть файл

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

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

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