From 537e4f1d3f2a692a51c8b42cb18c28ae00538d3a Mon Sep 17 00:00:00 2001 From: Arnav Palnitkar Date: Wed, 25 Aug 2021 14:22:15 -0700 Subject: [PATCH] Client count config view (#12422) * Client count config view - Switched to toggle button from checkbox and updated the design - Switched to ember octane - Update ember concurrency dependency * Fixed integration tests * Added changelog * Update switch label on toggle * Code cleanup * Fixed test --- changelog/12422.txt | 3 + ui/app/components/pricing-metrics-config.js | 66 ++++++++++--------- .../components/pricing-metrics-config.hbs | 63 +++++++++++++----- ui/package.json | 2 +- .../components/pricing-metrics-config-test.js | 10 +-- ui/yarn.lock | 17 ++++- 6 files changed, 107 insertions(+), 54 deletions(-) create mode 100644 changelog/12422.txt diff --git a/changelog/12422.txt b/changelog/12422.txt new file mode 100644 index 0000000000000..728b4a36e876e --- /dev/null +++ b/changelog/12422.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: updated client tracking config view +``` \ No newline at end of file diff --git a/ui/app/components/pricing-metrics-config.js b/ui/app/components/pricing-metrics-config.js index 50ad103545b72..a61ef3d3420cf 100644 --- a/ui/app/components/pricing-metrics-config.js +++ b/ui/app/components/pricing-metrics-config.js @@ -10,19 +10,19 @@ * @param {string} [mode=show] - mode is either show or edit. Show results in a table with the config, show has a form. */ -import { computed } from '@ember/object'; -import Component from '@ember/component'; +import Component from '@glimmer/component'; +import { action } from '@ember/object'; import { inject as service } from '@ember/service'; +import { tracked } from '@glimmer/tracking'; import { task } from 'ember-concurrency'; -export default Component.extend({ - router: service(), - mode: 'show', - model: null, +export default class PricingMetricsConfigComponent extends Component { + @service router; + @tracked mode = 'show'; + @tracked modalOpen = false; + error = null; - error: null, - modalOpen: false, - infoRows: computed(function() { + get infoRows() { return [ { label: 'Usage data collection', @@ -40,35 +40,41 @@ export default Component.extend({ valueKey: 'defaultReportMonths', }, ]; - }), - modalTitle: computed('model.enabled', function() { + } + + get modalTitle() { let content = 'Turn usage tracking off?'; - if (this.model.enabled === 'On') { + if (this.args.model && this.args.model.enabled === 'On') { content = 'Turn usage tracking on?'; } return content; - }), + } - save: task(function*() { - let model = this.model; + @(task(function*() { try { - yield model.save(); + yield this.args.model.save(); } catch (err) { - this.set('error', err.message); + this.error = err.message; return; } this.router.transitionTo('vault.cluster.metrics.config'); - }).drop(), + }).drop()) + save; + + @action + updateBooleanValue(attr, value) { + let valueToSet = value === true ? attr.options.trueValue : attr.options.falseValue; + this.args.model[attr.name] = valueToSet; + } - actions: { - onSaveChanges: function(evt) { - evt.preventDefault(); - const changed = this.model.changedAttributes(); - if (!changed.enabled) { - this.save.perform(); - return; - } - this.set('modalOpen', true); - }, - }, -}); + @action + onSaveChanges(evt) { + evt.preventDefault(); + const changed = this.args.model.changedAttributes(); + if (!changed.enabled) { + this.save.perform(); + return; + } + this.modalOpen = true; + } +} diff --git a/ui/app/templates/components/pricing-metrics-config.hbs b/ui/app/templates/components/pricing-metrics-config.hbs index 4581569bbf8d8..b6813735770cf 100644 --- a/ui/app/templates/components/pricing-metrics-config.hbs +++ b/ui/app/templates/components/pricing-metrics-config.hbs @@ -1,13 +1,46 @@ -{{#if (eq mode "edit")}} +{{#if (eq @mode "edit")}}
- - {{#each model.configAttrs as |attr|}} - + + {{#each @model.configAttrs as |attr|}} + {{#if (and (eq attr.type "string") (eq attr.options.editType "boolean"))}} + + {{#if attr.options.helpText}} +

{{attr.options.helpText}} {{#if attr.options.docLink}}See our documentation for help.{{/if}}

+ {{/if}} +
+ + +
+ {{else if (eq attr.type "number")}} +
+ + {{#if attr.options.subText}} +

{{attr.options.subText}} {{#if attr.options.docLink}}See our documentation for help.{{/if}}

+ {{/if}} +
+ +
+
+ {{/if}} {{/each}}
@@ -29,14 +62,14 @@
- {{#if (eq model.enabled "On")}} + {{#if (eq @model.enabled "On")}}

Vault will start tracking data starting from today’s date, {{date-format (now) "d MMMM yyyy"}}. You will not be able to see or query usage until the end of the month.

If you’ve previously enabled usage tracking, that historical data will still be available to you.

{{else}} @@ -56,7 +89,7 @@ @@ -64,11 +97,11 @@ {{else}}
- {{#each infoRows as |item|}} + {{#each this.infoRows as |item|}} {{/each}}
diff --git a/ui/package.json b/ui/package.json index 29a72148e1af5..05225e58a73b2 100644 --- a/ui/package.json +++ b/ui/package.json @@ -93,7 +93,7 @@ "ember-cli-string-helpers": "^4.0.0", "ember-cli-terser": "^4.0.0", "ember-composable-helpers": "^4.3.0", - "ember-concurrency": "^1.3.0", + "ember-concurrency": "^2.1.2", "ember-concurrency-test-waiter": "^0.3.2", "ember-copy": "^1.0.0", "ember-cp-validations": "^4.0.0-beta.12", diff --git a/ui/tests/integration/components/pricing-metrics-config-test.js b/ui/tests/integration/components/pricing-metrics-config-test.js index 40760dab6a293..592b9fbd64a3e 100644 --- a/ui/tests/integration/components/pricing-metrics-config-test.js +++ b/ui/tests/integration/components/pricing-metrics-config-test.js @@ -32,9 +32,9 @@ module('Integration | Component | pricing-metrics-config', function(hooks) { retentionMonths: 24, defaultReportMonths: 12, configAttrs: [ - createAttr('enabled', 'boolean'), - createAttr('retentionMonths', 'string'), - createAttr('defaultReportMonths', 'string'), + createAttr('enabled', 'string', { editType: 'boolean' }), + createAttr('retentionMonths', 'number'), + createAttr('defaultReportMonths', 'number'), ], changedAttributes: () => ({}), save: () => {}, @@ -76,8 +76,8 @@ module('Integration | Component | pricing-metrics-config', function(hooks) { `); assert.dom('[data-test-pricing-metrics-config-form]').exists('Pricing metrics config form exists'); - const fields = document.querySelectorAll('[data-test-field] input'); - assert.equal(fields.length, 3, 'renders 3 input fields'); + const fields = document.querySelectorAll('[data-test-field]'); + assert.equal(fields.length, 3, 'renders 3 fields'); }); test('it shows a modal with correct messaging when disabling', async function(assert) { diff --git a/ui/yarn.lock b/ui/yarn.lock index 20373c586a03a..bcb121b06ea88 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -7827,7 +7827,7 @@ ember-cli-htmlbars@^3.0.0, ember-cli-htmlbars@^3.0.1: json-stable-stringify "^1.0.1" strip-bom "^3.0.0" -ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.7.1: +ember-cli-htmlbars@^5.3.1, ember-cli-htmlbars@^5.6.3, ember-cli-htmlbars@^5.7.1: version "5.7.1" resolved "https://registry.yarnpkg.com/ember-cli-htmlbars/-/ember-cli-htmlbars-5.7.1.tgz#eb5b88c7d9083bc27665fb5447a9b7503b32ce4f" integrity sha512-9laCgL4tSy48orNoQgQKEHp93MaqAs9ZOl7or5q+8iyGGJHW6sVXIYrVv5/5O9HfV6Ts8/pW1rSoaeKyLUE+oA== @@ -8216,7 +8216,7 @@ ember-concurrency-test-waiter@^0.3.2: dependencies: ember-cli-babel "^6.6.0" -"ember-concurrency@^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0", ember-concurrency@^1.3.0: +"ember-concurrency@^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0": version "1.3.0" resolved "https://registry.yarnpkg.com/ember-concurrency/-/ember-concurrency-1.3.0.tgz#66f90fb792687470bcee1172adc0ebf33f5e8b9c" integrity sha512-DwGlfWFpYyAkTwsedlEtK4t1DznJSculAW6Vq5S1C0shVPc5b6tTpHB2FFYisannSYkm+wpm1f1Pd40qiNPtOQ== @@ -8225,6 +8225,17 @@ ember-concurrency-test-waiter@^0.3.2: ember-compatibility-helpers "^1.2.0" ember-maybe-import-regenerator "^0.1.6" +ember-concurrency@^2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/ember-concurrency/-/ember-concurrency-2.1.2.tgz#a27178fb24951933fa72dd7cf1dca852693cc5c1" + integrity sha512-xC6L/SKuM08e9TK5igkSEwbAtkX2sqrj9Xap9G3zYSYdAIO7fcS6ZNEaD5e+dVXwPqH3tOIq41ZT7fqQ7mQ0KQ== + dependencies: + "@glimmer/tracking" "^1.0.2" + ember-cli-babel "^7.22.1" + ember-cli-htmlbars "^5.6.3" + ember-compatibility-helpers "^1.2.0" + ember-destroyable-polyfill "^2.0.2" + ember-copy@1.0.0, ember-copy@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/ember-copy/-/ember-copy-1.0.0.tgz#426554ba6cf65920f31d24d0a3ca2cb1be16e4aa" @@ -8280,7 +8291,7 @@ ember-debug-handlers-polyfill@^1.1.1: resolved "https://registry.yarnpkg.com/ember-debug-handlers-polyfill/-/ember-debug-handlers-polyfill-1.1.1.tgz#e9ae0a720271a834221179202367421b580002ef" integrity sha512-lO7FBAqJjzbL+IjnWhVfQITypPOJmXdZngZR/Vdn513W4g/Q6Sjicao/mDzeDCb48Y70C4Facwk0LjdIpSZkRg== -ember-destroyable-polyfill@^2.0.3: +ember-destroyable-polyfill@^2.0.2, ember-destroyable-polyfill@^2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/ember-destroyable-polyfill/-/ember-destroyable-polyfill-2.0.3.tgz#1673ed66609a82268ef270a7d917ebd3647f11e1" integrity sha512-TovtNqCumzyAiW0/OisSkkVK93xnVF4NRU6+FN0ubpfwEOpRrmM2RqDwXI6YAChCgSHON1cz0DfQStpA1Gjuuw==