Integrated code lifecycle: Add editing of auxiliary repositories in the online code editor for instructors

src/main/java/de/tum/cit/aet/artemis/programming/repository/ProgrammingExerciseRepository.java

@@ -776,8 +776,10 @@ default ProgrammingExercise findByIdWithTemplateAndSolutionParticipationLatestRe
                 programmingExerciseId);
         ProgrammingExercise programmingExerciseWithSolution = getValueElseThrow(findWithSolutionParticipationLatestResultFeedbackTestCasesById(programmingExerciseId),
                 programmingExerciseId);
+        ProgrammingExercise programmingExerciseWithAuxiliaryRepositories = findByIdWithAuxiliaryRepositoriesElseThrow(programmingExerciseId);
 
         programmingExerciseWithTemplate.setSolutionParticipation(programmingExerciseWithSolution.getSolutionParticipation());
+        programmingExerciseWithTemplate.setAuxiliaryRepositories(programmingExerciseWithAuxiliaryRepositories.getAuxiliaryRepositories());
 
         return programmingExerciseWithTemplate;
     }

src/main/webapp/app/exercises/programming/manage/code-editor/code-editor-instructor-and-editor-container.component.html

@@ -37,7 +37,9 @@
             />
             <!-- repository select -->
             <div ngbDropdown class="d-inline-block me-2">
-                <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>{{ selectedRepository }}</button>
+                <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
+                    {{ selectedRepository === REPOSITORY.AUXILIARY ? selectedAuxiliaryRepositoryName : selectedRepository }}
+                </button>
                 <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                     <button
                         [disabled]="!exercise || !exercise.templateParticipation || !exercise.templateParticipation.id || !exercise.templateParticipation.repositoryUri"
@@ -79,6 +81,20 @@
                         [style.background-color]="selectedRepository === REPOSITORY.TEST ? '#3e8acc' : 'transparent'"
                         jhiTranslate="artemisApp.editor.repoSelect.testRepo"
                     ></button>
+                    @for (auxiliaryRepository of exercise.auxiliaryRepositories; track exercise.auxiliaryRepositories; let i = $index) {
+                        @if (auxiliaryRepository.id) {
+                            <button
+                                [disabled]="!exercise"
+                                (click)="selectAuxiliaryRepository(auxiliaryRepository.id)"
+                                ngbDropdownItem
+                                [style.background-color]="
+                                    selectedRepository === REPOSITORY.AUXILIARY && selectedRepositoryId === auxiliaryRepository.id ? '#3e8acc' : 'transparent'
+                                "
+                            >
+                                {{ auxiliaryRepository.name }}
+                            </button>
+                        }
+                    }
                 </div>
             </div>
             <!-- action buttons -->

src/main/webapp/app/exercises/programming/manage/code-editor/code-editor-instructor-and-editor-container.component.ts

@@ -17,6 +17,7 @@ import { IrisSettings } from 'app/entities/iris/settings/iris-settings.model';
 @Component({
     selector: 'jhi-code-editor-instructor',
     templateUrl: './code-editor-instructor-and-editor-container.component.html',
+    styleUrl: 'code-editor-instructor-and-editor-container.scss',
 })
 export class CodeEditorInstructorAndEditorContainerComponent extends CodeEditorInstructorBaseContainerComponent {
     @ViewChild(UpdatingResultComponent, { static: false }) resultComp: UpdatingResultComponent;

src/main/webapp/app/exercises/programming/manage/code-editor/code-editor-instructor-and-editor-container.scss

@@ -0,0 +1,3 @@
+.btn-outline-primary:not(.list-group-item).dropdown-toggle.show {
+    color: var(--default-btn-font);
+}

src/main/webapp/app/exercises/programming/manage/code-editor/code-editor-instructor-base-container.component.ts

@@ -28,6 +28,7 @@ export enum REPOSITORY {
     TEMPLATE = 'TEMPLATE',
     SOLUTION = 'SOLUTION',
     TEST = 'TEST',
+    AUXILIARY = 'AUXILIARY',
 }
 
 /**
@@ -64,6 +65,8 @@ export abstract class CodeEditorInstructorBaseContainerComponent implements OnIn
     // Stores which repository is selected atm.
     // Needs to be set additionally to selectedParticipation as the test repository does not have a participation
     selectedRepository: REPOSITORY;
+    selectedRepositoryId: number;
+    selectedAuxiliaryRepositoryName?: string;
 
     // Fires when the selected domain changes.
     // This can either be a participation (solution, template, assignment) or the test repository.
@@ -95,6 +98,7 @@ export abstract class CodeEditorInstructorBaseContainerComponent implements OnIn
         this.paramSub = this.route!.params.subscribe((params) => {
             const exerciseId = Number(params['exerciseId']);
             const participationId = Number(params['participationId']);
+            const repositoryId = Number(params['repositoryId']);
             this.loadingState = LOADING_STATE.INITIALIZING;
             this.loadExercise(exerciseId)
                 .pipe(
@@ -107,6 +111,12 @@ export abstract class CodeEditorInstructorBaseContainerComponent implements OnIn
                     tap(() => {
                         if (this.router.url.endsWith('/test')) {
                             this.saveChangesAndSelectDomain([DomainType.TEST_REPOSITORY, this.exercise]);
+                        } else if (this.router.url.indexOf('auxiliary') >= 0) {
+                            const auxiliaryRepo = this.exercise.auxiliaryRepositories?.find((repo) => repo.id === repositoryId);
+                            if (auxiliaryRepo) {
+                                this.selectedAuxiliaryRepositoryName = auxiliaryRepo.name;
+                                this.saveChangesAndSelectDomain([DomainType.AUXILIARY_REPOSITORY, auxiliaryRepo]);
+                            }
                         } else {
                             const nextAvailableParticipation = this.getNextAvailableParticipation(participationId);
                             if (nextAvailableParticipation) {
@@ -190,7 +200,10 @@ export abstract class CodeEditorInstructorBaseContainerComponent implements OnIn
         if (this.codeEditorContainer != undefined) {
             this.codeEditorContainer.initializeProperties();
         }
-        if (domainType === DomainType.PARTICIPATION) {
+        if (domainType === DomainType.AUXILIARY_REPOSITORY) {
+            this.selectedRepository = REPOSITORY.AUXILIARY;
+            this.selectedRepositoryId = domainValue.id;
+        } else if (domainType === DomainType.PARTICIPATION) {
             this.setSelectedParticipation(domainValue.id);
         } else {
             this.selectedParticipation = this.exercise.templateParticipation!;
@@ -272,28 +285,42 @@ export abstract class CodeEditorInstructorBaseContainerComponent implements OnIn
      * Select the template participation repository and navigate to it
      */
     selectTemplateParticipation() {
-        this.router.navigate(['..', this.exercise.templateParticipation!.id], { relativeTo: this.route });
+        this.router.navigate([this.up(), this.exercise.templateParticipation!.id], { relativeTo: this.route });
     }
 
     /**
      * Select the solution participation repository and navigate to it
      */
     selectSolutionParticipation() {
-        this.router.navigate(['..', this.exercise.solutionParticipation!.id], { relativeTo: this.route });
+        this.router.navigate([this.up(), this.exercise.solutionParticipation!.id], { relativeTo: this.route });
     }
 
     /**
      * Select the assignment participation repository and navigate to it
      */
     selectAssignmentParticipation() {
-        this.router.navigate(['..', this.exercise.studentParticipations![0].id], { relativeTo: this.route });
+        this.router.navigate([this.up(), this.exercise.studentParticipations![0].id], { relativeTo: this.route });
     }
 
     /**
      * Select the test repository and navigate to it
      */
     selectTestRepository() {
-        this.router.navigate(['..', 'test'], { relativeTo: this.route });
+        this.router.navigate([this.up(), 'test'], { relativeTo: this.route });
+    }
+
+    /**
+     * Select the auxiliary repository and navigate to it
+     */
+    selectAuxiliaryRepository(repositoryId: number) {
+        this.router.navigate([this.up(), 'auxiliary', repositoryId], { relativeTo: this.route });
+    }
+
+    /**
+     * Go two folders up if the current view is an auxiliary repository, and one otherwise
+     */
+    up() {
+        return this.selectedRepository === REPOSITORY.AUXILIARY ? '../..' : '..';
     }
 
     /**

src/main/webapp/app/exercises/programming/manage/code-editor/code-editor-management-routing.module.ts

@@ -54,6 +54,18 @@ const routes: Routes = [
         },
         canActivate: [UserRouteAccessService],
     },
+    {
+        path: 'auxiliary/:repositoryId',
+        component: CodeEditorInstructorAndEditorContainerComponent,
+        data: {
+            authorities: [Authority.EDITOR, Authority.INSTRUCTOR, Authority.ADMIN],
+            pageTitle: 'artemisApp.editor.home.title',
+            flushRepositoryCacheAfter: 900000, // 15 min
+            participationCache: {},
+            repositoryCache: {},
+        },
+        canActivate: [UserRouteAccessService],
+    },
 ];
 
 @NgModule({