scottk/vault
1
0
Fork 0
mirror of https://github.com/optim-enterprises-bv/vault.git synced 2025-10-29 17:52:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jordan Reimer
2023-09-14 12:41:09 -06:00
committed by GitHub
parent 51b38cecf4
commit b03300689a
2 changed files with 79 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
ui/app/components/file-to-array-buffer.js
View File

@@ -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);
}
}

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

@@ -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>