From 5ae54ca3eb98df665a243bf190a16e80e87c37f2 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 25 Sep 2017 18:00:39 +0100
Subject: Moves table component into a separate one Adds better support for
 i18n

---
 .../registry/components/collapsible_container.vue  | 118 +----------------
 .../registry/components/table_registry.vue         | 147 +++++++++++++++++++++
 app/assets/javascripts/registry/constants.js       |   6 +-
 3 files changed, 157 insertions(+), 114 deletions(-)
 create mode 100644 app/assets/javascripts/registry/components/table_registry.vue

(limited to 'app/assets')

diff --git a/app/assets/javascripts/registry/components/collapsible_container.vue b/app/assets/javascripts/registry/components/collapsible_container.vue
index c29f98c6841..7c341b0e91b 100644
--- a/app/assets/javascripts/registry/components/collapsible_container.vue
+++ b/app/assets/javascripts/registry/components/collapsible_container.vue
@@ -3,9 +3,8 @@
   import { n__, s__ } from '../../locale';
   import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
   import loadingIcon from '../../vue_shared/components/loading_icon.vue';
-  import tablePagination from '../../vue_shared/components/table_pagination.vue';
   import tooltip from '../../vue_shared/directives/tooltip';
-  import timeagoMixin from '../../vue_shared/mixins/timeago';
+  import tableRegistry from './table_registry.vue';
   import { errorMessages, errorMessagesTypes } from '../constants';
 
   export default {
@@ -19,11 +18,8 @@
     components: {
       clipboardButton,
       loadingIcon,
-      tablePagination,
+      tableRegistry,
     },
-    mixins: [
-      timeagoMixin,
-    ],
     directives: {
       tooltip,
     },
@@ -32,24 +28,13 @@
         isOpen: false,
       };
     },
-    computed: {
-      shouldRenderPagination() {
-        return this.repo.pagination.total > this.repo.pagination.perPage;
-      },
-    },
     methods: {
       ...mapActions([
+        'fetchRepos',
         'fetchList',
         'deleteRepo',
-        'deleteRegistry',
-        'toggleLoading',
       ]),
 
-      layers(item) {
-        const pluralize = n__('layer', 'layers', item.layers);
-        return `${item.layers} ${pluralize}`;
-      },
-
       toggleRepo() {
         this.isOpen = !this.isOpen;
         if (this.isOpen) {
@@ -64,17 +49,6 @@
           .catch(() => this.showError(errorMessagesTypes.DELETE_REPO));
       },
 
-      handleDeleteRegistry(registry) {
-        this.deleteRegistry(registry)
-          .then(() => this.fetchRegistry(this.repo))
-          .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
-      },
-
-      onPageChange(pageNumber) {
-        this.fetchList({ repo: this.repo, page })
-          .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
-      },
-
       clipboardText(text) {
         return `docker pull ${text}`;
       },
@@ -137,89 +111,11 @@
       v-else-if="!repo.isLoading && isOpen"
       class="container-image-tags">
 
-      <template v-if="repo.list.length">
-        <table class="table tags">
-          <thead>
-            <tr>
-              <th>{{s__('ContainerRegistry|Tag')}}</th>
-              <th>{{s__('ContainerRegistry|Tag ID')}}</th>
-              <th>{{s__("ContainerRegistry|Size")}}</th>
-              <th>{{s__("ContainerRegistry|Created")}}</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(item, i) in repo.list"
-              :key="i">
-              <td>
-
-                {{item.tag}}
-
-                <clipboard-button
-                  v-if="item.location"
-                  :title="item.location"
-                  :text="clipboardText(item.location)"
-                  />
-              </td>
-              <td>
-                <span
-                  v-tooltip
-                  :title="item.revision"
-                  data-placement="bottom">
-                  {{item.shortRevision}}
-                  </span>
-              </td>
-              <td>
-                <template v-if="item.size">
-                  {{item.size}}
-                  &middot;
-                  {{layers(item)}}
-                </template>
-                <div
-                  v-else
-                  class="light">
-                  \-
-                </div>
-              </td>
-
-              <td>
-                <template v-if="item.createdAt">
-                  {{timeFormated(item.createdAt)}}
-                </template>
-                <div
-                  v-else
-                  class="light">
-                  \-
-                </div>
-              </td>
-
-              <td class="content">
-                <button
-                  v-if="item.canDelete"
-                  type="button"
-                  class="js-delete-registry btn btn-danger hidden-xs pull-right"
-                  :title="s__('ContainerRegistry|Remove tag')"
-                  :aria-label="s__('ContainerRegistry|Remove tag')"
-                  data-container="body"
-                  v-tooltip
-                  @click="handleDeleteRegistry(item)">
-                  <i
-                    class="fa fa-trash"
-                    aria-hidden="true">
-                  </i>
-                </button>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <table-registry
+        v-if="repo.list.length"
+        :repo="repo"
+        />
 
-        <table-pagination
-          v-if="shouldRenderPagination"
-          :change="onPageChange"
-          :page-info="repo.pagination"
-          />
-      </template>
       <div
         v-else
         class="nothing-here-block">
diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
new file mode 100644
index 00000000000..491a90363db
--- /dev/null
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -0,0 +1,147 @@
+<script>
+  import { mapActions } from 'vuex';
+  import { n__, s__ } from '../../locale';
+  import clipboardButton from '../../vue_shared/components/clipboard_button.vue';
+  import tablePagination from '../../vue_shared/components/table_pagination.vue';
+  import tooltip from '../../vue_shared/directives/tooltip';
+  import timeagoMixin from '../../vue_shared/mixins/timeago';
+  import { errorMessages, errorMessagesTypes } from '../constants';
+
+  export default {
+    props: {
+      repo: {
+        type: Object,
+        required: true,
+      },
+    },
+    components: {
+      clipboardButton,
+      tablePagination,
+    },
+    mixins: [
+      timeagoMixin,
+    ],
+    directives: {
+      tooltip,
+    },
+    computed: {
+      shouldRenderPagination() {
+        return this.repo.pagination.total > this.repo.pagination.perPage;
+      },
+    },
+    methods: {
+      ...mapActions([
+        'fetchList',
+        'deleteRegistry',
+      ]),
+
+      layers(item) {
+        const pluralize = n__('layer', 'layers', item.layers);
+        return `${item.layers} ${pluralize}`;
+      },
+       handleDeleteRegistry(registry) {
+        this.deleteRegistry(registry)
+          .then(() => this.fetchList({ repo: this.repo }))
+          .catch(() => this.showError(errorMessagesTypes.DELETE_REGISTRY));
+      },
+
+      onPageChange(pageNumber) {
+        this.fetchList({ repo: this.repo, page })
+          .catch(() => this.showError(errorMessagesTypes.FETCH_REGISTRY));
+      },
+
+      clipboardText(text) {
+        return `docker pull ${text}`;
+      },
+
+      showError(message) {
+        Flash((errorMessages[message]));
+      },
+    },
+  };
+</script>
+<template>
+<div>
+  <table class="table tags">
+    <thead>
+      <tr>
+        <th>{{s__('ContainerRegistry|Tag')}}</th>
+        <th>{{s__('ContainerRegistry|Tag ID')}}</th>
+        <th>{{s__("ContainerRegistry|Size")}}</th>
+        <th>{{s__("ContainerRegistry|Created")}}</th>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(item, i) in repo.list"
+        :key="i">
+        <td>
+
+          {{item.tag}}
+
+          <clipboard-button
+            v-if="item.location"
+            :title="item.location"
+            :text="clipboardText(item.location)"
+            />
+        </td>
+        <td>
+          <span
+            v-tooltip
+            :title="item.revision"
+            data-placement="bottom">
+            {{item.shortRevision}}
+            </span>
+        </td>
+        <td>
+          <template v-if="item.size">
+            {{item.size}}
+            &middot;
+            {{layers(item)}}
+          </template>
+          <div
+            v-else
+            class="light">
+            \-
+          </div>
+        </td>
+
+        <td>
+          <template v-if="item.createdAt">
+            {{timeFormated(item.createdAt)}}
+          </template>
+          <div
+            v-else
+            class="light">
+            \-
+          </div>
+        </td>
+
+        <td class="content">
+          <button
+            v-if="item.canDelete"
+            type="button"
+            class="js-delete-registry btn btn-danger hidden-xs pull-right"
+            :title="s__('ContainerRegistry|Remove tag')"
+            :aria-label="s__('ContainerRegistry|Remove tag')"
+            data-container="body"
+            v-tooltip
+            @click="handleDeleteRegistry(item)">
+            <i
+              class="fa fa-trash"
+              aria-hidden="true">
+            </i>
+          </button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+
+  <table-pagination
+    v-if="shouldRenderPagination"
+    :change="onPageChange"
+    :page-info="repo.pagination"
+    />
+</div>
+</template>
diff --git a/app/assets/javascripts/registry/constants.js b/app/assets/javascripts/registry/constants.js
index 7d02b5bf7c3..712b0fade3d 100644
--- a/app/assets/javascripts/registry/constants.js
+++ b/app/assets/javascripts/registry/constants.js
@@ -9,7 +9,7 @@ export const errorMessagesTypes = {
 
 export const errorMessages = {
   [errorMessagesTypes.FETCH_REGISTRY]: __('Something went wrong while fetching the registry list.'),
-  [errorMessagesTypes.FETCH_REPOS]: __('Something went wrong while fetching the repositories.'),
-  [errorMessagesTypes.DELETE_REPO]: __('Something went wrong while deleting the repository.'),
-  [errorMessagesTypes.DELETE_REGISTRY]: __('Something went wrong while deleting registry.'),
+  [errorMessagesTypes.FETCH_REPOS]: __('Something went wrong while fetching the projects.'),
+  [errorMessagesTypes.DELETE_REPO]: __('Something went wrong on our end.'),
+  [errorMessagesTypes.DELETE_REGISTRY]: __('Something went wrong on our end.'),
 };
-- 
cgit v1.2.1