11 files changed, 31 insertions, 22 deletions

diff --git a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
index 51ba2337db6..8ec5cebbe8e 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/details_page/tags_list_row.vue
@@ -7,7 +7,7 @@ import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import DeleteButton from '../delete_button.vue';
 import ListItem from '../list_item.vue';
-import DetailsRow from './details_row.vue';
+import DetailsRow from '~/registry/shared/components/details_row.vue';
 import {
   REMOVE_TAG_BUTTON_TITLE,
   DIGEST_LABEL,
diff --git a/app/assets/javascripts/registry/explorer/components/list_item.vue b/app/assets/javascripts/registry/explorer/components/list_item.vue
index 7b5afe8fd9d..c57645cc3a1 100644
--- a/app/assets/javascripts/registry/explorer/components/list_item.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_item.vue
@@ -70,7 +70,7 @@ export default {
       </div>
       <div class="gl-display-flex gl-flex-direction-column gl-flex-fill-1">
         <div
-          class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-text-black-normal gl-font-weight-bold"
+          class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-text-body gl-font-weight-bold"
         >
           <div class="gl-display-flex gl-align-items-center">
             <slot name="left-primary"></slot>
@@ -88,7 +88,7 @@ export default {
           </div>
         </div>
         <div
-          class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-font-sm gl-text-gray-500"
+          class="gl-display-flex gl-align-items-center gl-justify-content-space-between gl-font-sm gl-text-gray-300"
         >
           <div>
             <slot name="left-secondary"></slot>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
index 8b06797c0ae..36a46ed58f4 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/cli_commands.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlFormGroup, GlFormInputGroup } from '@gitlab/ui';
 import { mapGetters } from 'vuex';
 import Tracking from '~/tracking';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
@@ -15,7 +15,7 @@ import {
 
 export default {
   components: {
-    GlDropdown,
+    GlDeprecatedDropdown,
     GlFormGroup,
     GlFormInputGroup,
     ClipboardButton,
@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
+  <gl-deprecated-dropdown
     :text="$options.i18n.dropdownTitle"
     variant="primary"
     size="sm"
@@ -99,5 +99,5 @@ export default {
         </gl-form-group>
       </form>
     </li>
-  </gl-dropdown>
+  </gl-deprecated-dropdown>
 </template>
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
index 2874d89d913..102311c6062 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/image_list_row.vue
@@ -71,7 +71,7 @@ export default {
   >
     <template #left-primary>
       <router-link
-        class="gl-text-black-normal gl-font-weight-bold"
+        class="gl-text-body gl-font-weight-bold"
         data-testid="detailsLink"
         :to="{ name: 'details', params: { id: encodedItem } }"
       >
@@ -82,7 +82,7 @@ export default {
         :disabled="item.deleting"
         :text="item.location"
         :title="item.location"
-        css-class="btn-default btn-transparent btn-clipboard gl-text-gray-500"
+        css-class="btn-default btn-transparent btn-clipboard gl-text-gray-300"
       />
       <gl-icon
         v-if="item.failedDelete"
diff --git a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
index d4ff84447bb..c7b4fd5f4b4 100644
--- a/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
+++ b/app/assets/javascripts/registry/explorer/components/list_page/registry_header.vue
@@ -96,7 +96,7 @@ export default {
     </div>
     <div
       v-if="imagesCount"
-      class="gl-display-flex gl-align-items-center gl-mt-1 gl-mb-3 gl-text-gray-700"
+      class="gl-display-flex gl-align-items-center gl-mt-1 gl-mb-3 gl-text-gray-500"
       data-testid="subheader"
     >
       <span class="gl-mr-3" data-testid="images-count">
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index cf811156704..b697bca6259 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <template>
-  <div v-gl-resize-observer="handleResize" class="gl-my-3 gl-w-full slide-enter-to-element">
+  <div v-gl-resize-observer="handleResize" class="gl-my-3">
     <delete-alert
       v-model="deleteAlertType"
       :garbage-collection-help-page-path="config.garbageCollectionHelpPagePath"
diff --git a/app/assets/javascripts/registry/explorer/pages/index.vue b/app/assets/javascripts/registry/explorer/pages/index.vue
index 709a163d56d..4ac0bca84c1 100644
--- a/app/assets/javascripts/registry/explorer/pages/index.vue
+++ b/app/assets/javascripts/registry/explorer/pages/index.vue
@@ -4,8 +4,6 @@ export default {};
 
 <template>
   <div>
-    <transition name="slide">
-      <router-view ref="router-view" />
-    </transition>
+    <router-view ref="router-view" />
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 1d353651c38..81e47073fe9 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -130,7 +130,7 @@ export default {
 </script>
 
 <template>
-  <div class="w-100 slide-enter-from-element">
+  <div>
     <gl-alert
       v-if="showDeleteAlert"
       :variant="deleteAlertType"
diff --git a/app/assets/javascripts/registry/explorer/stores/actions.js b/app/assets/javascripts/registry/explorer/stores/actions.js
index 3d73ffbd23f..9125f573aa4 100644
--- a/app/assets/javascripts/registry/explorer/stores/actions.js
+++ b/app/assets/javascripts/registry/explorer/stores/actions.js
@@ -1,5 +1,5 @@
 import axios from '~/lib/utils/axios_utils';
-import createFlash from '~/flash';
+import { deprecatedCreateFlash as createFlash } from '~/flash';
 import * as types from './mutation_types';
 import {
   FETCH_IMAGES_LIST_ERROR_MESSAGE,
@@ -102,5 +102,3 @@ export const requestDeleteImage = ({ commit }, image) => {
       commit(types.SET_MAIN_LOADING, false);
     });
 };
-
-export default () => {};
diff --git a/app/assets/javascripts/registry/settings/store/actions.js b/app/assets/javascripts/registry/settings/store/actions.js
index be1f62334fa..0530a870ecc 100644
--- a/app/assets/javascripts/registry/settings/store/actions.js
+++ b/app/assets/javascripts/registry/settings/store/actions.js
@@ -28,6 +28,3 @@ export const saveSettings = ({ dispatch, state }) => {
     )
     .finally(() => dispatch('toggleLoading'));
 };
-
-// prevent babel-plugin-rewire from generating an invalid default during karma tests
-export default () => {};
diff --git a/app/assets/javascripts/registry/explorer/components/details_page/details_row.vue b/app/assets/javascripts/registry/shared/components/details_row.vue
index c4358b83e23..2e245fadead 100644
--- a/app/assets/javascripts/registry/explorer/components/details_page/details_row.vue
+++ b/app/assets/javascripts/registry/shared/components/details_row.vue
@@ -10,13 +10,29 @@ export default {
       type: String,
       required: true,
     },
+    padding: {
+      type: String,
+      default: 'gl-py-2',
+      required: false,
+    },
+    dashed: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
+  },
+  computed: {
+    borderClass() {
+      return this.dashed ? 'gl-border-b-solid gl-border-gray-100 gl-border-b-1' : '';
+    },
   },
 };
 </script>
 
 <template>
   <div
-    class="gl-display-flex gl-align-items-center gl-font-monospace gl-font-sm gl-py-2 gl-word-break-all"
+    class="gl-display-flex gl-align-items-center gl-font-monospace gl-font-sm gl-word-break-all"
+    :class="[padding, borderClass]"
   >
     <gl-icon :name="icon" class="gl-mr-4" />
     <span>