Merge branch 'feature/gb/paginated-environments-api' into fe-paginated-environments-api

* feature/gb/paginated-environments-api: (304 commits)
  added missed commit in rebase
  update Grape routes to work with current version of Grape
  adds changelog
  fixes cursor issue on pipeline pagination
  Use random group name to prevent conflicts
  List all groups/projects for admins on explore pages
  Fix indentation
  More backport
  Fix filtered search user autocomplete for gitlab instances that are hosted on a subdirectory
  Fixed variables_controller_spec.rb test
  Backport of the frontend view, including tests
  Updated the #create action to render the show view in case of a form error
  Improved code styling on the variables_controller_spec
  Added tests for the variables controller #update action
  Added a variable_controller_spec test to test for flash messages on the #create action
  Modified redirection logic in the variables cont.
  Added redirections to the index actions for the variables and triggers controllers
  Added a flash message to the creation of triggers
  Fixed tests, renamed files and methods
  Changed the controller/route name to 'ci/cd' and renamed the corresponding files
  ...

11 files changed, 440 insertions, 12 deletions

diff --git a/spec/javascripts/commit/pipelines/mock_data.js.es6 b/spec/javascripts/commit/pipelines/mock_data.js.es6
new file mode 100644
index 00000000000..5f0f26a013c
--- /dev/null
+++ b/spec/javascripts/commit/pipelines/mock_data.js.es6
@@ -0,0 +1,90 @@
+/* eslint-disable no-unused-vars */
+const pipeline = {
+  id: 73,
+  user: {
+    name: 'Administrator',
+    username: 'root',
+    id: 1,
+    state: 'active',
+    avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    web_url: 'http://localhost:3000/root',
+  },
+  path: '/root/review-app/pipelines/73',
+  details: {
+    status: {
+      icon: 'icon_status_failed',
+      text: 'failed',
+      label: 'failed',
+      group: 'failed',
+      has_details: true,
+      details_path: '/root/review-app/pipelines/73',
+    },
+    duration: null,
+    finished_at: '2017-01-25T00:00:17.130Z',
+    stages: [{
+      name: 'build',
+      title: 'build: failed',
+      status: {
+        icon: 'icon_status_failed',
+        text: 'failed',
+        label: 'failed',
+        group: 'failed',
+        has_details: true,
+        details_path: '/root/review-app/pipelines/73#build',
+      },
+      path: '/root/review-app/pipelines/73#build',
+      dropdown_path: '/root/review-app/pipelines/73/stage.json?stage=build',
+    }],
+    artifacts: [],
+    manual_actions: [
+      {
+        name: 'stop_review',
+        path: '/root/review-app/builds/1463/play',
+      },
+      {
+        name: 'name',
+        path: '/root/review-app/builds/1490/play',
+      },
+    ],
+  },
+  flags: {
+    latest: true,
+    triggered: false,
+    stuck: false,
+    yaml_errors: false,
+    retryable: true,
+    cancelable: false,
+  },
+  ref:
+  {
+    name: 'master',
+    path: '/root/review-app/tree/master',
+    tag: false,
+    branch: true,
+  },
+  commit: {
+    id: 'fbd79f04fa98717641deaaeb092a4d417237c2e4',
+    short_id: 'fbd79f04',
+    title: 'Update .gitlab-ci.yml',
+    author_name: 'Administrator',
+    author_email: 'admin@example.com',
+    created_at: '2017-01-16T12:13:57.000-05:00',
+    committer_name: 'Administrator',
+    committer_email: 'admin@example.com',
+    message: 'Update .gitlab-ci.yml',
+    author: {
+      name: 'Administrator',
+      username: 'root',
+      id: 1,
+      state: 'active',
+      avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      web_url: 'http://localhost:3000/root',
+    },
+    author_gravatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    commit_url: 'http://localhost:3000/root/review-app/commit/fbd79f04fa98717641deaaeb092a4d417237c2e4',
+    commit_path: '/root/review-app/commit/fbd79f04fa98717641deaaeb092a4d417237c2e4',
+  },
+  retry_path: '/root/review-app/pipelines/73/retry',
+  created_at: '2017-01-16T17:13:59.800Z',
+  updated_at: '2017-01-25T00:00:17.132Z',
+};
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js.es6 b/spec/javascripts/commit/pipelines/pipelines_spec.js.es6
new file mode 100644
index 00000000000..c2b61632827
--- /dev/null
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js.es6
@@ -0,0 +1,106 @@
+/* global pipeline, Vue */
+
+require('vue-resource');
+require('flash');
+require('~/commit/pipelines/pipelines_store');
+require('~/commit/pipelines/pipelines_service');
+require('~/commit/pipelines/pipelines_table');
+require('~vue_shared/vue_resource_interceptor');
+require('./mock_data');
+
+describe('Pipelines table in Commits and Merge requests', () => {
+  preloadFixtures('pipelines_table');
+
+  beforeEach(() => {
+    loadFixtures('pipelines_table');
+  });
+
+  describe('successfull request', () => {
+    describe('without pipelines', () => {
+      const pipelinesEmptyResponse = (request, next) => {
+        next(request.respondWith(JSON.stringify([]), {
+          status: 200,
+        }));
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(pipelinesEmptyResponse);
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesEmptyResponse,
+        );
+      });
+
+      it('should render the empty state', (done) => {
+        const component = new gl.commits.pipelines.PipelinesTableView({
+          el: document.querySelector('#commit-pipeline-table-view'),
+        });
+
+        setTimeout(() => {
+          expect(component.$el.querySelector('.js-blank-state-title').textContent).toContain('No pipelines to show');
+          done();
+        }, 1);
+      });
+    });
+
+    describe('with pipelines', () => {
+      const pipelinesResponse = (request, next) => {
+        next(request.respondWith(JSON.stringify([pipeline]), {
+          status: 200,
+        }));
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(pipelinesResponse);
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesResponse,
+        );
+      });
+
+      it('should render a table with the received pipelines', (done) => {
+        const component = new gl.commits.pipelines.PipelinesTableView({
+          el: document.querySelector('#commit-pipeline-table-view'),
+        });
+
+        setTimeout(() => {
+          expect(component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
+          done();
+        }, 0);
+      });
+    });
+  });
+
+  describe('unsuccessfull request', () => {
+    const pipelinesErrorResponse = (request, next) => {
+      next(request.respondWith(JSON.stringify([]), {
+        status: 500,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(pipelinesErrorResponse);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, pipelinesErrorResponse,
+      );
+    });
+
+    it('should render empty state', (done) => {
+      const component = new gl.commits.pipelines.PipelinesTableView({
+        el: document.querySelector('#commit-pipeline-table-view'),
+      });
+
+      setTimeout(() => {
+        expect(component.$el.querySelector('.js-blank-state-title').textContent).toContain('No pipelines to show');
+        done();
+      }, 0);
+    });
+  });
+});
diff --git a/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6 b/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6
new file mode 100644
index 00000000000..a5a16544ffb
--- /dev/null
+++ b/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6
@@ -0,0 +1,30 @@
+require('~commit/pipelines/pipelines_store');
+
+describe('Store', () => {
+  const store = gl.commits.pipelines.PipelinesStore;
+
+  beforeEach(() => {
+    store.create();
+  });
+
+  it('should start with a blank state', () => {
+    expect(store.state.pipelines.length).toBe(0);
+  });
+
+  it('should store an array of pipelines', () => {
+    const pipelines = [
+      {
+        id: '1',
+        name: 'pipeline',
+      },
+      {
+        id: '2',
+        name: 'pipeline_2',
+      },
+    ];
+
+    store.store(pipelines);
+
+    expect(store.state.pipelines.length).toBe(pipelines.length);
+  });
+});
diff --git a/spec/javascripts/filtered_search/dropdown_user_spec.js.es6 b/spec/javascripts/filtered_search/dropdown_user_spec.js.es6
index 10a316f31b4..f4b0d60db34 100644
--- a/spec/javascripts/filtered_search/dropdown_user_spec.js.es6
+++ b/spec/javascripts/filtered_search/dropdown_user_spec.js.es6
@@ -36,5 +36,40 @@ require('~/filtered_search/dropdown_user');
         expect(dropdownUser.getSearchInput()).toBe('larry boy');
       });
     });
+
+    describe('config droplabAjaxFilter\'s endpoint', () => {
+      beforeEach(() => {
+        spyOn(gl.FilteredSearchDropdown.prototype, 'constructor').and.callFake(() => {});
+        spyOn(gl.DropdownUser.prototype, 'getProjectId').and.callFake(() => {});
+      });
+
+      it('should return endpoint', () => {
+        window.gon = {
+          relative_url_root: '',
+        };
+        const dropdown = new gl.DropdownUser();
+
+        expect(dropdown.config.droplabAjaxFilter.endpoint).toBe('/autocomplete/users.json');
+      });
+
+      it('should return endpoint when relative_url_root is undefined', () => {
+        const dropdown = new gl.DropdownUser();
+
+        expect(dropdown.config.droplabAjaxFilter.endpoint).toBe('/autocomplete/users.json');
+      });
+
+      it('should return endpoint with relative url when available', () => {
+        window.gon = {
+          relative_url_root: '/gitlab_directory',
+        };
+        const dropdown = new gl.DropdownUser();
+
+        expect(dropdown.config.droplabAjaxFilter.endpoint).toBe('/gitlab_directory/autocomplete/users.json');
+      });
+
+      afterEach(() => {
+        window.gon = {};
+      });
+    });
   });
 })();
diff --git a/spec/javascripts/fixtures/pipelines_table.html.haml b/spec/javascripts/fixtures/pipelines_table.html.haml
new file mode 100644
index 00000000000..fbe4a434f76
--- /dev/null
+++ b/spec/javascripts/fixtures/pipelines_table.html.haml
@@ -0,0 +1,2 @@
+#commit-pipeline-table-view{ data: { endpoint: "endpoint" } }
+.pipeline-svgs{ data: { "commit_icon_svg": "svg"} }
diff --git a/spec/javascripts/project_title_spec.js b/spec/javascripts/project_title_spec.js
index e0b52f767e4..bfe3d2df79d 100644
--- a/spec/javascripts/project_title_spec.js
+++ b/spec/javascripts/project_title_spec.js
@@ -9,19 +9,20 @@ require('~/project_select');
 require('~/project');
 
 (function() {
-  window.gon || (window.gon = {});
-
-  window.gon.api_version = 'v3';
-
   describe('Project Title', function() {
     preloadFixtures('static/project_title.html.raw');
     loadJSONFixtures('projects.json');
 
     beforeEach(function() {
       loadFixtures('static/project_title.html.raw');
+
+      window.gon = {};
+      window.gon.api_version = 'v3';
+
       return this.project = new Project();
     });
-    return describe('project list', function() {
+
+    describe('project list', function() {
       var fakeAjaxResponse = function fakeAjaxResponse(req) {
         var d;
         expect(req.url).toBe('/api/v3/projects.json?simple=true');
@@ -48,5 +49,9 @@ require('~/project');
         return expect($('.header-content').hasClass('open')).toBe(false);
       });
     });
+
+    afterEach(() => {
+      window.gon = {};
+    });
   });
 }).call(this);
diff --git a/spec/javascripts/search_autocomplete_spec.js b/spec/javascripts/search_autocomplete_spec.js
index c79e30e9481..9572b52ec1e 100644
--- a/spec/javascripts/search_autocomplete_spec.js
+++ b/spec/javascripts/search_autocomplete_spec.js
@@ -14,11 +14,6 @@ require('vendor/fuzzaldrin-plus');
 
   userId = 1;
 
-  window.gon || (window.gon = {});
-
-  window.gon.current_user_id = userId;
-  window.gon.current_username = userName;
-
   dashboardIssuesPath = '/dashboard/issues';
 
   dashboardMRsPath = '/dashboard/merge_requests';
@@ -117,6 +112,16 @@ require('vendor/fuzzaldrin-plus');
       widget = new gl.SearchAutocomplete;
       // Prevent turbolinks from triggering within gl_dropdown
       spyOn(window.gl.utils, 'visitUrl').and.returnValue(true);
+
+      window.gon = {};
+      window.gon.current_user_id = userId;
+      window.gon.current_username = userName;
+
+      return widget = new gl.SearchAutocomplete;
+    });
+
+    afterEach(function() {
+      window.gon = {};
     });
     it('should show Dashboard specific dropdown menu', function() {
       var list;
diff --git a/spec/javascripts/vue_common_components/commit_spec.js.es6 b/spec/javascripts/vue_shared/components/commit_spec.js.es6
index bbd914de4ea..84d169a3fb9 100644
--- a/spec/javascripts/vue_common_components/commit_spec.js.es6
+++ b/spec/javascripts/vue_shared/components/commit_spec.js.es6
@@ -1,4 +1,4 @@
-require('~/vue_common_component/commit');
+require('~/vue_shared/components/committ');
 
 describe('Commit component', () => {
   let props;
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js.es6 b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js.es6
new file mode 100644
index 00000000000..e83a1749e82
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js.es6
@@ -0,0 +1,89 @@
+/* global pipeline */
+
+require('~vue_shared/components/pipelines_table_row');
+require('./mock_data');
+
+describe('Pipelines Table Row', () => {
+  let component;
+  preloadFixtures('static/environments/element.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/environments/element.html.raw');
+
+    component = new gl.pipelines.PipelinesTableRowComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        pipeline,
+        svgs: {},
+      },
+    });
+  });
+
+  it('should render a table row', () => {
+    expect(component.$el).toEqual('TR');
+  });
+
+  describe('status column', () => {
+    it('should render a pipeline link', () => {
+      expect(
+        component.$el.querySelector('td.commit-link a').getAttribute('href'),
+      ).toEqual(pipeline.path);
+    });
+
+    it('should render status text', () => {
+      expect(
+        component.$el.querySelector('td.commit-link a').textContent,
+      ).toContain(pipeline.details.status.text);
+    });
+  });
+
+  describe('information column', () => {
+    it('should render a pipeline link', () => {
+      expect(
+        component.$el.querySelector('td:nth-child(2) a').getAttribute('href'),
+      ).toEqual(pipeline.path);
+    });
+
+    it('should render pipeline ID', () => {
+      expect(
+        component.$el.querySelector('td:nth-child(2) a > span').textContent,
+      ).toEqual(`#${pipeline.id}`);
+    });
+
+    describe('when a user is provided', () => {
+      it('should render user information', () => {
+        expect(
+          component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
+        ).toEqual(pipeline.user.web_url);
+
+        expect(
+          component.$el.querySelector('td:nth-child(2) img').getAttribute('title'),
+        ).toEqual(pipeline.user.name);
+      });
+    });
+  });
+
+  describe('commit column', () => {
+    it('should render link to commit', () => {
+      expect(
+        component.$el.querySelector('td:nth-child(3) .commit-id').getAttribute('href'),
+      ).toEqual(pipeline.commit.commit_path);
+    });
+  });
+
+  describe('stages column', () => {
+    it('should render an icon for each stage', () => {
+      expect(
+        component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length,
+      ).toEqual(pipeline.details.stages.length);
+    });
+  });
+
+  describe('actions column', () => {
+    it('should render the provided actions', () => {
+      expect(
+        component.$el.querySelectorAll('td:nth-child(6) ul li').length,
+      ).toEqual(pipeline.details.manual_actions.length);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js.es6 b/spec/javascripts/vue_shared/components/pipelines_table_spec.js.es6
new file mode 100644
index 00000000000..adc9ea904cc
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/pipelines_table_spec.js.es6
@@ -0,0 +1,66 @@
+/* global pipeline */
+
+require('~vue_shared/components/pipelines_table');
+require('~lib/utils/datetime_utility');
+require('./mock_data');
+
+describe('Pipelines Table', () => {
+  preloadFixtures('static/environments/element.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/environments/element.html.raw');
+  });
+
+  describe('table', () => {
+    let component;
+    beforeEach(() => {
+      component = new gl.pipelines.PipelinesTableComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          pipelines: [],
+          svgs: {},
+        },
+      });
+    });
+
+    it('should render a table', () => {
+      expect(component.$el).toEqual('TABLE');
+    });
+
+    it('should render table head with correct columns', () => {
+      expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status');
+      expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline');
+      expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit');
+      expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages');
+      expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
+      expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
+    });
+  });
+
+  describe('without data', () => {
+    it('should render an empty table', () => {
+      const component = new gl.pipelines.PipelinesTableComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          pipelines: [],
+          svgs: {},
+        },
+      });
+      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0);
+    });
+  });
+
+  describe('with data', () => {
+    it('should render rows', () => {
+      const component = new gl.pipelines.PipelinesTableComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          pipelines: [pipeline],
+          svgs: {},
+        },
+      });
+
+      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_pagination/pagination_spec.js.es6 b/spec/javascripts/vue_shared/components/table_pagination_spec.js.es6
index 8935c474ee5..e84f0dcfe67 100644
--- a/spec/javascripts/vue_pagination/pagination_spec.js.es6
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js.es6
@@ -1,5 +1,5 @@
 require('~/lib/utils/common_utils');
-require('~/vue_pagination/index');
+require('~/vue_shared/components/table_pagination');
 
 describe('Pagination component', () => {
   let component;