Add latest changes from gitlab-org/gitlab@master

Author: GitLab Bot

.gitlab/issue_templates/Broken Master - Flaky.md

@@ -25,4 +25,6 @@ learn more about how to reproduce them.
 
 Please refer to the [Resolution guidance](https://about.gitlab.com/handbook/engineering/workflow/#resolution-of-broken-master) to learn more about resolution of broken master.
 
+Once the flaky failure has been fixed on the default branch, open merge requests to cherry-pick the fix to the active stable branches.
+
 /label ~"type::maintenance" ~"failure::flaky-test" ~"priority::3" ~"severity::3"

app/assets/javascripts/admin/background_migrations/components/database_listbox.vue

@@ -35,7 +35,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-align-items-center" data-testid="database-listbox">
+  <div class="gl-display-flex gl-align-items-center">
     <label id="label" class="gl-font-weight-bold gl-mr-4 gl-mb-0">{{
       $options.i18n.database
     }}</label>

app/assets/javascripts/ci/pipeline_new/components/refs_dropdown.vue

@@ -72,7 +72,6 @@ export default {
 <template>
   <gl-collapsible-listbox
     class="gl-w-full gl-font-monospace"
-    data-testid="ref-select"
     :items="listBoxItems"
     :searchable="true"
     :searching="isLoading"

app/assets/javascripts/flash.js

@@ -1,9 +1,7 @@
 import * as Sentry from '@sentry/browser';
-import { escape } from 'lodash';
 import Vue from 'vue';
 import { GlAlert } from '@gitlab/ui';
 import { __ } from '~/locale';
-import { spriteIcon } from './lib/utils/common_utils';
 
 const FLASH_TYPES = {
   ALERT: 'alert',
@@ -18,13 +16,6 @@ const VARIANT_DANGER = 'danger';
 const VARIANT_INFO = 'info';
 const VARIANT_TIP = 'tip';
 
-const TYPE_TO_VARIANT = {
-  [FLASH_TYPES.ALERT]: VARIANT_DANGER,
-  [FLASH_TYPES.NOTICE]: VARIANT_INFO,
-  [FLASH_TYPES.SUCCESS]: VARIANT_SUCCESS,
-  [FLASH_TYPES.WARNING]: VARIANT_WARNING,
-};
-
 const FLASH_CLOSED_EVENT = 'flashClosed';
 
 const getCloseEl = (flashEl) => {
@@ -57,27 +48,6 @@ const hideFlash = (flashEl, fadeTransition = true) => {
   if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
 };
 
-const createAction = (config) => `
-  <a
-    href="${config.href || '#'}"
-    class="flash-action"
-    ${config.href ? '' : 'role="button"'}
-  >
-    ${escape(config.title)}
-  </a>
-`;
-
-const createFlashEl = (message, type) => `
-  <div class="flash-${type}" data-testid="alert-${TYPE_TO_VARIANT[type]}">
-    <div class="flash-text">
-      ${escape(message)}
-      <div class="close-icon-wrapper js-close-icon">
-        ${spriteIcon('close', 'close-icon')}
-      </div>
-    </div>
-  </div>
-`;
-
 const addDismissFlashClickListener = (flashEl, fadeTransition) => {
   // There are some flash elements which do not have a closeEl.
   // https://gitlab.com/gitlab-org/gitlab/blob/763426ef344488972eb63ea5be8744e0f8459e6b/ee/app/views/layouts/header/_read_only_banner.html.haml
@@ -211,73 +181,7 @@ const createAlert = function createAlert({
   });
 };
 
-/**
- * @deprecated use `createAlert` instead
- *
- * Flash banner supports different types of Flash configurations
- * along with ability to provide actionConfig which can be used to show
- * additional action or link on banner next to message
- *
- * @param {object} options - Options to control the flash message
- * @param {string} options.message - Flash message text
- * @param {'alert'|'notice'|'success'|'warning'} [options.type] - Type of Flash; it defaults to 'alert'
- * @param {Element|Document} [options.parent] - Reference to parent element under which Flash needs to appear
- * @param {object} [options.actionConfig] - Map of config to show action on banner
- * @param {string} [options.actionConfig.href] - URL to which action config should point to (default: '#')
- * @param {string} [options.actionConfig.title] - Title of action
- * @param {Function} [options.actionConfig.clickHandler] - Method to call when action is clicked on
- * @param {boolean} [options.fadeTransition] - Boolean to determine whether to fade the alert out
- * @param {boolean} [options.addBodyClass] - Adds `flash-shown` class to the `body` element
- * @param {boolean} [options.captureError] - Boolean to determine whether to send error to Sentry
- * @param {object} [options.error] - Error to be captured in Sentry
- */
-const createFlash = function createFlash({
-  message,
-  type = FLASH_TYPES.ALERT,
-  parent = document,
-  actionConfig = null,
-  fadeTransition = true,
-  addBodyClass = false,
-  captureError = false,
-  error = null,
-}) {
-  const flashContainer = parent.querySelector('.flash-container');
-
-  if (!flashContainer) return null;
-
-  // eslint-disable-next-line no-unsanitized/property
-  flashContainer.innerHTML = createFlashEl(message, type);
-
-  const flashEl = flashContainer.querySelector(`.flash-${type}`);
-
-  if (actionConfig) {
-    // eslint-disable-next-line no-unsanitized/method
-    flashEl.insertAdjacentHTML('beforeend', createAction(actionConfig));
-
-    if (actionConfig.clickHandler) {
-      flashEl
-        .querySelector('.flash-action')
-        .addEventListener('click', (e) => actionConfig.clickHandler(e));
-    }
-  }
-
-  addDismissFlashClickListener(flashEl, fadeTransition);
-
-  flashContainer.classList.add('gl-display-block');
-
-  if (addBodyClass) document.body.classList.add('flash-shown');
-
-  if (captureError && error) Sentry.captureException(error);
-
-  flashContainer.close = () => {
-    getCloseEl(flashEl).click();
-  };
-
-  return flashContainer;
-};
-
 export {
-  createFlash as default,
   hideFlash,
   addDismissFlashClickListener,
   FLASH_TYPES,

app/assets/javascripts/import_entities/import_projects/index.js

@@ -57,7 +57,11 @@ const apolloProvider = new VueApollo({
   defaultClient,
 });
 
-export default function mountImportProjectsTable(mountElement) {
+export default function mountImportProjectsTable({
+  mountElement,
+  Component = ImportProjectsTable,
+  extraProps = () => ({}),
+}) {
   if (!mountElement) return undefined;
 
   const store = initStoreFromElement(mountElement);
@@ -68,7 +72,7 @@ export default function mountImportProjectsTable(mountElement) {
     store,
     apolloProvider,
     render(createElement) {
-      return createElement(ImportProjectsTable, { props });
+      return createElement(Component, { props: { ...props, ...extraProps(mountElement.dataset) } });
     },
   });
 }

app/assets/javascripts/integrations/edit/components/integration_form.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlAlert, GlBadge, GlButton, GlForm } from '@gitlab/ui';
+import { GlAlert, GlForm } from '@gitlab/ui';
 import axios from 'axios';
 import * as Sentry from '@sentry/browser';
 import { mapState, mapActions, mapGetters } from 'vuex';
@@ -10,8 +10,6 @@ import {
   I18N_DEFAULT_ERROR_MESSAGE,
   I18N_SUCCESSFUL_CONNECTION_MESSAGE,
   INTEGRATION_FORM_TYPE_SLACK,
-  integrationFormSectionComponents,
-  billingPlanNames,
 } from '~/integrations/constants';
 import { refreshCurrentPage } from '~/lib/utils/url_utility';
 import csrf from '~/lib/utils/csrf';
@@ -21,6 +19,7 @@ import ActiveCheckbox from './active_checkbox.vue';
 import DynamicField from './dynamic_field.vue';
 import OverrideDropdown from './override_dropdown.vue';
 import TriggerFields from './trigger_fields.vue';
+import IntegrationFormSection from './integration_forms/section.vue';
 import IntegrationFormActions from './integration_form_actions.vue';
 
 export default {
@@ -31,29 +30,8 @@ export default {
     TriggerFields,
     DynamicField,
     IntegrationFormActions,
-    IntegrationSectionConfiguration: () =>
-      import(
-        /* webpackChunkName: 'integrationSectionConfiguration' */ '~/integrations/edit/components/sections/configuration.vue'
-      ),
-    IntegrationSectionConnection: () =>
-      import(
-        /* webpackChunkName: 'integrationSectionConnection' */ '~/integrations/edit/components/sections/connection.vue'
-      ),
-    IntegrationSectionJiraIssues: () =>
-      import(
-        /* webpackChunkName: 'integrationSectionJiraIssues' */ '~/integrations/edit/components/sections/jira_issues.vue'
-      ),
-    IntegrationSectionJiraTrigger: () =>
-      import(
-        /* webpackChunkName: 'integrationSectionJiraTrigger' */ '~/integrations/edit/components/sections/jira_trigger.vue'
-      ),
-    IntegrationSectionTrigger: () =>
-      import(
-        /* webpackChunkName: 'integrationSectionTrigger' */ '~/integrations/edit/components/sections/trigger.vue'
-      ),
+    IntegrationFormSection,
     GlAlert,
-    GlBadge,
-    GlButton,
     GlForm,
   },
   directives: {
@@ -120,9 +98,6 @@ export default {
   },
   methods: {
     ...mapActions(['setOverride', 'requestJiraIssueTypes']),
-    fieldsForSection(section) {
-      return this.propsSource.fields.filter((field) => field.section === section.type);
-    },
     form() {
       return this.$refs.integrationForm.$el;
     },
@@ -189,23 +164,21 @@ export default {
           this.isResetting = false;
         });
     },
-    onRequestJiraIssueTypes() {
-      this.requestJiraIssueTypes(this.getFormData());
-    },
     getFormData() {
       return new FormData(this.form());
     },
     onToggleIntegrationState(integrationActive) {
       this.integrationActive = integrationActive;
     },
+    onRequestJiraIssueTypes() {
+      this.requestJiraIssueTypes(this.getFormData());
+    },
   },
   helpHtmlConfig: {
     ADD_TAGS: ['use'], // to support icon SVGs
     FORBID_ATTR: [], // This is trusted input so we can override the default config to allow data-* attributes
   },
   csrf,
-  integrationFormSectionComponents,
-  billingPlanNames,
   slackUpgradeInfo: {
     title: s__(
       `SlackIntegration|Update to the latest version of GitLab for Slack to get notifications`,
@@ -280,42 +253,15 @@ export default {
     </div>
 
     <template v-if="hasSections">
-      <div
+      <integration-form-section
         v-for="(section, index) in customState.sections"
         :key="section.type"
+        :section="section"
+        :is-validated="isValidated"
         :class="{ 'gl-border-b gl-pb-3 gl-mb-6': index !== customState.sections.length - 1 }"
-        data-testid="integration-section"
-      >
-        <section class="gl-lg-display-flex">
-          <div class="gl-flex-basis-third gl-mr-4">
-            <h4 class="gl-mt-0">
-              {{ section.title
-              }}<gl-badge
-                v-if="section.plan"
-                :href="propsSource.aboutPricingUrl"
-                target="_blank"
-                rel="noopener noreferrer"
-                variant="tier"
-                icon="license"
-                class="gl-ml-3"
-              >
-                {{ $options.billingPlanNames[section.plan] }}
-              </gl-badge>
-            </h4>
-            <p v-safe-html="section.description"></p>
-          </div>
-
-          <div class="gl-flex-basis-two-thirds">
-            <component
-              :is="$options.integrationFormSectionComponents[section.type]"
-              :fields="fieldsForSection(section)"
-              :is-validated="isValidated"
-              @toggle-integration-active="onToggleIntegrationState"
-              @request-jira-issue-types="onRequestJiraIssueTypes"
-            />
-          </div>
-        </section>
-      </div>
+        @toggle-integration-active="onToggleIntegrationState"
+        @request-jira-issue-types="onRequestJiraIssueTypes"
+      />
     </template>
 
     <section v-if="hasFieldsWithoutSection" class="gl-lg-display-flex gl-justify-content-end">