Add latest changes from gitlab-org/gitlab@master

3 files changed, 32 insertions, 24 deletions

diff --git a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
index daf09dbf5e4..5a55d5669a8 100644
--- a/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/index_ml_models.vue
@@ -1,7 +1,9 @@
 <script>
 import { isEmpty } from 'lodash';
-import * as translations from '~/ml/model_registry/translations';
 import Pagination from '~/vue_shared/components/incubation/pagination.vue';
+import MetadataItem from '~/vue_shared/components/registry/metadata_item.vue';
+import TitleArea from '~/vue_shared/components/registry/title_area.vue';
+import * as i18n from '../translations';
 import { BASE_SORT_FIELDS } from '../constants';
 import SearchBar from '../components/search_bar.vue';
 import ModelRow from '../components/model_row.vue';
@@ -12,6 +14,8 @@ export default {
     Pagination,
     ModelRow,
     SearchBar,
+    MetadataItem,
+    TitleArea,
   },
   props: {
     models: {
@@ -22,26 +26,29 @@ export default {
       type: Object,
       required: true,
     },
+    modelCount: {
+      type: Number,
+      required: false,
+      default: 0,
+    },
   },
   computed: {
     hasModels() {
       return !isEmpty(this.models);
     },
   },
-  i18n: translations,
+  i18n,
   sortableFields: BASE_SORT_FIELDS,
 };
 </script>
 
 <template>
   <div>
-    <div class="detail-page-header gl-flex-wrap">
-      <div class="detail-page-header-body">
-        <div class="page-title gl-flex-grow-1 gl-display-flex gl-align-items-center">
-          <h2 class="gl-font-size-h-display gl-my-0">{{ $options.i18n.TITLE_LABEL }}</h2>
-        </div>
-      </div>
-    </div>
+    <title-area :title="$options.i18n.TITLE_LABEL">
+      <template #metadata-models-count>
+        <metadata-item icon="machine-learning" :text="$options.i18n.modelsCountLabel(modelCount)" />
+      </template>
+    </title-area>
 
     <template v-if="hasModels">
       <search-bar :sortable-fields="$options.sortableFields" />
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 4f91f0939a8..ffae7e83099 100644
--- a/app/assets/javascripts/ml/model_registry/components/model_row.vue
+++ b/app/assets/javascripts/ml/model_registry/components/model_row.vue
@@ -1,6 +1,6 @@
 <script>
 import { GlLink } from '@gitlab/ui';
-import { modelVersionCountMessage } from '../translations';
+import { s__, n__ } from '~/locale';
 
 export default {
   name: 'MlModelRow',
@@ -17,8 +17,16 @@ export default {
     hasVersions() {
       return this.model.version != null;
     },
+    modelVersionCountMessage() {
+      if (!this.model.versionCount) return s__('MlModelRegistry|No registered versions');
+
+      return n__(
+        'MlModelRegistry|· No other versions',
+        'MlModelRegistry|· %d versions',
+        this.model.versionCount,
+      );
+    },
   },
-  modelVersionCountMessage,
 };
 </script>
 
@@ -29,7 +37,9 @@ export default {
     </gl-link>
 
     <div class="gl-text-secondary">
-      {{ $options.modelVersionCountMessage(model.version, model.versionCount) }}
+      <gl-link v-if="hasVersions" :href="model.versionPath">{{ model.version }}</gl-link>
+
+      {{ modelVersionCountMessage }}
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/ml/model_registry/translations.js b/app/assets/javascripts/ml/model_registry/translations.js
index 39f4cd22495..89b3f45ed94 100644
--- a/app/assets/javascripts/ml/model_registry/translations.js
+++ b/app/assets/javascripts/ml/model_registry/translations.js
@@ -1,4 +1,4 @@
-import { s__, n__, sprintf } from '~/locale';
+import { s__, n__ } from '~/locale';
 
 export const MODEL_DETAILS_TAB_LABEL = s__('MlModelRegistry|Details');
 export const MODEL_OTHER_VERSIONS_TAB_LABEL = s__('MlModelRegistry|Versions');
@@ -12,14 +12,5 @@ export const versionsCountLabel = (versionCount) =>
 export const TITLE_LABEL = s__('MlModelRegistry|Model registry');
 export const NO_MODELS_LABEL = s__('MlModelRegistry|No models registered in this project');
 
-export const modelVersionCountMessage = (version, versionCount) => {
-  if (!versionCount) return s__('MlModelRegistry|No registered versions');
-
-  const message = n__(
-    'MlModelRegistry|%{version} · No other versions',
-    'MlModelRegistry|%{version} · %{versionCount} versions',
-    versionCount,
-  );
-
-  return sprintf(message, { version, versionCount });
-};
+export const modelsCountLabel = (modelCount) =>
+  n__('MlModelRegistry|%d model', 'MlModelRegistry|%d models', modelCount);