diff --git a/app/assets/javascripts/ml/model_registry/components/model_detail.vue b/app/assets/javascripts/ml/model_registry/components/model_detail.vue index 567a710795b28c8e891944ce9622ca734e7e7802..791b2a3615a33cac3c33564812c2c61e08436133 100644 --- a/app/assets/javascripts/ml/model_registry/components/model_detail.vue +++ b/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" diff --git a/locale/gitlab.pot b/locale/gitlab.pot index 8d975bf58b5a1f081fc9141dd13f9993cc64ffd0..45eaff0c7894806ac7d2232179c819914f0ebd83 100644 --- a/locale/gitlab.pot +++ b/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 "" diff --git a/spec/frontend/ml/model_registry/components/model_detail_spec.js b/spec/frontend/ml/model_registry/components/model_detail_spec.js index f4c34cf0edda652c8e1cc670052ef62b7bfb4684..0592734d4243c9a9a4c75c14ded0145d0db3f11d 100644 --- a/spec/frontend/ml/model_registry/components/model_detail_spec.js +++ b/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();