Merge branch...

Merge branch '322455-fix-sidebar-issue-labels-not-linking-properly-on-jira-issue-details-page' into 'master'

Fix sidebar issue labels not linking properly on Jira issue details page

See merge request gitlab-org/gitlab!54829

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue

@@ -21,11 +21,14 @@ export default {
       'allowLabelRemove',
       'allowScopedLabels',
       'labelsFilterBasePath',
+      'labelsFilterParam',
     ]),
   },
   methods: {
     labelFilterUrl(label) {
-      return `${this.labelsFilterBasePath}?label_name[]=${encodeURIComponent(label.title)}`;
+      return `${this.labelsFilterBasePath}?${this.labelsFilterParam}[]=${encodeURIComponent(
+        label.title,
+      )}`;
     },
     scopedLabel(label) {
       return this.allowScopedLabels && isScopedLabel(label);

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue

@@ -81,6 +81,11 @@ export default {
       required: false,
       default: '',
     },
+    labelsFilterParam: {
+      type: String,
+      required: false,
+      default: 'label_name',
+    },
     dropdownButtonText: {
       type: String,
       required: false,
@@ -156,6 +161,7 @@ export default {
       labelsFetchPath: this.labelsFetchPath,
       labelsManagePath: this.labelsManagePath,
       labelsFilterBasePath: this.labelsFilterBasePath,
+      labelsFilterParam: this.labelsFilterParam,
       labelsListTitle: this.labelsListTitle,
       labelsCreateTitle: this.labelsCreateTitle,
       footerCreateLabelTitle: this.footerCreateLabelTitle,

ee/app/assets/javascripts/integrations/jira/issues_show/components/sidebar/jira_issues_sidebar_root.vue

 <script>
+import { labelsFilterParam } from 'ee/integrations/jira/issues_show/constants';
+
 import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue';
 import Assignee from './assignee.vue';
 import IssueReference from './issue_reference.vue';
@@ -10,6 +12,11 @@ export default {
     IssueReference,
     LabelsSelect,
   },
+  inject: {
+    issuesListPath: {
+      default: null,
+    },
+  },
   props: {
     sidebarExpanded: {
       type: Boolean,
@@ -29,6 +36,7 @@ export default {
       return this.issue?.references?.relative;
     },
   },
+  labelsFilterParam,
 };
 </script>
 
@@ -38,6 +46,8 @@ export default {
 
     <labels-select
       :selected-labels="issue.labels"
+      :labels-filter-base-path="issuesListPath"
+      :labels-filter-param="$options.labelsFilterParam"
       variant="sidebar"
       class="block labels js-labels-block"
     >

ee/app/assets/javascripts/integrations/jira/issues_show/constants.js

@@ -9,3 +9,5 @@ export const issueStateLabels = {
   [issueStates.OPENED]: __('Open'),
   [issueStates.CLOSED]: __('Closed'),
 };
+
+export const labelsFilterParam = 'labels';

ee/app/assets/javascripts/integrations/jira/issues_show/jira_issues_show_bundle.js

@@ -9,12 +9,13 @@ export default function initJiraIssueShow({ mountPointSelector }) {
     return null;
   }
 
-  const { issuesShowPath } = mountPointEl.dataset;
+  const { issuesShowPath, issuesListPath } = mountPointEl.dataset;
 
   return new Vue({
     el: mountPointEl,
     provide: {
       issuesShowPath,
+      issuesListPath,
     },
     render: (createElement) => createElement(JiraIssuesShowApp),
   });

ee/app/helpers/ee/services_helper.rb

@@ -53,7 +53,8 @@ module EE
 
     def jira_issues_show_data
       {
-        issues_show_path: project_integrations_jira_issue_path(@project, params[:id], format: :json)
+        issues_show_path: project_integrations_jira_issue_path(@project, params[:id], format: :json),
+        issues_list_path: project_integrations_jira_issues_path(@project)
       }
     end
   end

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_spec.js

@@ -11,32 +11,31 @@ import { mockConfig, mockRegularLabel, mockScopedLabel } from './mock_data';
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-const createComponent = (initialState = mockConfig, slots = {}) => {
-  const store = new Vuex.Store(labelsSelectModule());
-
-  store.dispatch('setInitialState', initialState);
-
-  return shallowMount(DropdownValue, {
-    localVue,
-    store,
-    slots,
-  });
-};
-
 describe('DropdownValue', () => {
   let wrapper;
 
-  beforeEach(() => {
-    wrapper = createComponent();
-  });
+  const createComponent = (initialState = {}, slots = {}) => {
+    const store = new Vuex.Store(labelsSelectModule());
+
+    store.dispatch('setInitialState', { ...mockConfig, ...initialState });
+
+    wrapper = shallowMount(DropdownValue, {
+      localVue,
+      store,
+      slots,
+    });
+  };
 
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   describe('methods', () => {
     describe('labelFilterUrl', () => {
       it('returns a label filter URL based on provided label param', () => {
+        createComponent();
+
         expect(wrapper.vm.labelFilterUrl(mockRegularLabel)).toBe(
           '/gitlab-org/my-project/issues?label_name[]=Foo%20Label',
         );
@@ -44,6 +43,10 @@ describe('DropdownValue', () => {
     });
 
     describe('scopedLabel', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
       it('returns `true` when provided label param is a scoped label', () => {
         expect(wrapper.vm.scopedLabel(mockScopedLabel)).toBe(true);
       });
@@ -56,28 +59,29 @@ describe('DropdownValue', () => {
 
   describe('template', () => {
     it('renders class `has-labels` on component container element when `selectedLabels` is not empty', () => {
+      createComponent();
+
       expect(wrapper.attributes('class')).toContain('has-labels');
     });
 
     it('renders element containing `None` when `selectedLabels` is empty', () => {
-      const wrapperNoLabels = createComponent(
+      createComponent(
         {
-          ...mockConfig,
           selectedLabels: [],
         },
         {
           default: 'None',
         },
       );
-      const noneEl = wrapperNoLabels.find('span.text-secondary');
+      const noneEl = wrapper.find('span.text-secondary');
 
       expect(noneEl.exists()).toBe(true);
       expect(noneEl.text()).toBe('None');
-
-      wrapperNoLabels.destroy();
     });
 
     it('renders labels when `selectedLabels` is not empty', () => {
+      createComponent();
+
       expect(wrapper.findAll(GlLabel).length).toBe(2);
     });
   });

spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js

@@ -47,6 +47,7 @@ export const mockConfig = {
   labelsFetchPath: '/gitlab-org/my-project/-/labels.json',
   labelsManagePath: '/gitlab-org/my-project/-/labels',
   labelsFilterBasePath: '/gitlab-org/my-project/issues',
+  labelsFilterParam: 'label_name',
 };
 
 export const mockSuggestedColors = {