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
This commit is contained in:
Arnav Palnitkar
GitHub
parent
4f30a01068
commit
45d1b4708b
|
|
@ -0,0 +1,3 @@
|
|||
```release-note:improvement
|
||||
ui: updated client tracking config view
|
||||
```
|
||||
|
|
@ -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) {
|
||||
@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.model.changedAttributes();
|
||||
const changed = this.args.model.changedAttributes();
|
||||
if (!changed.enabled) {
|
||||
this.save.perform();
|
||||
return;
|
||||
}
|
||||
this.set('modalOpen', true);
|
||||
},
|
||||
},
|
||||
});
|
||||
this.modalOpen = true;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
<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
|
||||
@attr={{attr}}
|
||||
@model={{model}}
|
||||
/>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
17
ui/yarn.lock
17
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==
|
||||
|
|
|
|||
Loading…
Reference in New Issue