Add latest changes from gitlab-org/gitlab@master

3 files changed, 69 insertions, 4 deletions

diff --git a/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue b/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue
index d4f17c840d7..e8ec8f157ef 100644
--- a/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue
+++ b/app/assets/javascripts/ml/model_registry/apps/show_ml_model.vue
@@ -1,16 +1,71 @@
 <script>
+import { GlTab, GlTabs, GlBadge } from '@gitlab/ui';
+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';
+
 export default {
   name: 'ShowMlModelApp',
-  components: {},
+  components: {
+    TitleArea,
+    GlTabs,
+    GlTab,
+    GlBadge,
+    MetadataItem,
+  },
   props: {
     model: {
       type: Object,
       required: true,
     },
   },
+  computed: {
+    versionCount() {
+      return this.model.versionCount || 0;
+    },
+    candidateCount() {
+      return this.model.candidateCount || 0;
+    },
+  },
+  i18n,
 };
 </script>
 
 <template>
-  <div>{{ model.name }}</div>
+  <div>
+    <title-area :title="model.name">
+      <template #metadata-versions-count>
+        <metadata-item
+          icon="machine-learning"
+          :text="$options.i18n.versionsCountLabel(model.versionCount)"
+        />
+      </template>
+
+      <template #sub-header>
+        {{ model.description }}
+      </template>
+    </title-area>
+
+    <gl-tabs class="gl-mt-4">
+      <gl-tab :title="$options.i18n.MODEL_DETAILS_TAB_LABEL">
+        <h3 class="gl-font-lg">{{ $options.i18n.LATEST_VERSION_LABEL }}</h3>
+        <template v-if="model.latestVersion">
+          {{ model.latestVersion.version }}
+        </template>
+        <div v-else class="gl-text-secondary">{{ $options.i18n.NO_VERSIONS_LABEL }}</div>
+      </gl-tab>
+      <gl-tab>
+        <template #title>
+          {{ $options.i18n.MODEL_OTHER_VERSIONS_TAB_LABEL }}
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{ versionCount }}</gl-badge>
+        </template>
+      </gl-tab>
+      <gl-tab>
+        <template #title>
+          {{ $options.i18n.MODEL_CANDIDATES_TAB_LABEL }}
+          <gl-badge size="sm" class="gl-tab-counter-badge">{{ candidateCount }}</gl-badge>
+        </template>
+      </gl-tab>
+    </gl-tabs>
+  </div>
 </template>
diff --git a/app/assets/javascripts/ml/model_registry/translations.js b/app/assets/javascripts/ml/model_registry/translations.js
new file mode 100644
index 00000000000..5305285b363
--- /dev/null
+++ b/app/assets/javascripts/ml/model_registry/translations.js
@@ -0,0 +1,10 @@
+import { s__, n__ } from '~/locale';
+
+export const MODEL_DETAILS_TAB_LABEL = s__('MlModelRegistry|Details');
+export const MODEL_OTHER_VERSIONS_TAB_LABEL = s__('MlModelRegistry|Versions');
+export const MODEL_CANDIDATES_TAB_LABEL = s__('MlModelRegistry|Version candidates');
+export const LATEST_VERSION_LABEL = s__('MlModelRegistry|Latest version');
+export const NO_VERSIONS_LABEL = s__('MlModelRegistry|This model has no versions');
+
+export const versionsCountLabel = (versionCount) =>
+  n__('MlModelRegistry|%d version', 'MlModelRegistry|%d versions', versionCount);
diff --git a/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue b/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue
index e2a3efa096f..e14fee5bfb8 100644
--- a/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue
+++ b/app/assets/javascripts/sidebar/components/severity/sidebar_severity_widget.vue
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <template>
-  <div ref="sidebarSeverity" class="block">
+  <div ref="sidebarSeverity" class="block" data-testid="severity-block-container">
     <sidebar-editable-item
       ref="toggle"
       :loading="isUpdating"
@@ -131,7 +131,7 @@ export default {
             </gl-sprintf>
           </gl-tooltip>
         </div>
-        <div class="hide-collapsed">
+        <div class="hide-collapsed" data-testid="incident-severity">
           <severity-token :severity="selectedItem" />
         </div>
       </template>