ui fixes

Author: sei-aschlackman

src/app/components/admin-app/admin-app-template-export/admin-app-template-export.component.html

@@ -12,44 +12,36 @@ <h2>Export Application Templates</h2>
         <mat-label>Archive Type</mat-label>
         <mat-select formControlName="archiveType">
           @for (archiveType of archiveTypes; track archiveType) {
-            <mat-option
-              [value]="archiveType"
-              >
+            <mat-option [value]="archiveType">
               {{ archiveType }}
             </mat-option>
           }
         </mat-select>
       </mat-form-field>
     }
-    <div>
-      <mat-form-field floatLabel="always" appearance="none">
-        <mat-label>Include Icons</mat-label>
-        <mat-slide-toggle
-          formControlName="includeIcons"
-          matTooltip="Include icon files in the exported archive"
-        ></mat-slide-toggle>
-        <textarea matInput hidden></textarea>
-      </mat-form-field>
-      <mat-form-field floatLabel="always" appearance="none">
-        <mat-label>Embed Icons</mat-label>
-        <mat-slide-toggle
-          formControlName="embedIcons"
-          matTooltip="Embed included Icons into exported JSON as data URIs"
-        ></mat-slide-toggle>
-        <textarea matInput hidden></textarea>
-      </mat-form-field>
+    <div class="d-flex gap-2">
+      <mat-slide-toggle
+        formControlName="includeIcons"
+        matTooltip="Include icon files in the exported archive"
+        >Include Icons</mat-slide-toggle
+      >
+      <mat-slide-toggle
+        formControlName="embedIcons"
+        matTooltip="Embed included Icons into exported JSON as data URIs"
+        >Embed Icons</mat-slide-toggle
+      >
     </div>
     <div class="d-flex justify-content-around">
       <button
         type="submit"
         color="primary"
         mat-raised-button
         [disabled]="!form.valid || loading"
-        >
+      >
         {{
-        loading
-        ? 'Exporting....'
-        : 'Export ' + (ids.length == 0 ? 'All' : '(' + ids.length + ')')
+          loading
+            ? 'Exporting....'
+            : 'Export ' + (ids.length == 0 ? 'All' : '(' + ids.length + ')')
         }}
       </button>
       <button type="reset" color="primary" mat-raised-button (click)="cancel()">

src/app/components/admin-app/admin-app-template-export/admin-app-template-export.component.scss

@@ -1,5 +1,12 @@
 /*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 */
 
+.d-flex.gap-2 {
+  padding-block: 8px;
+}
+
+.d-flex.justify-content-around {
+  padding-block: 8px;
+}

src/app/components/admin-app/admin-app-template-export/admin-app-template-export.component.ts

@@ -21,11 +21,11 @@ import HttpHeaderUtils from '../../../utilities/http-header-utils';
 import { BehaviorSubject, finalize, map } from 'rxjs';
 
 @Component({
-    selector: 'app-admin-app-template-export',
-    templateUrl: './admin-app-template-export.component.html',
-    styleUrls: ['./admin-app-template-export.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    standalone: false
+  selector: 'app-admin-app-template-export',
+  templateUrl: './admin-app-template-export.component.html',
+  styleUrls: ['./admin-app-template-export.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: false,
 })
 export class AdminAppTemplateExportComponent {
   @Input() ids: string[];
@@ -39,10 +39,11 @@ export class AdminAppTemplateExportComponent {
   loading = false;
   hasErrors = new BehaviorSubject(false);
   hasErrors$ = this.hasErrors.asObservable();
+  isArchiveable = true;
 
   constructor(
     private applicationService: ApplicationService,
-    formBuilder: UntypedFormBuilder
+    formBuilder: UntypedFormBuilder,
   ) {
     this.form = formBuilder.group({
       archiveType: [this.archiveTypes[0]],
@@ -67,7 +68,7 @@ export class AdminAppTemplateExportComponent {
       this.ids,
       ArchiveType[this.form.value.archiveType],
       this.form.value.includeIcons,
-      this.includeIcons.value ? this.form.value.embedIcons : false
+      this.includeIcons.value ? this.form.value.embedIcons : false,
     );
   }
 
@@ -79,7 +80,7 @@ export class AdminAppTemplateExportComponent {
     ids: string[],
     archiveType: ArchiveType,
     includeIcons,
-    embedIcons
+    embedIcons,
   ) {
     this.loading = true;
     this.applicationService
@@ -88,7 +89,7 @@ export class AdminAppTemplateExportComponent {
         embedIcons,
         archiveType,
         ids,
-        'response'
+        'response',
       )
       .pipe(
         map((response) => {
@@ -98,7 +99,7 @@ export class AdminAppTemplateExportComponent {
             hasErrors: HttpHeaderUtils.hasArchiveErrors(response.headers),
           };
         }),
-        finalize(() => (this.loading = false))
+        finalize(() => (this.loading = false)),
       )
       .subscribe((result) => {
         FileDownloadUtils.downloadFile(result.blob, result.filename);

src/app/components/admin-app/admin-app-template-import/admin-app-template-import.component.html

@@ -14,7 +14,7 @@ <h2>Import {{ typeString | titlecase }}</h2>
           color="primary"
           mat-raised-button
           (click)="fileInput.click()"
-          >
+        >
           Choose File
         </button>
         <input
@@ -23,25 +23,23 @@ <h2>Import {{ typeString | titlecase }}</h2>
           #fileInput
           type="file"
           accept=".zip, .tar.gz, .tgz"
-          />
+        />
         <span class="file-name">{{ this.form.value.archive?.name }}</span>
       </div>
-      <mat-form-field floatLabel="always" appearance="none" fxLayout="row">
-        <mat-label>Overwrite Existing</mat-label>
+      <div class="d-flex align-items-center gap-2">
         <mat-slide-toggle
           formControlName="overwriteExisting"
           matTooltip="If an Application Template with a matching Id already exists, overwrite it. Otherwise, report as a failure."
-        ></mat-slide-toggle>
-        <textarea matInput hidden></textarea>
-      </mat-form-field>
+        >Overwrite Existing</mat-slide-toggle>
+      </div>
     </div>
     <div class="d-flex justify-content-around">
       <button
         type="submit"
         color="primary"
         mat-raised-button
         [disabled]="!form.valid || loading"
-        >
+      >
         {{ loading ? 'Importing...' : 'Import' }}
       </button>
       <button type="reset" color="primary" mat-raised-button (click)="cancel()">

src/app/components/admin-app/admin-app-template-import/admin-app-template-import.component.scss

@@ -1,5 +1,12 @@
 /*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 */
 
+.d-flex.gap-2 {
+  padding-block: 8px;
+}
+
+.d-flex.justify-content-around {
+  padding-block: 8px;
+}

src/app/components/admin-app/admin-app-template-search/admin-app-template-search.component.ts

@@ -8,19 +8,13 @@ import {
   TemplateRef,
   ViewChild,
 } from '@angular/core';
-import {
-  MatPaginator,
-  PageEvent,
-} from '@angular/material/paginator';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort, MatSortable } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ApplicationTemplate } from '../../../generated/player-api';
 import { ApplicationService } from '../../../generated/player-api/api/application.service';
 import { SelectionModel } from '@angular/cdk/collections';
-import {
-  MatDialog,
-  MatDialogRef,
-} from '@angular/material/dialog';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { SafeHtml } from '@angular/platform-browser';
 
 export interface Action {
@@ -29,10 +23,10 @@ export interface Action {
 }
 
 @Component({
-    selector: 'app-admin-app-template-search',
-    templateUrl: './admin-app-template-search.component.html',
-    styleUrls: ['./admin-app-template-search.component.scss'],
-    standalone: false
+  selector: 'app-admin-app-template-search',
+  templateUrl: './admin-app-template-search.component.html',
+  styleUrls: ['./admin-app-template-search.component.scss'],
+  standalone: false,
 })
 export class AdminAppTemplateSearchComponent implements OnInit, AfterViewInit {
   public appTemplateDataSource: MatTableDataSource<ApplicationTemplate>;
@@ -55,7 +49,7 @@ export class AdminAppTemplateSearchComponent implements OnInit, AfterViewInit {
 
   constructor(
     private applicationService: ApplicationService,
-    private dialog: MatDialog
+    private dialog: MatDialog,
   ) {}
 
   /**
@@ -68,7 +62,7 @@ export class AdminAppTemplateSearchComponent implements OnInit, AfterViewInit {
 
     // Initial datasource
     this.appTemplateDataSource = new MatTableDataSource<ApplicationTemplate>(
-      new Array<ApplicationTemplate>()
+      new Array<ApplicationTemplate>(),
     );
     this.sort.sort(<MatSortable>{ id: 'name', start: 'asc' });
     this.appTemplateDataSource.sort = this.sort;
@@ -152,7 +146,7 @@ export class AdminAppTemplateSearchComponent implements OnInit, AfterViewInit {
     this.isAllSelected()
       ? this.selection.clear()
       : this.appTemplateDataSource.filteredData.forEach((row) =>
-          this.selection.select(row.id)
+          this.selection.select(row.id),
         );
   }
 

src/app/components/admin-app/admin-app-view-export/admin-app-view-export.component.scss

@@ -1,5 +1,12 @@
 /*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 */
 
+.d-flex.gap-2 {
+  padding-block: 8px;
+}
+
+.d-flex.justify-content-around {
+  padding-block: 8px;
+}

src/app/components/admin-app/admin-app-view-import/admin-app-view-import.component.html

@@ -7,14 +7,14 @@ <h2>Import {{ typeString | titlecase }}</h2>
 
 @if (!(finished$ | async)) {
   <form [formGroup]="form" (ngSubmit)="import()">
-    <div class="d-flex flex-column">
-      <div class="d-flex align-items-center gap-2 mb-3">
+    <div class="d-flex flex-column gap-2">
+      <div class="d-flex align-items-center gap-2">
         <button
           type="button"
           color="primary"
           mat-raised-button
           (click)="fileInput.click()"
-          >
+        >
           Choose File
         </button>
         <input
@@ -23,35 +23,35 @@ <h2>Import {{ typeString | titlecase }}</h2>
           #fileInput
           type="file"
           accept=".zip, .tar.gz, .tgz"
-          />
+        />
         <span class="file-name">{{ this.form.value.archive?.name }}</span>
       </div>
-      <strong>Applications</strong>
-      <mat-form-field floatLabel="always" appearance="none">
-        <mat-label>Match Templates By Name</mat-label>
+      <div class="d-flex align-items-center gap-2">
+        <strong>Applications</strong>
+      </div>
+      <div class="d-flex align-items-center gap-2">
         <mat-slide-toggle
           formControlName="matchApplicationTemplatesByName"
           matTooltip="If an Application Template cannot be found by Id, try to find one with a matching Name"
-        ></mat-slide-toggle>
-        <textarea matInput hidden></textarea>
-      </mat-form-field>
-      <strong>Roles</strong>
-      <mat-form-field floatLabel="always" appearance="none">
-        <mat-label>Match By Name</mat-label>
+        >Match Templates By Name</mat-slide-toggle>
+      </div>
+      <div class="d-flex align-items-center gap-2">
+        <strong>Roles</strong>
+      </div>
+      <div class="d-flex align-items-center gap-2">
         <mat-slide-toggle
           formControlName="matchRolesByName"
           matTooltip="If a Role cannot be found by Id, try to find one with a matching Name"
-        ></mat-slide-toggle>
-        <textarea matInput hidden></textarea>
-      </mat-form-field>
+        >Match By Name</mat-slide-toggle>
+      </div>
     </div>
     <div class="d-flex justify-content-around">
       <button
         type="submit"
         color="primary"
         mat-raised-button
         [disabled]="!form.valid || loading"
-        >
+      >
         {{ loading ? 'Importing...' : 'Import' }}
       </button>
       <button type="reset" color="primary" mat-raised-button (click)="cancel()">

src/app/components/admin-app/admin-app-view-import/admin-app-view-import.component.scss

@@ -1,5 +1,12 @@
 /*
-Copyright 2021 Carnegie Mellon University. All Rights Reserved. 
+Copyright 2021 Carnegie Mellon University. All Rights Reserved.
  Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 */
 
+.d-flex.gap-2 {
+  padding-block: 8px;
+}
+
+.d-flex.justify-content-around {
+  padding-block: 8px;
+}