-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Create sections for Secrets sync destination fields for create/edit view #27538
Changes from 14 commits
15d115b
af4c517
90982df
895127e
19b13f6
7448156
fb3f947
d708bf9
466c17d
4c1712e
8fbcbd9
6ebf0e2
b2887c9
d6c3e2d
5d653fe
ef2fbe4
2acb753
ddf4757
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: Creates separate section for updating sensitive creds for Secrets sync create/edit view. | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -12,27 +12,34 @@ | |
|
||
{{#each @destination.formFieldGroups as |fieldGroup|}} | ||
{{#each-in fieldGroup as |group fields|}} | ||
{{#if (and (eq group "Credentials") (not @destination.isNew))}} | ||
{{#if (not-eq group "default")}} | ||
<hr class="has-top-margin-xl has-bottom-margin-l has-background-gray-200" /> | ||
<Hds::Text::Display @tag="h2" @size="400" @weight="bold">Credentials</Hds::Text::Display> | ||
<Hds::Text::Body @tag="p" @size="100" @color="faint" class="has-bottom-margin-m"> | ||
Connection credentials are sensitive information and the value cannot be read. Enable the input to update. | ||
<Hds::Text::Display @tag="h2" @size="400" @weight="bold">{{group}}</Hds::Text::Display> | ||
<Hds::Text::Body | ||
@tag="p" | ||
@size="100" | ||
@color="faint" | ||
class="has-bottom-margin-m" | ||
data-test-destination-subText={{group}} | ||
> | ||
{{(this.groupSubtext group @destination.isNew)}} | ||
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. instead of passing in 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. I tried that and then realized I was hitting issues because this is within an each iteration, so it's easier to access the destination by passing it in like this. |
||
</Hds::Text::Body> | ||
{{#each fields as |attr|}} | ||
{{/if}} | ||
{{! CREATE fields }} | ||
{{#each fields as |attr|}} | ||
{{#if (and (eq group "Credentials") (not @destination.isNew))}} | ||
<EnableInput data-test-enable-field={{attr.name}} class="field" @attr={{attr}}> | ||
<FormField @attr={{attr}} @model={{@destination}} @modelValidations={{this.modelValidations}} /> | ||
</EnableInput> | ||
{{/each}} | ||
{{else}} | ||
{{#each fields as |attr|}} | ||
{{else}} | ||
<FormField | ||
@attr={{attr}} | ||
@model={{@destination}} | ||
@modelValidations={{this.modelValidations}} | ||
@onKeyUp={{this.updateWarningValidation}} | ||
/> | ||
{{/each}} | ||
{{/if}} | ||
{{/if}} | ||
{{/each}} | ||
{{/each-in}} | ||
{{/each}} | ||
|
||
|
Original file line number | Diff line number | Diff line change | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
@@ -56,6 +56,20 @@ export default class DestinationsCreateForm extends Component<Args> { | |||||||||||||||||
}; | ||||||||||||||||||
} | ||||||||||||||||||
|
||||||||||||||||||
groupSubtext(group: string, isNew: boolean) { | ||||||||||||||||||
const dynamicText = isNew | ||||||||||||||||||
? 'used to authenticate with the destination' | ||||||||||||||||||
: 'and the value cannot be read. Enable the input to update'; | ||||||||||||||||||
Comment on lines
+59
to
+62
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.
Suggested change
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. 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. strange! it must be how the template helper functions compile 🤔 |
||||||||||||||||||
switch (group) { | ||||||||||||||||||
case 'Advanced configuration': | ||||||||||||||||||
return 'Configuration options for the destination.'; | ||||||||||||||||||
case 'Credentials': | ||||||||||||||||||
return `Connection credentials are sensitive information ${dynamicText}.`; | ||||||||||||||||||
default: | ||||||||||||||||||
return ''; | ||||||||||||||||||
} | ||||||||||||||||||
} | ||||||||||||||||||
|
||||||||||||||||||
@task | ||||||||||||||||||
@waitFor | ||||||||||||||||||
*save(event: Event) { | ||||||||||||||||||
|
Original file line number | Diff line number | Diff line change | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
@@ -56,23 +56,48 @@ module('Integration | Component | sync | Secrets::Page::Destinations::CreateAndE | |||||||||
assert.true(transition, 'transitions to vault.cluster.sync.secrets.destinations.create on cancel'); | ||||||||||
}); | ||||||||||
|
||||||||||
test('create: it renders fieldGroups subtext', async function (assert) { | ||||||||||
assert.expect(2); | ||||||||||
const { type } = SYNC_DESTINATIONS[0]; | ||||||||||
this.model = this.store.createRecord(`sync/destinations/${type}`, { type }); | ||||||||||
|
||||||||||
await this.renderFormComponent(); | ||||||||||
|
||||||||||
assert | ||||||||||
.dom(PAGE.form.fieldGroupSubtext('Credentials')) | ||||||||||
.hasText('Connection credentials are sensitive information used to authenticate with the destination.'); | ||||||||||
assert | ||||||||||
.dom(PAGE.form.fieldGroupSubtext('Advanced configuration')) | ||||||||||
.hasText('Configuration options for the destination.'); | ||||||||||
}); | ||||||||||
|
||||||||||
test('edit: it renders and navigates back to details on cancel', async function (assert) { | ||||||||||
assert.expect(4); | ||||||||||
assert.expect(3); | ||||||||||
this.model = this.generateModel(); | ||||||||||
|
||||||||||
await this.renderFormComponent(); | ||||||||||
assert.dom(PAGE.breadcrumbs).hasText('Secrets Sync Destinations Destination Edit Destination'); | ||||||||||
assert.dom('h2').hasText('Credentials', 'renders credentials section on edit'); | ||||||||||
assert | ||||||||||
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. moved this into a subtext specific test |
||||||||||
.dom('p.hds-foreground-faint') | ||||||||||
.hasText( | ||||||||||
'Connection credentials are sensitive information and the value cannot be read. Enable the input to update.' | ||||||||||
); | ||||||||||
await click(PAGE.cancelButton); | ||||||||||
const transition = this.transitionStub.calledWith('vault.cluster.sync.secrets.destinations.destination'); | ||||||||||
assert.true(transition, 'transitions to vault.cluster.sync.secrets.destinations.destination on cancel'); | ||||||||||
}); | ||||||||||
|
||||||||||
test('edit: it renders fieldGroup subtext', async function (assert) { | ||||||||||
assert.expect(2); | ||||||||||
const { type } = SYNC_DESTINATIONS[0]; | ||||||||||
this.model = this.store.createRecord(`sync/destinations/${type}`, { type }); | ||||||||||
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. If you look at the test above, this needs to be updated to the following to accurately render the edit view
Suggested change
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. Also since these are "it renders" related tests, the assertions below could also just move into the test above. I don't think separate subtext tests are needed since the existing "edit: it renders" and "create: it renders" are so small already 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. Good catch re: 1st comment. Re 2nd comment: I broke these up because I wanted to isolate the isNew functionality from the transition and breadcrumbs. However, let me clear up the tests a bit to make that more evident. |
||||||||||
|
||||||||||
await this.renderFormComponent(); | ||||||||||
|
||||||||||
assert | ||||||||||
.dom(PAGE.form.fieldGroupSubtext('Credentials')) | ||||||||||
.hasText('Connection credentials are sensitive information used to authenticate with the destination.'); | ||||||||||
assert | ||||||||||
.dom(PAGE.form.fieldGroupSubtext('Advanced configuration')) | ||||||||||
.hasText('Configuration options for the destination.'); | ||||||||||
}); | ||||||||||
Monkeychip marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||||||
|
||||||||||
test('edit: it PATCH updates custom_tags', async function (assert) { | ||||||||||
assert.expect(1); | ||||||||||
this.model = this.generateModel(); | ||||||||||
|
@@ -236,7 +261,7 @@ module('Integration | Component | sync | Secrets::Page::Destinations::CreateAndE | |||||||||
const filteredObfuscatedFields = this.model.formFields.filter((field) => | ||||||||||
obfuscatedFields.includes(field.name) | ||||||||||
); | ||||||||||
assert.expect(filteredObfuscatedFields.length); | ||||||||||
assert.expect(filteredObfuscatedFields.length * 2); | ||||||||||
await this.renderFormComponent(); | ||||||||||
// iterate over the form fields and filter for those that are obfuscated | ||||||||||
// fill those in and assert that they are masked | ||||||||||
|
@@ -246,6 +271,9 @@ module('Integration | Component | sync | Secrets::Page::Destinations::CreateAndE | |||||||||
assert | ||||||||||
.dom(PAGE.maskedInput(field.name)) | ||||||||||
.hasClass('masked-font', `it renders ${field.name} for ${destination} with masked font`); | ||||||||||
assert | ||||||||||
.dom(PAGE.form.enableInput(field.name)) | ||||||||||
.doesNotExist(`it does not render enable input for ${field.name}`); | ||||||||||
}); | ||||||||||
}); | ||||||||||
|
||||||||||
|
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.