Showing the right confirmation modals on channel-board linking (#3453)

* Showing the right confirmation modals on channel-board linking

* Addressing PR review channges

* Fixing linter

* Fixing another linter error

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

@@ -112,6 +112,19 @@ const BoardSelector = () => {
         dispatch(setLinkToChannel(''))
     }
 
+    let confirmationSubText
+    if (showLinkBoardConfirmation?.channelId !== '') {
+        confirmationSubText = intl.formatMessage({
+            id: 'boardSelector.confirm-link-board-subtext-with-other-channel',
+            defaultMessage: 'Linking the "{boardName}" board to this channel would give all members of this channel "Editor" access to the board.\n\nAdditionally, this board is linked to another channel, and will be unlinked from the other channel when you link it here.\n\nAre you sure you want to link it?'
+        }, {boardName: showLinkBoardConfirmation?.title})
+    } else {
+        confirmationSubText = intl.formatMessage({
+            id: 'boardSelector.confirm-link-board-subtext',
+            defaultMessage: 'Linking the "{boardName}" board to this channel would give all members of this channel "Editor" access to the board.\n\nAre you sure you want to link it?'
+        }, {boardName: showLinkBoardConfirmation?.title})
+    }
+
     return (
         <div className='focalboard-body'>
             <Dialog
@@ -128,10 +141,7 @@ const BoardSelector = () => {
                     <ConfirmationDialog
                         dialogBox={{
                             heading: intl.formatMessage({id: 'boardSelector.confirm-link-board', defaultMessage: 'Link board to channel'}),
-                            subText: intl.formatMessage({
+                            subText: confirmationSubText,
-                                id: 'boardSelector.confirm-link-board-subtext',
-                                defaultMessage: 'Linking the "{boardName}" board to this channel would give all members of this channel "Editor" access to the board. Are you sure you want to link it?'
-                            }, {boardName: showLinkBoardConfirmation.title}),
                             confirmButtonText: intl.formatMessage({id: 'boardSelector.confirm-link-board-button', defaultMessage: 'Yes, link board'}),
                             onConfirm: () => linkBoard(showLinkBoardConfirmation, true),
                             onClose: () => setShowLinkBoardConfirmation(null),

webapp/i18n/en.json

@@ -307,6 +307,7 @@
   "boardSelector.confirm-link-board": "Link board to channel",
   "boardSelector.confirm-link-board-button": "Yes, link board",
   "boardSelector.confirm-link-board-subtext": "Linking the \"{boardName}\" board to this channel would give all members of this channel \"Editor\" access to the board. Are you sure you want to link it?",
+  "boardSelector.confirm-link-board-subtext-with-other-channel": "Linking the \"{boardName}\" board to this channel would give all members of this channel \"Editor\" access to the board. Additionally, this board is linked to another channel, and will be unlinked from the other channel when you link it here. Are you sure you want to link it?",
   "boardSelector.create-a-board": "Create a board",
   "boardSelector.link": "Link",
   "boardSelector.search-for-boards": "Search for boards",
@@ -358,9 +359,12 @@
   "share-board.publish": "Publish",
   "share-board.share": "Share",
   "shareBoard.channels-select-group": "Channels",
-  "shareBoard.confirm-link-public-channel": "You're adding a public channel",
+  "shareBoard.confirm-link-channel": "Link board to channel",
-  "shareBoard.confirm-link-public-channel-button": "Yes, add public channel",
+  "shareBoard.confirm-link-channel-button": "Yes, link here",
-  "shareBoard.confirm-link-public-channel-subtext": "Anyone who joins that public channel will now get “Editor” access to the board, are you sure you want to proceed?",
+  "shareBoard.confirm-link-channel-button-with-other-channel": "Yes, unlink and link here",
+  "shareBoard.confirm-link-channel-subtext": "When you link a channel to a board, all members of the channel (existing and new) will be able to edit it. Are you sure you want to link it?",
+  "shareBoard.confirm-link-channel-subtext-with-other-channel": "When you link a channel to a board, all members of the channel (existing and new) will be able to edit it. This board is currently linked to another channel. It will be unlinked if you choose to link it here. Are you sure you want to link it?",
+  "shareBoard.confirm-unlink.title": "Unlink channel from board",
   "shareBoard.confirm-unlink.body": "When you unlink a channel from a board, all members of the channel (existing and new) will loose access to it unless they are given permission separately. {lineBreak} Are you sure you want to unlink it?",
   "shareBoard.confirm-unlink.confirmBtnText": "Yes, unlink",
   "shareBoard.confirm-unlink.title": "Unlink channel from board",

webapp/src/components/confirmationDialogBox.scss

@@ -43,6 +43,7 @@
 
     .sub-text {
         text-align: center;
+        white-space: pre-line;
     }
 }
 

webapp/src/components/shareBoard/shareBoard.scss

@@ -15,6 +15,14 @@
             position: fixed;
             width: 500px;
         }
+
+        .action-buttons {
+            .Button {
+                height: unset;
+                min-height: 40px;
+                padding: 5px 20px;
+            }
+        }
     }
 
     .toolbar {

webapp/src/components/shareBoard/shareBoard.tsx

@@ -146,7 +146,7 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
     }
 
     const onLinkBoard = async (channel: Channel, confirmed?: boolean) => {
-        if (channel.type === ChannelTypeOpen && !confirmed) {
+        if (!confirmed) {
             setShowLinkChannelConfirmation(channel)
             return
         }
@@ -322,6 +322,16 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
 
     const toolbar = board.isTemplate ? shareTemplateTitle : shareBoardTitle
 
+    let confirmSubtext
+    let confirmButtonText
+    if (board.channelId == '') {
+        confirmSubtext = intl.formatMessage({id: 'shareBoard.confirm-link-channel-subtext', defaultMessage: 'When you link a channel to a board, all members of the channel (existing and new) will be able to edit it.\n\nAre you sure you want to link it?'})
+        confirmButtonText = intl.formatMessage({id: 'shareBoard.confirm-link-channel-button', defaultMessage: 'Yes, link here'})
+    } else {
+        confirmSubtext = intl.formatMessage({id: 'shareBoard.confirm-link-channel-subtext-with-other-channel', defaultMessage: 'When you link a channel to a board, all members of the channel (existing and new) will be able to edit it.\n\nThis board is currently linked to another channel.\nIt will be unlinked if you choose to link it here.\n\nAre you sure you want to link it?'})
+        confirmButtonText = intl.formatMessage({id: 'shareBoard.confirm-link-channel-button-with-other-channel', defaultMessage: 'Yes, unlink and link here'})
+    }
+
     return (
         <Dialog
             onClose={props.onClose}
@@ -331,9 +341,9 @@ export default function ShareBoardDialog(props: Props): JSX.Element {
             {showLinkChannelConfirmation &&
                 <ConfirmationDialog
                     dialogBox={{
-                        heading: intl.formatMessage({id: 'shareBoard.confirm-link-public-channel', defaultMessage: 'You\'re adding a public channel'}),
+                        heading: intl.formatMessage({id: 'shareBoard.confirm-link-channel', defaultMessage: 'Link board to channel'}),
-                        subText: intl.formatMessage({id: 'shareBoard.confirm-link-public-channel-subtext', defaultMessage: 'Anyone who joins that public channel will now get “Editor” access to the board, are you sure you want to proceed?'}),
+                        subText: confirmSubtext,
-                        confirmButtonText: intl.formatMessage({id: 'shareBoard.confirm-link-public-channel-button', defaultMessage: 'Yes, add public channel'}),
+                        confirmButtonText: confirmButtonText,
                         onConfirm: () => onLinkBoard(showLinkChannelConfirmation, true),
                         onClose: () => setShowLinkChannelConfirmation(null),
                     }}