Fixed multiple styling fixes (#3368)

* Fixed multiple styling fixes

* fix tests

* Update snapshots

* Update snapshots

Co-authored-by: Miguel de la Cruz <miguel@mcrx.me>

mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoardItem.test.tsx.snap

@@ -29,7 +29,9 @@ exports[`components/rhsChannelBoardItem render board 1`] = `
         </button>
       </div>
     </div>
-    <div />
+    <div
+      class="description"
+    />
     <div
       class="date"
     >
@@ -131,7 +133,9 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
         </div>
       </div>
     </div>
-    <div />
+    <div
+      class="description"
+    />
     <div
       class="date"
     >

mattermost-plugin/webapp/src/components/__snapshots__/rhsChannelBoards.test.tsx.snap

@@ -58,7 +58,9 @@ exports[`components/rhsChannelBoards renders the RHS for channel boards 1`] = `
               </button>
             </div>
           </div>
-          <div />
+          <div
+            class="description"
+          />
           <div
             class="date"
           >
@@ -92,7 +94,9 @@ exports[`components/rhsChannelBoards renders the RHS for channel boards 1`] = `
               </button>
             </div>
           </div>
-          <div />
+          <div
+            class="description"
+          />
           <div
             class="date"
           >

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;
+    }
 }

mattermost-plugin/webapp/src/components/rhsChannelBoardItem.tsx

@@ -68,7 +68,7 @@ const RHSChannelBoardItem = (props: Props) => {
                     </Menu>
                 </MenuWrapper>
             </div>
-            <div>{board.description}</div>
+            <div className='description'>{board.description}</div>
             <div className='date'>
                 <FormattedMessage
                     id='rhs-boards.last-update-at'

mattermost-plugin/webapp/src/components/rhsChannelBoards.scss

@@ -1,5 +1,9 @@
 .RHSChannelBoards {
     padding: 20px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 
     &.empty {
         display: flex;
@@ -19,6 +23,7 @@
 
     >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;
+        }
     }
 }

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 (
             <div className='focalboard-body'>
@@ -71,7 +83,7 @@ const RHSChannelBoards = () => {
                         <FormattedMessage
                             id='rhs-boards.no-boards-linked-to-channel'
                             defaultMessage='No boards are linked to {channelName} yet'
-                            values={{channelName: currentChannel.display_name}}
+                            values={{channelName: headerChannelName}}
                         />
                     </h2>
                     <div className='empty-paragraph'>
@@ -89,7 +101,7 @@ const RHSChannelBoards = () => {
                         <FormattedMessage
                             id='rhs-boards.link-boards-to-channel'
                             defaultMessage='Link boards to {channelName}'
-                            values={{channelName: currentChannel.display_name}}
+                            values={{channelName: channelName}}
                         />
                     </Button>
                 </div>

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?"
-}
+}

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!')
     })