updates file-to-array-buffer component to glimmer and fixes flaky issue in test runs (#23081)

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,34 +17,29 @@ 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
+ * @param {function} onChange - The function to call when the file read is complete. Receives the file as a JS ArrayBuffer
- * receives the file as a JS ArrayBuffer
+ * @param {string} [label] - Text to use as the label for the file input
- * @param [label=null {String}] - Text to use as the label for the file input
+ * @param {string} [fileHelpText] - Text to use as help under the file input
- * @param [fileHelpText=null {String} - Text to use as help under the file input
  *
  */
-export default Component.extend({
+export default class FileToArrayBufferComponent extends Component {
-  classNames: ['box', 'is-fullwidth', 'is-marginless', 'is-shadowless'],
+  @tracked filename = null;
-  onChange: () => {},
+  @tracked fileSize = null;
-  label: null,
+  @tracked fileLastModified = null;
-  fileHelpText: null,
-
-  file: null,
-  filename: null,
-  fileSize: null,
-  fileLastModified: null,
 
   readFile(file) {
     const reader = new FileReader();
-    // raft-snapshot-restore test was failing on CI trying to send action on destroyed object
+    reader.onload = () => {
-    // ensure that the component has not been torn down prior to sending onChange action
+      // 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) {
-      reader.onload = () => this.send('onChange', reader.result, file);
+        this.fileChange(reader.result, file);
       }
+    };
     reader.readAsArrayBuffer(file);
-  },
+  }
 
-  actions: {
+  @action
   pickedFile(e) {
     const { files } = e.target;
     if (!files.length) {
@@ -51,18 +48,14 @@ export default Component.extend({
     for (let i = 0, len = files.length; i < len; i++) {
       this.readFile(files[i]);
     }
-    },
+  }
-    clearFile() {
+
-      this.send('onChange');
+  @action
-    },
+  fileChange(fileAsBytes, fileMeta) {
-    onChange(fileAsBytes, fileMeta) {
     const { name, size, lastModifiedDate } = fileMeta || {};
-      const fileSize = size ? filesize(size) : null;
+    this.filename = name;
-      this.set('file', fileAsBytes);
+    this.fileSize = size ? filesize(size) : null;
-      this.set('filename', name);
+    this.fileLastModified = lastModifiedDate;
-      this.set('fileSize', fileSize);
+    this.args.onChange(fileAsBytes, name);
-      this.set('fileLastModified', lastModifiedDate);
+  }
-      this.onChange(fileAsBytes, name);
+}
-    },
-  },
-});

ui/app/templates/components/file-to-array-buffer.hbs

@@ -2,17 +2,15 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: BUSL-1.1
 ~}}
-
+<div class="box is-fullwidth is-marginless is-shadowless">
   <div class="field">
     <div class="control is-expanded">
       <label class="is-label">
-      {{#if this.label}}
+        {{@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 />
+          <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…
@@ -25,7 +23,7 @@
               type="button"
               class="file-delete-button"
               aria-label="Clear file selection"
-            {{action "clearFile"}}
+              {{on "click" this.fileChange}}
               data-test-text-clear
             >
               <Icon @name="x-circle" />
@@ -48,3 +46,4 @@
       </p>
     {{/if}}
   </div>
+</div>