Add latest changes from gitlab-org/gitlab@master

3 files changed, 39 insertions, 26 deletions

diff --git a/app/assets/javascripts/clusters/agents/components/show.vue b/app/assets/javascripts/clusters/agents/components/show.vue
index 9109c010500..ecc82863e28 100644
--- a/app/assets/javascripts/clusters/agents/components/show.vue
+++ b/app/assets/javascripts/clusters/agents/components/show.vue
@@ -51,16 +51,7 @@ export default {
     TokenTable,
     ActivityEvents,
   },
-  props: {
-    agentName: {
-      required: true,
-      type: String,
-    },
-    projectPath: {
-      required: true,
-      type: String,
-    },
-  },
+  inject: ['agentName', 'projectPath'],
   data() {
     return {
       cursor: {
@@ -131,12 +122,12 @@ export default {
       </p>
 
       <gl-tabs sync-active-tab-with-query-params lazy>
+        <slot name="ee-security-tab"></slot>
+
         <gl-tab :title="$options.i18n.activity" query-param-value="activity">
           <activity-events :agent-name="agentName" :project-path="projectPath" />
         </gl-tab>
 
-        <slot name="ee-security-tab"></slot>
-
         <gl-tab query-param-value="tokens">
           <template #title>
             <span data-testid="cluster-agent-token-count">
diff --git a/app/assets/javascripts/clusters/agents/graphql/provider.js b/app/assets/javascripts/clusters/agents/graphql/provider.js
new file mode 100644
index 00000000000..8b068fa1eee
--- /dev/null
+++ b/app/assets/javascripts/clusters/agents/graphql/provider.js
@@ -0,0 +1,26 @@
+import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import createDefaultClient from '~/lib/graphql';
+import { vulnerabilityLocationTypes } from '~/graphql_shared/fragment_types/vulnerability_location_types';
+
+Vue.use(VueApollo);
+
+// We create a fragment matcher so that we can create a fragment from an interface
+// Without this, Apollo throws a heuristic fragment matcher warning
+const fragmentMatcher = new IntrospectionFragmentMatcher({
+  introspectionQueryResultData: vulnerabilityLocationTypes,
+});
+
+const defaultClient = createDefaultClient(
+  {},
+  {
+    cacheConfig: {
+      fragmentMatcher,
+    },
+  },
+);
+
+export default new VueApollo({
+  defaultClient,
+});
diff --git a/app/assets/javascripts/clusters/agents/index.js b/app/assets/javascripts/clusters/agents/index.js
index 5796c9e308d..6c7fae274f8 100644
--- a/app/assets/javascripts/clusters/agents/index.js
+++ b/app/assets/javascripts/clusters/agents/index.js
@@ -1,9 +1,6 @@
 import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import createDefaultClient from '~/lib/graphql';
 import AgentShowPage from 'ee_else_ce/clusters/agents/components/show.vue';
-
-Vue.use(VueApollo);
+import apolloProvider from './graphql/provider';
 
 export default () => {
   const el = document.querySelector('#js-cluster-agent-details');
@@ -12,20 +9,19 @@ export default () => {
     return null;
   }
 
-  const defaultClient = createDefaultClient();
-  const { agentName, projectPath, activityEmptyStateImage } = el.dataset;
+  const { activityEmptyStateImage, agentName, emptyStateSvgPath, projectPath } = el.dataset;
 
   return new Vue({
     el,
-    apolloProvider: new VueApollo({ defaultClient }),
-    provide: { agentName, projectPath, activityEmptyStateImage },
+    apolloProvider,
+    provide: {
+      activityEmptyStateImage,
+      agentName,
+      emptyStateSvgPath,
+      projectPath,
+    },
     render(createElement) {
-      return createElement(AgentShowPage, {
-        props: {
-          agentName,
-          projectPath,
-        },
-      });
+      return createElement(AgentShowPage);
     },
   });
 };