diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap index 8ed689d87..9e6b24490 100644 --- a/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap +++ b/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap @@ -29,7 +29,9 @@ exports[`components/rhsChannelBoardItem render board 1`] = ` -
+
@@ -131,7 +133,9 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
-
+
diff --git a/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoards.test.tsx.snap b/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoards.test.tsx.snap index 74d440088..4e1cd5503 100644 --- a/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoards.test.tsx.snap +++ b/mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoards.test.tsx.snap @@ -58,7 +58,9 @@ exports[`components/rhsChannelBoards renders the RHS for channel boards 1`] = `
-
+
@@ -92,7 +94,9 @@ exports[`components/rhsChannelBoards renders the RHS for channel boards 1`] = `
-
+
diff --git a/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.scss b/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.scss index 1357e752b..18f1ff7bb 100644 --- a/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.scss +++ b/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.scss @@ -3,7 +3,6 @@ text-align: left; border: 1px solid #cccccc; border-radius: 5px; - margin-top: 10px; cursor: pointer; color: rgb(var(--center-channel-color-rgb)); @@ -22,6 +21,16 @@ .title { font-weight: 600; flex-grow: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } } + + .description { + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + } } diff --git a/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx b/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx index 84aab123a..ba1a58c70 100644 --- a/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx +++ b/mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx @@ -68,7 +68,7 @@ const RHSChannelBoardItem = (props: Props) => {
-
{board.description}
+
{board.description}
h2 { text-align: center; + word-wrap: anywhere; } .empty-paragraph { @@ -37,11 +42,22 @@ } .rhs-boards-list { - overflow-y: scroll; + overflow-y: auto; + display: flex; + flex-direction: column; + gap: 10px; } .Button { width: auto; align-self: center; + max-width: 100%; + + span { + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } } diff --git a/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx b/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx index a2a6fa2f6..10651cc95 100644 --- a/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx +++ b/mattermost-plugin/webapp/src/components/rhsChannelBoards.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React, {useEffect} from 'react' -import {FormattedMessage, IntlProvider} from 'react-intl' +import {FormattedMessage, IntlProvider, useIntl} from 'react-intl' import {getMessages} from '../../../../webapp/src/i18n' import {getLanguage} from '../../../../webapp/src/store/language' @@ -30,6 +30,7 @@ const RHSChannelBoards = () => { const teamId = useAppSelector(getCurrentTeamId) const currentChannel = useAppSelector(getCurrentChannel) const dispatch = useAppDispatch() + const intl = useIntl() useEffect(() => { dispatch(loadBoards()) @@ -63,6 +64,17 @@ const RHSChannelBoards = () => { } const channelBoards = boards.filter((b) => b.channelId === currentChannel.id) + let channelName = currentChannel.display_name + let headerChannelName = currentChannel.display_name + + if (currentChannel.type === 'D') { + channelName = intl.formatMessage({id: 'rhs-boards.dm', defaultMessage: 'DM'}) + headerChannelName = intl.formatMessage({id: 'rhs-boards.header.dm', defaultMessage: 'this Direct Message'}) + } else if (currentChannel.type === 'G') { + channelName = intl.formatMessage({id: 'rhs-boards.gm', defaultMessage: 'GM'}) + headerChannelName = intl.formatMessage({id: 'rhs-boards.header.gm', defaultMessage: 'this Group Message'}) + } + if (channelBoards.length === 0) { return (
@@ -71,7 +83,7 @@ const RHSChannelBoards = () => {
@@ -89,7 +101,7 @@ const RHSChannelBoards = () => {
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 389f75079..b2175437a 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -351,6 +351,10 @@ "rhs-boards.no-boards-linked-to-channel-description": "Boards is a project management tool that helps define, organize, track and manage work across teams, using a familiar kanban board view.", "rhs-boards.unlink-board": "Unlink board", "rhs-channel-boards-header.title": "Boards", + "rhs-boards.dm": "DM", + "rhs-boards.header.dm": "this Direct Message", + "rhs-boards.gm": "GM", + "rhs-boards.header.gm": "this Group Message", "share-board.publish": "Publish", "share-board.share": "Share", "shareBoard.channels-select-group": "Channels", @@ -364,4 +368,4 @@ "tutorial_tip.ok": "Next", "tutorial_tip.out": "Opt out of these tips.", "tutorial_tip.seen": "Seen this before?" -} \ No newline at end of file +} diff --git a/webapp/src/components/shareBoard/shareBoard.test.tsx b/webapp/src/components/shareBoard/shareBoard.test.tsx index fb10a74cb..46d6229b3 100644 --- a/webapp/src/components/shareBoard/shareBoard.test.tsx +++ b/webapp/src/components/shareBoard/shareBoard.test.tsx @@ -242,7 +242,7 @@ describe('src/components/shareBoard/shareBoard', () => { ) container = result.container }) - const copyLinkElement = screen.getByRole('button', {name: 'Copy link'}) + const copyLinkElement = screen.getByTitle('Copy internal link') expect(copyLinkElement).toBeDefined() expect(container).toMatchSnapshot() @@ -273,7 +273,7 @@ describe('src/components/shareBoard/shareBoard', () => { expect(container).toMatchSnapshot() - const copyLinkElement = screen.getByRole('button', {name: 'Copy link'}) + const copyLinkElement = screen.getByTitle('Copy internal link') expect(copyLinkElement).toBeDefined() await act(async () => { @@ -283,7 +283,7 @@ describe('src/components/shareBoard/shareBoard', () => { expect(mockedUtils.copyTextToClipboard).toBeCalledTimes(1) expect(container).toMatchSnapshot() - const copiedLinkElement = screen.getByRole('button', {name: 'Copied!'}) + const copiedLinkElement = screen.getByText('Copied!') expect(copiedLinkElement).toBeDefined() expect(copiedLinkElement.textContent).toContain('Copied!') })