Andy/radio button toggle (#2380)

* Add ability to update a jobs project name

* fix: formatting

* Add ability to nuke all loaded jobs

* Make Help more easily seen on Filter's panel.

* DS-6336 Text modified to be translatable.

* Lint space

* feat: Update to use jobs patch endpoint

* Update src/app/components/filters-dropdown/dataset-filters/dataset-filters.component.scss

Co-authored-by: Copilot <[email protected]>

* Round 1 of revamping the UI

* Fix console error related to translation.

* Bulk rename uses new dialog

* npm run lint -- --fix

* On Demand search reloads after bulk rename

* npm run lint -- --fix

* Resolving issues from merging with test

* Snackbar message for renaming jobs

* Adding multi-lingual support to rename dialog

And a few other UI tweaks.

* Edit Validation

Added checks for empty project name entry or only spaces. Also validate that the jobs were successfully renamed and provided error handling. Will provide error notification with toast.

* Update src/app/services/hyp3/hyp3-api.service.ts

Co-authored-by: Copilot <[email protected]>

* Update src/app/store/scenes/scenes.action.ts

Co-authored-by: Copilot <[email protected]>

* Fix for flight direction graphics not appearing in Displacement

I think this is an unreported bug resulting from the recent Angular upgrade.

* Show projects that are going to be renamed with the bulk operation.

* Update uniqueProjectNames filtering

* Fix: update job count in dialog

* Fix single job rename

* Many Changes

* Added list of projects and associated job counts in a sortable table
* Limited project name input to 100 characters
* Prevent user from changing names of projects for other users

* Progress Bar

I've implemented a two-phase dialog that handles the rename operation internally with a determinate progress bar.

* Deterministic Progress Bar

The Project Rename dialog box now is augmented with a couple more screens indicating renaming progress and completion.

* UI Improvements

* Auto-focus the input field
* Show the new name in the confirmation message

* Show specific project names if failed

I've implemented the feature to show which specific project names failed to rename in the completion phase.

* Show Time Estimate for Bulk Rename Completion

I've implemented the estimated time remaining feature for large batch rename operations. Here's what was added:

How it works:
The estimated time is calculated based on the elapsed time and number of completed batches
It only displays for operations with 1000+ jobs (to avoid showing for small, quick operations)
The time is displayed in a user-friendly format (e.g., "< 1 min", "~1 min", "~5 min")

* Project Rename Title Updated

Updated the table to William's suggestions.

* npm run lint -- --fix

* Update src/app/store/scenes/scenes.action.ts

Co-authored-by: William Horn <[email protected]>

* Update src/app/services/hyp3/hyp3-api.service.ts

Co-authored-by: William Horn <[email protected]>

* Created three named interfaces at the top of hyp3-api.service.ts

* RenameProgressInfo - Progress info with percent and estimated time remaining
* RenameResult - Final result with success/failed counts and failed project names
*RenameWithProgressResult - The composite return type containing both observables

I also changed a 'sneaky' 3 into a constant

* Update src/app/components/shared/project-name-dialog/project-name-dialog.component.ts

Co-authored-by: William Horn <[email protected]>

* Tyler Suggestions

Fixed - Red toast regression
Fixed - Missing unnamed projects

* Tyler Suggestions #2

Fixed - Empty string validation feedback
Fixed - Checkbox disclaimer with empty string

* Tyler Suggestions #3

Fixed - Remove dialog service abstraction
Fixed - Convert getter to signal/computed

* Tyler Suggestions #4

Fixed - Use SubSink pattern consistently
Fixed - Moved constructor logic to ngOnInit

* Tyler Suggestions #5

Fixed - Material Table with Sorting in-place

Reviewing the idea of using the Material Stepper consideration, I don't think it is a good fit. The phases are not user-navigated steps, they're system-driven and there is no option for backward navigation.

* npm run lint -- --fix

* Conformity & Best Practices

#2 - Removed stale SCSS styles: Cleaned up .sortable, .sort-indicator, .projects-table-body-container, and custom table styling that was no longer needed after switching to Material table

* Made dialog injects private: Changed dialogRef and data from public to private to match codebase pattern

* Added readonly to displayedColumns: Added readonly modifier since the array never changes

* Fixed track function: Changed track name to track $index to handle potential duplicate project names in the failed list

* Made "(unnamed)" multilingual

* Tweaks

Made the Project Rename table sorted by Project Name by default and eliminated the use of ::ng-deep in the Project Rename scss files.

* Conformity & Best Practices

* Removed stale SCSS styles: Cleaned up .sortable, .sort-indicator, .projects-table-body-container, and custom table styling that was no longer needed after switching to Material table

* Made dialog injects private: Changed dialogRef and data from public to private to match codebase pattern

* Added readonly to displayedColumns: Added readonly modifier since the array never changes

* Fixed track function: Changed track name to track $index to handle potential duplicate project names in the failed list

* Made "(unnamed)" multilingual

* Tweaks

Made the Project Rename table sorted by Project Name by default and eliminated the use of ::ng-deep in the Project Rename scss files.

* npm run lint -- --fix

* Made the table header 'sticky'

* Fixed Table Header for Dark-Theme

* Show estimated time for 5+ jobs

It was 1000+ before but Tools wants to see it always.

* Warn about Abort

I added a @HostListener for the window:beforeunload event that triggers only when the dialog is in the processing phase.

This will:

- Show the browser's native "Leave site?" confirmation dialog when the user tries to close the tab/window or navigate away
- Only trigger during the processing phase - users can freely close during input, complete, or error phases
- Let the browser handle the UI (modern browsers don't allow custom messages for security reasons)

* Add toggle for removing project names in update dialog

* feat(project-name-dialog): replace button toggle with radio buttons

- Replace mat-button-toggle-group with mat-radio-group for cleaner UX
- Input field now visually nested under "Rename" radio option
- Add singular/plural translation keys for radio labels (en, es, de)
- Add accessible aria-label to radio group
- Update styles for radio group layout and disabled state
- Add docs/ to .gitignore

* Update src/assets/i18n/es.json

Co-authored-by: Copilot <[email protected]>

* Update src/app/components/shared/project-name-dialog/project-name-dialog.component.scss

Co-authored-by: Copilot <[email protected]>

* Bug Fix

A single job rename didn't reflect the count of '1' in the dialog for renaming a job. It now does.

* Project Name Extras

Logic was added to show the Project Name in the right metadata column to jobs without Project names and to give the user the ability to add a name.

Several other lint and code cleanup tasks were done as well.

---------

Co-authored-by: William Horn <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 3 people

src/app/components/results-menu/scene-files/scene-file/scene-file.component.html

@@ -1,40 +1,4 @@
 <mat-list-item (mouseenter)="isHovered = true" (mouseleave)="isHovered = false">
-  @if (false) {
-    <ng-container matListItemIcon>
-      @if (!isUnzipLoading && !isOpen) {
-        <mat-icon
-          (click)="onLoadUnzippedProduct()"
-          [matTooltip]="unzipTooltip(isUserLoggedIn, hasAccessToRestrictedData)"
-          [class.clickable]="
-            !isUnzipDisabled(isUserLoggedIn, hasAccessToRestrictedData)
-          "
-          [class.fainter-text]="
-            isUnzipDisabled(isUserLoggedIn, hasAccessToRestrictedData)
-          "
-          [class.disabled-cursor]="
-            isUnzipDisabled(isUserLoggedIn, hasAccessToRestrictedData)
-          "
-        >
-          keyboard_arrow_right
-        </mat-icon>
-      }
-      @if (isOpen) {
-        <mat-icon
-          (click)="onCloseProduct()"
-          matTooltip="Close contents"
-          class="clickable"
-        >
-          keyboard_arrow_down
-        </mat-icon>
-      }
-      @if (isUnzipLoading) {
-        <div>
-          <fa-icon icon="spinner" [pulse]="true"></fa-icon>
-        </div>
-      }
-    </ng-container>
-  }
-
   <ng-container matListItemIcon>
     <mat-icon mat-icon-button disabled></mat-icon>
   </ng-container>
@@ -88,7 +52,6 @@
           prompt="{{ 'COPY_FILE_ID' | translate }}"
         >
         </app-copy-to-clipboard>
-        <span></span>
         <app-copy-to-clipboard
           prompt="copy S3 URL"
           class="clipboard-icon"
@@ -147,18 +110,22 @@
 
   @if (product.metadata.job) {
     <ng-container>
-      @if (product.metadata.job.name) {
-        <div matListItemLine>
-          <b>{{ 'PROJECT_NAME' | translate }}:</b>
+      <div class="job-metadata-first" matListItemLine>
+        <b>{{ 'PROJECT_NAME' | translate }}:</b>
+        @if (product.metadata.job.name) {
           {{ product.metadata.job.name }}
-          <button
-            mat-icon-button
-            (click)="onEditProjectName(product.metadata.job.name)"
-          >
-            <mat-icon>edit</mat-icon>
-          </button>
-        </div>
-      }
+        } @else {
+          &nbsp;<span class="unnamed-project">{{
+            'PROJECT_NAME_UNNAMED' | translate
+          }}</span>
+        }
+        <button
+          mat-icon-button
+          (click)="onEditProjectName(product.metadata.job.name || '')"
+        >
+          <mat-icon>edit</mat-icon>
+        </button>
+      </div>
 
       <div matListItemLine>
         <b>{{ 'JOB_SUBMITTED' | translate }}:</b>
@@ -185,8 +152,8 @@
     </ng-container>
   }
 
-  @for (param of paramsList; track param) {
-    <div matListItemLine>
+  @for (param of paramsList; track param; let first = $first) {
+    <div [class.params-first]="first" matListItemLine>
       <b>{{ param.name }}:</b> {{ param.val }}
     </div>
   }
@@ -215,12 +182,13 @@
   }
 
   @if ((searchType$ | async) === searchTypes.CUSTOM_PRODUCTS) {
-    <ng-container style="margin-right: 10px" matListItemMeta>
+    <ng-container matListItemMeta>
       @if (isExpired(product.metadata.job)) {
         <button
           [matMenuTriggerFor]="expiredJobs"
           mat-icon-button
           matListItemMeta
+          style="margin-right: 10px"
         >
           <mat-icon
             class="hype-icon-button clickable"

src/app/components/results-menu/scene-files/scene-file/scene-file.component.scss

@@ -2,9 +2,10 @@
 
 .icon-margin {
   margin-left: 5px;
+
   span {
     margin: 0 5px;
-}
+  }
 }
 
 .disabled-cursor {
@@ -34,3 +35,16 @@
     color: themed('light-black');
   }
 }
+
+.unnamed-project {
+  font-style: italic;
+  opacity: 0.7;
+}
+
+.job-metadata-first {
+  margin-top: -18px;
+}
+
+.params-first {
+  margin-top: -8px;
+}

src/app/components/results-menu/scene-files/scene-file/scene-file.component.ts

@@ -255,8 +255,9 @@ export class SceneFileComponent implements OnInit, OnDestroy {
     return false;
   }
 
-  public prodDownloaded(_product) {
-    // Do nothing
+  // Event handler required by template but no action needed
+  public prodDownloaded(_product: models.CMRProduct): void {
+    // Intentionally empty - event binding required but no action needed
   }
 
   public onSearchProduct() {

src/app/components/results-menu/scene-files/scene-files.component.scss

@@ -4,7 +4,7 @@ $prod-row-height: 58px;
 $thumb-size: 50px;
 
 .products-list {
-  padding-top: 0;
+  padding-top: 8px;
   padding-bottom: 0;
   overflow-y: auto;
 }

src/app/components/shared/selectors/search-type-selector/search-type-selector.component.ts

@@ -242,8 +242,6 @@ export class SearchTypeSelectorComponent implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
-  public onSearchTypeMenuOpen() {}
-
   ngOnDestroy() {
     this.subs.unsubscribe();
   }

src/app/models/cmr-product.model.ts

@@ -78,7 +78,7 @@ export interface CMRProductMetadata {
   additionalUrls?: string[] | null;
   s3URI?: string;
   s3Urls?: string[] | null;
-  fileSizes?: {} | null;
+  fileSizes?: Record<string, { bytes: number }> | null;
   parentID: string;
 
   // ARIA S1 GUNW