✨ (ui) help the user understanding mix accesses if project manager while not a member or with read-only access only

Author: sneko

client/src/components/BoardActions/BoardActions.jsx

@@ -43,6 +43,8 @@ const BoardActions = React.memo(
     onBoardUpdate,
     onSearchUsers,
     onClearUserSearch,
+    isProjectManagerNotMember,
+    isViewerOnly,
   }) => {
     const [t] = useTranslation();
 
@@ -112,8 +114,21 @@ const BoardActions = React.memo(
       }
     }, [filterLabels, onLabelToFilterAdd]);
 
+    let warningMessage = null;
+    if (isProjectManagerNotMember) {
+      warningMessage = t('common.boardWarningProjectManagerNotMember');
+    } else if (isViewerOnly) {
+      warningMessage = t('common.boardWarningViewerOnly');
+    }
+
     return (
       <div className={styles.wrapper}>
+        {warningMessage && (
+          <div className={styles.warning}>
+            <Icon name="info" type="outlined" size="small" />
+            <span>{warningMessage}</span>
+          </div>
+        )}
         <h4 className={styles.boardName}>{currentBoardName}</h4>
         <div className={styles.actions}>
           <div className={styles.action}>
@@ -293,6 +308,8 @@ BoardActions.propTypes = {
   onBoardUpdate: PropTypes.func.isRequired,
   onSearchUsers: PropTypes.func.isRequired,
   onClearUserSearch: PropTypes.func.isRequired,
+  isProjectManagerNotMember: PropTypes.bool.isRequired,
+  isViewerOnly: PropTypes.bool.isRequired,
 };
 
 export default BoardActions;

client/src/components/BoardActions/BoardActions.module.scss

@@ -10,6 +10,19 @@
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .warning {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    background-color: var(--c--contextuals--background--semantic--warning--secondary);
+    color: var(--c--contextuals--content--semantic--warning--secondary);
   }
 
   .boardName {

client/src/containers/BoardActionsContainer.js

@@ -44,6 +44,11 @@ const mapStateToProps = (state) => {
     canEdit: isCurrentUserEditor,
     canEditMemberships: isCurrentUserEditor || isCurrentUserManager,
     canSeeMemberships: isCurrentUserMember || isCurrentUserManager,
+    isProjectManagerNotMember: isCurrentUserManager && !isCurrentUserMember,
+    isViewerOnly:
+      isCurrentUserMember &&
+      !isCurrentUserEditor &&
+      currentUserMembership.role === BoardMembershipRoles.VIEWER,
     isBoardPublic: currentBoard ? currentBoard.isPublic : false,
     searchedUsers,
     isSearchingUsers,

client/src/locales/en-US/core.js

@@ -45,6 +45,9 @@ export default {
       boardName: 'Board name',
       boardNotFound_title: 'Board Not Found',
       boardPermissions_title: 'Board permissions',
+      boardWarningProjectManagerNotMember:
+        'You are viewing this board as a project manager. You are not a member and have limited interactions.',
+      boardWarningViewerOnly: 'You have read-only access to this board.',
       canComment: 'Can comment',
       canEditContentOfBoard: 'Can edit the content of the board.',
       canOnlyViewBoard: 'Can only view the board.',
@@ -168,7 +171,8 @@ export default {
       settings: 'Settings',
       setupReady: 'Everything is ready {{userName}}!',
       sharedBoardWorkspace: 'Shared workspace',
-      sharedBoardWorkspaceDescription: 'Boards with at least one member who is not a project manager',
+      sharedBoardWorkspaceDescription:
+        'Boards with at least one member who is not a project manager',
       sortList_title: 'Sort List',
       startByCreatingProject: 'You can now <1>Create project</1>',
       stopwatch: 'Stopwatch',

client/src/locales/fr-FR/core.js

@@ -50,6 +50,9 @@ export default {
       boardName: 'Nom du tableau',
       boardNotFound_title: 'Carte non trouvée',
       boardPermissions_title: 'Permissions du tableau',
+      boardWarningProjectManagerNotMember:
+        "Vous consultez ce tableau en tant que gestionnaire de projet. Vous n'êtes pas membre et avez des interactions limitées.",
+      boardWarningViewerOnly: 'Vous avez un accès en lecture seule à ce tableau.',
       canComment: 'Peut commenter',
       canEditContentOfBoard: 'Peut éditer le contenu du tableau',
       canOnlyViewBoard: 'Peut uniquement voir le tableau',
@@ -115,7 +118,8 @@ export default {
       hours: 'Heures',
       importBoard_title: 'Importer un tableau',
       internalBoardWorkspace: 'Espace interne',
-      internalBoardWorkspaceDescription: 'Tableaux dont les membres sont uniquement des gestionnaires du projet',
+      internalBoardWorkspaceDescription:
+        'Tableaux dont les membres sont uniquement des gestionnaires du projet',
       invalidCurrentPassword: 'Mot de passe actuel invalide',
       labels: 'Étiquettes',
       language: 'Langue',