Merge branch '239838-cleanup-issuable-scss-open-closed-classes' into 'master'

Cleanup suggested issuables icon classes

See merge request gitlab-org/gitlab!72129

app/assets/javascripts/issuable_suggestions/components/item.vue

 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
 import { GlLink, GlTooltip, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 import { uniqueId } from 'lodash';
 import { __ } from '~/locale';
@@ -26,12 +25,6 @@ export default {
     },
   },
   computed: {
-    isOpen() {
-      return this.suggestion.state === 'opened';
-    },
-    isClosed() {
-      return this.suggestion.state === 'closed';
-    },
     counts() {
       return [
         {
@@ -48,7 +41,13 @@ export default {
         },
       ].filter(({ count }) => count);
     },
-    stateIcon() {
+    isClosed() {
+      return this.suggestion.state === 'closed';
+    },
+    stateIconClass() {
+      return this.isClosed ? 'gl-text-blue-500' : 'gl-text-green-500';
+    },
+    stateIconName() {
       return this.isClosed ? 'issue-close' : 'issue-open-m';
     },
     stateTitle() {
@@ -72,7 +71,7 @@ export default {
         v-gl-tooltip.bottom
         :title="__('Confidential')"
         name="eye-slash"
-        class="suggestion-help-hover mr-1 suggestion-confidential"
+        class="gl-cursor-help gl-mr-2 gl-text-orange-500"
       />
       <gl-link
         :href="suggestion.webUrl"
@@ -83,15 +82,7 @@ export default {
       </gl-link>
     </div>
     <div class="text-secondary suggestion-footer">
-      <gl-icon
-        ref="state"
-        :name="stateIcon"
-        :class="{
-          'suggestion-state-open': isOpen,
-          'suggestion-state-closed': isClosed,
-        }"
-        class="suggestion-help-hover"
-      />
+      <gl-icon ref="state" :name="stateIconName" :class="stateIconClass" class="gl-cursor-help" />
       <gl-tooltip :target="() => $refs.state" placement="bottom">
         <span class="d-block">
           <span class="bold"> {{ stateTitle }} </span> {{ timeFormatted(closedOrCreatedDate) }}
@@ -102,9 +93,9 @@ export default {
       <timeago-tooltip
         :time="suggestion.createdAt"
         tooltip-placement="bottom"
-        class="suggestion-help-hover"
+        class="gl-cursor-help"
       />
-      by
+      {{ __('by') }}
       <gl-link :href="suggestion.author.webUrl">
         <user-avatar-image
           :img-src="suggestion.author.avatarUrl"
@@ -122,7 +113,7 @@ export default {
         <timeago-tooltip
           :time="suggestion.updatedAt"
           tooltip-placement="bottom"
-          class="suggestion-help-hover"
+          class="gl-cursor-help"
         />
       </template>
       <span class="suggestion-counts">
@@ -131,7 +122,7 @@ export default {
           :key="id"
           v-gl-tooltip.bottom
           :title="tooltipTitle"
-          class="suggestion-help-hover gl-ml-3 text-tertiary"
+          class="gl-cursor-help gl-ml-3 text-tertiary"
         >
           <gl-icon :name="icon" /> {{ count }}
         </span>

app/assets/stylesheets/pages/issuable.scss

@@ -877,18 +877,6 @@
   vertical-align: sub;
 }
 
-.suggestion-confidential {
-  color: $orange-500;
-}
-
-.suggestion-state-open {
-  color: $green-500;
-}
-
-.suggestion-state-closed {
-  color: $blue-500;
-}
-
 .suggestion-help-hover {
   cursor: help;
 }

spec/frontend/issuable_suggestions/components/item_spec.js

@@ -6,10 +6,10 @@ import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_ima
 import mockData from '../mock_data';
 
 describe('Issuable suggestions suggestion component', () => {
-  let vm;
+  let wrapper;
 
   function createComponent(suggestion = {}) {
-    vm = shallowMount(Suggestion, {
+    wrapper = shallowMount(Suggestion, {
       propsData: {
         suggestion: {
           ...mockData(),
@@ -19,37 +19,40 @@ describe('Issuable suggestions suggestion component', () => {
     });
   }
 
+  const findLink = () => wrapper.findComponent(GlLink);
+  const findAuthorLink = () => wrapper.findAll(GlLink).at(1);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findTooltip = () => wrapper.findComponent(GlTooltip);
+  const findUserAvatar = () => wrapper.findComponent(UserAvatarImage);
+
   afterEach(() => {
-    vm.destroy();
+    wrapper.destroy();
   });
 
   it('renders title', () => {
     createComponent();
 
-    expect(vm.text()).toContain('Test issue');
+    expect(wrapper.text()).toContain('Test issue');
   });
 
   it('renders issue link', () => {
     createComponent();
 
-    const link = vm.find(GlLink);
-
-    expect(link.attributes('href')).toBe(`${TEST_HOST}/test/issue/1`);
+    expect(findLink().attributes('href')).toBe(`${TEST_HOST}/test/issue/1`);
   });
 
   it('renders IID', () => {
     createComponent();
 
-    expect(vm.text()).toContain('#1');
+    expect(wrapper.text()).toContain('#1');
   });
 
   describe('opened state', () => {
     it('renders icon', () => {
       createComponent();
 
-      const icon = vm.find(GlIcon);
-
-      expect(icon.props('name')).toBe('issue-open-m');
+      expect(findIcon().props('name')).toBe('issue-open-m');
+      expect(findIcon().attributes('class')).toMatch('gl-text-green-500');
     });
 
     it('renders created timeago', () => {
@@ -57,10 +60,8 @@ describe('Issuable suggestions suggestion component', () => {
         closedAt: '',
       });
 
-      const tooltip = vm.find(GlTooltip);
-
-      expect(tooltip.find('.d-block').text()).toContain('Opened');
-      expect(tooltip.text()).toContain('3 days ago');
+      expect(findTooltip().text()).toContain('Opened');
+      expect(findTooltip().text()).toContain('3 days ago');
     });
   });
 
@@ -70,18 +71,15 @@ describe('Issuable suggestions suggestion component', () => {
         state: 'closed',
       });
 
-      const icon = vm.find(GlIcon);
-
-      expect(icon.props('name')).toBe('issue-close');
+      expect(findIcon().props('name')).toBe('issue-close');
+      expect(findIcon().attributes('class')).toMatch('gl-text-blue-500');
     });
 
     it('renders closed timeago', () => {
       createComponent();
 
-      const tooltip = vm.find(GlTooltip);
-
-      expect(tooltip.find('.d-block').text()).toContain('Opened');
-      expect(tooltip.text()).toContain('1 day ago');
+      expect(findTooltip().text()).toContain('Opened');
+      expect(findTooltip().text()).toContain('1 day ago');
     });
   });
 
@@ -89,18 +87,14 @@ describe('Issuable suggestions suggestion component', () => {
     it('renders author info', () => {
       createComponent();
 
-      const link = vm.findAll(GlLink).at(1);
-
-      expect(link.text()).toContain('Author Name');
-      expect(link.text()).toContain('@author.username');
+      expect(findAuthorLink().text()).toContain('Author Name');
+      expect(findAuthorLink().text()).toContain('@author.username');
     });
 
     it('renders author image', () => {
       createComponent();
 
-      const image = vm.find(UserAvatarImage);
-
-      expect(image.props('imgSrc')).toBe(`${TEST_HOST}/avatar`);
+      expect(findUserAvatar().props('imgSrc')).toBe(`${TEST_HOST}/avatar`);
     });
   });
 
@@ -108,7 +102,7 @@ describe('Issuable suggestions suggestion component', () => {
     it('renders upvotes count', () => {
       createComponent();
 
-      const count = vm.findAll('.suggestion-counts span').at(0);
+      const count = wrapper.findAll('.suggestion-counts span').at(0);
 
       expect(count.text()).toContain('1');
       expect(count.find(GlIcon).props('name')).toBe('thumb-up');
@@ -117,7 +111,7 @@ describe('Issuable suggestions suggestion component', () => {
     it('renders notes count', () => {
       createComponent();
 
-      const count = vm.findAll('.suggestion-counts span').at(1);
+      const count = wrapper.findAll('.suggestion-counts span').at(1);
 
       expect(count.text()).toContain('2');
       expect(count.find(GlIcon).props('name')).toBe('comment');
@@ -130,10 +124,9 @@ describe('Issuable suggestions suggestion component', () => {
         confidential: true,
       });
 
-      const icon = vm.find(GlIcon);
-
-      expect(icon.props('name')).toBe('eye-slash');
-      expect(icon.attributes('title')).toBe('Confidential');
+      expect(findIcon().props('name')).toBe('eye-slash');
+      expect(findIcon().attributes('class')).toMatch('gl-text-orange-500');
+      expect(findIcon().attributes('title')).toBe('Confidential');
     });
   });
 });