From 768de03269882d0cd5f3b0d7803c819eaa219010 Mon Sep 17 00:00:00 2001
From: Sammy Chang <sammychang2185@gmail.com>
Date: Thu, 20 Oct 2022 07:13:21 -0700
Subject: [PATCH] [PS-1465] Fix #2806 - The "Import Data" page's file selector
 button cannot be translated (#3502)

* Add translations for en and fi to test with

* Fix file select not being translated

* Add more translations for en and fi to test with

* Update permission labels to locale version

* Revert forms.scss file

* Revert changes

* Specify file selector button type

Co-authored-by: Daniel James Smith <djsmith@web.de>
Co-authored-by: Daniel James Smith <djsmith85@users.noreply.github.com>
---
 .../app/tools/import-export/import.component.html   | 13 +++++++++++++
 .../src/app/tools/import-export/import.component.ts |  6 ++++++
 apps/web/src/locales/en/messages.json               |  6 ++++++
 3 files changed, 25 insertions(+)

diff --git a/apps/web/src/app/tools/import-export/import.component.html b/apps/web/src/app/tools/import-export/import.component.html
index ba2eb69925..15c1109654 100644
--- a/apps/web/src/app/tools/import-export/import.component.html
+++ b/apps/web/src/app/tools/import-export/import.component.html
@@ -291,12 +291,25 @@
     <div class="col-6">
       <div class="form-group">
         <label for="file">2. {{ "selectImportFile" | i18n }}</label>
+        <br />
+        <div class="file-selector">
+          <button
+            type="button"
+            class="btn btn-outline-primary"
+            onclick="document.getElementById('file').click()"
+          >
+            {{ "chooseFile" | i18n }}
+          </button>
+          {{ this.fileSelected ? this.fileSelected.name : ("noFileChosen" | i18n) }}
+        </div>
         <input
           type="file"
           id="file"
           class="form-control-file"
           name="file"
+          style="display: none"
           [disabled]="importBlockedByPolicy$ | async"
+          (change)="setSelectedFile($event)"
         />
       </div>
     </div>
diff --git a/apps/web/src/app/tools/import-export/import.component.ts b/apps/web/src/app/tools/import-export/import.component.ts
index 3f36223285..5c062b09fb 100644
--- a/apps/web/src/app/tools/import-export/import.component.ts
+++ b/apps/web/src/app/tools/import-export/import.component.ts
@@ -25,6 +25,7 @@ export class ImportComponent implements OnInit, OnDestroy {
   importOptions: ImportOption[];
   format: ImportType = null;
   fileContents: string;
+  fileSelected: File;
   formPromise: Promise<ImportError>;
   loading = false;
   importBlockedByPolicy$ = this.policyService.policyAppliesToActiveUser$(
@@ -184,6 +185,11 @@ export class ImportComponent implements OnInit, OnDestroy {
     });
   }
 
+  setSelectedFile(event: Event) {
+    const fileInputEl = <HTMLInputElement>event.target;
+    this.fileSelected = fileInputEl.files.length > 0 ? fileInputEl.files[0] : null;
+  }
+
   private async error(error: Error) {
     await Swal.fire({
       heightAuto: false,
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index ce8ea7e707..2a5646424f 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -1192,6 +1192,12 @@
   "selectImportFile": {
     "message": "Select the import file"
   },
+  "chooseFile": {
+    "message": "Choose File"
+  },
+  "noFileChosen": {
+    "message": "No file chosen"
+  },
   "orCopyPasteFileContents": {
     "message": "or copy/paste the import file contents"
   },