Merge branch '456437-model-registry-empty-state-2' into 'master'

Moves empty state instructions on MLflow usage to a modal

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



Merged-by: Coung Ngo <cngo@gitlab.com>
Approved-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: Alper Akgun <aakgun@gitlab.com>
Reviewed-by: Coung Ngo <cngo@gitlab.com>
Reviewed-by: Eduardo Bonet <ebonet@gitlab.com>
Co-authored-by: Eduardo Bonet <ebonet@gitlab.com>

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

 <script>
-import { GlDisclosureDropdown, GlDisclosureDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown, GlDisclosureDropdownItem, GlModalDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
+import { MLFLOW_USAGE_MODAL_ID } from '../constants';
+import MlflowUsageModal from './mlflow_usage_modal.vue';
 
 export default {
   components: {
     GlDisclosureDropdownItem,
     GlDisclosureDropdown,
+    MlflowUsageModal,
+  },
+  directives: {
+    GlModal: GlModalDirective,
   },
-  inject: ['mlflowTrackingUrl'],
   computed: {
-    copyIdItem() {
+    mlflowUsageModal() {
       return {
-        text: s__('MlModelRegistry|Copy MLflow tracking URL'),
-        action: () => {
-          this.$toast.show(s__('MlModelRegistry|Copied MLflow tracking URL to clipboard'));
-        },
+        text: s__('MlModelRegistry|Using the MLflow client'),
       };
     },
   },
+  modalId: MLFLOW_USAGE_MODAL_ID,
 };
 </script>
 
@@ -29,7 +32,9 @@ export default {
     icon="ellipsis_v"
     no-caret
   >
-    <gl-disclosure-dropdown-item :item="copyIdItem" :data-clipboard-text="mlflowTrackingUrl" />
+    <gl-disclosure-dropdown-item v-gl-modal="$options.modalId" :item="mlflowUsageModal" />
     <slot></slot>
+
+    <mlflow-usage-modal />
   </gl-disclosure-dropdown>
 </template>

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

+<script>
+import { GlModal } from '@gitlab/ui';
+import { s__ } from '~/locale';
+import { helpPagePath } from '~/helpers/help_page_helper';
+import { visitUrl } from '~/lib/utils/url_utility';
+import { MLFLOW_USAGE_MODAL_ID } from '../constants';
+
+export default {
+  components: {
+    GlModal,
+  },
+  inject: ['mlflowTrackingUrl'],
+  computed: {
+    instructions() {
+      return [
+        {
+          label: s__('MlModelRegistry|Setting up the client'),
+          cmd: [
+            // eslint-disable-next-line @gitlab/require-i18n-strings
+            'import os',
+            'from mlflow import MlflowClient',
+            '',
+            `os.environ["MLFLOW_TRACKING_URI"] = "${this.mlflowTrackingUrl}"`,
+            'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
+            '',
+            'client = MlflowClient()',
+          ].join('\n'),
+        },
+        {
+          label: s__('MlModelRegistry|Creating a model'),
+          cmd: [
+            "model_name = '<your_model_name>'",
+            // eslint-disable-next-line @gitlab/require-i18n-strings
+            "description = 'Model description'",
+            'model = client.create_registered_model(model_name, description=description)',
+          ].join('\n'),
+        },
+        {
+          label: s__('MlModelRegistry|Creating a model version'),
+          cmd: [
+            'tags = { "gitlab.version": version }',
+            'model_version = client.create_model_version(model_name, version, tags=tags)',
+          ].join('\n'),
+        },
+        {
+          label: s__('MlModelRegistry|Logging artifacts'),
+          cmd: [
+            'run_id = model_version.run_id',
+            'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
+          ].join('\n'),
+        },
+      ];
+    },
+  },
+  methods: {
+    openDocs() {
+      visitUrl(
+        helpPagePath('user/project/ml/model_registry/index', {
+          anchor: 'creating-machine-learning-models-and-model-versions',
+        }),
+        true,
+      );
+    },
+  },
+  modal: {
+    title: s__('MlModelRegistry|Using the MLflow client'),
+    id: MLFLOW_USAGE_MODAL_ID,
+    firstLine: s__(
+      'MlModelRegistry|Creating models, model versions and candidates is also possible using the MLflow client:',
+    ),
+    actionPrimary: {
+      text: s__('MlModelRegistry|MLflow compatibility documentation'),
+      attributes: {
+        variant: 'confirm',
+      },
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    :modal-id="$options.modal.id"
+    :title="$options.modal.title"
+    :action-primary="$options.modal.actionPrimary"
+    @primary="openDocs"
+  >
+    <p>{{ $options.modal.firstLine }}</p>
+
+    <template v-for="instruction in instructions">
+      <div :key="instruction.label">
+        <label> {{ instruction.label }}</label>
+
+        <pre
+          class="code highlight gl-flex gl-border-none gl-text-left gl-p-2 gl-font-monospace"
+          data-testid="preview-code"
+        >
+          <code class="gl-grow">{{ instruction.cmd }}</code>
+        </pre>
+      </div>
+    </template>
+  </gl-modal>
+</template>

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

 <script>
-import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { GlEmptyState, GlButton, GlModalDirective } from '@gitlab/ui';
 import emptySvgUrl from '@gitlab/svgs/dist/illustrations/empty-state/empty-dag-md.svg?url';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { s__ } from '~/locale';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { MLFLOW_USAGE_MODAL_ID } from '../constants';
 
 export default {
   components: {
     GlEmptyState,
-    ClipboardButton,
     GlButton,
   },
+  directives: {
+    GlModal: GlModalDirective,
+  },
   inject: ['mlflowTrackingUrl'],
-  title: s__('MlModelRegistry|No models registered'),
+  title: s__('MlModelRegistry|Import your machine learning models'),
   description: s__(
-    'MlModelRegistry|Import your machine learning using GitLab directly or using the MLflow client:',
+    'MlModelRegistry|Create your machine learning using GitLab directly or using the MLflow client',
   ),
   createNew: s__('MlModelRegistry|Create model'),
-  mlflowDocs: s__('MlModelRegistry|MLflow compatibility'),
+  mlflowDocs: s__('MlModelRegistry|Create model with MLflow'),
   helpPath: helpPagePath('user/project/ml/model_registry/index', {
     anchor: 'creating-machine-learning-models-and-model-versions',
   }),
   emptySvgPath: emptySvgUrl,
-  computed: {
-    mlflowCommand() {
-      return [
-        // eslint-disable-next-line @gitlab/require-i18n-strings
-        'import os',
-        'from mlflow import MlflowClient',
-        '',
-        `os.environ["MLFLOW_TRACKING_URI"] = "${this.mlflowTrackingUrl}"`,
-        'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
-        '',
-        s__('MlModelRegistry|# Create a model'),
-        'client = MlflowClient()',
-        "model_name = '<your_model_name>'",
-        // eslint-disable-next-line @gitlab/require-i18n-strings
-        "description = 'Model description'",
-        'model = client.create_registered_model(model_name, description=description)',
-        '',
-        s__('MlModelRegistry|# Create a version'),
-        'tags = { "gitlab.version": version }',
-        'model_version = client.create_model_version(model_name, version, tags=tags)',
-        '',
-        s__('MlModelRegistry|# Log artifacts'),
-        'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
-      ].join('\n');
-    },
-  },
   methods: {
     emitOpenCreateModel() {
       this.$emit('open-create-model');
     },
   },
+  modalId: MLFLOW_USAGE_MODAL_ID,
 };
 </script>
 
@@ -62,29 +39,14 @@ export default {
     :svg-path="$options.emptySvgPath"
     :svg-height="null"
     class="gl-py-8"
+    :description="$options.description"
   >
-    <template #description>
-      <p>{{ $options.description }}</p>
-      <pre
-        class="code highlight gl-flex gl-border-none gl-text-left gl-p-2"
-        data-testid="preview-code"
-      >
-        <code>{{ mlflowCommand }}</code>
-        <clipboard-button
-          category="tertiary"
-          :text="mlflowCommand"
-          class="gl-self-start"
-          :title="__('Copy')"
-        />
-      </pre>
-    </template>
-
     <template #actions>
       <gl-button variant="confirm" class="gl-mx-2 gl-mb-3" @click="emitOpenCreateModel">{{
         $options.createNew
       }}</gl-button>
-      <gl-button class="gl-mb-3 gl-mr-3 gl-mx-2" :href="$options.helpPath"
-        >{{ $options.mlflowDocs }}
+      <gl-button v-gl-modal="$options.modalId" class="gl-mb-3 gl-mr-3 gl-mx-2">
+        {{ $options.mlflowDocs }}
       </gl-button>
     </template>
   </gl-empty-state>

app/assets/javascripts/ml/model_registry/constants.js

@@ -23,6 +23,8 @@ export const MODEL_ENTITIES = {
   modelVersion: 'modelVersion',
 };
 
+export const MLFLOW_USAGE_MODAL_ID = 'model-registry-mlflow-usage-modal';
+
 export const emptyArtifactFile = {
   file: null,
   subfolder: '',

locale/gitlab.pot

@@ -33152,15 +33152,6 @@ msgstr ""
 msgid "MlExperimentTracking|Version"
 msgstr ""
-msgid "MlModelRegistry|# Create a model"
-msgstr ""
-
-msgid "MlModelRegistry|# Create a version"
-msgstr ""
-
-msgid "MlModelRegistry|# Log artifacts"
-msgstr ""
-
 msgid "MlModelRegistry|%d model"
 msgid_plural "MlModelRegistry|%d models"
 msgstr[0] ""
@@ -33189,12 +33180,6 @@ msgstr ""
 msgid "MlModelRegistry|Candidate not linked to a CI build"
 msgstr ""
-msgid "MlModelRegistry|Copied MLflow tracking URL to clipboard"
-msgstr ""
-
-msgid "MlModelRegistry|Copy MLflow tracking URL"
-msgstr ""
-
 msgid "MlModelRegistry|Create & import"
 msgstr ""
@@ -33210,12 +33195,27 @@ msgstr ""
 msgid "MlModelRegistry|Create model version & import artifacts"
 msgstr ""
+msgid "MlModelRegistry|Create model with MLflow"
+msgstr ""
+
 msgid "MlModelRegistry|Create model, version & import artifacts"
 msgstr ""
+msgid "MlModelRegistry|Create your machine learning using GitLab directly or using the MLflow client"
+msgstr ""
+
+msgid "MlModelRegistry|Creating a model"
+msgstr ""
+
+msgid "MlModelRegistry|Creating a model version"
+msgstr ""
+
 msgid "MlModelRegistry|Creating models is also possible through the MLflow client. %{linkStart}Follow the documentation to learn more.%{linkEnd}"
 msgstr ""
+msgid "MlModelRegistry|Creating models, model versions and candidates is also possible using the MLflow client:"
+msgstr ""
+
 msgid "MlModelRegistry|Delete model"
 msgstr ""
@@ -33270,7 +33270,7 @@ msgstr ""
 msgid "MlModelRegistry|ID"
 msgstr ""
-msgid "MlModelRegistry|Import your machine learning using GitLab directly or using the MLflow client:"
+msgid "MlModelRegistry|Import your machine learning models"
 msgstr ""
 msgid "MlModelRegistry|Info"
@@ -33288,7 +33288,10 @@ msgstr ""
 msgid "MlModelRegistry|Leave empty to skip version creation."
 msgstr ""
-msgid "MlModelRegistry|MLflow compatibility"
+msgid "MlModelRegistry|Logging artifacts"
+msgstr ""
+
+msgid "MlModelRegistry|MLflow compatibility documentation"
 msgstr ""
 msgid "MlModelRegistry|MLflow run ID"
@@ -33336,15 +33339,15 @@ msgstr ""
 msgid "MlModelRegistry|No logged parameters"
 msgstr ""
-msgid "MlModelRegistry|No models registered"
-msgstr ""
-
 msgid "MlModelRegistry|No registered versions"
 msgstr ""
 msgid "MlModelRegistry|Parameters"
 msgstr ""
+msgid "MlModelRegistry|Setting up the client"
+msgstr ""
+
 msgid "MlModelRegistry|Start tracking your machine learning models"
 msgstr ""
@@ -33366,6 +33369,9 @@ msgstr ""
 msgid "MlModelRegistry|Use versions to track performance, parameters, and metadata"
 msgstr ""
+msgid "MlModelRegistry|Using the MLflow client"
+msgstr ""
+
 msgid "MlModelRegistry|Version Description"
 msgstr ""

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

 import { mount } from '@vue/test-utils';
 import { GlDisclosureDropdownItem } from '@gitlab/ui';
 import ActionsDropdown from '~/ml/model_registry/components/actions_dropdown.vue';
+import MlflowUsageModal from '~/ml/model_registry/components/mlflow_usage_modal.vue';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { MLFLOW_USAGE_MODAL_ID } from '~/ml/model_registry/constants';
 
 describe('ml/model_registry/components/actions_dropdown', () => {
   let wrapper;
 
-  const showToast = jest.fn();
-
   const createWrapper = () => {
     wrapper = mount(ActionsDropdown, {
-      mocks: {
-        $toast: {
-          show: showToast,
-        },
-      },
       provide: {
         mlflowTrackingUrl: 'path/to/mlflow',
       },
+      directives: {
+        GlModal: createMockDirective('gl-modal'),
+      },
       slots: {
         default: 'Slot content',
       },
     });
   };
 
-  const findCopyLinkDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+  const findUsageModalDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+  const findModal = () => wrapper.findComponent(MlflowUsageModal);
 
-  it('has data-clipboard-text set to the correct url', () => {
+  beforeEach(() => {
     createWrapper();
-
-    expect(findCopyLinkDropdownItem().text()).toBe('Copy MLflow tracking URL');
-    expect(findCopyLinkDropdownItem().attributes()['data-clipboard-text']).toBe('path/to/mlflow');
   });
 
-  it('shows a success toast after copying the url to the clipboard', () => {
-    createWrapper();
-
-    findCopyLinkDropdownItem().find('button').trigger('click');
+  it('renders open mlflow usage item', () => {
+    expect(findUsageModalDropdownItem().text()).toBe('Using the MLflow client');
+    expect(getBinding(findUsageModalDropdownItem().element, 'gl-modal').value).toBe(
+      MLFLOW_USAGE_MODAL_ID,
+    );
+  });
 
-    expect(showToast).toHaveBeenCalledWith('Copied MLflow tracking URL to clipboard');
+  it('renders modal', () => {
+    expect(findModal().exists()).toBe(true);
   });
 
   it('renders slots', () => {
-    createWrapper();
-
     expect(wrapper.html()).toContain('Slot content');
   });
 });

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

+import { shallowMount } from '@vue/test-utils';
+import { GlModal } from '@gitlab/ui';
+import MlflowUsageModal from '~/ml/model_registry/components/mlflow_usage_modal.vue';
+import { MLFLOW_USAGE_MODAL_ID } from '~/ml/model_registry/constants';
+
+let wrapper;
+const createWrapper = () => {
+  wrapper = shallowMount(MlflowUsageModal, {
+    provide: { mlflowTrackingUrl: 'path/to/mlflow' },
+  });
+};
+
+const findModal = () => wrapper.findComponent(GlModal);
+
+describe('ml/model_registry/components/mlflow_usage_modal.vue', () => {
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  it('renders the modal with correct props', () => {
+    expect(findModal().props()).toMatchObject({
+      title: 'Using the MLflow client',
+      modalId: MLFLOW_USAGE_MODAL_ID,
+      actionPrimary: {
+        text: 'MLflow compatibility documentation',
+        attributes: {
+          variant: 'confirm',
+        },
+      },
+    });
+  });
+
+  it('renders the text', () => {
+    const text = findModal().text();
+    const expectedLines = [
+      'Creating models, model versions and candidates is also possible using the MLflow client',
+      'Setting up the client',
+      'import os',
+      'from mlflow import MlflowClient',
+      'os.environ["MLFLOW_TRACKING_URI"] = "path/to/mlflow"',
+      'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
+      'Creating a model',
+      'client = MlflowClient()',
+      "model_name = '<your_model_name>'",
+      "description = 'Model description'",
+      'model = client.create_registered_model(model_name, description=description)',
+      'Creating a model version',
+      'tags = { "gitlab.version": version }',
+      'model_version = client.create_model_version(model_name, version, tags=tags)',
+      'Logging artifacts',
+      'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
+    ];
+
+    expectedLines.forEach((line) => expect(text).toContain(line));
+  });
+});

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

 import { GlEmptyState, GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import EmptyState from '~/ml/model_registry/components/model_list_empty_state.vue';
-import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import { MLFLOW_USAGE_MODAL_ID } from '~/ml/model_registry/constants';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 
 let wrapper;
 const createWrapper = () => {
   wrapper = shallowMount(EmptyState, {
-    provide: { mlflowTrackingUrl: 'path/to/mlflow', createModelPath: '/path/to/create' },
+    provide: { mlflowTrackingUrl: 'path/to/mlflow' },
+    directives: {
+      GlModal: createMockDirective('gl-modal'),
+    },
   });
 };
 
 const findEmptyState = () => wrapper.findComponent(GlEmptyState);
-const findCopyButton = () => wrapper.findComponent(ClipboardButton);
 const findCreateButton = () => wrapper.findComponent(GlButton);
 const findDocsButton = () => wrapper.findAllComponents(GlButton).at(1);
 
-const mlflowCmd = [
-  'import os',
-  'from mlflow import MlflowClient',
-  '',
-  'os.environ["MLFLOW_TRACKING_URI"] = "path/to/mlflow"',
-  'os.environ["MLFLOW_TRACKING_TOKEN"] = <your_gitlab_token>',
-  '',
-  '# Create a model',
-  'client = MlflowClient()',
-  "model_name = '<your_model_name>'",
-  "description = 'Model description'",
-  'model = client.create_registered_model(model_name, description=description)',
-  '',
-  '# Create a version',
-  'tags = { "gitlab.version": version }',
-  'model_version = client.create_model_version(model_name, version, tags=tags)',
-  '',
-  '# Log artifacts',
-  'client.log_artifact(run_id, \'<local/path/to/file.txt>\', artifact_path="")',
-].join('\n');
-
 describe('ml/model_registry/components/model_list_empty_state.vue', () => {
   beforeEach(() => {
     createWrapper();
   });
 
-  describe('when entity type is model', () => {
-    it('shows the correct empty state', () => {
-      expect(findEmptyState().props()).toMatchObject({
-        title: 'No models registered',
-        svgPath: 'file-mock',
-      });
-
-      expect(findEmptyState().text()).toContain(
-        'Import your machine learning using GitLab directly or using the MLflow client:',
-      );
-      expect(findEmptyState().text()).toContain(mlflowCmd);
-    });
-
-    it('creates the copy text button', () => {
-      expect(findCopyButton().props('text')).toBe(mlflowCmd);
+  it('renders empty state', () => {
+    expect(findEmptyState().props()).toMatchObject({
+      title: 'Import your machine learning models',
+      svgPath: 'file-mock',
+      description: 'Create your machine learning using GitLab directly or using the MLflow client',
     });
+  });
 
-    it('creates button to open model creation', () => {
-      expect(findCreateButton().text()).toBe('Create model');
-    });
+  it('creates button to open model creation', () => {
+    expect(findCreateButton().text()).toBe('Create model');
+  });
 
-    it('clicking creates triggers open-create-model', async () => {
-      await findCreateButton().vm.$emit('click');
+  it('clicking creates triggers open-create-model', async () => {
+    await findCreateButton().vm.$emit('click');
 
-      expect(wrapper.emitted('open-create-model')).toHaveLength(1);
-    });
+    expect(wrapper.emitted('open-create-model')).toHaveLength(1);
+  });
 
-    it('creates button to docs', () => {
-      expect(findDocsButton().text()).toBe('MLflow compatibility');
-      expect(findDocsButton().attributes('href')).toBe(
-        '/help/user/project/ml/model_registry/index#creating-machine-learning-models-and-model-versions',
-      );
-    });
+  it('creates button to docs', () => {
+    expect(findDocsButton().text()).toBe('Create model with MLflow');
+    expect(getBinding(findDocsButton().element, 'gl-modal').value).toBe(MLFLOW_USAGE_MODAL_ID);
   });
 });