Add latest changes from gitlab-org/gitlab@master

13 files changed, 33 insertions, 70 deletions

diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index ed87a86e5b6..8304dfef527 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -1,10 +1,8 @@
 <script>
 import { GlAlert } from '@gitlab/ui';
-import { breakpoints } from '@gitlab/ui/dist/utils';
-import { sortBy, throttle } from 'lodash';
+import { sortBy } from 'lodash';
 import Draggable from 'vuedraggable';
 import { mapState, mapActions } from 'vuex';
-import { contentTop } from '~/lib/utils/common_utils';
 import eventHub from '~/boards/eventhub';
 import BoardAddNewColumn from 'ee_else_ce/boards/components/board_add_new_column.vue';
 import { defaultSortableOptions } from '~/sortable/constants';
@@ -94,32 +92,12 @@ export default {
   beforeDestroy() {
     eventHub.$off('updateBoard', this.refetchLists);
   },
-  mounted() {
-    this.setBoardHeight();
-
-    this.resizeObserver = new ResizeObserver(
-      throttle(() => {
-        this.setBoardHeight();
-      }, 150),
-    );
-    this.resizeObserver.observe(document.body);
-  },
-  unmounted() {
-    this.resizeObserver.disconnect();
-  },
   methods: {
     ...mapActions(['moveList', 'unsetError']),
     afterFormEnters() {
       const el = this.canDragColumns ? this.$refs.list.$el : this.$refs.list;
       el.scrollTo({ left: el.scrollWidth, behavior: 'smooth' });
     },
-    setBoardHeight() {
-      if (window.innerWidth < breakpoints.md) {
-        this.boardHeight = `${window.innerHeight - contentTop()}px`;
-      } else {
-        this.boardHeight = `${window.innerHeight - this.$el.getBoundingClientRect().top}px`;
-      }
-    },
     refetchLists() {
       this.$apollo.queries.boardListsApollo.refetch();
     },
@@ -128,7 +106,11 @@ export default {
 </script>
 
 <template>
-  <div v-cloak data-qa-selector="boards_list">
+  <div
+    v-cloak
+    data-qa-selector="boards_list"
+    class="gl-flex-grow-1 gl-display-flex gl-flex-direction-column gl-min-h-0"
+  >
     <gl-alert v-if="errorToDisplay" variant="danger" :dismissible="true" @dismiss="unsetError">
       {{ errorToDisplay }}
     </gl-alert>
@@ -137,8 +119,7 @@ export default {
       v-if="!isSwimlanesOn"
       ref="list"
       v-bind="draggableOptions"
-      class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-scroll"
-      :style="{ height: boardHeight }"
+      class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-auto"
       @end="moveList"
     >
       <board-column
@@ -165,7 +146,6 @@ export default {
       :lists="boardListsToUse"
       :can-admin-list="canAdminList"
       :filters="filterParams"
-      :style="{ height: boardHeight }"
       @setActiveList="$emit('setActiveList', $event)"
     />
 
diff --git a/app/assets/javascripts/ci/runner/admin_runner_show/index.js b/app/assets/javascripts/ci/runner/admin_runner_show/index.js
index f34cd5508ce..cbd25819303 100644
--- a/app/assets/javascripts/ci/runner/admin_runner_show/index.js
+++ b/app/assets/javascripts/ci/runner/admin_runner_show/index.js
@@ -17,7 +17,7 @@ export const initAdminRunnerShow = (selector = '#js-admin-runner-show') => {
     return null;
   }
 
-  const { runnerId, runnersPath, emptyStateImage } = el.dataset;
+  const { runnerId, runnersPath } = el.dataset;
 
   const apolloProvider = new VueApollo({
     defaultClient: createDefaultClient(),
@@ -26,9 +26,6 @@ export const initAdminRunnerShow = (selector = '#js-admin-runner-show') => {
   return new Vue({
     el,
     apolloProvider,
-    provide: {
-      emptyStateImage,
-    },
     render(h) {
       return h(AdminRunnerShowApp, {
         props: {
diff --git a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
index 24225acfd08..4d88feebe53 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/admin_runners/admin_runners_app.vue
@@ -54,7 +54,6 @@ export default {
     RunnerJobStatusBadge,
   },
   mixins: [glFeatureFlagMixin()],
-  inject: ['emptyStateSvgPath', 'emptyStateFilteredSvgPath'],
   props: {
     newRunnerPath: {
       type: String,
@@ -220,8 +219,6 @@ export default {
       :registration-token="registrationToken"
       :is-search-filtered="isSearchFiltered"
       :new-runner-path="newRunnerPath"
-      :svg-path="emptyStateSvgPath"
-      :filtered-svg-path="emptyStateFilteredSvgPath"
     />
     <template v-else>
       <runner-list
diff --git a/app/assets/javascripts/ci/runner/admin_runners/index.js b/app/assets/javascripts/ci/runner/admin_runners/index.js
index 881dc3613e9..54eb37f8c90 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/index.js
+++ b/app/assets/javascripts/ci/runner/admin_runners/index.js
@@ -35,8 +35,6 @@ export const initAdminRunners = (selector = '#js-admin-runners') => {
     registrationToken,
     onlineContactTimeoutSecs,
     staleTimeoutSecs,
-    emptyStateSvgPath,
-    emptyStateFilteredSvgPath,
   } = el.dataset;
 
   const { cacheConfig, typeDefs, localMutations } = createLocalState();
@@ -53,8 +51,6 @@ export const initAdminRunners = (selector = '#js-admin-runners') => {
       localMutations,
       onlineContactTimeoutSecs,
       staleTimeoutSecs,
-      emptyStateSvgPath,
-      emptyStateFilteredSvgPath,
     },
     render(h) {
       return h(AdminRunnersApp, {
diff --git a/app/assets/javascripts/ci/runner/components/runner_jobs_empty_state.vue b/app/assets/javascripts/ci/runner/components/runner_jobs_empty_state.vue
index 68fb38c1a29..c30a824120d 100644
--- a/app/assets/javascripts/ci/runner/components/runner_jobs_empty_state.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_jobs_empty_state.vue
@@ -1,4 +1,6 @@
 <script>
+import EMPTY_STATE_SVG_URL from '@gitlab/svgs/dist/illustrations/pipelines_empty.svg?url';
+
 import { GlEmptyState } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
@@ -12,12 +14,12 @@ export default {
   components: {
     GlEmptyState,
   },
-  inject: ['emptyStateImage'],
+  EMPTY_STATE_SVG_URL,
 };
 </script>
 
 <template>
-  <gl-empty-state :svg-path="emptyStateImage" :title="$options.i18n.title">
+  <gl-empty-state :svg-path="$options.EMPTY_STATE_SVG_URL" :title="$options.i18n.title">
     <template #description>
       <p>{{ $options.i18n.description }}</p>
     </template>
diff --git a/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue b/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue
index 087ddafb137..8606c22db34 100644
--- a/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue
+++ b/app/assets/javascripts/ci/runner/components/runner_list_empty_state.vue
@@ -1,4 +1,7 @@
 <script>
+import EMPTY_STATE_SVG_URL from '@gitlab/svgs/dist/illustrations/pipelines_empty.svg?url';
+import FILTERED_SVG_URL from '@gitlab/svgs/dist/illustrations/magnifying-glass.svg?url';
+
 import { GlEmptyState, GlLink, GlSprintf, GlModalDirective } from '@gitlab/ui';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
@@ -20,16 +23,6 @@ export default {
       required: false,
       default: false,
     },
-    svgPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    filteredSvgPath: {
-      type: String,
-      required: false,
-      default: '',
-    },
     registrationToken: {
       type: String,
       required: false,
@@ -53,6 +46,8 @@ export default {
   },
   modalId: 'runners-empty-state-instructions-modal',
   svgHeight: 145,
+  EMPTY_STATE_SVG_URL,
+  FILTERED_SVG_URL,
 };
 </script>
 
@@ -60,14 +55,14 @@ export default {
   <gl-empty-state
     v-if="isSearchFiltered"
     :title="s__('Runners|No results found')"
-    :svg-path="filteredSvgPath"
+    :svg-path="$options.FILTERED_SVG_URL"
     :svg-height="$options.svgHeight"
     :description="s__('Runners|Edit your search and try again')"
   />
   <gl-empty-state
     v-else
     :title="s__('Runners|Get started with runners')"
-    :svg-path="svgPath"
+    :svg-path="$options.EMPTY_STATE_SVG_URL"
     :svg-height="$options.svgHeight"
   >
     <template v-if="registrationToken" #description>
diff --git a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
index a4ca44b8e5a..74523bc335f 100644
--- a/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
+++ b/app/assets/javascripts/ci/runner/group_runners/group_runners_app.vue
@@ -57,7 +57,6 @@ export default {
     RunnerJobStatusBadge,
   },
   mixins: [glFeatureFlagMixin()],
-  inject: ['emptyStateSvgPath', 'emptyStateFilteredSvgPath'],
   props: {
     newRunnerPath: {
       type: String,
@@ -271,8 +270,6 @@ export default {
       :registration-token="registrationToken"
       :is-search-filtered="isSearchFiltered"
       :new-runner-path="newRunnerPath"
-      :svg-path="emptyStateSvgPath"
-      :filtered-svg-path="emptyStateFilteredSvgPath"
     />
     <template v-else>
       <runner-list
diff --git a/app/assets/javascripts/ci/runner/group_runners/index.js b/app/assets/javascripts/ci/runner/group_runners/index.js
index 4fcf484317d..a5e2521ede5 100644
--- a/app/assets/javascripts/ci/runner/group_runners/index.js
+++ b/app/assets/javascripts/ci/runner/group_runners/index.js
@@ -23,8 +23,6 @@ export const initGroupRunners = (selector = '#js-group-runners') => {
     groupFullPath,
     onlineContactTimeoutSecs,
     staleTimeoutSecs,
-    emptyStateSvgPath,
-    emptyStateFilteredSvgPath,
   } = el.dataset;
 
   const { cacheConfig, typeDefs, localMutations } = createLocalState();
@@ -42,8 +40,6 @@ export const initGroupRunners = (selector = '#js-group-runners') => {
       groupId,
       onlineContactTimeoutSecs: parseInt(onlineContactTimeoutSecs, 10),
       staleTimeoutSecs: parseInt(staleTimeoutSecs, 10),
-      emptyStateSvgPath,
-      emptyStateFilteredSvgPath,
     },
     render(h) {
       return h(GroupRunnersApp, {
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue
index 3891274e35e..7c06417e6b3 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/bubble_menu.vue
@@ -43,6 +43,7 @@ export default {
             this.$emit('hidden', ...args);
             this.menuVisible = false;
           },
+          appendTo: () => document.body,
         },
       }),
     );
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
index 7c5cc1ea6ee..91009fad3f4 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
@@ -197,7 +197,6 @@ export default {
   },
   tippyOptions: {
     placement: 'bottom',
-    appendTo: () => document.body,
   },
 };
 </script>
diff --git a/app/assets/stylesheets/framework/system_messages.scss b/app/assets/stylesheets/framework/system_messages.scss
index 946a241e6dd..703c2ca0dad 100644
--- a/app/assets/stylesheets/framework/system_messages.scss
+++ b/app/assets/stylesheets/framework/system_messages.scss
@@ -44,11 +44,6 @@
   &.devise-layout-html body hr.footer-fixed {
     bottom: $system-footer-height;
   }
-
-  .boards-list,
-  .board-swimlanes {
-    height: calc(100vh - (#{$header-height} + #{$top-bar-height} + #{$performance-bar-height} + #{$system-footer-height} + #{$gl-padding-32}));
-  }
 }
 
 .fullscreen-layout {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 82da6e959d0..4052227b927 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -688,7 +688,6 @@ $ci-skipped-color: #888;
 */
 $issue-boards-font-size: 14px;
 $issue-boards-card-shadow: rgba(0, 0, 0, 0.1);
-$issue-boards-filter-height: 68px;
 /*
  The following heights are used in environment_logs.scss and are used for calculation of the log viewer height.
 */
diff --git a/app/assets/stylesheets/page_bundles/boards.scss b/app/assets/stylesheets/page_bundles/boards.scss
index 8e20299a200..32a6af0dc36 100644
--- a/app/assets/stylesheets/page_bundles/boards.scss
+++ b/app/assets/stylesheets/page_bundles/boards.scss
@@ -6,6 +6,10 @@
 }
 
 .boards-app {
+  height: calc(#{$calc-application-viewport-height} - var(--header-height, 48px));
+  display: flex;
+  flex-direction: column;
+
   @include media-breakpoint-up(sm) {
     transition: width $gl-transition-duration-medium;
     width: 100%;
@@ -18,9 +22,14 @@
 
 .boards-list,
 .board-swimlanes {
-  overflow-x: scroll;
-  min-height: 200px;
+  flex-grow: 1;
   border-left: 8px solid var(--gray-10, $white);
+
+  min-height: calc(#{$calc-application-viewport-height} - var(--header-height));
+
+  @include media-breakpoint-up(sm) {
+    min-height: 0;
+  }
 }
 
 .board {
@@ -196,8 +205,8 @@
     padding-top: 10px;
   }
 
-  .boards-list {
-    height: calc(100vh - #{$issue-boards-filter-height});
+  .boards-app {
+    height: 100vh;
   }
 
   // Use !important for these as top and z-index are set on style attribute