Scheduler: Multilevel grouping — Update workspace

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;
+    }
   }
 }
 
@@ -505,6 +482,15 @@ $scheduler-month-date-text-padding: 6px;
   table-layout: fixed;
   width: 100%;
   font-size: $scheduler-workspace-info-font-size;
+
+  // groupByDate: date header row is above groups — separator on top of group headers
+  .dx-scheduler-group-row:not(:first-child) {
+    .dx-scheduler-group-header {
+      border-top: $scheduler-base-border;
+      border-top-color: $scheduler-base-border-color;
+      border-bottom: none;
+    }
+  }
 }
 
 .dx-scheduler-work-space { // stylelint-disable-line no-duplicate-selectors
@@ -855,6 +841,14 @@ $scheduler-month-date-text-padding: 6px;
     }
   }
 
+  .dx-scheduler-group-flex-container-hierarchical {
+    .dx-scheduler-group-header {
+      border-right: none;
+      border-left: $scheduler-base-border;
+      border-left-color: $scheduler-base-border-color;
+    }
+  }
+
   .dx-scheduler-header-panel {
     left: 0;
     right: inherit;
@@ -915,11 +909,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 +939,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,29 @@ $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;
+          border-right: $scheduler-base-border;
+          border-right-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 {
@@ -222,6 +215,30 @@ $scheduler-timeline-min-height: 100px;
 
 .dx-rtl {
   .dx-scheduler-timeline.dx-scheduler-work-space-grouped {
+    .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: none;
+        border-left: $scheduler-base-border;
+        border-left-color: $scheduler-base-border-color;
+      }
+    }
+
+    &.dx-scheduler-work-space-group-by-date {
+      .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: none;
+          border-left: $scheduler-base-border;
+          border-left-color: $scheduler-base-border-color;
+        }
+      }
+
+      .dx-scheduler-group-row .dx-scheduler-last-group-cell {
+        border-right: none;
+        border-left: $scheduler-accent-border;
+        border-left-color: $scheduler-accent-border-color;
+      }
+    }
+
     .dx-scheduler-date-table-cell {
       &:first-child {
         border-left: $scheduler-base-border;

packages/devextreme-scss/scss/widgets/fluent/scheduler/_index.scss

@@ -787,6 +787,48 @@ $fluent-scheduler-agenda-time-panel-cell-padding: 8px;
   }
 }
 
+.dx-scheduler-work-space-grouped.dx-scheduler-work-space-vertical-grouped,
+.dx-scheduler-work-space-grouped.dx-scheduler-timeline {
+  .dx-scheduler-group-row th,
+  .dx-scheduler-last-group-cell {
+    border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
+    border-left: baseScheduler.$scheduler-base-border;
+    border-left-color: $scheduler-base-border-color;
+  }
+}
+
+.dx-scheduler-work-space-grouped.dx-scheduler-work-space-group-by-date {
+  .dx-scheduler-group-row th {
+    border-right: baseScheduler.$scheduler-base-border;
+    border-right-color: $scheduler-base-border-color;
+    border-left: baseScheduler.$scheduler-base-border;
+    border-left-color: $scheduler-base-border-color;
+  }
+
+  .dx-scheduler-header-panel-cell,
+  .dx-scheduler-group-header.dx-scheduler-last-group-cell,
+  .dx-scheduler-date-table-cell.dx-scheduler-last-group-cell {
+    border-right: 1px solid;
+    border-right-color: $scheduler-group-separator-border-color;
+
+    &:last-child {
+      border-right: none;
+    }
+
+    .dx-rtl & {
+      border-left: 1px solid;
+      border-left-color: $scheduler-group-separator-border-color;
+      border-right: baseScheduler.$scheduler-base-border;
+      border-right-color: $scheduler-base-border-color;
+
+      &:last-child {
+        border-left: none;
+      }
+    }
+  }
+}
+
 .dx-scheduler-appointment {
   &,
   .dx-rtl &,

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', () => {