From b03300689a79579df223cf74c05a825566abdeda Mon Sep 17 00:00:00 2001
From: Jordan Reimer <zofskeez@gmail.com>
Date: Thu, 14 Sep 2023 12:41:09 -0600
Subject: [PATCH] updates file-to-array-buffer component to glimmer and fixes
 flaky issue in test runs (#23081)

---
 ui/app/components/file-to-array-buffer.js     | 83 +++++++++----------
 .../components/file-to-array-buffer.hbs       | 83 +++++++++----------
 2 files changed, 79 insertions(+), 87 deletions(-)

diff --git a/ui/app/components/file-to-array-buffer.js b/ui/app/components/file-to-array-buffer.js
index eeb458a697..5b6e0728e4 100644
--- a/ui/app/components/file-to-array-buffer.js
+++ b/ui/app/components/file-to-array-buffer.js
@@ -3,7 +3,9 @@
  * SPDX-License-Identifier: BUSL-1.1
  */
 
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import filesize from 'filesize';
 
 /**
@@ -15,54 +17,45 @@ import filesize from 'filesize';
  * ```js
  *   <FileToArrayBuffer @onChange={{action (mut file)}} />
  * ```
- * @param onChange=null {Function} - The function to call when the file read is complete. This function
- * receives the file as a JS ArrayBuffer
- * @param [label=null {String}] - Text to use as the label for the file input
- * @param [fileHelpText=null {String} - Text to use as help under the file input
+ * @param {function} onChange - The function to call when the file read is complete. Receives the file as a JS ArrayBuffer
+ * @param {string} [label] - Text to use as the label for the file input
+ * @param {string} [fileHelpText] - Text to use as help under the file input
  *
  */
-export default Component.extend({
-  classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
-  onChange: () => {},
-  label: null,
-  fileHelpText: null,
-
-  file: null,
-  filename: null,
-  fileSize: null,
-  fileLastModified: null,
+export default class FileToArrayBufferComponent extends Component {
+  @tracked filename = null;
+  @tracked fileSize = null;
+  @tracked fileLastModified = null;
 
   readFile(file) {
     const reader = new FileReader();
-    // raft-snapshot-restore test was failing on CI trying to send action on destroyed object
-    // ensure that the component has not been torn down prior to sending onChange action
-    if (!this.isDestroyed && !this.isDestroying) {
-      reader.onload = () => this.send('onChange', reader.result, file);
-    }
+    reader.onload = () => {
+      // raft-snapshot-restore test was failing on CI trying to invoke fileChange on destroyed object
+      // ensure that the component has not been torn down
+      if (!this.isDestroyed && !this.isDestroying) {
+        this.fileChange(reader.result, file);
+      }
+    };
     reader.readAsArrayBuffer(file);
-  },
+  }
 
-  actions: {
-    pickedFile(e) {
-      const { files } = e.target;
-      if (!files.length) {
-        return;
-      }
-      for (let i = 0, len = files.length; i < len; i++) {
-        this.readFile(files[i]);
-      }
-    },
-    clearFile() {
-      this.send('onChange');
-    },
-    onChange(fileAsBytes, fileMeta) {
-      const { name, size, lastModifiedDate } = fileMeta || {};
-      const fileSize = size ? filesize(size) : null;
-      this.set('file', fileAsBytes);
-      this.set('filename', name);
-      this.set('fileSize', fileSize);
-      this.set('fileLastModified', lastModifiedDate);
-      this.onChange(fileAsBytes, name);
-    },
-  },
-});
+  @action
+  pickedFile(e) {
+    const { files } = e.target;
+    if (!files.length) {
+      return;
+    }
+    for (let i = 0, len = files.length; i < len; i++) {
+      this.readFile(files[i]);
+    }
+  }
+
+  @action
+  fileChange(fileAsBytes, fileMeta) {
+    const { name, size, lastModifiedDate } = fileMeta || {};
+    this.filename = name;
+    this.fileSize = size ? filesize(size) : null;
+    this.fileLastModified = lastModifiedDate;
+    this.args.onChange(fileAsBytes, name);
+  }
+}
diff --git a/ui/app/templates/components/file-to-array-buffer.hbs b/ui/app/templates/components/file-to-array-buffer.hbs
index 889b05f6b3..768e417069 100644
--- a/ui/app/templates/components/file-to-array-buffer.hbs
+++ b/ui/app/templates/components/file-to-array-buffer.hbs
@@ -2,49 +2,48 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
-
-<div class="field">
-  <div class="control is-expanded">
-    <label class="is-label">
-      {{#if this.label}}
-        {{this.label}}
-      {{/if}}
-    </label>
-    <div class="file is-fullwidth">
-      <div class="file-label" aria-label="Choose a file">
-        <input id="file-input" class="file-input" type="file" onchange={{action "pickedFile"}} data-test-file-input />
-        <label for="file-input" class="file-cta button">
-          <Icon @name="upload" class="has-light-grey-text" />
-          Choose a file…
-        </label>
-        <span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
-          {{or this.filename "No file chosen"}}
-        </span>
-        {{#if this.filename}}
-          <button
-            type="button"
-            class="file-delete-button"
-            aria-label="Clear file selection"
-            {{action "clearFile"}}
-            data-test-text-clear
-          >
-            <Icon @name="x-circle" />
-          </button>
-        {{/if}}
+<div class="box is-fullwidth is-marginless is-shadowless">
+  <div class="field">
+    <div class="control is-expanded">
+      <label class="is-label">
+        {{@label}}
+      </label>
+      <div class="file is-fullwidth">
+        <div class="file-label" aria-label="Choose a file">
+          <input id="file-input" class="file-input" type="file" {{on "change" this.pickedFile}} data-test-file-input />
+          <label for="file-input" class="file-cta button">
+            <Icon @name="upload" class="has-light-grey-text" />
+            Choose a file…
+          </label>
+          <span class="file-name has-text-grey-dark" data-test-text-file-input-label={{true}}>
+            {{or this.filename "No file chosen"}}
+          </span>
+          {{#if this.filename}}
+            <button
+              type="button"
+              class="file-delete-button"
+              aria-label="Clear file selection"
+              {{on "click" this.fileChange}}
+              data-test-text-clear
+            >
+              <Icon @name="x-circle" />
+            </button>
+          {{/if}}
+        </div>
       </div>
     </div>
+    {{#if this.filename}}
+      <p class="help has-text-grey">
+        This file is
+        {{this.fileSize}}
+        and was created on
+        {{date-format this.fileLastModified "MMM dd, yyyy hh:mm:ss a"}}.
+      </p>
+    {{/if}}
+    {{#if @fileHelpText}}
+      <p class="help has-text-grey">
+        {{@fileHelpText}}
+      </p>
+    {{/if}}
   </div>
-  {{#if this.filename}}
-    <p class="help has-text-grey">
-      This file is
-      {{this.fileSize}}
-      and was created on
-      {{date-format this.fileLastModified "MMM dd, yyyy hh:mm:ss a"}}.
-    </p>
-  {{/if}}
-  {{#if @fileHelpText}}
-    <p class="help has-text-grey">
-      {{@fileHelpText}}
-    </p>
-  {{/if}}
 </div>
\ No newline at end of file