Programming exercises: Improve details page layout

src/main/webapp/app/exercises/programming/manage/programming-exercise-detail.component.ts

@@ -270,6 +270,7 @@ export class ProgrammingExerciseDetailComponent implements OnInit, OnDestroy {
         exercise.buildConfig = this.programmingExerciseBuildConfig;
         return [
             this.getExerciseDetailsGeneralSection(exercise),
+            this.getExerciseDetailsBuildDetailsSection(exercise),
             this.getExerciseDetailsModeSection(exercise),
             this.getExerciseDetailsLanguageSection(exercise),
             this.getExerciseDetailsProblemSection(exercise),
@@ -310,54 +311,10 @@ export class ProgrammingExerciseDetailComponent implements OnInit, OnDestroy {
         };
     }
 
-    getExerciseDetailsModeSection(exercise: ProgrammingExercise): DetailOverviewSection {
+    getExerciseDetailsBuildDetailsSection(exercise: ProgrammingExercise): DetailOverviewSection {
         return {
-            headline: 'artemisApp.programmingExercise.wizardMode.detailedSteps.difficultyStepTitle',
+            headline: 'artemisApp.programmingExercise.wizardMode.detailedSteps.buildDetailsStepTitle',
             details: [
-                {
-                    type: DetailType.Text,
-                    title: 'artemisApp.exercise.difficulty',
-                    data: { text: exercise.difficulty },
-                },
-                {
-                    type: DetailType.Text,
-                    title: 'artemisApp.exercise.mode',
-                    data: { text: exercise.mode },
-                },
-                exercise.teamAssignmentConfig && {
-                    type: DetailType.Text,
-                    title: 'artemisApp.exercise.teamAssignmentConfig.teamSize',
-                    data: { text: `Min. ${exercise.teamAssignmentConfig.minTeamSize}, Max. ${exercise.teamAssignmentConfig.maxTeamSize}` },
-                },
-                {
-                    type: DetailType.Boolean,
-                    title: 'artemisApp.programmingExercise.allowOfflineIde.title',
-                    data: { boolean: exercise.allowOfflineIde },
-                },
-                {
-                    type: DetailType.Boolean,
-                    title: 'artemisApp.programmingExercise.allowOnlineEditor.title',
-                    data: { boolean: exercise.allowOnlineEditor },
-                },
-            ],
-        };
-    }
-
-    getExerciseDetailsLanguageSection(exercise: ProgrammingExercise): DetailOverviewSection {
-        this.checkAndSetWindFile(exercise);
-        return {
-            headline: 'artemisApp.programmingExercise.wizardMode.detailedSteps.languageStepTitle',
-            details: [
-                {
-                    type: DetailType.Text,
-                    title: 'artemisApp.programmingExercise.programmingLanguage',
-                    data: { text: exercise.programmingLanguage?.toUpperCase() },
-                },
-                {
-                    type: DetailType.Boolean,
-                    title: 'artemisApp.programmingExercise.sequentialTestRuns.title',
-                    data: { boolean: exercise.buildConfig?.sequentialTestRuns },
-                },
                 {
                     type: DetailType.ProgrammingRepositoryButtons,
                     title: 'artemisApp.programmingExercise.templateRepositoryUri',
@@ -455,6 +412,58 @@ export class ProgrammingExerciseDetailComponent implements OnInit, OnDestroy {
                         gitDiffReport: exercise.gitDiffReport,
                     },
                 },
+            ],
+        };
+    }
+
+    getExerciseDetailsModeSection(exercise: ProgrammingExercise): DetailOverviewSection {
+        return {
+            headline: 'artemisApp.programmingExercise.wizardMode.detailedSteps.difficultyStepTitle',
+            details: [
+                {
+                    type: DetailType.Text,
+                    title: 'artemisApp.exercise.difficulty',
+                    data: { text: exercise.difficulty },
+                },
+                {
+                    type: DetailType.Text,
+                    title: 'artemisApp.exercise.mode',
+                    data: { text: exercise.mode },
+                },
+                exercise.teamAssignmentConfig && {
+                    type: DetailType.Text,
+                    title: 'artemisApp.exercise.teamAssignmentConfig.teamSize',
+                    data: { text: `Min. ${exercise.teamAssignmentConfig.minTeamSize}, Max. ${exercise.teamAssignmentConfig.maxTeamSize}` },
+                },
+                {
+                    type: DetailType.Boolean,
+                    title: 'artemisApp.programmingExercise.allowOfflineIde.title',
+                    data: { boolean: exercise.allowOfflineIde },
+                },
+                {
+                    type: DetailType.Boolean,
+                    title: 'artemisApp.programmingExercise.allowOnlineEditor.title',
+                    data: { boolean: exercise.allowOnlineEditor },
+                },
+            ],
+        };
+    }
+
+    getExerciseDetailsLanguageSection(exercise: ProgrammingExercise): DetailOverviewSection {
+        this.checkAndSetWindFile(exercise);
+        return {
+            headline: 'artemisApp.programmingExercise.wizardMode.detailedSteps.languageStepTitle',
+            details: [
+                {
+                    type: DetailType.Text,
+                    title: 'artemisApp.programmingExercise.programmingLanguage',
+                    data: { text: exercise.programmingLanguage?.toUpperCase() },
+                },
+                {
+                    type: DetailType.Boolean,
+                    title: 'artemisApp.programmingExercise.sequentialTestRuns.title',
+                    data: { boolean: exercise.buildConfig?.sequentialTestRuns },
+                },
                 !!exercise.buildConfig?.buildScript &&
                     !!exercise.buildConfig?.windfile?.metadata?.docker?.image && {
                         type: DetailType.Text,
@@ -747,7 +756,7 @@ export class ProgrammingExerciseDetailComponent implements OnInit, OnDestroy {
     }
 
     /**
-     * Checks if the build configuration is available and sets the windfile if it is, helpful for reliably displaying
+     * Checks if the build configuration is available and sets the Windfile if it is, helpful for reliably displaying
      * the build configuration in the UI
      * @param exercise the programming exercise to check
      */

src/main/webapp/app/exercises/programming/manage/update/add-auxiliary-repository-button.component.ts

@@ -3,6 +3,7 @@ import { ButtonSize, ButtonType } from 'app/shared/components/button.component';
 import { ProgrammingExercise } from 'app/entities/programming-exercise.model';
 import { AuxiliaryRepository } from 'app/entities/programming-exercise-auxiliary-repository-model';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 
 @Component({
     selector: 'jhi-add-auxiliary-repository-button',
@@ -15,23 +16,24 @@ import { faPlus } from '@fortawesome/free-solid-svg-icons';
             (onClick)="addAuxiliaryRepositoryRow()"
         />
     `,
+    standalone: true,
+    imports: [ArtemisSharedComponentModule],
 })
 export class AddAuxiliaryRepositoryButtonComponent {
-    ButtonType = ButtonType;
-    ButtonSize = ButtonSize;
+    protected readonly ButtonType = ButtonType;
+    protected readonly ButtonSize = ButtonSize;
 
-    @Input() programmingExercise: ProgrammingExercise;
+    protected readonly faPlus = faPlus;
 
-    @Output() onRefresh: EventEmitter<any> = new EventEmitter<any>();
+    @Input({ required: true }) programmingExercise: ProgrammingExercise;
 
-    // Icons
-    faPlus = faPlus;
+    @Output() onRefresh: EventEmitter<any> = new EventEmitter<any>();
 
     /**
      * Adds a new auxiliary repository, which is displayed as a new row, to the respective programming exercise and activates the angular change detection.
      */
     addAuxiliaryRepositoryRow() {
-        if (this.programmingExercise.auxiliaryRepositories === undefined) {
+        if (!this.programmingExercise.auxiliaryRepositories) {
             this.programmingExercise.auxiliaryRepositories = [];
         }
         const newAuxiliaryRepository = new AuxiliaryRepository();

src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.component.html

@@ -18,6 +18,12 @@ <h2 id="jhi-programming-exercise-heading-import" jhiTranslate="artemisApp.progra
                 [isExamMode]="isExamMode"
                 [isImport]="isImportFromExistingExercise || isImportFromFile"
                 [isLocal]="isLocal"
+            />
+            <hr class="mb-5" />
+            <jhi-programming-exercise-build-details
+                [isLocal]="isLocal"
+                [programmingExercise]="programmingExercise"
+                [programmingExerciseCreationConfig]="getProgrammingExerciseCreationConfig()"
                 [importOptions]="importOptions"
             />
             <hr class="mb-5" />

src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.component.ts

@@ -38,6 +38,7 @@ import { ProgrammingExerciseLanguageComponent } from 'app/exercises/programming/
 import { ProgrammingExerciseGradingComponent } from 'app/exercises/programming/manage/update/update-components/programming-exercise-grading.component';
 import { ExerciseUpdatePlagiarismComponent } from 'app/exercises/shared/plagiarism/exercise-update-plagiarism/exercise-update-plagiarism.component';
 import { ImportOptions } from 'app/types/programming-exercises';
+import { ProgrammingExerciseBuildDetailsComponent } from 'app/exercises/programming/manage/update/update-components/programming-exercise-build-details.component';
 
 @Component({
     selector: 'jhi-programming-exercise-update',
@@ -46,6 +47,7 @@ import { ImportOptions } from 'app/types/programming-exercises';
 })
 export class ProgrammingExerciseUpdateComponent implements AfterViewInit, OnDestroy, OnInit {
     @ViewChild(ProgrammingExerciseInformationComponent) exerciseInfoComponent?: ProgrammingExerciseInformationComponent;
+    @ViewChild(ProgrammingExerciseBuildDetailsComponent) exerciseBuildDetailsComponent?: ProgrammingExerciseBuildDetailsComponent;
     @ViewChild(ProgrammingExerciseDifficultyComponent) exerciseDifficultyComponent?: ProgrammingExerciseDifficultyComponent;
     @ViewChild(ProgrammingExerciseLanguageComponent) exerciseLanguageComponent?: ProgrammingExerciseLanguageComponent;
     @ViewChild(ProgrammingExerciseGradingComponent) exerciseGradingComponent?: ProgrammingExerciseGradingComponent;
@@ -476,6 +478,7 @@ export class ProgrammingExerciseUpdateComponent implements AfterViewInit, OnDest
 
     ngAfterViewInit() {
         this.inputFieldSubscriptions.push(this.exerciseInfoComponent?.formValidChanges?.subscribe(() => this.calculateFormStatusSections()));
+        this.inputFieldSubscriptions.push(this.exerciseBuildDetailsComponent?.formValidChanges?.subscribe(() => this.calculateFormStatusSections()));
         this.inputFieldSubscriptions.push(this.exerciseDifficultyComponent?.teamConfigComponent?.formValidChanges?.subscribe(() => this.calculateFormStatusSections()));
         this.inputFieldSubscriptions.push(this.exerciseLanguageComponent?.formValidChanges?.subscribe(() => this.calculateFormStatusSections()));
         this.inputFieldSubscriptions.push(this.exerciseGradingComponent?.formValidChanges?.subscribe(() => this.calculateFormStatusSections()));
@@ -494,6 +497,10 @@ export class ProgrammingExerciseUpdateComponent implements AfterViewInit, OnDest
                 title: 'artemisApp.programmingExercise.wizardMode.detailedSteps.generalInfoStepTitle',
                 valid: this.exerciseInfoComponent?.formValid ?? false,
             },
+            {
+                title: 'artemisApp.programmingExercise.wizardMode.detailedSteps.buildDetailsStepTitle',
+                valid: this.exerciseBuildDetailsComponent?.formValid ?? false,
+            },
             {
                 title: 'artemisApp.programmingExercise.wizardMode.detailedSteps.difficultyStepTitle',
                 valid: (this.exerciseDifficultyComponent?.teamConfigComponent.formValid && this.validIdeSelection()) ?? false,

src/main/webapp/app/exercises/programming/manage/update/programming-exercise-update.module.ts

@@ -11,10 +11,8 @@ import { ArtemisCategorySelectorModule } from 'app/shared/category-selector/cate
 import { StructuredGradingCriterionModule } from 'app/exercises/shared/structured-grading-criterion/structured-grading-criterion.module';
 import { ArtemisIncludedInOverallScorePickerModule } from 'app/exercises/shared/included-in-overall-score-picker/included-in-overall-score-picker.module';
 import { ArtemisProgrammingExerciseLifecycleModule } from 'app/exercises/programming/shared/lifecycle/programming-exercise-lifecycle.module';
-import { AddAuxiliaryRepositoryButtonComponent } from 'app/exercises/programming/manage/update/add-auxiliary-repository-button.component';
 import { NgxDatatableModule } from '@flaviosantoro92/ngx-datatable';
 import { ArtemisTableModule } from 'app/shared/table/table.module';
-import { RemoveAuxiliaryRepositoryButtonComponent } from 'app/exercises/programming/manage/update/remove-auxiliary-repository-button.component';
 import { SubmissionPolicyUpdateModule } from 'app/exercises/shared/submission-policy/submission-policy-update.module';
 import { ArtemisModePickerModule } from 'app/exercises/shared/mode-picker/mode-picker.module';
 import { ProgrammingExerciseInformationComponent } from 'app/exercises/programming/manage/update/update-components/programming-exercise-information.component';
@@ -32,6 +30,7 @@ import { FormsModule } from 'app/forms/forms.module';
 import { ProgrammingExerciseBuildPlanCheckoutDirectoriesComponent } from 'app/exercises/programming/shared/build-details/programming-exercise-build-plan-checkout-directories.component';
 import { ProgrammingExerciseRepositoryAndBuildPlanDetailsComponent } from 'app/exercises/programming/shared/build-details/programming-exercise-repository-and-build-plan-details.component';
 import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.module';
+import { ProgrammingExerciseBuildDetailsComponent } from 'app/exercises/programming/manage/update/update-components/programming-exercise-build-details.component';
 
 @NgModule({
     imports: [
@@ -57,6 +56,7 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
         ProgrammingExerciseBuildPlanCheckoutDirectoriesComponent,
         ProgrammingExerciseRepositoryAndBuildPlanDetailsComponent,
         MonacoEditorModule,
+        ProgrammingExerciseBuildDetailsComponent,
     ],
     declarations: [
         ProgrammingExerciseUpdateComponent,
@@ -68,8 +68,6 @@ import { MonacoEditorModule } from 'app/shared/monaco-editor/monaco-editor.modul
         ProgrammingExerciseLanguageComponent,
         ProgrammingExerciseGradingComponent,
         ProgrammingExerciseProblemComponent,
-        AddAuxiliaryRepositoryButtonComponent,
-        RemoveAuxiliaryRepositoryButtonComponent,
     ],
     exports: [ProgrammingExerciseUpdateComponent],
 })

src/main/webapp/app/exercises/programming/manage/update/remove-auxiliary-repository-button.component.ts

@@ -3,25 +3,27 @@ import { ButtonSize, ButtonType } from 'app/shared/components/button.component';
 import { ProgrammingExercise } from 'app/entities/programming-exercise.model';
 import { AuxiliaryRepository } from 'app/entities/programming-exercise-auxiliary-repository-model';
 import { faTrash } from '@fortawesome/free-solid-svg-icons';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
 
 @Component({
     selector: 'jhi-remove-auxiliary-repository-button',
     template: `
         <jhi-button [btnType]="ButtonType.ERROR" [btnSize]="ButtonSize.SMALL" [icon]="faTrash" [title]="'entity.action.remove'" (onClick)="removeAuxiliaryRepository()" />
     `,
+    standalone: true,
+    imports: [ArtemisSharedComponentModule],
 })
 export class RemoveAuxiliaryRepositoryButtonComponent {
-    ButtonType = ButtonType;
-    ButtonSize = ButtonSize;
+    protected readonly ButtonType = ButtonType;
+    protected readonly ButtonSize = ButtonSize;
 
-    @Input() programmingExercise: ProgrammingExercise;
+    protected readonly faTrash = faTrash;
 
-    @Input() row: AuxiliaryRepository;
+    @Input({ required: true }) programmingExercise: ProgrammingExercise;
 
-    @Output() onRefresh: EventEmitter<any> = new EventEmitter<any>();
+    @Input({ required: true }) row: AuxiliaryRepository;
 
-    // Icons
-    faTrash = faTrash;
+    @Output() onRefresh: EventEmitter<any> = new EventEmitter<any>();
 
     /**
      * Removes the auxiliary repository of the selected row from the respective programming exercise.