Add latest changes from gitlab-org/gitlab@master

5 files changed, 98 insertions, 7 deletions

diff --git a/app/assets/javascripts/import_entities/import_projects/components/advanced_settings.vue b/app/assets/javascripts/import_entities/import_projects/components/advanced_settings.vue
new file mode 100644
index 00000000000..a8fdf9b9ec5
--- /dev/null
+++ b/app/assets/javascripts/import_entities/import_projects/components/advanced_settings.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlAccordion, GlAccordionItem, GlAlert, GlForm, GlFormCheckbox } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlAccordion,
+    GlAccordionItem,
+    GlAlert,
+    GlForm,
+    GlFormCheckbox,
+  },
+  props: {
+    stages: {
+      required: true,
+      type: Array,
+    },
+    value: {
+      required: true,
+      type: Object,
+    },
+    isInitiallyExpanded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+};
+</script>
+<template>
+  <gl-accordion :header-level="3">
+    <gl-accordion-item
+      :title="s__('ImportProjects|Advanced import settings')"
+      :visible="isInitiallyExpanded"
+    >
+      <gl-alert variant="warning" class="gl-mb-5" :dismissible="false">{{
+        s__('ImportProjects|The more information you select, the longer it will take to import')
+      }}</gl-alert>
+      <gl-form>
+        <gl-form-checkbox
+          v-for="{ name, label, details } in stages"
+          :key="name"
+          :checked="value[name]"
+          @change="$emit('input', { ...value, [name]: $event })"
+        >
+          {{ label }}
+          <template v-if="details" #help>{{ details }} </template>
+        </gl-form-checkbox>
+      </gl-form>
+    </gl-accordion-item>
+  </gl-accordion>
+</template>
diff --git a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
index 848c7361601..97a7ed4bf55 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/import_projects_table.vue
@@ -9,10 +9,12 @@ import {
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { n__, __, sprintf } from '~/locale';
 import ProviderRepoTableRow from './provider_repo_table_row.vue';
+import AdvancedSettings from './advanced_settings.vue';
 
 export default {
   name: 'ImportProjectsTable',
   components: {
+    AdvancedSettings,
     ProviderRepoTableRow,
     GlLoadingIcon,
     GlButton,
@@ -35,6 +37,24 @@ export default {
       required: false,
       default: false,
     },
+    optionalStages: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isAdvancedSettingsPanelInitiallyExpanded: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      optionalStagesSelection: Object.fromEntries(
+        this.optionalStages.map(({ name }) => [name, false]),
+      ),
+    };
   },
 
   computed: {
@@ -127,7 +147,7 @@ export default {
         modal-id="import-all-modal"
         :title="s__('ImportProjects|Import repositories')"
         :ok-title="__('Import')"
-        @ok="importAll"
+        @ok="importAll({ optionalStages: optionalStagesSelection })"
       >
         {{
           n__(
@@ -150,6 +170,13 @@ export default {
         />
       </form>
     </div>
+    <advanced-settings
+      v-if="optionalStages && optionalStages.length"
+      v-model="optionalStagesSelection"
+      :stages="optionalStages"
+      :is-initially-expanded="isAdvancedSettingsPanelInitiallyExpanded"
+      class="gl-mb-5"
+    />
     <div v-if="repositories.length" class="gl-w-full">
       <table>
         <thead class="gl-border-0 gl-border-solid gl-border-t-1 gl-border-gray-100">
@@ -171,6 +198,7 @@ export default {
               :repo="repo"
               :available-namespaces="namespaces"
               :user-namespace="defaultTargetNamespace"
+              :optional-stages="optionalStagesSelection"
             />
           </template>
         </tbody>
diff --git a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
index e4090a378e1..458e0fb1cb1 100644
--- a/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
+++ b/app/assets/javascripts/import_entities/import_projects/components/provider_repo_table_row.vue
@@ -43,6 +43,10 @@ export default {
       type: Array,
       required: true,
     },
+    optionalStages: {
+      type: Object,
+      required: true,
+    },
   },
 
   computed: {
@@ -177,7 +181,7 @@ export default {
         v-if="isImportNotStarted"
         type="button"
         data-qa-selector="import_button"
-        @click="fetchImport(repo.importSource.id)"
+        @click="fetchImport({ repoId: repo.importSource.id, optionalStages })"
       >
         {{ importButtonText }}
       </gl-button>
diff --git a/app/assets/javascripts/import_entities/import_projects/index.js b/app/assets/javascripts/import_entities/import_projects/index.js
index 5146a0eb461..4daa9e8a1b8 100644
--- a/app/assets/javascripts/import_entities/import_projects/index.js
+++ b/app/assets/javascripts/import_entities/import_projects/index.js
@@ -42,6 +42,7 @@ export function initPropsFromElement(element) {
     providerTitle: element.dataset.provider,
     filterable: parseBoolean(element.dataset.filterable),
     paginatable: parseBoolean(element.dataset.paginatable),
+    optionalStages: JSON.parse(element.dataset.optionalStages),
   };
 }
 
diff --git a/app/assets/javascripts/import_entities/import_projects/store/actions.js b/app/assets/javascripts/import_entities/import_projects/store/actions.js
index cbdce96ab40..a30c14f9d28 100644
--- a/app/assets/javascripts/import_entities/import_projects/store/actions.js
+++ b/app/assets/javascripts/import_entities/import_projects/store/actions.js
@@ -43,11 +43,14 @@ const restartJobsPolling = () => {
 const setImportTarget = ({ commit }, { repoId, importTarget }) =>
   commit(types.SET_IMPORT_TARGET, { repoId, importTarget });
 
-const importAll = ({ state, dispatch }) => {
+const importAll = ({ state, dispatch }, config = {}) => {
   return Promise.all(
-    state.repositories
-      .filter(isProjectImportable)
-      .map((r) => dispatch('fetchImport', r.importSource.id)),
+    state.repositories.filter(isProjectImportable).map((r) =>
+      dispatch('fetchImport', {
+        repoId: r.importSource.id,
+        optionalStages: config?.optionalStages,
+      }),
+    ),
   );
 };
 
@@ -92,7 +95,10 @@ const fetchReposFactory = ({ reposPath = isRequired() }) => ({ state, commit })
     });
 };
 
-const fetchImportFactory = (importPath = isRequired()) => ({ state, commit, getters }, repoId) => {
+const fetchImportFactory = (importPath = isRequired()) => (
+  { state, commit, getters },
+  { repoId, optionalStages },
+) => {
   const { ciCdOnly } = state;
   const importTarget = getters.getImportTarget(repoId);
 
@@ -105,6 +111,7 @@ const fetchImportFactory = (importPath = isRequired()) => ({ state, commit, gett
       ci_cd_only: ciCdOnly,
       new_name: newName,
       target_namespace: targetNamespace,
+      ...(Object.keys(optionalStages).length ? { optional_stages: optionalStages } : {}),
     })
     .then(({ data }) => {
       commit(types.RECEIVE_IMPORT_SUCCESS, {