feat: allow customizable UI terminology for Team and Group (#513)

HishamHR5 · HishamHR5 · commit 18045fc2feb1 · 2026-03-25T23:46:40.000+05:30
diff --git a/src/app/component/activity-description/activity-description.component.html b/src/app/component/activity-description/activity-description.component.html
@@ -288,7 +288,7 @@ <h3><b>Usefulness</b></h3>
     <!-- <mat-expansion-panel>
       <mat-expansion-panel-header>
         <mat-panel-title>
-          <b>Teams Evidence</b>
+          <b>{{ settings.getTeamLabelPlural() }} Evidence</b>
         </mat-panel-title>
       </mat-expansion-panel-header>
       <mat-accordion multi="true">
@@ -349,7 +349,7 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
               </span>
             </span>
             <span class="ref-section" *ngIf="teamsImplemented.size === 0">
-              <span class="ref-values">No teams have started this activity yet</span>
+              <span class="ref-values">No {{ settings.getTeamLabelPlural() | lowercase }} have started this activity yet</span>
             </span>
           </div>
         </mat-panel-title>
@@ -367,7 +367,7 @@ <h4 class="tool-name" [innerHTML]="implement['name']"></h4>
         </div>
       </div>
       <ng-template #noTeamsBlock>
-        <p>No teams have started implementing this activity yet.</p>
+        <p>No {{ settings.getTeamLabelPlural() | lowercase }} have started implementing this activity yet.</p>
       </ng-template>
     </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
@@ -14,6 +14,7 @@ import { MatAccordion } from '@angular/material/expansion';
 import { Activity } from '../../model/activity-store';
 import { LoaderService } from '../../service/loader/data-loader.service';
 import { TeamName, ProgressTitle } from '../../model/types';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 @Component({
   selector: 'app-activity-description',
@@ -43,7 +44,10 @@ export class ActivityDescriptionComponent implements OnInit, OnChanges {
 
   @ViewChildren(MatAccordion) accordion!: QueryList<MatAccordion>;
 
-  constructor(private loader: LoaderService) {}
+  constructor(
+    private loader: LoaderService,
+    public settings: SettingsService
+  ) {}
 
   ngOnInit() {
     // Set activity data if provided
diff --git a/src/app/component/report-config-modal/report-config-modal.component.html b/src/app/component/report-config-modal/report-config-modal.component.html
@@ -12,7 +12,7 @@ <h3>Display Configuration</h3>
         [value]="config.columnGrouping"
         (change)="setColumnGrouping($event.value)">
         <mat-button-toggle value="byProgress">By Progress Stage</mat-button-toggle>
-        <mat-button-toggle value="byTeam">By Team</mat-button-toggle>
+        <mat-button-toggle value="byTeam">By {{ settings.getTeamLabel() }}</mat-button-toggle>
       </mat-button-toggle-group>
     </div>
   </div>
diff --git a/src/app/component/report-config-modal/report-config-modal.component.ts b/src/app/component/report-config-modal/report-config-modal.component.ts
@@ -8,6 +8,7 @@ import {
 } from '../../model/report-config';
 import { Activity } from '../../model/activity-store';
 import { ProgressTitle, TeamGroups } from '../../model/types';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 export interface ReportConfigModalData {
   config: ReportConfig;
@@ -37,7 +38,8 @@ export class ReportConfigModalComponent {
 
   constructor(
     public dialogRef: MatDialogRef<ReportConfigModalComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: ReportConfigModalData
+    @Inject(MAT_DIALOG_DATA) public data: ReportConfigModalData,
+    public settings: SettingsService
   ) {
     // Deep copy config to avoid mutating the original until save
     this.config = JSON.parse(JSON.stringify(data.config));
diff --git a/src/app/component/team-selector/team-selector.component.html b/src/app/component/team-selector/team-selector.component.html
@@ -1,14 +1,14 @@
 <div class="config-section">
-  <h3>Teams</h3>
-  <p class="config-hint">Select which teams to include in the report.</p>
+  <h3>{{ settings.getTeamLabelPlural() }}</h3>
+  <p class="config-hint">Select which {{ settings.getTeamLabelPlural() | lowercase }} to include in the report.</p>
   <div class="select-all-actions">
     <button mat-button color="primary" (click)="selectAllTeams()">Select All</button>
     <button mat-button (click)="deselectAllTeams()">Deselect All</button>
     <span *ngIf="groupNames.length > 0" class="group-section">
-      <span class="group-label">Group:</span>
+      <span class="group-label">{{ settings.getGroupLabel() }}:</span>
       <button mat-stroked-button [matMenuTriggerFor]="groupMenu" class="group-dropdown-btn">
         <mat-icon>group</mat-icon>
-        {{ selectedGroupName || 'Select Group' }}
+        {{ selectedGroupName || 'Select ' + settings.getGroupLabel() }}
         <mat-icon>arrow_drop_down</mat-icon>
       </button>
     </span>
diff --git a/src/app/component/team-selector/team-selector.component.ts b/src/app/component/team-selector/team-selector.component.ts
@@ -1,5 +1,6 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { TeamGroups } from '../../model/types';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 @Component({
   selector: 'app-team-selector',
@@ -15,6 +16,8 @@ export class TeamSelectorComponent {
 
   selectedGroupName: string = '';
 
+  constructor(public settings: SettingsService) {}
+
   isTeamSelected(team: string): boolean {
     return this.selectedTeams.includes(team);
   }
diff --git a/src/app/component/teams-groups-editor/teams-groups-editor.component.html b/src/app/component/teams-groups-editor/teams-groups-editor.component.html
@@ -2,7 +2,7 @@
 <div class="editor-container">
   <div class="editor-list-panel">
     <app-selectable-list
-      title="Groups"
+      [title]="settings.getGroupLabelPlural()"
       [items]="keys(localCopyTeamGroups)"
       [selectedItem]="selectedGroup"
       [highlightedItems]="highlightedGroups"
@@ -20,7 +20,7 @@
   </div>
   <div class="editor-list-panel">
     <app-selectable-list
-      title="Teams"
+      [title]="settings.getTeamLabelPlural()"
       [items]="localCopyTeams"
       [selectedItem]="selectedTeam"
       [highlightedItems]="highlightedTeams"
diff --git a/src/app/component/teams-groups-editor/teams-groups-editor.component.ts b/src/app/component/teams-groups-editor/teams-groups-editor.component.ts
@@ -2,6 +2,7 @@
 import { Component, Input, Output, EventEmitter, OnChanges } from '@angular/core';
 import { GroupName, TeamGroups, TeamName, TeamNames } from 'src/app/model/types';
 import { perfNow, renameArrayElement } from 'src/app/util/util';
+import { SettingsService } from 'src/app/service/settings/settings.service';
 
 enum EditMode {
   NONE,
@@ -49,6 +50,8 @@ export class TeamsGroupsEditorComponent implements OnChanges {
   localCopyTeamsRenamed: Record<TeamName, TeamName> = {};
   localCopyTeamGroups: TeamGroups = {};
 
+  constructor(public settings: SettingsService) {}
+
   ngOnChanges() {
     this.makeLocalCopy();
 
@@ -159,7 +162,7 @@ export class TeamsGroupsEditorComponent implements OnChanges {
   }
 
   onAddTeam() {
-    let newName: string = this.findNextName(this.localCopyTeams, 'Team');
+    let newName: string = this.findNextName(this.localCopyTeams, this.settings.getTeamLabel());
     this.localCopyTeams.push(newName);
     this.onTeamSelected(newName);
   }
@@ -194,7 +197,7 @@ export class TeamsGroupsEditorComponent implements OnChanges {
   }
 
   onAddGroup() {
-    let newName: string = this.findNextName(this.keys(this.localCopyTeamGroups), 'Group');
+    let newName: string = this.findNextName(this.keys(this.localCopyTeamGroups), this.settings.getGroupLabel());
     this.localCopyTeamGroups[newName] = [];
     this.onGroupSelected(newName);
   }
diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.html b/src/app/pages/circular-heatmap/circular-heatmap.component.html
@@ -35,7 +35,7 @@ <h2>Nothing to show</h2>
           </button>
           <div class="team-filter" [class.hidden]="!showFilters">
             <mat-form-field class="team-chip-list">
-              <mat-label>Team Group Filter</mat-label>
+              <mat-label>{{ settings.getTeamLabel() }} {{ settings.getGroupLabel() }} Filter</mat-label>
               <mat-chip-list selectable>
                 <mat-chip
                   #chip="matChip"
@@ -47,7 +47,7 @@ <h2>Nothing to show</h2>
               </mat-chip-list>
             </mat-form-field>
             <mat-form-field>
-              <mat-label>Team Filter</mat-label>
+              <mat-label>{{ settings.getTeamLabel() }} Filter</mat-label>
               <mat-chip-list selectable multiple>
                 <mat-chip
                   #chip="matChip"
@@ -116,14 +116,14 @@ <h2>Nothing to show</h2>
             mat-raised-button
             class="downloadButtonClass"
             (click)="exportTeamProgress()">
-            Download team progress
+            Download {{ settings.getTeamLabel() | lowercase }} progress
           </button>
           <button
             class="normal-button"
             mat-raised-button
             class="resetButtonClass"
             (click)="deleteLocalTeamsProgress()">
-            Delete team progress
+            Delete {{ settings.getTeamLabel() | lowercase }} progress
           </button>
         </div>
       </div>
diff --git a/src/app/pages/circular-heatmap/circular-heatmap.component.ts b/src/app/pages/circular-heatmap/circular-heatmap.component.ts
@@ -64,7 +64,7 @@ export class CircularHeatmapComponent implements OnInit, OnDestroy {
   constructor(
     private loader: LoaderService,
     private sectorService: SectorService,
-    private settings: SettingsService,
+    public settings: SettingsService,
     private themeService: ThemeService,
     private titleService: TitleService,
     private router: Router,
diff --git a/src/app/pages/report/report.component.html b/src/app/pages/report/report.component.html
@@ -13,7 +13,7 @@
     <span class="activity-count" *ngIf="!isLoading">
       {{ totalFilteredActivities }} activities
       <span *ngIf="reportConfig.selectedTeams.length > 0">
-        · {{ reportConfig.selectedTeams.length }} teams
+        · {{ reportConfig.selectedTeams.length }} {{ settings.getTeamLabelPlural() | lowercase }}
       </span>
     </span>
   </div>
diff --git a/src/app/pages/report/report.component.ts b/src/app/pages/report/report.component.ts
@@ -62,7 +62,7 @@ export class ReportComponent implements OnInit {
 
   constructor(
     private loader: LoaderService,
-    private settings: SettingsService,
+    public settings: SettingsService,
     private dialog: MatDialog
   ) {
     this.reportConfig = getReportConfig();
diff --git a/src/app/pages/settings/settings.component.html b/src/app/pages/settings/settings.component.html
@@ -34,6 +34,19 @@
         <span class="caption">{{ selectedMaxLevelCaption }}</span>
       </div>
     </mat-card-content>
+
+    <mat-card-content>
+      <div class="terminology-container" style="display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px;">
+        <mat-form-field appearance="fill">
+          <mat-label>Custom Team Terminology</mat-label>
+          <input matInput placeholder="e.g. App" name="customTeamLabel" [(ngModel)]="customTeamLabel" (ngModelChange)="onTeamLabelChange()">
+        </mat-form-field>
+        <mat-form-field appearance="fill">
+          <mat-label>Custom Group Terminology</mat-label>
+          <input matInput placeholder="e.g. Portfolio" name="customGroupLabel" [(ngModel)]="customGroupLabel" (ngModelChange)="onGroupLabelChange()">
+        </mat-form-field>
+      </div>
+    </mat-card-content>
   </mat-card>
 
   <mat-card class="progress-definitions-section">
diff --git a/src/app/pages/settings/settings.component.spec.ts b/src/app/pages/settings/settings.component.spec.ts
@@ -43,7 +43,11 @@ describe('SettingsComponent', () => {
       'setMaxLevel',
       'getDateFormat',
       'setDateFormat',
+      'getTeamLabel',
+      'getGroupLabel',
     ]);
+    settingsService.getTeamLabel.and.returnValue('Team');
+    settingsService.getGroupLabel.and.returnValue('Group');
     modalComponent = jasmine.createSpyObj('ModalMessageComponent', ['openDialog']);
 
     await TestBed.configureTestingModule({
diff --git a/src/app/pages/settings/settings.component.ts b/src/app/pages/settings/settings.component.ts
@@ -61,6 +61,9 @@ export class SettingsComponent implements OnInit {
   ];
   selectedDateFormat: string = this.BROWSER_LOCALE;
 
+  customTeamLabel: string = 'Team';
+  customGroupLabel: string = 'Group';
+
   // GitHub release check state
   checkingLatest: boolean = false;
   latestReleaseInfo: GithubReleaseInfo | null = null;
@@ -145,6 +148,8 @@ export class SettingsComponent implements OnInit {
 
   initialize(): void {
     this.selectedDateFormat = this.settings.getDateFormat() || this.BROWSER_LOCALE;
+    this.customTeamLabel = this.settings.getTeamLabel();
+    this.customGroupLabel = this.settings.getGroupLabel();
 
     // Init dates
     let date: Date = new Date();
@@ -179,6 +184,14 @@ export class SettingsComponent implements OnInit {
     this.settings.setDateFormat(value);
   }
 
+  onTeamLabelChange(): void {
+    this.settings.setTeamLabel(this.customTeamLabel);
+  }
+
+  onGroupLabelChange(): void {
+    this.settings.setGroupLabel(this.customGroupLabel);
+  }
+
   onMaxLevelChange(value: number | null): void {
     if (value == null) value = this.dataStoreMaxLevel;
     if (value == this.dataStoreMaxLevel) {
diff --git a/src/app/pages/teams/teams.component.html b/src/app/pages/teams/teams.component.html
@@ -1,4 +1,4 @@
-<app-top-header section="Teams &amp; Groups"></app-top-header>
+<app-top-header [section]="settings.getTeamLabelPlural() + ' & ' + settings.getGroupLabelPlural()"></app-top-header>
 <div class="team-section">
   <app-teams-groups-editor
     [teams]="teams"
@@ -8,8 +8,8 @@
     (namesChanged)="onTeamsChanged($event)"
     (click)="$event.stopPropagation()"></app-teams-groups-editor>
   <div class="button-container" *ngIf="dataStore?.meta?.hasLocalStorage">
-    <button mat-raised-button (click)="onExportTeamGroups()">Download team setup</button>
-    <button mat-raised-button (click)="onResetTeamGroups()">Reset team setup</button>
+    <button mat-raised-button (click)="onExportTeamGroups()">Download {{ settings.getTeamLabel() | lowercase }} setup</button>
+    <button mat-raised-button (click)="onResetTeamGroups()">Reset {{ settings.getTeamLabel() | lowercase }} setup</button>
   </div>
 
   <div class="team-info">
@@ -37,7 +37,7 @@ <h2>{{ infoTitle }}</h2>
     <h3>Activities in progress</h3>
     <table mat-table matSort [dataSource]="dataSource || []" class="mat-elevation-z8 teams-table">
       <ng-container matColumnDef="Team">
-        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-small-width">Team</th>
+        <th mat-header-cell mat-sort-header *matHeaderCellDef class="table-small-width">{{ settings.getTeamLabel() }}</th>
         <td mat-cell *matCellDef="let element" class="table-small-width">
           {{ element?.team }}
         </td>
diff --git a/src/app/pages/teams/teams.component.ts b/src/app/pages/teams/teams.component.ts
@@ -161,7 +161,10 @@ export class TeamsComponent implements OnInit, AfterViewInit {
 
     if (!yamlStr) {
       this.displayMessage(
-        new DialogInfo('No team and groups names stored locally in the browser', 'Export Error')
+        new DialogInfo(
+          `No ${this.settings.getTeamLabel().toLowerCase()} and ${this.settings.getGroupLabelPlural().toLowerCase()} names stored locally in the browser`,
+          'Export Error'
+        )
       );
       return;
     }
@@ -182,7 +185,7 @@ export class TeamsComponent implements OnInit, AfterViewInit {
     return new Promise((resolve, reject) => {
       let title: string = 'Delete local browser data';
       let message: string =
-        'Do you want to reset all team and group names?' +
+        `Do you want to reset all ${this.settings.getTeamLabel().toLowerCase()} and ${this.settings.getGroupLabel().toLowerCase()} names?` +
         '\n\nThis will revert the names to the names stored in the yaml file on the server.';
       let buttons: string[] = ['Cancel', 'Delete'];
       this.modal
diff --git a/src/app/service/settings/settings.service.ts b/src/app/service/settings/settings.service.ts
@@ -6,9 +6,13 @@ import { Injectable } from '@angular/core';
 export class SettingsService {
   private readonly KEY_DATEFORMAT = 'settings.dateformat';
   private readonly KEY_MAX_LEVEL = 'settings.maxlevel';
+  private readonly KEY_TEAM_LABEL = 'settings.teamLabel';
+  private readonly KEY_GROUP_LABEL = 'settings.groupLabel';
 
   private dateformat: string | null = null;
   private maxLevel: number | null = null;
+  private _teamLabel: string | null = null;
+  private _groupLabel: string | null = null;
 
   getDateFormat(): string | null {
     if (this.dateformat == null) {
@@ -34,6 +38,44 @@ export class SettingsService {
     this.saveSettings(this.KEY_MAX_LEVEL, maxLevel);
   }
 
+  getTeamLabel(): string {
+    if (this._teamLabel == null) {
+      this._teamLabel = this.getSettings(this.KEY_TEAM_LABEL) || 'Team';
+    }
+    return this._teamLabel || 'Team';
+  }
+
+  getTeamLabelPlural(): string {
+    const label = this.getTeamLabel();
+    if (label.toLowerCase() === 'team') return label === 'Team' ? 'Teams' : 'teams';
+    return label.endsWith('s') ? label : label + 's';
+  }
+
+  setTeamLabel(label: string | null): void {
+    const val = label?.trim() || 'Team';
+    this._teamLabel = val;
+    this.saveSettings(this.KEY_TEAM_LABEL, val === 'Team' ? null : val);
+  }
+
+  getGroupLabel(): string {
+    if (this._groupLabel == null) {
+      this._groupLabel = this.getSettings(this.KEY_GROUP_LABEL) || 'Group';
+    }
+    return this._groupLabel || 'Group';
+  }
+
+  getGroupLabelPlural(): string {
+    const label = this.getGroupLabel();
+    if (label.toLowerCase() === 'group') return label === 'Group' ? 'Groups' : 'groups';
+    return label.endsWith('s') ? label : label + 's';
+  }
+
+  setGroupLabel(label: string | null): void {
+    const val = label?.trim() || 'Group';
+    this._groupLabel = val;
+    this.saveSettings(this.KEY_GROUP_LABEL, val === 'Group' ? null : val);
+  }
+
   getSettingsNumber(key: string): number | null {
     let setting: string | null = localStorage.getItem(key);
     if (setting == null) {
