Merge branch '5426-fe-web-terminal-init-store-ce' into 'master'

CE Port of "Setup IDE terminal store for environment checks"

See merge request gitlab-org/gitlab-ce!23575

app/assets/javascripts/api.js

@@ -14,6 +14,7 @@ const Api = {
   projectMergeRequestPath: '/api/:version/projects/:id/merge_requests/:mrid',
   projectMergeRequestChangesPath: '/api/:version/projects/:id/merge_requests/:mrid/changes',
   projectMergeRequestVersionsPath: '/api/:version/projects/:id/merge_requests/:mrid/versions',
+  projectRunnersPath: '/api/:version/projects/:id/runners',
   mergeRequestsPath: '/api/:version/merge_requests',
   groupLabelsPath: '/groups/:namespace_path/-/labels',
   issuableTemplatePath: '/:namespace_path/:project_path/templates/:type/:key',
@@ -124,6 +125,15 @@ const Api = {
     return axios.get(url);
   },
 
+  projectRunners(projectPath, config = {}) {
+    const url = Api.buildUrl(Api.projectRunnersPath).replace(
+      ':id',
+      encodeURIComponent(projectPath),
+    );
+
+    return axios.get(url, config);
+  },
+
   mergeRequests(params = {}) {
     const url = Api.buildUrl(Api.mergeRequestsPath);
 

app/assets/javascripts/ide/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import { mapActions } from 'vuex';
+import _ from 'underscore';
 import Translate from '~/vue_shared/translate';
 import ide from './components/ide.vue';
 import store from './stores';
@@ -13,19 +14,19 @@ Vue.use(Translate);
  *
  * @param {Element} el - The element that will contain the IDE.
  * @param {Object} options - Extra options for the IDE (Used by EE).
- * @param {(e:Element) => Object} options.extraInitialData -
- *   Function that returns extra properties to seed initial data.
  * @param {Component} options.rootComponent -
  *   Component that overrides the root component.
+ * @param {(store:Vuex.Store, el:Element) => Vuex.Store} options.extendStore -
+ *   Function that receives the default store and returns an extended one.
  */
 export function initIde(el, options = {}) {
   if (!el) return null;
 
-  const { extraInitialData = () => ({}), rootComponent = ide } = options;
+  const { rootComponent = ide, extendStore = _.identity } = options;
 
   return new Vue({
     el,
-    store,
+    store: extendStore(store, el),
     router,
     created() {
       this.setEmptyStateSvgs({
@@ -41,7 +42,6 @@ export function initIde(el, options = {}) {
       });
       this.setInitialData({
         clientsidePreviewEnabled: parseBoolean(el.dataset.clientsidePreviewEnabled),
-        ...extraInitialData(el),
       });
     },
     methods: {

app/assets/javascripts/lib/utils/http_status.js

@@ -16,7 +16,9 @@ const httpStatusCodes = {
   IM_USED: 226,
   MULTIPLE_CHOICES: 300,
   BAD_REQUEST: 400,
+  FORBIDDEN: 403,
   NOT_FOUND: 404,
+  UNPROCESSABLE_ENTITY: 422,
 };
 
 export const successCodes = [

app/helpers/ide_helper.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module IdeHelper
+  def ide_data
+    {
+      "empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
+      "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
+      "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg'),
+      "pipelines-empty-state-svg-path": image_path('illustrations/pipelines_empty.svg'),
+      "promotion-svg-path": image_path('illustrations/web-ide_promotion.svg'),
+      "ci-help-page-path" => help_page_path('ci/quick_start/README'),
+      "web-ide-help-page-path" => help_page_path('user/project/web_ide/index.html'),
+      "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s
+    }
+  end
+end

app/views/ide/_show.html.haml

@@ -0,0 +1,10 @@
+- @body_class = 'ide-layout'
+- page_title 'IDE'
+
+- content_for :page_specific_javascripts do
+  = stylesheet_link_tag 'page_bundles/ide'
+
+#ide.ide-loading{ data: ide_data() }
+  .text-center
+    = icon('spinner spin 2x')
+    %h2.clgray= _('Loading the GitLab IDE...')

app/views/ide/index.html.haml

@@ -1,17 +1 @@
-- @body_class = 'ide-layout'
-- page_title 'IDE'
-
-- content_for :page_specific_javascripts do
-  = stylesheet_link_tag 'page_bundles/ide'
-
-#ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
-  "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
-  "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg'),
-  "pipelines-empty-state-svg-path": image_path('illustrations/pipelines_empty.svg'),
-  "promotion-svg-path": image_path('illustrations/web-ide_promotion.svg'),
-  "ci-help-page-path" => help_page_path('ci/quick_start/README'),
-  "web-ide-help-page-path" => help_page_path('user/project/web_ide/index.html'),
-  "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s } }
-  .text-center
-    = icon('spinner spin 2x')
-    %h2.clgray= _('Loading the GitLab IDE...')
+= render 'ide/show'

spec/javascripts/api_spec.js

@@ -180,6 +180,23 @@ describe('Api', () => {
     });
   });
 
+  describe('projectRunners', () => {
+    it('fetches the runners of a project', done => {
+      const projectPath = 7;
+      const params = { scope: 'active' };
+      const mockData = [{ id: 4 }];
+      const expectedUrl = `${dummyUrlRoot}/api/${dummyApiVersion}/projects/${projectPath}/runners`;
+      mock.onGet(expectedUrl, { params }).reply(200, mockData);
+
+      Api.projectRunners(projectPath, { params })
+        .then(({ data }) => {
+          expect(data).toEqual(mockData);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
+
   describe('newLabel', () => {
     it('creates a new label', done => {
       const namespace = 'some namespace';