Fix epic date changes without user input

Changelog: fixed

app/assets/javascripts/sidebar/components/date/sidebar_date_widget.vue

@@ -124,6 +124,9 @@ export default {
     isLoading() {
       return this.$apollo.queries.issuable.loading || this.loading;
     },
+    initialLoading() {
+      return this.$apollo.queries.issuable.loading;
+    },
     hasDate() {
       return this.dateValue !== null;
     },
@@ -271,10 +274,10 @@ export default {
         <span class="collapse-truncated-title">{{ formattedDate }}</span>
       </div>
       <sidebar-inherit-date
-        v-if="canInherit"
+        v-if="canInherit && !initialLoading"
         :issuable="issuable"
-        :is-loading="isLoading"
         :date-type="dateType"
+        :is-loading="isLoading"
         @reset-date="setDate(null)"
         @set-date="setFixedDate"
       />

app/assets/javascripts/sidebar/components/date/sidebar_inherit_date.vue

@@ -17,8 +17,9 @@ export default {
       type: Object,
     },
     isLoading: {
-      required: true,
+      required: false,
       type: Boolean,
+      default: false,
     },
     dateType: {
       type: String,
@@ -31,6 +32,7 @@ export default {
         return this.issuable?.[dateFields[this.dateType].isDateFixed] || false;
       },
       set(fixed) {
+        if (fixed === this.issuable[dateFields[this.dateType].isDateFixed]) return;
         this.$emit('set-date', fixed);
       },
     },

spec/frontend/sidebar/components/date/sidebar_date_widget_spec.js

@@ -145,13 +145,20 @@ describe('Sidebar date Widget', () => {
     ${false}   | ${SidebarInheritDate}   | ${'SidebarInheritDate'}   | ${false}
   `(
     'when canInherit is $canInherit, $componentName display is $expected',
-    ({ canInherit, component, expected }) => {
+    async ({ canInherit, component, expected }) => {
       createComponent({ canInherit });
+      await waitForPromises();
 
       expect(wrapper.find(component).exists()).toBe(expected);
     },
   );
 
+  it('does not render SidebarInheritDate when canInherit is true and date is loading', async () => {
+    createComponent({ canInherit: true });
+
+    expect(wrapper.find(SidebarInheritDate).exists()).toBe(false);
+  });
+
   it('displays a flash message when query is rejected', async () => {
     createComponent({
       dueDateQueryHandler: jest.fn().mockRejectedValue('Houston, we have a problem'),

spec/frontend/sidebar/components/date/sidebar_inherit_date_spec.js

@@ -10,7 +10,7 @@ describe('SidebarInheritDate', () => {
   const findFixedRadio = () => wrapper.findAll(GlFormRadio).at(0);
   const findInheritRadio = () => wrapper.findAll(GlFormRadio).at(1);
 
-  const createComponent = () => {
+  const createComponent = ({ dueDateIsFixed = false } = {}) => {
     wrapper = shallowMount(SidebarInheritDate, {
       provide: {
         canUpdate: true,
@@ -18,11 +18,10 @@ describe('SidebarInheritDate', () => {
       propsData: {
         issuable: {
           dueDate: '2021-04-15',
-          dueDateIsFixed: true,
+          dueDateIsFixed,
           dueDateFixed: '2021-04-15',
           dueDateFromMilestones: '2021-05-15',
         },
-        isLoading: false,
         dateType: 'dueDate',
       },
     });
@@ -45,6 +44,13 @@ describe('SidebarInheritDate', () => {
     expect(findInheritRadio().text()).toBe('Inherited:');
   });
 
+  it('does not emit set-date if fixed value does not change', () => {
+    createComponent({ dueDateIsFixed: true });
+    findFixedRadio().vm.$emit('input', true);
+
+    expect(wrapper.emitted('set-date')).toBeUndefined();
+  });
+
   it('emits set-date event on click on radio button', () => {
     findFixedRadio().vm.$emit('input', true);