From df72934f0edcc53666af827a9760b3f7cc3d28ed Mon Sep 17 00:00:00 2001
From: Chen Charnolevsky <ccharnolevsky@gitlab.com>
Date: Tue, 31 Dec 2024 14:37:57 +0000
Subject: [PATCH] Show variable description in the dropdown

---
 .../components/dast_variables_form_group.vue  |  6 +++++-
 .../components/dast_variables_modal.vue       | 19 +++++++++++++++----
 .../dast_variables_form_group_spec.js         | 12 ++++++++++++
 .../components/dast_variables_modal_spec.js   | 10 ++++++++++
 4 files changed, 42 insertions(+), 5 deletions(-)

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 713db4893f1b..5355bcaa8e81 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 2962a0ceb8f5..eefeeff28d4d 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 81e3e9bbc9d1..9444b49b2e24 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 8682fabd00b5..6cb0b953e70c 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);
+  });
 });
-- 
GitLab