feat(ui): split submit into metadata selector + submit

angular.json

@@ -24,13 +24,14 @@
               "base": "dist/datasync"
             },
             "index": "src/index.html",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.scss"
+            ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
             ],
@@ -90,14 +91,15 @@
           "builder": "@angular/build:karma",
           "options": {
             "main": "src/test.ts",
-            "polyfills": [
-              "src/polyfills.ts"
-            ],
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.spec.json",
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],
+            "styles": [
+              "node_modules/bootstrap/dist/css/bootstrap.min.css",
+              "src/styles.scss"
+            ],
             "scripts": []
           }
         }

eslint.config.mjs

@@ -10,31 +10,34 @@ export default [
   {
     rules: {
       // TypeScript specific rules (without type information)
-      "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
       "@typescript-eslint/no-explicit-any": "warn",
       "@typescript-eslint/prefer-for-of": "error",
-      
+
       // General code quality rules
       "prefer-const": "error",
       "no-var": "error",
       "prefer-arrow-callback": "error",
       "prefer-template": "error",
-      "no-console": ["warn", { "allow": ["warn", "error"] }],
-      
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+
       // Angular specific patterns
       "no-restricted-syntax": [
         "error",
         {
-          "selector": "CallExpression[callee.name='alert']",
-          "message": "Use proper notification system instead of alert()"
-        }
-      ]
-    }
+          selector: "CallExpression[callee.name='alert']",
+          message: "Use proper notification system instead of alert()",
+        },
+      ],
+    },
   },
   {
     files: ["src/**/*.spec.ts"],
     rules: {
-      "@typescript-eslint/no-explicit-any": "off"
-    }
-  }
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  },
 ];

karma.conf.js

@@ -4,7 +4,7 @@
 module.exports = function (config) {
   config.set({
     basePath: "",
-  frameworks: ["jasmine"],
+    frameworks: ["jasmine"],
     plugins: [
       require("karma-jasmine"),
       require("karma-chrome-launcher"),

src/app/app.component.spec.ts

@@ -1,7 +1,10 @@
 import { TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { PrimeNG } from 'primeng/config';
 

src/app/app.routs.ts

@@ -18,6 +18,13 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./submit/submit.component').then((m) => m.SubmitComponent),
   },
+  {
+    path: 'metadata-selector',
+    loadComponent: () =>
+      import('./metadata-selector/metadata-selector.component').then(
+        (m) => m.MetadataSelectorComponent,
+      ),
+  },
   {
     path: 'compute',
     loadComponent: () =>

src/app/compare/compare.component.spec.ts

@@ -1,5 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 
 import { CompareComponent } from './compare.component';

src/app/compare/compare.component.ts

@@ -1,5 +1,3 @@
-
-
 // Author: Eryk Kulikowski @ KU Leuven (2023). Apache 2.0 License
 
 import { Component, OnInit, OnDestroy, inject } from '@angular/core';
@@ -39,7 +37,7 @@ import { FilterItem, SubscriptionManager } from '../shared/types';
   templateUrl: './compare.component.html',
   styleUrls: ['./compare.component.scss'],
   imports: [
-  CommonModule,
+    CommonModule,
     ButtonDirective,
     Ripple,
     TreeTableModule,
@@ -49,12 +47,16 @@ import { FilterItem, SubscriptionManager } from '../shared/types';
     DatafileComponent,
   ],
 })
-export class CompareComponent implements OnInit, OnDestroy, SubscriptionManager {
+export class CompareComponent
+  implements OnInit, OnDestroy, SubscriptionManager
+{
   private readonly dataUpdatesService = inject(DataUpdatesService);
   private readonly dataStateService = inject(DataStateService);
   private readonly credentialsService = inject(CredentialsService);
   private readonly router = inject(Router);
-  private readonly folderActionUpdateService = inject(FolderActionUpdateService);
+  private readonly folderActionUpdateService = inject(
+    FolderActionUpdateService,
+  );
   private readonly pluginService = inject(PluginService);
   private readonly utils = inject(UtilsService);
 
@@ -136,7 +138,7 @@ export class CompareComponent implements OnInit, OnDestroy, SubscriptionManager
 
   ngOnDestroy(): void {
     // Clean up all subscriptions
-    this.subscriptions.forEach(sub => sub.unsubscribe());
+    this.subscriptions.forEach((sub) => sub.unsubscribe());
     this.subscriptions.clear();
   }
 
@@ -317,7 +319,11 @@ export class CompareComponent implements OnInit, OnDestroy, SubscriptionManager
 
   submit(): void {
     this.dataStateService.updateState(this.data);
-    this.router.navigate(['/submit']);
+    if (this.isNewDataset()) {
+      this.router.navigate(['/metadata-selector']);
+    } else {
+      this.router.navigate(['/submit']);
+    }
   }
 
   // UI helpers

src/app/compute/compute.component.spec.ts

@@ -1,5 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 

src/app/compute/compute.component.ts

@@ -38,13 +38,7 @@ import { ExecutablefileComponent } from '../executablefile/executablefile.compon
 import { AutosizeModule } from 'ngx-autosize';
 
 // RxJS
-import {
-  debounceTime,
-  firstValueFrom,
-  map,
-  Observable,
-  Subject,
-} from 'rxjs';
+import { debounceTime, firstValueFrom, map, Observable, Subject } from 'rxjs';
 
 // Constants and types
 import { APP_CONSTANTS } from '../shared/constants';
@@ -69,7 +63,9 @@ import { SubscriptionManager } from '../shared/types';
     AutosizeModule,
   ],
 })
-export class ComputeComponent implements OnInit, OnDestroy, SubscriptionManager {
+export class ComputeComponent
+  implements OnInit, OnDestroy, SubscriptionManager
+{
   private readonly dvObjectLookupService = inject(DvObjectLookupService);
   private readonly pluginService = inject(PluginService);
   dataService = inject(DataService);
@@ -145,23 +141,23 @@ export class ComputeComponent implements OnInit, OnDestroy, SubscriptionManager
               (err) =>
                 (this.doiItems = [
                   {
-                    label: `search failed: ${  err.message}`,
+                    label: `search failed: ${err.message}`,
                     value: err.message,
                   },
                 ]),
             ),
         error: (err) =>
           (this.doiItems = [
-            { label: `search failed: ${  err.message}`, value: err.message },
+            { label: `search failed: ${err.message}`, value: err.message },
           ]),
       });
   }
 
   ngOnDestroy(): void {
     // Clean up all subscriptions
-    this.subscriptions.forEach(sub => sub.unsubscribe());
+    this.subscriptions.forEach((sub) => sub.unsubscribe());
     this.subscriptions.clear();
-    
+
     // Clean up existing observable subscriptions
     this.datasetSearchResultsSubscription?.unsubscribe();
   }
@@ -234,7 +230,7 @@ export class ComputeComponent implements OnInit, OnDestroy, SubscriptionManager
       return;
     }
     this.doiItems = [
-      { label: `searching "${  searchTerm  }"...`, value: searchTerm },
+      { label: `searching "${searchTerm}"...`, value: searchTerm },
     ];
     this.datasetSearchSubject.next(searchTerm);
   }
@@ -267,7 +263,9 @@ export class ComputeComponent implements OnInit, OnDestroy, SubscriptionManager
         },
         error: (err) => {
           subscription.unsubscribe();
-          this.notificationService.showError(`Getting executable files failed: ${err.error}`);
+          this.notificationService.showError(
+            `Getting executable files failed: ${err.error}`,
+          );
         },
       });
   }
@@ -338,7 +336,9 @@ export class ComputeComponent implements OnInit, OnDestroy, SubscriptionManager
       error: (err) => {
         subscription.unsubscribe();
         this.loading = false;
-        this.notificationService.showError(`Getting computation results failed: ${err.error}`);
+        this.notificationService.showError(
+          `Getting computation results failed: ${err.error}`,
+        );
       },
     });
   }

src/app/connect/connect.component.spec.ts

@@ -1,5 +1,8 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import {
+  provideHttpClient,
+  withInterceptorsFromDi,
+} from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { provideNoopAnimations } from '@angular/platform-browser/animations';