refactor(scheduler): address KBN review feedback for appointments_new

Author: bit-byte0

packages/devextreme/js/__internal/scheduler/appointments_new/appointments.focus_controller.ts

@@ -10,6 +10,10 @@ import { AppointmentCollector } from './appointment_collector';
 import type { Appointments } from './appointments';
 import type { ViewItem } from './view_item';
 
+interface AppointmentsFocusControllerHandlers {
+  onAppointmentEnterKeyDown: (appointmentView: BaseAppointmentView, event: DxEvent) => void;
+}
+
 export class AppointmentsFocusController {
   private focusableSortedIndex = 0;
 
@@ -27,7 +31,10 @@ export class AppointmentsFocusController {
     return this.appointments.option().tabIndex;
   }
 
-  constructor(private readonly appointments: Appointments) { }
+  constructor(
+    private readonly appointments: Appointments,
+    private readonly handlers: AppointmentsFocusControllerHandlers,
+  ) { }
 
   public onViewItemClick(viewItem: ViewItem): void {
     this.focusViewItem(viewItem);
@@ -119,12 +126,9 @@ export class AppointmentsFocusController {
     const { allowDelete, onDeleteKeyPress } = this.appointments.option();
     if (!allowDelete) { return; }
 
-    const sortedItem = this.sortedAppointments[viewItem.option().sortedIndex];
-    if (!sortedItem) { return; }
-
     const appointmentViewItem = viewItem as BaseAppointmentView;
     onDeleteKeyPress({
-      appointmentData: sortedItem.itemData,
+      appointmentData: appointmentViewItem.appointmentData,
       targetedAppointmentData: appointmentViewItem.targetedAppointmentData,
     });
   }
@@ -146,15 +150,16 @@ export class AppointmentsFocusController {
   }
 
   private handleEnterKeyDown(viewItem: ViewItem, e: KeyboardKeyDownEvent): void {
-    const { onItemActivate } = this.appointments.option();
-    const sortedItem = this.sortedAppointments[viewItem.option().sortedIndex];
-    if (!sortedItem) { return; }
     e.originalEvent.preventDefault();
-    const appointmentViewItem = viewItem as BaseAppointmentView;
-    onItemActivate({
-      data: sortedItem.itemData,
-      targetedAppointmentData: appointmentViewItem.targetedAppointmentData,
-    });
+
+    if (viewItem instanceof AppointmentCollector) {
+      return;
+    }
+
+    this.handlers.onAppointmentEnterKeyDown(
+      viewItem as BaseAppointmentView,
+      e.originalEvent as DxEvent,
+    );
   }
 
   private focusBySortedItem(sortedItem: SortedEntity): void {

packages/devextreme/js/__internal/scheduler/appointments_new/appointments.test.ts

@@ -945,6 +945,48 @@ describe('Appointments', () => {
         expect(wasDefaultPrevented).toBe(true);
       });
 
+      it('should prevent default browser behavior on Enter key', () => {
+        const viewModel = [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem = instance.getViewItemBySortedIndex(0);
+        (viewItem?.$element().get(0) as HTMLElement).click();
+
+        const wasDefaultPrevented = !fireEvent.keyDown(
+          viewItem?.$element().get(0) as HTMLElement,
+          { key: 'Enter' },
+        );
+
+        expect(wasDefaultPrevented).toBe(true);
+      });
+
+      it('should prevent default browser behavior on Space key', () => {
+        const viewModel = [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem = instance.getViewItemBySortedIndex(0);
+        (viewItem?.$element().get(0) as HTMLElement).click();
+
+        const wasDefaultPrevented = !fireEvent.keyDown(
+          viewItem?.$element().get(0) as HTMLElement,
+          { key: ' ' },
+        );
+
+        expect(wasDefaultPrevented).toBe(true);
+      });
+
       it('should move focus to last appointment on End key', () => {
         const viewModel = [
           mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
@@ -1042,50 +1084,137 @@ describe('Appointments', () => {
         expect(onDeleteKeyPress).not.toHaveBeenCalled();
       });
 
-      it('should call onItemActivate when Enter is pressed', () => {
-        const onItemActivate = jest.fn();
+      it('should show appointment popup when Enter is pressed', () => {
+        const showEditAppointmentPopup = jest.fn();
         const viewModel = [
           mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
         ];
 
         const instance = createAppointments({
           ...getProperties(),
-          onItemActivate,
-          getSortedItems: () => viewModel as unknown as SortedEntity[],
+          showEditAppointmentPopup,
         });
         instance.option('viewModel', viewModel);
 
         const viewItem = instance.getViewItemBySortedIndex(0);
         (viewItem?.$element().get(0) as HTMLElement).click();
         fireEvent.keyDown(viewItem?.$element().get(0) as HTMLElement, { key: 'Enter' });
 
-        expect(onItemActivate).toHaveBeenCalledTimes(1);
-        expect(onItemActivate).toHaveBeenCalledWith(
-          expect.objectContaining({ data: defaultAppointmentData }),
+        expect(showEditAppointmentPopup).toHaveBeenCalledTimes(1);
+        expect(showEditAppointmentPopup).toHaveBeenCalledWith(
+          defaultAppointmentData,
+          expect.objectContaining({ ...defaultAppointmentData }),
         );
       });
-      it('should call onItemActivate when Space is pressed', () => {
-        const onItemActivate = jest.fn();
+
+      it('should call onAppointmentDblClick when Enter is pressed', () => {
+        const onAppointmentDblClick = jest.fn();
         const viewModel = [
           mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
         ];
 
         const instance = createAppointments({
           ...getProperties(),
-          onItemActivate,
-          getSortedItems: () => viewModel as unknown as SortedEntity[],
+          onAppointmentDblClick,
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem = instance.getViewItemBySortedIndex(0);
+        (viewItem?.$element().get(0) as HTMLElement).click();
+        fireEvent.keyDown(viewItem?.$element().get(0) as HTMLElement, { key: 'Enter' });
+
+        expect(onAppointmentDblClick).toHaveBeenCalledTimes(1);
+        expect(onAppointmentDblClick).toHaveBeenCalledWith(
+          expect.objectContaining({ appointmentData: defaultAppointmentData }),
+        );
+      });
+
+      it('should show appointment popup when Space is pressed', () => {
+        const showEditAppointmentPopup = jest.fn();
+        const viewModel = [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+          showEditAppointmentPopup,
         });
         instance.option('viewModel', viewModel);
 
         const viewItem = instance.getViewItemBySortedIndex(0);
         (viewItem?.$element().get(0) as HTMLElement).click();
         fireEvent.keyDown(viewItem?.$element().get(0) as HTMLElement, { key: ' ' });
 
-        expect(onItemActivate).toHaveBeenCalledTimes(1);
-        expect(onItemActivate).toHaveBeenCalledWith(
-          expect.objectContaining({ data: defaultAppointmentData }),
+        expect(showEditAppointmentPopup).toHaveBeenCalledTimes(1);
+        expect(showEditAppointmentPopup).toHaveBeenCalledWith(
+          defaultAppointmentData,
+          expect.objectContaining({ ...defaultAppointmentData }),
         );
       });
+
+      it('should call onAppointmentDblClick when Space is pressed', () => {
+        const onAppointmentDblClick = jest.fn();
+        const viewModel = [
+          mockGridViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+          onAppointmentDblClick,
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem = instance.getViewItemBySortedIndex(0);
+        (viewItem?.$element().get(0) as HTMLElement).click();
+        fireEvent.keyDown(viewItem?.$element().get(0) as HTMLElement, { key: ' ' });
+
+        expect(onAppointmentDblClick).toHaveBeenCalledTimes(1);
+        expect(onAppointmentDblClick).toHaveBeenCalledWith(
+          expect.objectContaining({ appointmentData: defaultAppointmentData }),
+        );
+      });
+
+      it('should show tooltip when Enter is pressed on appointment collector', () => {
+        const showTooltipForCollector = jest.fn();
+        const showEditAppointmentPopup = jest.fn();
+        const viewModel = [
+          mockAppointmentCollectorViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+          showTooltipForCollector,
+          showEditAppointmentPopup,
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem = instance.getViewItemBySortedIndex(0);
+        fireEvent.keyDown(viewItem?.$element().get(0) as HTMLElement, { key: 'Enter' });
+
+        expect(showTooltipForCollector).toHaveBeenCalledTimes(1);
+        expect(showEditAppointmentPopup).not.toHaveBeenCalled();
+      });
+
+      it('should show tooltip when Space is pressed on appointment collector', () => {
+        const showTooltipForCollector = jest.fn();
+        const showEditAppointmentPopup = jest.fn();
+        const viewModel = [
+          mockAppointmentCollectorViewModel({ ...defaultAppointmentData }, { sortedIndex: 0 }),
+        ];
+
+        const instance = createAppointments({
+          ...getProperties(),
+          showTooltipForCollector,
+          showEditAppointmentPopup,
+        });
+        instance.option('viewModel', viewModel);
+
+        const viewItem = instance.getViewItemBySortedIndex(0);
+        fireEvent.keyDown(viewItem?.$element().get(0) as HTMLElement, { key: ' ' });
+
+        expect(showTooltipForCollector).toHaveBeenCalledTimes(1);
+        expect(showEditAppointmentPopup).not.toHaveBeenCalled();
+      });
     });
   });
 

packages/devextreme/js/__internal/scheduler/appointments_new/appointments.ts

@@ -120,7 +120,9 @@ export class Appointments extends DOMComponent<Appointments, AppointmentsPropert
   override _init(): void {
     super._init();
 
-    this.focusController = new AppointmentsFocusController(this);
+    this.focusController = new AppointmentsFocusController(this, {
+      onAppointmentEnterKeyDown: this.onAppointmentDblClick.bind(this),
+    });
 
     this._templateManager.addDefaultTemplates({
       appointment: new EmptyTemplate(),