From cff1918b5fcc8fe2cb1effe451b95933ceb35e59 Mon Sep 17 00:00:00 2001 From: claire bontempo <68122737+hellobontempo@users.noreply.github.com> Date: Fri, 9 Dec 2022 15:21:42 -0800 Subject: [PATCH] ui: glimmerize download button component (#18292) * initial glimmerization, delete toolbar-download-button component * remove extra line * cleanup component file * add data getter * delete toolbar download button component * add jsdoc to component * move class att directly to component, remove arg * remove content getter --- .../components/toolbar-download-button.hbs | 2 - ui/app/templates/vault/cluster/init.hbs | 2 +- .../templates/vault/cluster/policy/show.hbs | 9 +- .../core/addon/components/download-button.hbs | 3 + .../core/addon/components/download-button.js | 105 ++++++++++-------- .../components/toolbar-download-button.js | 21 ---- .../app/components/toolbar-download-button.js | 1 - ui/lib/kmip/addon/templates/configuration.hbs | 9 +- .../toolbar-download-button-test.js | 17 --- 9 files changed, 74 insertions(+), 95 deletions(-) delete mode 100644 ui/app/templates/components/toolbar-download-button.hbs create mode 100644 ui/lib/core/addon/components/download-button.hbs delete mode 100644 ui/lib/core/addon/components/toolbar-download-button.js delete mode 100644 ui/lib/core/app/components/toolbar-download-button.js delete mode 100644 ui/tests/integration/components/toolbar-download-button-test.js diff --git a/ui/app/templates/components/toolbar-download-button.hbs b/ui/app/templates/components/toolbar-download-button.hbs deleted file mode 100644 index b7fd647a7d..0000000000 --- a/ui/app/templates/components/toolbar-download-button.hbs +++ /dev/null @@ -1,2 +0,0 @@ -{{@actionText}} - \ No newline at end of file diff --git a/ui/app/templates/vault/cluster/init.hbs b/ui/app/templates/vault/cluster/init.hbs index 047795d132..a998a3df30 100644 --- a/ui/app/templates/vault/cluster/init.hbs +++ b/ui/app/templates/vault/cluster/init.hbs @@ -90,11 +90,11 @@ {{/if}} diff --git a/ui/app/templates/vault/cluster/policy/show.hbs b/ui/app/templates/vault/cluster/policy/show.hbs index 4422df40f0..7ea4179e24 100644 --- a/ui/app/templates/vault/cluster/policy/show.hbs +++ b/ui/app/templates/vault/cluster/policy/show.hbs @@ -23,12 +23,15 @@ - + > + Download policy + + {{#if (and (not-eq this.model.id "root") (or this.capabilities.canUpdate this.capabilities.canDelete))}} Edit policy diff --git a/ui/lib/core/addon/components/download-button.hbs b/ui/lib/core/addon/components/download-button.hbs new file mode 100644 index 0000000000..492809856e --- /dev/null +++ b/ui/lib/core/addon/components/download-button.hbs @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/ui/lib/core/addon/components/download-button.js b/ui/lib/core/addon/components/download-button.js index 326ea6fc5c..39737574f4 100644 --- a/ui/lib/core/addon/components/download-button.js +++ b/ui/lib/core/addon/components/download-button.js @@ -1,51 +1,62 @@ -import Component from '@ember/component'; -import { computed } from '@ember/object'; -import hbs from 'htmlbars-inline-precompile'; +import { action } from '@ember/object'; +import Component from '@glimmer/component'; +/** + * @module DownloadButton + * DownloadButton components are an action button used to download data. Both the action text and icon are yielded. + * + * @example + * ```js + * + * + * Download + * + * ``` + * @param {string} data - data to download + * @param {boolean} [stringify=false] - argument to stringify the data before passing to the File constructor + * @param {string} [filename] - name of file that prefixes the ISO timestamp generated when download + * @param {string} [mime='text/plain'] - media type to be downloaded + * @param {string} [extension='txt'] - file extension + */ -export default Component.extend({ - layout: hbs`{{#if (has-block)}} {{yield}} {{else}} {{actionText}} {{/if}}`, - tagName: 'a', - role: 'button', - attributeBindings: ['role', 'download', 'href'], - download: computed('filename', 'extension', function () { - return `${this.filename}-${new Date().toISOString()}.${this.extension}`; - }), +export default class DownloadButton extends Component { + get extension() { + return this.args.extension || 'txt'; + } - fileLike: computed('data', 'mime', 'stringify', 'download', function () { - let file; - let data = this.data; - const filename = this.download; - const mime = this.mime; - if (this.stringify) { - data = JSON.stringify(data, null, 2); + get mime() { + return this.args.mime || 'text/plain'; + } + + get filename() { + const defaultFilename = `${new Date().toISOString()}.${this.extension}`; + return this.args.filename ? this.args.filename + '-' + defaultFilename : defaultFilename; + } + + get data() { + if (this.args.stringify) { + return JSON.stringify(this.args.data, null, 2); } - if (window.navigator.msSaveOrOpenBlob) { - file = new Blob([data], { type: mime }); - file.name = filename; - } else { - file = new File([data], filename, { type: mime }); - } - return file; - }), + return this.args.data; + } - href: computed('fileLike', function () { - return window.URL.createObjectURL(this.fileLike); - }), - - click(event) { - if (!window.navigator.msSaveOrOpenBlob) { - return; - } - event.preventDefault(); - const file = this.fileLike; - //lol whyyyy - window.navigator.msSaveOrOpenBlob(file, file.name); - }, - - actionText: 'Download', - data: null, - filename: null, - mime: 'text/plain', - extension: 'txt', - stringify: false, -}); + // TODO refactor and call service instead + @action + handleDownload() { + const { document, URL } = window; + const downloadElement = document.createElement('a'); + const content = new File([this.data], this.filename, { type: this.mime }); + downloadElement.download = this.filename; + downloadElement.href = URL.createObjectURL(content); + document.body.appendChild(downloadElement); + downloadElement.click(); + URL.revokeObjectURL(downloadElement.href); + downloadElement.remove(); + } +} diff --git a/ui/lib/core/addon/components/toolbar-download-button.js b/ui/lib/core/addon/components/toolbar-download-button.js deleted file mode 100644 index ceb301e7bf..0000000000 --- a/ui/lib/core/addon/components/toolbar-download-button.js +++ /dev/null @@ -1,21 +0,0 @@ -/** - * @module ToolbarSecretLink - * `ToolbarSecretLink` styles SecretLink for the Toolbar. - * It should only be used inside of `Toolbar`. - * - * @example - * ```js - * - * - * - * - * - * ``` - * - */ - -import DownloadButton from './download-button'; - -export default DownloadButton.extend({ - classNames: ['toolbar-link'], -}); diff --git a/ui/lib/core/app/components/toolbar-download-button.js b/ui/lib/core/app/components/toolbar-download-button.js deleted file mode 100644 index 1a8170f2a4..0000000000 --- a/ui/lib/core/app/components/toolbar-download-button.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'core/components/toolbar-download-button'; diff --git a/ui/lib/kmip/addon/templates/configuration.hbs b/ui/lib/kmip/addon/templates/configuration.hbs index a00223a1c4..cf88f5084d 100644 --- a/ui/lib/kmip/addon/templates/configuration.hbs +++ b/ui/lib/kmip/addon/templates/configuration.hbs @@ -2,12 +2,15 @@ {{#if this.model}} - + > + Download CA cert + + {{/if}} Configure diff --git a/ui/tests/integration/components/toolbar-download-button-test.js b/ui/tests/integration/components/toolbar-download-button-test.js deleted file mode 100644 index 4a82fcadca..0000000000 --- a/ui/tests/integration/components/toolbar-download-button-test.js +++ /dev/null @@ -1,17 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { isPresent } from 'ember-cli-page-object'; -import hbs from 'htmlbars-inline-precompile'; - -module('Integration | Component | toolbar-download-button', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs``); - - assert.dom(this.element).hasText('Link'); - assert.ok(isPresent('.toolbar-link')); - assert.ok(isPresent('.icon')); - }); -});