Add latest changes from gitlab-org/gitlab@master

21 files changed, 120 insertions, 76 deletions

diff --git a/app/assets/javascripts/design_management/pages/design/index.vue b/app/assets/javascripts/design_management/pages/design/index.vue
index 0251ffe28f9..2f2b2ed1a90 100644
--- a/app/assets/javascripts/design_management/pages/design/index.vue
+++ b/app/assets/javascripts/design_management/pages/design/index.vue
@@ -332,7 +332,7 @@ export default {
 
 <template>
   <div
-    class="design-detail js-design-detail fixed-top gl-w-full gl-bottom-0 gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
+    class="design-detail js-design-detail fixed-top gl-w-full gl-display-flex gl-justify-content-center gl-flex-direction-column gl-lg-flex-direction-row"
   >
     <div
       class="gl-display-flex gl-overflow-hidden gl-flex-grow-1 gl-flex-direction-column gl-relative"
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue
new file mode 100644
index 00000000000..5b840a5ed43
--- /dev/null
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/components/experiment_header.vue
@@ -0,0 +1,47 @@
+<script>
+import { GlButton } from '@gitlab/ui';
+import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
+import { __ } from '~/locale';
+import { visitUrl } from '~/lib/utils/url_utility';
+
+export default {
+  name: 'ExperimentHeader',
+  components: {
+    DeleteButton,
+    GlButton,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    deleteInfo: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    downloadCsv() {
+      const currentPath = window.location.pathname;
+      const currentSearch = window.location.search;
+
+      visitUrl(`${currentPath}.csv${currentSearch}`);
+    },
+  },
+  i18n: {
+    downloadAsCsvLabel: __('Download as CSV'),
+  },
+};
+</script>
+
+<template>
+  <div class="detail-page-header gl-flex-wrap-wrap">
+    <div class="detail-page-header-body">
+      <h1 class="page-title gl-font-size-h-display flex-fill">{{ title }}</h1>
+
+      <gl-button @click="downloadCsv">{{ $options.i18n.downloadAsCsvLabel }}</gl-button>
+
+      <delete-button v-bind="deleteInfo" />
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
index 40b9e0723e9..acb5fc7cad2 100644
--- a/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
+++ b/app/assets/javascripts/ml/experiment_tracking/routes/experiments/show/ml_experiments_show.vue
@@ -12,7 +12,7 @@ import { queryToObject, setUrlParams, visitUrl } from '~/lib/utils/url_utility';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 import KeysetPagination from '~/vue_shared/components/incubation/pagination.vue';
 import IncubationAlert from '~/vue_shared/components/incubation/incubation_alert.vue';
-import DeleteButton from '~/ml/experiment_tracking/components/delete_button.vue';
+import ExperimentHeader from './components/experiment_header.vue';
 import {
   LIST_KEY_CREATED_AT,
   BASE_SORT_FIELDS,
@@ -31,7 +31,7 @@ export default {
     IncubationAlert,
     RegistrySearch,
     KeysetPagination,
-    DeleteButton,
+    ExperimentHeader,
   },
   props: {
     experiment: {
@@ -130,6 +130,14 @@ export default {
     hasItems() {
       return this.candidates.length > 0;
     },
+    deleteButtonInfo() {
+      return {
+        deletePath: this.experiment.path,
+        deleteConfirmationText: translations.DELETE_EXPERIMENT_CONFIRMATION_MESSAGE,
+        actionPrimaryText: translations.DELETE_EXPERIMENT_PRIMARY_ACTION_LABEL,
+        modalTitle: translations.DELETE_EXPERIMENT_MODAL_TITLE,
+      };
+    },
   },
   methods: {
     submitFilters() {
@@ -163,20 +171,7 @@ export default {
       :link-to-feedback-issue="$options.constants.FEATURE_FEEDBACK_ISSUE"
     />
 
-    <div class="detail-page-header gl-flex-wrap-wrap">
-      <div class="detail-page-header-body">
-        <h1 class="page-title gl-font-size-h-display flex-fill">
-          {{ experiment.name }}
-        </h1>
-
-        <delete-button
-          :delete-path="experiment.path"
-          :delete-confirmation-text="$options.i18n.DELETE_EXPERIMENT_CONFIRMATION_MESSAGE"
-          :action-primary-text="$options.i18n.DELETE_EXPERIMENT_PRIMARY_ACTION_LABEL"
-          :modal-title="$options.i18n.DELETE_EXPERIMENT_MODAL_TITLE"
-        />
-      </div>
-    </div>
+    <experiment-header :title="experiment.name" :delete-info="deleteButtonInfo" />
 
     <registry-search
       :filters="filters"
diff --git a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue b/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
index 02a3870f499..1c81f652387 100644
--- a/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
+++ b/app/assets/javascripts/search/sidebar/components/scope_navigation.vue
@@ -22,7 +22,9 @@ export default {
     ...mapState(['navigation', 'urlQuery']),
   },
   created() {
-    this.fetchSidebarCount();
+    if (this.urlQuery?.search) {
+      this.fetchSidebarCount();
+    }
   },
   methods: {
     ...mapActions(['fetchSidebarCount']),
diff --git a/app/assets/javascripts/search/sidebar/constants/index.js b/app/assets/javascripts/search/sidebar/constants/index.js
index 395629dc70c..f123494fba2 100644
--- a/app/assets/javascripts/search/sidebar/constants/index.js
+++ b/app/assets/javascripts/search/sidebar/constants/index.js
@@ -12,7 +12,7 @@ export const NAV_LINK_DEFAULT_CLASSES = [
   'gl-justify-content-space-between',
 ];
 export const NAV_LINK_COUNT_DEFAULT_CLASSES = ['gl-font-sm', 'gl-font-weight-normal'];
-export const HR_DEFAULT_CLASSES = ['gl-my-5', 'gl-mx-5', 'gl-border-gray-100'];
+export const HR_DEFAULT_CLASSES = ['gl-m-5', 'gl-border-gray-100'];
 export const ONLY_SHOW_MD = ['gl-display-none', 'gl-md-display-block'];
 
 export const TRACKING_LABEL_CHECKBOX = 'Checkbox';
diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher.vue b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
index 5c1cebe0195..fa9da6cef9d 100644
--- a/app/assets/javascripts/super_sidebar/components/context_switcher.vue
+++ b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
@@ -150,7 +150,12 @@ export default {
             {{ $options.i18n.switchTo }}
           </div>
           <ul :aria-label="$options.i18n.switchTo" class="gl-p-0">
-            <nav-item v-for="item in persistentLinks" :key="item.link" :item="item" />
+            <nav-item
+              v-for="item in persistentLinks"
+              :key="item.link"
+              :item="item"
+              :link-classes="{ [item.link_classes]: item.link_classes }"
+            />
           </ul>
         </li>
         <projects-list
diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue b/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue
index 451e12df697..e56ef9e410b 100644
--- a/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue
+++ b/app/assets/javascripts/super_sidebar/components/context_switcher_toggle.vue
@@ -38,7 +38,7 @@ export default {
   <button
     v-collapse-toggle.context-switcher
     type="button"
-    class="context-switcher-toggle gl-p-0 gl-bg-transparent gl-hover-bg-t-gray-a-08 gl-border-0 border-top border-bottom gl-border-gray-a-08 gl-box-shadow-none gl-display-flex gl-align-items-center gl-font-weight-bold gl-w-full gl-h-8"
+    class="context-switcher-toggle gl-p-0 gl-bg-transparent gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-border-0 border-top border-bottom gl-border-gray-a-08 gl-box-shadow-none gl-display-flex gl-align-items-center gl-font-weight-bold gl-w-full gl-h-8"
   >
     <span
       v-if="context.icon"
diff --git a/app/assets/javascripts/super_sidebar/components/groups_list.vue b/app/assets/javascripts/super_sidebar/components/groups_list.vue
index eb256e4971b..4fa15f1cd76 100644
--- a/app/assets/javascripts/super_sidebar/components/groups_list.vue
+++ b/app/assets/javascripts/super_sidebar/components/groups_list.vue
@@ -36,11 +36,14 @@ export default {
     storageKey() {
       return `${this.username}/frequent-groups`;
     },
-    viewAllItem() {
+    viewAllProps() {
       return {
-        link: this.viewAllLink,
-        title: s__('Navigation|View all your groups'),
-        icon: 'group',
+        item: {
+          link: this.viewAllLink,
+          title: s__('Navigation|View all your groups'),
+          icon: 'group',
+        },
+        linkClasses: { 'dashboard-shortcuts-groups': true },
       };
     },
   },
@@ -61,7 +64,7 @@ export default {
     :search-results="searchResults"
   >
     <template #view-all-items>
-      <nav-item :item="viewAllItem" />
+      <nav-item v-bind="viewAllProps" />
     </template>
   </search-results>
   <frequent-items-list
@@ -72,7 +75,7 @@ export default {
     :pristine-text="$options.i18n.pristineText"
   >
     <template #view-all-items>
-      <nav-item :item="viewAllItem" />
+      <nav-item v-bind="viewAllProps" />
     </template>
   </frequent-items-list>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 3a3eb72a4a8..53698a808a7 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -146,7 +146,7 @@ export default {
     <component
       :is="elem"
       v-bind="linkProps"
-      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-px-0 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-text-decoration-none!"
+      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-mb-1 gl-px-0 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none!"
       :class="computedLinkClasses"
       data-qa-selector="nav_item_link"
       data-testid="nav-item-link"
diff --git a/app/assets/javascripts/super_sidebar/components/pinned_section.vue b/app/assets/javascripts/super_sidebar/components/pinned_section.vue
index d1c0e757a91..193de143c2b 100644
--- a/app/assets/javascripts/super_sidebar/components/pinned_section.vue
+++ b/app/assets/javascripts/super_sidebar/components/pinned_section.vue
@@ -60,7 +60,7 @@ export default {
   <section class="gl-mx-2">
     <a
       href="#"
-      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-py-3 gl-px-0 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-text-decoration-none!"
+      class="gl-rounded-base gl-relative gl-display-flex gl-align-items-center gl-py-3 gl-px-0 gl-line-height-normal gl-text-black-normal! gl-hover-bg-t-gray-a-08 gl-focus-bg-t-gray-a-08 gl-text-decoration-none!"
       @click.prevent="expanded = !expanded"
     >
       <div class="gl-flex-shrink-0 gl-w-6 gl-mx-3">
diff --git a/app/assets/javascripts/super_sidebar/components/projects_list.vue b/app/assets/javascripts/super_sidebar/components/projects_list.vue
index b7a29a78d5f..78860e35eb1 100644
--- a/app/assets/javascripts/super_sidebar/components/projects_list.vue
+++ b/app/assets/javascripts/super_sidebar/components/projects_list.vue
@@ -36,11 +36,14 @@ export default {
     storageKey() {
       return `${this.username}/frequent-projects`;
     },
-    viewAllItem() {
+    viewAllProps() {
       return {
-        link: this.viewAllLink,
-        title: s__('Navigation|View all your projects'),
-        icon: 'project',
+        item: {
+          link: this.viewAllLink,
+          title: s__('Navigation|View all your projects'),
+          icon: 'project',
+        },
+        linkClasses: { 'dashboard-shortcuts-projects': true },
       };
     },
   },
@@ -62,7 +65,7 @@ export default {
     :search-results="searchResults"
   >
     <template #view-all-items>
-      <nav-item :item="viewAllItem" />
+      <nav-item v-bind="viewAllProps" />
     </template>
   </search-results>
   <frequent-items-list
@@ -73,7 +76,7 @@ export default {
     :pristine-text="$options.i18n.pristineText"
   >
     <template #view-all-items>
-      <nav-item :item="viewAllItem" />
+      <nav-item v-bind="viewAllProps" />
     </template>
   </frequent-items-list>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
index 302b6a9d4b0..2a95d2c37c4 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar.vue
@@ -108,5 +108,14 @@ export default {
         </div>
       </div>
     </aside>
+    <a
+      v-for="shortcutLink in sidebarData.shortcut_links"
+      :key="shortcutLink.href"
+      :href="shortcutLink.href"
+      :class="shortcutLink.css_class"
+      class="gl-display-none"
+    >
+      {{ shortcutLink.title }}
+    </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 498c082ddb2..b69ebc6be17 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -137,7 +137,7 @@ export default {
     <div class="gl-display-flex gl-justify-content-space-between gl-px-3 gl-py-2 gl-gap-2">
       <counter
         v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.issues"
-        class="gl-flex-basis-third"
+        class="gl-flex-basis-third dashboard-shortcuts-issues"
         icon="issues"
         :count="sidebarData.assigned_open_issues_count"
         :href="sidebarData.issues_dashboard_path"
@@ -165,7 +165,7 @@ export default {
       </merge-request-menu>
       <counter
         v-gl-tooltip:super-sidebar.hover.bottom="$options.i18n.todoList"
-        class="gl-flex-basis-third"
+        class="gl-flex-basis-third shortcuts-todos"
         icon="todo-done"
         :count="sidebarData.todos_pending_count"
         href="/dashboard/todos"
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 0d18835ac0f..22c6fb04d3b 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -8,7 +8,7 @@ $search-input-field-x-min-width: 200px;
   min-height: $header-height;
   border: 0;
   position: fixed;
-  top: 0;
+  top: $calc-application-bars-height;
   left: 0;
   right: 0;
   border-radius: 0;
@@ -479,11 +479,6 @@ $search-input-field-x-min-width: 200px;
   visibility: visible;
 }
 
-.with-performance-bar .navbar-gitlab,
-.with-performance-bar .fixed-top {
-  top: $performance-bar-height;
-}
-
 .navbar-empty {
   justify-content: center;
   height: $header-height;
diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss
index db59a482c64..946a241e6dd 100644
--- a/app/assets/stylesheets/framework/system_messages.scss
+++ b/app/assets/stylesheets/framework/system_messages.scss
@@ -36,27 +36,6 @@
   }
 }
 
-// System Header
-.with-system-header {
-  // main navigation
-  // login page
-  .navbar-gitlab,
-  .fixed-top {
-    top: $system-header-height;
-  }
-
-  // Performance Bar
-  // System Header
-  &.with-performance-bar {
-    // main navigation
-    header.navbar-gitlab,
-    .fixed-top {
-      top: $performance-bar-height + $system-header-height;
-    }
-
-  }
-}
-
 // System Footer
 .with-system-footer {
   // navless pages' footer eg: login page
diff --git a/app/assets/stylesheets/page_bundles/design_management.scss b/app/assets/stylesheets/page_bundles/design_management.scss
index 143682e1cd7..f56eb4ae6fb 100644
--- a/app/assets/stylesheets/page_bundles/design_management.scss
+++ b/app/assets/stylesheets/page_bundles/design_management.scss
@@ -20,10 +20,7 @@ $t-gray-a-16-design-pin: rgba($black, 0.16);
 
 .design-detail {
   background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
-
-  .with-performance-bar & {
-    top: 35px;
-  }
+  bottom: $calc-application-footer-height;
 
   .comment-indicator {
     border-radius: 50%;
diff --git a/app/assets/stylesheets/page_bundles/search.scss b/app/assets/stylesheets/page_bundles/search.scss
index cde570cfb0f..d37e87b5cd5 100644
--- a/app/assets/stylesheets/page_bundles/search.scss
+++ b/app/assets/stylesheets/page_bundles/search.scss
@@ -21,18 +21,18 @@ $border-radius-medium: 3px;
   }
 }
 
+.language-filter-checkbox {
+  .custom-control-label {
+    flex-grow: 1;
+  }
+}
+
 .search-sidebar {
   @include media-breakpoint-up(md) {
     min-width: $search-sidebar-min-width;
     max-width: $search-sidebar-max-width;
   }
 
-  .language-filter-checkbox {
-    .custom-control-label {
-      flex-grow: 1;
-    }
-  }
-
   .language-filter-max-height {
     max-height: $language-filter-max-height;
   }
diff --git a/app/assets/stylesheets/startup/startup-dark.scss b/app/assets/stylesheets/startup/startup-dark.scss
index de2a2ddcf32..5219cd62775 100644
--- a/app/assets/stylesheets/startup/startup-dark.scss
+++ b/app/assets/stylesheets/startup/startup-dark.scss
@@ -750,7 +750,7 @@ kbd {
   min-height: var(--header-height, 48px);
   border: 0;
   position: fixed;
-  top: 0;
+  top: calc(var(--system-header-height) + var(--performance-bar-height));
   left: 0;
   right: 0;
   border-radius: 0;
diff --git a/app/assets/stylesheets/startup/startup-general.scss b/app/assets/stylesheets/startup/startup-general.scss
index e0a71a1c306..16bf2c20bbc 100644
--- a/app/assets/stylesheets/startup/startup-general.scss
+++ b/app/assets/stylesheets/startup/startup-general.scss
@@ -750,7 +750,7 @@ kbd {
   min-height: var(--header-height, 48px);
   border: 0;
   position: fixed;
-  top: 0;
+  top: calc(var(--system-header-height) + var(--performance-bar-height));
   left: 0;
   right: 0;
   border-radius: 0;
diff --git a/app/assets/stylesheets/startup/startup-signin.scss b/app/assets/stylesheets/startup/startup-signin.scss
index 3663c97f41a..fcdcab5caeb 100644
--- a/app/assets/stylesheets/startup/startup-signin.scss
+++ b/app/assets/stylesheets/startup/startup-signin.scss
@@ -769,6 +769,9 @@ svg {
   fill: currentColor;
 }
 
+.fixed-top {
+  top: calc(var(--system-header-height) + var(--performance-bar-height));
+}
 .gl-display-flex {
   display: flex;
 }
diff --git a/app/assets/stylesheets/utilities.scss b/app/assets/stylesheets/utilities.scss
index 66c543aa654..e5f99879166 100644
--- a/app/assets/stylesheets/utilities.scss
+++ b/app/assets/stylesheets/utilities.scss
@@ -39,6 +39,12 @@
 .border-radius-small { border-radius: $border-radius-small; }
 .box-shadow-default { box-shadow: 0 2px 4px 0 $black-transparent; }
 
+// Override Bootstrap class with offset for system-header and
+// performance bar when present
+.fixed-top {
+  top: $calc-application-bars-height;
+}
+
 .gl-children-ml-sm-3 > * {
   @include media-breakpoint-up(sm) {
     @include gl-ml-3;