Add latest changes from gitlab-org/gitlab@master

2 files changed, 90 insertions, 0 deletions

diff --git a/app/assets/javascripts/abuse_reports/components/links_to_spam_input.vue b/app/assets/javascripts/abuse_reports/components/links_to_spam_input.vue
new file mode 100644
index 00000000000..02fe131553c
--- /dev/null
+++ b/app/assets/javascripts/abuse_reports/components/links_to_spam_input.vue
@@ -0,0 +1,68 @@
+<script>
+import { GlButton, GlFormGroup, GlFormInput } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  name: 'LinksToSpamInput',
+  components: {
+    GlButton,
+    GlFormGroup,
+    GlFormInput,
+  },
+  i18n: {
+    label: s__('ReportAbuse|Link to spam'),
+    description: s__('ReportAbuse|URL of this user posting spam'),
+    addAnotherText: s__('ReportAbuse|Add another link'),
+  },
+  props: {
+    previousLinks: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      links: this.previousLinks.length > 0 ? this.previousLinks : [''],
+    };
+  },
+  methods: {
+    addAnotherInput() {
+      this.links.push('');
+    },
+  },
+};
+</script>
+<template>
+  <div>
+    <template v-for="(link, index) in links">
+      <div :key="index" class="row">
+        <div class="col-lg-8">
+          <gl-form-group class="gl-mt-5">
+            <template #label>
+              <div class="gl-pb-2">
+                {{ $options.i18n.label }}
+              </div>
+              <div class="gl-font-weight-normal">
+                {{ $options.i18n.description }}
+              </div>
+            </template>
+            <gl-form-input
+              v-model.trim="links[index]"
+              type="url"
+              name="abuse_report[links_to_spam][]"
+              autocomplete="off"
+            />
+          </gl-form-group>
+        </div>
+      </div>
+    </template>
+    <div class="row">
+      <div class="col-lg-8">
+        <gl-button variant="link" icon="plus" class="gl-float-right" @click="addAnotherInput">
+          {{ $options.i18n.addAnotherText }}
+        </gl-button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/abuse_reports/index.js b/app/assets/javascripts/abuse_reports/index.js
new file mode 100644
index 00000000000..fff4ad8daa0
--- /dev/null
+++ b/app/assets/javascripts/abuse_reports/index.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import LinksToSpamInput from './components/links_to_spam_input.vue';
+
+export const initLinkToSpam = () => {
+  const el = document.getElementById('js-links-to-spam');
+
+  if (!el) return false;
+
+  const { links } = el.dataset;
+
+  return new Vue({
+    el,
+    name: 'LinksToSpamRoot',
+    render(createElement) {
+      return createElement(LinksToSpamInput, {
+        props: {
+          previousLinks: JSON.parse(links),
+        },
+      });
+    },
+  });
+};