Pull request #1444: Release/minor 11.3.0

Merge in OUI/oblique from release/minor_11.3.0 to master

* commit '55f38d61add4896794c4c26918fdece508285280': (35 commits)
  chore(toolchain): release version 11.3.0
  chore(toolchain): update dependencies and refactor accordingly
  fix(sds/styles): fix separate scrolling for side navigation and content
  refactor(toolchain): extract git commands in a dedicated Class
  refactor(toolchain): reduce duplication for singleton scripts
  feat(toolchain): improve script singleton errors
  feat(toolchain): make sure scripts cannot be instantiated
  refactor(oblique/toolchain): simplify `release.ts` script
  fix(oblique/input-clear): prevent input clear icon from flickering during initial loading
  feat(toolchain): make a security analysis when deploying SDS
  fix(toolchain): get actual release date for previous tags
  feat(toolchain): let `troubleshooting` script push master on GitHub
  feat(toolchain): let `troubleshooting` script create a Tag on master
  feat(toolchain): let `troubleshooting` script deploy SDS
  feat(toolchain): add a `troubleshooting` script
  fix(oblique/toolchain): add the project's README
  fix(service-navigation/toolchain): add the project's README
  feat(toolchain): add shared script to adapt the link to the global readme
  feat(sds/selectable): add sample as custom form element
  feat(sandbox/selectable): add sample as custom form element
  ...

Jenkinsfile

@@ -48,6 +48,9 @@ nodejsPipelineTemplate {
 			],
 			'cloudFoundry': [
 				['project': 'sds', 'space': 'prod']
+			],
+			securityScan: [
+				apps: [[project: 'sds', space: 'prod']]
 			]
 		]
 	]

package.json

@@ -1,7 +1,7 @@
 {
   "title": "Oblique",
   "name": "oblique",
-  "version": "11.2.4",
+  "version": "11.3.0",
   "license": "MIT",
   "organization": {
     "name": "Federal Office of Information Technology, Systems and Telecommunication FOITT",
@@ -31,7 +31,8 @@
     "hook-commit-msg": "ts-node scripts/husky/hook.commit-rules.ts",
     "hook-post-checkout": "ts-node scripts/husky/dependency-update.ts",
     "prepare": "husky install",
-    "release": "ts-node scripts/release.ts"
+    "release": "ts-node scripts/release.ts",
+    "troubleshoot": "ts-node scripts/troubleshoot.ts"
   },
   "engines": {
     "node": ">=18.13.0"

projects/oblique/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [11.3.0](https://github.com/oblique-bit/oblique/compare/11.2.4...11.3.0) (2024-07-05)
+
+## Bug Fixes
+
+- **input-clear:** prevent input clear icon from flickering during initial loading ([6d2800e8](https://github.com/oblique-bit/oblique/commit/6d2800e8e))
+- **master-layout:** make sure the menu item shadow don't overflow into the flyout ([098ffc1c](https://github.com/oblique-bit/oblique/commit/098ffc1c6))
+- **master-layout:** remove empty icon wrapper in the main navigation ([f71c0641](https://github.com/oblique-bit/oblique/commit/f71c0641e))
+- **selectable:** remove `private` modifier on `disabled` input ([ac162a6b](https://github.com/oblique-bit/oblique/commit/ac162a6b6))
+
+## Features
+
+- **language:** deprecate `ObLanguageService` ([da3953d9](https://github.com/oblique-bit/oblique/commit/da3953d94))
+- **language:** deprecate `setLocaleOnAdapter` and automate its logic ([a8507418](https://github.com/oblique-bit/oblique/commit/a8507418c))
+- **master-layout:** reduce and harmonize padding on main navigation flyouts ([b3cd4da4](https://github.com/oblique-bit/oblique/commit/b3cd4da4f))
+- **selectable:** turn `ObSelectableGroup` into a custom form element ([5fca7f1d](https://github.com/oblique-bit/oblique/commit/5fca7f1dd))
+- **selectable:** add generics for the `value` type ([b44beec7](https://github.com/oblique-bit/oblique/commit/b44beec75))
+
 # [11.2.4](https://github.com/oblique-bit/oblique/compare/11.2.3...11.2.4) (2024-06-28)
 
 ## Bug Fixes

projects/oblique/jest.config.js

@@ -171,12 +171,6 @@ module.exports.coverageThreshold = {
 		functions: 0,
 		lines: 27
 	},
-	'projects/oblique/src/lib/selectable/*.ts': {
-		statements: 100,
-		branches: 81,
-		functions: 100,
-		lines: 100
-	},
 	'projects/oblique/src/lib/sticky/*.ts': {
 		statements: 93,
 		branches: 85,

projects/oblique/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oblique/oblique",
-  "version": "11.2.4",
+  "version": "11.3.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.com/"
   },

projects/oblique/scripts/npm-deprecate.ts

@@ -10,8 +10,9 @@
 
 import {exit} from 'process';
 import {executeCommand, getResultFromCommand} from '../../../scripts/shared/utils';
+import {StaticScript} from '../../../scripts/shared/static-script';
 
-class NpmDeprecate {
+class NpmDeprecate extends StaticScript {
 	static perform(date: string, versions: string[]): void {
 		if (!NpmDeprecate.isDateValid(date) || !versions.length || !NpmDeprecate.areVersionsValid(versions)) {
 			console.error(`This script needs at least 2 arguments and will deprecate, either a list of pre-versions under the "next" tag, or all versions of a major version under the "latest" tag.

projects/oblique/scripts/post-dist.ts

@@ -1,11 +1,12 @@
 import path from 'path';
 import {readFileSync, renameSync, writeFileSync} from 'fs';
 import {CopyFiles} from '../../../scripts/shared/copy-files';
-import {executeCommand, listFiles} from '../../../scripts/shared/utils';
+import {adaptReadmeLinks, executeCommand, listFiles} from '../../../scripts/shared/utils';
 import {ExportEntries, PackageJson} from '../../../scripts/shared/package-json';
 import {Banner} from '../../../scripts/shared/banner';
+import {StaticScript} from '../../../scripts/shared/static-script';
 
-class PostDist {
+class PostDist extends StaticScript {
 	static perform(): void {
 		PostDist.copyDistFiles();
 		PostDist.renameDistribution();
@@ -14,11 +15,12 @@ class PostDist {
 		PostDist.updateBackgroundImagePath();
 		PostDist.distributeObFeatures();
 		PostDist.addBanner();
+		adaptReadmeLinks('oblique');
 	}
 
 	private static copyDistFiles(): void {
 		CopyFiles.initialize('oblique')
-			.copyRootFiles('README.md', 'LICENSE')
+			.copyRootFiles('LICENSE')
 			.copyProjectFiles(
 				'src',
 				...listFiles(path.join('src', 'assets')),
@@ -27,7 +29,7 @@ class PostDist {
 					/(?:core[\\/](?:_variables|_palette)|mixins[\\/](?:_layout|_shadow|_typography))\.scss$/.test(filePath)
 				)
 			)
-			.copyProjectRootFiles('CHANGELOG.md')
+			.copyProjectRootFiles('README.md', 'CHANGELOG.md')
 			.finalize();
 	}
 

projects/oblique/scripts/pre-dist.ts

@@ -1,8 +1,9 @@
 import {readFileSync, writeFileSync} from 'fs';
 import path from 'path';
 import {listFiles} from '../../../scripts/shared/utils';
+import {StaticScript} from '../../../scripts/shared/static-script';
 
-class PreDist {
+class PreDist extends StaticScript {
 	static perform(): void {
 		const componentPath = path.join('..', 'stylesBuilder', 'oblique-components.scss');
 		const directoryPath = path.join('..', 'oblique', 'src', 'lib');

projects/oblique/scripts/release.ts

@@ -4,13 +4,7 @@ import {Changelog} from '../../../scripts/shared/changelog';
 import {version} from '../../../package.json';
 import {updatePackageJsonVersion, updateSonarPropertiesVersion} from '../../../scripts/shared/utils';
 
-class Release {
-	static perform(): void {
-		Changelog.addRelease(version, 'oblique');
-		writeFileSync(path.join('src', 'lib', 'version.ts'), `export const appVersion = '${version}';\n`);
-		updatePackageJsonVersion(version);
-		updateSonarPropertiesVersion(version);
-	}
-}
-
-Release.perform();
+Changelog.addRelease(version, 'oblique');
+writeFileSync(path.join('src', 'lib', 'version.ts'), `export const appVersion = '${version}';\n`);
+updatePackageJsonVersion(version);
+updateSonarPropertiesVersion(version);

projects/oblique/scripts/update-icons.ts

@@ -1,8 +1,9 @@
 import {readFileSync, readdirSync, writeFileSync} from 'fs';
 import path from 'path';
 import {executeCommand} from '../../../scripts/shared/utils';
+import {StaticScript} from '../../../scripts/shared/static-script';
 
-class Icons {
+class Icons extends StaticScript {
 	static perform(): void {
 		const SVGs = Icons.getSVGs('icons');
 		Icons.writeIconSet(path.join('src', 'assets', 'obliqueIcons.svg'), SVGs);

projects/oblique/sonar-project.properties

@@ -1,6 +1,6 @@
 sonar.projectName=@oblique/oblique
 sonar.projectKey=oblique_oblique
-sonar.projectVersion=11.2.4
+sonar.projectVersion=11.3.0
 sonar.typescript.lcov.reportPaths=coverage/oblique/lcov.info
 sonar.testExecutionReportPaths=coverage/oblique/sqr.xml
 sonar.tests=projects/oblique/src/lib

projects/oblique/src/lib/language/language.service.spec.ts

@@ -21,13 +21,13 @@ describe('LanguageService', () => {
 		} as unknown as ObMasterLayoutConfig;
 
 		it('should throw', () => {
-			expect(() => new ObLanguageService(mock, null, config, null)).toThrow(
+			expect(() => new ObLanguageService(mock, null, config, null, null)).toThrow(
 				"Oblique's MasterLayout config needs to either define at least 1 locale or to be disabled."
 			);
 		});
 	});
 
-	describe('with valid locales', () => {
+	describe('with valid locales and without DateAdapter', () => {
 		beforeEach(() => {
 			const mock = {
 				addLangs: jest.fn(),
@@ -38,6 +38,7 @@ describe('LanguageService', () => {
 				getDefaultLang: jest.fn(),
 				currentLang: 'de'
 			};
+			jest.spyOn(console, 'warn');
 
 			TestBed.configureTestingModule({
 				providers: [
@@ -75,6 +76,12 @@ describe('LanguageService', () => {
 			expect(translate.use).toHaveBeenCalledWith('de');
 		});
 
+		it('should show a warning in the console', () => {
+			expect(console.warn).toHaveBeenCalledWith(
+				'No DateAdapter is provided, this means the datepicker might not work properly. "provideMomentDateAdapter" should be added to the root providers.'
+			);
+		});
+
 		describe('locale$', () => {
 			it('should be an observable', () => {
 				expect(service.locale$ instanceof Observable).toBe(true);
@@ -97,17 +104,91 @@ describe('LanguageService', () => {
 			});
 		});
 
+		// This test case is only there to avoid a decrease of the test coverage
 		describe('setAdapter', () => {
-			it('should subscribe to locale change', () => {
-				jest.spyOn(service.locale$, 'subscribe');
+			it('should do nothing', () => {
+				jest.spyOn(service, 'setLocaleOnAdapter');
 				service.setLocaleOnAdapter(null);
-				expect(service.locale$.subscribe).toHaveBeenCalled();
+				expect(service.setLocaleOnAdapter).toHaveBeenCalled();
 			});
+		});
+	});
 
-			it('should set the locale on the adapter', () => {
-				const adapter = {setLocale: jest.fn()} as unknown as DateAdapter<any>;
-				service.setLocaleOnAdapter(adapter);
-				expect(adapter.setLocale).toHaveBeenCalled();
+	describe('with valid locales and an DateAdapter', () => {
+		beforeEach(() => {
+			const mock = {
+				addLangs: jest.fn(),
+				setDefaultLang: jest.fn(),
+				use: jest.fn(),
+				onLangChange: new Subject<void>(),
+				getBrowserLang: jest.fn(),
+				getDefaultLang: jest.fn(),
+				currentLang: 'de'
+			};
+			const dateAdapterMock = {setLocale: jest.fn()};
+			jest.spyOn(console, 'warn');
+
+			TestBed.configureTestingModule({
+				providers: [
+					{provide: DateAdapter, useValue: dateAdapterMock},
+					{provide: TranslateService, useValue: mock},
+					{
+						provide: ObMasterLayoutConfig,
+						useValue: {
+							locale: {
+								locales: ['de-CH', 'fr-CH', 'it-CH'],
+								default: 'de',
+								disabled: false,
+								display: true
+							}
+						}
+					}
+				]
+			});
+			service = TestBed.inject(ObLanguageService);
+			translate = TestBed.inject(TranslateService);
+		});
+
+		it('should be created', () => {
+			expect(service).toBeTruthy();
+		});
+
+		it('should call addLangs', () => {
+			expect(translate.addLangs).toHaveBeenCalledWith(['de', 'fr', 'it']);
+		});
+
+		it('should call setDefaultLang', () => {
+			expect(translate.setDefaultLang).toHaveBeenCalledWith('de');
+		});
+
+		it('should call use', () => {
+			expect(translate.use).toHaveBeenCalledWith('de');
+		});
+
+		it('should set the locale on the adapter', () => {
+			const adapter = TestBed.inject(DateAdapter);
+			expect(adapter.setLocale).toHaveBeenCalledWith('de-CH');
+		});
+
+		describe('locale$', () => {
+			it('should be an observable', () => {
+				expect(service.locale$ instanceof Observable).toBe(true);
+			});
+
+			it('should emit a locale when language changes to defined one', done => {
+				translate.onLangChange.next({lang: 'fr', translations: null});
+				service.locale$.subscribe(locale => {
+					expect(locale).toBe('fr-CH');
+					done();
+				});
+			});
+
+			it('should emit a language when language changes to undefined one', done => {
+				translate.onLangChange.next({lang: 'es', translations: null});
+				service.locale$.subscribe(locale => {
+					expect(locale).toBe('es');
+					done();
+				});
 			});
 		});
 	});

projects/oblique/src/lib/language/language.service.ts

@@ -1,4 +1,4 @@
-import {Inject, Injectable, Renderer2, RendererFactory2} from '@angular/core';
+import {Inject, Injectable, Optional, Renderer2, RendererFactory2} from '@angular/core';
 import {DateAdapter} from '@angular/material/core';
 import {DOCUMENT} from '@angular/common';
 import {TranslateService} from '@ngx-translate/core';
@@ -10,6 +10,9 @@ import {ObMasterLayoutConfig} from '../master-layout/master-layout.config';
 @Injectable({
 	providedIn: 'root'
 })
+/**
+ * @deprecated since Oblique 11.3.0. It will be removed with Oblique 12 with no replacement as it won't be needed anymore.
+ */
 export class ObLanguageService {
 	readonly locale$: Observable<string>;
 	private static readonly token = 'oblique_lang';
@@ -19,7 +22,8 @@ export class ObLanguageService {
 		private readonly translate: TranslateService,
 		rendererFactory: RendererFactory2,
 		config: ObMasterLayoutConfig,
-		@Inject(DOCUMENT) document: Document
+		@Inject(DOCUMENT) document: Document,
+		@Optional() adapter: DateAdapter<unknown>
 	) {
 		if (!config.locale.disabled) {
 			const locales = config.locale.locales.map(locale => (locale as ObILocaleObject).locale || locale) as string[];
@@ -29,14 +33,16 @@ export class ObLanguageService {
 			this.locale = new BehaviorSubject<string>(this.getLocale(locales, translate.currentLang));
 			this.locale$ = this.locale.asObservable();
 			this.languageChange(locales, rendererFactory.createRenderer(null, null), document.head.parentElement);
+			this.setLocaleOnDateAdapter(adapter);
 		}
 	}
 
-	setLocaleOnAdapter(adapter: DateAdapter<unknown>): void {
-		if (this.locale$) {
-			this.locale$.subscribe(locale => adapter.setLocale(locale));
-		}
-	}
+	/**
+	 * @deprecated since Oblique 11.3.0. It will be removed with Oblique 12 with no replacement. As of Oblique 11.3.0 this method don't do
+	 * anything anymore and can safely be removed. Its purpose is now fully automated by the MasterLayout.
+	 */
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars,@typescript-eslint/no-empty-function
+	setLocaleOnAdapter(adapter: DateAdapter<unknown>): void {}
 
 	private validateLocales(locales: string[]): void {
 		if (!Array.isArray(locales) || !locales.length) {
@@ -80,4 +86,14 @@ export class ObLanguageService {
 			|| this.getSupportedLang(languages, defaultLanguage)
 			|| languages[0];
 	}
+
+	private setLocaleOnDateAdapter(adapter: DateAdapter<unknown>): void {
+		if (adapter) {
+			this.locale$.subscribe(locale => adapter.setLocale(locale));
+		} else {
+			console.warn(
+				'No DateAdapter is provided, this means the datepicker might not work properly. "provideMomentDateAdapter" should be added to the root providers.'
+			);
+		}
+	}
 }

projects/oblique/src/lib/master-layout/master-layout-navigation/master-layout-navigation.component.html

@@ -48,7 +48,7 @@ <h2 id="ob-navigationlabel" class="ob-screen-reader-only" *ngIf="initializedLink
 						(focus)="toggleFocus('ob-main-nav-item-', link.id)"
 						(focusout)="toggleFocus('ob-main-nav-item-', link.id)"
 					>
-						<span class="ob-icon-wrapper"><mat-icon *ngIf="link.icon" [svgIcon]="link.icon" /></span>
+						<span class="ob-icon-wrapper" *ngIf="link.icon"><mat-icon [svgIcon]="link.icon" /></span>
 						<span [class.ob-screen-reader-only]="link.icon && link.iconOnly">{{ link.label | translate }}</span>
 					</a>
 				</ng-container>
@@ -68,7 +68,7 @@ <h2 id="ob-navigationlabel" class="ob-screen-reader-only" *ngIf="initializedLink
 						(focus)="toggleFocus('ob-main-nav-item-', link.id)"
 						(focusout)="toggleFocus('ob-main-nav-item-', link.id)"
 					>
-						<span class="ob-icon-wrapper"><mat-icon *ngIf="link.icon" [svgIcon]="link.icon" /></span>
+						<span class="ob-icon-wrapper" *ngIf="link.icon"><mat-icon [svgIcon]="link.icon" /></span>
 						<span [class.ob-screen-reader-only]="link.icon && link.iconOnly">{{ link.label | translate }}</span>
 					</a>
 				</ng-template>
@@ -86,7 +86,7 @@ <h2 id="ob-navigationlabel" class="ob-screen-reader-only" *ngIf="initializedLink
 					(focusout)="toggleFocus('ob-main-nav-item-', link.id)"
 					[obAriaMenuButton]="'ob-menu-' + link.id"
 				>
-					<span class="ob-icon-wrapper"><mat-icon *ngIf="link.icon" [svgIcon]="link.icon" /></span>
+					<span class="ob-icon-wrapper" *ngIf="link.icon"><mat-icon [svgIcon]="link.icon" /></span>
 					<span [class.ob-screen-reader-only]="link.icon && link.iconOnly">{{ link.label | translate }}</span>
 					<span class="ob-icon-wrapper ob-toggle-collapsed"><mat-icon svgIcon="chevron-down" class="ob-nav-toggle" /></span>
 					<span class="ob-icon-wrapper ob-toggle-expanded"><mat-icon svgIcon="chevron-up" class="ob-nav-toggle" /></span>