Web components: Introduce versioning

.github/workflows/webcomponents.yml

@@ -6,6 +6,8 @@ on:
   push:
     branches:
       - main
+    tags:
+      - 'v*.*.*'
   release:
     types: [published]
 
@@ -54,10 +56,10 @@ jobs:
           tag: ${{ github.ref }}
           overwrite: true
 
-      - name: Publish web component to ${{ env.PUBLISH_BRANCH }} branch
+      - name: Publish web component to ${{ env.PUBLISH_BRANCH }}-${{ github.ref_name }} branch
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           force_orphan: true
           publish_dir: ./wc-dist
-          publish_branch: ${{ env.PUBLISH_BRANCH }}
+          publish_branch: ${{ env.PUBLISH_BRANCH }}-${{ github.ref_name }}

apps/datahub/src/app/app.module.ts

@@ -68,6 +68,7 @@ import { WEB_COMPONENT_EMBEDDER_URL } from '@geonetwork-ui/feature/record'
 import { LANGUAGES_LIST, UiCatalogModule } from '@geonetwork-ui/ui/catalog'
 import { METADATA_LANGUAGE } from '@geonetwork-ui/api/repository'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
+import { GN_UI_VERSION } from '@geonetwork-ui/feature/record'
 
 export const metaReducers: MetaReducer[] = !environment.production ? [] : []
 // https://github.com/nrwl/nx/issues/191
@@ -130,6 +131,7 @@ export const metaReducers: MetaReducer[] = !environment.production ? [] : []
   providers: [
     { provide: RouterService, useClass: DatahubRouterService },
     importProvidersFrom(FeatureAuthModule),
+    { provide: GN_UI_VERSION, useValue: environment.version },
     {
       provide: Configuration,
       useFactory: () =>

apps/datahub/src/environments/environment.prod.ts

@@ -1,3 +1,5 @@
+import packageJson from '../../../../package.json'
 export const environment = {
   production: true,
+  version: `v${packageJson.version.split('-')[0]}`,
 }

apps/datahub/src/environments/environment.ts

@@ -1,9 +1,14 @@
+import packageJson from '../../../../package.json'
 // This file can be replaced during build by using the `fileReplacements` array.
 // `ng build` replaces `environment.ts` with `environment.prod.ts`.
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
   production: false,
+  version:
+    packageJson.version.split('-')[1] === 'dev'
+      ? 'main'
+      : `v${packageJson.version}`,
 }
 
 /*

apps/webcomponents/README.md

@@ -11,7 +11,7 @@ All Web Components are prefixed with `gn-`.
 Web Components are made to be easily included in any context, e.g.:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-main/gn-wc.js"></script>
 ...
 <gn-results-list
   api-url="https://apps.titellus.net/geonetwork/srv/api"

docs/guide/webcomponents.md

@@ -20,7 +20,7 @@ Web Components are made to be easily included in any context. To do so, you have
 - include your Web Component in the HTML content.
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-v2.0.0/gn-wc.js"></script>
 ...
 <gn-results-list
   api-url="https://dev.geo2france.fr/geonetwork/srv/api"
@@ -31,6 +31,12 @@ Web Components are made to be easily included in any context. To do so, you have
 ></gn-results-list>
 ```
 
+## Publication and Versioning
+
+The Web Component script is automatically built upon merges on main and for releases. These builds are made available via a jsdelivr CDN, which points at `wc-dist` branches in the github repository. There is a `wc-dist` branch for every release tag > `v2.0.0` as well as `wc-dist-main`.
+
+You can choose the version of the Web Component script you wish to use by indicating the corresponding value in the script's URL e.g. `wc-dist-v2.0.0`.
+
 ## Build
 
 All Angular custom elements are served by the same application `webcomponents`.

libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts

@@ -9,6 +9,7 @@ import { BehaviorSubject, firstValueFrom } from 'rxjs'
 import { MdViewFacade } from '../state'
 import { Component, Input } from '@angular/core'
 import { TranslateModule } from '@ngx-translate/core'
+import { GN_UI_VERSION } from '../feature-record.module'
 
 const chartConfig1 = {
   aggregation: 'sum',
@@ -38,6 +39,8 @@ class ConfigMock {
 
 const baseUrl = 'https://example.com/wc-embedder'
 
+const gnUiVersion = 'v1.2.3'
+
 @Component({
   selector: 'gn-ui-copy-text-button',
   template: '<div></div>',
@@ -69,6 +72,10 @@ describe('DataViewPermalinkComponent', () => {
           provide: WEB_COMPONENT_EMBEDDER_URL,
           useValue: baseUrl,
         },
+        {
+          provide: GN_UI_VERSION,
+          useValue: gnUiVersion,
+        },
       ],
     }).compileComponents()
     facade = TestBed.inject(MdViewFacade)
@@ -85,7 +92,7 @@ describe('DataViewPermalinkComponent', () => {
     it('should generate URL based on configs', async () => {
       const url = await firstValueFrom(component.permalinkUrl$)
       expect(url).toBe(
-        `https://example.com/wc-embedder?e=gn-dataset-view-chart&a=api-url=${component.config.basePath}&a=dataset-id=${metadata.uniqueIdentifier}&a=primary-color=%230f4395&a=secondary-color=%238bc832&a=main-color=%23555&a=background-color=%23fdfbff&a=aggregation=${chartConfig1.aggregation}&a=x-property=${chartConfig1.xProperty}&a=y-property=${chartConfig1.yProperty}&a=chart-type=${chartConfig1.chartType}`
+        `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=api-url=${component.config.basePath}&a=dataset-id=${metadata.uniqueIdentifier}&a=primary-color=%230f4395&a=secondary-color=%238bc832&a=main-color=%23555&a=background-color=%23fdfbff&a=aggregation=${chartConfig1.aggregation}&a=x-property=${chartConfig1.xProperty}&a=y-property=${chartConfig1.yProperty}&a=chart-type=${chartConfig1.chartType}`
       )
     })
   })
@@ -96,7 +103,7 @@ describe('DataViewPermalinkComponent', () => {
     it('should update URL based on configs', async () => {
       const url = await firstValueFrom(component.permalinkUrl$)
       expect(url).toBe(
-        `https://example.com/wc-embedder?e=gn-dataset-view-chart&a=api-url=${component.config.basePath}&a=dataset-id=${metadata.uniqueIdentifier}&a=primary-color=%230f4395&a=secondary-color=%238bc832&a=main-color=%23555&a=background-color=%23fdfbff&a=aggregation=${chartConfig2.aggregation}&a=x-property=${chartConfig2.xProperty}&a=y-property=${chartConfig2.yProperty}&a=chart-type=${chartConfig2.chartType}`
+        `https://example.com/wc-embedder?v=${gnUiVersion}&e=gn-dataset-view-chart&a=api-url=${component.config.basePath}&a=dataset-id=${metadata.uniqueIdentifier}&a=primary-color=%230f4395&a=secondary-color=%238bc832&a=main-color=%23555&a=background-color=%23fdfbff&a=aggregation=${chartConfig2.aggregation}&a=x-property=${chartConfig2.xProperty}&a=y-property=${chartConfig2.yProperty}&a=chart-type=${chartConfig2.chartType}`
       )
     })
   })

libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.ts

@@ -8,6 +8,7 @@ import {
 import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { combineLatest, map } from 'rxjs'
 import { MdViewFacade } from '../state'
+import { GN_UI_VERSION } from '../feature-record.module'
 
 export const WEB_COMPONENT_EMBEDDER_URL = new InjectionToken<string>(
   'webComponentEmbedderUrl'
@@ -28,7 +29,8 @@ export class DataViewPermalinkComponent {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
         const url = new URL(`${this.wcEmbedderBaseUrl}`, window.location.origin)
-        url.search = `?e=gn-dataset-view-chart
+        url.search = `?v=${this.version}
+&e=gn-dataset-view-chart
 &a=api-url=${this.config.basePath}
 &a=dataset-id=${metadata.uniqueIdentifier}
 &a=primary-color=%230f4395
@@ -50,6 +52,7 @@ export class DataViewPermalinkComponent {
     @Optional()
     @Inject(WEB_COMPONENT_EMBEDDER_URL)
     protected wcEmbedderBaseUrl: string,
+    @Inject(GN_UI_VERSION) private version: string,
     private facade: MdViewFacade
   ) {}
 }

libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts

@@ -5,6 +5,7 @@ import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { MdViewFacade } from '../state'
 import { TranslateModule } from '@ngx-translate/core'
 import { Component, Input } from '@angular/core'
+import { GN_UI_VERSION } from '../feature-record.module'
 
 const chartConfig1 = {
   aggregation: 'sum',
@@ -24,6 +25,8 @@ const metadata = {
   uniqueIdentifier: 'md_record_1234',
 }
 
+const gnUiVersion = 'v1.2.3'
+
 class MdViewFacadeMock {
   chartConfig$ = new BehaviorSubject(chartConfig1)
   metadata$ = new BehaviorSubject(metadata)
@@ -63,6 +66,10 @@ describe('DataViewWebComponentComponent', () => {
           provide: MdViewFacade,
           useClass: MdViewFacadeMock,
         },
+        {
+          provide: GN_UI_VERSION,
+          useValue: gnUiVersion,
+        },
       ],
     }).compileComponents()
     facade = TestBed.inject(MdViewFacade)
@@ -79,7 +86,7 @@ describe('DataViewWebComponentComponent', () => {
     it('should generate HTML based on configs', async () => {
       const html = await firstValueFrom(component.webComponentHtml$)
       expect(html).toBe(
-        `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+        `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${gnUiVersion}/gn-wc.js"></script>
 <gn-dataset-view-chart
         api-url="http://localhost/undefined"
         dataset-id="${metadata.uniqueIdentifier}"
@@ -104,7 +111,7 @@ describe('DataViewWebComponentComponent', () => {
     it('should update HTML based on configs', async () => {
       const html = await firstValueFrom(component.webComponentHtml$)
       expect(html).toBe(
-        `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+        `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${gnUiVersion}/gn-wc.js"></script>
 <gn-dataset-view-chart
         api-url="http://localhost/undefined"
         dataset-id="${metadata.uniqueIdentifier}"

libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
 import { Configuration } from '@geonetwork-ui/data-access/gn4'
 import { MdViewFacade } from '../state'
 import { combineLatest, map } from 'rxjs'
+import { GN_UI_VERSION } from '../feature-record.module'
 
 @Component({
   selector: 'gn-ui-data-view-web-component',
@@ -17,7 +18,9 @@ export class DataViewWebComponentComponent {
     map(([config, metadata]) => {
       if (config) {
         const { aggregation, xProperty, yProperty, chartType } = config
-        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+          this.version
+        }/gn-wc.js"></script>
 <gn-dataset-view-chart
         api-url="${new URL(
           this.config.basePath,
@@ -42,6 +45,7 @@ export class DataViewWebComponentComponent {
 
   constructor(
     @Inject(Configuration) private config: Configuration,
+    @Inject(GN_UI_VERSION) private version: string,
     private facade: MdViewFacade
   ) {}
 }

libs/feature/record/src/lib/feature-record.module.ts

@@ -1,4 +1,4 @@
-import { NgModule } from '@angular/core'
+import { InjectionToken, NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { UiMapModule } from '@geonetwork-ui/ui/map'
 import { StoreModule } from '@ngrx/store'
@@ -29,6 +29,7 @@ import { DataViewPermalinkComponent } from './data-view-permalink/data-view-perm
 import { DataViewWebComponentComponent } from './data-view-web-component/data-view-web-component.component'
 import { DataViewShareComponent } from './data-view-share/data-view-share.component'
 
+export const GN_UI_VERSION = new InjectionToken<string>('gnUiVersion')
 @NgModule({
   declarations: [
     RecordMetadataComponent,

tools/webcomponent/wc-embedder.html

@@ -16,7 +16,7 @@
         font-family: 'Open Sans', 'dataFeeder', sans-serif !important;
       }
     </style>
-    <script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist/gn-wc.js"></script>
+    <script id="gn-wc-script"></script>
     <script>
       function showError(message) {
         const errorMessage = document.createElement('div')
@@ -37,6 +37,10 @@
 
       try {
         const params = new URL(window.location).searchParams
+        const version = params.get('v')
+        document.getElementById(
+          'gn-wc-script'
+        ).src = `https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${version}/gn-wc.js`
         const elementName = params.get('e')
         const attributes = params.getAll('a')