Display "no members" message if team is empty (#4337)

* Add no members + no managers  message to empty team lists

* build locales

Co-authored-by: Wille Marcel <[email protected]>

Author: d-rita

frontend/src/components/teamsAndOrgs/messages.js

@@ -16,6 +16,10 @@ export default defineMessages({
     id: 'management.fields.managers',
     defaultMessage: 'Managers',
   },
+  noManagers: {
+    id: 'management.fields.managers.empty',
+    defaultMessage: 'There are no managers yet.',
+  },
   manage: {
     id: 'management.link.manage',
     defaultMessage: 'Manage {entity}',
@@ -32,6 +36,10 @@ export default defineMessages({
     id: 'management.members',
     defaultMessage: 'Members',
   },
+  noMembers: {
+    id: 'management.members.empty',
+    defaultMessage: 'There are no members yet.',
+  },
   mappingTeams: {
     id: 'management.teams.mapping',
     defaultMessage: 'Mapping teams',

frontend/src/components/teamsAndOrgs/teams.js

@@ -299,30 +299,42 @@ export function TeamSideBar({ team, members, managers, requestedToJoin }: Object
           <h4>
             <FormattedMessage {...messages.managers} />
           </h4>
-          <div className="cf db mt3">
-            {managers.map((user, n) => (
-              <UserAvatar
-                key={n}
-                username={user.username}
-                picture={user.pictureUrl}
-                size="large"
-                colorClasses="white bg-blue-grey mv1"
-              />
-            ))}
-          </div>
+          {managers.length === 0 ? (
+            <span className="f6 blue-grey">
+              <FormattedMessage {...messages.noManagers} />
+            </span>
+          ) : (
+            <div className="cf db mt3">
+              {managers.map((user, n) => (
+                <UserAvatar
+                  key={n}
+                  username={user.username}
+                  picture={user.pictureUrl}
+                  size="large"
+                  colorClasses="white bg-blue-grey mv1"
+                />
+              ))}
+            </div>
+          )}
           <h4>
             <FormattedMessage {...messages.members} />
           </h4>
-          <div className="cf db mt3">
-            {members.map((user, n) => (
-              <UserAvatar
-                key={n}
-                username={user.username}
-                picture={user.pictureUrl}
-                colorClasses="white bg-blue-grey mv1"
-              />
-            ))}
-          </div>
+          {members.length === 0 ? (
+            <span className="f6 blue-grey">
+              <FormattedMessage {...messages.noMembers} />
+            </span>
+          ) : (
+            <div className="cf db mt3">
+              {members.map((user, n) => (
+                <UserAvatar
+                  key={n}
+                  username={user.username}
+                  picture={user.pictureUrl}
+                  colorClasses="white bg-blue-grey mv1"
+                />
+              ))}
+            </div>
+          )}
           <div className="cf db mt3">
             {requestedToJoin && (
               <span className="red pr5-ns">

frontend/src/locales/en.json

@@ -668,10 +668,12 @@
   "management.messages.notAllowed": "You are not allowed to manage organizations.",
   "management.messages.imageUpload.error": "The image upload failed.",
   "management.fields.managers": "Managers",
+  "management.fields.managers.empty": "There are no managers yet.",
   "management.link.manage": "Manage {entity}",
   "management.link.edit.team": "Edit team",
   "management.members.edit": "Edit",
   "management.members": "Members",
+  "management.members.empty": "There are no members yet.",
   "management.teams.mapping": "Mapping teams",
   "management.teams.validation": "Validation teams",
   "management.teams.members": "Team members",