Add latest changes from gitlab-org/gitlab@master

3 files changed, 152 insertions, 0 deletions

diff --git a/app/assets/javascripts/webhooks/components/form_url_app.vue b/app/assets/javascripts/webhooks/components/form_url_app.vue
new file mode 100644
index 00000000000..62d6c03bbb3
--- /dev/null
+++ b/app/assets/javascripts/webhooks/components/form_url_app.vue
@@ -0,0 +1,73 @@
+<script>
+import { GlFormGroup, GlFormInput, GlFormRadio, GlFormRadioGroup } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+
+import FormUrlMaskItem from './form_url_mask_item.vue';
+
+export default {
+  components: {
+    FormUrlMaskItem,
+    GlFormGroup,
+    GlFormInput,
+    GlFormRadio,
+    GlFormRadioGroup,
+  },
+  data() {
+    return {
+      maskEnabled: false,
+      url: null,
+    };
+  },
+  computed: {
+    maskedUrl() {
+      return this.url;
+    },
+  },
+  i18n: {
+    radioFullUrlText: s__('Webhooks|Show full URL'),
+    radioMaskUrlText: s__('Webhooks|Mask portions of URL'),
+    radioMaskUrlHelp: s__('Webhooks|Do not show sensitive data such as tokens in the UI.'),
+    urlDescription: s__(
+      'Webhooks|URL must be percent-encoded if it contains one or more special characters.',
+    ),
+    urlLabel: __('URL'),
+    urlPlaceholder: 'http://example.com/trigger-ci.json',
+    urlPreview: s__('Webhooks|URL preview'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-form-group
+      :label="$options.i18n.urlLabel"
+      label-for="webhook-url"
+      :description="$options.i18n.urlDescription"
+    >
+      <gl-form-input
+        id="webhook-url"
+        v-model="url"
+        name="hook[url]"
+        :placeholder="$options.i18n.urlPlaceholder"
+      />
+    </gl-form-group>
+    <div class="gl-mt-5">
+      <gl-form-radio-group v-model="maskEnabled">
+        <gl-form-radio :value="false">{{ $options.i18n.radioFullUrlText }}</gl-form-radio>
+        <gl-form-radio :value="true"
+          >{{ $options.i18n.radioMaskUrlText }}
+          <template #help>
+            {{ $options.i18n.radioMaskUrlHelp }}
+          </template>
+        </gl-form-radio>
+      </gl-form-radio-group>
+
+      <div v-if="maskEnabled" class="gl-ml-6" data-testid="url-mask-section">
+        <form-url-mask-item :index="0" />
+        <gl-form-group :label="$options.i18n.urlPreview" label-for="webhook-url-preview">
+          <gl-form-input id="webhook-url-preview" :value="maskedUrl" readonly />
+        </gl-form-group>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/webhooks/components/form_url_mask_item.vue b/app/assets/javascripts/webhooks/components/form_url_mask_item.vue
new file mode 100644
index 00000000000..1e74b4a8215
--- /dev/null
+++ b/app/assets/javascripts/webhooks/components/form_url_mask_item.vue
@@ -0,0 +1,61 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+  },
+  props: {
+    index: {
+      type: Number,
+      required: false,
+      default: null,
+    },
+  },
+  computed: {
+    keyInputId() {
+      return this.inputId('key');
+    },
+    valueInputId() {
+      return this.inputId('value');
+    },
+  },
+  methods: {
+    inputId(type) {
+      return `webhook-url-mask-item-${type}-${this.index}`;
+    },
+    inputName(type) {
+      return `hook[url_variables][][${type}]`;
+    },
+  },
+  i18n: {
+    keyLabel: s__('Webhooks|How it looks in the UI'),
+    valueLabel: s__('Webhooks|Sensitive portion of URL'),
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-flex-end gl-gap-3 gl-mb-5">
+    <gl-form-group
+      :label="$options.i18n.valueLabel"
+      :label-for="valueInputId"
+      class="gl-flex-grow-1 gl-mb-0"
+      data-testid="mask-item-value"
+    >
+      <gl-form-input :id="valueInputId" :name="inputName('value')" />
+    </gl-form-group>
+    <gl-form-group
+      :label="$options.i18n.keyLabel"
+      :label-for="keyInputId"
+      class="gl-flex-grow-1 gl-mb-0"
+      data-testid="mask-item-key"
+    >
+      <gl-form-input :id="keyInputId" :name="inputName('key')" />
+    </gl-form-group>
+    <gl-button icon="remove" />
+  </div>
+</template>
diff --git a/app/assets/javascripts/webhooks/index.js b/app/assets/javascripts/webhooks/index.js
new file mode 100644
index 00000000000..bfa33560fa5
--- /dev/null
+++ b/app/assets/javascripts/webhooks/index.js
@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import FormUrlApp from './components/form_url_app.vue';
+
+export default () => {
+  const el = document.querySelector('.js-vue-webhook-form');
+
+  if (!el) {
+    return null;
+  }
+
+  return new Vue({
+    el,
+    name: 'WebhookFormRoot',
+    render(createElement) {
+      return createElement(FormUrlApp, {});
+    },
+  });
+};