Pages POC

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

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {useEffect}  from 'react'
+import React, {useEffect, useContext}  from 'react'
 import {FormattedMessage, IntlProvider, useIntl} from 'react-intl'
 
 import {getMessages} from '../../../../webapp/src/i18n'
@@ -11,16 +11,19 @@ import {useWebsockets} from '../../../../webapp/src/hooks/websockets'
 import {Board, BoardMember} from '../../../../webapp/src/blocks/board'
 import {getCurrentTeamId} from '../../../../webapp/src/store/teams'
 import {IUser} from '../../../../webapp/src/user'
+import isPagesContext from '../../../../webapp/src/isPages'
 import {getMe, fetchMe} from '../../../../webapp/src/store/users'
 import {loadBoards, loadMyBoardsMemberships} from '../../../../webapp/src/store/initialLoad'
 import {getCurrentChannel} from '../../../../webapp/src/store/channels'
 import {
     getMySortedBoards,
+    getMySortedPageFolders,
     setLinkToChannel,
     updateBoards,
     updateMembersEnsuringBoardsAndUsers,
     addMyBoardMemberships,
 } from '../../../../webapp/src/store/boards'
+
 import {useAppSelector, useAppDispatch} from '../../../../webapp/src/store/hooks'
 import AddIcon from '../../../../webapp/src/widgets/icons/add'
 import Button from '../../../../webapp/src/widgets/buttons/button'
@@ -36,6 +39,8 @@ import './rhsChannelBoards.scss'
 
 const RHSChannelBoards = () => {
     const boards = useAppSelector(getMySortedBoards)
+    const isPages = useContext(isPagesContext)
+    const pages = useAppSelector(getMySortedPageFolders)
     const teamId = useAppSelector(getCurrentTeamId)
     const currentChannel = useAppSelector(getCurrentChannel)
     const me = useAppSelector<IUser|null>(getMe)
@@ -73,7 +78,10 @@ const RHSChannelBoards = () => {
         }
     }, [me])
 
-    if (!boards) {
+    if (!isPages && !boards) {
+        return null
+    }
+    if (isPages && !pages) {
         return null
     }
     if (!teamId) {
@@ -86,7 +94,13 @@ const RHSChannelBoards = () => {
         return null
     }
 
-    const channelBoards = boards.filter((b) => b.channelId === currentChannel.id)
+    let channelBoards
+    if (isPages) {
+        channelBoards = pages.filter((b) => b.channelId === currentChannel.id)
+    } else {
+        channelBoards = boards.filter((b) => b.channelId === currentChannel.id)
+    }
+
 
     let channelName = currentChannel.display_name
     let headerChannelName = currentChannel.display_name
@@ -104,29 +118,49 @@ const RHSChannelBoards = () => {
             <div className='focalboard-body'>
                 <div className='RHSChannelBoards empty'>
                     <h2>
-                        <FormattedMessage
-                            id='rhs-boards.no-boards-linked-to-channel'
-                            defaultMessage='No boards are linked to {channelName} yet'
-                            values={{channelName: headerChannelName}}
-                        />
+                        {isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.no-pages-linked-to-channel'
+                                defaultMessage='No pages are linked to {channelName} yet'
+                                values={{channelName: headerChannelName}}
+                            />}
+                        {!isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.no-boards-linked-to-channel'
+                                defaultMessage='No boards are linked to {channelName} yet'
+                                values={{channelName: headerChannelName}}
+                            />}
                     </h2>
                     <div className='empty-paragraph'>
-                        <FormattedMessage
-                            id='rhs-boards.no-boards-linked-to-channel-description'
-                            defaultMessage='Boards is a project management tool that helps define, organize, track and manage work across teams, using a familiar kanban board view.'
-                        />
+                        {isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.no-pages-linked-to-channel-description'
+                                defaultMessage='Pages is a documentation tool that helps define, organize, track and manage documentation across teams, using a familiar wiki format.'
+                            />}
+                        {!isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.no-boards-linked-to-channel-description'
+                                defaultMessage='Boards is a project management tool that helps define, organize, track and manage work across teams, using a familiar kanban board view.'
+                            />}
                     </div>
                     <div className='boards-screenshots'><img src={Utils.buildURL(boardsScreenshots, true)}/></div>
                     <Button
                         onClick={() => dispatch(setLinkToChannel(currentChannel.id))}
                         emphasis='primary'
                         size='medium'
                     >
-                        <FormattedMessage
-                            id='rhs-boards.link-boards-to-channel'
-                            defaultMessage='Link boards to {channelName}'
-                            values={{channelName: channelName}}
-                        />
+                        {isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.link-pages-to-channel'
+                                defaultMessage='Link pages to {channelName}'
+                                values={{channelName: channelName}}
+                            />}
+                        {!isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.link-boards-to-channel'
+                                defaultMessage='Link boards to {channelName}'
+                                values={{channelName: channelName}}
+                            />}
                     </Button>
                 </div>
             </div>
@@ -138,10 +172,16 @@ const RHSChannelBoards = () => {
             <div className='RHSChannelBoards'>
                 <div className='rhs-boards-header'>
                     <span className='linked-boards'>
-                        <FormattedMessage
-                            id='rhs-boards.linked-boards'
-                            defaultMessage='Linked boards'
-                        />
+                        {isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.linked-pages'
+                                defaultMessage='Linked pages'
+                            />}
+                        {!isPages &&
+                            <FormattedMessage
+                                id='rhs-boards.linked-boards'
+                                defaultMessage='Linked boards'
+                            />}
                     </span>
                     <Button
                         onClick={() => dispatch(setLinkToChannel(currentChannel.id))}

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

@@ -1,19 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React  from 'react'
+import React, {useContext}  from 'react'
 import {FormattedMessage, IntlProvider} from 'react-intl'
 
+import isPagesContext from '../../../../webapp/src/isPages'
 import {getMessages} from '../../../../webapp/src/i18n'
 import {getLanguage} from '../../../../webapp/src/store/language'
 import {getCurrentChannel} from '../../../../webapp/src/store/channels'
 import {useAppSelector} from '../../../../webapp/src/store/hooks'
 import {Utils} from '../../../../webapp/src/utils'
 
 import appBarIcon from '../../../../webapp/static/app-bar-icon.png'
+import appBarIconPages from '../../../../webapp/static/app-bar-pages-icon.png'
 
 const RHSChannelBoardsHeader = () => {
     const currentChannel = useAppSelector(getCurrentChannel)
     const language = useAppSelector<string>(getLanguage)
+    const isPages = useContext(isPagesContext)
 
     if (!currentChannel) {
         return null
@@ -25,16 +28,30 @@ const RHSChannelBoardsHeader = () => {
             messages={getMessages(language)}
         >
             <div>
-                <img
-                    className='boards-rhs-header-logo'
-                    src={Utils.buildURL(appBarIcon, true)}
-                />
-                <span>
-                    <FormattedMessage
-                        id='rhs-channel-boards-header.title'
-                        defaultMessage='Boards'
-                    />
-                </span>
+                {isPages &&
+                    <img
+                        className='boards-rhs-header-logo'
+                        src={Utils.buildURL(appBarIconPages, true)}
+                    />}
+                {!isPages &&
+                    <img
+                        className='boards-rhs-header-logo'
+                        src={Utils.buildURL(appBarIcon, true)}
+                    />}
+                {isPages &&
+                    <span>
+                        <FormattedMessage
+                            id='rhs-channel-boards-header.pages-title'
+                            defaultMessage='Pages'
+                        />
+                    </span>}
+                {!isPages &&
+                    <span>
+                        <FormattedMessage
+                            id='rhs-channel-boards-header.title'
+                            defaultMessage='Boards'
+                        />
+                    </span>}
                 <span className='style--none sidebar--right__title__subtitle'>{currentChannel.display_name}</span>
             </div>
         </IntlProvider>