Add latest changes from gitlab-org/gitlab@master

3 files changed, 152 insertions, 0 deletions

diff --git a/app/assets/javascripts/webhooks/components/push_events.vue b/app/assets/javascripts/webhooks/components/push_events.vue
new file mode 100644
index 00000000000..677f06314e0
--- /dev/null
+++ b/app/assets/javascripts/webhooks/components/push_events.vue
@@ -0,0 +1,112 @@
+<script>
+import { GlFormCheckbox, GlFormRadio, GlFormRadioGroup, GlFormInput, GlSprintf } from '@gitlab/ui';
+import {
+  BRANCH_FILTER_ALL_BRANCHES,
+  WILDCARD_CODE_STABLE,
+  WILDCARD_CODE_PRODUCTION,
+  REGEX_CODE,
+  descriptionText,
+} from '~/webhooks/constants';
+
+export default {
+  components: {
+    GlFormCheckbox,
+    GlFormRadio,
+    GlFormRadioGroup,
+    GlFormInput,
+    GlSprintf,
+  },
+  inject: ['pushEvents', 'strategy', 'isNewHook', 'pushEventsBranchFilter'],
+  data() {
+    return {
+      pushEventsData: !this.isNewHook && this.pushEvents,
+      branchFilterStrategyData: this.isNewHook ? BRANCH_FILTER_ALL_BRANCHES : this.strategy,
+      pushEventsBranchFilterData: this.pushEventsBranchFilter,
+    };
+  },
+  WILDCARD_CODE_STABLE,
+  WILDCARD_CODE_PRODUCTION,
+  REGEX_CODE,
+  descriptionText,
+};
+</script>
+
+<template>
+  <div>
+    <gl-form-checkbox v-model="pushEventsData">{{ s__('Webhooks|Push events') }}</gl-form-checkbox>
+    <input type="hidden" :value="pushEventsData" name="hook[push_events]" />
+
+    <div v-if="pushEventsData" class="gl-pl-6">
+      <gl-form-radio-group v-model="branchFilterStrategyData" name="hook[branch_filter_strategy]">
+        <gl-form-radio
+          class="gl-mt-2 branch-filter-strategy-radio"
+          value="all_branches"
+          data-testid="rule_all_branches"
+        >
+          <div data-qa-selector="strategy_radio_all">{{ __('All branches') }}</div>
+        </gl-form-radio>
+
+        <!-- wildcard -->
+        <gl-form-radio
+          class="gl-mt-2 branch-filter-strategy-radio"
+          value="wildcard"
+          data-testid="rule_wildcard"
+        >
+          <div data-qa-selector="strategy_radio_wildcard">
+            {{ s__('Webhooks|Wildcard pattern') }}
+          </div>
+        </gl-form-radio>
+        <div class="gl-ml-6">
+          <gl-form-input
+            v-if="branchFilterStrategyData === 'wildcard'"
+            v-model="pushEventsBranchFilterData"
+            name="hook[push_events_branch_filter]"
+            data-qa-selector="webhook_branch_filter_field"
+            data-testid="webhook_branch_filter_field"
+          />
+        </div>
+        <p
+          v-if="branchFilterStrategyData === 'wildcard'"
+          class="form-text text-muted custom-control"
+        >
+          <gl-sprintf :message="$options.descriptionText.wildcard">
+            <template #WILDCARD_CODE_STABLE>
+              <code>{{ $options.WILDCARD_CODE_STABLE }}</code>
+            </template>
+            <template #WILDCARD_CODE_PRODUCTION>
+              <code>{{ $options.WILDCARD_CODE_PRODUCTION }}</code>
+            </template>
+          </gl-sprintf>
+        </p>
+
+        <!-- regex -->
+        <gl-form-radio
+          class="gl-mt-2 branch-filter-strategy-radio"
+          value="regex"
+          data-testid="rule_regex"
+        >
+          <div data-qa-selector="strategy_radio_regex">
+            {{ s__('Webhooks|Regular expression') }}
+          </div>
+        </gl-form-radio>
+        <div class="gl-ml-6">
+          <gl-form-input
+            v-if="branchFilterStrategyData === 'regex'"
+            v-model="pushEventsBranchFilterData"
+            name="hook[push_events_branch_filter]"
+            data-qa-selector="webhook_branch_filter_field"
+            data-testid="webhook_branch_filter_field"
+          />
+        </div>
+
+        <p v-if="branchFilterStrategyData === 'regex'" class="form-text text-muted custom-control">
+          <gl-sprintf :message="$options.descriptionText.regex">
+            <template #REGEX_CODE>
+              <code>{{ $options.REGEX_CODE }}</code>
+            </template>
+          </gl-sprintf>
+        </p>
+      </gl-form-radio-group>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/webhooks/constants.js b/app/assets/javascripts/webhooks/constants.js
new file mode 100644
index 00000000000..abef16545bc
--- /dev/null
+++ b/app/assets/javascripts/webhooks/constants.js
@@ -0,0 +1,17 @@
+import { s__ } from '~/locale';
+
+export const BRANCH_FILTER_ALL_BRANCHES = 'all_branches';
+export const BRANCH_FILTER_WILDCARD = 'wildcard';
+export const BRANCH_FILTER_REGEX = 'regex';
+
+export const WILDCARD_CODE_STABLE = '*-stable';
+export const WILDCARD_CODE_PRODUCTION = 'production/*';
+
+export const REGEX_CODE = '(feature|hotfix)/*';
+
+export const descriptionText = {
+  [BRANCH_FILTER_WILDCARD]: s__(
+    'Webhooks|Wildcards such as %{WILDCARD_CODE_STABLE} or %{WILDCARD_CODE_PRODUCTION} are supported.',
+  ),
+  [BRANCH_FILTER_REGEX]: s__('Webhooks|Regex such as %{REGEX_CODE} is supported.'),
+};
diff --git a/app/assets/javascripts/webhooks/webhook.js b/app/assets/javascripts/webhooks/webhook.js
new file mode 100644
index 00000000000..ca631502745
--- /dev/null
+++ b/app/assets/javascripts/webhooks/webhook.js
@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import { parseBoolean } from '~/lib/utils/common_utils';
+import pushEvents from './components/push_events.vue';
+
+export function initPushEventsEditForm() {
+  const el = document.querySelector('.js-vue-push-events');
+
+  if (!el) return false;
+
+  const provide = {
+    isNewHook: parseBoolean(el.dataset.isNewHook),
+    pushEvents: parseBoolean(el.dataset.pushEvents),
+    strategy: el.dataset.strategy,
+    pushEventsBranchFilter: el.dataset.pushEventsBranchFilter,
+  };
+  return new Vue({
+    el,
+    provide,
+    render(createElement) {
+      return createElement(pushEvents);
+    },
+  });
+}