1 files changed, 22 insertions, 11 deletions
diff --git a/app/assets/javascripts/ml/model_registry/components/model_row.vue b/app/assets/javascripts/ml/model_registry/components/model_row.vue
index 15be7bd0b47..49f72c7cef2 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_row.vue
@@ -1,11 +1,14 @@
 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlLink, GlTruncate } from '@gitlab/ui';
 import { s__, n__ } from '~/locale';
+import ListItem from '~/vue_shared/components/registry/list_item.vue';
 
 export default {
   name: 'MlModelRow',
   components: {
     GlLink,
+    ListItem,
+    GlTruncate,
   },
   props: {
     model: {
@@ -15,7 +18,7 @@ export default {
   },
   computed: {
     hasVersions() {
-      return this.model.version != null;
+      return this.model.versionCount > 0;
     },
     modelVersionCountMessage() {
       if (!this.model.versionCount) return s__('MlModelRegistry|No registered versions');
@@ -31,15 +34,23 @@ export default {
 </script>
 
 <template>
-  <div class="gl-border-b-solid gl-border-b-1 gl-border-b-gray-100 gl-py-3">
-    <gl-link :href="model.path" class="gl-text-body gl-font-weight-bold gl-line-height-24">
-      {{ model.name }}
-    </gl-link>
+  <list-item v-bind="$attrs">
+    <template #left-primary>
+      <div class="gl-display-flex gl-align-items-center">
+        <gl-link class="gl-text-body" :href="model._links.showPath">
+          <gl-truncate :text="model.name" />
+        </gl-link>
+      </div>
+    </template>
 
-    <div class="gl-text-secondary">
-      <gl-link v-if="hasVersions" :href="model.versionPath">{{ model.version }}</gl-link>
+    <template #left-secondary>
+      <div class="gl-text-secondary">
+        <gl-link v-if="hasVersions" :href="model.latestVersion._links.showPath">{{
+          model.latestVersion.version
+        }}</gl-link>
 
-      {{ modelVersionCountMessage }}
-    </div>
-  </div>
+        {{ modelVersionCountMessage }}
+      </div>
+    </template>
+  </list-item>
 </template>