Merge pull request #383 from cds-snc/staging

[RELEASE] Feature Flags, Contentful Previews, Alternate landing headline

.github/PULL_REQUEST_TEMPLATE/release_template.md

@@ -9,25 +9,10 @@
 > problème (« issue ») GitHub ou la fiche Trello, le cas échéant.
 
 ## ⚠️ This PR can be tested through the following URL(s):
-Main - https://staging.learning-resources.cdssandbox.xyz/
-EN - https://en.staging.learning-resources.cdssandbox.xyz/
-FR - https://fr.staging.learning-resources.cdssandbox.xyz/fr/
+Main - [https://staging.resources.alpha.canada.ca/](https://staging.resources.alpha.canada.ca/)
+EN - [https://staging.resources.alpha.canada.ca/](https://staging.resources.alpha.canada.ca/)
+FR - [https://staging.ressources.alpha.canada.ca/fr/](https://ressources.alpha.canada.ca/fr/)
 
-# 🚀  Release Checklist
-
-Item | Checked / Reviewed by | Status | Notes
--- | -- | -- | --
-Metrics - Google Analytics working and collecting data |  @daine @hillaryl   | Not started | [Prioritized for next release](https://github.com/cds-snc/resources-ressources/issues/154)
-Content - Contentful |   | Not started |
-Content - English | @anikbrazeau  | Not started |
-Content - French | @anikbrazeau  | Not started |
-Infra - Domains OK | @daine   | ☀️ Ready |
-Infra - Amplify OK | @daine | ☀️ Ready  |
-Monitoring (Uptime Robot)| @daine | ☀️ Ready  |  [Status page dashboard](https://stats.uptimerobot.com/gP5gohqEVQ)
-Accessibility - aXe DevTools | @daine @dylanzheng94   | Not started |
-Accessibility - Lighthouse checks | @daine @dylanzheng94 | Not started |
-Accessibility - WCAG 2.0 AA | @emanelfy | Not started | The intention is to achieve AAA for full launch
-Infra - Content Security Policy | @daine  | ☀️ Ready |
 
 # After merge, do this:
 From your terminal, make sure you are in the `main` branch, then type

app/.eslintrc.js

@@ -35,6 +35,7 @@ module.exports = {
           'Box',
           'Link',
           'Button',
+          'Feature',
         ],
       },
     ],

app/components/Banner.vue

@@ -2,7 +2,7 @@
   <!-- Proof of concept banner -->
   <div class="bg-white">
     <div class="max-w-7xl mx-auto px-4">
-      <div class="flex items-center justify-start flex-wrap pt-4 pb-4">
+      <div class="flex items-center justify-start flex-wrap py-1">
         <!-- <div class="bg-cds-blue text-white p-2 pl-4 pr-4 uppercase">
           {{ $t('proof_of_concept.title') }}
         </div> -->

app/components/Header.vue

@@ -2,9 +2,9 @@
 <template>
   <header data-app>
     <!-- Pilot banner -->
-    <Banner />
+    <!-- <Banner /> -->
 
-    <nav class="bg-white text-black pb-2.5">
+    <nav class="bg-white text-black pt-2 md:pt-0">
       <div class="max-w-7xl mx-auto px-4">
         <div
           class="relative flex flex-col md:flex-row items-center justify-between md:h-16"
@@ -119,6 +119,9 @@
 <!-- Component logic - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  -->
 
 <script>
+import { mapState } from 'vuex'
+import { EN_LOCALE, FR_LOCALE } from '@/utils/constants'
+
 export default {
   name: 'Header',
   data() {
@@ -134,14 +137,10 @@ export default {
     availableLocales() {
       return this.$i18n.locales.filter((i) => i.code !== this.$i18n.locale)
     },
-
-    topicsEN() {
-      return this.$store.state.topics['en-CA']
-    },
-
-    topicsFR() {
-      return this.$store.state.topics['fr-CA']
-    },
+    ...mapState({
+      topicsEN: (state) => state.menu.topics[EN_LOCALE],
+      topicsFR: (state) => state.menu.topics[FR_LOCALE],
+    }),
   },
 
   methods: {

app/components/feature-flags/Feature.vue

@@ -0,0 +1,38 @@
+<!-- Component View ================================================================================================-->
+
+<template>
+  <div v-if="isEnabled">
+    <slot></slot>
+  </div>
+</template>
+
+<!-- Component Logic ===============================================================================================-->
+
+<script>
+import FeatureConfigUtil from '@/utils/featureConfigUtil.ts'
+
+export default {
+  name: 'Feature',
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      isEnabled: false,
+    }
+  },
+
+  // Lifecycle Hooks - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+  created() {
+    const envValue = this.$config.features[this.name]
+
+    this.isEnabled = FeatureConfigUtil.getFeatureConfig(envValue)?.isEnabled
+  },
+}
+</script>

app/config/i18n.js

@@ -1,10 +1,11 @@
+const { EN_LOCALE, FR_LOCALE } = require('../utils/constants')
 module.exports = {
   langDir: '~/locales/',
   // strategy: 'prefix',
   locales: [
     {
       code: 'en',
-      iso: 'en-CA',
+      iso: EN_LOCALE,
       file: 'en.json',
       name: 'English',
       dir: 'ltr',
@@ -14,7 +15,7 @@ module.exports = {
     },
     {
       code: 'fr',
-      iso: 'fr-CA',
+      iso: FR_LOCALE,
       file: 'fr.json',
       name: 'Français',
       domain: process.env.DOMAIN_FR,

app/layouts/expandedSearch.vue

@@ -1,11 +1,10 @@
 <template>
   <div class="flex flex-col min-h-screen scroll-p-36">
-    <!-- <Banner /> -->
+    <Banner />
     <Header
-      class="border-b border-solid border-gray-200 fixed top-0 w-full z-50"
+      class="border-b border-solid border-gray-200 sticky top-0 w-full z-50"
     />
-    <!-- <main class="flex-grow"> -->
-    <main class="mt-56 md:mt-36">
+    <main>
       <div class="max-w-7xl mx-auto px-5">
         <Nuxt />
       </div>

app/nuxt.config.js

@@ -3,6 +3,8 @@ const config = require('./.contentful.json')
 const i18n = require('./config/i18n.js')
 
 const generatedRoutes = require('./utils/generateRoutes')
+const { EN_LOCALE, FR_LOCALE } = require('./utils/constants')
+const { featureNames } = require('./utils/constants')
 
 module.exports = {
   // Target: https://go.nuxtjs.dev/config-target
@@ -25,6 +27,25 @@ module.exports = {
   publicRuntimeConfig: {
     googleAnalyticsID: process.env.GOOGLE_ANALYTICS_ID,
     googleTagManagerID: process.env.GOOGLE_TAG_MANAGER_ID,
+
+    features: {
+      [featureNames.F_HEADLINE]: process.env.F_HEADLINE,
+      [featureNames.F_HEADLINE_ALT]: process.env.F_HEADLINE_ALT,
+    },
+
+    previewEnv:
+      process.env.PREVIEW_ENV &&
+      process.env.PREVIEW_ENV.toLocaleLowerCase() === 'true',
+    contentfulPreviewAccessToken:
+      process.env.PREVIEW_ENV &&
+      process.env.PREVIEW_ENV.toLocaleLowerCase() === 'true'
+        ? config.CTF_CPA_ACCESS_TOKEN || process.env.contentful_cpa_access_token
+        : null,
+    contentfulPreviewSpaceID:
+      process.env.PREVIEW_ENV &&
+      process.env.PREVIEW_ENV.toLocaleLowerCase() === 'true'
+        ? config.CTF_SPACE_ID || process.env.contentful_space_id
+        : null,
   },
 
   privateRuntimeConfig: {
@@ -38,7 +59,12 @@ module.exports = {
 
   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
 
-  plugins: ['~/plugins/vue-gtag', '~/plugins/vue-gtm', '~/plugins/axios'],
+  plugins: [
+    '~/plugins/vue-gtag',
+    '~/plugins/vue-gtm',
+    '~/plugins/axios',
+    '~/plugins/preview.client.js',
+  ],
 
   // Auto import components: https://go.nuxtjs.dev/config-components
   components: true,
@@ -59,7 +85,8 @@ module.exports = {
     '@nuxtjs/google-fonts',
     // https://vuetifyjs.com/en/getting-started/installation/#nuxt-install
     // https://www.npmjs.com/package/@nuxtjs/vuetify
-    '@nuxtjs/vuetify',
+    /* vuetify has an issue with generate and run dev mode, so we enable treeShake for now */
+    ['@nuxtjs/vuetify', { treeShake: true }],
 
     /* [
       "k-domains",
@@ -105,7 +132,7 @@ module.exports = {
     locales: [
       {
         code: 'en',
-        iso: 'en-CA',
+        iso: EN_LOCALE,
         file: 'en.json',
         name: 'English',
         dir: 'ltr',
@@ -115,7 +142,7 @@ module.exports = {
       },
       {
         code: 'fr',
-        iso: 'fr-CA',
+        iso: FR_LOCALE,
         file: 'fr.json',
         name: 'Français',
         domain: process.env.DOMAIN_FR,
@@ -188,6 +215,7 @@ module.exports = {
   pwa: {
     manifest: {
       lang: 'en',
+      crossorigin: 'use-credentials',
     },
     workbox: false,
   },

app/pages/about.vue

@@ -17,7 +17,9 @@ import { documentToHtmlString } from '@contentful/rich-text-html-renderer'
 import { aboutPageQuery } from '@/utils/queries'
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
+import { getCurrentLocale, getLocaleCode } from '@/utils/getCurrentLocale'
 import RH1 from '@/components/r-html-tags/rH1'
+import { aboutPathEN, aboutPathFR } from '@/utils/pathUtility'
 
 export default {
   name: 'About',
@@ -26,32 +28,48 @@ export default {
 
   nuxtI18n: {
     paths: {
-      en: '/about',
-      fr: '/a-propos',
+      en: aboutPathEN,
+      fr: aboutPathFR,
     },
   },
 
-  async asyncData({ $contentfulApi, payload }) {
-    const locale = payload && payload.locale ? payload.locale : 'en-CA'
+  async asyncData({
+    $contentfulApi,
+    payload,
+    $contentfulPreviewApi,
+    query,
+    $preview,
+    i18n,
+  }) {
+    const currentLocale = getCurrentLocale(payload, i18n)
+    const preview = query.preview || ($preview && $preview.enabled)
 
-    let aboutPage
+    const pageQuery = aboutPageQuery(currentLocale, preview)
 
-    if (payload && payload.page) {
+    let aboutPage = null
+
+    if (preview) {
+      aboutPage = await $contentfulPreviewApi
+        .$post('', { query: pageQuery })
+        .then((result) => {
+          return result.data.aboutPageCollection.items[0]
+        })
+    } else if (payload && payload.page) {
       aboutPage = { ...payload.page }
     } else {
       aboutPage = await $contentfulApi
-        .$post('', { query: aboutPageQuery(locale) })
+        .$post('', { query: pageQuery })
         .then((result) => {
           return result.data.aboutPageCollection.items[0]
         })
     }
 
-    const i18nLocaleCode = locale.substring(0, 2)
+    const localeCode = getLocaleCode(currentLocale)
 
     const breadcrumbs = []
-    breadcrumbs.locale = i18nLocaleCode
+    breadcrumbs.locale = localeCode
 
-    const headElement = getHeadElement(aboutPage.title, i18nLocaleCode)
+    const headElement = getHeadElement(aboutPage.title, localeCode)
 
     const richText = documentToHtmlString(
       aboutPage.body.json,

app/pages/collection/_collection.vue

@@ -67,11 +67,12 @@ import {
   generateBreadcrumbs,
   generateCollections,
   generateResources,
-  getLocaleCode,
 } from '@/utils/listItemsUtility'
 import { getHeadElement } from '@/utils/headElementAssembler'
 import { getCollectionPageQuery } from '@/utils/queries'
 import CollectionListItem from '@/components/list-items/CollectionListItem'
+import { EN_LOCALE, FR_LOCALE } from '@/utils/constants'
+import { getCurrentLocale, getLocaleCode } from '@/utils/getCurrentLocale'
 import { richTextRenderOptions } from '@/utils/richTextRenderOptions'
 import RH1 from '@/components/r-html-tags/rH1'
 
@@ -82,23 +83,42 @@ export default {
 
   // Hooks ------------------------------------------------------------------------------------------------------------
 
-  async asyncData({ params, $contentfulApi, store, payload }) {
-    const currentLocale = payload && payload.locale ? payload.locale : 'en-CA'
-
-    const alternateLocale = currentLocale.includes('en') ? 'fr-CA' : 'en-CA'
-    const isDefaultLocale = currentLocale.includes('en') || false
+  async asyncData({
+    params,
+    $contentfulApi,
+    store,
+    payload,
+    $contentfulPreviewApi,
+    query,
+    $preview,
+    i18n,
+  }) {
+    const currentLocale = getCurrentLocale(payload, i18n)
+    const preview = query.preview || ($preview && $preview.enabled)
+
+    const alternateLocale = currentLocale === EN_LOCALE ? FR_LOCALE : EN_LOCALE
+    const isDefaultLocale = currentLocale === EN_LOCALE || false
 
     const urlSlug = params.collection
 
     const pageQuery = getCollectionPageQuery(
       urlSlug,
       currentLocale,
-      alternateLocale
+      alternateLocale,
+      preview
     )
 
-    let collection
+    let collection = null
 
-    if (payload && payload.collection) {
+    if (preview) {
+      const result = await $contentfulPreviewApi
+        .$post('', { query: pageQuery })
+        .then((res) => {
+          return res
+        })
+
+      collection = result.data.collectionCollection.items[0]
+    } else if (payload && payload.collection) {
       collection = { ...payload.collection }
     } else {
       const result = await $contentfulApi