Merge branch '322755-fix-small-issues' into 'master'

Fix and improve minor issues in issues page refactor

See merge request gitlab-org/gitlab!68065

app/assets/javascripts/issuable_list/components/issuable_item.vue

@@ -205,7 +205,7 @@ export default {
             >{{ issuableSymbol }}{{ issuable.iid }}</span
           >
           <span class="issuable-authored gl-display-none gl-sm-display-inline-block! gl-mr-3">
-            &middot;
+            <span aria-hidden="true">&middot;</span>
             <span
               v-gl-tooltip:tooltipcontainer.bottom
               data-testid="issuable-created-at"
@@ -229,17 +229,19 @@ export default {
           </span>
           <slot name="timeframe"></slot>
           &nbsp;
-          <gl-label
-            v-for="(label, index) in labels"
-            :key="index"
-            :background-color="label.color"
-            :title="labelTitle(label)"
-            :description="label.description"
-            :scoped="scopedLabel(label)"
-            :target="labelTarget(label)"
-            :class="{ 'gl-ml-2': index }"
-            size="sm"
-          />
+          <span v-if="labels.length" role="group" :aria-label="__('Labels')">
+            <gl-label
+              v-for="(label, index) in labels"
+              :key="index"
+              :background-color="label.color"
+              :title="labelTitle(label)"
+              :description="label.description"
+              :scoped="scopedLabel(label)"
+              :target="labelTarget(label)"
+              :class="{ 'gl-ml-2': index }"
+              size="sm"
+            />
+          </span>
         </div>
       </div>
       <div class="issuable-meta">

app/assets/javascripts/issues_list/components/issues_list_app.vue

@@ -9,6 +9,7 @@ import {
   GlTooltipDirective,
 } from '@gitlab/ui';
 import fuzzaldrinPlus from 'fuzzaldrin-plus';
+import { cloneDeep } from 'lodash';
 import getIssuesQuery from 'ee_else_ce/issues_list/queries/get_issues.query.graphql';
 import createFlash from '~/flash';
 import { TYPE_USER } from '~/graphql_shared/constants';
@@ -163,14 +164,17 @@ export default {
     },
   },
   data() {
+    const filterTokens = getFilterTokens(window.location.search);
     const state = getParameterByName(PARAM_STATE);
     const sortKey = getSortKey(getParameterByName(PARAM_SORT));
     const defaultSortKey = state === IssuableStates.Closed ? UPDATED_DESC : CREATED_DESC;
 
+    this.initialFilterTokens = cloneDeep(filterTokens);
+
     return {
       dueDateFilter: getDueDateValue(getParameterByName(PARAM_DUE_DATE)),
       exportCsvPathWithQuery: this.getExportCsvPathWithQuery(),
-      filterTokens: getFilterTokens(window.location.search),
+      filterTokens,
       issues: [],
       pageInfo: {},
       pageParams: getInitialPageParams(sortKey),
@@ -609,7 +613,7 @@ export default {
       recent-searches-storage-key="issues"
       :search-input-placeholder="$options.i18n.searchPlaceholder"
       :search-tokens="searchTokens"
-      :initial-filter-value="filterTokens"
+      :initial-filter-value="initialFilterTokens"
       :sort-options="sortOptions"
       :initial-sort-by="sortKey"
       :issuables="issues"

app/assets/javascripts/vue_shared/components/filtered_search_bar/tokens/epic_token.vue

@@ -99,7 +99,7 @@ export default {
       // We don't have any information about selected token except for its
       // group path and iid joined by separator, so we need to manually
       // compose epic path from it.
-      if (data.includes(this.$options.separator)) {
+      if (data.includes?.(this.$options.separator)) {
         const [groupPath, epicIid] = data.split(this.$options.separator);
         epicPath = `/groups/${groupPath}/-/epics/${epicIid}`;
       }

app/helpers/issues_helper.rb

@@ -207,7 +207,7 @@ module IssuesHelper
       initial_email: project.new_issuable_address(current_user, 'issue'),
       is_signed_in: current_user.present?.to_s,
       issues_path: project_issues_path(project),
-      jira_integration_path: help_page_url('integration/jira/', anchor: 'view-jira-issues'),
+      jira_integration_path: help_page_url('integration/jira/issues', anchor: 'view-jira-issues'),
       markdown_help_path: help_page_path('user/markdown'),
       max_attachment_size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes),
       new_issue_path: new_project_issue_path(project, issue: { milestone_id: finder.milestones.first.try(:id) }),

ee/app/assets/javascripts/related_items_tree/components/issue_health_status.vue

 <script>
+import { GlTooltipDirective } from '@gitlab/ui';
 import { issueHealthStatus, issueHealthStatusCSSMapping } from '../constants';
 
 export default {
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     healthStatus: {
       type: String,
       required: true,
-      default: '',
     },
   },
   computed: {
-    getFormattedStatus() {
+    statusText() {
       return issueHealthStatus[this.healthStatus];
     },
-
-    cssMapping() {
+    statusClass() {
       return issueHealthStatusCSSMapping[this.healthStatus];
     },
   },
@@ -23,9 +25,9 @@ export default {
 
 <template>
   <div class="health-status">
-    <span class="gl-label gl-label-sm" :class="cssMapping">
-      <span class="gl-label-text">
-        {{ getFormattedStatus }}
+    <span class="gl-label gl-label-sm" :class="statusClass">
+      <span v-gl-tooltip class="gl-label-text" :title="__('Health status')">
+        {{ statusText }}
       </span>
     </span>
   </div>

ee/spec/frontend/related_items_tree/components/issue_health_status_spec.js

-import { shallowMount } from '@vue/test-utils';
-
 import IssueHealthStatus from 'ee/related_items_tree/components/issue_health_status.vue';
 import { issueHealthStatus, issueHealthStatusCSSMapping } from 'ee/related_items_tree/constants';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { mockIssue1 } from '../mock_data';
 
-const createComponent = () => {
+describe('IssueHealthStatus', () => {
   const { healthStatus } = mockIssue1;
+  let wrapper;
 
-  return shallowMount(IssueHealthStatus, {
-    propsData: {
-      healthStatus,
-    },
-  });
-};
+  const createComponent = () =>
+    shallowMountExtended(IssueHealthStatus, {
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+      propsData: {
+        healthStatus,
+      },
+    });
+
+  const findHealthStatus = () => wrapper.findByText(issueHealthStatus[healthStatus]);
 
-describe('IssueHealthStatus', () => {
-  let wrapper;
-  const { healthStatus } = mockIssue1;
   beforeEach(() => {
     wrapper = createComponent();
   });
@@ -25,15 +28,20 @@ describe('IssueHealthStatus', () => {
     wrapper.destroy();
   });
 
-  it('renders passed in healthStatus', () => {
+  it('renders health status text', () => {
     const expectedValue = issueHealthStatus[healthStatus];
 
     expect(wrapper.text()).toBe(expectedValue);
   });
 
-  it('applies correct class for passed in healthStatus', () => {
+  it('applies correct health status class', () => {
     const expectedValue = issueHealthStatusCSSMapping[healthStatus];
 
     expect(wrapper.find(`.${expectedValue}`)).toExist();
   });
+
+  it('contains health status tooltip', () => {
+    expect(getBinding(findHealthStatus().element, 'gl-tooltip')).not.toBeUndefined();
+    expect(findHealthStatus().attributes('title')).toBe('Health status');
+  });
 });

spec/helpers/issues_helper_spec.rb

@@ -319,7 +319,7 @@ RSpec.describe IssuesHelper do
         initial_email: project.new_issuable_address(current_user, 'issue'),
         is_signed_in: current_user.present?.to_s,
         issues_path: project_issues_path(project),
-        jira_integration_path: help_page_url('integration/jira/', anchor: 'view-jira-issues'),
+        jira_integration_path: help_page_url('integration/jira/issues', anchor: 'view-jira-issues'),
         markdown_help_path: help_page_path('user/markdown'),
         max_attachment_size: number_to_human_size(Gitlab::CurrentSettings.max_attachment_size.megabytes),
         new_issue_path: new_project_issue_path(project, issue: { milestone_id: finder.milestones.first.id }),