Merge branch 'develop' into chore/development/migrate-diff

angular.json

@@ -113,7 +113,7 @@
               },
               {
                 "glob": "**/*",
-                "input": "./node_modules/monaco-editor/min/vs",
+                "input": "./node_modules/monaco-editor/bundles/vs",
                 "output": "vs"
               }
             ],

package.json

@@ -58,7 +58,7 @@
         "jszip": "3.10.1",
         "lodash-es": "4.17.21",
         "mobile-drag-drop": "3.0.0-rc.0",
-        "monaco-editor": "0.51.0",
+        "monaco-editor": "0.52.0",
         "ngx-infinite-scroll": "18.0.0",
         "ngx-webstorage": "18.0.0",
         "papaparse": "5.4.1",

prebuild.mjs

@@ -5,10 +5,11 @@
  * - webpack.DefinePlugin and
  * - MergeJsonWebpackPlugin
  */
-import fs from "fs";
-import path from "path";
-import { hashElement } from "folder-hash";
-import { fileURLToPath } from "url";
+import fs from 'fs';
+import path from 'path';
+import { hashElement } from 'folder-hash';
+import { fileURLToPath } from 'url';
+import * as esbuild from 'esbuild';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -111,4 +112,25 @@ for (const group of groups) {
     }
 }
 
+/*
+ * The workers of the monaco editor must be bundled separately.
+ * Specialized workers are available in the vs/esm/language/ directory.
+ * Be sure to modify the MonacoConfig if you choose to add a worker here.
+ * For more details, refer to https://github.com/microsoft/monaco-editor/blob/main/samples/browser-esm-esbuild/build.js
+ */
+const workerEntryPoints = [
+    'vs/language/json/json.worker.js',
+    'vs/language/css/css.worker.js',
+    'vs/language/html/html.worker.js',
+    'vs/language/typescript/ts.worker.js',
+    'vs/editor/editor.worker.js'
+];
+await esbuild.build({
+    entryPoints: workerEntryPoints.map((entry) => `node_modules/monaco-editor/esm/${entry}`),
+    bundle: true,
+    format: 'esm',
+    outbase: 'node_modules/monaco-editor/esm',
+    outdir: 'node_modules/monaco-editor/bundles'
+});
+
 console.log("Pre-Build complete!");

src/main/java/de/tum/cit/aet/artemis/core/dto/UserPublicInfoDTO.java

@@ -25,6 +25,8 @@ public class UserPublicInfoDTO {
 
     private String lastName;
 
+    private String imageUrl;
+
     private Boolean isInstructor;
 
     private Boolean isEditor;
@@ -43,6 +45,7 @@ public UserPublicInfoDTO(User user) {
         this.name = user.getName();
         this.firstName = user.getFirstName();
         this.lastName = user.getLastName();
+        this.imageUrl = user.getImageUrl();
     }
 
     /**
@@ -101,6 +104,14 @@ public void setLastName(String lastName) {
         this.lastName = lastName;
     }
 
+    public String getImageUrl() {
+        return imageUrl;
+    }
+
+    public void setImageUrl(String imageUrl) {
+        this.imageUrl = imageUrl;
+    }
+
     public Boolean getIsInstructor() {
         return isInstructor;
     }
@@ -152,6 +163,7 @@ public int hashCode() {
     @Override
     public String toString() {
         return "UserPublicInfoDTO{" + "id=" + id + ", login='" + login + '\'' + ", name='" + name + '\'' + ", firstName='" + firstName + '\'' + ", lastName='" + lastName + '\''
-                + ", isInstructor=" + isInstructor + ", isEditor=" + isEditor + ", isTeachingAssistant=" + isTeachingAssistant + ", isStudent=" + isStudent + '}';
+                + ", imageUrl='" + imageUrl + '\'' + ", isInstructor=" + isInstructor + ", isEditor=" + isEditor + ", isTeachingAssistant=" + isTeachingAssistant + ", isStudent="
+                + isStudent + '}';
     }
 }

src/main/webapp/app/core/config/monaco.config.ts

@@ -1,19 +1,23 @@
 /**
  * Sets up the MonacoEnvironment for the monaco editor's service worker.
+ * See https://github.com/microsoft/monaco-editor/blob/main/samples/browser-esm-esbuild/index.js
  */
 export function MonacoConfig() {
     self.MonacoEnvironment = {
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        getWorkerUrl: function (workerId: string, label: string) {
-            /*
-             * This is the AMD-based service worker, which comes bundled with a few special workers for selected languages.
-             * (e.g.: javascript, typescript, html, css)
-             *
-             * It is also possible to use an ESM-based approach, which requires a little more setup and case distinctions in this method.
-             * At the moment, it seems that the ESM-based approaches are incompatible with the Artemis client, as they would require custom builders.
-             * Support for custom builders was removed in #6546.
-             */
-            return 'vs/base/worker/workerMain.js';
+        getWorkerUrl: (_moduleId: string, label: string): string => {
+            if (label === 'json') {
+                return './vs/language/json/json.worker.js';
+            }
+            if (label === 'css' || label === 'scss' || label === 'less') {
+                return './vs/language/css/css.worker.js';
+            }
+            if (label === 'html' || label === 'handlebars' || label === 'razor') {
+                return './vs/language/html/html.worker.js';
+            }
+            if (label === 'typescript' || label === 'javascript') {
+                return './vs/language/typescript/ts.worker.js';
+            }
+            return './vs/editor/editor.worker.js';
         },
     };
 }

src/main/webapp/app/core/user/user.model.ts

@@ -66,6 +66,7 @@ export class UserPublicInfoDTO {
     public firstName?: string;
     public lastName?: string;
     public email?: string;
+    public imageUrl?: string;
     public isInstructor?: boolean;
     public isEditor?: boolean;
     public isTeachingAssistant?: boolean;

src/main/webapp/app/overview/course-conversations/course-wide-search/course-wide-search.component.html

@@ -3,9 +3,9 @@
         <div>
             <h4 class="d-inline-block rounded p-1 info">
                 @if (!courseWideSearchConfig.searchTerm) {
-                    All Messages
+                    <span jhiTranslate="artemisApp.metis.overview.allPublicMessages"></span>
                 } @else {
-                    Search Results for "{{ courseWideSearchConfig.searchTerm }}"
+                    <span jhiTranslate="artemisApp.metis.overview.searchResults" [translateValues]="{ search: courseWideSearchConfig.searchTerm }"></span>
                 }
             </h4>
         </div>

src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.html

@@ -1,11 +1,23 @@
 @if (activeConversation && course) {
     <div class="d-flex justify-content-between align-items-center conversation-member-row" (mouseleave)="$event.stopPropagation(); userDropdown.close()">
         <span class="d-inline-block">
-            <fa-icon [icon]="userIcon" [ngbTooltip]="userTooltip" />
+            @if (userImageUrl) {
+                <img
+                    [alt]="userLabel"
+                    class="conversation-member-row-profile-picture rounded-3 me-1"
+                    [src]="userImageUrl"
+                    [ngStyle]="{ 'background-color': userDefaultPictureHue }"
+                />
+            } @else {
+                <strong class="conversation-member-row-default-profile-picture rounded-3 me-1" [ngStyle]="{ 'background-color': userDefaultPictureHue }">{{ userInitials }}</strong>
+            }
             @if (isChannel(activeConversation) && conversationMember?.isChannelModerator) {
                 <fa-icon [icon]="faUserGear" [ngbTooltip]="'artemisApp.dialogs.conversationDetail.memberTab.memberRow.channelModeratorTooltip' | artemisTranslate" />
             }
             {{ userLabel }}
+            @if (!conversationMember.isStudent) {
+                <fa-icon class="ms-1 text-secondary" [icon]="userIcon" [ngbTooltip]="userTooltip" />
+            }
         </span>
         <div ngbDropdown class="d-inline-block" #userDropdown="ngbDropdown">
             @if (canBeRemovedFromConversation || canBeGrantedChannelModeratorRole || canBeRevokedChannelModeratorRole) {

src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.scss

@@ -1,3 +1,5 @@
+$profile-picture-height: 2rem;
+
 .conversation-member-row {
     min-height: 3rem;
 
@@ -14,4 +16,21 @@
     .dropdown-toggle::after {
         content: none;
     }
+
+    .conversation-member-row-default-profile-picture {
+        font-size: 0.8rem;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .conversation-member-row-profile-picture,
+    .conversation-member-row-default-profile-picture {
+        width: $profile-picture-height;
+        height: $profile-picture-height;
+        max-width: $profile-picture-height;
+        max-height: $profile-picture-height;
+        background-color: var(--gray-400);
+        color: var(--white);
+    }
 }

src/main/webapp/app/overview/course-conversations/dialogs/conversation-detail-dialog/tabs/conversation-members/conversation-member-row/conversation-member-row.component.ts

@@ -1,5 +1,5 @@
 import { Component, EventEmitter, HostBinding, Input, OnDestroy, OnInit, Output } from '@angular/core';
-import { faChalkboardTeacher, faEllipsis, faUser, faUserCheck, faUserGear } from '@fortawesome/free-solid-svg-icons';
+import { faEllipsis, faUser, faUserCheck, faUserGear, faUserGraduate } from '@fortawesome/free-solid-svg-icons';
 import { User } from 'app/core/user/user.model';
 import { ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
 import { AccountService } from 'app/core/auth/account.service';
@@ -20,6 +20,8 @@ import { HttpErrorResponse, HttpResponse } from '@angular/common/http';
 import { getAsGroupChatDTO, isGroupChatDTO } from 'app/entities/metis/conversation/group-chat.model';
 import { GroupChatService } from 'app/shared/metis/conversations/group-chat.service';
 import { catchError } from 'rxjs/operators';
+import { getBackgroundColorHue } from 'app/utils/color.utils';
+import { getInitialsFromString } from 'app/utils/text.utils';
 
 @Component({
     // eslint-disable-next-line @angular-eslint/component-selector
@@ -56,6 +58,9 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
     canBeRevokedChannelModeratorRole = false;
 
     userLabel: string;
+    userImageUrl: string | undefined;
+    userDefaultPictureHue: string;
+    userInitials: string;
     // icons
     userIcon: IconProp = faUser;
     userTooltip = '';
@@ -88,7 +93,10 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
                     this.isCreator = true;
                 }
 
+                this.userImageUrl = this.conversationMember.imageUrl;
                 this.userLabel = getUserLabel(this.conversationMember);
+                this.userInitials = getInitialsFromString(this.conversationMember.name ?? 'NA');
+                this.userDefaultPictureHue = getBackgroundColorHue(this.conversationMember.id ? this.conversationMember.id.toString() : 'default');
                 this.setUserAuthorityIconAndTooltip();
                 // the creator of a channel can not be removed from the channel
                 this.canBeRemovedFromConversation = !this.isCurrentUser && this.canRemoveUsersFromConversation(this.activeConversation);
@@ -242,7 +250,7 @@ export class ConversationMemberRowComponent implements OnInit, OnDestroy {
         const toolTipTranslationPath = 'artemisApp.metis.userAuthorityTooltips.';
         // highest authority is displayed
         if (this.conversationMember.isInstructor) {
-            this.userIcon = faChalkboardTeacher;
+            this.userIcon = faUserGraduate;
             this.userTooltip = this.translateService.instant(toolTipTranslationPath + 'instructor');
         } else if (this.conversationMember.isEditor || this.conversationMember.isTeachingAssistant) {
             this.userIcon = faUserCheck;

src/main/webapp/app/shared/monaco-editor/model/actions/adapter/monaco-text-editor.adapter.ts

@@ -152,8 +152,8 @@ export class MonacoTextEditorAdapter implements TextEditor {
         return this.editor.getDomNode() ?? undefined;
     }
 
-    typeText(text: string) {
-        this.editor.trigger('MonacoTextEditorAdapter::typeText', 'type', { text });
+    triggerCompletion(): void {
+        this.editor.trigger('MonacoTextEditorAdapter::triggerCompletion', 'editor.action.triggerSuggest', {});
     }
 
     getTextAtRange(range: TextEditorRange): string {

src/main/webapp/app/shared/monaco-editor/model/actions/adapter/text-editor.interface.ts

@@ -42,10 +42,9 @@ export interface TextEditor {
     getDomNode(): HTMLElement | undefined;
 
     /**
-     * Types the given text into the editor as if the user had typed it, e.g. to trigger a completer registered in the editor.
-     * @param text The text to type into the editor.
+     * Triggers the completion in the editor, e.g. by showing a widget.
      */
-    typeText(text: string): void;
+    triggerCompletion(): void;
 
     /**
      * Retrieves the text at the given range in the editor.

src/main/webapp/app/shared/monaco-editor/model/actions/communication/channel-reference.action.ts

@@ -44,11 +44,12 @@ export class ChannelReferenceAction extends TextEditorAction {
     }
 
     /**
-     * Types the text '#' into the editor and focuses it. This will trigger the completion provider to show the available channels.
+     * Inserts the text '#' into the editor and focuses it. This method will trigger the completion provider to show the available channels.
      * @param editor The editor to type the text into.
      */
     run(editor: TextEditor) {
-        this.typeText(editor, ChannelReferenceAction.DEFAULT_INSERT_TEXT);
+        this.replaceTextAtCurrentSelection(editor, ChannelReferenceAction.DEFAULT_INSERT_TEXT);
+        editor.triggerCompletion();
         editor.focus();
     }
 

src/main/webapp/app/shared/monaco-editor/model/actions/communication/exercise-reference.action.ts

@@ -52,11 +52,12 @@ export class ExerciseReferenceAction extends TextEditorDomainActionWithOptions {
     }
 
     /**
-     * Types the text '/exercise' into the editor and focuses it. This will trigger the completion provider to show the available exercises.
-     * @param editor The editor to type the text into.
+     * Inserts the text '/exercise' into the editor and focuses it. This method will trigger the completion provider to show the available exercises.
+     * @param editor The editor to insert the text into.
      */
     run(editor: TextEditor): void {
-        this.typeText(editor, ExerciseReferenceAction.DEFAULT_INSERT_TEXT);
+        this.replaceTextAtCurrentSelection(editor, ExerciseReferenceAction.DEFAULT_INSERT_TEXT);
+        editor.triggerCompletion();
         editor.focus();
     }
 

src/main/webapp/app/shared/monaco-editor/model/actions/communication/user-mention.action.ts

@@ -45,11 +45,12 @@ export class UserMentionAction extends TextEditorAction {
     }
 
     /**
-     * Types the text '@' into the editor and focuses it. This will trigger the completion provider to show the available users.
-     * @param editor The editor to type the text into.
+     * Inserts the text '@' into the editor and focuses it. This method will trigger the completion provider to show the available users.
+     * @param editor The editor to insert the text into.
      */
     run(editor: TextEditor) {
-        this.typeText(editor, UserMentionAction.DEFAULT_INSERT_TEXT);
+        this.replaceTextAtCurrentSelection(editor, UserMentionAction.DEFAULT_INSERT_TEXT);
+        editor.triggerCompletion();
         editor.focus();
     }
 

src/main/webapp/app/shared/monaco-editor/model/actions/text-editor-action.model.ts

@@ -148,15 +148,6 @@ export abstract class TextEditorAction implements Disposable {
         return text.startsWith(openDelimiter) && text.endsWith(closeDelimiter) && text.length >= openDelimiter.length + closeDelimiter.length;
     }
 
-    /**
-     * Types the given text in the editor at the current cursor position. You can use this e.g. to trigger a suggestion.
-     * @param editor The editor to type the text in.
-     * @param text The text to type.
-     */
-    typeText(editor: TextEditor, text: string): void {
-        editor.typeText(text);
-    }
-
     /**
      * Replaces the text at the current selection with the given text. If there is no selection, the text is inserted at the current cursor position.
      * @param editor The editor to replace the text in.

src/main/webapp/i18n/de/metis.json

@@ -90,7 +90,9 @@
                 "TECH_SUPPORT": "Technische Hilfe",
                 "ORGANIZATION": "Organisation",
                 "RANDOM": "Sonstiges",
-                "ANNOUNCEMENT": "Ankündigung"
+                "ANNOUNCEMENT": "Ankündigung",
+                "allPublicMessages": "Alle öffentlichen Nachrichten",
+                "searchResults": "Suchergebnisse für {{ search }}"
             },
             "post": {
                 "context": "Kontext",

src/main/webapp/i18n/en/metis.json

@@ -90,7 +90,9 @@
                 "TECH_SUPPORT": "Tech Support",
                 "ORGANIZATION": "Organization",
                 "RANDOM": "Random",
-                "ANNOUNCEMENT": "Announcement"
+                "ANNOUNCEMENT": "Announcement",
+                "allPublicMessages": "All Public Messages",
+                "searchResults": "Search Results for '{{ search }}'"
             },
             "post": {
                 "context": "Context",