Added the markdown in channel boardSelector RHS for description (#3759)

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>

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

@@ -49,11 +49,15 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
     <div
       class="board-info"
     >
-      
+      <span
+        class="icon"
+      >
+        i
+      </span>
       <span
         class="title"
       >
-        Test board
+        New board
       </span>
       <div
         aria-label="menuwrapper"
@@ -77,10 +81,11 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
             <div
               class="menu-options"
             >
+              <div />
               <div>
                 <div
                   aria-label="Unlink board"
-                  class="MenuOption TextOption menu-option"
+                  class="MenuOption TextOption menu-option menu-option--with-subtext menu-option--disabled"
                   role="button"
                 >
                   <div
@@ -102,13 +107,17 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
                     >
                       Unlink board
                     </div>
+                    <div
+                      class="menu-subtext text-75 mt-1"
+                    >
+                      You are not an admin of the board
+                    </div>
                   </div>
                   <div
                     class="noicon"
                   />
                 </div>
               </div>
-              <div />
             </div>
             <div
               class="menu-spacer hideOnWidescreen"
@@ -148,7 +157,14 @@ exports[`components/rhsChannelBoardItem render board with menu open 1`] = `
     </div>
     <div
       class="description"
-    />
+    >
+      <p>
+        <strong>
+          Board
+        </strong>
+         with description
+      </p>
+    </div>
     <div
       class="date"
     >

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

@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event'
 import {createBoard} from '../../../../webapp/src/blocks/board'
 import {mockStateStore, wrapIntl} from '../../../../webapp/src/testUtils'
 
+import {TestBlockFactory} from '../../../../webapp/src/test/testBlockFactory'
+
 import RHSChannelBoardItem from './rhsChannelBoardItem'
 
 describe('components/rhsChannelBoardItem', () => {
@@ -42,7 +44,7 @@ describe('components/rhsChannelBoardItem', () => {
     })
 
     it('render board with menu open', async () => {
-        const board = createBoard()
+        const board = TestBlockFactory.createBoard()
         const state = {
             teams: {
                 current: {
@@ -55,14 +57,12 @@ describe('components/rhsChannelBoardItem', () => {
                 myBoardMemberships: {
                     [board.id]: {userId: 'user_id_1', schemeAdmin: true},
                 },
-                boards: {
-                    [board.id]: board
-                }
             }
         }
+        board.id = 'test_id'
+        board.title = 'New board'
+        board.description = '**Board** with description'
         board.updateAt = 1657311058157
-        board.title = 'Test board'
-
         const store = mockStateStore([], state)
         const {container} = render(wrapIntl(
             <ReduxProvider store={store}>
@@ -72,7 +72,6 @@ describe('components/rhsChannelBoardItem', () => {
 
         const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
         await userEvent.click(buttonElement)
-
         expect(container).toMatchSnapshot()
     })
 })

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

@@ -47,6 +47,7 @@ const RHSChannelBoardItem = (props: Props) => {
 
     const untitledBoardTitle = intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled board'})
 
+    const markdownHtml = Utils.htmlFromMarkdown(board.description)
     return (
         <div
             onClick={() => handleBoardClicked(board.id)}
@@ -85,7 +86,7 @@ const RHSChannelBoardItem = (props: Props) => {
                                 key={`unlinkBoard-${board.id}`}
                                 id='unlinkBoard'
                                 disabled={true}
-                                name={intl.formatMessage({id: 'rhs-boards.unlink-board1', defaultMessage: 'Unlink board Hello'})}
+                                name={intl.formatMessage({id: 'rhs-boards.unlink-board1', defaultMessage: 'Unlink board'})}
                                 icon={<CompassIcon icon='link-variant-off'/>}
                                 onClick={() => {
                                     onUnlinkBoard(board)
@@ -96,7 +97,9 @@ const RHSChannelBoardItem = (props: Props) => {
                     </Menu>
                 </MenuWrapper>
             </div>
-            <div className='description'>{board.description}</div>
+            <div className='description'
+                dangerouslySetInnerHTML={{__html: markdownHtml}}
+            />
             <div className='date'>
                 <FormattedMessage
                     id='rhs-boards.last-update-at'