Add latest changes from gitlab-org/gitlab@master

2 files changed, 89 insertions, 0 deletions

diff --git a/app/assets/javascripts/admin/background_migrations/components/database_listbox.vue b/app/assets/javascripts/admin/background_migrations/components/database_listbox.vue
new file mode 100644
index 00000000000..7f6e5dc4f35
--- /dev/null
+++ b/app/assets/javascripts/admin/background_migrations/components/database_listbox.vue
@@ -0,0 +1,51 @@
+<script>
+import { GlListbox } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { setUrlParams, visitUrl } from '~/lib/utils/url_utility';
+
+export default {
+  name: 'BackgroundMigrationsDatabaseListbox',
+  i18n: {
+    database: s__('BackgroundMigrations|Database'),
+  },
+  components: {
+    GlListbox,
+  },
+  props: {
+    databases: {
+      type: Array,
+      required: true,
+    },
+    selectedDatabase: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selected: this.selectedDatabase,
+    };
+  },
+  methods: {
+    selectDatabase(database) {
+      visitUrl(setUrlParams({ database }));
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="gl-display-flex gl-align-items-center" data-testid="database-listbox">
+    <label id="label" class="gl-font-weight-bold gl-mr-4 gl-mb-0">{{
+      $options.i18n.database
+    }}</label>
+    <gl-listbox
+      v-model="selected"
+      :items="databases"
+      right
+      :toggle-text="selectedDatabase"
+      aria-labelledby="label"
+      @select="selectDatabase"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/admin/background_migrations/index.js b/app/assets/javascripts/admin/background_migrations/index.js
new file mode 100644
index 00000000000..4ddd8f17c9a
--- /dev/null
+++ b/app/assets/javascripts/admin/background_migrations/index.js
@@ -0,0 +1,38 @@
+import Vue from 'vue';
+import * as Sentry from '@sentry/browser';
+import Translate from '~/vue_shared/translate';
+import BackgroundMigrationsDatabaseListbox from './components/database_listbox.vue';
+
+Vue.use(Translate);
+
+export const initBackgroundMigrationsApp = () => {
+  const el = document.getElementById('js-database-listbox');
+
+  if (!el) {
+    return false;
+  }
+
+  const { selectedDatabase } = el.dataset;
+  let { databases } = el.dataset;
+
+  try {
+    databases = JSON.parse(databases).map((database) => ({
+      value: database,
+      text: database,
+    }));
+  } catch (e) {
+    Sentry.captureException(e);
+  }
+
+  return new Vue({
+    el,
+    render(createElement) {
+      return createElement(BackgroundMigrationsDatabaseListbox, {
+        props: {
+          databases,
+          selectedDatabase,
+        },
+      });
+    },
+  });
+};