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

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: updated client tracking config view
+```

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 '@glimmer/component';
-import Component from '@ember/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({
+export default class PricingMetricsConfigComponent extends Component {
-  router: service(),
+  @service router;
-  mode: 'show',
+  @tracked mode = 'show';
-  model: null,
+  @tracked modalOpen = false;
+  error = null;
 
-  error: null,
+  get infoRows() {
-  modalOpen: false,
-  infoRows: computed(function() {
     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*() {
+  @(task(function*() {
-    let model = this.model;
     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: {
+  @action
-    onSaveChanges: function(evt) {
+  updateBooleanValue(attr, value) {
-      evt.preventDefault();
+    let valueToSet = value === true ? attr.options.trueValue : attr.options.falseValue;
-      const changed = this.model.changedAttributes();
+    this.args.model[attr.name] = valueToSet;
-      if (!changed.enabled) {
+  }
-        this.save.perform();
+
-        return;
+  @action
-      }
+  onSaveChanges(evt) {
-      this.set('modalOpen', true);
+    evt.preventDefault();
-    },
+    const changed = this.args.model.changedAttributes();
-  },
+    if (!changed.enabled) {
-});
+      this.save.perform();
+      return;
+    }
+    this.modalOpen = true;
+  }
+}

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}} />
+      <MessageError @model={{@model}} @errorMessage={{this.error}} />
-      {{#each model.configAttrs as |attr|}}
+      {{#each @model.configAttrs as |attr|}}
-        <FormField
+        {{#if (and (eq attr.type "string") (eq attr.options.editType "boolean"))}}
-          data-test-field
+          <label class="is-label">Usage data collection</label>
-          @attr={{attr}}
+          {{#if attr.options.helpText}}
-          @model={{model}}
+              <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}}
+    @title={{this.modalTitle}}
-    @onClose={{action (mut modalOpen) false}}
+    @onClose={{action (mut this.modalOpen) false}}
-    @isActive={{modalOpen}}
+    @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>

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",

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('enabled', 'string', { editType: 'boolean' }),
-        createAttr('retentionMonths', 'string'),
+        createAttr('retentionMonths', 'number'),
-        createAttr('defaultReportMonths', 'string'),
+        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');
+    const fields = document.querySelectorAll('[data-test-field]');
-    assert.equal(fields.length, 3, 'renders 3 input fields');
+    assert.equal(fields.length, 3, 'renders 3 fields');
   });
 
   test('it shows a modal with correct messaging when disabling', async function(assert) {

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