From 424b3707ee4d244650351a896d42c0958b4ef41e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabian=20B=C3=BChler?=
 <fabian.buehler@iaas.uni-stuttgart.de>
Date: Mon, 5 Aug 2024 12:45:05 +0200
Subject: [PATCH] Improve template tab form validity checking

---
 .../template-details.component.html                |  8 +++++---
 .../template-details.component.sass                |  3 +++
 .../template-details/template-details.component.ts | 14 +++++++++++++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/app/components-small/template-details/template-details.component.html b/src/app/components-small/template-details/template-details.component.html
index 5e3a9e2..c716a9a 100644
--- a/src/app/components-small/template-details/template-details.component.html
+++ b/src/app/components-small/template-details/template-details.component.html
@@ -12,6 +12,7 @@ <h2>Template Tab</h2>
     <mat-form-field class="form-field" [hidden]="!templateForm.value.location || templateForm.value.location === 'workspace'">
         <mat-label>Tab Group:</mat-label>
         <input matInput formControlName="locationExtra">
+        <mat-hint>The group key of the tab this tab should be grouped under. (Use '.' to separate group keys for nested groups.)</mat-hint>
     </mat-form-field>
     <mat-form-field class="form-field">
         <mat-label>Name:</mat-label>
@@ -35,10 +36,11 @@ <h2>Template Tab</h2>
     </div>
     <mat-form-field class="form-field">
         <mat-label>Group Key:</mat-label>
-        <input matInput formControlName="groupKey">
-        <mat-hint>Establish this tab as its own tab group.</mat-hint>
+        <input matInput pattern="[^\.]*" formControlName="groupKey">
+        <mat-hint>Establish this tab as its own tab group. (Cannot contain '.')</mat-hint>
     </mat-form-field>
     <qhana-plugin-filter-editor [tabLink]="tabLink"
         (filterEmitter)="filterString = $event" [hidden]="templateForm.value.groupKey"></qhana-plugin-filter-editor>
-    <button mat-raised-button class="submit-button" type="submit" color="primary">{{templateLink ? 'Create' : 'Update'}} Tab</button>
+    <p class="form-error" *ngIf="templateForm?.errors?.groupKeyForbidden">Group key cannot be used in experiment workspace tabs!</p>
+    <button mat-raised-button class="submit-button" type="submit" color="primary" [disabled]="templateForm.errors">{{templateLink ? 'Create' : 'Update'}} Tab</button>
 </form>
diff --git a/src/app/components-small/template-details/template-details.component.sass b/src/app/components-small/template-details/template-details.component.sass
index 4ed5a3f..f26c304 100644
--- a/src/app/components-small/template-details/template-details.component.sass
+++ b/src/app/components-small/template-details/template-details.component.sass
@@ -19,3 +19,6 @@
 
 .submit-button
     margin-block-start: 2rem
+
+.form-error
+    color: var(--warn-text)
diff --git a/src/app/components-small/template-details/template-details.component.ts b/src/app/components-small/template-details/template-details.component.ts
index 92beda0..f22b5d5 100644
--- a/src/app/components-small/template-details/template-details.component.ts
+++ b/src/app/components-small/template-details/template-details.component.ts
@@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { FormBuilder, FormControl, FormGroup, ValidationErrors, Validators } from '@angular/forms';
 import { ApiLink, ApiResponse } from 'src/app/services/api-data-types';
 import { PluginRegistryBaseService } from 'src/app/services/registry.service';
 import { TAB_GROUP_NAME_OVERRIDES, TemplateApiObject, TemplateTabApiObject } from 'src/app/services/templates.service';
@@ -60,6 +60,18 @@ export class TemplateDetailsComponent implements OnInit {
     constructor(private registry: PluginRegistryBaseService, private fb: FormBuilder) { }
 
     ngOnInit() {
+        this.templateForm.addValidators((control): ValidationErrors | null => {
+            const loc = control.get("location")?.getRawValue() ?? "";
+            if (loc === "workspace") {
+                const groupKey = control.get("groupKey")?.getRawValue() ?? "";
+                if (groupKey) {
+                    return {
+                        groupKeyForbidden: true,
+                    };
+                }
+            }
+            return null;
+        });
         if (this.tabLink != null) {
             this.registry.getByApiLink<TemplateTabApiObject>(this.tabLink).then(response => {
                 const location = response?.data?.location ?? this.initialValues.location