Development: Use directive for programming repository button details in exercise detail overview

src/main/webapp/app/detail-overview-list/components/programming-auxiliary-repository-buttons-detail.component.html

@@ -0,0 +1,25 @@
+<ul>
+    @for (auxiliaryRepository of detail.data.auxiliaryRepositories; track auxiliaryRepository) {
+        @if (auxiliaryRepository.id && auxiliaryRepository.repositoryUri && detail.data.exerciseId) {
+            <li class="mt-2">
+                <span>Repository: {{ auxiliaryRepository.name }}</span>
+                <jhi-code-button class="ms-2" [smallButtons]="true" [repositoryUri]="auxiliaryRepository.repositoryUri" />
+                <jhi-programming-exercise-instructor-repo-download
+                    class="ms-2"
+                    [exerciseId]="detail.data.exerciseId"
+                    [repositoryType]="'AUXILIARY'"
+                    [auxiliaryRepositoryId]="auxiliaryRepository.id"
+                />
+                <div class="auxiliaryRepositoryDescription">
+                    @if (!auxiliaryRepository.checkoutDirectory) {
+                        <fa-icon [icon]="faExclamationTriangle" class="text-warning me-1" [ngbTooltip]="noCheckoutDirectorySetTooltip" />
+                        <span jhiTranslate="artemisApp.programmingExercise.noCheckoutDirectorySet"></span>
+                    }
+                    <ng-template #noCheckoutDirectorySetTooltip>
+                        <span jhiTranslate="artemisApp.programmingExercise.noCheckoutDirectorySetTooltip"></span>
+                    </ng-template>
+                </div>
+            </li>
+        }
+    }
+</ul>

src/main/webapp/app/detail-overview-list/components/programming-auxiliary-repository-buttons-detail.component.ts

@@ -0,0 +1,20 @@
+import { Component, Input } from '@angular/core';
+import { NoDataComponent } from 'app/shared/no-data-component';
+import { RouterModule } from '@angular/router';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
+import { ProgrammingAuxiliaryRepositoryButtonsDetail } from 'app/detail-overview-list/detail.model';
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { ArtemisSharedModule } from 'app/shared/shared.module';
+
+@Component({
+    selector: 'jhi-programming-auxiliary-repository-buttons-detail',
+    templateUrl: 'programming-auxiliary-repository-buttons-detail.component.html',
+    standalone: true,
+    imports: [NoDataComponent, RouterModule, ArtemisSharedComponentModule, ArtemisProgrammingExerciseActionsModule, ArtemisSharedModule],
+})
+export class ProgrammingAuxiliaryRepositoryButtonsDetailComponent {
+    @Input() detail: ProgrammingAuxiliaryRepositoryButtonsDetail;
+
+    readonly faExclamationTriangle = faExclamationTriangle;
+}

src/main/webapp/app/detail-overview-list/components/programming-repository-buttons-detail.component.html

@@ -0,0 +1,8 @@
+@if (detail.data.participation?.repositoryUri && detail.data.exerciseId) {
+    <div class="clone-buttons">
+        <jhi-code-button [smallButtons]="true" [routerLinkForRepositoryView]="['.', 'repository', detail.data.type]" [repositoryUri]="detail.data.participation?.repositoryUri!" />
+        <jhi-programming-exercise-instructor-repo-download class="ms-2" [exerciseId]="detail.data.exerciseId" [repositoryType]="detail.data.type" />
+    </div>
+} @else {
+    <jhi-no-data />
+}

src/main/webapp/app/detail-overview-list/components/programming-repository-buttons-detail.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import type { ProgrammingRepositoryButtonsDetail } from 'app/detail-overview-list/detail.model';
+import { NoDataComponent } from 'app/shared/no-data-component';
+import { RouterModule } from '@angular/router';
+import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
+import { ArtemisProgrammingExerciseActionsModule } from 'app/exercises/programming/shared/actions/programming-exercise-actions.module';
+
+@Component({
+    selector: 'jhi-programming-repository-buttons-detail',
+    templateUrl: 'programming-repository-buttons-detail.component.html',
+    standalone: true,
+    imports: [NoDataComponent, RouterModule, ArtemisSharedComponentModule, ArtemisProgrammingExerciseActionsModule],
+})
+export class ProgrammingRepositoryButtonsDetailComponent {
+    @Input() detail: ProgrammingRepositoryButtonsDetail;
+}

src/main/webapp/app/detail-overview-list/detail-overview-list.component.html

@@ -15,51 +15,6 @@ <h3 class="section-headline" [id]="headlinesRecord[section.headline]">{{ section
                     </dt>
                 }
                 @switch (detail.type) {
-                    @case (DetailType.ProgrammingRepositoryButtons) {
-                        <dd id="detail-value-{{ detail.title }}">
-                            @if (detail.data.participation?.repositoryUri && detail.data.exerciseId) {
-                                <div class="clone-buttons">
-                                    <jhi-code-button
-                                        [smallButtons]="true"
-                                        [routerLinkForRepositoryView]="['.', 'repository', detail.data.type]"
-                                        [repositoryUri]="detail.data.participation?.repositoryUri!"
-                                    />
-                                    <jhi-programming-exercise-instructor-repo-download class="ms-2" [exerciseId]="detail.data.exerciseId" [repositoryType]="detail.data.type" />
-                                </div>
-                            } @else {
-                                <ng-container *ngTemplateOutlet="noData" />
-                            }
-                        </dd>
-                    }
-                    @case (DetailType.ProgrammingAuxiliaryRepositoryButtons) {
-                        <dd id="detail-value-{{ detail.title }}">
-                            <ul>
-                                @for (auxiliaryRepository of detail.data.auxiliaryRepositories; track auxiliaryRepository) {
-                                    @if (auxiliaryRepository.id && auxiliaryRepository.repositoryUri && detail.data.exerciseId) {
-                                        <li class="mt-2">
-                                            <span>Repository: {{ auxiliaryRepository.name }}</span>
-                                            <jhi-code-button class="ms-2" [smallButtons]="true" [repositoryUri]="auxiliaryRepository.repositoryUri" />
-                                            <jhi-programming-exercise-instructor-repo-download
-                                                class="ms-2"
-                                                [exerciseId]="detail.data.exerciseId"
-                                                [repositoryType]="'AUXILIARY'"
-                                                [auxiliaryRepositoryId]="auxiliaryRepository.id"
-                                            />
-                                            <div class="auxiliaryRepositoryDescription">
-                                                @if (!auxiliaryRepository.checkoutDirectory) {
-                                                    <fa-icon [icon]="faExclamationTriangle" class="text-warning me-1" [ngbTooltip]="noCheckoutDirectorySetTooltip" />
-                                                    <span jhiTranslate="artemisApp.programmingExercise.noCheckoutDirectorySet"></span>
-                                                }
-                                                <ng-template #noCheckoutDirectorySetTooltip>
-                                                    <span jhiTranslate="artemisApp.programmingExercise.noCheckoutDirectorySetTooltip"></span>
-                                                </ng-template>
-                                            </div>
-                                        </li>
-                                    }
-                                }
-                            </ul>
-                        </dd>
-                    }
                     @case (DetailType.ProgrammingTestStatus) {
                         <dd id="detail-value-{{ detail.title }}">
                             @if (detail.data.participation) {

src/main/webapp/app/detail-overview-list/detail-overview-list.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
-import { faArrowUpRightFromSquare, faCodeBranch, faCodeCompare, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { faCodeCompare } from '@fortawesome/free-solid-svg-icons';
 import { isEmpty } from 'lodash-es';
 import { FeatureToggle } from 'app/shared/feature-toggle/feature-toggle.service';
 import { ButtonSize, ButtonType, TooltipPlacement } from 'app/shared/components/button.component';
@@ -63,10 +63,7 @@ export class DetailOverviewListComponent implements OnInit, OnDestroy {
     headlinesRecord: Record<string, string>;
 
     // icons
-    readonly faExclamationTriangle = faExclamationTriangle;
     readonly faCodeCompare = faCodeCompare;
-    readonly faArrowUpRightFromSquare = faArrowUpRightFromSquare;
-    readonly faCodeBranch = faCodeBranch;
 
     WARNING = ButtonType.WARNING;
 

src/main/webapp/app/detail-overview-list/detail.model.ts

@@ -83,7 +83,7 @@ interface ProgrammingIrisEnabledDetail extends DetailBase {
     data: { exercise?: ProgrammingExercise; course?: Course; disabled: boolean; subSettingsType: IrisSubSettingsType };
 }
 
-interface ProgrammingRepositoryButtonsDetail extends DetailBase {
+export interface ProgrammingRepositoryButtonsDetail extends DetailBase {
     type: DetailType.ProgrammingRepositoryButtons;
     data: {
         exerciseId?: number;
@@ -92,7 +92,7 @@ interface ProgrammingRepositoryButtonsDetail extends DetailBase {
     };
 }
 
-interface ProgrammingAuxiliaryRepositoryButtonsDetail extends DetailBase {
+export interface ProgrammingAuxiliaryRepositoryButtonsDetail extends DetailBase {
     type: DetailType.ProgrammingAuxiliaryRepositoryButtons;
     data: { auxiliaryRepositories: AuxiliaryRepository[]; exerciseId?: number };
 }

src/main/webapp/app/detail-overview-list/exercise-detail.directive.ts

@@ -5,6 +5,8 @@ import { TextDetailComponent } from 'app/detail-overview-list/components/text-de
 import { DateDetailComponent } from 'app/detail-overview-list/components/date-detail.component';
 import { LinkDetailComponent } from 'app/detail-overview-list/components/link-detail.component';
 import { BooleanDetailComponent } from 'app/detail-overview-list/components/boolean-detail.component';
+import { ProgrammingRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-repository-buttons-detail.component';
+import { ProgrammingAuxiliaryRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-auxiliary-repository-buttons-detail.component';
 
 @Directive({
     selector: '[jhiExerciseDetail]',
@@ -28,6 +30,8 @@ export class ExerciseDetailDirective implements OnInit, OnDestroy {
             [DetailType.Date]: DateDetailComponent,
             [DetailType.Link]: LinkDetailComponent,
             [DetailType.Boolean]: BooleanDetailComponent,
+            [DetailType.ProgrammingRepositoryButtons]: ProgrammingRepositoryButtonsDetailComponent,
+            [DetailType.ProgrammingAuxiliaryRepositoryButtons]: ProgrammingAuxiliaryRepositoryButtonsDetailComponent,
         };
 
         const detailComponent = detailTypeToComponent[this.detail.type];

src/test/javascript/spec/component/exercise-detail.directive.spec.ts

@@ -1,13 +1,25 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ExerciseDetailDirective } from 'app/detail-overview-list/exercise-detail.directive';
 import { Component, ViewChild } from '@angular/core';
-import type { BooleanDetail, DateDetail, Detail, LinkDetail, NotShownDetail, ShownDetail, TextDetail } from 'app/detail-overview-list/detail.model';
+import type {
+    BooleanDetail,
+    DateDetail,
+    Detail,
+    LinkDetail,
+    NotShownDetail,
+    ProgrammingAuxiliaryRepositoryButtonsDetail,
+    ProgrammingRepositoryButtonsDetail,
+    ShownDetail,
+    TextDetail,
+} from 'app/detail-overview-list/detail.model';
 import { TextDetailComponent } from 'app/detail-overview-list/components/text-detail.component';
 import { MockComponent } from 'ng-mocks';
 import { DetailType } from 'app/detail-overview-list/detail-overview-list.component';
 import { DateDetailComponent } from 'app/detail-overview-list/components/date-detail.component';
 import { LinkDetailComponent } from 'app/detail-overview-list/components/link-detail.component';
 import { BooleanDetailComponent } from 'app/detail-overview-list/components/boolean-detail.component';
+import { ProgrammingRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-repository-buttons-detail.component';
+import { ProgrammingAuxiliaryRepositoryButtonsDetailComponent } from 'app/detail-overview-list/components/programming-auxiliary-repository-buttons-detail.component';
 
 @Component({
     template: `<div jhiExerciseDetail [detail]="detail"></div>`,
@@ -63,6 +75,17 @@ describe('ExerciseDetailDirective', () => {
         it('should create BooleanDetail component', () => {
             checkComponentForDetailWasCreated({ type: DetailType.Boolean } as BooleanDetail, BooleanDetailComponent);
         });
+
+        it('should create ProgrammingRepositoryButtonsDetailComponent component', () => {
+            checkComponentForDetailWasCreated({ type: DetailType.ProgrammingRepositoryButtons } as ProgrammingRepositoryButtonsDetail, ProgrammingRepositoryButtonsDetailComponent);
+        });
+
+        it('should create ProgrammingAuxiliaryRepositoryButtonsDetailComponent component', () => {
+            checkComponentForDetailWasCreated(
+                { type: DetailType.ProgrammingAuxiliaryRepositoryButtons } as ProgrammingAuxiliaryRepositoryButtonsDetail,
+                ProgrammingAuxiliaryRepositoryButtonsDetailComponent,
+            );
+        });
     });
 
     function checkComponentForDetailWasNotCreated(detailToBeChecked: NotShownDetail) {