Merge remote-tracking branch 'upstream/master' into no-ivar-in-modules

* upstream/master: (126 commits)
  Update VERSION to 10.3.0-pre
  Update CHANGELOG.md for 10.2.0
  default fill color for SVGs
  ignore hashed repos (for now) when using `rake gitlab:cleanup:repos`
  Use Redis cache for branch existence checks
  Update CONTRIBUTING.md: Link definition of done to criteria
  Use `make install` for Gitaly setups in non-test environments
  FileUploader should check for hashed_storage?(:attachments) to use disk_path
  Set the default gitlab-shell timeout to 3 hours
  Update composite pipelines index to include "id"
  Use arrays in Pipeline#latest_builds_with_artifacts
  Fix blank states using old css
  Skip confirmation user api
  Custom issue tracker
  Revert "check for `read_only?` first before seeing if request is disallowed"
  add `#with_metadata` scope to remove a N+1 from the notes' API
  Fix promoting milestone updating all issuables without milestone
  Batchload blobs for diff generation
  check for `read_only?` first before seeing if request is disallowed
  use `Gitlab::Routing.url_helpers` instead of `Rails.application.routes.url_helpers`
  ...

6 files changed, 145 insertions, 137 deletions

diff --git a/doc/development/fe_guide/axios.md b/doc/development/fe_guide/axios.md
new file mode 100644
index 00000000000..962fe3dcec9
--- /dev/null
+++ b/doc/development/fe_guide/axios.md
@@ -0,0 +1,68 @@
+# Axios
+We use [axios][axios] to communicate with the server in Vue applications and most new code.
+
+In order to guarantee all defaults are set you *should not use `axios` directly*, you should import `axios` from `axios_utils`.
+
+## CSRF token
+All our request require a CSRF token.
+To guarantee this token is set, we are importing [axios][axios], setting the token, and exporting `axios` .
+
+This exported module should be used instead of directly using `axios` to ensure the token is set.
+
+## Usage
+```javascript
+  import axios from '~/lib/utils/axios_utils';
+
+  axios.get(url)
+    .then((response) => {
+      // `data` is the response that was provided by the server
+      const data = response.data;
+
+      // `headers` the headers that the server responded with
+      // All header names are lower cased
+      const paginationData = response.headers;
+    })
+    .catch(() => {
+      //handle the error
+    });
+```
+
+## Mock axios response on tests
+
+To help us mock the responses we need we use [axios-mock-adapter][axios-mock-adapter]
+
+
+```javascript
+  import axios from '~/lib/utils/axios_utils';
+  import MockAdapter from 'axios-mock-adapter';
+
+  let mock;
+  beforeEach(() => {
+    // This sets the mock adapter on the default instance
+    mock = new MockAdapter(axios);
+    // Mock any GET request to /users
+    // arguments for reply are (status, data, headers)
+    mock.onGet('/users').reply(200, {
+      users: [
+        { id: 1, name: 'John Smith' }
+      ]
+    });
+  });
+
+  afterEach(() => {
+    mock.reset();
+  });
+```
+
+### Mock poll requests on tests with axios
+
+Because polling function requires an header object, we need to always include an object as the third argument:
+
+```javascript
+  mock.onGet('/users').reply(200, { foo: 'bar' }, {});
+```
+
+[axios]: https://github.com/axios/axios
+[axios-instance]: #creating-an-instance
+[axios-interceptors]: https://github.com/axios/axios#interceptors
+[axios-mock-adapter]: https://github.com/ctimmerm/axios-mock-adapter
diff --git a/doc/development/fe_guide/icons.md b/doc/development/fe_guide/icons.md
index cef62618a3c..b288ee95722 100644
--- a/doc/development/fe_guide/icons.md
+++ b/doc/development/fe_guide/icons.md
@@ -4,15 +4,17 @@ We are using SVG Icons in GitLab with a SVG Sprite, due to this the icons are on
 
 ### Usage in HAML/Rails
 
-To use a sprite Icon in HAML or Rails we use a specific helper function : 
+To use a sprite Icon in HAML or Rails we use a specific helper function :
 
 `sprite_icon(icon_name, size: nil, css_class: '')`
 
-**icon_name** Use the icon_name that you can find in the SVG Sprite (Overview is available under `/assets/sprite.symbol.html`).
+**icon_name** Use the icon_name that you can find in the SVG Sprite ([Overview is available here](http://gitlab-org.gitlab.io/gitlab-svgs/)`).
+
 **size (optional)** Use one of the following sizes : 16,24,32,48,72 (this will be translated into a `s16` class)
+
 **css_class (optional)** If you want to add additional css classes
 
-**Example** 
+**Example**
 
 `= sprite_icon('issues', size: 72, css_class: 'icon-danger')`
 
@@ -20,16 +22,34 @@ To use a sprite Icon in HAML or Rails we use a specific helper function :
 
 `<svg class="s72 icon-danger"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons.svg#issues"></use></svg>`
 
+### Usage in Vue
+
+We have a special Vue component for our sprite icons in `\vue_shared\components\icon.vue`.
+
+Sample usage :
+
+`<icon
+    name="retry"
+    :size="32"
+    css-classes="top"
+  />`
+
+**name** Name of the Icon in the SVG Sprite  ([Overview is available here](http://gitlab-org.gitlab.io/gitlab-svgs/)`).
+
+**size (optional)** Number value for the size which is then mapped to a specific CSS class (Available Sizes: 8,12,16,18,24,32,48,72 are mapped to `sXX` css classes)
+
+**css-classes (optional)** Additional CSS Classes to add to the svg tag.
+
 ### Usage in HTML/JS
 
-Please use the following function inside JS to render an icon : 
+Please use the following function inside JS to render an icon :
 `gl.utils.spriteIcon(iconName)`
 
 ## Adding a new icon to the sprite
 
 All Icons and Illustrations are managed in the [gitlab-svgs](https://gitlab.com/gitlab-org/gitlab-svgs) repository which is added as a dev-dependency.
 
-To upgrade to a new SVG Sprite version run `yarn upgrade @gitlab-org/gitlab-svgs` and then run `yarn run svg`. This task will copy the svg sprite and all illustrations in the correct folders.
+To upgrade to a new SVG Sprite version run `yarn upgrade @gitlab-org/gitlab-svgs` and then run `yarn run svg`. This task will copy the svg sprite and all illustrations in the correct folders. The updated files should be tracked in Git as those are referenced.
 
 # SVG Illustrations
 
diff --git a/doc/development/fe_guide/index.md b/doc/development/fe_guide/index.md
index 73a03c07812..72cb557d054 100644
--- a/doc/development/fe_guide/index.md
+++ b/doc/development/fe_guide/index.md
@@ -71,8 +71,8 @@ Vue specific design patterns and practices.
 
 ---
 
-## [Vue Resource](vue_resource.md)
-Vue resource specific practices and gotchas.
+## [Axios](axios.md)
+Axios specific practices and gotchas.
 
 ## [Icons](icons.md)
 How we use SVG for our Icons.
diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md
index f88f0753687..6e9f18dd1c3 100644
--- a/doc/development/fe_guide/vue.md
+++ b/doc/development/fe_guide/vue.md
@@ -178,16 +178,13 @@ itself, please read this guide: [State Management][state-management]
 
 The Service is a class used only to communicate with the server.
 It does not store or manipulate any data. It is not aware of the store or the components.
-We use [vue-resource][vue-resource-repo] to communicate with the server.
-Refer to [vue resource](vue_resource.md) for more details.
+We use [axios][axios] to communicate with the server.
+Refer to [axios](axios.md) for more details.
 
-Vue Resource should only be imported in the service file.
+Axios instance should only be imported in the service file.
 
   ```javascript
-  import Vue from 'vue';
-  import VueResource from 'vue-resource';
-
-  Vue.use(VueResource);
+  import axios from 'javascripts/lib/utils/axios_utils';
   ```
 
 ### End Result
@@ -230,15 +227,14 @@ export default class Store {
 }
 
 // service.js
-import Vue from 'vue';
-import VueResource from 'vue-resource';
-import 'vue_shared/vue_resource_interceptor';
-
-Vue.use(VueResource);
+import axios from 'javascripts/lib/utils/axios_utils'
 
 export default class Service {
   constructor(options) {
-    this.todos = Vue.resource(endpoint.todosEndpoint);
+    this.todos = axios.create({
+      baseURL: endpoint.todosEndpoint
+    });
+
   }
 
   getTodos() {
@@ -477,50 +473,8 @@ The main return value of a Vue component is the rendered output. In order to tes
 need to test the rendered output. [Vue][vue-test] guide's to unit test show us exactly that:
 
 ### Stubbing API responses
-[Vue Resource Interceptors][vue-resource-interceptor] allow us to add a interceptor with
-the response we need:
-
-  ```javascript
-    // Mock the service to return data
-    const interceptor = (request, next) => {
-      next(request.respondWith(JSON.stringify([{
-        title: 'This is a todo',
-        body: 'This is the text'
-      }]), {
-        status: 200,
-      }));
-    };
+Refer to [mock axios](axios.md#mock-axios-response-on-tests)
 
-    beforeEach(() => {
-      Vue.http.interceptors.push(interceptor);
-    });
-
-    afterEach(() => {
-      Vue.http.interceptors = _.without(Vue.http.interceptors, interceptor);
-    });
-
-    it('should do something', (done) => {
-      setTimeout(() => {
-        // Test received data
-        done();
-      }, 0);
-    });
-  ```
-
-1. Headers interceptor
-Refer to [this section](vue.md#headers)
-
-1. Use `$.mount()` to mount the component
-
-```javascript
-// bad
-new Component({
-  el: document.createElement('div')
-});
-
-// good
-new Component().$mount();
-```
 
 ## Vuex
 To manage the state of an application you may use [Vuex][vuex-docs].
@@ -721,7 +675,6 @@ describe('component', () => {
 [component-system]: https://vuejs.org/v2/guide/#Composing-with-Components
 [state-management]: https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch
 [one-way-data-flow]: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
-[vue-resource-interceptor]: https://github.com/pagekit/vue-resource/blob/develop/docs/http.md#interceptors
 [vue-test]: https://vuejs.org/v2/guide/unit-testing.html
 [issue-boards-service]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/boards/services/board_service.js.es6
 [flux]: https://facebook.github.io/flux
@@ -729,3 +682,6 @@ describe('component', () => {
 [vuex-structure]: https://vuex.vuejs.org/en/structure.html
 [vuex-mutations]: https://vuex.vuejs.org/en/mutations.html
 [vuex-testing]: https://vuex.vuejs.org/en/testing.html
+[axios]: https://github.com/axios/axios
+[axios-interceptors]: https://github.com/axios/axios#interceptors
+
diff --git a/doc/development/fe_guide/vue_resource.md b/doc/development/fe_guide/vue_resource.md
deleted file mode 100644
index c376c5c32bf..00000000000
--- a/doc/development/fe_guide/vue_resource.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Vue Resouce
-In Vue applications we use [vue-resource][vue-resource-repo] to communicate with the server.
-
-## HTTP Status Codes
-
-### `.json()`
-When making a request to the server, you will most likely need to access the body of the response.
-Use `.json()` to convert. Because `.json()` returns a Promise the follwoing structure should be used:
-
-  ```javascript
-  service.get('url')
-    .then(resp => resp.json())
-    .then((data) => {
-      this.store.storeData(data);
-    })
-    .catch(() => new Flash('Something went wrong'));
-  ```
-
-
-When using `Poll` (`app/assets/javascripts/lib/utils/poll.js`), the `successCallback` needs to handle `.json()` as a Promise:
-  ```javascript
-  successCallback: (response) => {
-    return response.json().then((data) => {
-      // handle the response
-    });
-  }
-  ```
-
-### 204
-Some endpoints - usually `delete` endpoints - return `204` as the success response.
-When handling `204 - No Content` responses, we cannot use `.json()` since it tries to parse the non-existant body content.
-
-When handling `204` responses, do not use `.json`, otherwise the promise will throw an error and will enter the `catch` statement:
-
-```javascript
-  Vue.http.delete('path')
-    .then(() => {
-      // success!
-    })
-    .catch(() => {
-      // handle error
-    })
-```
-
-## Headers
-Headers are being parsed into a plain object in an interceptor.
-In Vue-resource 1.x `headers` object was changed into an `Headers` object. In order to not change all old code, an interceptor was added.
-
-If you need to write a unit test that takes the headers in consideration, you need to include an interceptor to parse the headers after your test interceptor.
-You can see an example in `spec/javascripts/environments/environment_spec.js`:
-  ```javascript
-  import { headersInterceptor } from './helpers/vue_resource_helper';
-
-  beforeEach(() => {
-    Vue.http.interceptors.push(myInterceptor);
-    Vue.http.interceptors.push(headersInterceptor);
-  });
-
-  afterEach(() => {
-    Vue.http.interceptors = _.without(Vue.http.interceptors, myInterceptor);
-    Vue.http.interceptors = _.without(Vue.http.interceptors, headersInterceptor);
-  });
-  ```
-
-## CSRF token
-We use a Vue Resource interceptor to manage the CSRF token.
-`app/assets/javascripts/vue_shared/vue_resource_interceptor.js` holds all our common interceptors.
-Note: You don't need to load `app/assets/javascripts/vue_shared/vue_resource_interceptor.js`
-since it's already being loaded by `common_vue.js`.
-
-
-[vue-resource-repo]: https://github.com/pagekit/vue-resource
diff --git a/doc/development/migration_style_guide.md b/doc/development/migration_style_guide.md
index 9b8ab5da74e..a235dd74909 100644
--- a/doc/development/migration_style_guide.md
+++ b/doc/development/migration_style_guide.md
@@ -198,7 +198,43 @@ end
 
 Keep in mind that this operation can easily take 10-15 minutes to complete on
 larger installations (e.g. GitLab.com). As a result you should only add default
-values if absolutely necessary.
+values if absolutely necessary. There is a RuboCop cop that will fail if this
+method is used on some tables that are very large on GitLab.com, which would
+cause other issues.
+
+## Updating an existing column
+
+To update an existing column to a particular value, you can use
+`update_column_in_batches` (`add_column_with_default` uses this internally to
+fill in the default value). This will split the updates into batches, so we
+don't update too many rows at in a single statement.
+
+This updates the column `foo` in the `projects` table to 10, where `some_column`
+is `'hello'`:
+
+```ruby
+update_column_in_batches(:projects, :foo, 10) do |table, query|
+  query.where(table[:some_column].eq('hello'))
+end
+```
+
+To perform a computed update, the value can be wrapped in `Arel.sql`, so Arel
+treats it as an SQL literal. The below example is the same as the one above, but
+the value is set to the product of the `bar` and `baz` columns:
+
+```ruby
+update_value = Arel.sql('bar * baz')
+
+update_column_in_batches(:projects, :foo, update_value) do |table, query|
+  query.where(table[:some_column].eq('hello'))
+end
+```
+
+Like `add_column_with_default`, there is a RuboCop cop to detect usage of this
+on large tables. In the case of `update_column_in_batches`, it may be acceptable
+to run on a large table, as long as it is only updating a small subset of the
+rows in the table, but do not ignore that without validating on the GitLab.com
+staging environment - or asking someone else to do so for you - beforehand.
 
 ## Integer column type