[ci skip] Adds tests to vuex and collapsibe component

Formats dates
Fixes clipboard button
Simplifies HTML

7 files changed, 52 insertions, 66 deletions

diff --git a/app/assets/javascripts/registry/components/app.vue b/app/assets/javascripts/registry/components/app.vue
index 17a57ae248d..c4d66382850 100644
--- a/app/assets/javascripts/registry/components/app.vue
+++ b/app/assets/javascripts/registry/components/app.vue
@@ -33,7 +33,7 @@
         'fetchList',
         'deleteRepo',
         'deleteRegistry',
-        'toggleIsLoading',
+        'toggleLoading',
       ]),
 
       fetchRegistryList(repo) {
@@ -49,7 +49,7 @@
 
       deleteRepository(repo) {
         this.deleteRepo(repo)
-          .then(() => this.fetchRepo())
+          .then(() => this.fetchRepos())
           .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
       },
 
diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index 6be2aa60ebd..739e48b93f2 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -2,6 +2,7 @@
   import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
+  import timeagoMixin from '../../vue_shared/mixins/timeago';
 
   export default {
     name: 'collapsibeContainerRegisty',
@@ -15,6 +16,9 @@
       clipboardButton,
       loadingIcon,
     },
+    mixins: [
+      timeagoMixin,
+    ],
     directives: {
       tooltip,
     },
@@ -28,16 +32,18 @@
         const pluralize = gl.text.pluralize('layer', item.layers);
         return `${item.layers} ${pluralize}`;
       },
+
       toggleRepo() {
         if (this.isOpen === false) {
-          // consider not fetching data the second time it is toggled? :fry:
           this.$emit('fetchRegistryList', this.repo);
         }
         this.isOpen = !this.isOpen;
       },
+
       handleDeleteRepository() {
         this.$emit('deleteRepository', this.repo)
       },
+
       handleDeleteRegistry(registry) {
         this.$emit('deleteRegistry', this.repo, registry);
       },
@@ -51,7 +57,8 @@
       class="container-image-head">
       <a
         role="button"
-        @click="toggleRepo">
+        @click="toggleRepo"
+        class="js-toggle-repo">
         <i
           class="fa"
           :class="{
@@ -63,13 +70,17 @@
         {{repo.name}}
       </a>
 
-      <clipboard-button text="foo" title="bar" />
+      <clipboard-button
+        v-if="repo.location"
+        :text="__(`docker pull ${repo.location}`)"
+        :title="repo.location"
+        />
 
       <div class="controls hidden-xs pull-right">
         <button
           v-if="repo.canDelete"
           type="button"
-          class="btn btn-remove"
+          class="js-remove-repo btn btn-remove"
           :title="__('Remove repository')"
           v-tooltip
           @click="handleDeleteRepository">
@@ -90,14 +101,16 @@
       v-else-if="!repo.isLoading && isOpen"
       class="container-image-tags">
 
-      <table class="table tags" v-if="repo.list.length">
+      <table
+        class="table tags"
+        v-if="repo.list.length">
         <thead>
           <tr>
             <th>{{__("Tag")}}</th>
             <th>{{__("Tag ID")}}</th>
             <th>{{__("Size")}}</th>
             <th>{{__("Created")}}</th>
-            <th v-if="true"></th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
@@ -109,16 +122,16 @@
               {{item.tag}}
 
               <clipboard-button
-                :title="item.tag"
-                :text="item.tag"
+                v-if="item.location"
+                :title="item.location"
+                :text="__(`docker pull ${item.location}`)"
                 />
             </td>
             <td>
               <span
                 v-tooltip
                 :title="item.revision"
-                data-placement="bottom"
-                >
+                data-placement="bottom">
                 {{item.shortRevision}}
                 </span>
             </td>
@@ -128,34 +141,38 @@
                 &middot;
                 {{layers(item)}}
               </template>
-              <div v-else class="light">
+              <div
+                v-else
+                class="light">
                 \-
               </div>
             </td>
 
             <td>
               <template v-if="item.createdAt">
-                format {{item.createdAt}}
+                {{timeFormated(item.createdAt)}}
               </template>
-              <div v-else class="light">
+              <div
+                v-else
+                class="light">
                 \-
               </div>
             </td>
 
             <td class="content">
-              <div class="controls hidden-xs pull-right">
-                <button
-                  type="button"
-                  class="btn btn-remove"
-                  title="Remove tag"
-                  v-tooltip
-                  @click="handleDeleteRegistry(item)">
-                  <i
-                    class="fa fa-trash"
-                    aria-hidden="true">
-                  </i>
-                </button>
-              </div>
+              <button
+                v-if="item.canDelete"
+                type="button"
+                class="js-delete-registry btn btn-remove hidden-xs pull-right"
+                :title="__('Remove tag')"
+                data-container="body"
+                v-tooltip
+                @click="handleDeleteRegistry(item)">
+                <i
+                  class="fa fa-trash"
+                  aria-hidden="true">
+                </i>
+              </button>
             </td>
           </tr>
         </tbody>
diff --git a/app/assets/javascripts/registry/index.js b/app/assets/javascripts/registry/index.js
index 4f7895897b2..ad76dfd333b 100644
--- a/app/assets/javascripts/registry/index.js
+++ b/app/assets/javascripts/registry/index.js
@@ -1,9 +1,6 @@
 import Vue from 'vue';
-import Translate from '../vue_shared/translate';
 import registryApp from './components/app.vue';
 
-// Vue.use(Translate);
-
 document.addEventListener('DOMContentLoaded', () => new Vue({
   el: '#js-vue-registry-images',
   components: {
diff --git a/app/assets/javascripts/registry/stores/actions.js b/app/assets/javascripts/registry/stores/actions.js
index 5dda16b8d9a..c86e40a1a28 100644
--- a/app/assets/javascripts/registry/stores/actions.js
+++ b/app/assets/javascripts/registry/stores/actions.js
@@ -27,16 +27,10 @@ export const fetchList = ({ commit }, list) => {
 };
 
 export const deleteRepo = ({ commit }, repo) => Vue.http.delete(repo.path)
-  .then(res => res.json())
-  .then(() => {
-    commit(types.DELETE_REPO, repo);
-  });
+  .then(res => res.json());
 
 export const deleteRegistry = ({ commit }, image) => Vue.http.delete(image.path)
-  .then(res => res.json())
-  .then(() => {
-    commit(types.DELETE_IMAGE, image);
-  });
+  .then(res => res.json());
 
 export const setMainEndpoint = ({ commit }, data) => commit(types.SET_MAIN_ENDPOINT, data);
-export const toggleIsLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING);
+export const toggleLoading = ({ commit }) => commit(types.TOGGLE_MAIN_LOADING);
diff --git a/app/assets/javascripts/registry/stores/getters.js b/app/assets/javascripts/registry/stores/getters.js
index 6c6ed0cd738..588f479c492 100644
--- a/app/assets/javascripts/registry/stores/getters.js
+++ b/app/assets/javascripts/registry/stores/getters.js
@@ -1,2 +1,2 @@
 export const isLoading = state => state.isLoading;
-export const repos = state => state.repos;
\ No newline at end of file
+export const repos = state => state.repos;
diff --git a/app/assets/javascripts/registry/stores/mutation_types.js b/app/assets/javascripts/registry/stores/mutation_types.js
index aece401a24a..2c69bf11807 100644
--- a/app/assets/javascripts/registry/stores/mutation_types.js
+++ b/app/assets/javascripts/registry/stores/mutation_types.js
@@ -1,10 +1,7 @@
 export const SET_MAIN_ENDPOINT = 'SET_MAIN_ENDPOINT';
-export const FETCH_REPOS_LIST = 'FETCH_REPOS_LIST';
-export const DELETE_REPO = 'DELETE_REPO';
+
 export const SET_REPOS_LIST = 'SET_REPOS_LIST';
 export const TOGGLE_MAIN_LOADING = 'TOGGLE_MAIN_LOADING';
 
-export const FETCH_IMAGES_LIST = 'FETCH_IMAGES_LIST';
 export const SET_REGISTRY_LIST = 'SET_REGISTRY_LIST';
-export const DELETE_IMAGE = 'DELETE_IMAGE';
 export const TOGGLE_REGISTRY_LIST_LOADING = 'TOGGLE_REGISTRY_LIST_LOADING';
diff --git a/app/assets/javascripts/registry/stores/mutations.js b/app/assets/javascripts/registry/stores/mutations.js
index 796548bffec..0e69d2bed1b 100644
--- a/app/assets/javascripts/registry/stores/mutations.js
+++ b/app/assets/javascripts/registry/stores/mutations.js
@@ -11,12 +11,12 @@ export default {
       repos: list.map(el => ({
         canDelete: !!el.destroy_path,
         destroyPath: el.destroy_path,
+        id: el.id,
         isLoading: false,
         list: [],
         location: el.location,
         name: el.name,
         tagsPath: el.tags_path,
-        id: el.id,
       })),
     });
   },
@@ -26,26 +26,6 @@ export default {
   },
 
   [types.SET_REGISTRY_LIST](state, repo, list) {
-    // mock
-    list = [
-      {
-        name: 'centos6',
-        short_revision: '0b6091a66',
-        revision: '0b6091a665af68bbbbb36a3e088ec3cd6f35389deebf6d4617042d56722d76fb',
-        size: 706,
-        layers: 19,
-        created_at: 1505828744434,
-      },
-      {
-        name: 'centos7',
-        short_revision: 'b118ab5b0',
-        revision: 'b118ab5b0e90b7cb5127db31d5321ac14961d097516a8e0e72084b6cdc783b43',
-        size: 679,
-        layers: 19,
-        created_at: 1505828744434,
-      },
-    ];
-
     const listToUpdate = state.repos.find(el => el.id === repo.id);
 
     listToUpdate.list = list.map(element => ({
@@ -54,6 +34,7 @@ export default {
       shortRevision: element.short_revision,
       size: element.size,
       layers: element.layers,
+      location: element.location,
       createdAt: element.created_at,
       destroyPath: element.destroy_path,
       canDelete: !!element.destroy_path,