Add latest changes from gitlab-org/gitlab@master

8 files changed, 60 insertions, 44 deletions

diff --git a/app/assets/javascripts/pages/admin/jobs/components/constants.js b/app/assets/javascripts/pages/admin/jobs/components/constants.js
index 8c4ea2cde92..4af8cb355fc 100644
--- a/app/assets/javascripts/pages/admin/jobs/components/constants.js
+++ b/app/assets/javascripts/pages/admin/jobs/components/constants.js
@@ -1,5 +1,5 @@
 import { s__, __ } from '~/locale';
-import { DEFAULT_FIELDS, RAW_TEXT_WARNING } from '~/jobs/components/table/constants';
+import { RAW_TEXT_WARNING } from '~/jobs/components/table/constants';
 
 export const JOBS_COUNT_ERROR_MESSAGE = __('There was an error fetching the number of jobs.');
 export const JOBS_FETCH_ERROR_MSG = __('There was an error fetching the jobs.');
@@ -19,11 +19,17 @@ export const RUNNER_EMPTY_TEXT = __('None');
 export const RUNNER_NO_DESCRIPTION = s__('Runners|No description');
 
 /* Admin Table constants */
+/* The field list is based on app/assets/javascripts/jobs/components/table/constants.js */
 export const DEFAULT_FIELDS_ADMIN = [
-  ...DEFAULT_FIELDS.slice(0, 2),
+  { key: 'status', label: __('Status'), columnClass: 'gl-w-15p' },
+  { key: 'job', label: __('Job'), columnClass: 'gl-w-20p' },
   { key: 'project', label: __('Project'), columnClass: 'gl-w-20p' },
   { key: 'runner', label: __('Runner'), columnClass: 'gl-w-15p' },
-  ...DEFAULT_FIELDS.slice(2),
+  { key: 'pipeline', label: __('Pipeline'), columnClass: 'gl-w-10p' },
+  { key: 'stage', label: __('Stage'), columnClass: 'gl-w-10p' },
+  { key: 'name', label: __('Name'), columnClass: 'gl-w-15p' },
+  { key: 'duration', label: __('Duration'), columnClass: 'gl-w-15p' },
+  { key: 'actions', label: '', columnClass: 'gl-w-10p' },
 ];
 
 export const RAW_TEXT_WARNING_ADMIN = RAW_TEXT_WARNING;
diff --git a/app/assets/javascripts/pipelines/components/pipeline_details_header.vue b/app/assets/javascripts/pipelines/components/pipeline_details_header.vue
index d4cdae5d69c..8fe6707028a 100644
--- a/app/assets/javascripts/pipelines/components/pipeline_details_header.vue
+++ b/app/assets/javascripts/pipelines/components/pipeline_details_header.vue
@@ -280,6 +280,9 @@ export default {
     duration() {
       return this.pipeline?.duration || 0;
     },
+    showDuration() {
+      return this.duration && this.isFinished;
+    },
     durationFormatted() {
       return timeIntervalInWords(this.duration);
     },
@@ -560,7 +563,7 @@ export default {
             <gl-icon name="timer" />
             {{ inProgressText }}
           </span>
-          <span v-if="duration" class="gl-ml-2" data-testid="pipeline-duration-text">
+          <span v-if="showDuration" class="gl-ml-2" data-testid="pipeline-duration-text">
             <gl-icon name="timer" />
             {{ durationText }}
           </span>
diff --git a/app/assets/javascripts/search/sort/components/app.vue b/app/assets/javascripts/search/sort/components/app.vue
index 2bf144705c4..9f28d2bfc99 100644
--- a/app/assets/javascripts/search/sort/components/app.vue
+++ b/app/assets/javascripts/search/sort/components/app.vue
@@ -1,21 +1,14 @@
 <script>
-import {
-  GlButtonGroup,
-  GlButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlCollapsibleListbox, GlButtonGroup, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { SORT_DIRECTION_UI } from '../constants';
 
 export default {
   name: 'GlobalSearchSort',
   components: {
+    GlCollapsibleListbox,
     GlButtonGroup,
     GlButton,
-    GlDropdown,
-    GlDropdownItem,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -26,8 +19,19 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      selectedSortOptionTitle: '',
+    };
+  },
   computed: {
     ...mapState(['query']),
+    listboxOptions() {
+      return this.searchSortOptions.map((option) => ({
+        text: option.title,
+        value: option.title,
+      }));
+    },
     selectedSortOption: {
       get() {
         const { sort } = this.query;
@@ -60,14 +64,23 @@ export default {
       return this.query?.sort?.includes('asc') ? SORT_DIRECTION_UI.asc : SORT_DIRECTION_UI.desc;
     },
   },
+  watch: {
+    selectedSortOption: {
+      handler() {
+        this.selectedSortOptionTitle = this.selectedSortOption.title;
+      },
+      immediate: true,
+    },
+  },
   methods: {
     ...mapActions(['applyQuery', 'setQuery']),
-    handleSortChange(option) {
-      if (!option.sortable) {
-        this.selectedSortOption = option.sortParam;
+    handleSortChange(value) {
+      const selectedOption = this.searchSortOptions.find((option) => option.title === value);
+      if (!selectedOption.sortable) {
+        this.selectedSortOption = selectedOption.sortParam;
       } else {
         // Default new sort options to desc
-        this.selectedSortOption = option.sortParam.desc;
+        this.selectedSortOption = selectedOption.sortParam.desc;
       }
     },
     handleSortDirectionChange() {
@@ -82,16 +95,15 @@ export default {
 
 <template>
   <gl-button-group>
-    <gl-dropdown :text="selectedSortOption.title" :right="true" class="w-100">
-      <gl-dropdown-item
-        v-for="sortOption in searchSortOptions"
-        :key="sortOption.title"
-        is-check-item
-        :is-checked="sortOption.title === selectedSortOption.title"
-        @click="handleSortChange(sortOption)"
-        >{{ sortOption.title }}</gl-dropdown-item
-      >
-    </gl-dropdown>
+    <gl-collapsible-listbox
+      v-model="selectedSortOptionTitle"
+      placement="right"
+      class="gl-z-index-1"
+      toggle-class="gl-rounded-top-right-none! gl-rounded-bottom-right-none!"
+      :toggle-text="selectedSortOptionTitle"
+      :items="listboxOptions"
+      @select="handleSortChange"
+    />
     <gl-button
       v-gl-tooltip
       :disabled="!selectedSortOption.sortable"
diff --git a/app/assets/stylesheets/page_bundles/login.scss b/app/assets/stylesheets/page_bundles/login.scss
index 1752d6e90a9..355d2afc0ba 100644
--- a/app/assets/stylesheets/page_bundles/login.scss
+++ b/app/assets/stylesheets/page_bundles/login.scss
@@ -196,13 +196,6 @@
     }
   }
 
-  .form-control {
-    &:active,
-    &:focus {
-      background-color: $white;
-    }
-  }
-
   .submit-container {
     margin-top: 16px;
   }
@@ -271,7 +264,7 @@
       left: 0;
       right: 0;
       height: 40px;
-      background: $white;
+      background: var(--white, $white);
     }
 
     .login-page-broadcast {
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index ecdbc171bdc..322363d7f4b 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -246,7 +246,7 @@ table {
 .commit-diff {
   .discussion-reply-holder {
     background-color: $gray-light;
-    border-radius: 0 0 3px 3px;
+    border-radius: 0 0 $gl-border-radius-base $gl-border-radius-base;
     padding: $gl-padding;
     border-top: 1px solid $gray-50;
 
diff --git a/app/helpers/ci/runners_helper.rb b/app/helpers/ci/runners_helper.rb
index 7177ddd3f31..b1481f668bb 100644
--- a/app/helpers/ci/runners_helper.rb
+++ b/app/helpers/ci/runners_helper.rb
@@ -22,12 +22,13 @@ module Ci
         icon = 'warning-solid'
       when :offline
         title = s_("Runners|Runner is offline; last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(contacted_at) }
-        icon = 'status-failed'
-        span_class = 'gl-text-red-500'
+        icon = 'status-waiting'
+        span_class = 'gl-text-gray-500'
       when :stale
         # runner may have contacted (or not) and be stale: consider both cases.
         title = contacted_at ? s_("Runners|Runner is stale; last contact was %{runner_contact} ago") % { runner_contact: time_ago_in_words(contacted_at) } : s_("Runners|Runner is stale; it has never contacted this instance")
-        icon = 'warning-solid'
+        icon = 'time-out'
+        span_class = 'gl-text-orange-500'
       end
 
       content_tag(:span, class: span_class, title: title, data: { toggle: 'tooltip', container: 'body', testid: 'runner_status_icon', qa_selector: "runner_status_#{status}_content" }) do
diff --git a/app/models/ci/job_artifact.rb b/app/models/ci/job_artifact.rb
index 766155c6a99..5cd7988837e 100644
--- a/app/models/ci/job_artifact.rb
+++ b/app/models/ci/job_artifact.rb
@@ -372,11 +372,11 @@ module Ci
       file_stored_after_transaction_hooks
     end
 
-    # method overriden in EE
+    # method overridden in EE
     def file_stored_after_transaction_hooks
     end
 
-    # method overriden in EE
+    # method overridden in EE
     def file_stored_in_transaction_hooks
     end
 
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index 64bd1bf32f0..5ec95c3095d 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -17,9 +17,10 @@
       .file-actions.gl-display-none.gl-sm-display-flex
         #js-diff-stats{ data: diff_file_stats_data(diff_file) }
         - if diff_file.blob&.readable_text?
-          %span.has-tooltip{ title: _("Toggle comments for this file") }
-            = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected', disabled: @diff_notes_disabled do
-              = sprite_icon('comment')
+          - unless @diff_notes_disabled
+            %span.has-tooltip{ title: _("Toggle comments for this file") }
+              = link_to '#', class: 'js-toggle-diff-comments btn gl-button btn-default btn-icon selected' do
+                = sprite_icon('comment')
           \
           - if editable_diff?(diff_file)
             - link_opts = @merge_request.persisted? ? { from_merge_request_iid: @merge_request.iid } : {}