Replaces vue-resource with axios for registry code

5 files changed, 47 insertions, 53 deletions

diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 6233fb169e9..ab568da1fcb 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -1,7 +1,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
-import Flash from '../../flash';
+import createFlash from '../../flash';
 import store from '../stores';
 import collapsibleContainer from './collapsible_container.vue';
 import { errorMessages, errorMessagesTypes } from '../constants';
@@ -26,7 +26,7 @@ export default {
     this.setMainEndpoint(this.endpoint);
   },
   mounted() {
-    this.fetchRepos().catch(() => Flash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
+    this.fetchRepos().catch(() => createFlash(errorMessages[errorMessagesTypes.FETCH_REPOS]));
   },
   methods: {
     ...mapActions(['setMainEndpoint', 'fetchRepos']),
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index 6514c05a9c7..72f0aceb534 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -1,18 +1,18 @@
 <script>
 import { mapActions } from 'vuex';
 import { GlLoadingIcon } from '@gitlab/ui';
-import Flash from '../../flash';
-import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import createFlash from '../../flash';
+import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
 import tooltip from '../../vue_shared/directives/tooltip';
-import tableRegistry from './table_registry.vue';
+import TableRegistry from './table_registry.vue';
 import { errorMessages, errorMessagesTypes } from '../constants';
 import { __ } from '../../locale';
 
 export default {
   name: 'CollapsibeContainerRegisty',
   components: {
-    clipboardButton,
-    tableRegistry,
+    ClipboardButton,
+    TableRegistry,
     GlLoadingIcon,
   },
   directives: {
@@ -31,7 +31,6 @@ export default {
   },
   methods: {
     ...mapActions(['fetchRepos', 'fetchList', 'deleteRepo']),
-
     toggleRepo() {
       this.isOpen = !this.isOpen;
 
@@ -41,18 +40,16 @@ export default {
         );
       }
     },
-
     handleDeleteRepository() {
       this.deleteRepo(this.repo)
         .then(() => {
-          Flash(__('This container registry has been scheduled for deletion.'), 'notice');
+          createFlash(__('This container registry has been scheduled for deletion.'), 'notice');
           this.fetchRepos();
         })
         .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
     },
-
     showError(message) {
-      Flash(errorMessages[message]);
+      createFlash(errorMessages[message]);
     },
   },
 };
diff --git a/app/assets/javascripts/registry/stores/actions.js b/app/assets/javascripts/registry/stores/actions.js
index a78aa90b7b5..6d025aecaec 100644
--- a/app/assets/javascripts/registry/stores/actions.js
+++ b/app/assets/javascripts/registry/stores/actions.js
@@ -1,39 +1,34 @@
-import Vue from 'vue';
-import VueResource from 'vue-resource';
+import axios from '~/lib/utils/axios_utils';
 import * as types from './mutation_types';
 
-Vue.use(VueResource);
 
 export const fetchRepos = ({ commit, state }) => {
   commit(types.TOGGLE_MAIN_LOADING);
 
-  return Vue.http
+  return axios
     .get(state.endpoint)
-    .then(res => res.json())
-    .then(response => {
+    .then(({ data }) => {
       commit(types.TOGGLE_MAIN_LOADING);
-      commit(types.SET_REPOS_LIST, response);
+      commit(types.SET_REPOS_LIST, data);
     });
 };
 
 export const fetchList = ({ commit }, { repo, page }) => {
   commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
 
-  return Vue.http.get(repo.tagsPath, { params: { page } }).then(response => {
-    const { headers } = response;
+  return axios.get(repo.tagsPath, { params: { page } }).then(response => {
+    const { headers, data } = response;
 
-    return response.json().then(resp => {
-      commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
-      commit(types.SET_REGISTRY_LIST, { repo, resp, headers });
-    });
+    commit(types.TOGGLE_REGISTRY_LIST_LOADING, repo);
+    commit(types.SET_REGISTRY_LIST, { repo, resp: data, headers });
   });
 };
 
 // eslint-disable-next-line no-unused-vars
-export const deleteRepo = ({ commit }, repo) => Vue.http.delete(repo.destroyPath);
+export const deleteRepo = ({ commit }, repo) => axios.delete(repo.destroyPath);
 
 // eslint-disable-next-line no-unused-vars
-export const deleteRegistry = ({ commit }, image) => Vue.http.delete(image.destroyPath);
+export const deleteRegistry = ({ commit }, image) => axios.delete(image.destroyPath);
 
 export const setMainEndpoint = ({ commit }, data) => commit(types.SET_MAIN_ENDPOINT, data);
 export const toggleLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING);
diff --git a/app/assets/javascripts/registry/stores/index.js b/app/assets/javascripts/registry/stores/index.js
index 78b67881210..1bb06bd6e81 100644
--- a/app/assets/javascripts/registry/stores/index.js
+++ b/app/assets/javascripts/registry/stores/index.js
@@ -3,36 +3,12 @@ import Vuex from 'vuex';
 import * as actions from './actions';
 import * as getters from './getters';
 import mutations from './mutations';
+import createState from './state';
 
 Vue.use(Vuex);
 
 export default new Vuex.Store({
-  state: {
-    isLoading: false,
-    endpoint: '', // initial endpoint to fetch the repos list
-    /**
-     * Each object in `repos` has the following strucure:
-     * {
-     *   name: String,
-     *   isLoading: Boolean,
-     *   tagsPath: String // endpoint to request the list
-     *   destroyPath: String // endpoit to delete the repo
-     *   list: Array // List of the registry images
-     * }
-     *
-     * Each registry image inside `list` has the following structure:
-     * {
-     *   tag: String,
-     *   revision: String
-     *   shortRevision: String
-     *   size: Number
-     *   layers: Number
-     *   createdAt: String
-     *   destroyPath: String // endpoit to delete each image
-     * }
-     */
-    repos: [],
-  },
+  state: createState(),
   actions,
   getters,
   mutations,
diff --git a/app/assets/javascripts/registry/stores/state.js b/app/assets/javascripts/registry/stores/state.js
new file mode 100644
index 00000000000..feeac10cbe1
--- /dev/null
+++ b/app/assets/javascripts/registry/stores/state.js
@@ -0,0 +1,26 @@
+export default () => ({
+  isLoading: false,
+  endpoint: '', // initial endpoint to fetch the repos list
+  /**
+   * Each object in `repos` has the following strucure:
+   * {
+   *   name: String,
+   *   isLoading: Boolean,
+   *   tagsPath: String // endpoint to request the list
+   *   destroyPath: String // endpoit to delete the repo
+   *   list: Array // List of the registry images
+   * }
+   *
+   * Each registry image inside `list` has the following structure:
+   * {
+   *   tag: String,
+   *   revision: String
+   *   shortRevision: String
+   *   size: Number
+   *   layers: Number
+   *   createdAt: String
+   *   destroyPath: String // endpoit to delete each image
+   * }
+   */
+  repos: [],
+});