[Task-979] Remove submission counter and add organization name to header if MMO is enabled

jsapp/js/components/header/mainHeader.component.tsx

@@ -27,6 +27,7 @@ import GitRev from './gitRev.component';
 import pageState from 'js/pageState.store';
 import styles from './mainHeader.module.scss';
 import Button from 'js/components/common/button';
+import OrganizationBadge from 'js/components/header/organizationBadge.component';
 
 interface MainHeaderProps extends WithRouterProps {
   assetUid: string | null;
@@ -156,16 +157,11 @@ const MainHeader = class MainHeader extends React.Component<MainHeaderProps> {
             )}
 
             <HeaderTitleEditor asset={asset} isEditable={userCanEditAsset} />
-
-            {asset.has_deployment &&
-              asset.deployment__submission_count !== null && (
-                <bem.MainHeader__counter>
-                  {asset.deployment__submission_count} {t('submissions')}
-                </bem.MainHeader__counter>
-              )}
           </React.Fragment>
         )}
 
+        <OrganizationBadge/>
+
         <AccountMenu />
 
         {!isLoggedIn && this.renderLoginButton()}

jsapp/js/components/header/mainHeaderBase.component.tsx

@@ -4,7 +4,6 @@ import bem, {makeBem} from 'js/bem';
 bem.MainHeader = makeBem(null, 'main-header', 'header');
 bem.MainHeader__icon = makeBem(bem.MainHeader, 'icon');
 bem.MainHeader__title = makeBem(bem.MainHeader, 'title');
-bem.MainHeader__counter = makeBem(bem.MainHeader, 'counter');
 
 interface MainHeaderBaseProps {
   children: React.ReactNode;

jsapp/js/components/header/organizationBadge.component.tsx

@@ -0,0 +1,17 @@
+import {useOrganizationQuery} from 'jsapp/js/account/stripe.api';
+import styles from './organizationBadge.module.scss';
+
+export default function OrganizationBadge() {
+  // TODO: move this logic to the parent component when we refactor it
+  // into a functional component. OrganizationBadge should just be a
+  // purely presentational component.
+  const orgQuery = useOrganizationQuery();
+
+  if (orgQuery.data?.is_mmo) {
+    return (
+      <div className={styles.root}>{orgQuery.data.name.toUpperCase()}</div>
+    );
+  } else {
+    return null;
+  }
+}

jsapp/js/components/header/organizationBadge.module.scss

@@ -0,0 +1,12 @@
+@use 'scss/colors';
+
+.root {
+  color: colors.$kobo-white;
+  background-color: colors.$kobo-gray-700;
+  padding: 6px 10px;
+  border-radius: 48px;
+  font-weight: 600;
+  font-size: .85em;
+  line-height: 12px;
+  margin-right: 20px;
+}

jsapp/scss/components/_kobo.navigation.scss

@@ -247,7 +247,7 @@
 
 // On smaller screens we hide both of them
 .main-header .main-header__icon,
-.main-header .main-header__counter {
+.main-header {
   display: none;
 }
 
@@ -303,12 +303,6 @@
       }
     }
   }
-
-  .main-header__counter {
-    font-size: variables.$base-font-size;
-    margin-right: 20px;
-    color: colors.$kobo-gray-500;
-  }
 }
 
 .git-rev {
@@ -317,7 +311,7 @@
 
 @include breakpoints.breakpoint(mediumAndUp) {
   .main-header .main-header__icon,
-  .main-header .main-header__counter {
+  .main-header {
     display: initial;
   }