[#674] Refactor session info page

webapp/src/app/components/tcr-session-info/tcr-session-info.component.html

@@ -12,8 +12,13 @@ <h1 class="mbr-fonts-style mbr-bold mbr-section-title1 display-4">{{ title }}</h
             <span class="mbr-iconfont fa-gear fa"></span>
           </div>
           <div class="text-wrap vcenter">
-            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Workflow Variant: {{ sessionInfo.variant | showEmpty }}</h2>
-            <img class="statechart" ngSrc="assets/images/variant-{{ sessionInfo.variant | showEmpty }}.png" alt="{{ sessionInfo.variant | showEmpty }}" width="1" height="1" />
+            <h2 class="mbr-fonts-style mbr-bold mbr-section-title3 display-5">Workflow Variant: {{ sessionInfo.variant | variantDescription }}</h2>
+            <img class="statechart"
+                 ngSrc="{{ sessionInfo.variant | variantImagePath }}"
+                 alt="{{ sessionInfo.variant | variantDescription }}"
+                 width="1" height="1"/>
+            <p>Refer to <a href="https://medium.com/@tdeniffel/tcr-variants-test-commit-revert-bf6bd84b17d3" target="_blank">this blog post</a>
+              for additional information on TCR variants.</p>
           </div>
         </div>
       </div>

webapp/src/app/components/tcr-session-info/tcr-session-info.component.spec.ts

@@ -29,7 +29,7 @@ import {TcrSessionInfoComponent} from "./tcr-session-info.component";
 const sample: TcrSessionInfo = {
   baseDir: "/my/base/dir",
   commitOnFail: false,
-  variant: "nice",
+  variant: "relaxed",
   gitAutoPush: false,
   language: "java",
   messageSuffix: "my-suffix",
@@ -66,15 +66,19 @@ describe('TcrSessionInfoComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
+  describe('component instance', () => {
+    it('should be created', () => {
+      expect(component).toBeTruthy();
+    });
 
-  it('should have title "TCR Session Information"', () => {
-    expect(component.title).toEqual('TCR Session Information');
+    it('should have title "TCR Session Information"', () => {
+      expect(component.title).toEqual('TCR Session Information');
+    });
   });
 
-  it('should fetch TCR session info on init', () => {
-    expect(component.sessionInfo).toEqual(sample);
+  describe('component initialization', () => {
+    it('should fetch TCR session info on init', () => {
+      expect(component.sessionInfo).toEqual(sample);
+    });
   });
 });

webapp/src/app/components/tcr-session-info/tcr-session-info.component.ts

@@ -26,6 +26,8 @@ import {TcrSessionInfoService} from "../../services/tcr-session-info.service";
 import {DatePipe, NgIf, NgOptimizedImage} from "@angular/common";
 import {OnOffPipe} from "../../pipes/on-off.pipe";
 import {ShowEmptyPipe} from "../../pipes/show-empty.pipe";
+import {VariantDescriptionPipe} from "../../pipes/variant-description.pipe";
+import {VariantImagePathPipe} from "../../pipes/variant-image-path.pipe";
 
 @Component({
   selector: 'app-tcr-session-info',
@@ -35,7 +37,9 @@ import {ShowEmptyPipe} from "../../pipes/show-empty.pipe";
     NgIf,
     OnOffPipe,
     ShowEmptyPipe,
-    NgOptimizedImage
+    NgOptimizedImage,
+    VariantDescriptionPipe,
+    VariantImagePathPipe
   ],
   templateUrl: './tcr-session-info.component.html',
   styleUrl: './tcr-session-info.component.css'
@@ -56,4 +60,5 @@ export class TcrSessionInfoComponent implements OnInit {
     this.sessionInfoService.getSessionInfo()
       .subscribe(sessionInfo => this.sessionInfo = sessionInfo);
   }
+
 }

webapp/src/app/interfaces/tcr-session-info.ts

@@ -32,3 +32,23 @@ export interface TcrSessionInfo {
   gitAutoPush: boolean;
   messageSuffix: string;
 }
+
+export interface TcrVariant {
+  description: string;
+  statechartImageFile: string;
+}
+
+export const tcrVariants: { [key: string]: TcrVariant } = {
+  "original": {
+    description: "The Original",
+    statechartImageFile: "variant-original.png",
+  },
+  "btcr": {
+    description: "BTCR -- Build && Test && Commit || Revert",
+    statechartImageFile: "variant-btcr.png",
+  },
+  "relaxed": {
+    description: "The Relaxed",
+    statechartImageFile: "variant-relaxed.png",
+  },
+};

webapp/src/app/pipes/format-timer.pipe.ts

@@ -31,7 +31,8 @@ const SECONDS_PER_HOUR = 3600;
   standalone: true
 })
 export class FormatTimerPipe implements PipeTransform {
-  transform(value: unknown, ..._args: unknown[]): unknown {
+
+  transform(value: number | string | null | undefined, ..._args: unknown[]): string {
     const duration: number = parseInt(value as string, 10);
     if (isNaN(duration)) {
       return `--${SEPARATOR}--`;

webapp/src/app/pipes/on-off.pipe.ts

@@ -28,7 +28,7 @@ import {Pipe, PipeTransform} from '@angular/core';
 })
 export class OnOffPipe implements PipeTransform {
 
-  transform(value: unknown, ..._args: unknown[]): unknown {
+  transform(value: boolean | string | null | undefined, ..._args: unknown[]): string {
     return value ? "✅" : "❌";
   }
 

webapp/src/app/pipes/show-empty.pipe.ts

@@ -29,8 +29,7 @@ const NOT_SET: string = "[not set]";
   standalone: true
 })
 export class ShowEmptyPipe implements PipeTransform {
-  transform(value: unknown, ..._args: unknown[]): unknown {
+  transform(value: string | null | undefined, ..._args: unknown[]): string {
     return value || NOT_SET;
   }
-
 }

webapp/src/app/pipes/variant-description.pipe.spec.ts

@@ -0,0 +1,46 @@
+/*
+Copyright (c) 2024 Murex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import {VariantDescriptionPipe} from './variant-description.pipe';
+
+describe('VariantDescriptionPipe', () => {
+  let pipe: VariantDescriptionPipe;
+
+  beforeEach(() => {
+    pipe = new VariantDescriptionPipe();
+  });
+
+  const notSet = '⚠️ [unknown]';
+
+  [
+    {input: 'relaxed', expected: 'The Relaxed'},
+    {input: 'btcr', expected: 'BTCR -- Build && Test && Commit || Revert'},
+    {input: 'original', expected: 'The Original'},
+    {input: null, expected: notSet},
+    {input: undefined, expected: notSet},
+    {input: '', expected: notSet}
+  ].forEach(testCase => {
+    it(`should return "${testCase.expected}" when the variant value is "${testCase.input}"`, () => {
+      expect(pipe.transform(testCase.input)).toEqual(testCase.expected);
+    });
+  });
+});

webapp/src/app/pipes/variant-description.pipe.ts

@@ -0,0 +1,38 @@
+/*
+Copyright (c) 2024 Murex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import {Pipe, PipeTransform} from '@angular/core';
+import {tcrVariants} from "../interfaces/tcr-session-info";
+
+const UNKNOWN = "⚠️ [unknown]";
+
+@Pipe({
+  name: 'variantDescription',
+  standalone: true
+})
+export class VariantDescriptionPipe implements PipeTransform {
+
+  transform(value: string | null | undefined, ..._args: unknown[]): string {
+    return (value && value in tcrVariants) ? tcrVariants[value].description : UNKNOWN;
+  }
+
+}

webapp/src/app/pipes/variant-image-path.pipe.spec.ts

@@ -0,0 +1,44 @@
+/*
+Copyright (c) 2024 Murex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import {VariantImagePathPipe} from './variant-image-path.pipe';
+
+describe('VariantImagePathPipe', () => {
+  let pipe: VariantImagePathPipe;
+
+  beforeEach(() => {
+    pipe = new VariantImagePathPipe();
+  });
+
+  [
+    {input: 'relaxed', expected: 'assets/images/variant-relaxed.png'},
+    {input: 'btcr', expected: 'assets/images/variant-btcr.png'},
+    {input: 'original', expected: 'assets/images/variant-original.png'},
+    {input: null, expected: ''},
+    {input: undefined, expected: ''},
+    {input: '', expected: ''}
+  ].forEach(testCase => {
+    it(`should return "${testCase.expected}" when the variant value is "${testCase.input}"`, () => {
+      expect(pipe.transform(testCase.input)).toEqual(testCase.expected);
+    });
+  });
+});

webapp/src/app/pipes/variant-image-path.pipe.ts

@@ -0,0 +1,39 @@
+/*
+Copyright (c) 2024 Murex
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+*/
+
+import {Pipe, PipeTransform} from '@angular/core';
+import {tcrVariants} from "../interfaces/tcr-session-info";
+
+const IMAGES_PATH = "assets/images"
+
+@Pipe({
+  name: 'variantImagePath',
+  standalone: true
+})
+export class VariantImagePathPipe implements PipeTransform {
+
+  transform(value: string | null | undefined, ..._args: unknown[]): string {
+    return (value && value in tcrVariants)
+      ? `${IMAGES_PATH}/${tcrVariants[value].statechartImageFile}` : "";
+  }
+
+}