Add latest changes from gitlab-org/gitlab@master

4 files changed, 39 insertions, 5 deletions

diff --git a/app/assets/javascripts/webhooks/components/form_url_app.vue b/app/assets/javascripts/webhooks/components/form_url_app.vue
index 5ec16d4ba15..45526ff9080 100644
--- a/app/assets/javascripts/webhooks/components/form_url_app.vue
+++ b/app/assets/javascripts/webhooks/components/form_url_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { isEmpty } from 'lodash';
+import { cloneDeep, isEmpty } from 'lodash';
 import { GlFormGroup, GlFormInput, GlFormRadio, GlFormRadioGroup, GlLink } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 
@@ -30,7 +30,7 @@ export default {
     return {
       maskEnabled: !isEmpty(this.initialUrlVariables),
       url: this.initialUrl,
-      items: isEmpty(this.initialUrlVariables) ? [{}] : this.initialUrlVariables,
+      items: this.getInitialItems(),
     };
   },
   computed: {
@@ -54,6 +54,16 @@ export default {
     },
   },
   methods: {
+    getInitialItems() {
+      return isEmpty(this.initialUrlVariables) ? [{}] : cloneDeep(this.initialUrlVariables);
+    },
+    isEditingItem(key) {
+      if (isEmpty(this.initialUrlVariables)) {
+        return false;
+      }
+
+      return this.initialUrlVariables.some((item) => item.key === key);
+    },
     onItemInput({ index, key, value }) {
       this.$set(this.items, index, { key, value });
     },
@@ -112,6 +122,7 @@ export default {
           :index="index"
           :item-key="key"
           :item-value="value"
+          :is-editing="isEditingItem(key)"
           @input="onItemInput"
           @remove="removeItem"
         />
diff --git a/app/assets/javascripts/webhooks/components/form_url_mask_item.vue b/app/assets/javascripts/webhooks/components/form_url_mask_item.vue
index 3b75f9b6c0d..aa5d9ce57f4 100644
--- a/app/assets/javascripts/webhooks/components/form_url_mask_item.vue
+++ b/app/assets/javascripts/webhooks/components/form_url_mask_item.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlButton, GlFormGroup, GlFormInput } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { MASK_ITEM_VALUE_HIDDEN } from '../constants';
 
 export default {
   components: {
@@ -24,6 +25,11 @@ export default {
       required: false,
       default: null,
     },
+    isEditing: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     keyInputId() {
@@ -32,6 +38,9 @@ export default {
     valueInputId() {
       return this.inputId('value');
     },
+    displayValue() {
+      return this.isEditing ? MASK_ITEM_VALUE_HIDDEN : this.itemValue;
+    },
   },
   methods: {
     inputId(type) {
@@ -68,7 +77,8 @@ export default {
       <gl-form-input
         :id="valueInputId"
         :name="inputName('value')"
-        :value="itemValue"
+        :value="displayValue"
+        :disabled="isEditing"
         @input="onValueInput"
       />
     </gl-form-group>
@@ -82,9 +92,15 @@ export default {
         :id="keyInputId"
         :name="inputName('key')"
         :value="itemKey"
+        :disabled="isEditing"
         @input="onKeyInput"
       />
     </gl-form-group>
-    <gl-button icon="remove" :aria-label="__('Remove')" @click="onRemoveClick" />
+    <gl-button
+      icon="remove"
+      :aria-label="__('Remove')"
+      :disabled="isEditing"
+      @click="onRemoveClick"
+    />
   </div>
 </template>
diff --git a/app/assets/javascripts/webhooks/constants.js b/app/assets/javascripts/webhooks/constants.js
index abef16545bc..6710a418117 100644
--- a/app/assets/javascripts/webhooks/constants.js
+++ b/app/assets/javascripts/webhooks/constants.js
@@ -15,3 +15,5 @@ export const descriptionText = {
   ),
   [BRANCH_FILTER_REGEX]: s__('Webhooks|Regex such as %{REGEX_CODE} is supported.'),
 };
+
+export const MASK_ITEM_VALUE_HIDDEN = '************';
diff --git a/app/assets/javascripts/webhooks/index.js b/app/assets/javascripts/webhooks/index.js
index 1b2b33e44c1..d90680a9bac 100644
--- a/app/assets/javascripts/webhooks/index.js
+++ b/app/assets/javascripts/webhooks/index.js
@@ -10,6 +10,11 @@ export default () => {
 
   const { url: initialUrl, urlVariables } = el.dataset;
 
+  // Convert the array of 'key' strings to array of { key } objects
+  const initialUrlVariables = urlVariables
+    ? JSON.parse(urlVariables)?.map((key) => ({ key }))
+    : undefined;
+
   return new Vue({
     el,
     name: 'WebhookFormRoot',
@@ -17,7 +22,7 @@ export default () => {
       return createElement(FormUrlApp, {
         props: {
           initialUrl,
-          initialUrlVariables: urlVariables ? JSON.parse(urlVariables) : undefined,
+          initialUrlVariables,
         },
       });
     },