Add latest changes from gitlab-org/gitlab@master

7 files changed, 85 insertions, 19 deletions

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 2168685e703..e6813211fe9 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
@@ -52,6 +52,8 @@ export default {
     RunnerTypeTabs,
     RunnerActionsCell,
     RunnerJobStatusBadge,
+    RunnerDashboardLink: () =>
+      import('ee_component/ci/runner/components/runner_dashboard_link.vue'),
   },
   mixins: [glFeatureFlagMixin()],
   props: {
@@ -188,12 +190,12 @@ export default {
         nav-class="gl-border-none!"
       />
 
-      <div class="gl-w-full gl-md-w-auto gl-display-flex">
+      <div class="gl-w-full gl-md-w-auto gl-display-flex gl-gap-3">
+        <runner-dashboard-link />
         <gl-button :href="newRunnerPath" variant="confirm">
           {{ s__('Runners|New instance runner') }}
         </gl-button>
         <registration-dropdown
-          class="gl-ml-3"
           :registration-token="registrationToken"
           :type="$options.INSTANCE_TYPE"
           placement="right"
diff --git a/app/assets/javascripts/ci/runner/admin_runners/index.js b/app/assets/javascripts/ci/runner/admin_runners/index.js
index 54eb37f8c90..d4df1393487 100644
--- a/app/assets/javascripts/ci/runner/admin_runners/index.js
+++ b/app/assets/javascripts/ci/runner/admin_runners/index.js
@@ -1,6 +1,9 @@
 import { GlToast } from '@gitlab/ui';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
+
+import { provide } from 'ee_else_ce/ci/runner/admin_runners/provide';
+
 import { visitUrl } from '~/lib/utils/url_utility';
 import { updateOutdatedUrl } from '~/ci/runner/runner_search_utils';
 import createDefaultClient from '~/lib/graphql';
@@ -29,14 +32,7 @@ export const initAdminRunners = (selector = '#js-admin-runners') => {
     return null;
   }
 
-  const {
-    runnerInstallHelpPage,
-    newRunnerPath,
-    registrationToken,
-    onlineContactTimeoutSecs,
-    staleTimeoutSecs,
-  } = el.dataset;
-
+  const { newRunnerPath, registrationToken } = el.dataset;
   const { cacheConfig, typeDefs, localMutations } = createLocalState();
 
   const apolloProvider = new VueApollo({
@@ -47,10 +43,8 @@ export const initAdminRunners = (selector = '#js-admin-runners') => {
     el,
     apolloProvider,
     provide: {
-      runnerInstallHelpPage,
+      ...provide(el.dataset),
       localMutations,
-      onlineContactTimeoutSecs,
-      staleTimeoutSecs,
     },
     render(h) {
       return h(AdminRunnersApp, {
diff --git a/app/assets/javascripts/ci/runner/admin_runners/provide.js b/app/assets/javascripts/ci/runner/admin_runners/provide.js
new file mode 100644
index 00000000000..6f2f66ed72e
--- /dev/null
+++ b/app/assets/javascripts/ci/runner/admin_runners/provide.js
@@ -0,0 +1,16 @@
+/**
+ * Provides global values to the admin runners app.
+ *
+ * @param {Object} `data-` HTML attributes of the mounting point
+ * @returns An object with properties to use provide/inject of the root app.
+ * See EE version
+ */
+export const provide = (elDataset) => {
+  const { runnerInstallHelpPage, onlineContactTimeoutSecs, staleTimeoutSecs } = elDataset;
+
+  return {
+    runnerInstallHelpPage,
+    onlineContactTimeoutSecs,
+    staleTimeoutSecs,
+  };
+};
diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
index 582aee3c9a3..1d0eaae4c57 100644
--- a/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
+++ b/app/assets/javascripts/pages/import/bulk_imports/history/components/bulk_imports_history_app.vue
@@ -15,21 +15,21 @@ import { parseIntPagination, normalizeHeaders } from '~/lib/utils/common_utils';
 import { joinPaths } from '~/lib/utils/url_utility';
 import { getBulkImportsHistory } from '~/rest_api';
 import ImportStatus from '~/import_entities/components/import_status.vue';
+import { StatusPoller } from '~/import_entities/import_groups/services/status_poller';
+
 import { WORKSPACE_GROUP, WORKSPACE_PROJECT } from '~/issues/constants';
 import PaginationBar from '~/vue_shared/components/pagination_bar/pagination_bar.vue';
 import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
 import LocalStorageSync from '~/vue_shared/components/local_storage_sync.vue';
 
+import { isImporting } from '../utils';
 import { DEFAULT_ERROR } from '../utils/error_messages';
 
 const DEFAULT_PER_PAGE = 20;
-const DEFAULT_TH_CLASSES =
-  'gl-bg-transparent! gl-border-b-solid! gl-border-b-gray-200! gl-border-b-1! gl-p-5!';
 
 const HISTORY_PAGINATION_SIZE_PERSIST_KEY = 'gl-bulk-imports-history-per-page';
 
 const tableCell = (config) => ({
-  thClass: `${DEFAULT_TH_CLASSES}`,
   tdClass: (value, key, item) => {
     return {
       // eslint-disable-next-line no-underscore-dangle
@@ -57,6 +57,8 @@ export default {
     GlTooltip,
   },
 
+  inject: ['realtimeChangesPath'],
+
   data() {
     return {
       loading: true,
@@ -73,12 +75,12 @@ export default {
     tableCell({
       key: 'source_full_path',
       label: s__('BulkImport|Source'),
-      thClass: `${DEFAULT_TH_CLASSES} gl-w-30p`,
+      thClass: `gl-w-30p`,
     }),
     tableCell({
       key: 'destination_name',
       label: s__('BulkImport|Destination'),
-      thClass: `${DEFAULT_TH_CLASSES} gl-w-40p`,
+      thClass: `gl-w-40p`,
     }),
     tableCell({
       key: 'created_at',
@@ -95,6 +97,12 @@ export default {
     hasHistoryItems() {
       return this.historyItems.length > 0;
     },
+
+    importingHistoryItemIds() {
+      return this.historyItems
+        .filter((item) => isImporting(item.status))
+        .map((item) => item.bulk_import_id);
+    },
   },
 
   watch: {
@@ -104,10 +112,43 @@ export default {
       },
       deep: true,
     },
+
+    importingHistoryItemIds(value) {
+      if (value.length > 0) {
+        this.statusPoller.startPolling();
+      } else {
+        this.statusPoller.stopPolling();
+      }
+    },
   },
 
   mounted() {
     this.loadHistoryItems();
+
+    this.statusPoller = new StatusPoller({
+      pollPath: this.realtimeChangesPath,
+      updateImportStatus: (update) => {
+        if (!this.importingHistoryItemIds.includes(update.id)) {
+          return;
+        }
+
+        const updateItemIndex = this.historyItems.findIndex(
+          (item) => item.bulk_import_id === update.id,
+        );
+        const updateItem = this.historyItems[updateItemIndex];
+
+        if (updateItem.status !== update.status_name) {
+          this.$set(this.historyItems, updateItemIndex, {
+            ...updateItem,
+            status: update.status_name,
+          });
+        }
+      },
+    });
+  },
+
+  beforeDestroy() {
+    this.statusPoller.stopPolling();
   },
 
   methods: {
diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/index.js b/app/assets/javascripts/pages/import/bulk_imports/history/index.js
index 5a67aa99baa..cc12723572d 100644
--- a/app/assets/javascripts/pages/import/bulk_imports/history/index.js
+++ b/app/assets/javascripts/pages/import/bulk_imports/history/index.js
@@ -4,8 +4,14 @@ import BulkImportHistoryApp from './components/bulk_imports_history_app.vue';
 function mountImportHistoryApp(mountElement) {
   if (!mountElement) return undefined;
 
+  const { realtimeChangesPath } = mountElement.dataset;
+
   return new Vue({
     el: mountElement,
+    name: 'BulkImportHistoryRoot',
+    provide: {
+      realtimeChangesPath,
+    },
     render(createElement) {
       return createElement(BulkImportHistoryApp);
     },
diff --git a/app/assets/javascripts/pages/import/bulk_imports/history/utils/index.js b/app/assets/javascripts/pages/import/bulk_imports/history/utils/index.js
new file mode 100644
index 00000000000..09cba40dd36
--- /dev/null
+++ b/app/assets/javascripts/pages/import/bulk_imports/history/utils/index.js
@@ -0,0 +1,7 @@
+import { STATUSES } from '~/import_entities/constants';
+
+export function isImporting(status) {
+  return [STATUSES.SCHEDULING, STATUSES.SCHEDULED, STATUSES.CREATED, STATUSES.STARTED].includes(
+    status,
+  );
+}
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index f8f54567ef2..b953ff3024b 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -91,7 +91,7 @@
 }
 
 .md-preview-holder {
-  min-height: 173px;
+  min-height: 177px;
   padding: 10px 0;
   overflow-x: auto;
 }