Merge branch 'develop' into feat/r20-994-favicon-generator

CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## v2.3.1
+
+[compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.3.0...v2.3.1)
+
+
+### 🚀 Enhancements
+
+  - **nuxt-ripple:** Pass through section-cache-tags response header ([cf3d6477](https://github.com/dpc-sdp/ripple-framework/commit/cf3d6477))
+  - **@dpc-sdp/ripple-tide-api:** Merged site+alert cache tags with page cache tags ([98c2c956](https://github.com/dpc-sdp/ripple-framework/commit/98c2c956))
+
+### 🩹 Fixes
+
+  - **@dpc-sdp/ripple-tide-api:** Increase menu depth for breadcrumbs ([43ea5efa](https://github.com/dpc-sdp/ripple-framework/commit/43ea5efa))
+  - **@dpc-sdp/ripple-tide-publication:** Add missed optional chaining ([23e6807f](https://github.com/dpc-sdp/ripple-framework/commit/23e6807f))
+  - **@dpc-sdp/ripple-tide-api:** Add optional chaining ([0f84540a](https://github.com/dpc-sdp/ripple-framework/commit/0f84540a))
+
+### 💅 Refactors
+
+  - **@dpc-sdp/ripple-tide-api:** Refactored http client to not swallow up headers ([da09ec47](https://github.com/dpc-sdp/ripple-framework/commit/da09ec47))
+
+### ✅ Tests
+
+  - **@dpc-sdp/ripple-tide-api:** Fixed unit tests ([57c92cd4](https://github.com/dpc-sdp/ripple-framework/commit/57c92cd4))
+
+### ❤️  Contributors
+
+- Jeffrey Dowdle <[email protected]>
+- David Featherston <[email protected]>
+
 ## v2.3.0
 
 [compare changes](https://github.com/dpc-sdp/ripple-framework/compare/v2.2.1...v2.3.0)

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.3.0",
+  "version": "2.3.1",
   "npmClient": "pnpm",
   "exact": true,
   "command": {

packages/eslint-config-ripple/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/eslint-config-ripple",
   "description": "ESLint config for Ripple projects",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "index.js",

packages/nuxt-ripple-analytics/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-analytics",
   "description": "Nuxt module for handling event tracking.",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple-cli/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-cli",
   "description": "A CLI for simplifying common setup and scaffolding tasks",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./dist/index.js",

packages/nuxt-ripple-preview/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple-preview",
   "description": "Adds support for drupal preview links in Ripple frontend sites",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple/composables/use-merge-section-tags.ts

@@ -0,0 +1,33 @@
+import { setResponseHeader, getResponseHeaders } from 'h3'
+
+// Merge two section cache tags string and deduplicate tag
+// Return a string of merged tags
+const mergeTags = (existingTags: string, newTags: string): string => {
+  const tags1 = existingTags.split(' ')
+  const tags2 = newTags.split(' ')
+  const tags = [...new Set([...tags1, ...tags2])]
+  return tags.join(' ')
+}
+
+export const useMergeSectionTags = async (
+  sectionCacheTags: any
+): Promise<void> => {
+  const event = useRequestEvent()
+  // Section.io cache tags must be set on the response header to invalidate the cache after a change in drupal
+  if (sectionCacheTags) {
+    const currentResponseHeaders = getResponseHeaders(event)
+
+    const currentSectionTags: string =
+      currentResponseHeaders && currentResponseHeaders['section-cache-tags']
+        ? (currentResponseHeaders['section-cache-tags'] as string)
+        : ('' as string)
+
+    setResponseHeader(
+      event,
+      'section-cache-tags',
+      mergeTags(currentSectionTags, sectionCacheTags)
+    )
+  }
+}
+
+export default useMergeSectionTags

packages/nuxt-ripple/composables/use-tide-page.ts

@@ -49,6 +49,8 @@ export const useTidePage = async (
     headers.cookie = `${AuthCookieNames.ACCESS_TOKEN}=${accessTokenCookie.value};`
   }
 
+  let sectionCacheTags
+
   if (!pageData.value) {
     const { data, error } = await useFetch('/api/tide/page', {
       key: `page-${path}`,
@@ -59,11 +61,19 @@ export const useTidePage = async (
       },
       headers,
       async onResponse({ response }) {
+        sectionCacheTags = response.headers.get('section-cache-tags')
+
         if (response.ok && response._data) {
           response._data['_fetched'] = Date.now()
         }
       }
     })
+
+    // Section.io cache tags must be set on the response header to invalidate the cache after a change in drupal
+    if (sectionCacheTags) {
+      useMergeSectionTags(sectionCacheTags)
+    }
+
     if (error && error.value?.statusCode) {
       useTideError(error.value?.statusCode)
     }

packages/nuxt-ripple/composables/use-tide-site.ts

@@ -4,19 +4,31 @@ export const useTideSite = async (id?: number): Promise<TideSiteData> => {
   const { public: config } = useRuntimeConfig()
   const siteId = id || config.tide?.site
   const { data: siteData } = useNuxtData(`site-${siteId}`)
+
+  let sectionCacheTags
+
   if (!siteData.value) {
     const { data, error } = await useFetch('/api/tide/site', {
       key: `site-${siteId}`,
       baseURL: config.apiUrl || '',
       params: {
         id: siteId
+      },
+      async onResponse({ response }) {
+        sectionCacheTags = response.headers.get('section-cache-tags')
       }
     })
     if (error && error.value?.statusCode) {
       console.log(error)
       console.log('API error fetching site data')
       useTideError(500)
     }
+
+    // Section.io cache tags must be set on the response header to invalidate the cache after a change in drupal
+    if (sectionCacheTags) {
+      useMergeSectionTags(sectionCacheTags)
+    }
+
     return data.value
   }
   return siteData.value

packages/nuxt-ripple/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/nuxt-ripple",
   "description": "Nuxt module for integrating Ripple and Tide",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "main": "./nuxt.config.ts",
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/nuxt-ripple/server/api/tide/page.ts

@@ -1,5 +1,11 @@
 //@ts-nocheck runtime imports
-import { defineEventHandler, getQuery, H3Event, getCookie } from 'h3'
+import {
+  defineEventHandler,
+  getQuery,
+  H3Event,
+  getCookie,
+  setResponseHeader
+} from 'h3'
 import { createHandler, TidePageApi } from '@dpc-sdp/ripple-tide-api'
 import { BadRequestError } from '@dpc-sdp/ripple-tide-api/errors'
 import { useNitroApp } from '#imports'
@@ -31,7 +37,21 @@ export const createPageHandler = async (
       headers['X-OAuth2-Authorization'] = `Bearer ${tokenCookie}`
     }
 
-    return await tidePageApi.getPageByPath(query.path, query.site, {}, headers)
+    const pageResponse = await tidePageApi.getPageByPath(
+      query.path,
+      query.site,
+      {},
+      headers
+    )
+
+    // Need to pass on the section cache tags to the nuxt app
+    setResponseHeader(
+      event,
+      'section-cache-tags',
+      pageResponse.headers['section-cache-tags']
+    )
+
+    return pageResponse.data
   })
 }
 

packages/nuxt-ripple/server/api/tide/site.ts

@@ -15,7 +15,16 @@ export const createSiteHandler = async (
       throw new BadRequestError('Site id is required')
     }
 
-    return await tideSiteApi.getSiteData(query.id)
+    const siteResponse = await tideSiteApi.getSiteData(query.id)
+
+    // Need to pass on the section cache tags to the nuxt app
+    setResponseHeader(
+      event,
+      'section-cache-tags',
+      siteResponse.headers['section-cache-tags']
+    )
+
+    return siteResponse.data
   })
 }
 

packages/ripple-storybook/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "ripple-storybook",
   "description": "Ripple Storybook instance",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "private": true,
   "repository": "https://github.com/dpc-sdp/ripple-framework",

packages/ripple-test-utils/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/ripple-test-utils",
   "description": "Test utils for Ripple sites",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/config/index.js",

packages/ripple-tide-api/package.json

@@ -2,7 +2,7 @@
   "packageManager": "[email protected]",
   "name": "@dpc-sdp/ripple-tide-api",
   "description": "Ripple API endpoints for Tide Drupal backend",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "license": "Apache-2.0",
   "repository": "https://github.com/dpc-sdp/ripple-framework",
   "main": "./dist/index.js",

packages/ripple-tide-api/src/services/__test__/tide-api-base.test.ts

@@ -89,11 +89,18 @@ describe('TideApiBase', () => {
       mockLogger
     )
     it('should call http client get method', async () => {
-      mockClient.onGet(`${exampleApiConfig.apiPrefix}/site`).reply(200, {
-        field: 'test'
-      })
+      mockClient.onGet(`${exampleApiConfig.apiPrefix}/site`).reply(
+        200,
+        {
+          field: 'test'
+        },
+        {
+          testHeader: 'test123'
+        }
+      )
       const result = await tideApiBase.get('/site')
-      expect(result).toEqual({ field: 'test' })
+      expect(result.data).toEqual({ field: 'test' })
+      expect(result.headers.testHeader).toEqual('test123')
       mockClient.reset()
     })
   })

packages/ripple-tide-api/src/services/http-client.ts

@@ -50,8 +50,8 @@ export default class HttpClient {
 
   _initializeResponseInterceptor() {
     this.client.interceptors.response.use(
-      ({ data }) => {
-        return data
+      (response) => {
+        return response
       },
       (error) => {
         if (axios.isAxiosError(error)) {

packages/ripple-tide-api/src/services/tide-api-base.ts

@@ -55,7 +55,7 @@ export default class TideApiBase extends HttpClient {
     return await this.getMappedDataAux(mapping, resource)
   }
 
-  async get(url: string, config = {}): Promise<any> {
+  async get(url: string, config = {}): Promise<{ data: any; headers: any }> {
     try {
       return await this.client.get(url, { ...config })
     } catch (error) {
@@ -93,9 +93,12 @@ export default class TideApiBase extends HttpClient {
     }
 
     try {
-      const menusResponse = await this.get(`/menu_items/${menuName}`, {
-        params
-      })
+      const { data: menusResponse } = await this.get(
+        `/menu_items/${menuName}`,
+        {
+          params
+        }
+      )
 
       if (menusResponse?.data) {
         return getHierarchicalMenu(menusResponse.data, activePath)
@@ -128,7 +131,7 @@ export default class TideApiBase extends HttpClient {
 
   async getAllPaginatedMenuLinks(siteId, menuName) {
     // Get the first page of links, this will also give us a link to the next page
-    let response = await this.get(
+    let { data: response } = await this.get(
       '/menu_link_content/menu_link_content?site=' + siteId,
       {
         params: {
@@ -152,7 +155,8 @@ export default class TideApiBase extends HttpClient {
 
     // Get the rest of the menu links by following their 'next' link until a response has no next link
     while (response?.links?.next) {
-      response = await this.get(response.links.next.href)
+      const { data: nextResponse } = await this.get(response.links.next.href)
+      response = nextResponse
       menuLinks = [...menuLinks, ...response.data]
     }