New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Client count config view #12422
Client count config view #12422
Changes from 4 commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
```release-note:improvement | ||
ui: updated client tracking config view | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,47 @@ | ||
{{#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}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. no chance there would be two of the same fields on the same page? e.g. two with the same attr.name? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Nope, should not happen. |
||
disabled={{eq @model.enabled "Off"}} | ||
readonly={{isReadOnly}} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. is There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. True. Good catch, in fact we don't need readonly attribute for these inputs. |
||
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 +63,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,19 +90,19 @@ | |
<button | ||
type="button" | ||
class="button is-primary" | ||
onclick={{perform save}} | ||
onclick={{perform this.save}} | ||
> | ||
Continue | ||
</button> | ||
</footer> | ||
</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> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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,9 @@ 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]'); | ||
console.log(fields); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. left over console.log |
||
assert.equal(fields.length, 3, 'renders 3 fields'); | ||
}); | ||
|
||
test('it shows a modal with correct messaging when disabling', async function(assert) { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't know computed was a thing in octane?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While the computed decorator is available in octane, I don't think its necessary in this case. I will remove it.