Add latest changes from gitlab-org/gitlab@master

12 files changed, 94 insertions, 91 deletions

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 dfc5b68b820..be09052fb7e 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
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLoadingIcon, GlIntersectionObserver, GlModal } from '@gitlab/ui';
+import { GlButton, GlLoadingIcon, GlIntersectionObserver, GlModal, GlFormInput } from '@gitlab/ui';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { n__, __, sprintf } from '~/locale';
 import ProviderRepoTableRow from './provider_repo_table_row.vue';
@@ -12,6 +12,7 @@ export default {
     GlButton,
     GlModal,
     GlIntersectionObserver,
+    GlFormInput,
   },
   props: {
     providerTitle: {
@@ -115,13 +116,13 @@ export default {
 
 <template>
   <div>
-    <p class="light text-nowrap mt-2">
+    <p class="gl-text-gray-900 gl-white-space-nowrap gl-mt-3">
       {{ s__('ImportProjects|Select the repositories you want to import') }}
     </p>
     <template v-if="hasIncompatibleRepos">
       <slot name="incompatible-repos-warning"></slot>
     </template>
-    <div class="d-flex justify-content-between align-items-end flex-wrap mb-3">
+    <div class="gl-display-flex gl-justify-content-space-between gl-flex-wrap gl-mb-5">
       <gl-button
         variant="success"
         :loading="isImportingAnyRepo"
@@ -148,24 +149,29 @@ export default {
 
       <slot name="actions"></slot>
       <form v-if="filterable" class="gl-ml-auto" novalidate @submit.prevent>
-        <input
+        <gl-form-input
           data-qa-selector="githubish_import_filter_field"
-          class="form-control"
           name="filter"
           :placeholder="__('Filter your repositories by name')"
           autofocus
-          size="40"
+          size="lg"
           @keyup.enter="setFilter($event.target.value)"
         />
       </form>
     </div>
-    <div v-if="repositories.length" class="table-responsive">
-      <table class="table import-table">
-        <thead>
-          <th class="import-jobs-from-col">{{ fromHeaderText }}</th>
-          <th class="import-jobs-to-col">{{ __('To GitLab') }}</th>
-          <th class="import-jobs-status-col">{{ __('Status') }}</th>
-          <th class="import-jobs-cta-col"></th>
+    <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">
+          <th class="import-jobs-from-col gl-p-4 gl-vertical-align-top gl-border-b-1">
+            {{ fromHeaderText }}
+          </th>
+          <th class="import-jobs-to-col gl-p-4 gl-vertical-align-top gl-border-b-1">
+            {{ __('To GitLab') }}
+          </th>
+          <th class="import-jobs-status-col gl-p-4 gl-vertical-align-top gl-border-b-1">
+            {{ __('Status') }}
+          </th>
+          <th class="import-jobs-cta-col gl-p-4 gl-vertical-align-top gl-border-b-1"></th>
         </thead>
         <tbody>
           <template v-for="repo in repositories">
@@ -183,9 +189,9 @@ export default {
       :key="pagePaginationStateKey"
       @appear="fetchRepos"
     />
-    <gl-loading-icon v-if="isLoading" class="import-projects-loading-icon" size="md" />
+    <gl-loading-icon v-if="isLoading" class="gl-mt-7" size="md" />
 
-    <div v-if="!isLoading && repositories.length === 0" class="text-center">
+    <div v-if="!isLoading && repositories.length === 0" class="gl-text-center">
       <strong>{{ emptyStateText }}</strong>
     </div>
   </div>
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 d448ea44bc7..289c83979bb 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
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon, GlBadge } from '@gitlab/ui';
+import { GlIcon, GlBadge, GlFormInput, GlButton, GlLink } from '@gitlab/ui';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import { __ } from '~/locale';
 import Select2Select from '~/vue_shared/components/select2_select.vue';
@@ -12,8 +12,11 @@ export default {
   components: {
     Select2Select,
     ImportStatus,
+    GlFormInput,
+    GlButton,
     GlIcon,
     GlBadge,
+    GlLink,
   },
   props: {
     repo: {
@@ -61,7 +64,7 @@ export default {
     select2Options() {
       return {
         data: this.availableNamespaces,
-        containerCssClass: 'import-namespace-select qa-project-namespace-select w-auto',
+        containerCssClass: 'import-namespace-select qa-project-namespace-select gl-w-auto',
       };
     },
 
@@ -97,52 +100,56 @@ export default {
 </script>
 
 <template>
-  <tr class="qa-project-import-row import-row">
-    <td>
-      <a
-        :href="repo.importSource.providerLink"
-        rel="noreferrer noopener"
-        target="_blank"
-        data-testid="providerLink"
+  <tr
+    class="qa-project-import-row gl-h-11 gl-border-0 gl-border-solid gl-border-t-1 gl-border-gray-100 gl-h-11"
+  >
+    <td class="gl-p-4">
+      <gl-link :href="repo.importSource.providerLink" target="_blank" data-testid="providerLink"
         >{{ repo.importSource.fullName }}
         <gl-icon v-if="repo.importSource.providerLink" name="external-link" />
-      </a>
+      </gl-link>
     </td>
-    <td class="d-flex flex-wrap flex-lg-nowrap" data-testid="fullPath">
+    <td
+      class="gl-display-flex gl-flex-sm-wrap gl-p-4 gl-pt-5 gl-vertical-align-top"
+      data-testid="fullPath"
+    >
       <template v-if="repo.importSource.target">{{ repo.importSource.target }}</template>
       <template v-else-if="isImportNotStarted">
-        <select2-select v-model="targetNamespaceSelect" :options="select2Options" />
-        <span class="px-2 import-slash-divider d-flex justify-content-center align-items-center"
-          >/</span
-        >
-        <input
-          v-model="newNameInput"
-          type="text"
-          class="form-control import-project-name-input qa-project-path-field"
-        />
+        <div class="import-entities-target-select gl-display-flex gl-align-items-stretch gl-w-full">
+          <select2-select v-model="targetNamespaceSelect" :options="select2Options" />
+          <div
+            class="import-entities-target-select-separator gl-px-3 gl-display-flex gl-align-items-center gl-border-solid gl-border-0 gl-border-t-1 gl-border-b-1"
+          >
+            /
+          </div>
+          <gl-form-input
+            v-model="newNameInput"
+            class="gl-rounded-top-left-none gl-rounded-bottom-left-none qa-project-path-field"
+          />
+        </div>
       </template>
       <template v-else-if="repo.importedProject">{{ displayFullPath }}</template>
     </td>
-    <td>
+    <td class="gl-p-4">
       <import-status :status="importStatus" />
     </td>
     <td data-testid="actions">
-      <a
+      <gl-button
         v-if="isFinished"
         class="btn btn-default"
         :href="repo.importedProject.fullPath"
         rel="noreferrer noopener"
         target="_blank"
         >{{ __('Go to project') }}
-      </a>
-      <button
+      </gl-button>
+      <gl-button
         v-if="isImportNotStarted"
         type="button"
-        class="qa-import-button btn btn-default"
+        class="qa-import-button"
         @click="fetchImport(repo.importSource.id)"
       >
         {{ importButtonText }}
-      </button>
+      </gl-button>
       <gl-badge v-else-if="isIncompatible" variant="danger">{{
         __('Incompatible project')
       }}</gl-badge>
diff --git a/app/assets/javascripts/issues_list/components/issuables_list_app.vue b/app/assets/javascripts/issues_list/components/issuables_list_app.vue
index 8022e2234a9..0b413ce0b06 100644
--- a/app/assets/javascripts/issues_list/components/issuables_list_app.vue
+++ b/app/assets/javascripts/issues_list/components/issuables_list_app.vue
@@ -333,15 +333,19 @@ export default {
       this.fetchIssuables();
     },
     handleFilter(filters) {
-      let search = null;
+      const searchTokens = [];
 
       filters.forEach((filter) => {
-        if (typeof filter === 'string') {
-          search = filter;
+        if (filter.type === 'filtered-search-term') {
+          if (filter.value.data) {
+            searchTokens.push(filter.value.data);
+          }
         }
       });
 
-      this.filters.search = search;
+      if (searchTokens.length) {
+        this.filters.search = searchTokens.join(' ');
+      }
       this.page = 1;
 
       this.refetchIssuables();
diff --git a/app/assets/javascripts/lib/utils/webpack.js b/app/assets/javascripts/lib/utils/webpack.js
index 622c40e0f35..07a4d2deb0b 100644
--- a/app/assets/javascripts/lib/utils/webpack.js
+++ b/app/assets/javascripts/lib/utils/webpack.js
@@ -1,6 +1,9 @@
 import { joinPaths } from '~/lib/utils/url_utility';
 
-// tell webpack to load assets from origin so that web workers don't break
+/**
+ * Tell webpack to load assets from origin so that web workers don't break
+ * See https://gitlab.com/gitlab-org/gitlab/-/issues/321656 for a fix
+ */
 export function resetServiceWorkersPublicPath() {
   // __webpack_public_path__ is a global variable that can be used to adjust
   // the webpack publicPath setting at runtime.
diff --git a/app/assets/javascripts/pipeline_editor/index.js b/app/assets/javascripts/pipeline_editor/index.js
index 15385771d25..dc427f55b5f 100644
--- a/app/assets/javascripts/pipeline_editor/index.js
+++ b/app/assets/javascripts/pipeline_editor/index.js
@@ -2,12 +2,17 @@ import Vue from 'vue';
 
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
+import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
 import { resolvers } from './graphql/resolvers';
 import typeDefs from './graphql/typedefs.graphql';
-
 import PipelineEditorApp from './pipeline_editor_app.vue';
 
 export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
+  // Prevent issues loading syntax validation workers
+  // Fixes https://gitlab.com/gitlab-org/gitlab/-/issues/297252
+  // TODO Remove when https://gitlab.com/gitlab-org/gitlab/-/issues/321656 is resolved
+  resetServiceWorkersPublicPath();
+
   const el = document.querySelector(selector);
 
   if (!el) {
diff --git a/app/assets/stylesheets/page_bundles/import.scss b/app/assets/stylesheets/page_bundles/import.scss
index 5f43d5df7e3..453b810196b 100644
--- a/app/assets/stylesheets/page_bundles/import.scss
+++ b/app/assets/stylesheets/page_bundles/import.scss
@@ -12,35 +12,6 @@
   width: 1%;
 }
 
-.import-project-name-input {
-  border-radius: 0 $border-radius-default $border-radius-default 0;
-  position: relative;
-  left: -1px;
-  max-width: 300px;
-}
-
-.import-slash-divider {
-  background-color: $gray-lightest;
-  border: 1px solid $border-color;
-}
-
-.import-row {
-  height: 55px;
-}
-
-.import-table {
-  .import-jobs-from-col,
-  .import-jobs-to-col,
-  .import-jobs-status-col,
-  .import-jobs-cta-col {
-    border-bottom-width: 1px;
-    padding-left: $gl-padding;
-  }
-}
-
-.import-projects-loading-icon {
-  margin-top: $gl-padding-32;
-}
 
 .import-entities-target-select {
   &.disabled {
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index d17ccac9e43..ebffb62cff3 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -36,7 +36,6 @@ class ProjectsController < Projects::ApplicationController
   end
 
   before_action only: [:edit] do
-    push_frontend_feature_flag(:approval_suggestions, @project, default_enabled: true)
     push_frontend_feature_flag(:allow_editing_commit_messages, @project)
   end
 
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 8faa9a19169..233a8260036 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -214,6 +214,15 @@ module DiffHelper
     )
   end
 
+  # As the fork suggestion button is identical every time, we cache it for a full page load
+  def render_fork_suggestion
+    return unless current_user
+
+    strong_memoize(:fork_suggestion) do
+      render partial: "projects/fork_suggestion"
+    end
+  end
+
   private
 
   def diff_btn(title, name, selected)
diff --git a/app/models/merge_request_diff.rb b/app/models/merge_request_diff.rb
index 5500ee7f74a..fb873ddbbab 100644
--- a/app/models/merge_request_diff.rb
+++ b/app/models/merge_request_diff.rb
@@ -768,7 +768,7 @@ class MergeRequestDiff < ApplicationRecord
   end
 
   def sort_diffs?
-    Feature.enabled?(:sort_diffs, project, default_enabled: false)
+    Feature.enabled?(:sort_diffs, project, default_enabled: :yaml)
   end
 end
 
diff --git a/app/views/projects/_fork_suggestion.html.haml b/app/views/projects/_fork_suggestion.html.haml
index 9e6ff4a5d7a..59c9c279a39 100644
--- a/app/views/projects/_fork_suggestion.html.haml
+++ b/app/views/projects/_fork_suggestion.html.haml
@@ -1,11 +1,10 @@
-- if current_user
-  .js-file-fork-suggestion-section.file-fork-suggestion.hidden
-    %span.file-fork-suggestion-note
-      You're not allowed to
-      %span.js-file-fork-suggestion-section-action
-        edit
-      files in this project directly. Please fork this project,
-      make your changes there, and submit a merge request.
-    = link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-inverted btn-success'
-    %button.js-cancel-fork-suggestion-button.gl-button.btn.btn-grouped{ type: 'button' }
-      Cancel
+.js-file-fork-suggestion-section.file-fork-suggestion.hidden
+  %span.file-fork-suggestion-note
+    You're not allowed to
+    %span.js-file-fork-suggestion-section-action
+      edit
+    files in this project directly. Please fork this project,
+    make your changes there, and submit a merge request.
+  = link_to 'Fork', nil, method: :post, class: 'js-fork-suggestion-button gl-button btn btn-grouped btn-inverted btn-success'
+  %button.js-cancel-fork-suggestion-button.gl-button.btn.btn-grouped{ type: 'button' }
+    Cancel
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index 7adb91f1fe6..a7f13989ca7 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -20,5 +20,5 @@
       = download_blob_button(blob)
       = view_on_environment_button(@commit.sha, @path, @environment) if @environment
 
-= render 'projects/fork_suggestion'
+= render_fork_suggestion
 = render_if_exists 'projects/blob/header_file_locks', project: @project, path: @path
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index e89b7bb8902..4b198717790 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -30,6 +30,6 @@
         = view_file_button(diff_file.content_sha, diff_file.file_path, project)
         = view_on_environment_button(diff_file.content_sha, diff_file.file_path, environment) if environment
 
-  = render 'projects/fork_suggestion'
+  = render_fork_suggestion
 
   = render 'projects/diffs/content', diff_file: diff_file