From 3e1adc4806118d6962f1982d20d0aed8ffaaac9e Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 8 Sep 2023 16:18:34 +0200 Subject: [PATCH 1/6] ci(web components): publish web component script for release tags as well note: might need an additional action to create the release branches used in publish_branch if they do not exist yet --- .github/workflows/webcomponents.yml | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/.github/workflows/webcomponents.yml b/.github/workflows/webcomponents.yml index df12990a7c..1e133f4aae 100644 --- a/.github/workflows/webcomponents.yml +++ b/.github/workflows/webcomponents.yml @@ -6,6 +6,8 @@ on: push: branches: - main + tags: + - '*.*.*' 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 }} From 7eabc057cf5923c10b554352e7871a2200ab895d Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Fri, 8 Sep 2023 16:20:32 +0200 Subject: [PATCH 2/6] feat(wc): use correct wc version in data-view-wc --- apps/datahub/src/app/app.module.ts | 2 ++ apps/datahub/src/environments/environment.prod.ts | 2 ++ apps/datahub/src/environments/environment.ts | 5 +++++ .../data-view-web-component.component.ts | 6 +++++- libs/feature/record/src/lib/feature-record.module.ts | 3 ++- 5 files changed, 16 insertions(+), 2 deletions(-) diff --git a/apps/datahub/src/app/app.module.ts b/apps/datahub/src/app/app.module.ts index 10f8dc5ffc..50077d6cbc 100644 --- a/apps/datahub/src/app/app.module.ts +++ b/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: () => diff --git a/apps/datahub/src/environments/environment.prod.ts b/apps/datahub/src/environments/environment.prod.ts index 970e25bd7c..8437293833 100644 --- a/apps/datahub/src/environments/environment.prod.ts +++ b/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]}`, } diff --git a/apps/datahub/src/environments/environment.ts b/apps/datahub/src/environments/environment.ts index 3725056778..3bd3914425 100644 --- a/apps/datahub/src/environments/environment.ts +++ b/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}`, } /* diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts index 580b8a827c..a4ace249ae 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts +++ b/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 ` + return ` + + ... + ... ``` +## 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 > `v1.1.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-v1.1.0`. + ## Build All Angular custom elements are served by the same application `webcomponents`. From dc2c6db8b29eae9a767b9a842a9089e679cbc612 Mon Sep 17 00:00:00 2001 From: Tobias Kohr Date: Tue, 12 Sep 2023 11:00:19 +0200 Subject: [PATCH 5/6] test(wc): fix tests --- .../data-view-permalink.component.spec.ts | 11 +++++++++-- .../data-view-web-component.component.spec.ts | 11 +++++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts b/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts index cb65f3f3cc..d1185bf3a2 100644 --- a/libs/feature/record/src/lib/data-view-permalink/data-view-permalink.component.spec.ts +++ b/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: '
', @@ -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}` ) }) }) diff --git a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts b/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts index 3d6c6f32e3..16b530476e 100644 --- a/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.spec.ts +++ b/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( - ` + ` { it('should update HTML based on configs', async () => { const html = await firstValueFrom(component.webComponentHtml$) expect(html).toBe( - ` + ` Date: Tue, 12 Sep 2023 11:00:57 +0200 Subject: [PATCH 6/6] ci(wc): adapt workflow tag and doc --- .github/workflows/webcomponents.yml | 2 +- docs/guide/webcomponents.md | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/webcomponents.yml b/.github/workflows/webcomponents.yml index 1e133f4aae..e090eb78bb 100644 --- a/.github/workflows/webcomponents.yml +++ b/.github/workflows/webcomponents.yml @@ -7,7 +7,7 @@ on: branches: - main tags: - - '*.*.*' + - 'v*.*.*' release: types: [published] diff --git a/docs/guide/webcomponents.md b/docs/guide/webcomponents.md index 7b372d20c3..c1282a6664 100644 --- a/docs/guide/webcomponents.md +++ b/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 - + ... `v1.1.0` as well as `wc-dist-main`. +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-v1.1.0`. +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