Updated release modal UI.

Author: MillenniumFalconMechanic

spa/src/app/files/files.module.ts

@@ -100,8 +100,6 @@ import { ProjectReleaseComponent } from "./project-release/project-release.compo
 import { ProjectSummaryStatsComponent } from "./project-summary-stats-component/project-summary-stats.component";
 import { ProjectViewFactory } from "./project-view/project-view.factory";
 import { ReleaseComponent } from "./releases/release.component";
-import { ReleaseFileComponent } from "./releases/release-file/release-file.component";
-import { ReleaseFileDownloadComponent } from "./releases/release-file-download/release-file-download.component";
 import { ReleaseFilesModalComponent } from "./releases/release-files-modal/release-files-modal.component";
 import { ReleaseFilesModalContainerComponent } from "./releases/release-files-modal-container/release-files-modal-container.component";
 import { ReleaseTableComponent } from "./releases/release-table/release-table.component";
@@ -216,8 +214,6 @@ import { ReleaseService } from "./shared/release.service";
         ProjectSummaryStatsComponent,
         ProjectSupplementaryLinksComponent,
         ReleaseComponent,
-        ReleaseFileComponent,
-        ReleaseFileDownloadComponent,
         ReleaseFilesModalComponent,
         ReleaseFilesModalContainerComponent,
         ReleaseTableComponent,

spa/src/app/files/releases/release-dataset-view.model.ts

@@ -10,13 +10,13 @@
 import { ReleaseVisualization } from "./release-visualization.model";
 import { LibraryConstructionApproach } from "../shared/library-construction-approach.model";
 import { DevelopmentalStage } from "./developmental-stage.model";
-import { ReleaseFilesView } from "./release-files-view.model";
+import { ReleaseFileView } from "./release-file-view.model";
 
 export interface ReleaseDatasetView {
     entryId: string; // Project UUID, pulled from ReleaseProject
     datasetId: string; // Short name, pulled from ReleaseDataset
     developmentalStage: DevelopmentalStage;
-    files: ReleaseFilesView[];
+    files: ReleaseFileView[];
     libraryConstructionApproach: LibraryConstructionApproach;
     projectShortname: string; // Project short name, pulled from ReleaseProject
     visualizations: ReleaseVisualization[];

spa/src/app/files/releases/release-file-download/release-file-download.component.html

@@ -0,0 +1,18 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * View model of a file contained in a release. 
+ */
+
+// App dependencies
+import { ReleaseFileType } from "./release-file-type.model";
+
+export interface ReleaseFileView {
+
+    description: string;
+    extension: string;
+    type: ReleaseFileType;
+    url: string;
+}
+

spa/src/app/files/releases/release-file-download/release-file-download.component.scss

@@ -1,27 +1,40 @@
 <modal-layout *ngIf="state$ | async as state"
               [loaded]="state.loaded"
               (closed)="redirectToReleases()">
-    <release-title-overline overline></release-title-overline>
-    <ng-container title *ngIf="state.loaded">Release Files</ng-container>
+    <ng-container title *ngIf="state.loaded">{{state.releaseDataset.datasetId}} Release Files</ng-container>
     <ng-container subtitle *ngIf="state.loaded">{{state.releaseDataset.projectShortname}}</ng-container>
     <ng-container content *ngIf="state.loaded">
-        <h2>
+        <h4 class="fontsize-l">
             <span>{{state.releaseDataset.developmentalStage}}, </span>
             <span>{{state.releaseDataset.organ}}, </span>
             <span>{{state.releaseDataset.libraryConstructionApproach}}</span>
-        </h2>
-        <warning class="max550">
+        </h4>
+        <warning>
             <warning-content>
-                <p class="fontsize-s">This project contains additional organs, developmental stages or technologies. <a
-                        routerLink="/projects/{{state.releaseDataset.entryId}}/releases/2020-mar">View project release page</a>.
+                <p class="fontsize-xs">This project contains additional organs, developmental stages or technologies. <a
+                        routerLink="/projects/{{state.releaseDataset.entryId}}/releases/2020-mar">View project release
+                    page</a>.
                 </p>
             </warning-content>
         </warning>
-        <release-file class="max550"
-                      *ngFor="let releaseFile of state.releaseDataset.files"
-                      [releaseFiles]="releaseFile.files"
-                      [releaseFileParagraph]="getFileDownloadParagraph(releaseFile)" 
-                      [releaseFileTitle]="getReleaseFileTypeDisplay(releaseFile.type)"></release-file>
-        <data-download-citation class="max550"></data-download-citation>
+        <mat-table [dataSource]="state.releaseDataset.files">
+            <ng-container matColumnDef="download">
+                <mat-cell *matCellDef="let element" class="download fontsize-xxs">
+                    <a [href]="getReleaseFileUrl(element.url)"></a> {{element.extension}}
+                </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="description">
+                <mat-cell *matCellDef="let element" class="description fontsize-xxs">
+                    {{element.description}}
+                </mat-cell>
+            </ng-container>
+            <ng-container matColumnDef="copyLink">
+                <mat-cell *matCellDef="let element" class="copy-to-clipboard fontsize-xxs">
+                    <copy-to-clipboard [copyToClipboardLink]="getReleaseFileUrl(element.url)"></copy-to-clipboard>
+                </mat-cell>
+            </ng-container>
+            <mat-row *matRowDef="let row; columns: columnsToDisplay;"></mat-row>
+        </mat-table>
+        <data-download-citation></data-download-citation>
     </ng-container>
 </modal-layout>