Merge branch 'lm-operations-dashboard-remove-button' into 'master'

fix: replace dropdown in project cards in Op Dashboard with icon

Closes #11716

See merge request gitlab-org/gitlab-ee!14419

ee/app/assets/javascripts/operations/components/dashboard/project_header.vue

@@ -2,6 +2,7 @@
 import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { GlButton, GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -30,6 +31,9 @@ export default {
     },
   },
   computed: {
+    title() {
+      return __('Remove card');
+    },
     headerClasses() {
       return {
         'dashboard-card-header-warning': this.hasErrors,
@@ -60,22 +64,13 @@ export default {
         <span class="js-project-name bold"> {{ project.name }}</span>
       </gl-link>
     </div>
-    <div class="dropdown js-more-actions">
-      <button
+    <gl-button
       v-gl-tooltip
-        class="js-more-actions-toggle d-flex align-items-center bg-transparent border-0 p-0 ml-2"
-        data-toggle="dropdown"
-        :title="__('More actions')"
+      class="js-remove-button bg-transparent border-0 p-0 text-secondary"
+      title="title"
+      @click="onRemove"
     >
-        <icon name="ellipsis_v" class="text-secondary" />
-      </button>
-      <ul class="dropdown-menu dropdown-menu-right">
-        <li>
-          <gl-button class="btn btn-transparent js-remove-button" @click="onRemove">
-            <span class="text-danger"> {{ __('Remove') }} </span>
+      <icon name="remove" />
     </gl-button>
-        </li>
-      </ul>
-    </div>
   </div>
 </template>

ee/changelogs/unreleased/lm-operations-dashboard-remove-button.yml

+---
+title: replace dropdown in project cards in Operations Dashboards with a remove icon
+merge_request: 14419
+author:
+type: fixed

ee/spec/javascripts/operations/components/dashboard/dashboard_spec.js

@@ -121,7 +121,7 @@ describe('dashboard component', () => {
           mockAxios.onDelete(projects[0].remove_path).reply(200);
           mockAxios.onGet(mockListEndpoint).replyOnce(200, { projects: [] });
 
-          wrapper.find('.js-remove-button').vm.$emit('click');
+          wrapper.find('button.js-remove-button').vm.$emit('click');
 
           timeoutPromise()
             .then(() => {

ee/spec/javascripts/operations/components/dashboard/project_header_spec.js

@@ -2,7 +2,7 @@ import { shallowMount, createLocalVue } from '@vue/test-utils';
 import ProjectHeader from 'ee/operations/components/dashboard/project_header.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
 import { removeWhitespace } from 'spec/helpers/text_helper';
-import { mockOneProject, mockText } from '../../mock_data';
+import { mockOneProject } from '../../mock_data';
 
 const localVue = createLocalVue();
 
@@ -41,6 +41,20 @@ describe('project header component', () => {
     expect(wrapper.find('.js-project-link').attributes('href')).toBe(path);
   });
 
+  describe('remove button', () => {
+    it('renders removal button icon', () => {
+      expect(wrapper.contains('.js-remove-button')).toBe(true);
+    });
+
+    it('emits project removal link on click', () => {
+      wrapper.find('.js-remove-button').vm.$emit('click');
+
+      expect(wrapper.emittedByOrder()).toEqual([
+        { name: 'remove', args: [mockOneProject.remove_path] },
+      ]);
+    });
+  });
+
   describe('wrapped components', () => {
     describe('project avatar', () => {
       it('renders', () => {
@@ -52,23 +66,4 @@ describe('project header component', () => {
       });
     });
   });
-
-  describe('dropdown menu', () => {
-    it('renders removal button', () => {
-      expect(
-        wrapper
-          .find('.js-remove-button')
-          .text()
-          .trim(),
-      ).toBe(mockText.REMOVE_PROJECT);
-    });
-
-    it('emits project removal link on click', () => {
-      wrapper.find('.js-remove-button').vm.$emit('click');
-
-      expect(wrapper.emittedByOrder()).toEqual([
-        { name: 'remove', args: [mockOneProject.remove_path] },
-      ]);
-    });
-  });
 });

ee/spec/javascripts/operations/mock_data.js

@@ -10,7 +10,6 @@ export const mockText = {
   EMPTY_SUBTITLE:
     "The operations dashboard provides a summary of each project's operational health, including pipeline and alert statuses. More information",
   EMPTY_SVG_SOURCE: '/assets/illustrations/operations-dashboard_empty.svg',
-  REMOVE_PROJECT: 'Remove',
   SEARCH_PROJECTS: 'Search your projects',
   SEARCH_DESCRIPTION_SUFFIX: 'in projects',
 };

locale/gitlab.pot

@@ -8906,9 +8906,6 @@ msgstr ""
 msgid "More Information"
 msgstr ""
 
-msgid "More actions"
-msgstr ""
-
 msgid "More info"
 msgstr ""
 
@@ -11510,6 +11507,9 @@ msgstr ""
 msgid "Remove avatar"
 msgstr ""
 
+msgid "Remove card"
+msgstr ""
+
 msgid "Remove child epic from an epic"
 msgstr ""