Add to IDE Service to Dismiss Callouts, Fetch CI

We will be using the callout mechanism to persist whether or not users
need to be told about using environments with GitLab CI. This
necessitates the ability to call graphql mutations.

We also need to be able to query the graphql API for the fully parsed CI
configuration. Fortunately, that query was already built by the pipeline
editing team, so we can re-use it here.

One thought is that it might be worth it to build our own query to only
fetch a job's environment configuration, instead of the entirety of the
pipeline, but for now re-use is better than new.

app/assets/javascripts/graphql_shared/mutations/dismiss_user_callout.mutation.graphql

+mutation dismissUserCallout($input: UserCalloutCreateInput!) {
+  userCalloutCreate(input: $input) {
+    errors
+    userCallout {
+      dismissedAt
+      featureName
+    }
+  }
+}

app/assets/javascripts/ide/services/gql.js

@@ -18,3 +18,4 @@ const getClient = memoize(() =>
 );
 
 export const query = (...args) => getClient().query(...args);
+export const mutate = (...args) => getClient().mutate(...args);

app/assets/javascripts/ide/services/index.js

 import getIdeProject from 'ee_else_ce/ide/queries/get_ide_project.query.graphql';
 import Api from '~/api';
+import dismissUserCallout from '~/graphql_shared/mutations/dismiss_user_callout.mutation.graphql';
 import axios from '~/lib/utils/axios_utils';
 import { joinPaths, escapeFileUrl } from '~/lib/utils/url_utility';
-import { query } from './gql';
+import ciConfig from '~/pipeline_editor/graphql/queries/ci_config.graphql';
+import { query, mutate } from './gql';
 
 const fetchApiProjectData = (projectPath) => Api.project(projectPath).then(({ data }) => data);
 
@@ -101,4 +103,16 @@ export default {
     const url = `${gon.relative_url_root}/${projectPath}/usage_ping/web_ide_pipelines_count`;
     return axios.post(url);
   },
+  getCiConfig(projectPath, content) {
+    return query({
+      query: ciConfig,
+      variables: { projectPath, content },
+    }).then(({ data }) => data.ciConfig);
+  },
+  dismissUserCallout(name) {
+    return mutate({
+      mutation: dismissUserCallout,
+      variables: { input: { featureName: name } },
+    }).then(({ data }) => data);
+  },
 };

spec/frontend/ide/services/index_spec.js

@@ -2,9 +2,11 @@ import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
 import getIdeProject from 'ee_else_ce/ide/queries/get_ide_project.query.graphql';
 import Api from '~/api';
+import dismissUserCallout from '~/graphql_shared/mutations/dismiss_user_callout.mutation.graphql';
 import services from '~/ide/services';
-import { query } from '~/ide/services/gql';
+import { query, mutate } from '~/ide/services/gql';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
+import ciConfig from '~/pipeline_editor/graphql/queries/ci_config.graphql';
 import { projectData } from '../mock_data';
 
 jest.mock('~/api');
@@ -299,4 +301,33 @@ describe('IDE services', () => {
       });
     });
   });
+  describe('getCiConfig', () => {
+    const TEST_PROJECT_PATH = 'foo/bar';
+    const TEST_CI_CONFIG = 'test config';
+
+    it('queries with the given CI config and project', () => {
+      const result = { data: { ciConfig: { test: 'data' } } };
+      query.mockResolvedValue(result);
+      return services.getCiConfig(TEST_PROJECT_PATH, TEST_CI_CONFIG).then((data) => {
+        expect(data).toEqual(result.data.ciConfig);
+        expect(query).toHaveBeenCalledWith({
+          query: ciConfig,
+          variables: { projectPath: TEST_PROJECT_PATH, content: TEST_CI_CONFIG },
+        });
+      });
+    });
+  });
+  describe('dismissUserCallout', () => {
+    it('mutates the callout to dismiss', () => {
+      const result = { data: { callouts: { test: 'data' } } };
+      mutate.mockResolvedValue(result);
+      return services.dismissUserCallout('test').then((data) => {
+        expect(data).toEqual(result.data);
+        expect(mutate).toHaveBeenCalledWith({
+          mutation: dismissUserCallout,
+          variables: { input: { featureName: 'test' } },
+        });
+      });
+    });
+  });
 });