General: Improve exercise view when using LTI

src/main/webapp/app/lti/lti13-exercise-launch.component.ts

@@ -4,6 +4,8 @@ import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { AccountService } from 'app/core/auth/account.service';
 import { captureException } from '@sentry/angular';
 import { SessionStorageService } from 'ngx-webstorage';
+import { LtiService } from 'app/shared/service/lti.service';
+import { Theme, ThemeService } from 'app/core/theme/theme.service';
 
 type LtiLaunchResponse = {
     targetLinkUri: string;
@@ -24,6 +26,8 @@ export class Lti13ExerciseLaunchComponent implements OnInit {
         private accountService: AccountService,
         private router: Router,
         private sessionStorageService: SessionStorageService,
+        private ltiService: LtiService,
+        private themeService: ThemeService,
     ) {
         this.isLaunching = true;
     }
@@ -142,6 +146,10 @@ export class Lti13ExerciseLaunchComponent implements OnInit {
     }
 
     replaceWindowLocationWrapper(url: string): void {
-        window.location.replace(url);
+        this.ltiService.setLti(true);
+        this.themeService.applyThemeExplicitly(Theme.LIGHT);
+        const path = new URL(url).pathname;
+
+        this.router.navigate([path], { replaceUrl: true });
     }
 }

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

@@ -1,11 +1,11 @@
 <div class="d-flex justify-content-between horizontal-scroll">
     @if (course) {
-        <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }">
+        <div [ngClass]="{ 'sidebar-collapsed': isCollapsed }" *ngIf="!isLti">
             <jhi-sidebar [itemSelected]="exerciseSelected" [courseId]="courseId" [sidebarData]="sidebarData" [collapseState]="DEFAULT_COLLAPSE_STATE" [showFilter]="true" />
         </div>
 
         @if (exerciseSelected) {
-            <div class="vw-100 module-bg rounded-3">
+            <div class="vw-100 module-bg rounded-3" [ngStyle]="isLti ? { height: '90vh', position: 'relative' } : {}">
                 <router-outlet (deactivate)="onSubRouteDeactivate()" />
             </div>
         } @else {

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

@@ -9,6 +9,7 @@ import { Exercise } from 'app/entities/exercise.model';
 import { CourseStorageService } from 'app/course/manage/course-storage.service';
 import { AccordionGroups, CollapseState, SidebarCardElement, SidebarData } from 'app/types/sidebar';
 import { CourseOverviewService } from '../course-overview.service';
+import { LtiService } from 'app/shared/service/lti.service';
 
 const DEFAULT_UNIT_GROUPS: AccordionGroups = {
     future: { entityData: [] },
@@ -34,6 +35,7 @@ const DEFAULT_COLLAPSE_STATE: CollapseState = {
 export class CourseExercisesComponent implements OnInit, OnDestroy {
     private parentParamSubscription: Subscription;
     private courseUpdatesSubscription: Subscription;
+    private ltiSubscription: Subscription;
 
     course?: Course;
     courseId: number;
@@ -46,6 +48,7 @@ export class CourseExercisesComponent implements OnInit, OnDestroy {
     sidebarExercises: SidebarCardElement[] = [];
     isCollapsed: boolean = false;
     readonly DEFAULT_COLLAPSE_STATE = DEFAULT_COLLAPSE_STATE;
+    isLti: boolean = false;
 
     constructor(
         private courseStorageService: CourseStorageService,
@@ -54,6 +57,7 @@ export class CourseExercisesComponent implements OnInit, OnDestroy {
         private programmingSubmissionService: ProgrammingSubmissionService,
         private router: Router,
         private courseOverviewService: CourseOverviewService,
+        private ltiService: LtiService,
     ) {}
 
     ngOnInit() {
@@ -74,6 +78,10 @@ export class CourseExercisesComponent implements OnInit, OnDestroy {
 
         this.exerciseForGuidedTour = this.guidedTourService.enableTourForCourseExerciseComponent(this.course, courseExerciseOverviewTour, true);
 
+        this.ltiSubscription = this.ltiService.isLti$.subscribe((isLti) => {
+            this.isLti = isLti;
+        });
+
         // If no exercise is selected navigate to the lastSelected or upcoming exercise
         this.navigateToExercise();
     }
@@ -143,5 +151,6 @@ export class CourseExercisesComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void {
         this.courseUpdatesSubscription?.unsubscribe();
         this.parentParamSubscription?.unsubscribe();
+        this.ltiSubscription?.unsubscribe();
     }
 }

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

@@ -66,6 +66,7 @@ import { ExamParticipationService } from 'app/exam/participate/exam-participatio
 import { CourseConversationsComponent } from 'app/overview/course-conversations/course-conversations.component';
 import { sortCourses } from 'app/shared/util/course.util';
 import { CourseUnenrollmentModalComponent } from './course-unenrollment-modal.component';
+import { LtiService } from 'app/shared/service/lti.service';
 
 interface CourseActionItem {
     title: string;
@@ -124,6 +125,8 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
     isExamStarted = false;
     private examStartedSubscription: Subscription;
     readonly MIN_DISPLAYED_COURSES: number = 6;
+    isLti: boolean = false;
+    private ltiSubscription: Subscription;
 
     // Properties to track hidden items for dropdown menu
     dropdownOpen: boolean = false;
@@ -199,6 +202,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         private profileService: ProfileService,
         private modalService: NgbModal,
         private examParticipationService: ExamParticipationService,
+        private ltiService: LtiService,
     ) {}
 
     async ngOnInit() {
@@ -234,13 +238,18 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         this.updateVisibleNavbarItems(window.innerHeight);
         await this.updateRecentlyAccessedCourses();
         this.isSidebarCollapsed = this.activatedComponentReference?.isCollapsed ?? false;
+        this.ltiSubscription = this.ltiService.isLti$.subscribe((isLti) => {
+            this.isLti = isLti;
+        });
     }
 
     /** Listen window resize event by height */
     @HostListener('window: resize', ['$event'])
     onResize() {
-        this.updateVisibleNavbarItems(window.innerHeight);
-        if (!this.anyItemHidden) this.itemsDrop.close();
+        if (this.itemsDrop) {
+            this.updateVisibleNavbarItems(window.innerHeight);
+            if (!this.anyItemHidden) this.itemsDrop.close();
+        }
     }
 
     /** Update sidebar item's hidden property based on the window height to display three-dots */
@@ -740,6 +749,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit
         this.dashboardSubscription?.unsubscribe();
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
+        this.ltiSubscription?.unsubscribe();
     }
 
     subscribeForQuizChanges() {

src/main/webapp/app/shared/layouts/main/main.component.html

@@ -2,12 +2,12 @@
 <div
     id="page-wrapper"
     class="page-wrapper"
-    [ngClass]="{ 'footer-height-dev': !isProduction || isTestServer }"
+    [ngClass]="{ 'footer-height-dev': !isProduction || isTestServer, 'no-padding': isLti }"
     [ngStyle]="{ 'overflow-y': !isTestRunExam && isExamStarted ? 'hidden' : 'auto' }"
     cdkScrollable
 >
     <jhi-page-ribbon />
-    @if (showSkeleton) {
+    @if (showSkeleton && !isLti) {
         <div class="sticky-top">
             <router-outlet name="navbar" />
         </div>
@@ -23,7 +23,7 @@
         <router-outlet />
     }
     <jhi-notification-popup />
-    @if (showSkeleton) {
+    @if (showSkeleton && !isLti) {
         <div>
             @if (isTestRunExam || !isExamStarted) {
                 <jhi-footer [ngClass]="{ 'footer-height-dev': !isProduction || isTestServer }" />

src/main/webapp/app/shared/layouts/main/main.component.ts

@@ -8,7 +8,8 @@ import { DOCUMENT } from '@angular/common';
 import { AnalyticsService } from 'app/core/posthog/analytics.service';
 import { Subscription } from 'rxjs';
 import { ExamParticipationService } from 'app/exam/participate/exam-participation.service';
-import { CourseManagementService } from '../../../course/manage/course-management.service';
+import { CourseManagementService } from 'app/course/manage/course-management.service';
+import { LtiService } from 'app/shared/service/lti.service';
 
 @Component({
     selector: 'jhi-main',
@@ -26,11 +27,13 @@ export class JhiMainComponent implements OnInit, OnDestroy {
     examStartedSubscription: Subscription;
     courseOverviewSubscription: Subscription;
     testRunSubscription: Subscription;
+    ltiSubscription: Subscription;
     isProduction: boolean = true;
     isTestServer: boolean = false;
     isExamStarted: boolean = false;
     isTestRunExam: boolean = false;
     isCourseOverview: boolean = false;
+    isLti: boolean = false;
 
     constructor(
         private jhiLanguageHelper: JhiLanguageHelper,
@@ -44,6 +47,7 @@ export class JhiMainComponent implements OnInit, OnDestroy {
         private document: Document,
         private renderer: Renderer2,
         private courseService: CourseManagementService,
+        private ltiService: LtiService,
     ) {
         this.setupErrorHandling().then(undefined);
         this.setupAnalytics().then(undefined);
@@ -120,6 +124,10 @@ export class JhiMainComponent implements OnInit, OnDestroy {
             this.isCourseOverview = isPresent;
         });
 
+        this.ltiSubscription = this.ltiService.isLti$.subscribe((isLti) => {
+            this.isLti = isLti;
+        });
+
         this.themeService.initialize();
     }
 
@@ -138,5 +146,6 @@ export class JhiMainComponent implements OnInit, OnDestroy {
         this.examStartedSubscription?.unsubscribe();
         this.testRunSubscription?.unsubscribe();
         this.courseOverviewSubscription?.unsubscribe();
+        this.ltiSubscription?.unsubscribe();
     }
 }

src/main/webapp/app/shared/service/lti.service.ts

@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class LtiService {
+    constructor() {}
+    private ltiSubject = new BehaviorSubject<boolean>(false);
+    isLti$ = this.ltiSubject.asObservable();
+
+    setLti(isLti: boolean) {
+        this.ltiSubject.next(isLti);
+    }
+}

src/test/javascript/spec/component/course/course-overview.component.spec.ts

@@ -215,6 +215,7 @@ describe('CourseOverviewComponent', () => {
                 fixture = TestBed.createComponent(CourseOverviewComponent);
 
                 component = fixture.componentInstance;
+                component.isLti = false;
                 courseService = TestBed.inject(CourseManagementService);
                 courseStorageService = TestBed.inject(CourseStorageService);
                 examParticipationService = TestBed.inject(ExamParticipationService);
@@ -646,14 +647,18 @@ describe('CourseOverviewComponent', () => {
     });
 
     it('should display content of dropdown when dropdownOpen changes', () => {
-        itemsDrop.open();
-        fixture.detectChanges();
-        expect(component.itemsDrop.isOpen).toBeTrue();
+        if (component.itemsDrop) {
+            itemsDrop.open();
+            fixture.detectChanges();
+            expect(component.itemsDrop.isOpen).toBeTrue();
+        }
     });
     it('should hide content of dropdown when dropdownOpen changes', () => {
-        itemsDrop.close();
-        fixture.detectChanges();
-        expect(component.itemsDrop.isOpen).toBeFalse();
+        if (component.itemsDrop) {
+            itemsDrop.close();
+            fixture.detectChanges();
+            expect(component.itemsDrop.isOpen).toBeFalse();
+        }
     });
 
     it('should display more icon and label if at least one item gets hidden in the sidebar', () => {
@@ -667,11 +672,13 @@ describe('CourseOverviewComponent', () => {
     });
 
     it('should change dropdownOpen when clicking on More', () => {
-        itemsDrop.close();
-        const clickOnMoreItem = fixture.nativeElement.querySelector('.three-dots');
-        clickOnMoreItem.click();
+        if (component.itemsDrop) {
+            itemsDrop.close();
+            const clickOnMoreItem = fixture.nativeElement.querySelector('.three-dots');
+            clickOnMoreItem.click();
 
-        expect(fixture.nativeElement.querySelector('.dropdown-content').hidden).toBeFalse();
+            expect(fixture.nativeElement.querySelector('.dropdown-content').hidden).toBeFalse();
+        }
     });
 
     it('should apply exam-wrapper and exam-is-active if exam is started', () => {