Development: Migrate client code for pipes and loading indicator comp…

…onents (#9880)

src/main/webapp/app/shared/loading-indicator-container/loading-indicator-container.component.html

@@ -1,4 +1,4 @@
-@if (isLoading) {
+@if (isLoading()) {
     <div class="d-flex justify-content-center spinner">
         <div class="spinner-border" role="status">
             <span class="sr-only" jhiTranslate="loading"></span>

src/main/webapp/app/shared/loading-indicator-container/loading-indicator-container.component.ts

@@ -1,10 +1,13 @@
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({
     selector: 'jhi-loading-indicator-container',
     templateUrl: './loading-indicator-container.component.html',
     styleUrls: ['./loading-indicator-container.component.scss'],
+    imports: [TranslateDirective],
+    standalone: true,
 })
 export class LoadingIndicatorContainerComponent {
-    @Input() isLoading = false;
+    isLoading = input<boolean>(false);
 }

src/main/webapp/app/shared/markdown.module.ts

@@ -4,8 +4,7 @@ import { ArtemisMarkdownEditorModule } from 'app/shared/markdown-editor/markdown
 import { HtmlForMarkdownPipe } from 'app/shared/pipes/html-for-markdown.pipe';
 
 @NgModule({
-    imports: [ArtemisMarkdownEditorModule],
-    declarations: [HtmlForMarkdownPipe],
+    imports: [ArtemisMarkdownEditorModule, HtmlForMarkdownPipe],
     providers: [ArtemisMarkdownService],
     exports: [HtmlForMarkdownPipe],
 })

src/main/webapp/app/shared/metis/metis.module.ts

@@ -64,6 +64,7 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
         MatDialogModule,
         LinkPreviewModule,
         ProfilePictureComponent,
+        HtmlForPostingMarkdownPipe,
     ],
     declarations: [
         PostingThreadComponent,
@@ -86,7 +87,6 @@ import { ProfilePictureComponent } from 'app/shared/profile-picture/profile-pict
         AnswerPostReactionsBarComponent,
         MessageInlineInputComponent,
         MessageReplyInlineInputComponent,
-        HtmlForPostingMarkdownPipe,
         ReactingUsersOnPostingPipe,
         EmojiComponent,
         EmojiPickerComponent,

src/main/webapp/app/shared/pipes/artemis-translate.pipe.ts

@@ -4,16 +4,20 @@ import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 @Pipe({
     name: 'artemisTranslate',
     pure: false,
+    standalone: true,
 })
 /**
  * a simple wrapper to prevent compile errors in IntelliJ
  */
 export class ArtemisTranslatePipe implements PipeTransform, OnDestroy {
     private translatePipe: TranslatePipe;
-    constructor(
-        private translateService: TranslateService,
-        private changeDetectorRef: ChangeDetectorRef,
-    ) {
+
+    /**
+     * We cannot inject() ChangeDetectorRef here, since this is a pipe (other than a component where its possible)
+     * However, in this case due to being a wrapper class for TranslatePipe, which implements the same constructor
+     * this exception should be okay.
+     */
+    constructor(translateService: TranslateService, changeDetectorRef: ChangeDetectorRef) {
         this.translatePipe = new TranslatePipe(translateService, changeDetectorRef);
     }
 

src/main/webapp/app/shared/pipes/html-for-markdown.pipe.ts

@@ -1,13 +1,14 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, inject } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { ArtemisMarkdownService } from 'app/shared/markdown.service';
 import type { PluginSimple } from 'markdown-it';
 
 @Pipe({
     name: 'htmlForMarkdown',
+    standalone: true,
 })
 export class HtmlForMarkdownPipe implements PipeTransform {
-    constructor(private markdownService: ArtemisMarkdownService) {}
+    private readonly markdownService = inject(ArtemisMarkdownService);
 
     /**
      * Converts markdown into html, sanitizes it and then declares it as safe to bypass further security.

src/main/webapp/app/shared/pipes/html-for-posting-markdown.pipe.ts

@@ -1,12 +1,13 @@
-import { Pipe, PipeTransform } from '@angular/core';
+import { Pipe, PipeTransform, inject } from '@angular/core';
 import { SafeHtml } from '@angular/platform-browser';
 import { ArtemisMarkdownService } from 'app/shared/markdown.service';
 
 @Pipe({
     name: 'htmlForPostingMarkdown',
+    standalone: true,
 })
 export class HtmlForPostingMarkdownPipe implements PipeTransform {
-    constructor(private markdownService: ArtemisMarkdownService) {}
+    private readonly markdownService = inject(ArtemisMarkdownService);
 
     /**
      * Converts markdown used in posting content into html, sanitizes it and then declares it as safe to bypass further security.

src/main/webapp/app/shared/shared-common.module.ts

@@ -15,15 +15,14 @@ import { CloseCircleComponent } from 'app/shared/close-circle/close-circle.compo
 import { ArtemisDateRangePipe } from 'app/shared/pipes/artemis-date-range.pipe';
 
 @NgModule({
-    imports: [ArtemisSharedLibsModule, TranslateDirective],
+    imports: [ArtemisSharedLibsModule, TranslateDirective, ArtemisTranslatePipe],
     declarations: [
         ArtemisDatePipe,
         ArtemisDateRangePipe,
         FindLanguageFromKeyPipe,
         AlertOverlayComponent,
         SortByDirective,
         SortDirective,
-        ArtemisTranslatePipe,
         ArtemisTimeAgoPipe,
         ArtemisDurationFromSecondsPipe,
         DurationPipe,

src/main/webapp/app/shared/shared.module.ts

@@ -29,10 +29,9 @@ import { DetailOverviewNavigationBarComponent } from 'app/shared/detail-overview
 import { ScienceDirective } from 'app/shared/science/science.directive';
 
 @NgModule({
-    imports: [ArtemisSharedLibsModule, ArtemisSharedCommonModule, ArtemisSharedPipesModule, RouterModule],
+    imports: [ArtemisSharedLibsModule, ArtemisSharedCommonModule, ArtemisSharedPipesModule, RouterModule, LoadingIndicatorContainerComponent],
     declarations: [
         DetailOverviewNavigationBarComponent,
-        LoadingIndicatorContainerComponent,
         CircularProgressBarComponent,
         CompetencySelectionComponent,
         AdditionalFeedbackComponent,

src/test/javascript/spec/component/assessment-shared/assessment-header.component.spec.ts

@@ -7,7 +7,7 @@ import { ArtemisTestModule } from '../../test.module';
 import { Result } from 'app/entities/result.model';
 import { AlertOverlayComponent } from 'app/shared/alert/alert-overlay.component';
 import { AssessmentWarningComponent } from 'app/assessment/assessment-warning/assessment-warning.component';
-import { MockProvider } from 'ng-mocks';
+import { MockPipe, MockProvider } from 'ng-mocks';
 import { Exercise, ExerciseType } from 'app/entities/exercise.model';
 import { MockSyncStorage } from '../../helpers/mocks/service/mock-sync-storage.service';
 import { LocalStorageService, SessionStorageService } from 'ngx-webstorage';
@@ -49,8 +49,8 @@ describe('AssessmentHeaderComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, NgbTooltipMocksModule, NgbAlertsMocksModule, RouterModule.forRoot([])],
-            declarations: [AssessmentHeaderComponent, AssessmentWarningComponent, AlertOverlayComponent, ArtemisTranslatePipe, MockTranslateValuesDirective],
+            imports: [ArtemisTestModule, NgbTooltipMocksModule, NgbAlertsMocksModule, RouterModule.forRoot([]), MockPipe(ArtemisTranslatePipe)],
+            declarations: [AssessmentHeaderComponent, AssessmentWarningComponent, AlertOverlayComponent, MockTranslateValuesDirective],
             providers: [
                 {
                     provide: AlertService,

src/test/javascript/spec/component/shared/metis/posting-content/posting-content-part.component.spec.ts

@@ -29,33 +29,39 @@ describe('PostingContentPartComponent', () => {
     let contentBeforeReference: string;
     let contentAfterReference: string;
 
-    beforeEach(() => {
-        return TestBed.configureTestingModule({
-            imports: [ArtemisTestModule, MatDialogModule, MatMenuModule],
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [
+                ArtemisTestModule,
+                MatDialogModule,
+                MatMenuModule,
+                HtmlForPostingMarkdownPipe, // we want to test against the rendered string, therefore we cannot mock the pipe
+            ],
             declarations: [
                 PostingContentPartComponent,
-                HtmlForPostingMarkdownPipe, // we want to test against the rendered string, therefore we cannot mock the pipe
                 // FaIconComponent, // we want to test the type of rendered icons, therefore we cannot mock the component
                 MockRouterLinkDirective,
                 MockQueryParamsDirective,
             ],
-            providers: [{ provide: FileService, useClass: MockFileService }, { provide: Router, useClass: MockRouter }, MockProvider(AccountService)],
-        })
-            .compileComponents()
-            .then(() => {
-                fixture = TestBed.createComponent(PostingContentPartComponent);
-                component = fixture.componentInstance;
-                debugElement = fixture.debugElement;
-                router = TestBed.inject(Router);
-                fileService = TestBed.inject(FileService);
-
-                navigateByUrlSpy = jest.spyOn(router, 'navigateByUrl');
-                openAttachmentSpy = jest.spyOn(fileService, 'downloadFile');
-                enlargeImageSpy = jest.spyOn(component, 'enlargeImage');
-
-                contentBeforeReference = '**Be aware**\n\n I want to reference the following Post ';
-                contentAfterReference = 'in my content,\n\n does it *actually* work?';
-            });
+            providers: [
+                { provide: FileService, useClass: MockFileService },
+                {
+                    provide: Router,
+                    useClass: MockRouter,
+                },
+                MockProvider(AccountService),
+            ],
+        }).compileComponents();
+        fixture = TestBed.createComponent(PostingContentPartComponent);
+        component = fixture.componentInstance;
+        debugElement = fixture.debugElement;
+        router = TestBed.inject(Router);
+        fileService = TestBed.inject(FileService);
+        navigateByUrlSpy = jest.spyOn(router, 'navigateByUrl');
+        openAttachmentSpy = jest.spyOn(fileService, 'downloadFile');
+        enlargeImageSpy = jest.spyOn(component, 'enlargeImage');
+        contentBeforeReference = '**Be aware**\n\n I want to reference the following Post ';
+        contentAfterReference = 'in my content,\n\n does it *actually* work?';
     });
 
     describe('For posting without reference', () => {

src/test/javascript/spec/pipe/reacting-users-on-posting.pipe.spec.ts

@@ -4,16 +4,17 @@ import { MockTranslateService } from '../helpers/mocks/service/mock-translate.se
 import { PLACEHOLDER_USER_REACTED, ReactingUsersOnPostingPipe } from 'app/shared/pipes/reacting-users-on-posting.pipe';
 import { TranslateService } from '@ngx-translate/core';
 import { metisTutor, metisUser1, metisUser2 } from '../helpers/sample/metis-sample-data';
+import { MockPipe } from 'ng-mocks';
 
 describe('ReactingUsersOnPostingsPipe', () => {
     let reactingUsersPipe: ReactingUsersOnPostingPipe;
     let translateService: TranslateService;
     let updateReactingUsersStringSpy: jest.SpyInstance;
     let transformedStringWithReactingUsers: string;
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [HtmlForPostingMarkdownPipe],
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [MockPipe(HtmlForPostingMarkdownPipe)],
             providers: [{ provide: TranslateService, useClass: MockTranslateService }],
         })
             .compileComponents()