Reduces technical debt

Updates icons to use gitlab-svg
Updates buttons to use gitlab-ui

Updates broken tests

1 files changed, 25 insertions, 31 deletions

diff --git a/app/assets/javascripts/registry/components/table_registry.vue b/app/assets/javascripts/registry/components/table_registry.vue
index 6735c3ff7cf..78c7671856a 100644
--- a/app/assets/javascripts/registry/components/table_registry.vue
+++ b/app/assets/javascripts/registry/components/table_registry.vue
@@ -1,21 +1,24 @@
 <script>
 import { mapActions } from 'vuex';
+import { GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { n__ } from '../../locale';
-import Flash from '../../flash';
-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 createFlash from '../../flash';
+import ClipboardButton from '../../vue_shared/components/clipboard_button.vue';
+import TablePagination from '../../vue_shared/components/table_pagination.vue';
+import Icon from '../../vue_shared/components/icon.vue';
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import { errorMessages, errorMessagesTypes } from '../constants';
 import { numberToHumanSize } from '../../lib/utils/number_utils';
 
 export default {
   components: {
-    clipboardButton,
-    tablePagination,
+    ClipboardButton,
+    TablePagination,
+    GlButton,
+    Icon,
   },
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
   mixins: [timeagoMixin],
   props: {
@@ -31,29 +34,24 @@ export default {
   },
   methods: {
     ...mapActions(['fetchList', 'deleteRegistry']),
-
     layers(item) {
       return item.layers ? n__('%d layer', '%d layers', item.layers) : '';
     },
-
     formatSize(size) {
       return numberToHumanSize(size);
     },
-
     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: pageNumber }).catch(() =>
         this.showError(errorMessagesTypes.FETCH_REGISTRY),
       );
     },
-
     showError(message) {
-      Flash(errorMessages[message]);
+      createFlash(errorMessages[message]);
     },
   },
 };
@@ -71,10 +69,9 @@ export default {
         </tr>
       </thead>
       <tbody>
-        <tr v-for="(item, i) in repo.list" :key="i">
+        <tr v-for="item in repo.list" :key="item.tag">
           <td>
             {{ item.tag }}
-
             <clipboard-button
               v-if="item.location"
               :title="item.location"
@@ -83,37 +80,34 @@ export default {
             />
           </td>
           <td>
-            <span v-tooltip :title="item.revision" data-placement="bottom">
-              {{ item.shortRevision }}
-            </span>
+            <span v-gl-tooltip.bottom :title="item.revision">{{ item.shortRevision }}</span>
           </td>
           <td>
             {{ formatSize(item.size) }}
-            <template v-if="item.size && item.layers">
-              &middot;
-            </template>
+            <template v-if="item.size && item.layers"
+              >&middot;</template
+            >
             {{ layers(item) }}
           </td>
 
           <td>
-            <span v-tooltip :title="tooltipTitle(item.createdAt)" data-placement="bottom">
-              {{ timeFormated(item.createdAt) }}
-            </span>
+            <span v-gl-tooltip.bottom :title="tooltipTitle(item.createdAt)">{{
+              timeFormated(item.createdAt)
+            }}</span>
           </td>
 
           <td class="content">
-            <button
+            <gl-button
               v-if="item.canDelete"
-              v-tooltip
+              v-gl-tooltip
               :title="s__('ContainerRegistry|Remove tag')"
               :aria-label="s__('ContainerRegistry|Remove tag')"
-              type="button"
-              class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
-              data-container="body"
+              variant="danger"
+              class="js-delete-registry d-none d-sm-block float-right"
               @click="handleDeleteRegistry(item);"
             >
-              <i class="fa fa-trash" aria-hidden="true"> </i>
-            </button>
+              <icon name="remove" />
+            </gl-button>
           </td>
         </tr>
       </tbody>