Merge branch 'feat/central-loader-teams' into experiment

vbakke · vbakke · commit fea1a5bea408 · 2025-08-24T22:54:44.000+02:00
diff --git a/src/app/component/activity-description/activity-description.component.html b/src/app/component/activity-description/activity-description.component.html
@@ -5,12 +5,12 @@ <h1>
   </h1>
 
   <div class="example-action-buttons">
-    <button mat-raised-button (click)="openall()">Expand All</button>
-    <button mat-raised-button (click)="closeall()">Collapse All</button>
+    <button mat-raised-button (click)="openAll()">Expand All</button>
+    <button mat-raised-button (click)="closeAll()">Collapse All</button>
   </div>
 
   <mat-accordion multi="true">
-    <mat-expansion-panel>
+    <mat-expansion-panel [expanded]="true">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <b>UUID</b>
@@ -19,40 +19,40 @@ <h1>
       <p id="uuid" [innerHTML]="currentActivity.uuid"></p>
     </mat-expansion-panel>
 
-    <mat-expansion-panel [expanded]="true">
+    <mat-expansion-panel *ngIf="currentActivity.description?.hasContent()">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <b>Description</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p id="description" [innerHTML]="currentActivity.description"></p>
+      <p id="description" [innerHTML]="currentActivity.description?.render()"></p>
     </mat-expansion-panel>
 
-    <mat-expansion-panel>
+    <mat-expansion-panel *ngIf="currentActivity.risk?.hasContent()">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <b>Risk</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p id="risk" [innerHTML]="currentActivity.risk"></p>
+      <p id="risk" [innerHTML]="currentActivity.risk?.render()"></p>
     </mat-expansion-panel>
 
-    <mat-expansion-panel>
+    <mat-expansion-panel *ngIf="currentActivity.measure?.hasContent()">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <b>Measure</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p id="measure" [innerHTML]="currentActivity.measure"></p>
+      <p id="measure" [innerHTML]="currentActivity.measure?.render()"></p>
     </mat-expansion-panel>
 
-    <mat-expansion-panel *ngIf="currentActivity.implementationGuide">
+    <mat-expansion-panel *ngIf="currentActivity.implementationGuide?.hasContent()">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <b>Implementation Guide</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p id="implementationGuide" [innerHTML]="currentActivity.implementationGuide"></p>
+      <p id="implementationGuide" [innerHTML]="currentActivity.implementationGuide?.render()"></p>
     </mat-expansion-panel>
 
     <mat-expansion-panel>
@@ -93,13 +93,13 @@ <h1>
       </mat-accordion>
     </mat-expansion-panel>
 
-    <mat-expansion-panel>
+    <mat-expansion-panel *ngIf="currentActivity.assessment?.hasContent()">
       <mat-expansion-panel-header>
         <mat-panel-title>
           <b>Assessment</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p id="assessment" [innerHTML]="currentActivity.assessment"></p>
+      <p id="assessment" [innerHTML]="currentActivity.assessment?.render()"></p>
     </mat-expansion-panel>
 
     <mat-expansion-panel>
@@ -245,7 +245,7 @@ <h1>
           <b>Comments</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <p id="comments" [innerHTML]="currentActivity.comments"></p>
+      <p id="comments" [innerHTML]="currentActivity.comments?.render()"></p>
     </mat-expansion-panel>
   </mat-accordion>
 
diff --git a/src/app/component/activity-description/activity-description.component.ts b/src/app/component/activity-description/activity-description.component.ts
@@ -2,7 +2,6 @@ import { Component, ViewChildren, QueryList, OnInit } from '@angular/core';
 import { MatAccordion } from '@angular/material/expansion';
 import { ActivatedRoute } from '@angular/router';
 import { LoaderService } from '../../service/loader/data-loader.service';
-import * as md from 'markdown-it';
 import { Activity, ActivityStore } from '../../model/activity-store';
 import { DataStore } from 'src/app/model/data-store';
 
@@ -12,7 +11,6 @@ import { DataStore } from 'src/app/model/data-store';
   styleUrls: ['./activity-description.component.css'],
 })
 export class ActivityDescriptionComponent implements OnInit {
-  markdown: md = md();
   currentActivity: Partial<Activity> = {};
 
   TimeLabel: string = '';
@@ -54,22 +52,22 @@ export class ActivityDescriptionComponent implements OnInit {
         this.ResourceLabel = dataStore.getMetaString('labels', activity.difficultyOfImplementation.resources);
         this.UsefulnessLabel = dataStore.getMetaString('labels', activity.usefulness);
 
-        this.openall();
+        setTimeout(() => { this.openAll() }, 1);
       })
       .catch(err => {
         console.error('Error loading activity data:', err);
       });
   }
 
   // Expand all function
-  openall(): void {
+  openAll(): void {
     this.accordion.forEach(element => {
       element.openAll();
     });
   }
 
   // Close all function
-  closeall(): void {
+  closeAll(): void {
     this.accordion.forEach(element => {
       element.closeAll();
     });
diff --git a/src/app/model/activity-store.ts b/src/app/model/activity-store.ts
@@ -1,6 +1,7 @@
 import { appendHashElement } from '../util/ArrayHash';
 import { IgnoreList } from './ignore-list';
 import { Progress } from './types';
+import { MarkdownText } from './markdown-text';
 
 export type Data = Record<string, Category>;
 export type Category = Record<string, Dimension>;
@@ -13,22 +14,22 @@ export interface Activity {
   dimension: string;
   level: number;
   name: string;
-  description: string;
-  risk: string;
-  measure: string;
+  description: MarkdownText;
+  risk: MarkdownText;
+  measure: MarkdownText;
   tags: string[];
-  implementationGuide: string;
+  implementationGuide: MarkdownText;
   difficultyOfImplementation: DifficultyOfImplementation;
   usefulness: number;
   knowledge: number;
   resources: number;
   time: number;
   dependsOn: string[];
-  comments: string;
+  comments: MarkdownText;
   implementation: Implementation[];
-  evidence: string;
+  evidence: MarkdownText;
   teamsEvidence: Object;
-  assessment: string;
+  assessment: MarkdownText;
   references: FrameworkReferences;
   isImplemented: boolean;
   teamsImplemented: Record<string, any>;
@@ -41,32 +42,6 @@ export interface FrameworkReferences {
   openCRE: string[];
 }
 
-// export interface activityDescription {
-//   level: string;
-//   tags: string[];
-//   activityName: string;
-//   uuid: string;
-//   description: string;
-//   risk: string;
-//   measure: string;
-//   implementationGuide: string;
-//   iso: string[];
-//   iso22: string[];
-//   samm: string[];
-//   openCRE: string[];
-//   knowledge: number;
-//   resources: number;
-//   time: number;
-//   dependsOn: string[];
-//   implementation: Implementation[];
-//   usefulness: number;
-//   evidence: string;
-//   teamsEvidence: Object;
-//   assessment: string;
-//   comments: string;
-//   // isImplemented: boolean;
-//   // teamsImplemented: Record<string, any>;
-// }
 export interface Implementation {
   name: string;
   tags: string[];
@@ -241,6 +216,14 @@ export class ActivityStore {
           }
           // console.log(`  - ${categoryName} -- ${dimName} -- ${activityName}`);
 
+          // Initiate markdown strings
+          activity.description = new MarkdownText(activity.description as unknown as string);
+          activity.risk = new MarkdownText(activity.risk as unknown as string);
+          activity.measure = new MarkdownText(activity.measure as unknown as string);
+          activity.comments = new MarkdownText(activity.comments as unknown as string);
+          activity.assessment = new MarkdownText(activity.assessment as unknown as string);
+          activity.evidence = new MarkdownText(activity.evidence as unknown as string);
+
           // Rename properties to match the Activity interface
           activity.category = categoryName;
           activity.dimension = dimName;
diff --git a/src/app/model/markdown-text.ts b/src/app/model/markdown-text.ts
@@ -0,0 +1,31 @@
+import * as md from 'markdown-it';
+
+let markdown: md = md({html: true});
+
+export class MarkdownText {
+  private plain: string | undefined;
+  private md: string | undefined;
+
+  constructor(text: string | undefined) {
+    this.plain = text;
+    this.md = undefined;
+  }
+
+  empty(): boolean {
+    return this.plain == undefined || this.plain.trim().length == 0;
+  }
+
+  hasContent(): boolean {
+    return !this.empty();
+  }
+
+  toString(): string {
+    return this.plain || '';
+  }
+
+  render(): string {
+    if (!this.plain) return '';
+    if (!this.md) this.md = markdown.render(this.plain);
+    return this.md;
+  }
+}
diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.html b/src/app/pages/circular-heatmap/circular-heatmap.component.html
@@ -35,38 +35,38 @@ <h2>Nothing to show</h2>
               </div>
               <mat-expansion-panel
                 [expanded]="true"
-                *ngIf="showActivityDetails?.description">
+                *ngIf="showActivityDetails?.description?.hasContent()">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Description</b>
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <p [innerHTML]="showActivityDetails?.description"></p>
+                  <p [innerHTML]="showActivityDetails?.description?.render()"></p>
                 </ng-template>
               </mat-expansion-panel>
               <mat-expansion-panel
                 [expanded]="true"
-                *ngIf="showActivityDetails?.risk">
+                *ngIf="showActivityDetails?.risk?.hasContent()">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Risk</b>
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <p [innerHTML]="showActivityDetails?.risk"></p>
+                  <p [innerHTML]="showActivityDetails?.risk?.render()"></p>
                 </ng-template>
               </mat-expansion-panel>
               <mat-expansion-panel
                 [expanded]="true"
-                *ngIf="showActivityDetails?.measure">
+                *ngIf="showActivityDetails?.measure?.hasContent()">
                 <mat-expansion-panel-header>
                   <mat-panel-title>
                     <b>Measure</b>
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <p [innerHTML]="showActivityDetails?.measure"></p>
+                  <p [innerHTML]="showActivityDetails?.measure?.render()"></p>
                 </ng-template>
               </mat-expansion-panel>
               <mat-expansion-panel
diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.ts b/src/app/pages/circular-heatmap/circular-heatmap.component.ts
@@ -174,7 +174,6 @@ export class CircularHeatmapComponent implements OnInit {
     // Update team group filter, if one matches selection
     Object.keys(this.teamGroups || {}).forEach(group => {
       let match: boolean = equalArray(selectedTeams, this.teamGroups[group]);
-      console.log(`${perfNow()}: Heat: Team group '${group}', selected: ${selectedTeams}: match: ${match}`);
       this.filtersTeamGroups[group] = match;
     });
     this.filtersTeamGroups = this.filtersTeamGroups;
diff --git a/src/app/pages/mapping/mapping.component.ts b/src/app/pages/mapping/mapping.component.ts
@@ -136,16 +136,16 @@ export class MappingComponent implements OnInit, AfterViewInit {
         samm2: activity?.references?.samm2 || [],
         ISO17: activity?.references?.iso27001_2017 || [],
         ISO22: activity?.references?.iso27001_2022 || [],
-        description: activity.description || '',
-        risk: activity.risk || '',
-        measure: activity.measure || '',
+        description: activity.description.toString() || '',
+        risk: activity.risk.toString() || '',
+        measure: activity.measure.toString() || '',
         knowledge: dataStore.getMetaString('knowledgeLabels', activity.knowledge),
         resources: dataStore.getMetaString('labels', activity.resources),
         time: dataStore.getMetaString('labels', activity.time),
         usefulness: dataStore.getMetaString('labels', activity.usefulness),
         dependsOn: activity.dependsOn || [],
-        comments: activity.comments || '',
-        assessment: activity.assessment || '',
+        comments: activity.comments.toString() || '',
+        assessment: activity.assessment.toString() || '',
         level: activity.level || 0,
         teamImplementation: activity.implementation || {},
         // teamsEvidence: activity.teamsEvidence || {},
diff --git a/src/assets/Markdown Files/TODO-central-loader.md b/src/assets/Markdown Files/TODO-central-loader.md
@@ -9,8 +9,6 @@
 - Heatmap: Fix: asterisk marks when modified
   - ViewController needs to know about changes vs temp storage
 - Heatmap: Bug: Clicking on grey sector leaves cursor on that sector
-- Heatmap: Run Markdown on yaml text
-- Use DOMPurify to check markdown before innerHTML
 ### Settings
 - Make settings page
   - Date format (don't rely just on browser language)
@@ -19,7 +17,6 @@
 ### Dark Mode
 - Merge in Dark Mode [PR #381](https://github.com/devsecopsmaturitymodel/DevSecOps-MaturityModel/pull/381)
 ### Matrix
-- Matrix: Fix markdown rendering
 - Matrix: Add a Close/Back button
 ### Teama
 - Teams: Allow user to re-order teams and groups
@@ -69,6 +66,9 @@
 - Meta.yaml: Allow admins to customize the terms 'Team' and 'Group' (e.g. to 'App' and 'Portfolio')
 
 # Done
+- Using Angular's built-in DomSanitizer to check [innerHTML]
+- Heatmap: Run Markdown on yaml text
+- Matrix: Fix markdown rendering
 - Teams: Display some core info about the selected team/group
 - Teams: Export teams and groups names as yaml
 - Teams: Store teams names in localstorage
