[MM-62987] Include description on aria-label for last reply time, make link focused when using up/down arrows. (#30837)
* [MM-62987] Include description on aria-label for last reply time, make link focused when using up/down arrows. * PR feedback --------- Co-authored-by: Mattermost Build <build@mattermost.com>
Этот коммит содержится в:
Devin Binnie
коммит произвёл
GitHub
GitHub
родитель
c33dbe8d37
Коммит
0058edb806
@@ -1,371 +1,449 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/threading/global_threads/thread_item should report total number of replies 1`] = `
|
||||
<div
|
||||
aria-label="Thread by Someone"
|
||||
className="ThreadItem"
|
||||
id=""
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
<header>
|
||||
<div
|
||||
className="ThreadItem__author"
|
||||
>
|
||||
Someone
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__tags"
|
||||
>
|
||||
<Memo(Tag)
|
||||
onClick={[Function]}
|
||||
text="Team name"
|
||||
/>
|
||||
</div>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
useTime={false}
|
||||
/>
|
||||
</header>
|
||||
<Fragment>
|
||||
<div
|
||||
className="menu-anchor alt-visible"
|
||||
>
|
||||
<MockThreadMenu
|
||||
hasUnreads={false}
|
||||
isFollowing={true}
|
||||
threadId="1y8hpek81byspd4enyk9mp1ncw"
|
||||
unreadTimestamp={1611786714912}
|
||||
>
|
||||
<WithTooltip
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Actions"
|
||||
id="threading.threadItem.menu"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Memo(Button)
|
||||
aria-label="Actions"
|
||||
className="Button___icon"
|
||||
marginTop={true}
|
||||
>
|
||||
<DotsVerticalIcon
|
||||
size={18}
|
||||
/>
|
||||
</Memo(Button)>
|
||||
</WithTooltip>
|
||||
</MockThreadMenu>
|
||||
</div>
|
||||
<div
|
||||
className="preview"
|
||||
dir="auto"
|
||||
aria-describedby="ThreadItem__timestamp_1y8hpek81byspd4enyk9mp1ncw"
|
||||
aria-label="Thread by Someone"
|
||||
className="ThreadItem"
|
||||
id=""
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
<MockMarkdown
|
||||
imageProps={
|
||||
Object {
|
||||
"onImageHeightChanged": [Function],
|
||||
"onImageLoaded": [Function],
|
||||
<header>
|
||||
<div
|
||||
className="ThreadItem__author"
|
||||
>
|
||||
Someone
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__tags"
|
||||
>
|
||||
<Memo(Tag)
|
||||
onClick={[Function]}
|
||||
text="Team name"
|
||||
/>
|
||||
</div>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
}
|
||||
mentionKeys={Array []}
|
||||
message="test msg"
|
||||
options={
|
||||
Object {
|
||||
"atMentions": true,
|
||||
"mentionHighlight": false,
|
||||
"singleline": true,
|
||||
useTime={false}
|
||||
/>
|
||||
</header>
|
||||
<div
|
||||
className="menu-anchor alt-visible"
|
||||
>
|
||||
<MockThreadMenu
|
||||
hasUnreads={false}
|
||||
isFollowing={true}
|
||||
threadId="1y8hpek81byspd4enyk9mp1ncw"
|
||||
unreadTimestamp={1611786714912}
|
||||
>
|
||||
<WithTooltip
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Actions"
|
||||
id="threading.threadItem.menu"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Memo(Button)
|
||||
aria-label="Actions"
|
||||
className="Button___icon"
|
||||
marginTop={true}
|
||||
>
|
||||
<DotsVerticalIcon
|
||||
size={18}
|
||||
/>
|
||||
</Memo(Button)>
|
||||
</WithTooltip>
|
||||
</MockThreadMenu>
|
||||
</div>
|
||||
<div
|
||||
className="preview"
|
||||
dir="auto"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<MockMarkdown
|
||||
imageProps={
|
||||
Object {
|
||||
"onImageHeightChanged": [Function],
|
||||
"onImageLoaded": [Function],
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
mentionKeys={Array []}
|
||||
message="test msg"
|
||||
options={
|
||||
Object {
|
||||
"atMentions": true,
|
||||
"mentionHighlight": false,
|
||||
"singleline": true,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="activity"
|
||||
>
|
||||
<MockAvatars
|
||||
size="xs"
|
||||
userIds={
|
||||
Array [
|
||||
"mt5td9mdriyapmwuh5pc84dmhr",
|
||||
"ij61jet1bbdk8fhhxitywdj4ih",
|
||||
"7n4ach3i53bbmj84dfmu5b7c1c",
|
||||
]
|
||||
}
|
||||
/>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="{totalReplies, plural, =0 {Reply} =1 {# reply} other {# replies}}"
|
||||
id="threading.numReplies"
|
||||
values={
|
||||
Object {
|
||||
"totalReplies": 9,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="sr-only"
|
||||
id="ThreadItem__timestamp_1y8hpek81byspd4enyk9mp1ncw"
|
||||
>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="Last reply "
|
||||
id="threading.threadItem.timestamp"
|
||||
/>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
useTime={false}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="activity"
|
||||
>
|
||||
<MockAvatars
|
||||
size="xs"
|
||||
userIds={
|
||||
Array [
|
||||
"mt5td9mdriyapmwuh5pc84dmhr",
|
||||
"ij61jet1bbdk8fhhxitywdj4ih",
|
||||
"7n4ach3i53bbmj84dfmu5b7c1c",
|
||||
]
|
||||
}
|
||||
/>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="{totalReplies, plural, =0 {Reply} =1 {# reply} other {# replies}}"
|
||||
id="threading.numReplies"
|
||||
values={
|
||||
Object {
|
||||
"totalReplies": 9,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`components/threading/global_threads/thread_item should report unread mentions 1`] = `
|
||||
<div
|
||||
aria-label="Thread by Someone"
|
||||
className="ThreadItem has-unreads"
|
||||
id=""
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
<header>
|
||||
<div
|
||||
className="indicator"
|
||||
>
|
||||
<div
|
||||
className="dot-mentions"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__author"
|
||||
>
|
||||
Someone
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__tags"
|
||||
>
|
||||
<Memo(Tag)
|
||||
onClick={[Function]}
|
||||
text="Team name"
|
||||
/>
|
||||
</div>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
useTime={false}
|
||||
/>
|
||||
</header>
|
||||
<Fragment>
|
||||
<div
|
||||
className="menu-anchor alt-visible"
|
||||
>
|
||||
<MockThreadMenu
|
||||
hasUnreads={true}
|
||||
isFollowing={true}
|
||||
threadId="1y8hpek81byspd4enyk9mp1ncw"
|
||||
unreadTimestamp={1611786714912}
|
||||
>
|
||||
<WithTooltip
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Actions"
|
||||
id="threading.threadItem.menu"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Memo(Button)
|
||||
aria-label="Actions"
|
||||
className="Button___icon"
|
||||
marginTop={true}
|
||||
>
|
||||
<DotsVerticalIcon
|
||||
size={18}
|
||||
/>
|
||||
</Memo(Button)>
|
||||
</WithTooltip>
|
||||
</MockThreadMenu>
|
||||
</div>
|
||||
<div
|
||||
className="preview"
|
||||
dir="auto"
|
||||
aria-describedby="ThreadItem__timestamp_1y8hpek81byspd4enyk9mp1ncw"
|
||||
aria-label="Thread by Someone"
|
||||
className="ThreadItem has-unreads"
|
||||
id=""
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
<MockMarkdown
|
||||
imageProps={
|
||||
Object {
|
||||
"onImageHeightChanged": [Function],
|
||||
"onImageLoaded": [Function],
|
||||
<header>
|
||||
<div
|
||||
className="indicator"
|
||||
>
|
||||
<div
|
||||
className="dot-mentions"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__author"
|
||||
>
|
||||
Someone
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__tags"
|
||||
>
|
||||
<Memo(Tag)
|
||||
onClick={[Function]}
|
||||
text="Team name"
|
||||
/>
|
||||
</div>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
}
|
||||
mentionKeys={Array []}
|
||||
message="test msg"
|
||||
options={
|
||||
Object {
|
||||
"atMentions": true,
|
||||
"mentionHighlight": false,
|
||||
"singleline": true,
|
||||
useTime={false}
|
||||
/>
|
||||
</header>
|
||||
<div
|
||||
className="menu-anchor alt-visible"
|
||||
>
|
||||
<MockThreadMenu
|
||||
hasUnreads={true}
|
||||
isFollowing={true}
|
||||
threadId="1y8hpek81byspd4enyk9mp1ncw"
|
||||
unreadTimestamp={1611786714912}
|
||||
>
|
||||
<WithTooltip
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Actions"
|
||||
id="threading.threadItem.menu"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Memo(Button)
|
||||
aria-label="Actions"
|
||||
className="Button___icon"
|
||||
marginTop={true}
|
||||
>
|
||||
<DotsVerticalIcon
|
||||
size={18}
|
||||
/>
|
||||
</Memo(Button)>
|
||||
</WithTooltip>
|
||||
</MockThreadMenu>
|
||||
</div>
|
||||
<div
|
||||
className="preview"
|
||||
dir="auto"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<MockMarkdown
|
||||
imageProps={
|
||||
Object {
|
||||
"onImageHeightChanged": [Function],
|
||||
"onImageLoaded": [Function],
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
mentionKeys={Array []}
|
||||
message="test msg"
|
||||
options={
|
||||
Object {
|
||||
"atMentions": true,
|
||||
"mentionHighlight": false,
|
||||
"singleline": true,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="activity"
|
||||
>
|
||||
<MockAvatars
|
||||
size="xs"
|
||||
userIds={
|
||||
Array [
|
||||
"mt5td9mdriyapmwuh5pc84dmhr",
|
||||
"ij61jet1bbdk8fhhxitywdj4ih",
|
||||
"7n4ach3i53bbmj84dfmu5b7c1c",
|
||||
]
|
||||
}
|
||||
/>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="{newReplies, plural, =1 {# new reply} other {# new replies}}"
|
||||
id="threading.numNewReplies"
|
||||
values={
|
||||
Object {
|
||||
"newReplies": 5,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="sr-only"
|
||||
id="ThreadItem__timestamp_1y8hpek81byspd4enyk9mp1ncw"
|
||||
>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="Last reply "
|
||||
id="threading.threadItem.timestamp"
|
||||
/>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
useTime={false}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="activity"
|
||||
>
|
||||
<MockAvatars
|
||||
size="xs"
|
||||
userIds={
|
||||
Array [
|
||||
"mt5td9mdriyapmwuh5pc84dmhr",
|
||||
"ij61jet1bbdk8fhhxitywdj4ih",
|
||||
"7n4ach3i53bbmj84dfmu5b7c1c",
|
||||
]
|
||||
}
|
||||
/>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="{newReplies, plural, =1 {# new reply} other {# new replies}}"
|
||||
id="threading.numNewReplies"
|
||||
values={
|
||||
Object {
|
||||
"newReplies": 5,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
exports[`components/threading/global_threads/thread_item should report unread messages 1`] = `
|
||||
<div
|
||||
aria-label="Thread by Someone"
|
||||
className="ThreadItem has-unreads"
|
||||
id=""
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
<header>
|
||||
<div
|
||||
className="indicator"
|
||||
>
|
||||
<div
|
||||
className="dot-unreads"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__author"
|
||||
>
|
||||
Someone
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__tags"
|
||||
>
|
||||
<Memo(Tag)
|
||||
onClick={[Function]}
|
||||
text="Team name"
|
||||
/>
|
||||
</div>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
useTime={false}
|
||||
/>
|
||||
</header>
|
||||
<Fragment>
|
||||
<div
|
||||
className="menu-anchor alt-visible"
|
||||
>
|
||||
<MockThreadMenu
|
||||
hasUnreads={true}
|
||||
isFollowing={true}
|
||||
threadId="1y8hpek81byspd4enyk9mp1ncw"
|
||||
unreadTimestamp={1611786714912}
|
||||
>
|
||||
<WithTooltip
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Actions"
|
||||
id="threading.threadItem.menu"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Memo(Button)
|
||||
aria-label="Actions"
|
||||
className="Button___icon"
|
||||
marginTop={true}
|
||||
>
|
||||
<DotsVerticalIcon
|
||||
size={18}
|
||||
/>
|
||||
</Memo(Button)>
|
||||
</WithTooltip>
|
||||
</MockThreadMenu>
|
||||
</div>
|
||||
<div
|
||||
className="preview"
|
||||
dir="auto"
|
||||
aria-describedby="ThreadItem__timestamp_1y8hpek81byspd4enyk9mp1ncw"
|
||||
aria-label="Thread by Someone"
|
||||
className="ThreadItem has-unreads"
|
||||
id=""
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
<MockMarkdown
|
||||
imageProps={
|
||||
Object {
|
||||
"onImageHeightChanged": [Function],
|
||||
"onImageLoaded": [Function],
|
||||
<header>
|
||||
<div
|
||||
className="indicator"
|
||||
>
|
||||
<div
|
||||
className="dot-unreads"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__author"
|
||||
>
|
||||
Someone
|
||||
</div>
|
||||
<div
|
||||
className="ThreadItem__tags"
|
||||
>
|
||||
<Memo(Tag)
|
||||
onClick={[Function]}
|
||||
text="Team name"
|
||||
/>
|
||||
</div>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
}
|
||||
mentionKeys={Array []}
|
||||
message="test msg"
|
||||
options={
|
||||
Object {
|
||||
"atMentions": true,
|
||||
"mentionHighlight": false,
|
||||
"singleline": true,
|
||||
useTime={false}
|
||||
/>
|
||||
</header>
|
||||
<div
|
||||
className="menu-anchor alt-visible"
|
||||
>
|
||||
<MockThreadMenu
|
||||
hasUnreads={true}
|
||||
isFollowing={true}
|
||||
threadId="1y8hpek81byspd4enyk9mp1ncw"
|
||||
unreadTimestamp={1611786714912}
|
||||
>
|
||||
<WithTooltip
|
||||
title={
|
||||
<Memo(MemoizedFormattedMessage)
|
||||
defaultMessage="Actions"
|
||||
id="threading.threadItem.menu"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<Memo(Button)
|
||||
aria-label="Actions"
|
||||
className="Button___icon"
|
||||
marginTop={true}
|
||||
>
|
||||
<DotsVerticalIcon
|
||||
size={18}
|
||||
/>
|
||||
</Memo(Button)>
|
||||
</WithTooltip>
|
||||
</MockThreadMenu>
|
||||
</div>
|
||||
<div
|
||||
className="preview"
|
||||
dir="auto"
|
||||
onClick={[Function]}
|
||||
onKeyDown={[Function]}
|
||||
>
|
||||
<MockMarkdown
|
||||
imageProps={
|
||||
Object {
|
||||
"onImageHeightChanged": [Function],
|
||||
"onImageLoaded": [Function],
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
mentionKeys={Array []}
|
||||
message="test msg"
|
||||
options={
|
||||
Object {
|
||||
"atMentions": true,
|
||||
"mentionHighlight": false,
|
||||
"singleline": true,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="activity"
|
||||
>
|
||||
<MockAvatars
|
||||
size="xs"
|
||||
userIds={
|
||||
Array [
|
||||
"mt5td9mdriyapmwuh5pc84dmhr",
|
||||
"ij61jet1bbdk8fhhxitywdj4ih",
|
||||
"7n4ach3i53bbmj84dfmu5b7c1c",
|
||||
]
|
||||
}
|
||||
/>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="{newReplies, plural, =1 {# new reply} other {# new replies}}"
|
||||
id="threading.numNewReplies"
|
||||
values={
|
||||
Object {
|
||||
"newReplies": 2,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
className="sr-only"
|
||||
id="ThreadItem__timestamp_1y8hpek81byspd4enyk9mp1ncw"
|
||||
>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="Last reply "
|
||||
id="threading.threadItem.timestamp"
|
||||
/>
|
||||
<MockTimestamp
|
||||
className="alt-hidden"
|
||||
day="numeric"
|
||||
units={
|
||||
Array [
|
||||
"now",
|
||||
"minute",
|
||||
"hour",
|
||||
"day",
|
||||
"week",
|
||||
]
|
||||
}
|
||||
useTime={false}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="activity"
|
||||
>
|
||||
<MockAvatars
|
||||
size="xs"
|
||||
userIds={
|
||||
Array [
|
||||
"mt5td9mdriyapmwuh5pc84dmhr",
|
||||
"ij61jet1bbdk8fhhxitywdj4ih",
|
||||
"7n4ach3i53bbmj84dfmu5b7c1c",
|
||||
]
|
||||
}
|
||||
/>
|
||||
<MemoizedFormattedMessage
|
||||
defaultMessage="{newReplies, plural, =1 {# new reply} other {# new replies}}"
|
||||
id="threading.numNewReplies"
|
||||
values={
|
||||
Object {
|
||||
"newReplies": 2,
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
`;
|
||||
|
||||
@@ -266,7 +266,7 @@ describe('components/threading/global_threads/thread_item', () => {
|
||||
|
||||
test('should allow marking as unread on alt + click', () => {
|
||||
const wrapper = shallow(<ThreadItem {...props}/>);
|
||||
wrapper.simulate('click', {altKey: true});
|
||||
wrapper.find('div.ThreadItem').simulate('click', {altKey: true});
|
||||
expect(updateThreadRead).not.toHaveBeenCalled();
|
||||
expect(markLastPostInThreadAsUnread).toHaveBeenCalledWith('user_id', 'tid', '1y8hpek81byspd4enyk9mp1ncw');
|
||||
expect(manuallyMarkThreadAsUnread).toHaveBeenCalledWith('1y8hpek81byspd4enyk9mp1ncw', 1611786714912);
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import classNames from 'classnames';
|
||||
import React, {memo, useCallback, useEffect, useMemo} from 'react';
|
||||
import React, {memo, useCallback, useEffect, useMemo, useRef} from 'react';
|
||||
import type {MouseEvent, KeyboardEvent} from 'react';
|
||||
import {FormattedMessage, useIntl} from 'react-intl';
|
||||
import {useDispatch, useSelector} from 'react-redux';
|
||||
@@ -94,6 +94,7 @@ function ThreadItem({
|
||||
const postAuthor = ensureString(post.props?.override_username) || displayName;
|
||||
const getMentionKeysForPost = useMemo(() => makeGetMentionKeysForPost(), []);
|
||||
const mentionsKeys = useSelector((state: GlobalState) => getMentionKeysForPost(state, post, channel));
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (channel?.teammate_id) {
|
||||
@@ -107,6 +108,12 @@ function ThreadItem({
|
||||
}
|
||||
}, [channel, thread?.post.channel_id]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSelected) {
|
||||
ref.current?.focus();
|
||||
}
|
||||
}, [isSelected, threadId]);
|
||||
|
||||
const participantIds = useMemo(() => {
|
||||
const ids = (thread?.participants || []).flatMap(({id}) => {
|
||||
if (id === post.user_id) {
|
||||
@@ -188,134 +195,152 @@ function ThreadItem({
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
style={style}
|
||||
className={classNames('ThreadItem', {
|
||||
'has-unreads': newReplies,
|
||||
'is-selected': isSelected,
|
||||
})}
|
||||
tabIndex={isSelected ? -1 : 0}
|
||||
role='link'
|
||||
aria-label={formatMessage(
|
||||
{id: 'threading.threadItem.ariaLabel', defaultMessage: 'Thread by {author}'},
|
||||
{author: postAuthor},
|
||||
)}
|
||||
id={isFirstThreadInList ? 'tutorial-threads-mobile-list' : ''}
|
||||
onClick={selectHandler}
|
||||
onKeyDown={selectHandler}
|
||||
>
|
||||
<header>
|
||||
{Boolean(newMentions || newReplies) && (
|
||||
<div className='indicator'>
|
||||
{newMentions ? (
|
||||
<div className={classNames('dot-mentions', {over: newMentions > 99})}>
|
||||
{Math.min(newMentions, 99)}
|
||||
{newMentions > 99 && '+'}
|
||||
</div>
|
||||
) : (
|
||||
<div className='dot-unreads'/>
|
||||
<>
|
||||
<div
|
||||
style={style}
|
||||
className={classNames('ThreadItem', {
|
||||
'has-unreads': newReplies,
|
||||
'is-selected': isSelected,
|
||||
})}
|
||||
tabIndex={isSelected ? -1 : 0}
|
||||
role='link'
|
||||
aria-label={formatMessage(
|
||||
{id: 'threading.threadItem.ariaLabel', defaultMessage: 'Thread by {author}'},
|
||||
{author: postAuthor},
|
||||
)}
|
||||
aria-describedby={`ThreadItem__timestamp_${threadId}`}
|
||||
id={isFirstThreadInList ? 'tutorial-threads-mobile-list' : ''}
|
||||
onClick={selectHandler}
|
||||
onKeyDown={selectHandler}
|
||||
ref={ref}
|
||||
>
|
||||
<header>
|
||||
{Boolean(newMentions || newReplies) && (
|
||||
<div className='indicator'>
|
||||
{newMentions ? (
|
||||
<div className={classNames('dot-mentions', {over: newMentions > 99})}>
|
||||
{Math.min(newMentions, 99)}
|
||||
{newMentions > 99 && '+'}
|
||||
</div>
|
||||
) : (
|
||||
<div className='dot-unreads'/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className='ThreadItem__author'>{postAuthor}</div>
|
||||
<div className='ThreadItem__tags'>
|
||||
{channel && postAuthor !== channel?.display_name && (
|
||||
<Tag
|
||||
onClick={goToInChannelHandler}
|
||||
text={channel?.display_name}
|
||||
/>
|
||||
)}
|
||||
{isPostPriorityEnabled && (
|
||||
thread.is_urgent && (
|
||||
<PriorityBadge
|
||||
className={postAuthor === channel?.display_name ? 'ml-2' : ''}
|
||||
priority={PostPriority.URGENT}
|
||||
/>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className='ThreadItem__author'>{postAuthor}</div>
|
||||
<div className='ThreadItem__tags'>
|
||||
{channel && postAuthor !== channel?.display_name && (
|
||||
<Tag
|
||||
onClick={goToInChannelHandler}
|
||||
text={channel?.display_name}
|
||||
<Timestamp
|
||||
{...THREADING_TIME}
|
||||
className='alt-hidden'
|
||||
value={lastReplyAt}
|
||||
/>
|
||||
</header>
|
||||
<div className='menu-anchor alt-visible'>
|
||||
<ThreadMenu
|
||||
threadId={threadId}
|
||||
isFollowing={isFollowing ?? false}
|
||||
hasUnreads={Boolean(newReplies)}
|
||||
unreadTimestamp={unreadTimestamp}
|
||||
>
|
||||
<WithTooltip
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='threading.threadItem.menu'
|
||||
defaultMessage='Actions'
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
marginTop={true}
|
||||
className='Button___icon'
|
||||
aria-label={formatMessage({
|
||||
id: 'threading.threadItem.menu',
|
||||
defaultMessage: 'Actions',
|
||||
})}
|
||||
>
|
||||
<DotsVerticalIcon size={18}/>
|
||||
</Button>
|
||||
</WithTooltip>
|
||||
</ThreadMenu>
|
||||
</div>
|
||||
|
||||
{/* The strange interaction here where we need a click/keydown handler messes with the ESLint rules, so we just disable it */}
|
||||
{/*eslint-disable-next-line jsx-a11y/no-static-element-interactions*/}
|
||||
<div
|
||||
className='preview'
|
||||
dir='auto'
|
||||
onClick={handleFormattedTextClick}
|
||||
onKeyDown={handleFormattedTextClick}
|
||||
>
|
||||
{post.message ? (
|
||||
<Markdown
|
||||
message={post.state === Posts.POST_DELETED ? msgDeleted : post.message}
|
||||
options={markdownPreviewOptions}
|
||||
imagesMetadata={post?.metadata && post?.metadata?.images}
|
||||
mentionKeys={mentionsKeys}
|
||||
imageProps={imageProps}
|
||||
/>
|
||||
)}
|
||||
{isPostPriorityEnabled && (
|
||||
thread.is_urgent && (
|
||||
<PriorityBadge
|
||||
className={postAuthor === channel?.display_name ? 'ml-2' : ''}
|
||||
priority={PostPriority.URGENT}
|
||||
/>
|
||||
)
|
||||
) : (
|
||||
<Attachment post={post}/>
|
||||
)}
|
||||
</div>
|
||||
<Timestamp
|
||||
{...THREADING_TIME}
|
||||
className='alt-hidden'
|
||||
value={lastReplyAt}
|
||||
/>
|
||||
</header>
|
||||
<div className='menu-anchor alt-visible'>
|
||||
<ThreadMenu
|
||||
threadId={threadId}
|
||||
isFollowing={isFollowing ?? false}
|
||||
hasUnreads={Boolean(newReplies)}
|
||||
unreadTimestamp={unreadTimestamp}
|
||||
<div className='activity'>
|
||||
{participantIds?.length ? (
|
||||
<Avatars
|
||||
userIds={participantIds}
|
||||
size='xs'
|
||||
/>
|
||||
) : null}
|
||||
{Boolean(totalReplies) && (
|
||||
<>
|
||||
{newReplies ? (
|
||||
<FormattedMessage
|
||||
id='threading.numNewReplies'
|
||||
defaultMessage='{newReplies, plural, =1 {# new reply} other {# new replies}}'
|
||||
values={{newReplies}}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id='threading.numReplies'
|
||||
defaultMessage='{totalReplies, plural, =0 {Reply} =1 {# reply} other {# replies}}'
|
||||
values={{totalReplies}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{showListTutorialTip && isFirstThreadInList && isMobileView && (<CRTListTutorialTip/>)}
|
||||
<span
|
||||
className='sr-only'
|
||||
id={`ThreadItem__timestamp_${threadId}`}
|
||||
>
|
||||
<WithTooltip
|
||||
title={(
|
||||
<FormattedMessage
|
||||
id='threading.threadItem.menu'
|
||||
defaultMessage='Actions'
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<Button
|
||||
marginTop={true}
|
||||
className='Button___icon'
|
||||
aria-label={formatMessage({
|
||||
id: 'threading.threadItem.menu',
|
||||
defaultMessage: 'Actions',
|
||||
})}
|
||||
>
|
||||
<DotsVerticalIcon size={18}/>
|
||||
</Button>
|
||||
</WithTooltip>
|
||||
</ThreadMenu>
|
||||
</div>
|
||||
|
||||
{/* The strange interaction here where we need a click/keydown handler messes with the ESLint rules, so we just disable it */}
|
||||
{/*eslint-disable-next-line jsx-a11y/no-static-element-interactions*/}
|
||||
<div
|
||||
className='preview'
|
||||
dir='auto'
|
||||
onClick={handleFormattedTextClick}
|
||||
onKeyDown={handleFormattedTextClick}
|
||||
>
|
||||
{post.message ? (
|
||||
<Markdown
|
||||
message={post.state === Posts.POST_DELETED ? msgDeleted : post.message}
|
||||
options={markdownPreviewOptions}
|
||||
imagesMetadata={post?.metadata && post?.metadata?.images}
|
||||
mentionKeys={mentionsKeys}
|
||||
imageProps={imageProps}
|
||||
<FormattedMessage
|
||||
id='threading.threadItem.timestamp'
|
||||
defaultMessage='Last reply '
|
||||
/>
|
||||
) : (
|
||||
<Attachment post={post}/>
|
||||
)}
|
||||
</div>
|
||||
<div className='activity'>
|
||||
{participantIds?.length ? (
|
||||
<Avatars
|
||||
userIds={participantIds}
|
||||
size='xs'
|
||||
<Timestamp
|
||||
{...THREADING_TIME}
|
||||
className='alt-hidden'
|
||||
value={lastReplyAt}
|
||||
/>
|
||||
) : null}
|
||||
{Boolean(totalReplies) && (
|
||||
<>
|
||||
{newReplies ? (
|
||||
<FormattedMessage
|
||||
id='threading.numNewReplies'
|
||||
defaultMessage='{newReplies, plural, =1 {# new reply} other {# new replies}}'
|
||||
values={{newReplies}}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
id='threading.numReplies'
|
||||
defaultMessage='{totalReplies, plural, =0 {Reply} =1 {# reply} other {# replies}}'
|
||||
values={{totalReplies}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
{showListTutorialTip && isFirstThreadInList && isMobileView && (<CRTListTutorialTip/>)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -120,9 +120,7 @@ const ThreadList = ({
|
||||
}
|
||||
}
|
||||
select(data[threadIdToSelect]);
|
||||
|
||||
// hacky way to ensure the thread item loses focus.
|
||||
ref.current?.focus();
|
||||
e.preventDefault();
|
||||
}, [selectedThreadId, data]);
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
@@ -5497,6 +5497,7 @@
|
||||
"threading.threadHeader.menu": "More Actions",
|
||||
"threading.threadItem.ariaLabel": "Thread by {author}",
|
||||
"threading.threadItem.menu": "Actions",
|
||||
"threading.threadItem.timestamp": "Last reply ",
|
||||
"threading.threadList.markRead": "Mark all threads as read",
|
||||
"threading.threadList.tabsLabel": "Filter visible threads",
|
||||
"threading.threadMenu.copy": "Copy link",
|
||||
|
||||
Ссылка в новой задаче
Block a user