Header notification updates (#16425)

* remove middleware that sets notification flags

* move all notification handling into includes/header-notification.html

* update tests

includes/header-notification.html

@@ -1,11 +1,37 @@
+<!-- START TRANSLATIONS NOTICES -->
+<!-- Site policy translations notice -->
+{% if currentLanguage != 'en' and page.relativePath contains '/site-policy/' %}
+  {% assign translation_notification_type = "true" %}
+  {% assign translation_notification = site.data.reusables.policies.translation %}
+
+<!-- Completed translations notice -->
+{% elsif currentLanguage != 'en' && !languages[currentLanguage].wip %}
+  {% assign translation_notification_type = "true" %}
+  {% assign translation_notification = site.data.ui.header.notices.localization_complete %}
+
+<!-- In-progress translations notice -->
+{% elsif currentLanguage != 'en' && languages[currentLanguage].wip %}
+  {% assign translation_notification_type = "true" %}
+  {% assign translation_notification = site.data.ui.header.notices.localization_in_progress %}
+{% endif %}
+<!-- END TRANSLATIONS NOTICES -->
+
+<!-- START RELEASE NOTICES -->
+<!-- Custom GitHub AE notice -->
 {% if currentVersion == "github-ae@latest" %}
-  <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 limited_release {% if header_notification %}border-bottom{% endif %}">
-    {% data ui.header.notices.ghae_silent_launch %}
+  {% assign release_notification_type = "true" %}
+  {% assign release_notification = site.data.ui.header.notices.ghae_silent_launch %}
+{% endif %}
+<!-- END RELEASE NOTICES -->
+
+{% if translation_notification_type %}
+  <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 translation_notice{% if release_notification_type %} border-bottom border-black-fade{% endif %}">
+    {{ translation_notification }}
   </div>
 {% endif %}
 
-{% if header_notification %}
-  <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 {{ header_notification_type }}">
-    {{ header_notification }}
+{% if release_notification_type %}
+  <div class="header-notifications text-center f5 bg-blue-1 text-gray-dark py-4 px-6 release_notice">
+    {{ release_notification }}
   </div>
 {% endif %}

includes/header.html

@@ -1,22 +1,4 @@
 <div class="border-bottom border-gray-light no-print">
-
-  {% if currentLanguage != 'en' and page.relativePath contains '/site-policy/' %}
-    {% assign header_notification_type = "translation_policy" %}
-    {% assign header_notification = site.data.reusables.policies.translation %}
-
-  {% elsif site.data.ui.header.notices.flags.localization_complete == true %}
-    {% assign header_notification_type = "localization_complete" %}
-    {% assign header_notification = site.data.ui.header.notices.localization_complete %}
-
-  {% elsif site.data.ui.header.notices.flags.localization_in_progress == true %}
-    {% assign header_notification_type = "localization_in_progress" %}
-    {% assign header_notification = site.data.ui.header.notices.localization_in_progress %}
-
-  {% elsif currentLanguage == 'en' and site.data.ui.header.notices.flags.product_in_progress == true %}
-    {% assign header_notification_type = "product_in_progress" %}
-    {% assign header_notification = site.data.ui.header.notices.product_in_progress %}
-  {% endif %}
-
   {% include header-notification %}
 
   <header class="container-xl px-3 px-md-6 pt-3 pb-2 position-relative d-flex flex-justify-between width-full {% if error == '404' %} d-md-none {% endif %}">

middleware/index.js

@@ -42,7 +42,6 @@ module.exports = function (app) {
   app.use(require('./early-access-paths'))
   app.use(require('./early-access-proxy'))
   app.use(require('./find-page'))
-  app.use(require('./notices'))
   app.use(require('./archived-enterprise-versions'))
   app.use(require('./archived-enterprise-versions-assets'))
   app.use('/assets', express.static('assets'))

middleware/notices.js

@@ -1,38 +0,0 @@
-const { set } = require('lodash')
-const patterns = require('../lib/patterns')
-const languages = require('../lib/languages')
-
-module.exports = (req, res, next) => {
-  // Skip asset paths
-  if (patterns.assetPaths.test(req.path)) return next()
-
-  const language = languages[req.language]
-
-  // Set flag that enables `localization_complete` message for no-longer-WIP languages
-  set(
-    req.context,
-    'site.data.ui.header.notices.flags.localization_complete',
-    language.code !== 'en' && !language.wip
-  )
-
-  // Set flag that enables `localization_in_progress` message for WIP languages
-  set(
-    req.context,
-    'site.data.ui.header.notices.flags.localization_in_progress',
-    language.wip
-  )
-
-  const currentProduct = req.context.allProducts[req.context.currentProduct]
-
-  // if this is the homepage and no product is chosen yet, return early
-  if (!currentProduct) return next()
-
-  // Set flag that enables `product_in_progress` message for WIP products
-  set(
-    req.context,
-    'site.data.ui.header.notices.flags.product_in_progress',
-    currentProduct.wip
-  )
-
-  return next()
-}

tests/rendering/header.js

@@ -42,15 +42,13 @@ describe('header', () => {
   describe('notices', () => {
     test('displays a "localization in progress" notice for WIP languages', async () => {
       const $ = await getDOM('/de')
-      expect($('.header-notifications.localization_in_progress').length).toBe(1)
-      expect($('.localization_complete').length).toBe(0)
+      expect($('.header-notifications.translation_notice').length).toBe(1)
       expect($('.header-notifications a[href="/en"]').length).toBe(1)
     })
 
     test('displays "complete" notice for non-WIP non-English languages', async () => {
       const $ = await getDOM('/ja')
-      expect($('.header-notifications.localization_complete').length).toBe(1)
-      expect($('.localization_in_progress').length).toBe(0)
+      expect($('.header-notifications.translation_notice').length).toBe(1)
       expect($('.header-notifications a[href="/en"]').length).toBe(1)
       expect($('.header-notifications a[href*="github.com/contact"]').length).toBe(1)
     })
@@ -62,7 +60,7 @@ describe('header', () => {
 
     test('displays translation disclaimer notice on localized site-policy pages', async () => {
       const $ = await getDOM('/ja/github/site-policy/github-logo-policy')
-      expect($('.header-notifications.translation_policy a[href="https://github.com/github/site-policy/issues"]').length).toBe(1)
+      expect($('.header-notifications.translation_notice a[href="https://github.com/github/site-policy/issues"]').length).toBe(1)
     })
   })