diff --git a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_form_group.vue b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_form_group.vue index 713db4893f1bbc885914ab6e819a0bffbbc30002..5355bcaa8e81b95ec6f8d2d3ce8d842f46c193de 100644 --- a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_form_group.vue +++ b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_form_group.vue @@ -156,6 +156,10 @@ export default { {{ $options.i18n.addVariableButtonLabel }} </gl-button> </gl-form-group> - <dast-variables-modal ref="addVariableModal" @addVariable="addVariableToList" /> + <dast-variables-modal + ref="addVariableModal" + :pre-selected-variables="variableList" + @addVariable="addVariableToList" + /> </div> </template> diff --git a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_modal.vue b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_modal.vue index 2962a0ceb8f5a0956c73256fc89ab025e2cb4e30..eefeeff28d4d44adaa5549bc1a0b8425531beb78 100644 --- a/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_modal.vue +++ b/ee/app/assets/javascripts/security_configuration/dast_profiles/components/dast_variables_modal.vue @@ -33,9 +33,9 @@ export default { }, props: { preSelectedVariables: { - type: Object, + type: Array, required: false, - default: () => ({}), + default: () => [], }, variable: { type: Object, @@ -83,8 +83,16 @@ export default { }; }, items() { + const preSelectedVariablesNames = this.preSelectedVariables + .map((existVariable) => existVariable.variable) + .filter(Boolean); + + const searchTermLower = this.searchTerm?.toLowerCase() || ''; + const filteredVariables = Object.entries(DAST_VARIABLES).filter( - ([id]) => !this.searchTerm || id.toLowerCase().includes(this.searchTerm.toLowerCase()), + ([id]) => + (!searchTermLower || id.toLowerCase().includes(searchTermLower)) && + !preSelectedVariablesNames.includes(id), ); return filteredVariables.map(([id, { description }]) => ({ @@ -181,7 +189,10 @@ export default { @search="onSearch" @select="onSelect($event)" > - <!-- <template #list-item="{ item: { text, secondaryText, icon } }"> </template> --> + <template #list-item="{ item: { text, secondaryText } }"> + <strong>{{ text }}</strong> + <div class="gl-text-sm gl-text-subtle">{{ secondaryText }}</div> + </template> </gl-collapsible-listbox> </gl-form-group> <gl-form-group diff --git a/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_form_group_spec.js b/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_form_group_spec.js index 81e3e9bbc9d1cd2713e4ec469e3340ca1581e110..9444b49b2e2471d23b5ffe483e96745f2498fbb5 100644 --- a/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_form_group_spec.js +++ b/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_form_group_spec.js @@ -80,4 +80,16 @@ describe('DastVariablesFormGroup', () => { expect(modalStub.show).toHaveBeenCalled(); }); }); + + describe('while `variableList` is not empty', () => { + it('needs to set `preSelectedVariables` input', () => { + const preSelectedVariable = [ + { variable: 'DAST_ACTIVE_SCAN_TIMEOUT', value: 'Duration string' }, + ]; + createComponent({ + value: preSelectedVariable, + }); + expect(findModal().props('preSelectedVariables')).toEqual(preSelectedVariable); + }); + }); }); diff --git a/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_modal_spec.js b/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_modal_spec.js index 8682fabd00b54695c4d2f5f293690f19d8822b49..6cb0b953e70c1cb369f0c04c3869144e81e477fc 100644 --- a/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_modal_spec.js +++ b/ee/spec/frontend/security_configuration/dast_profiles/components/dast_variables_modal_spec.js @@ -138,4 +138,14 @@ describe('DastVariablesModal', () => { expect(findAllFormsGroups().length).toBe(1); }); }); + + it('while `preSelectedVariables`, the items array should exclude those values', () => { + const preSelectedVariables = [ + { variable: 'DAST_ACTIVE_SCAN_TIMEOUT', value: 'Duration string' }, + ]; + createComponent({ + preSelectedVariables, + }); + expect(findVariableSelector().props('items')).not.toContain(preSelectedVariables); + }); });