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
2021-08-25 14:22:15 -07:00 · 2021-08-25 14:22:15 -07:00 · 45d1b4708b
parent 4f30a01068
commit 45d1b4708b
6 changed files with 107 additions and 54 deletions
--- a/changelog/12422.txt
+++ b/changelog/12422.txt
@ -0,0 +1,3 @@
+```release-note:improvement
+ui: updated client tracking config view
+```
--- 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;

-  actions: {
-    onSaveChanges: function(evt) {
-      evt.preventDefault();
-      const changed = this.model.changedAttributes();
-      if (!changed.enabled) {
-        this.save.perform();
-        return;
-      }
-      this.set('modalOpen', true);
-    },
-  },
-});
+  @action
+  updateBooleanValue(attr, value) {
+    let valueToSet = value === true ? attr.options.trueValue : attr.options.falseValue;
+    this.args.model[attr.name] = valueToSet;
+  }
+
+  @action
+  onSaveChanges(evt) {
+    evt.preventDefault();
+    const changed = this.args.model.changedAttributes();
+    if (!changed.enabled) {
+      this.save.perform();
+      return;
+    }
+    this.modalOpen = true;
+  }
+}
--- 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")}}
  <form onsubmit={{action "onSaveChanges"}} data-test-pricing-metrics-config-form>
    <div class="box is-sideless is-fullwidth is-marginless">
-      <MessageError @model={{model}} @errorMessage={{error}} />
-      {{#each model.configAttrs as |attr|}}
-        <FormField
-          data-test-field
-          @attr={{attr}}
-          @model={{model}}
-        />
+      <MessageError @model={{@model}} @errorMessage={{this.error}} />
+      {{#each @model.configAttrs as |attr|}}
+        {{#if (and (eq attr.type "string") (eq attr.options.editType "boolean"))}}
+          <label class="is-label">Usage data collection</label>
+          {{#if attr.options.helpText}}
+              <p class="sub-text">{{attr.options.helpText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
+          {{/if}}
+          <div class="control is-flex has-bottom-margin-l">
+            <input data-test-field type="checkbox" id="{{attr.name}}" name={{attr.name}} class="switch is-rounded is-success is-small" checked={{eq (get @model attr.name) attr.options.trueValue}} 
+            onchange={{action (action "updateBooleanValue" attr) value="target.checked"}} />
+            <label for="{{attr.name}}">
+              {{#if (eq @model.enabled "Off")}}
+                Data collection is off
+              {{else}}
+                Data collection is on
+              {{/if}}
+            </label>
+          </div>
+          {{else if (eq attr.type "number")}}
+            <div class="has-top-margin-s">
+              <label for="{{attr.name}}" class="is-label">
+                {{ attr.options.label }}
+              </label>
+              {{#if attr.options.subText}}
+                <p class="sub-text">{{attr.options.subText}} {{#if attr.options.docLink}}<a href="{{attr.options.docLink}}" target="_blank" rel="noopener noreferrer">See our documentation</a> for help.{{/if}}</p>
+              {{/if}}
+              <div class="control">
+                <input 
+                  data-test-field
+                  id={{attr.name}}
+                  disabled={{eq @model.enabled "Off"}}
+                  autocomplete="off"
+                  spellcheck="false"
+                  onchange={{action (mut (get @model attr.name)) value="target.value"}}
+                  value={{or (get @model attr.name) attr.options.defaultValue}}
+                  class="input"
+                  maxLength={{attr.options.characterLimit}} />
+              </div>
+            </div>
+        {{/if}}
      {{/each}}
    </div>
    <div class="field is-grouped-split box is-fullwidth is-bottomless">
@ -29,14 +62,14 @@
    </div>
  </form>
  <Modal
-    @title={{modalTitle}}
-    @onClose={{action (mut modalOpen) false}}
-    @isActive={{modalOpen}}
+    @title={{this.modalTitle}}
+    @onClose={{action (mut this.modalOpen) false}}
+    @isActive={{this.modalOpen}}
    @type="warning"
    @showCloseButton={{true}}
  >
    <section class="modal-card-body">
-      {{#if (eq model.enabled "On")}}
+      {{#if (eq @model.enabled "On")}}
        <p class="has-bottom-margin-s">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.</p>
        <p>If you’ve previously enabled usage tracking, that historical data will still be available to you.</p>
      {{else}}
@ -56,7 +89,7 @@
      <button
        type="button"
        class="button is-primary"
-        onclick={{perform save}}
+        onclick={{perform this.save}}
      >
        Continue
      </button>
@ -64,11 +97,11 @@
  </Modal>
 {{else}}
  <div class="tabs-container box is-bottomless is-marginless is-fullwidth is-paddingless" data-test-pricing-metrics-config-table>
-    {{#each infoRows as |item|}}
+    {{#each this.infoRows as |item|}}
      <InfoTableRow
        @label={{item.label}}
        @helperText={{item.helperText}}
-        @value={{get model item.valueKey}}
+        @value={{get @model item.valueKey}}
      />
    {{/each}}
  </div>
--- 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",
--- 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) {
--- 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==