Address reviewer feedback

Add more coverage for issue_field.

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

@@ -13,8 +13,18 @@ export default {
     IssueFieldDropdown,
     SidebarEditableItem,
   },
+  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: {
-    canEdit: {
+    // In this context, `canEditField` means: "can a user edit this specific field?"
+    canEditField: {
       type: Boolean,
       required: false,
       default: false,
@@ -99,7 +109,7 @@ export default {
       ref="editableItem"
       :loading="updating"
       :title="title"
-      :can-edit="canEdit"
+      :can-edit="canEditField"
       @open="showDropdown"
     >
       <template #collapsed>
@@ -121,7 +131,7 @@ export default {
 
       <template #default>
         <issue-field-dropdown
-          v-if="canEdit"
+          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-edit="canUpdateStatus"
+      :can-edit-field="canUpdateStatus"
       :dropdown-title="$options.i18n.statusDropdownTitle"
       :dropdown-empty="$options.i18n.statusDropdownEmpty"
       :items="statuses"

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(),
@@ -26,6 +26,7 @@ describe('IssueField', () => {
       },
       provide: {
         canUpdate: true,
+        ...provide,
       },
     });
   };
@@ -40,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(() => {
@@ -97,24 +99,45 @@ describe('IssueField', () => {
     });
   });
 
-  describe('with canEdit = true', () => {
-    beforeEach(() => {
-      createComponent({
-        props: { canEdit: 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);
+          });
+        });
+      }
+    },
+  );
 });