Renamed status banner to user banner in css

pontoon/base/models/comment.py

@@ -31,7 +31,7 @@ def serialize(self, project_contact):
         return {
             "author": self.author.name_or_email,
             "username": self.author.username,
-            "user_status": self.author.status(locale, project_contact),
+            "user_banner": self.author.banner(locale, project_contact),
             "user_gravatar_url_small": self.author.gravatar_url(88),
             "created_at": self.timestamp.strftime("%b %d, %Y %H:%M"),
             "date_iso": self.timestamp.isoformat(),

pontoon/base/models/user.py

@@ -195,7 +195,7 @@ def user_locale_role(self, locale):
         return "Contributor"
 
 
-def user_status(self, locale, project_contact):
+def user_banner(self, locale, project_contact):
     if self.pk is None or self.profile.system_user:
         return ("", "")
     if self in locale.managers_group.user_set.all():
@@ -536,7 +536,7 @@ def latest_action(self):
 User.add_to_class("translated_projects", user_translated_projects)
 User.add_to_class("role", user_role)
 User.add_to_class("locale_role", user_locale_role)
-User.add_to_class("status", user_status)
+User.add_to_class("banner", user_banner)
 User.add_to_class("contributed_translations", contributed_translations)
 User.add_to_class("badges_translation_count", badges_translation_count)
 User.add_to_class("badges_review_count", badges_review_count)

pontoon/base/tests/models/test_comment.py

@@ -16,7 +16,7 @@ def test_serialize_comments():
     assert tr.serialize(project.contact) == {
         "author": tr.author.name_or_email,
         "username": tr.author.username,
-        "user_status": tr.author.status(tr.translation.locale, project.contact),
+        "user_banner": tr.author.banner(tr.translation.locale, project.contact),
         "user_gravatar_url_small": tr.author.gravatar_url(88),
         "created_at": tr.timestamp.strftime("%b %d, %Y %H:%M"),
         "date_iso": tr.timestamp.isoformat(),
@@ -28,7 +28,7 @@ def test_serialize_comments():
     assert team.serialize(project.contact) == {
         "author": team.author.name_or_email,
         "username": team.author.username,
-        "user_status": team.author.status(team.locale, project.contact),
+        "user_banner": team.author.banner(team.locale, project.contact),
         "user_gravatar_url_small": team.author.gravatar_url(88),
         "created_at": team.timestamp.strftime("%b %d, %Y %H:%M"),
         "date_iso": team.timestamp.isoformat(),

pontoon/base/tests/models/test_user.py

@@ -66,34 +66,34 @@ def test_user_locale_role(user_a, user_b, user_c, locale_a):
 
 
 @pytest.mark.django_db
-def test_user_status(user_a, user_b, user_c, user_d, gt_user, locale_a, project_a):
+def test_user_banner(user_a, user_b, user_c, user_d, gt_user, locale_a, project_a):
     project_contact = user_d
 
     # New User
-    assert user_a.status(locale_a, project_contact)[1] == "New User"
+    assert user_a.banner(locale_a, project_contact)[1] == "New User"
 
     # Fake user object
     imported = User(username="Imported")
-    assert imported.status(locale_a, project_contact)[1] == ""
+    assert imported.banner(locale_a, project_contact)[1] == ""
 
     # Admin
     user_a.is_superuser = True
-    assert user_a.status(locale_a, project_contact)[1] == "Admin"
+    assert user_a.banner(locale_a, project_contact)[1] == "Admin"
 
     # Manager
     locale_a.managers_group.user_set.add(user_b)
-    assert user_b.status(locale_a, project_contact)[1] == "Team Manager"
+    assert user_b.banner(locale_a, project_contact)[1] == "Team Manager"
 
     # Translator
     locale_a.translators_group.user_set.add(user_c)
-    assert user_c.status(locale_a, project_contact)[1] == "Translator"
+    assert user_c.banner(locale_a, project_contact)[1] == "Translator"
 
     # PM
-    assert user_d.status(locale_a, project_contact)[1] == "Project Manager"
+    assert user_d.banner(locale_a, project_contact)[1] == "Project Manager"
 
     # System user (Google Translate)
     project_contact = gt_user
-    assert gt_user.status(locale_a, project_contact)[1] == ""
+    assert gt_user.banner(locale_a, project_contact)[1] == ""
 
 
 @pytest.fixture

pontoon/base/views.py

@@ -434,7 +434,7 @@ def get_translation_history(request):
                 "uid": u.id,
                 "username": u.username,
                 "user_gravatar_url_small": u.gravatar_url(88),
-                "user_status": u.status(locale, project_contact),
+                "user_banner": u.banner(locale, project_contact),
                 "date": t.date,
                 "approved_user": User.display_name_or_blank(t.approved_user),
                 "approved_date": t.approved_date,

translate/src/api/comment.ts

@@ -9,7 +9,7 @@ import { keysToCamelCase } from './utils/keysToCamelCase';
 export type TranslationComment = {
   readonly author: string;
   readonly username: string;
-  readonly userStatus: string[];
+  readonly userBanner: string[];
   readonly userGravatarUrlSmall: string;
   readonly createdAt: string;
   readonly dateIso: string;

translate/src/api/translation.ts

@@ -44,7 +44,7 @@ export type HistoryTranslation = {
   readonly user: string;
   readonly username: string;
   readonly userGravatarUrlSmall: string;
-  readonly userStatus: string[];
+  readonly userBanner: string[];
   readonly comments: Array<TranslationComment>;
 };
 

translate/src/hooks/useUserStatus.test.js → translate/src/hooks/useUserBanner.test.js

@@ -4,7 +4,7 @@ import sinon from 'sinon';
 import { USER } from '~/modules/user';
 import * as Hooks from '~/hooks';
 
-import { useUserStatus } from './useUserStatus';
+import { useUserBanner } from './useUserBanner';
 
 beforeAll(() => {
   sinon.stub(Hooks, 'useAppSelector');
@@ -22,10 +22,10 @@ const fakeSelector = (user) => (sel) =>
     [USER]: user,
   });
 
-describe('useUserStatus', () => {
+describe('useUserBanner', () => {
   it('returns empty parameters for non-authenticated users', () => {
     Hooks.useAppSelector.callsFake(fakeSelector({ isAuthenticated: false })),
-      expect(useUserStatus()).toStrictEqual(['', '']);
+      expect(useUserBanner()).toStrictEqual(['', '']);
   });
 
   it('returns [ADMIN, Admin] if user has admin permissions', () => {
@@ -38,7 +38,7 @@ describe('useUserStatus', () => {
         translatorForLocales: [],
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['ADMIN', 'Admin']);
+    expect(useUserBanner()).toStrictEqual(['ADMIN', 'Admin']);
   });
 
   it('returns [PM, Project Manager] if user is a project manager for the project', () => {
@@ -50,7 +50,7 @@ describe('useUserStatus', () => {
         translatorForLocales: [],
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['PM', 'Project Manager']);
+    expect(useUserBanner()).toStrictEqual(['PM', 'Project Manager']);
   });
 
   it('returns [PM, Project Manager] if user is a project manager for the project, even if user is an Admin', () => {
@@ -63,7 +63,7 @@ describe('useUserStatus', () => {
         translatorForLocales: [],
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['PM', 'Project Manager']);
+    expect(useUserBanner()).toStrictEqual(['PM', 'Project Manager']);
   });
 
   it('returns [MNGR, Manager] if user is a manager of the locale', () => {
@@ -75,7 +75,7 @@ describe('useUserStatus', () => {
         translatorForLocales: [],
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['MNGR', 'Team Manager']);
+    expect(useUserBanner()).toStrictEqual(['MNGR', 'Team Manager']);
   });
 
   it('returns [MNGR, Manager] if user is a manager of the locale, even if user is an Admin', () => {
@@ -88,7 +88,7 @@ describe('useUserStatus', () => {
         translatorForLocales: [],
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['MNGR', 'Team Manager']);
+    expect(useUserBanner()).toStrictEqual(['MNGR', 'Team Manager']);
   });
 
   it('returns [MNGR, Manager] if user is a manager of the locale, even if user is a Project Manager', () => {
@@ -100,7 +100,7 @@ describe('useUserStatus', () => {
         translatorForLocales: [],
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['MNGR', 'Team Manager']);
+    expect(useUserBanner()).toStrictEqual(['MNGR', 'Team Manager']);
   });
 
   it('returns [TRNSL, Translator] if user is a translator for the locale', () => {
@@ -112,7 +112,7 @@ describe('useUserStatus', () => {
         translatorForLocales: ['mylocale'],
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['TRNSL', 'Translator']);
+    expect(useUserBanner()).toStrictEqual(['TRNSL', 'Translator']);
   });
 
   it('returns [NEW, New User] if user created their account within the last 3 months', () => {
@@ -127,7 +127,7 @@ describe('useUserStatus', () => {
         dateJoined: dateJoined,
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['NEW', 'New User']);
+    expect(useUserBanner()).toStrictEqual(['NEW', 'New User']);
 
     // Set join date to be 6 months ago (no longer a new user)
     dateJoined.setMonth(dateJoined.getMonth() - 6);
@@ -140,6 +140,6 @@ describe('useUserStatus', () => {
         dateJoined: dateJoined,
       }),
     );
-    expect(useUserStatus()).toStrictEqual(['', '']);
+    expect(useUserBanner()).toStrictEqual(['', '']);
   });
 });

translate/src/hooks/useUserStatus.ts → translate/src/hooks/useUserBanner.ts

@@ -6,9 +6,9 @@ import { USER } from '~/modules/user';
 import { useAppSelector } from '~/hooks';
 
 /**
- * Return the user's status within the given locale, to display on the user banner
+ * Return the user's status banner within the given locale, to display on the user banner
  */
-export function useUserStatus(): Array<string> {
+export function useUserBanner(): Array<string> {
   const { code } = useContext(Locale);
   const { project } = useContext(Location);
   const {

translate/src/modules/comments/components/AddComment.tsx

@@ -30,7 +30,7 @@ import type { MentionUser } from '~/api/user';
 import { MentionUsers } from '~/context/MentionUsers';
 import type { UserState } from '~/modules/user';
 import { UserAvatar } from '~/modules/user';
-import { useUserStatus } from '~/hooks/useUserStatus';
+import { useUserBanner } from '~/hooks/useUserBanner';
 
 import './AddComment.css';
 import { MentionList } from './MentionList';
@@ -87,7 +87,7 @@ export function AddComment({
   const [mentionIndex, setMentionIndex] = useState(0);
   const [mentionSearch, setMentionSearch] = useState('');
   const [requireUsers, setRequireUsers] = useState(false);
-  const status = useUserStatus();
+  const banner = useUserBanner();
 
   const { initMentions, mentionUsers } = useContext(MentionUsers);
   const [slateKey, resetValue] = useReducer((key) => key + 1, 0);
@@ -249,7 +249,7 @@ export function AddComment({
       <UserAvatar
         username={username}
         imageUrl={gravatarURLSmall}
-        userStatus={status}
+        userBanner={banner}
       />
       <div className='container'>
         <Slate

translate/src/modules/comments/components/Comment.tsx

@@ -35,7 +35,7 @@ export function Comment(props: Props): null | React.ReactElement<'li'> {
       <UserAvatar
         username={comment.username}
         imageUrl={comment.userGravatarUrlSmall}
-        userStatus={comment.userStatus}
+        userBanner={comment.userBanner}
       />
       <div className='container'>
         <div className='content'>

translate/src/modules/comments/components/CommentsList.test.js

@@ -19,9 +19,9 @@ describe('<CommentsList>', () => {
       translation: {
         ...DEFAULT_TRANSLATION,
         comments: [
-          { id: 1, content: '11', userStatus: '' },
-          { id: 2, content: '22', userStatus: '' },
-          { id: 3, content: '33', userStatus: '' },
+          { id: 1, content: '11', userBanner: '' },
+          { id: 2, content: '22', userBanner: '' },
+          { id: 3, content: '33', userBanner: '' },
         ],
       },
       user: DEFAULT_USER,

translate/src/modules/history/components/History.test.js

@@ -25,9 +25,9 @@ function mountHistory(fetching, translations) {
 describe('<History>', () => {
   it('shows the correct number of translations', () => {
     const wrapper = mountHistory(false, [
-      { pk: 1, userStatus: '' },
-      { pk: 2, userStatus: '' },
-      { pk: 3, userStatus: '' },
+      { pk: 1, userBanner: '' },
+      { pk: 2, userBanner: '' },
+      { pk: 3, userBanner: '' },
     ]);
 
     expect(wrapper.find('ul > *')).toHaveLength(3);

translate/src/modules/history/components/HistoryTranslation.tsx

@@ -270,7 +270,7 @@ export function HistoryTranslationBase({
                 username={translation.username}
                 title=''
                 imageUrl={translation.userGravatarUrlSmall}
-                userStatus={translation.userStatus}
+                userBanner={translation.userBanner}
               />
             </Localized>
             {translation.machinerySources ? (

translate/src/modules/teamcomments/components/TeamComments.test.js

@@ -23,9 +23,9 @@ describe('<TeamComments>', () => {
       teamComments: {
         entity: 267,
         comments: [
-          { id: 1, content: '11', userStatus: '' },
-          { id: 2, content: '22', userStatus: '' },
-          { id: 3, content: '33', userStatus: '' },
+          { id: 1, content: '11', userBanner: '' },
+          { id: 2, content: '22', userBanner: '' },
+          { id: 3, content: '33', userBanner: '' },
         ],
       },
       user: DEFAULT_USER,

translate/src/modules/user/components/UserAvatar.css

@@ -18,7 +18,7 @@
   display: inline-block;
 }
 
-.user-avatar .avatar-container .user-status-banner {
+.user-avatar .avatar-container .user-banner {
   position: absolute;
   bottom: 0;
   left: 50%;
@@ -34,26 +34,26 @@
   white-space: nowrap;
 }
 
-.comment .user-avatar .avatar-container .user-status-banner {
+.comment .user-avatar .avatar-container .user-banner {
   font-size: 7px;
 }
 
-.user-avatar .avatar-container .user-status-banner.ADMIN {
+.user-avatar .avatar-container .user-banner.ADMIN {
   color: var(--user-admin);
 }
 
-.user-avatar .avatar-container .user-status-banner.PM {
+.user-avatar .avatar-container .user-banner.PM {
   color: var(--user-pm);
 }
 
-.user-avatar .avatar-container .user-status-banner.MNGR {
+.user-avatar .avatar-container .user-banner.MNGR {
   color: var(--user-manager);
 }
 
-.user-avatar .avatar-container .user-status-banner.TRNSL {
+.user-avatar .avatar-container .user-banner.TRNSL {
   color: var(--user-translator);
 }
 
-.user-avatar .avatar-container .user-status-banner.NEW {
+.user-avatar .avatar-container .user-banner.NEW {
   color: var(--user-new);
 }

translate/src/modules/user/components/UserAvatar.tsx

@@ -7,12 +7,12 @@ type Props = {
   username: string;
   title?: string;
   imageUrl: string;
-  userStatus: string[];
+  userBanner: string[];
 };
 
 export function UserAvatar(props: Props): React.ReactElement<'div'> {
-  const { username, title, imageUrl, userStatus } = props;
-  const [status, tooltip] = userStatus;
+  const { username, title, imageUrl, userBanner } = props;
+  const [status, tooltip] = userBanner;
 
   return (
     <div className='user-avatar'>
@@ -28,7 +28,7 @@ export function UserAvatar(props: Props): React.ReactElement<'div'> {
             <img src={imageUrl} alt='User Profile' height='44' width='44' />
           </Localized>
           {status && (
-            <span className={`user-status-banner ${status}`} title={tooltip}>
+            <span className={`user-banner ${status}`} title={tooltip}>
               {status}
             </span>
           )}