Add latest changes from gitlab-org/gitlab@master

5 files changed, 97 insertions, 8 deletions

diff --git a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
index d377f0f2654..432271d2075 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_integrations_list.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTable, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlTable, GlIcon, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import Tracking from '~/tracking';
 import { trackAlertIntegrationsViewsOptions } from '../constants';
@@ -27,6 +27,7 @@ export default {
   components: {
     GlTable,
     GlIcon,
+    GlLoadingIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -37,10 +38,15 @@ export default {
       required: false,
       default: () => [],
     },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   fields: [
     {
-      key: 'activated',
+      key: 'active',
       label: __('Status'),
     },
     {
@@ -78,12 +84,13 @@ export default {
       :empty-text="$options.i18n.emptyState"
       :items="integrations"
       :fields="$options.fields"
+      :busy="loading"
       stacked="md"
       :tbody-tr-class="tbodyTrClass"
       show-empty
     >
-      <template #cell(activated)="{ item }">
-        <span v-if="item.activated" data-testid="integration-activated-status">
+      <template #cell(active)="{ item }">
+        <span v-if="item.active" data-testid="integration-activated-status">
           <gl-icon
             v-gl-tooltip
             name="check-circle-filled"
@@ -104,6 +111,10 @@ export default {
           {{ $options.i18n.status.disabled.name }}
         </span>
       </template>
+
+      <template #table-busy>
+        <gl-loading-icon size="lg" color="dark" class="mt-3" />
+      </template>
     </gl-table>
   </div>
 </template>
diff --git a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
index 1edb8f1c921..1576faf13a9 100644
--- a/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
+++ b/app/assets/javascripts/alerts_settings/components/alerts_settings_wrapper.vue
@@ -1,6 +1,8 @@
 <script>
 import { s__ } from '~/locale';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import { fetchPolicies } from '~/lib/graphql';
+import getIntegrationsQuery from '../graphql/queries/get_integrations.query.graphql';
 import IntegrationsList from './alerts_integrations_list.vue';
 import SettingsFormOld from './alerts_settings_form_old.vue';
 import SettingsFormNew from './alerts_settings_form_new.vue';
@@ -19,19 +21,52 @@ export default {
     prometheus: {
       default: {},
     },
+    projectPath: {
+      default: '',
+    },
+  },
+  apollo: {
+    integrations: {
+      fetchPolicy: fetchPolicies.CACHE_AND_NETWORK,
+      query: getIntegrationsQuery,
+      variables() {
+        return {
+          projectPath: this.projectPath,
+        };
+      },
+      update(data) {
+        const { alertManagementIntegrations: { nodes: list = [] } = {} } = data.project || {};
+
+        return {
+          list,
+        };
+      },
+      error() {
+        this.errored = true;
+      },
+    },
+  },
+  data() {
+    return {
+      errored: false,
+      integrations: {},
+    };
   },
   computed: {
-    integrations() {
+    loading() {
+      return this.$apollo.queries.integrations.loading;
+    },
+    intergrationsOptionsOld() {
       return [
         {
           name: s__('AlertSettings|HTTP endpoint'),
           type: s__('AlertsIntegrations|HTTP endpoint'),
-          activated: this.generic.activated,
+          active: this.generic.activated,
         },
         {
           name: s__('AlertSettings|External Prometheus'),
           type: s__('AlertsIntegrations|Prometheus'),
-          activated: this.prometheus.activated,
+          active: this.prometheus.activated,
         },
       ];
     },
@@ -41,7 +76,10 @@ export default {
 
 <template>
   <div>
-    <integrations-list :integrations="integrations" />
+    <integrations-list
+      :integrations="glFeatures.httpIntegrationsList ? integrations.list : intergrationsOptionsOld"
+      :loading="loading"
+    />
     <settings-form-new v-if="glFeatures.httpIntegrationsList" />
     <settings-form-old v-else />
   </div>
diff --git a/app/assets/javascripts/alerts_settings/graphql/fragments/integration_item.fragment.graphql b/app/assets/javascripts/alerts_settings/graphql/fragments/integration_item.fragment.graphql
new file mode 100644
index 00000000000..6d9307959df
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/graphql/fragments/integration_item.fragment.graphql
@@ -0,0 +1,9 @@
+fragment IntegrationItem on AlertManagementIntegration {
+  id
+  type
+  active
+  name
+  url
+  token
+  apiUrl
+}
diff --git a/app/assets/javascripts/alerts_settings/graphql/queries/get_integrations.query.graphql b/app/assets/javascripts/alerts_settings/graphql/queries/get_integrations.query.graphql
new file mode 100644
index 00000000000..228dd5fb176
--- /dev/null
+++ b/app/assets/javascripts/alerts_settings/graphql/queries/get_integrations.query.graphql
@@ -0,0 +1,11 @@
+#import "../fragments/integration_item.fragment.graphql"
+
+query getIntegrations($projectPath: ID!) {
+  project(fullPath: $projectPath) {
+    alertManagementIntegrations {
+      nodes {
+        ...IntegrationItem
+      }
+    }
+  }
+}
diff --git a/app/assets/javascripts/alerts_settings/index.js b/app/assets/javascripts/alerts_settings/index.js
index 80f06a094b7..8f22b8d1dcd 100644
--- a/app/assets/javascripts/alerts_settings/index.js
+++ b/app/assets/javascripts/alerts_settings/index.js
@@ -1,7 +1,11 @@
 import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import AlertSettingsWrapper from './components/alerts_settings_wrapper.vue';
 
+Vue.use(VueApollo);
+
 export default el => {
   if (!el) {
     return null;
@@ -24,8 +28,22 @@ export default el => {
     opsgenieMvcFormPath,
     opsgenieMvcEnabled,
     opsgenieMvcTargetUrl,
+    projectPath,
   } = el.dataset;
 
+  const apolloProvider = new VueApollo({
+    defaultClient: createDefaultClient(
+      {},
+      {
+        cacheConfig: {},
+      },
+    ),
+  });
+
+  apolloProvider.clients.defaultClient.cache.writeData({
+    data: {},
+  });
+
   return new Vue({
     el,
     provide: {
@@ -51,7 +69,9 @@ export default el => {
         opsgenieMvcTargetUrl,
         opsgenieMvcIsAvailable: parseBoolean(opsgenieMvcAvailable),
       },
+      projectPath,
     },
+    apolloProvider,
     components: {
       AlertSettingsWrapper,
     },