From 5f008b4223de83d65176eeb256e0bf448f6df754 Mon Sep 17 00:00:00 2001
From: mengw15 <125719918+mengw15@users.noreply.github.com>
Date: Mon, 16 Sep 2024 17:00:33 -0700
Subject: [PATCH 1/6] first version

---
 .../input-autocomplete.component.html         | 21 ++++++++++++++++++-
 .../input-autocomplete.component.scss         | 14 +++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
index b8525184ca9..39e3591ee7f 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
@@ -1,4 +1,4 @@
-<input
+<!-- <input
   nz-input
   [readOnly]="isFileSelectionEnabled"
   required
@@ -10,4 +10,23 @@
   role="alert"
   *ngIf="props.showError && formControl.errors">
   <formly-validation-message [field]="field"></formly-validation-message>
+</div> -->
+
+<div class="input-autocomplete-container">
+  <input
+    nz-input
+    [readOnly]="isFileSelectionEnabled"
+    required
+    [formControl]="formControl"
+    [formlyAttributes]="field"
+  />
+<button nz-button nzType="primary" nzSize="small" (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()">
+  Select File
+</button>  
+</div>
+<div
+class="alert alert-danger"
+role="alert"
+*ngIf="props.showError && formControl.errors">
+<formly-validation-message [field]="field"></formly-validation-message>
 </div>
diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
index c7acb4bf6e7..d229191bfa6 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
@@ -1,3 +1,17 @@
 mat-form-field {
   width: 100%;
 }
+.input-autocomplete-container {
+  display: flex;
+  align-items: center; 
+  width: 100%; 
+
+  input {
+    flex: 1; 
+    margin-right: 10px; 
+  }
+
+  button {
+    white-space: nowrap; 
+  }
+}
\ No newline at end of file

From 18c64b1cbc185fb4a4cdde1044589c723d8699b6 Mon Sep 17 00:00:00 2001
From: mengw15 <125719918+mengw15@users.noreply.github.com>
Date: Mon, 16 Sep 2024 18:15:58 -0700
Subject: [PATCH 2/6] second version, hide input box when no file selected

---
 .../input-autocomplete/input-autocomplete.component.html      | 2 +-
 .../input-autocomplete/input-autocomplete.component.ts        | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
index 39e3591ee7f..14a480dbb03 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
@@ -13,7 +13,7 @@
 </div> -->
 
 <div class="input-autocomplete-container">
-  <input
+  <input *ngIf="selectedFilePath"
     nz-input
     [readOnly]="isFileSelectionEnabled"
     required
diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts
index 2477ac2da00..338661eeee4 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts
@@ -49,4 +49,8 @@ export class InputAutoCompleteComponent extends FieldType<FieldTypeConfig> {
   get isFileSelectionEnabled(): boolean {
     return environment.userSystemEnabled;
   }
+
+  get selectedFilePath(): string | null {
+    return this.formControl.value; 
+  }
 }

From bda0333965883b55741694abe96089f4c7f71fa2 Mon Sep 17 00:00:00 2001
From: mengw15 <125719918+mengw15@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:36:46 -0700
Subject: [PATCH 3/6] select file and reselect file. text

---
 .../input-autocomplete/input-autocomplete.component.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
index 14a480dbb03..57c48f1910b 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
@@ -21,7 +21,7 @@
     [formlyAttributes]="field"
   />
 <button nz-button nzType="primary" nzSize="small" (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()">
-  Select File
+  {{ selectedFilePath ? 'Reselect File' : 'Select File' }}
 </button>  
 </div>
 <div

From d8c3bda3872bc2c77be3fb2a29de414ca3f50feb Mon Sep 17 00:00:00 2001
From: mengw15 <125719918+mengw15@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:43:51 -0700
Subject: [PATCH 4/6] fmt fix

---
 .../input-autocomplete.component.html         | 38 +++++++------------
 .../input-autocomplete.component.scss         | 12 +++---
 .../input-autocomplete.component.ts           |  2 +-
 3 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
index 57c48f1910b..85107a0cc9b 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
@@ -1,32 +1,22 @@
-<!-- <input
-  nz-input
-  [readOnly]="isFileSelectionEnabled"
-  required
-  [formControl]="formControl"
-  [formlyAttributes]="field"
-  (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()" />
-<div
-  class="alert alert-danger"
-  role="alert"
-  *ngIf="props.showError && formControl.errors">
-  <formly-validation-message [field]="field"></formly-validation-message>
-</div> -->
-
 <div class="input-autocomplete-container">
-  <input *ngIf="selectedFilePath"
+  <input
+    *ngIf="selectedFilePath"
     nz-input
     [readOnly]="isFileSelectionEnabled"
     required
     [formControl]="formControl"
-    [formlyAttributes]="field"
-  />
-<button nz-button nzType="primary" nzSize="small" (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()">
-  {{ selectedFilePath ? 'Reselect File' : 'Select File' }}
-</button>  
+    [formlyAttributes]="field" />
+  <button
+    nz-button
+    nzType="primary"
+    nzSize="small"
+    (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()">
+    {{ selectedFilePath ? 'Reselect File' : 'Select File' }}
+  </button>
 </div>
 <div
-class="alert alert-danger"
-role="alert"
-*ngIf="props.showError && formControl.errors">
-<formly-validation-message [field]="field"></formly-validation-message>
+  class="alert alert-danger"
+  role="alert"
+  *ngIf="props.showError && formControl.errors">
+  <formly-validation-message [field]="field"></formly-validation-message>
 </div>
diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
index d229191bfa6..58f5a52df1b 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
@@ -3,15 +3,15 @@ mat-form-field {
 }
 .input-autocomplete-container {
   display: flex;
-  align-items: center; 
-  width: 100%; 
+  align-items: center;
+  width: 100%;
 
   input {
-    flex: 1; 
-    margin-right: 10px; 
+    flex: 1;
+    margin-right: 10px;
   }
 
   button {
-    white-space: nowrap; 
+    white-space: nowrap;
   }
-}
\ No newline at end of file
+}
diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts
index 338661eeee4..4b86b0ed135 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.ts
@@ -51,6 +51,6 @@ export class InputAutoCompleteComponent extends FieldType<FieldTypeConfig> {
   }
 
   get selectedFilePath(): string | null {
-    return this.formControl.value; 
+    return this.formControl.value;
   }
 }

From 4bccbaddb98c411aec7fecad6c1c3772953787f8 Mon Sep 17 00:00:00 2001
From: mengw15 <125719918+mengw15@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:27:23 -0700
Subject: [PATCH 5/6] change the button color

---
 .../input-autocomplete.component.html              |  2 +-
 .../input-autocomplete.component.scss              | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
index 85107a0cc9b..082fc687369 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.html
@@ -8,7 +8,7 @@
     [formlyAttributes]="field" />
   <button
     nz-button
-    nzType="primary"
+    class="file-select-button"
     nzSize="small"
     (click)="isFileSelectionEnabled && onClickOpenFileSelectionModal()">
     {{ selectedFilePath ? 'Reselect File' : 'Select File' }}
diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
index 58f5a52df1b..eab6e878092 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
@@ -14,4 +14,18 @@ mat-form-field {
   button {
     white-space: nowrap;
   }
+
+  .file-select-button {
+    border: 2px solid #1890ff; 
+    color: #1890ff; 
+
+    &:hover {
+      background-color: #e6f7ff;  
+      border-color: #1890ff;
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); 
+    }
+  }
 }

From 1a5aa59516b4edd5d5d338691076096da8080a7e Mon Sep 17 00:00:00 2001
From: mengw15 <125719918+mengw15@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:37:44 -0700
Subject: [PATCH 6/6] fmt fix

---
 .../input-autocomplete/input-autocomplete.component.scss  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
index eab6e878092..e665119950a 100644
--- a/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
+++ b/core/gui/src/app/workspace/component/input-autocomplete/input-autocomplete.component.scss
@@ -16,16 +16,16 @@ mat-form-field {
   }
 
   .file-select-button {
-    border: 2px solid #1890ff; 
-    color: #1890ff; 
+    border: 2px solid #1890ff;
+    color: #1890ff;
 
     &:hover {
-      background-color: #e6f7ff;  
+      background-color: #e6f7ff;
       border-color: #1890ff;
     }
 
     &:focus {
-      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); 
+      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
     }
   }
 }