Create private merge requests in forks

https://gitlab.com/gitlab-org/gitlab-ce/issues/58583

4 files changed, 229 insertions, 0 deletions

diff --git a/app/assets/javascripts/confidential_merge_request/components/dropdown.vue b/app/assets/javascripts/confidential_merge_request/components/dropdown.vue
new file mode 100644
index 00000000000..444640980af
--- /dev/null
+++ b/app/assets/javascripts/confidential_merge_request/components/dropdown.vue
@@ -0,0 +1,58 @@
+<script>
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    GlDropdown,
+    GlDropdownItem,
+    Icon,
+  },
+  props: {
+    projects: {
+      type: Array,
+      required: true,
+    },
+    selectedProject: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  computed: {
+    dropdownText() {
+      if (Object.keys(this.selectedProject).length) {
+        return this.selectedProject.name;
+      }
+
+      return __('Select private project');
+    },
+  },
+  methods: {
+    selectProject(project) {
+      this.$emit('click', project);
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
+    <template slot="button-content">
+      <span class="str-truncated-100 mr-2">
+        <icon name="lock" />
+        {{ dropdownText }}
+      </span>
+      <icon name="chevron-down" class="ml-auto" />
+    </template>
+    <gl-dropdown-item v-for="project in projects" :key="project.id" @click="selectProject(project)">
+      <icon
+        name="mobile-issue-close"
+        :class="{ icon: project.id !== selectedProject.id }"
+        class="js-active-project-check"
+      />
+      <span class="ml-1">{{ project.name }}</span>
+    </gl-dropdown-item>
+  </gl-dropdown>
+</template>
diff --git a/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
new file mode 100644
index 00000000000..b89729375be
--- /dev/null
+++ b/app/assets/javascripts/confidential_merge_request/components/project_form_group.vue
@@ -0,0 +1,136 @@
+<script>
+import { GlLink } from '@gitlab/ui';
+import { __, sprintf } from '../../locale';
+import createFlash from '../../flash';
+import Api from '../../api';
+import state from '../state';
+import Dropdown from './dropdown.vue';
+
+export default {
+  components: {
+    GlLink,
+    Dropdown,
+  },
+  props: {
+    namespacePath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    newForkPath: {
+      type: String,
+      required: true,
+    },
+    helpPagePath: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      projects: [],
+    };
+  },
+  computed: {
+    selectedProject() {
+      return state.selectedProject;
+    },
+    noForkText() {
+      return sprintf(
+        __(
+          'To protect this issues confidentiality, %{link_start}fork the project%{link_end} and set the forks visiblity to private.',
+        ),
+        { link_start: `<a href="${this.newForkPath}" class="help-link">`, link_end: '</a>' },
+        false,
+      );
+    },
+  },
+  mounted() {
+    this.fetchProjects();
+    this.createBtn = document.querySelector('.js-create-target');
+    this.warningText = document.querySelector('.js-exposed-info-warning');
+  },
+  methods: {
+    selectProject(project) {
+      if (project) {
+        Object.assign(state, {
+          selectedProject: project,
+        });
+
+        if (project.namespaceFullPath !== this.namespacePath) {
+          this.showWarning();
+        }
+      } else if (this.createBtn) {
+        this.createBtn.setAttribute('disabled', 'disabled');
+      }
+    },
+    normalizeProjectData(data) {
+      return data.map(p => ({
+        id: p.id,
+        name: p.name_with_namespace,
+        pathWithNamespace: p.path_with_namespace,
+        namespaceFullpath: p.namespace.full_path,
+      }));
+    },
+    fetchProjects() {
+      Api.projectForks(this.projectPath, {
+        with_merge_requests_enabled: true,
+        min_access_level: 30,
+        visibility: 'private',
+      })
+        .then(({ data }) => {
+          this.projects = this.normalizeProjectData(data);
+          this.selectProject(this.projects[0]);
+        })
+        .catch(e => {
+          createFlash(__('Error fetching forked projects. Please try again.'));
+          throw e;
+        });
+    },
+    showWarning() {
+      if (this.warningText) {
+        this.warningText.classList.remove('hidden');
+      }
+
+      if (this.createBtn) {
+        this.createBtn.classList.add('btn-warning');
+        this.createBtn.classList.remove('btn-success');
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="form-group">
+    <label>{{ __('Project') }}</label>
+    <div>
+      <dropdown
+        v-if="projects.length"
+        :projects="projects"
+        :selected-project="selectedProject"
+        @click="selectProject"
+      />
+      <p class="text-muted mt-1 mb-0">
+        <template v-if="projects.length">
+          {{
+            __(
+              'To protect this issues confidentiality, a private fork of this project was selected.',
+            )
+          }}
+        </template>
+        <template v-else>
+          {{ __('No forks available to you.') }}<br />
+          <span v-html="noForkText"></span>
+        </template>
+        <gl-link :href="helpPagePath" class="help-link" target="_blank">
+          <span class="sr-only">{{ __('Read more') }}</span>
+          <i class="fa fa-question-circle" aria-hidden="true"></i>
+        </gl-link>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/confidential_merge_request/index.js b/app/assets/javascripts/confidential_merge_request/index.js
new file mode 100644
index 00000000000..9672821d30e
--- /dev/null
+++ b/app/assets/javascripts/confidential_merge_request/index.js
@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import { parseBoolean } from '../lib/utils/common_utils';
+import ProjectFormGroup from './components/project_form_group.vue';
+import state from './state';
+
+export function isConfidentialIssue() {
+  return parseBoolean(document.querySelector('.js-create-mr').dataset.isConfidential);
+}
+
+export function canCreateConfidentialMergeRequest() {
+  return isConfidentialIssue() && Object.keys(state.selectedProject).length > 0;
+}
+
+export function init() {
+  const el = document.getElementById('js-forked-project');
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(ProjectFormGroup, {
+        props: {
+          namespacePath: el.dataset.namespacePath,
+          projectPath: el.dataset.projectPath,
+          newForkPath: el.dataset.newForkPath,
+          helpPagePath: el.dataset.helpPagePath,
+        },
+      });
+    },
+  });
+}
diff --git a/app/assets/javascripts/confidential_merge_request/state.js b/app/assets/javascripts/confidential_merge_request/state.js
new file mode 100644
index 00000000000..95b0580f4b9
--- /dev/null
+++ b/app/assets/javascripts/confidential_merge_request/state.js
@@ -0,0 +1,5 @@
+import Vue from 'vue';
+
+export default Vue.observable({
+  selectedProject: {},
+});