Communication: Migrate metis service to standalone components

jest.config.js

@@ -105,7 +105,7 @@ module.exports = {
     coverageThreshold: {
         global: {
             // TODO: in the future, the following values should increase to at least 90%
-            statements: 87.69,
+            statements: 87.67,
             branches: 73.79,
             functions: 82.28,
             lines: 87.74,

src/main/webapp/app/overview/discussion-section/discussion-section.component.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, QueryList, ViewChild, ViewChildren, effect, input } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnDestroy, QueryList, ViewChild, ViewChildren, effect, inject, input } from '@angular/core';
 import interact from 'interactjs';
 import { Exercise } from 'app/entities/exercise.model';
 import { Lecture } from 'app/entities/lecture.model';
@@ -59,14 +59,14 @@ export class DiscussionSectionComponent extends CourseDiscussionDirective implem
     faArrowLeft = faArrowLeft;
     faLongArrowRight = faLongArrowRight;
 
-    constructor(
-        protected metisService: MetisService,
-        private channelService: ChannelService,
-        private activatedRoute: ActivatedRoute,
-        private router: Router,
-        private formBuilder: FormBuilder,
-    ) {
-        super(metisService);
+    protected metisService = inject(MetisService);
+    private channelService = inject(ChannelService);
+    private activatedRoute = inject(ActivatedRoute);
+    private router = inject(Router);
+    private formBuilder = inject(FormBuilder);
+
+    constructor() {
+        super();
         effect(() => this.loadData(this.exercise(), this.lecture()));
     }
 

src/main/webapp/app/shared/link-preview/components/link-preview-container/link-preview-container.component.ts

@@ -3,12 +3,15 @@ import { LinkPreview, LinkPreviewService } from 'app/shared/link-preview/service
 import { Link, LinkifyService } from 'app/shared/link-preview/services/linkify.service';
 import { User } from 'app/core/user/user.model';
 import { Posting } from 'app/entities/metis/posting.model';
+import { LinkPreviewComponent } from '../link-preview/link-preview.component';
 
 @Component({
     selector: 'jhi-link-preview-container',
     templateUrl: './link-preview-container.component.html',
     styleUrls: ['./link-preview-container.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    standalone: true,
+    imports: [LinkPreviewComponent],
 })
 export class LinkPreviewContainerComponent implements OnInit, OnChanges {
     private readonly linkPreviewService: LinkPreviewService = inject(LinkPreviewService);

src/main/webapp/app/shared/link-preview/components/link-preview/link-preview.component.ts

@@ -4,11 +4,16 @@ import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { MetisService } from 'app/shared/metis/metis.service';
 import { Posting } from 'app/entities/metis/posting.model';
 import { urlRegex } from 'app/shared/link-preview/services/linkify.service';
+import { ArtemisConfirmIconModule } from '../../../confirm-icon/confirm-icon.module';
+import { NgClass } from '@angular/common';
+import { ArtemisSharedCommonModule } from '../../../shared-common.module';
 
 @Component({
     selector: 'jhi-link-preview',
     templateUrl: './link-preview.component.html',
     styleUrls: ['./link-preview.component.scss'],
+    standalone: true,
+    imports: [ArtemisConfirmIconModule, NgClass, ArtemisSharedCommonModule],
 })
 export class LinkPreviewComponent implements OnInit {
     @Input() linkPreview: LinkPreview;

src/main/webapp/app/shared/metis/answer-post.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -9,11 +9,9 @@ type EntityResponseType = HttpResponse<AnswerPost>;
 
 @Injectable({ providedIn: 'root' })
 export class AnswerPostService extends PostingService<AnswerPost> {
-    public resourceUrl = 'api/courses/';
+    protected http = inject(HttpClient);
 
-    constructor(protected http: HttpClient) {
-        super();
-    }
+    public resourceUrl = 'api/courses/';
 
     /**
      * creates an answerPost

src/main/webapp/app/shared/metis/answer-post/answer-post.component.ts

@@ -4,7 +4,6 @@ import {
     Component,
     EventEmitter,
     HostListener,
-    Inject,
     Input,
     OnChanges,
     OnDestroy,
@@ -13,6 +12,7 @@ import {
     Renderer2,
     ViewChild,
     ViewContainerRef,
+    inject,
     input,
 } from '@angular/core';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
@@ -22,8 +22,16 @@ import { animate, style, transition, trigger } from '@angular/animations';
 import { Posting } from 'app/entities/metis/posting.model';
 import { Reaction } from 'app/entities/metis/reaction.model';
 import { faBookmark, faPencilAlt, faSmile, faTrash } from '@fortawesome/free-solid-svg-icons';
-import { DOCUMENT } from '@angular/common';
+import { DOCUMENT, NgClass, NgIf, NgStyle } from '@angular/common';
 import { AnswerPostReactionsBarComponent } from 'app/shared/metis/posting-reactions-bar/answer-post-reactions-bar/answer-post-reactions-bar.component';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
+import { AnswerPostCreateEditModalComponent } from '../posting-create-edit-modal/answer-post-create-edit-modal/answer-post-create-edit-modal.component';
+import { PostingContentComponent } from 'app/shared/metis/posting-content/posting-content.components';
+import { AnswerPostHeaderComponent } from 'app/shared/metis/posting-header/answer-post-header/answer-post-header.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
+import { EmojiPickerComponent } from 'app/shared/metis/emoji/emoji-picker.component';
+import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
 
 @Component({
     selector: 'jhi-answer-post',
@@ -36,8 +44,28 @@ import { AnswerPostReactionsBarComponent } from 'app/shared/metis/posting-reacti
             transition(':leave', [animate('300ms ease-out', style({ opacity: 0 }))]),
         ]),
     ],
+    standalone: true,
+    imports: [
+        NgClass,
+        FaIconComponent,
+        TranslateDirective,
+        AnswerPostHeaderComponent,
+        PostingContentComponent,
+        AnswerPostReactionsBarComponent,
+        AnswerPostCreateEditModalComponent,
+        NgIf,
+        NgStyle,
+        CdkOverlayOrigin,
+        CdkConnectedOverlay,
+        EmojiPickerComponent,
+        ArtemisSharedCommonModule,
+    ],
 })
 export class AnswerPostComponent extends PostingDirective<AnswerPost> implements OnInit, OnChanges, OnDestroy {
+    changeDetector = inject(ChangeDetectorRef);
+    renderer = inject(Renderer2);
+    private document = inject<Document>(DOCUMENT);
+
     @Input() lastReadDate?: dayjs.Dayjs;
     @Input() isLastAnswer: boolean;
     @Output() openPostingCreateEditModal = new EventEmitter<void>();
@@ -62,14 +90,6 @@ export class AnswerPostComponent extends PostingDirective<AnswerPost> implements
     mayDelete: boolean = false;
     @ViewChild(AnswerPostReactionsBarComponent) private reactionsBarComponent!: AnswerPostReactionsBarComponent;
 
-    constructor(
-        public changeDetector: ChangeDetectorRef,
-        public renderer: Renderer2,
-        @Inject(DOCUMENT) private document: Document,
-    ) {
-        super();
-    }
-
     ngOnInit() {
         super.ngOnInit();
         this.assignPostingToAnswerPost();

src/main/webapp/app/shared/metis/conversations/channel.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { ChannelDTO, ChannelIdAndNameDTO } from 'app/entities/metis/conversation/channel.model';
@@ -8,13 +8,11 @@ import { AccountService } from 'app/core/auth/account.service';
 
 @Injectable({ providedIn: 'root' })
 export class ChannelService {
-    public resourceUrl = '/api/courses/';
+    private http = inject(HttpClient);
+    private conversationService = inject(ConversationService);
+    private accountService = inject(AccountService);
 
-    constructor(
-        private http: HttpClient,
-        private conversationService: ConversationService,
-        private accountService: AccountService,
-    ) {}
+    public resourceUrl = '/api/courses/';
 
     getChannelsOfCourse(courseId: number): Observable<HttpResponse<ChannelDTO[]>> {
         return this.http.get<ChannelDTO[]>(`${this.resourceUrl}${courseId}/channels/overview`, {

src/main/webapp/app/shared/metis/conversations/conversation.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -32,13 +32,11 @@ export enum ConversationMemberSearchFilter {
 }
 @Injectable({ providedIn: 'root' })
 export class ConversationService {
-    public resourceUrl = '/api/courses/';
+    protected http = inject(HttpClient);
+    protected translationService = inject(TranslateService);
+    protected accountService = inject(AccountService);
 
-    constructor(
-        protected http: HttpClient,
-        protected translationService: TranslateService,
-        protected accountService: AccountService,
-    ) {}
+    public resourceUrl = '/api/courses/';
 
     getConversationName(conversation: ConversationDTO | undefined, showLogin = false): string {
         if (!conversation) {

src/main/webapp/app/shared/metis/conversations/group-chat.service.ts

@@ -3,18 +3,16 @@ import { OneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat
 import { GroupChatDTO } from 'app/entities/metis/conversation/group-chat.model';
 import { Observable, map } from 'rxjs';
 import { HttpClient, HttpResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { AccountService } from 'app/core/auth/account.service';
 
 @Injectable({ providedIn: 'root' })
 export class GroupChatService {
-    public resourceUrl = 'api/courses/';
+    private http = inject(HttpClient);
+    private conversationService = inject(ConversationService);
+    private accountService = inject(AccountService);
 
-    constructor(
-        private http: HttpClient,
-        private conversationService: ConversationService,
-        private accountService: AccountService,
-    ) {}
+    public resourceUrl = 'api/courses/';
 
     create(courseId: number, loginsOfChatPartners: string[]): Observable<HttpResponse<GroupChatDTO>> {
         return this.http

src/main/webapp/app/shared/metis/conversations/one-to-one-chat.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core';
+import { Injectable, inject } from '@angular/core';
 import { HttpClient, HttpResponse } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { ConversationService } from 'app/shared/metis/conversations/conversation.service';
@@ -7,12 +7,10 @@ import { OneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat
 
 @Injectable({ providedIn: 'root' })
 export class OneToOneChatService {
-    public resourceUrl = '/api/courses/';
+    private http = inject(HttpClient);
+    private conversationService = inject(ConversationService);
 
-    constructor(
-        private http: HttpClient,
-        private conversationService: ConversationService,
-    ) {}
+    public resourceUrl = '/api/courses/';
 
     create(courseId: number, loginOfChatPartner: string): Observable<HttpResponse<OneToOneChatDTO>> {
         return this.http

src/main/webapp/app/shared/metis/course-discussion.directive.ts

@@ -1,4 +1,4 @@
-import { Directive } from '@angular/core';
+import { Directive, inject } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { faFilter, faLongArrowAltDown, faLongArrowAltUp, faPlus, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { PostContextFilter, PostSortCriterion, SortDirection } from 'app/shared/metis/metis.util';
@@ -12,6 +12,8 @@ import { MetisService } from 'app/shared/metis/metis.service';
     providers: [MetisService],
 })
 export abstract class CourseDiscussionDirective {
+    protected metisService = inject(MetisService);
+
     searchText?: string;
     currentPostContextFilter: PostContextFilter;
     formGroup: FormGroup;
@@ -37,8 +39,6 @@ export abstract class CourseDiscussionDirective {
     faLongArrowAltUp = faLongArrowAltUp;
     faLongArrowAltDown = faLongArrowAltDown;
 
-    protected constructor(protected metisService: MetisService) {}
-
     /**
      * on changing any filter, the metis service is invoked to deliver all posts for the
      * currently set context, filtered on the server

src/main/webapp/app/shared/metis/emoji/emoji-picker.component.ts

@@ -2,10 +2,14 @@ import { Component, EventEmitter, Input, Output, computed, inject } from '@angul
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
 import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
+import { PickerComponent } from '@ctrl/ngx-emoji-mart';
+import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
 
 @Component({
     selector: 'jhi-emoji-picker',
     templateUrl: './emoji-picker.component.html',
+    standalone: true,
+    imports: [PickerComponent, ArtemisSharedCommonModule],
 })
 export class EmojiPickerComponent {
     private themeService = inject(ThemeService);

src/main/webapp/app/shared/metis/emoji/emoji.component.ts

@@ -1,11 +1,14 @@
 import { Component, Input, computed, inject } from '@angular/core';
 import { Theme, ThemeService } from 'app/core/theme/theme.service';
 import { EmojiUtils } from 'app/shared/metis/emoji/emoji.utils';
+import { EmojiComponent as EmojiComponent_1 } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 
 @Component({
     selector: 'jhi-emoji',
     templateUrl: './emoji.component.html',
     styleUrls: ['./emoji.component.scss'],
+    standalone: true,
+    imports: [EmojiComponent_1],
 })
 export class EmojiComponent {
     private themeService = inject(ThemeService);

src/main/webapp/app/shared/metis/message/message-inline-input/message-inline-input.component.ts

@@ -1,30 +1,32 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, inject } from '@angular/core';
 import { AnswerPost } from 'app/entities/metis/answer-post.model';
 import { MetisService } from 'app/shared/metis/metis.service';
-import { FormBuilder, Validators } from '@angular/forms';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Post } from 'app/entities/metis/post.model';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import { PostContentValidationPattern } from 'app/shared/metis/metis.util';
 import { PostingCreateEditDirective } from 'app/shared/metis/posting-create-edit.directive';
 import { LocalStorageService } from 'ngx-webstorage';
+import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module';
+import { PostingButtonComponent } from 'app/shared/metis/posting-button/posting-button.component';
+import { PostingMarkdownEditorComponent } from 'app/shared/metis/posting-markdown-editor/posting-markdown-editor.component';
+import { TranslateDirective } from 'app/shared/language/translate.directive';
 
 @Component({
     selector: 'jhi-message-inline-input',
     templateUrl: './message-inline-input.component.html',
     styleUrls: ['./message-inline-input.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [FormsModule, ReactiveFormsModule, PostingMarkdownEditorComponent, TranslateDirective, PostingButtonComponent, ArtemisSharedCommonModule],
 })
 export class MessageInlineInputComponent extends PostingCreateEditDirective<Post | AnswerPost> implements OnInit {
-    warningDismissed = false;
+    protected metisService = inject(MetisService);
+    protected modalService = inject(NgbModal);
+    protected formBuilder = inject(FormBuilder);
+    protected localStorageService = inject(LocalStorageService);
 
-    constructor(
-        protected metisService: MetisService,
-        protected modalService: NgbModal,
-        protected formBuilder: FormBuilder,
-        protected localStorageService: LocalStorageService,
-    ) {
-        super(metisService, modalService, formBuilder);
-    }
+    warningDismissed = false;
 
     ngOnInit(): void {
         super.ngOnInit();