Conditionally hide training files section

Author: RaymondLuong3

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-project.component.html

@@ -109,26 +109,30 @@ <h2>Downloads</h2>
     <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
     <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
   </table>
-  <h3>Training Files</h3>
-  <table mat-table [dataSource]="trainingDataFiles" class="training-data-table">
-    <ng-container matColumnDef="title">
-      <th mat-header-cell *matHeaderCellDef>File Name</th>
-      <td mat-cell *matCellDef="let file">{{ file.title }}</td>
-    </ng-container>
+  @if (trainingDataFiles.length > 0) {
+    <h3>Training Files</h3>
+    <table mat-table [dataSource]="trainingDataFiles">
+      <ng-container matColumnDef="title">
+        <th mat-header-cell *matHeaderCellDef>File Name</th>
+        <td mat-cell *matCellDef="let file">
+          {{ file.title }}
+        </td>
+      </ng-container>
 
-    <ng-container matColumnDef="download">
-      <th mat-header-cell *matHeaderCellDef></th>
-      <td mat-cell *matCellDef="let file" class="data-table-end">
-        <button mat-flat-button color="primary" (click)="downloadTrainingData(file.dataId)" [disabled]="!isOnline">
-          <mat-icon>download</mat-icon>
-          Download
-        </button>
-      </td>
-    </ng-container>
+      <ng-container matColumnDef="download">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let file" class="data-table-end">
+          <button mat-flat-button color="primary" (click)="downloadTrainingData(file.dataId)" [disabled]="!isOnline">
+            <mat-icon>download</mat-icon>
+            Download
+          </button>
+        </td>
+      </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="['title', 'download']"></tr>
-    <tr mat-row *matRowDef="let row; columns: ['title', 'download']"></tr>
-  </table>
+      <tr mat-header-row *matHeaderRowDef="['title', 'download']"></tr>
+      <tr mat-row *matRowDef="let row; columns: ['title', 'download']"></tr>
+    </table>
+  }
 </div>
 
 @if (rawLastCompletedBuild?.executionData?.warnings?.length > 0) {

src/SIL.XForge.Scripture/ClientApp/src/app/serval-administration/serval-project.component.scss

@@ -18,10 +18,3 @@
   display: flex;
   align-items: center;
 }
-
-.data-table-end {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: inherit;
-}