Feature/scheduler multilevel grouping/update workspace test

packages/devextreme-scss/scss/widgets/base/scheduler/views/_index.scss

@@ -93,31 +93,6 @@ $scheduler-month-date-text-padding: 6px;
   }
 }
 
-.dx-scheduler-group-column-count-one {
-  .dx-scheduler-header-panel-empty-cell {
-    width: $scheduler-left-column-width;
-  }
-}
-
-.dx-scheduler-group-column-count-two {
-  .dx-scheduler-header-panel-empty-cell {
-    width: 1.5 * $scheduler-left-column-width;
-  }
-
-  .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-    width: 0.75 * $scheduler-left-column-width;
-  }
-}
-
-.dx-scheduler-group-column-count-three {
-  .dx-scheduler-header-panel-empty-cell {
-    width: 2 * $scheduler-left-column-width;
-  }
-
-  .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-    width: math.div($scheduler-left-column-width * 2, 3);
-  }
-}
 
 .dx-scheduler-work-space-week,
 .dx-scheduler-work-space-work-week,
@@ -126,18 +101,6 @@ $scheduler-month-date-text-padding: 6px;
     width: $scheduler-left-column-width;
   }
 
-  &.dx-scheduler-group-column-count-one .dx-scheduler-header-panel-empty-cell {
-    width: 2 * $scheduler-left-column-width;
-  }
-
-  &.dx-scheduler-group-column-count-two .dx-scheduler-header-panel-empty-cell {
-    width: 2.5 * $scheduler-left-column-width;
-  }
-
-  &.dx-scheduler-group-column-count-three .dx-scheduler-header-panel-empty-cell {
-    width: 3 * $scheduler-left-column-width;
-  }
-
   &.dx-scheduler-work-space-odd-cells {
     .dx-scheduler-date-table-row:nth-child(odd) .dx-scheduler-date-table-cell {
       border-top: $scheduler-accent-border;
@@ -359,12 +322,16 @@ $scheduler-month-date-text-padding: 6px;
       border: none;
       border-top: $scheduler-base-border;
       border-top-color: $scheduler-base-border-color;
+      border-right: $scheduler-base-border;
+      border-right-color: $scheduler-base-border-color;
+
+      .dx-scheduler-small & {
+        width: $scheduler-left-column-width * $scheduler-small-size-factor;
+      }
 
       &.dx-scheduler-group-header-leaf {
         flex: 1 1 auto;
         width: auto;
-        border-right: $scheduler-base-border;
-        border-right-color: $scheduler-base-border-color;
       }
     }
 
@@ -373,13 +340,23 @@ $scheduler-month-date-text-padding: 6px;
       flex-direction: column;
       min-height: 0;
       width: auto;
+
+      .dx-scheduler-group-row .dx-scheduler-group-header {
+        border-right: $scheduler-base-border;
+        border-right-color: $scheduler-base-border-color;
+      }
     }
   }
 
   .dx-scheduler-group-row > .dx-scheduler-group-header.dx-scheduler-group-header-leaf:only-child {
     flex: 0 0 auto;
     width: $scheduler-left-column-width;
     min-width: $scheduler-left-column-width;
+
+    .dx-scheduler-small & {
+      width: $scheduler-left-column-width * $scheduler-small-size-factor;
+      min-width: $scheduler-left-column-width * $scheduler-small-size-factor;
+    }
   }
 }
 
@@ -915,11 +892,8 @@ $scheduler-month-date-text-padding: 6px;
         padding: 0 5px 0 10px;
       }
 
-      &.dx-scheduler-group-column-count-two,
-      &.dx-scheduler-group-column-count-three {
-        .dx-scheduler-group-header:last-child {
-          text-align: right;
-        }
+      .dx-scheduler-group-row .dx-scheduler-group-header:last-child:not(:only-child) {
+        text-align: right;
       }
     }
   }
@@ -948,17 +922,5 @@ $scheduler-month-date-text-padding: 6px;
     .dx-scheduler-header-panel-empty-cell {
       width: $scheduler-small-size-factor * $scheduler-left-column-width;
     }
-
-    &.dx-scheduler-group-column-count-one .dx-scheduler-header-panel-empty-cell {
-      width: (1 + $scheduler-small-size-factor) * $scheduler-left-column-width;
-    }
-
-    &.dx-scheduler-group-column-count-two .dx-scheduler-header-panel-empty-cell {
-      width: (1.5 + $scheduler-small-size-factor) * $scheduler-left-column-width;
-    }
-
-    &.dx-scheduler-group-column-count-three .dx-scheduler-header-panel-empty-cell {
-      width: (2 + $scheduler-small-size-factor) * $scheduler-left-column-width;
-    }
   }
 }

packages/devextreme-scss/scss/widgets/base/scheduler/views/timelines/_index.scss

@@ -16,26 +16,6 @@ $scheduler-timeline-min-height: 100px;
     border-bottom: none;
   }
 
-  &.dx-scheduler-group-column-count-two {
-    .dx-scheduler-header-panel-empty-cell {
-      width: 160px;
-    }
-
-    .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-      width: 80px;
-    }
-  }
-
-  &.dx-scheduler-group-column-count-three {
-    .dx-scheduler-header-panel-empty-cell {
-      width: 240px;
-    }
-
-    .dx-scheduler-group-flex-container .dx-scheduler-group-header {
-      width: 80px;
-    }
-  }
-
   // This is a WA for existing behaviour. Refactor with setTableSizes
   .dx-scheduler-date-table-scrollable-content,
   .dx-scheduler-date-table-container {
@@ -194,16 +174,27 @@ $scheduler-timeline-min-height: 100px;
       display: block;
     }
 
-    .dx-scheduler-group-row .dx-scheduler-group-header {
-      border: none;
-      border-top: $scheduler-base-border;
-      border-top-color: $scheduler-base-border-color;
+    .dx-scheduler-group-table > .dx-scheduler-group-flex-container:not(.dx-scheduler-group-flex-container-hierarchical) {
+      .dx-scheduler-group-row {
+        @include flex-container(column, nowrap);
+
+        flex: 0 0 auto;
+        min-width: 0;
+
+        .dx-scheduler-group-header {
+          border: none;
+          border-top: $scheduler-base-border;
+          border-top-color: $scheduler-base-border-color;
+        }
+      }
     }
 
     &.dx-scheduler-work-space-group-by-date {
-      .dx-scheduler-group-row .dx-scheduler-group-header {
-        border-right: $scheduler-base-border;
-        border-right-color: $scheduler-base-border-color;
+      .dx-scheduler-group-table > .dx-scheduler-group-flex-container:not(.dx-scheduler-group-flex-container-hierarchical) {
+        .dx-scheduler-group-row .dx-scheduler-group-header {
+          border-right: $scheduler-base-border;
+          border-right-color: $scheduler-base-border-color;
+        }
       }
 
       .dx-scheduler-group-row .dx-scheduler-last-group-cell {

packages/devextreme/js/__internal/scheduler/classes.ts

@@ -43,9 +43,3 @@ export const GROUP_ROW_CLASS = 'dx-scheduler-group-row';
 export const GROUP_HEADER_CONTENT_CLASS = 'dx-scheduler-group-header-content';
 export const LAST_GROUP_CELL_CLASS = 'dx-scheduler-last-group-cell';
 export const FIRST_GROUP_CELL_CLASS = 'dx-scheduler-first-group-cell';
-
-export const VERTICAL_GROUP_COUNT_CLASSES = [
-  'dx-scheduler-group-column-count-one',
-  'dx-scheduler-group-column-count-two',
-  'dx-scheduler-group-column-count-three',
-];

packages/devextreme/js/__internal/scheduler/r1/components/base/group_panel_vertical.tsx

@@ -17,7 +17,7 @@ const renderGroupPanelContent = (
   isHierarchical: boolean,
   groupByDate: boolean,
 ): JSX.Element | JSX.Element[] => {
-  if (isTimelineGroupTable) {
+  if (isTimelineGroupTable && !isHierarchical) {
     return getTimelineGroupPanelRows(groupPanelData, groupByDate)
       .map((group) => <GroupPanelVerticalRow
         key={group[group.length - 1].key}
@@ -66,7 +66,10 @@ export class GroupPanelVertical extends BaseInfernoComponent<GroupPanelProps> {
     } = this.props;
     const style = normalizeStyles(renderUtils.addHeightToStyle(height, styles));
     const isTimelineGroupTable = className === TIMELINE_GROUP_TABLE_CLASS;
-    const isHierarchical = !isTimelineGroupTable && groupPanelData.maxDepth > 1;
+    const useResourceHierarchyLayout = groupPanelData.hasHierarchy && groupPanelData.maxDepth > 1;
+    const isHierarchical = isTimelineGroupTable
+      ? useResourceHierarchyLayout
+      : groupPanelData.maxDepth > 1;
     const flexContainerClassName = isHierarchical
       ? `dx-scheduler-group-flex-container ${HIERARCHICAL_GROUP_FLEX_CONTAINER_CLASS}`
       : 'dx-scheduler-group-flex-container';

packages/devextreme/js/__internal/scheduler/r1/components/base/group_panel_vertical_node.test.tsx

@@ -69,4 +69,34 @@ describe('GroupPanelVerticalNode', () => {
     expect(nestedContainer.className).toBe('dx-scheduler-group-flex-container');
     expect(nestedContainer.children).toHaveLength(2);
   });
+
+  it('should not set inline width on header cells (width is defined in CSS)', () => {
+    const branch2Depth3: GroupPanelTreeNode = {
+      ...leafNode('building2', 'Building 2', 3),
+      children: [
+        {
+          ...leafNode('floor1', 'Floor 1', 2),
+          children: [leafNode('room3', 'Room 3', 1), leafNode('room4', 'Room 4', 1)],
+        },
+        leafNode('room5', 'Room 5', 1),
+      ],
+    };
+
+    const checkHeaderCell = (node: GroupPanelTreeNode) => {
+      const component = new GroupPanelVerticalNode({ node, index: 0 });
+      const result = component.render() as VirtualNodeLike;
+      const children = result.children as VirtualNodeLike[];
+      const headerCell = children[0];
+
+      expect(headerCell.props?.style).toBeUndefined();
+    };
+
+    checkHeaderCell(leafNode('a', 'Room A', 1));
+    checkHeaderCell({
+      ...leafNode('parent', 'Building A', 2),
+      children: [leafNode('child1', 'Room A1', 1), leafNode('child2', 'Room A2', 1)],
+    });
+    checkHeaderCell(branch2Depth3);
+    checkHeaderCell(branch2Depth3.children[0]);
+  });
 });

packages/devextreme/js/__internal/scheduler/r1/utils/__tests__/base.test.ts

@@ -672,6 +672,26 @@ describe('base utils', () => {
       ]);
       expect(timelineRows).not.toEqual(groupPanelData.groupPanelItems);
     });
+
+    it('should keep a single stacked row when a single resource has multiple flat groups on timeline', () => {
+      const groups: GroupNode[] = [
+        {
+          id: 1, resourceText: 'Group_1', resourceIndex: 'any', grouped: { any: 1 }, children: [],
+        },
+        {
+          id: 2, resourceText: 'Group_2', resourceIndex: 'any', grouped: { any: 2 }, children: [],
+        },
+        {
+          id: 3, resourceText: 'Group_3', resourceIndex: 'any', grouped: { any: 3 }, children: [],
+        },
+      ];
+      const groupPanelData = getGroupPanelData(groups, 1, false, 1, false);
+      const timelineRows = getTimelineGroupPanelRows(groupPanelData, false);
+
+      expect(timelineRows).toEqual(groupPanelData.groupPanelItems);
+      expect(timelineRows).toHaveLength(1);
+      expect(timelineRows[0]).toHaveLength(3);
+    });
   });
 
   describe('getKeyByGroup', () => {

packages/devextreme/js/__internal/scheduler/r1/utils/base.ts

@@ -3,7 +3,6 @@ import dateUtils from '@js/core/utils/date';
 import { isDefined } from '@js/core/utils/type';
 import { dateUtilsTs } from '@ts/core/utils/date';
 
-import { VERTICAL_GROUP_COUNT_CLASSES } from '../../classes';
 import {
   HORIZONTAL_GROUP_ORIENTATION, VERTICAL_GROUP_ORIENTATION,
 } from '../../constants';
@@ -99,19 +98,6 @@ export const getOverflowIndicatorColor = (color: string, colors: string[]): stri
     : undefined
 );
 
-export const getVerticalGroupCountClass = (groups: unknown[]): string | undefined => {
-  switch (groups?.length) {
-    case 1:
-      return VERTICAL_GROUP_COUNT_CLASSES[0];
-    case 2:
-      return VERTICAL_GROUP_COUNT_CLASSES[1];
-    case 3:
-      return VERTICAL_GROUP_COUNT_CLASSES[2];
-    default:
-      return undefined;
-  }
-};
-
 export const setOptionHour = (date: Date, optionHour: number): Date => {
   const nextDate = new Date(date);
 
@@ -483,7 +469,11 @@ export const getTimelineGroupPanelRows = (
   groupPanelData: GroupPanelData,
   groupByDate: boolean,
 ): GroupRenderItem[][] => {
-  let rows = groupPanelData.hasHierarchy
+  // Flat timeline keeps one stacked group-row (base CSS: column + flex:1 headers).
+  // Leaf rows are only for hierarchical resources rendered via this helper.
+  const shouldUseLeafRows = groupPanelData.hasHierarchy;
+
+  let rows = shouldUseLeafRows
     ? flattenGroupPanelTreeToLeafRows(groupPanelData.groupTree, groupPanelData.baseColSpan)
     : groupPanelData.groupPanelItems;
 

packages/devextreme/js/__internal/scheduler/r1/utils/index.ts

@@ -62,7 +62,6 @@ export {
   getTotalCellCountByCompleteData,
   getTotalRowCountByCompleteData,
   getValidCellDateForLocalTimeFormat,
-  getVerticalGroupCountClass,
   getViewStartByOptions,
   isAppointmentTakesAllDay,
   isDateAndTimeView,

packages/devextreme/js/__internal/scheduler/workspaces/agenda.ts

@@ -21,7 +21,7 @@ import {
   GROUP_ROW_CLASS,
   TIME_PANEL_CLASS,
 } from '../classes';
-import { agendaUtils, formatWeekday, getVerticalGroupCountClass } from '../r1/utils/index';
+import { agendaUtils, formatWeekday } from '../r1/utils/index';
 import tableCreatorModule, { type GroupRows } from '../table_creator';
 import type { ResourceId } from '../utils/loader/types';
 import { VIEWS } from '../utils/options/constants_view';
@@ -102,7 +102,6 @@ class SchedulerAgenda extends WorkSpace {
           if (this.$groupTable) {
             this.$groupTable.remove();
             this.$groupTable = null;
-            this.detachGroupCountClass();
           }
         } else if (!this.$groupTable) {
           this.initGroupTable();
@@ -230,13 +229,6 @@ class SchedulerAgenda extends WorkSpace {
     return rows.every((groupRow) => groupRow.every((cell) => !cell));
   }
 
-  protected override attachGroupCountClass(): void {
-    const className = getVerticalGroupCountClass(this.option().groups);
-    if (className) {
-      this.$element().addClass(className);
-    }
-  }
-
   private removeEmptyRows(rows: number[][]): number[][] {
     const isEmpty = (data: number[]): boolean => !data.some((value) => value > 0);
     return rows.filter((row) => row.length && !isEmpty(row));