Scheduler: Appointment Form — fix 'Save' button visibility in recurrence form for disabled appointment (#31923)

Author: sjbur

e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/scheduler__appointment__recurrence-form__readonly (fluent.blue.light).png

@@ -3,6 +3,7 @@ import {
 } from '@jest/globals';
 import $ from '@js/core/renderer';
 import type { GroupItem, Item as FormItem } from '@js/ui/form';
+import type { ToolbarItem } from '@js/ui/popup';
 import { toMilliseconds } from '@ts/utils/toMilliseconds';
 
 import fx from '../../../common/core/animation/fx';
@@ -1957,44 +1958,6 @@ describe('Appointment Popup', () => {
   });
 
   describe('Toolbar', () => {
-    const toolbarWithSaveButton = [
-      {
-        toolbar: 'top',
-        location: 'before',
-        cssClass: 'dx-toolbar-label',
-      },
-      {
-        toolbar: 'top',
-        location: 'after',
-        options: {
-          onClick: expect.any(Function),
-          stylingMode: 'contained',
-          type: 'default',
-          text: 'Save',
-        },
-        shortcut: 'done',
-      },
-      {
-        toolbar: 'top',
-        location: 'after',
-        shortcut: 'cancel',
-        options: { stylingMode: 'outlined' },
-      },
-    ];
-    const toolbarWithCancelButton = [
-      {
-        toolbar: 'top',
-        location: 'before',
-        cssClass: 'dx-toolbar-label',
-      },
-      {
-        toolbar: 'top',
-        location: 'after',
-        shortcut: 'cancel',
-        options: { stylingMode: 'outlined' },
-      },
-    ];
-
     describe('Popup Title', () => {
       it('should display "New Appointment" when creating new appointment', async () => {
         const { scheduler, POM } = await createScheduler({
@@ -2032,7 +1995,47 @@ describe('Appointment Popup', () => {
       { allowUpdating: false, disabled: true },
       { allowUpdating: true, disabled: false },
       { allowUpdating: true, disabled: true },
-    ])('Buttons visibility when %p', async ({ allowUpdating, disabled }) => {
+    ])('Buttons visibility in main form when %p', async ({ allowUpdating, disabled }) => {
+      const shouldHaveSaveButton = allowUpdating && !disabled;
+
+      const { scheduler, POM } = await createScheduler({
+        ...getDefaultConfig(),
+        editing: { allowUpdating },
+      });
+
+      scheduler.showAppointmentPopup(disabled ? disabledAppointment : commonAppointment);
+
+      const toolbarItems = POM.popup.component.option('toolbarItems') ?? [];
+
+      expect(toolbarItems).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            shortcut: 'cancel',
+          }),
+        ]),
+      );
+
+      const doneButtonMatcher = expect.arrayContaining([
+        expect.objectContaining({
+          shortcut: 'done',
+        }),
+      ]);
+
+      if (shouldHaveSaveButton) {
+        expect(toolbarItems).toEqual(doneButtonMatcher);
+      } else {
+        expect(toolbarItems).not.toEqual(doneButtonMatcher);
+      }
+
+      await POM.popup.component.hide();
+    });
+
+    it.each([
+      { allowUpdating: false, disabled: false },
+      { allowUpdating: false, disabled: true },
+      { allowUpdating: true, disabled: false },
+      { allowUpdating: true, disabled: true },
+    ])('Buttons visibility in recurrence form when %p', async ({ allowUpdating, disabled }) => {
       const shouldHaveSaveButton = allowUpdating && !disabled;
 
       const { scheduler, POM } = await createScheduler({
@@ -2044,11 +2047,32 @@ describe('Appointment Popup', () => {
       const appointment = disabled ? dataSource.items()[1] : dataSource.items()[0];
 
       scheduler.showAppointmentPopup(appointment);
+      scheduler.showAppointmentPopup(disabled ? disabledAppointment : commonAppointment);
+
+      POM.popup.selectRepeatValue('daily');
+
+      await new Promise(process.nextTick);
+
+      const toolbarItems = POM.popup.component.option('toolbarItems') ?? [];
+
+      expect(toolbarItems).toEqual(
+        expect.arrayContaining([
+          expect.objectContaining({
+            shortcut: 'cancel',
+          }),
+        ]),
+      );
+
+      const doneButtonMatcher = expect.arrayContaining([
+        expect.objectContaining({
+          shortcut: 'done',
+        }),
+      ]);
 
       if (shouldHaveSaveButton) {
-        expect(POM.popup.component.option('toolbarItems')).toMatchObject(toolbarWithSaveButton);
+        expect(toolbarItems).toEqual(doneButtonMatcher);
       } else {
-        expect(POM.popup.component.option('toolbarItems')).toMatchObject(toolbarWithCancelButton);
+        expect(toolbarItems).not.toEqual(doneButtonMatcher);
       }
 
       await POM.popup.component.hide();
@@ -2063,22 +2087,35 @@ describe('Appointment Popup', () => {
         },
       });
 
-      const newAppointment = {
-        text: 'a',
-        startDate: new Date(2015, 5, 15, 10),
-        endDate: new Date(2015, 5, 15, 11),
-      };
+      const getToolbarItems = (): ToolbarItem [] => POM.popup.component.option('toolbarItems') ?? [];
 
-      scheduler.showAppointmentPopup(newAppointment);
-      expect(POM.popup.component.option('toolbarItems')).toMatchObject(toolbarWithSaveButton);
+      const doneButtonMatcher = expect.arrayContaining([
+        expect.objectContaining({
+          shortcut: 'done',
+        }),
+      ]);
+      const cancelButtonMatcher = expect.arrayContaining([
+        expect.objectContaining({
+          shortcut: 'cancel',
+        }),
+      ]);
+
+      scheduler.showAppointmentPopup();
+
+      expect(getToolbarItems()).toEqual(doneButtonMatcher);
+      expect(getToolbarItems()).toEqual(cancelButtonMatcher);
 
       scheduler.option('editing', { allowUpdating: false, allowAdding: true });
-      scheduler.showAppointmentPopup(newAppointment);
-      expect(POM.popup.component.option('toolbarItems')).toMatchObject(toolbarWithCancelButton);
+      scheduler.showAppointmentPopup(commonAppointment);
+
+      expect(getToolbarItems()).not.toEqual(doneButtonMatcher);
+      expect(getToolbarItems()).toEqual(cancelButtonMatcher);
 
       await POM.popup.component.hide();
       scheduler.showAppointmentPopup();
-      expect(POM.popup.component.option('toolbarItems')).toMatchObject(toolbarWithSaveButton);
+
+      expect(getToolbarItems()).toEqual(doneButtonMatcher);
+      expect(getToolbarItems()).toEqual(cancelButtonMatcher);
     });
   });
 

packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts

@@ -401,6 +401,50 @@ export class AppointmentPopup {
     return false;
   }
 
+  updateToolbarForMainGroup(): void {
+    if (this.tryApplyCustomToolbarItems()) {
+      return;
+    }
+
+    const isCreating = this.state.action === ACTION_TO_APPOINTMENT.CREATE;
+    const formTitleKey = isCreating ? 'dxScheduler-newPopupTitle' : 'dxScheduler-editPopupTitle';
+
+    const toolbarItems: ToolbarItem[] = [{
+      toolbar: 'top',
+      location: 'before',
+      text: messageLocalization.format(formTitleKey),
+      cssClass: 'dx-toolbar-label',
+    }];
+
+    const canSave = !this.form.readOnly;
+    if (canSave) {
+      toolbarItems.push(
+        {
+          toolbar: 'top',
+          location: 'after',
+          options: {
+            onClick: (e) => this._saveButtonClickHandler(e),
+            stylingMode: 'contained',
+            type: 'default',
+            text: messageLocalization.format('dxScheduler-editPopupSaveButtonText'),
+          },
+          shortcut: 'done',
+        } as ToolbarItem,
+      );
+    }
+
+    toolbarItems.push({
+      toolbar: 'top',
+      location: 'after',
+      shortcut: 'cancel',
+      options: {
+        stylingMode: 'outlined',
+      },
+    } as ToolbarItem);
+
+    this.popup.option('toolbarItems', toolbarItems);
+  }
+
   updateToolbarForRecurrenceGroup(): void {
     if (this.tryApplyCustomToolbarItems()) {
       return;
@@ -426,66 +470,21 @@ export class AppointmentPopup {
         text: messageLocalization.format('dxScheduler-editorLabelRecurrence'),
         cssClass: 'dx-toolbar-label',
       },
-      {
+    ];
+
+    const canSave = !this.form.readOnly;
+    if (canSave) {
+      toolbarItems.push({
         toolbar: 'top',
         location: 'after',
-        widget: 'dxButton',
         options: {
-          text: messageLocalization.format('dxScheduler-editPopupSaveButtonText'),
+          onClick: (e) => this._saveButtonClickHandler(e),
           stylingMode: 'contained',
           type: 'default',
-          onClick: (e): void => {
-            this._saveButtonClickHandler(e);
-          },
-        },
-      },
-      {
-        toolbar: 'top',
-        location: 'after',
-        widget: 'dxButton',
-        options: {
-          text: messageLocalization.format('Cancel'),
-          stylingMode: 'outlined',
-          onClick: (): void => {
-            this.hide();
-          },
+          text: messageLocalization.format('dxScheduler-editPopupSaveButtonText'),
         },
-      },
-    ];
-
-    this.popup.option('toolbarItems', toolbarItems);
-  }
-
-  updateToolbarForMainGroup(): void {
-    if (this.tryApplyCustomToolbarItems()) {
-      return;
-    }
-
-    const isCreating = this.state.action === ACTION_TO_APPOINTMENT.CREATE;
-    const formTitleKey = isCreating ? 'dxScheduler-newPopupTitle' : 'dxScheduler-editPopupTitle';
-
-    const toolbarItems: ToolbarItem[] = [{
-      toolbar: 'top',
-      location: 'before',
-      text: messageLocalization.format(formTitleKey),
-      cssClass: 'dx-toolbar-label',
-    }];
-
-    const canSave = !this.form.readOnly;
-    if (canSave) {
-      toolbarItems.push(
-        {
-          toolbar: 'top',
-          location: 'after',
-          options: {
-            onClick: (e) => this._saveButtonClickHandler(e),
-            stylingMode: 'contained',
-            type: 'default',
-            text: messageLocalization.format('dxScheduler-editPopupSaveButtonText'),
-          },
-          shortcut: 'done',
-        } as ToolbarItem,
-      );
+        shortcut: 'done',
+      } as ToolbarItem);
     }
 
     toolbarItems.push({