Programming exercises: Add simple mode to create and edit view

README.md

@@ -193,7 +193,7 @@ Refer to [Using JHipster in production](http://www.jhipster.tech/production) for
 The following command can automate the deployment to a server. The example shows the deployment to the main Artemis test server (which runs a virtual machine):
 
 ```shell
-./artemis-server-cli deploy [email protected] -w build/libs/Artemis-7.6.0.war
+./artemis-server-cli deploy [email protected] -w build/libs/Artemis-7.6.1.war
 ```
 
 ## Architecture

build.gradle

@@ -25,7 +25,7 @@ plugins {
 }
 
 group = "de.tum.cit.aet.artemis"
-version = "7.6.0"
+version = "7.6.1"
 description = "Interactive Learning with Individual Feedback"
 
 java {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "artemis",
-    "version": "7.6.0",
+    "version": "7.6.1",
     "description": "Interactive Learning with Individual Feedback",
     "private": true,
     "license": "MIT",

src/main/webapp/app/exercises/shared/result/result.component.html

@@ -61,7 +61,7 @@
                         </span>
                     }
                     @if (!isInSidebarCard) {
-                        <span [ngbTooltip]="result!.completionDate | artemisDate"> ({{ result!.completionDate | artemisTimeAgo }} ) </span>
+                        <span [ngbTooltip]="result!.completionDate | artemisDate"> ({{ result!.completionDate | artemisTimeAgo }}) </span>
                     }
                 </span>
                 @if (hasBuildArtifact() && participation.type === ParticipationType.PROGRAMMING) {

src/main/webapp/app/overview/course-conversations/course-conversations.component.ts

@@ -156,11 +156,11 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
                 this.subscribeToIsCodeOfConductAccepted();
                 this.subscribeToIsCodeOfConductPresented();
                 this.subscribeToConversationsOfUser();
-                this.subscribeToLoading();
                 this.updateQueryParameters();
                 this.prepareSidebarData();
                 this.metisConversationService.checkIsCodeOfConductAccepted(this.course!);
                 this.isServiceSetUp = true;
+                this.isLoading = false;
             }
         });
 
@@ -224,12 +224,6 @@ export class CourseConversationsComponent implements OnInit, OnDestroy {
         });
     }
 
-    private subscribeToLoading() {
-        this.metisConversationService.isLoading$.pipe(takeUntil(this.ngUnsubscribe)).subscribe((isLoading: boolean) => {
-            this.isLoading = isLoading;
-        });
-    }
-
     acceptCodeOfConduct() {
         if (this.course) {
             this.metisConversationService.acceptCodeOfConduct(this.course);

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html

@@ -67,8 +67,9 @@
                 <div
                     id="scrollableDiv"
                     #container
-                    [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0, 'content-height-dev': contentHeightDev }"
+                    [ngClass]="{ 'posting-infinite-scroll-container': posts.length !== 0, 'content-height-dev': contentHeightDev, 'is-fetching-posts': isFetchingPosts }"
                     infinite-scroll
+                    class="conversation-messages-message-list"
                     [scrollWindow]="false"
                     (scrolledUp)="fetchNextPage()"
                 >

src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss

@@ -59,4 +59,8 @@
         padding-top: 100px;
         padding-bottom: 100px;
     }
+
+    .conversation-messages-message-list.is-fetching-posts {
+        display: none;
+    }
 }

src/main/webapp/app/overview/course-faq/course-faq.component.html

@@ -27,9 +27,15 @@
         </div>
     </div>
     <hr class="" />
+    @if (faqs.length === 0) {
+        <h2 class="markdown-preview" jhiTranslate="artemisApp.faq.noExisting"></h2>
+    }
     <div>
         @for (faq of this.filteredFaqs; track faq) {
             <jhi-course-faq-accordion [faq]="faq"></jhi-course-faq-accordion>
         }
     </div>
+    @if (filteredFaqs.length === 0 && faqs.length > 0) {
+        <h2 class="markdown-preview" jhiTranslate="artemisApp.faq.noMatching"></h2>
+    }
 </div>

src/main/webapp/app/overview/course-faq/course-faq.component.ts

@@ -16,14 +16,15 @@ import { loadCourseFaqCategories } from 'app/faq/faq.utils';
 import { CustomExerciseCategoryBadgeComponent } from 'app/shared/exercise-categories/custom-exercise-category-badge/custom-exercise-category-badge.component';
 import { onError } from 'app/shared/util/global.utils';
 import { SearchFilterComponent } from 'app/shared/search-filter/search-filter.component';
+import { ArtemisMarkdownModule } from 'app/shared/markdown.module';
 
 @Component({
     selector: 'jhi-course-faq',
     templateUrl: './course-faq.component.html',
     styleUrls: ['../course-overview.scss', 'course-faq.component.scss'],
     encapsulation: ViewEncapsulation.None,
     standalone: true,
-    imports: [ArtemisSharedComponentModule, ArtemisSharedModule, CourseFaqAccordionComponent, CustomExerciseCategoryBadgeComponent, SearchFilterComponent],
+    imports: [ArtemisSharedComponentModule, ArtemisSharedModule, CourseFaqAccordionComponent, CustomExerciseCategoryBadgeComponent, SearchFilterComponent, ArtemisMarkdownModule],
 })
 export class CourseFaqComponent implements OnInit, OnDestroy {
     private ngUnsubscribe = new Subject<void>();

src/main/webapp/app/overview/exercise-details/request-feedback-button/request-feedback-button.component.html

@@ -1,4 +1,4 @@
-@if (!isExamExercise) {
+@if (!isExamExercise && requestFeedbackEnabled) {
     @if (athenaEnabled) {
         @if (exercise().type === ExerciseType.TEXT) {
             <button

src/main/webapp/app/overview/exercise-details/request-feedback-button/request-feedback-button.component.ts

@@ -26,6 +26,7 @@ import { ParticipationService } from 'app/exercises/shared/participation/partici
 export class RequestFeedbackButtonComponent implements OnInit {
     faPenSquare = faPenSquare;
     athenaEnabled = false;
+    requestFeedbackEnabled = false;
     isExamExercise: boolean;
     participation?: StudentParticipation;
 
@@ -34,7 +35,6 @@ export class RequestFeedbackButtonComponent implements OnInit {
     exercise = input.required<Exercise>();
     generatingFeedback = output<void>();
 
-    private feedbackSent = false;
     private profileService = inject(ProfileService);
     private alertService = inject(AlertService);
     private courseExerciseService = inject(CourseExerciseService);
@@ -52,6 +52,7 @@ export class RequestFeedbackButtonComponent implements OnInit {
         if (this.isExamExercise || !this.exercise().id) {
             return;
         }
+        this.requestFeedbackEnabled = this.exercise().allowFeedbackRequests ?? false;
         this.updateParticipation();
     }
 
@@ -77,7 +78,6 @@ export class RequestFeedbackButtonComponent implements OnInit {
             next: (participation: StudentParticipation) => {
                 if (participation) {
                     this.generatingFeedback.emit();
-                    this.feedbackSent = true;
                     this.alertService.success('artemisApp.exercise.feedbackRequestSent');
                 }
             },

src/main/webapp/app/shared/monaco-editor/model/themes/editor-colors.interface.ts

@@ -0,0 +1,86 @@
+/**
+ * Interface for the colors of the editor.
+ * See https://code.visualstudio.com/api/references/theme-color
+ * All colors must be in the format '#RRGGBB' or '#RRGGBBAA'.
+ */
+export interface EditorColors {
+    /**
+     * The background color of the editor.
+     */
+    backgroundColor?: string;
+    /**
+     * The default color of all text in the editor, not including syntax highlighting.
+     */
+    foregroundColor?: string;
+    /**
+     * Colors for line numbers in the editor.
+     */
+    lineNumbers?: {
+        /**
+         * The color of the line numbers.
+         */
+        foregroundColor?: string;
+        /**
+         * The color of the line number of the line that the cursor is on.
+         */
+        activeForegroundColor?: string;
+        /**
+         * The color of the line numbers for dimmed lines. This is used for the final newline of the code.
+         */
+        dimmedForegroundColor?: string;
+    };
+    /**
+     * Colors for the active line highlight in the editor.
+     */
+    lineHighlight?: {
+        /**
+         * The color used as the background color for the cursor's current line.
+         */
+        backgroundColor?: string;
+        /**
+         * The color used for the border of the cursor's current line.
+         */
+        borderColor?: string;
+    };
+    /**
+     * Colors for the diff editor.
+     */
+    diff?: {
+        /**
+         * The background color for inserted lines in the diff editor.
+         */
+        insertedLineBackgroundColor?: string;
+        /**
+         * The background color for inserted text in the diff editor.
+         * This will overlap with the `insertedLineBackgroundColor`.
+         */
+        insertedTextBackgroundColor?: string;
+        /**
+         * The background color for removed lines in the diff editor.
+         */
+        removedTextBackgroundColor?: string;
+        /**
+         * The background color for removed text in the diff editor.
+         * This will overlap with the `removedLineBackgroundColor`.
+         */
+        removedLineBackgroundColor?: string;
+        /**
+         * The color used for the diagonal fill in the diff editor.
+         * This is used when the diff editor pads the length of the files to align the lines of the original and modified files.
+         */
+        diagonalFillColor?: string;
+        /**
+         * Colors for the diff editor gutter. This is the area to the left of the editor that shows the line numbers.
+         */
+        gutter?: {
+            /**
+             * The background color for inserted lines in the diff editor gutter.
+             */
+            insertedLineBackgroundColor?: string;
+            /**
+             * The background color for removed lines in the diff editor gutter.
+             */
+            removedLineBackgroundColor?: string;
+        };
+    };
+}

src/main/webapp/app/shared/monaco-editor/model/themes/language-token-style-definition.interface.ts

@@ -0,0 +1,27 @@
+/**
+ * Interface for the style of a token in a language.
+ * The editor applies these styles to the tokens in the specified language (or all languages), e.g. identifiers, keywords, etc.
+ */
+export interface LanguageTokenStyleDefinition {
+    /**
+     * The token to style, e.g. identifier
+     */
+    token: string;
+    /**
+     * The language ID for which the token style should be applied.
+     * If not specified, the style is applied to all languages.
+     */
+    languageId?: string;
+    /**
+     * The color of the text that should be applied to the token.
+     */
+    foregroundColor?: string;
+    /**
+     * The background color that should be applied to the token.
+     */
+    backgroundColor?: string;
+    /**
+     * The font style that should be applied to the token.
+     */
+    fontStyle?: 'italic' | 'bold' | 'underline';
+}

src/main/webapp/app/shared/monaco-editor/model/themes/monaco-dark.theme.ts

@@ -0,0 +1,47 @@
+import { MonacoThemeDefinition } from 'app/shared/monaco-editor/model/themes/monaco-theme-definition.interface';
+
+export const MONACO_DARK_THEME_DEFINITION: MonacoThemeDefinition = {
+    id: 'custom-dark',
+    baseTheme: 'vs-dark',
+    tokenStyles: [
+        {
+            token: 'keyword',
+            foregroundColor: '#ff7b72',
+        },
+        {
+            token: 'comment',
+            foregroundColor: '#9198a1',
+        },
+        {
+            token: 'string',
+            foregroundColor: '#a5d6ff',
+        },
+        {
+            token: 'number',
+            foregroundColor: '#79c0ff',
+        },
+    ],
+    editorColors: {
+        backgroundColor: '#181a18',
+        lineHighlight: {
+            borderColor: '#00000000',
+            backgroundColor: '#282a2e',
+        },
+        lineNumbers: {
+            foregroundColor: '#ffffff',
+            activeForegroundColor: '#ffffff',
+            dimmedForegroundColor: '#ffffff',
+        },
+        diff: {
+            insertedLineBackgroundColor: '#2ea04326',
+            insertedTextBackgroundColor: '#2ea04326',
+            removedLineBackgroundColor: '#f8514926',
+            removedTextBackgroundColor: '#f8514946',
+            diagonalFillColor: '#00000000',
+            gutter: {
+                insertedLineBackgroundColor: '#3fb9504d',
+                removedLineBackgroundColor: '#f851494d',
+            },
+        },
+    },
+};

src/main/webapp/app/shared/monaco-editor/model/themes/monaco-editor-theme.model.ts

@@ -0,0 +1,66 @@
+import { MonacoThemeDefinition } from 'app/shared/monaco-editor/model/themes/monaco-theme-definition.interface';
+import * as monaco from 'monaco-editor';
+
+export class MonacoEditorTheme {
+    constructor(private readonly themeDefinition: MonacoThemeDefinition) {}
+
+    getId(): string {
+        return this.themeDefinition.id;
+    }
+
+    /**
+     * Creates a new record without any entries that have a value of `undefined`.
+     * @param record The record whose keys to filter.
+     * @returns The new record, only containing keys with defined values.
+     * @private
+     */
+    private getRecordWithoutUndefinedEntries(record: Record<string, string | undefined>): Record<string, string> {
+        const result: Record<string, string> = {};
+        for (const [key, value] of Object.entries(record)) {
+            if (value !== undefined) {
+                result[key] = value;
+            }
+        }
+        return result;
+    }
+
+    register(): void {
+        const colorDefinitions = this.themeDefinition.editorColors;
+        // The color keys are available here: https://code.visualstudio.com/api/references/theme-color
+        const colors = {
+            'editor.background': colorDefinitions.backgroundColor,
+            'editor.foreground': colorDefinitions.foregroundColor,
+            'editorLineNumber.foreground': colorDefinitions.lineNumbers?.foregroundColor,
+            'editorLineNumber.activeForeground': colorDefinitions.lineNumbers?.activeForegroundColor,
+            'editorLineNumber.dimmedForeground': colorDefinitions.lineNumbers?.dimmedForegroundColor,
+            'editor.lineHighlightBackground': colorDefinitions.lineHighlight?.backgroundColor,
+            'editor.lineHighlightBorder': colorDefinitions.lineHighlight?.borderColor,
+            'diffEditor.insertedLineBackground': colorDefinitions.diff?.insertedLineBackgroundColor,
+            'diffEditor.insertedTextBackground': colorDefinitions.diff?.insertedTextBackgroundColor,
+            'diffEditor.removedTextBackground': colorDefinitions.diff?.removedTextBackgroundColor,
+            'diffEditor.removedLineBackground': colorDefinitions.diff?.removedLineBackgroundColor,
+            'diffEditor.diagonalFill': colorDefinitions.diff?.diagonalFillColor,
+            'diffEditorGutter.insertedLineBackground': colorDefinitions.diff?.gutter?.insertedLineBackgroundColor,
+            'diffEditorGutter.removedLineBackground': colorDefinitions.diff?.gutter?.removedLineBackgroundColor,
+        };
+
+        const tokenStyleDefinitions = this.themeDefinition.tokenStyles;
+        const rules = tokenStyleDefinitions.map((tokenDefinition) => {
+            // Language-specific tokens have the key `token.languageId`, e.g. keyword.custom-md
+            return {
+                token: `${tokenDefinition.token}${tokenDefinition.languageId ? '.' + tokenDefinition.languageId : ''}`,
+                foreground: tokenDefinition.foregroundColor,
+                background: tokenDefinition.backgroundColor,
+                fontStyle: tokenDefinition.fontStyle,
+            };
+        });
+
+        // We cannot pass undefined colors to Monaco, so we filter them out to preserve the default values.
+        monaco.editor.defineTheme(this.getId(), {
+            base: this.themeDefinition.baseTheme,
+            inherit: true,
+            rules: rules,
+            colors: this.getRecordWithoutUndefinedEntries(colors),
+        });
+    }
+}