refactor: migrate all components to standalone

Author: sawankshrma

src/app/app.component.spec.ts

@@ -12,6 +12,10 @@ import { TitleService } from './service/title.service';
 
 class MockThemeService {
   initTheme() {}
+  getTheme() {
+    return 'light';
+  }
+  setTheme(theme: string) {}
 }
 
 class MockTitleService {
@@ -27,13 +31,13 @@ describe('AppComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [AppComponent],
       imports: [
         RouterTestingModule,
         MatToolbarModule,
         MatIconModule,
         MatSidenavModule,
         BrowserAnimationsModule,
+        AppComponent,
       ],
       providers: [
         { provide: ThemeService, useClass: MockThemeService },

src/app/app.component.ts

@@ -2,11 +2,31 @@ import { Component, OnInit, OnDestroy } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { ThemeService } from './service/theme.service';
 import { TitleService } from './service/title.service';
+import { SidenavButtonsComponent } from './component/sidenav-buttons/sidenav-buttons.component';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { NgIf } from '@angular/common';
+import { LogoComponent } from './component/logo/logo.component';
+import { RouterLink, RouterOutlet } from '@angular/router';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
+  standalone: true,
+  imports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    RouterLink,
+    LogoComponent,
+    NgIf,
+    MatSidenavModule,
+    SidenavButtonsComponent,
+    RouterOutlet,
+  ],
 })
 export class AppComponent implements OnInit, OnDestroy {
   title = '';

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { MockLoaderService } from 'src/app/service/loader/mock-data-loader.servi
 import { MarkdownText } from 'src/app/model/markdown-text';
 import { Data } from 'src/app/model/activity-store';
 import { isEmptyObj } from 'src/app/util/util';
-import { MaterialModule } from 'src/app/material/material.module';
+
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { DataStore } from 'src/app/model/data-store';
 
@@ -48,6 +48,8 @@ let mockData = {
 @Component({
   selector: 'app-dependency-graph',
   template: '',
+  standalone: true,
+  imports: [RouterTestingModule],
 })
 class DependencyGraphStubComponent {
   @Input() activityName: string = '';
@@ -69,8 +71,13 @@ describe('ActivityDescriptionComponent', () => {
         { provide: ActivatedRoute, useValue: mockActivatedRoute },
         { provide: LoaderService, useValue: mockLoaderService },
       ],
-      imports: [RouterTestingModule, MaterialModule, NoopAnimationsModule],
-      declarations: [ActivityDescriptionComponent, DependencyGraphStubComponent],
+      imports: [
+        RouterTestingModule,
+
+        NoopAnimationsModule,
+        ActivityDescriptionComponent,
+        DependencyGraphStubComponent,
+      ],
     }).compileComponents();
   });
 

src/app/component/activity-description/activity-description.component.spec.ts

@@ -10,15 +10,30 @@ import {
   OnInit,
   HostListener,
 } from '@angular/core';
-import { MatAccordion } from '@angular/material/expansion';
+import { MatAccordion, MatExpansionModule } 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 { EvidencePanelComponent } from '../evidence-panel/evidence-panel.component';
+import { DependencyGraphComponent } from '../dependency-graph/dependency-graph.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { NgIf, NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-activity-description',
   templateUrl: './activity-description.component.html',
   styleUrls: ['./activity-description.component.css'],
+  standalone: true,
+  imports: [
+    NgIf,
+    MatIconModule,
+    MatButtonModule,
+    MatExpansionModule,
+    DependencyGraphComponent,
+    NgFor,
+    EvidencePanelComponent,
+  ],
 })
 export class ActivityDescriptionComponent implements OnInit, OnChanges {
   @Input() activity: Activity | null = null;

src/app/component/activity-description/activity-description.component.ts

@@ -1,7 +1,18 @@
 import { Component, Inject } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { EvidenceEntry, EvidenceStore } from '../../model/evidence-store';
 import { TeamGroups } from '../../model/types';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
+import { MatOptionModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { NgIf, NgFor } from '@angular/common';
+import { TeamSelectorComponent } from '../team-selector/team-selector.component';
 
 export interface AddEvidenceModalData {
   activityUuid: string;
@@ -13,6 +24,22 @@ export interface AddEvidenceModalData {
   selector: 'app-add-evidence-modal',
   templateUrl: './add-evidence-modal.component.html',
   styleUrls: ['./add-evidence-modal.component.css'],
+  standalone: true,
+  imports: [
+    MatDialogModule,
+    TeamSelectorComponent,
+    NgIf,
+    MatFormFieldModule,
+    MatDividerModule,
+    MatInputModule,
+    FormsModule,
+    NgFor,
+    MatSelectModule,
+    MatOptionModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatIconModule,
+  ],
 })
 export class AddEvidenceModalComponent {
   activityUuid: string;

src/app/component/add-evidence-modal/add-evidence-modal.component.ts

@@ -9,8 +9,7 @@ describe('DependencyGraphComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [DependencyGraphComponent],
-      imports: [MatDialogModule],
+      imports: [MatDialogModule, DependencyGraphComponent],
       providers: [HttpClient, HttpHandler],
     }).compileComponents();
   });

src/app/component/dependency-graph/dependency-graph.component.spec.ts

@@ -37,6 +37,7 @@ interface ThemeColors {
   selector: 'app-dependency-graph',
   templateUrl: './dependency-graph.component.html',
   styleUrls: ['./dependency-graph.component.css'],
+  standalone: true,
 })
 export class DependencyGraphComponent implements OnInit, OnChanges {
   css: CSSStyleDeclaration = getComputedStyle(document.body);

src/app/component/dependency-graph/dependency-graph.component.ts

@@ -1,11 +1,16 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { EvidenceEntry } from '../../model/evidence-store';
 import { LoaderService } from '../../service/loader/data-loader.service';
+import { MatIconModule } from '@angular/material/icon';
+import { MatExpansionModule } from '@angular/material/expansion';
+import { NgIf, NgFor, DatePipe } from '@angular/common';
 
 @Component({
   selector: 'app-evidence-panel',
   templateUrl: './evidence-panel.component.html',
   styleUrls: ['./evidence-panel.component.css'],
+  standalone: true,
+  imports: [NgIf, MatExpansionModule, NgFor, MatIconModule, DatePipe],
 })
 export class EvidencePanelComponent implements OnChanges {
   @Input() activityUuid: string = '';

src/app/component/evidence-panel/evidence-panel.component.ts

@@ -4,6 +4,7 @@ import { Component, Input } from '@angular/core';
   selector: 'app-kpi',
   templateUrl: './kpi.component.html',
   styleUrls: ['./kpi.component.css'],
+  standalone: true,
 })
 export class KpiComponent {
   @Input() title: string = '';