Merge branch 'tomquirk/343620-make-jira-issues-unediablte' into 'master'

Fix `canUpdate` console error on external issues

See merge request gitlab-org/gitlab!72950

ee/app/assets/javascripts/external_issues_show/components/sidebar/issue_field.vue

@@ -13,14 +13,18 @@ export default {
     IssueFieldDropdown,
     SidebarEditableItem,
   },
-  provide() {
-    return {
-      isClassicSidebar: true,
-      canUpdate: this.canUpdate,
-    };
+  inject: {
+    // In this context, `canUpdate` means: "can a user update any part of the sidebar?"
+    // `canUpdate` is also injected into `sidebar-editable-item`. Here, it's used, in
+    // conjunction with with its `canEdit` prop, to conditionally display the
+    // "edit" button.
+    canUpdate: {
+      default: false,
+    },
   },
   props: {
-    canUpdate: {
+    // In this context, `canEditField` means: "can a user edit this specific field?"
+    canEditField: {
       type: Boolean,
       required: false,
       default: false,
@@ -105,6 +109,7 @@ export default {
       ref="editableItem"
       :loading="updating"
       :title="title"
+      :can-edit="canEditField"
       @open="showDropdown"
     >
       <template #collapsed>
@@ -126,7 +131,7 @@ export default {
 
       <template #default>
         <issue-field-dropdown
-          v-if="canUpdate"
+          v-if="canEditField && canUpdate"
           ref="dropdown"
           :empty-text="dropdownEmpty"
           :items="items"

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

@@ -136,7 +136,7 @@ export default {
     <issue-due-date :due-date="issue.dueDate" />
     <issue-field
       icon="progress"
-      :can-update="canUpdateStatus"
+      :can-edit-field="canUpdateStatus"
       :dropdown-title="$options.i18n.statusDropdownTitle"
       :dropdown-empty="$options.i18n.statusDropdownEmpty"
       :items="statuses"

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

@@ -17,6 +17,8 @@ export default function initJiraIssueShow({ mountPointSelector }) {
       issueLabelsPath,
       issuesShowPath,
       issuesListPath,
+      isClassicSidebar: true,
+      canUpdate: false,
     },
     render: (createElement) => createElement(JiraIssuesShowApp),
   });

ee/app/assets/javascripts/integrations/zentao/issues_show/zentao_issues_show_bundle.js

@@ -16,6 +16,8 @@ export default function initZentaoIssueShow({ mountPointSelector }) {
     provide: {
       issuesShowPath,
       issuesListPath,
+      isClassicSidebar: true,
+      canUpdate: false,
     },
     render: (createElement) => createElement(ZentaoIssuesShowApp),
   });

ee/spec/frontend/external_issues_show/components/sidebar/issue_field_spec.js

@@ -15,7 +15,7 @@ describe('IssueField', () => {
     title: 'Field Title',
   };
 
-  const createComponent = ({ props = {} } = {}) => {
+  const createComponent = ({ props = {}, provide = {} } = {}) => {
     wrapper = shallowMountExtended(IssueField, {
       directives: {
         GlTooltip: createMockDirective(),
@@ -24,6 +24,10 @@ describe('IssueField', () => {
       stubs: {
         SidebarEditableItem,
       },
+      provide: {
+        canUpdate: true,
+        ...provide,
+      },
     });
   };
 
@@ -37,6 +41,7 @@ describe('IssueField', () => {
   const findFieldCollapsedTooltip = () => getBinding(findFieldCollapsed().element, 'gl-tooltip');
   const findFieldValue = () => wrapper.findByTestId('field-value');
   const findGlIcon = () => wrapper.findComponent(GlIcon);
+  const findEditableItemDropdown = () => wrapper.findComponent({ ref: 'dropdown' });
 
   describe('template', () => {
     beforeEach(() => {
@@ -94,24 +99,45 @@ describe('IssueField', () => {
     });
   });
 
-  describe('with canUpdate = true', () => {
-    beforeEach(() => {
-      createComponent({
-        props: { canUpdate: true },
+  describe.each`
+    canUpdate | canEditField | expectEditButton
+    ${false}  | ${false}     | ${false}
+    ${false}  | ${true}      | ${false}
+    ${true}   | ${false}     | ${false}
+    ${true}   | ${true}      | ${true}
+  `(
+    'when `canUpdate` is `$canUpdate` and `canEditField` is `$canEditField`',
+    ({ canUpdate, canEditField, expectEditButton }) => {
+      beforeEach(() => {
+        createComponent({
+          props: { canEditField },
+          provide: {
+            canUpdate,
+          },
+        });
       });
-    });
-
-    it('renders "Edit" button', () => {
-      expect(findEditButton().text()).toBe('Edit');
-    });
 
-    it('emits "issue-field-fetch" when dropdown is opened', () => {
-      wrapper.vm.$refs.dropdown.showDropdown = jest.fn();
+      it('renders "Edit" button correctly', () => {
+        expect(findEditButton().exists()).toBe(expectEditButton);
+      });
 
-      findEditableItem().vm.$emit('open');
+      it('renders dropdown in sidebar-editable-item', () => {
+        expect(findEditableItemDropdown().exists()).toBe(expectEditButton);
+      });
 
-      expect(wrapper.vm.$refs.dropdown.showDropdown).toHaveBeenCalled();
-      expect(wrapper.emitted('issue-field-fetch')).toHaveLength(1);
-    });
-  });
+      if (expectEditButton) {
+        describe('when sidebar-editable-item emits "open" event', () => {
+          it('emits "issue-field-fetch" event', () => {
+            const dropdown = findEditableItemDropdown();
+            dropdown.vm.showDropdown = jest.fn();
+
+            findEditableItem().vm.$emit('open');
+
+            expect(dropdown.vm.showDropdown).toHaveBeenCalled();
+            expect(wrapper.emitted('issue-field-fetch')).toHaveLength(1);
+          });
+        });
+      }
+    },
+  );
 });