Moves table component into a separate one

Adds better support for i18n

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)"
+      <table-registry
+        v-if="repo.list.length"
+        :repo="repo"
         />
-              </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"
-          />
-      </template>
       <div
         v-else
         class="nothing-here-block">

app/assets/javascripts/registry/components/table_registry.vue

+<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>

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.'),
 };

app/views/projects/registry/repositories/index.html.haml

@@ -25,30 +25,23 @@
             = s_('ContainerRegistry|How to use the Container Registry')
         .panel-body
           %p
-            = _('First log in to GitLab’s Container Registry using your GitLab username and password. If you have').html_safe
-            = link_to _('2FA enabled'), help_page_path('user/profile/account/two_factor_authentication'), target: '_blank'
-            = _('you need to use a')
-            = succeed ':' do
-              = link_to _('personal access token'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank'
+            - link_token = link_to(_('personal access token'), help_page_path('user/profile/account/two_factor_authentication', anchor: 'personal-access-tokens'), target: '_blank')
+            - link_2fa = link_to(_('2FA enabled'), help_page_path('user/profile/account/two_factor_authentication'), target: '_blank')
+            = s_('ContainerRegistry|First log in to GitLab’s Container Registry using your GitLab username and password. If you have %{link_2fa} you need to use a %{link_token}:').html_safe % { link_2fa: link_2fa, link_token: link_token }
           %pre
             docker login #{Gitlab.config.registry.host_port}
           %br
           %p
-            = _('Once you log in, you’re free to create and upload a container image using the common').html_safe
-            %code
-              = _('build')
-            = _('and')
-            %code push
-            = _('commands:')
+            = s_('ContainerRegistry|Once you log in, you&rsquo;re free to create and upload a container image using the common %{build} and %{push} commands').html_safe % { build: "<code>build</code>".html_safe, push: "<code>push</code>".html_safe }
           %pre
             :plain
               docker build -t #{escape_once(@project.container_registry_url)} .
               docker push #{escape_once(@project.container_registry_url)}
           %hr
           %h5.prepend-top-default
-            = _('Use different image names')
+            = s_('ContainerRegistry|Use different image names')
           %p.light
-            = _('GitLab supports up to 3 levels of image names. The following examples of images are valid for your project:')
+            = s_('ContainerRegistry|GitLab supports up to 3 levels of image names. The following examples of images are valid for your project:')
           %pre
             :plain
               #{escape_once(@project.container_registry_url)}:tag