Merge branch...

Merge branch '498844-model-registry-empty-state-for-no-description-for-models-and-versions-2' into 'master' 

Model registry: Improve empty model description state

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/169562



Merged-by: Coung Ngo <cngo@gitlab.com>
Approved-by: Lindsey Shelton <lshelton@gitlab.com>
Approved-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: Lindsey Shelton <lshelton@gitlab.com>
Co-authored-by: fdegier <fdegier@gitlab.com>

app/assets/javascripts/ml/model_registry/components/model_detail.vue

@@ -56,6 +56,9 @@ export default {
   },
   emptyState: {
     title: s__('MlModelRegistry|Manage versions of your machine learning model'),
+    modelCardDescription: s__(
+      'MlModelRegistry|No description available. To add a description, click "Edit model" above.',
+    ),
     description: s__('MlModelRegistry|Use versions to track performance, parameters, and metadata'),
     primaryText: s__('MlModelRegistry|Create model version'),
   },
@@ -85,8 +88,12 @@ export default {
         :task-list-update-path="taskListUpdatePath"
       />
     </div>
+    <div v-else class="gl-text-secondary" data-testid="empty-description-state">
+      {{ $options.emptyState.modelCardDescription }}
+    </div>
+
     <empty-state
-      v-else
+      v-if="!model.latestVersion"
       :title="$options.emptyState.title"
       :description="$options.emptyState.description"
       :primary-text="$options.emptyState.primaryText"

locale/gitlab.pot

@@ -34952,6 +34952,9 @@ msgstr ""
 msgid "MlModelRegistry|New model"
 msgstr ""
+msgid "MlModelRegistry|No description available. To add a description, click \"Edit model\" above."
+msgstr ""
+
 msgid "MlModelRegistry|No description provided"
 msgstr ""

spec/frontend/ml/model_registry/components/model_detail_spec.js

@@ -2,6 +2,7 @@ import { GlTab } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ModelDetail from '~/ml/model_registry/components/model_detail.vue';
 import EmptyState from '~/ml/model_registry/components/model_list_empty_state.vue';
+import IssuableDescription from '~/vue_shared/issuable/show/components/issuable_description.vue';
 import { model, modelWithoutVersion } from '../graphql_mock_data';
 let wrapper;
@@ -16,8 +17,37 @@ const createWrapper = (modelProp = model) => {
 const findEmptyState = () => wrapper.findComponent(EmptyState);
 const findVersionLink = () => wrapper.findByTestId('model-version-link');
+const findIssuable = () => wrapper.findComponent(IssuableDescription);
+const findEmptyDescription = () => wrapper.findByTestId('empty-description-state');
 describe('ShowMlModel', () => {
+  describe('when it has description', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('displays description', () => {
+      expect(findEmptyDescription().exists()).toBe(false);
+      expect(findIssuable().props('issuable')).toEqual({
+        titleHtml: model.name,
+        descriptionHtml: model.descriptionHtml,
+      });
+    });
+  });
+
+  describe('when it does not have description', () => {
+    beforeEach(() => {
+      createWrapper({ ...model, description: '', descriptionHtml: '' });
+    });
+
+    it('displays empty state description', () => {
+      expect(findEmptyDescription().exists()).toBe(true);
+      expect(findEmptyDescription().text()).toContain(
+        'No description available. To add a description, click "Edit model" above.',
+      );
+    });
+  });
+
   describe('when it has latest version', () => {
     beforeEach(() => {
       createWrapper();