Add expand/collapse affordance in the left column header of ZoneGrids.

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## 68.0.0-SNAPSHOT - unreleased
 
+### 🎁 New Features
+
+* Added expand/collapse affordance in the left column header of ZoneGrids.
+
 ### ⚙️ Technical
 
 * Updated Admin Console's Cluster tab to refresh more frequently.

cmp/grid/columns/Column.ts

@@ -93,6 +93,13 @@ export interface ColumnSpec {
      */
     isTreeColumn?: boolean;
 
+    /**
+     * For ZoneGrids, the left most column will be set to true by Hoist. Similar to
+     * isTreeColumn, this flag is used in conjunction with the headerHasExpandCollapse flag to
+     * potentially provide a expand/collapse all icon in the column header.
+     */
+    isLeftZoneColumn?: boolean;
+
     /**
      * Primary user-facing name for this Column. Sourced from the corresponding data
      * `Field.displayName` from the parent `GridModel.store` config, if available, or defaulted
@@ -112,8 +119,8 @@ export interface ColumnSpec {
     headerTooltip?: string;
 
     /**
-     * True if this column header will host an expand/collapse all icon. `Column.isTreeColumn`
-     * must be enabled. Defaults to true.
+     * True if this column header will host an expand/collapse all icon. `Column.isTreeColumn` or
+     * `Column.isLeftZoneColumn` must be enabled. Defaults to true.
      */
     headerHasExpandCollapse?: boolean;
 
@@ -424,6 +431,7 @@ export class Column {
     fieldPath: Some<string>;
     colId: string;
     isTreeColumn: boolean;
+    isLeftZoneColumn: boolean;
     displayName: string;
     headerName: ColumnHeaderNameFn | ReactNode;
     headerTooltip: string;
@@ -497,6 +505,7 @@ export class Column {
             field,
             colId,
             isTreeColumn,
+            isLeftZoneColumn,
             displayName,
             headerName,
             headerTooltip,
@@ -568,6 +577,7 @@ export class Column {
         throwIf(!this.colId, 'Must specify colId or field for a Column.');
 
         this.isTreeColumn = withDefault(isTreeColumn, false);
+        this.isLeftZoneColumn = withDefault(isLeftZoneColumn, false);
 
         // Note that parent GridModel might have already defaulted displayName from an associated
         // `Store.field` when pre-processing Column configs - prior to calling this ctor. If that

cmp/grid/impl/ColumnHeader.ts

@@ -83,7 +83,7 @@ export const columnHeader = hoistCmp.factory<ColumnHeaderProps>({
             const {xhColumn} = model;
             if (
                 !xhColumn ||
-                !xhColumn.isTreeColumn ||
+                !(xhColumn.isTreeColumn || xhColumn.isLeftZoneColumn) ||
                 !xhColumn.headerHasExpandCollapse ||
                 !model.rootsWithChildren
             ) {

cmp/zoneGrid/ZoneGridModel.ts

@@ -608,6 +608,7 @@ export class ZoneGridModel extends HoistModel {
             // Controlled properties
             field: isLeft ? 'left_column' : 'right_column',
             align: isLeft ? 'left' : 'right',
+            isLeftZoneColumn: isLeft,
             flex: overrideSpec.width ? null : isLeft ? 2 : 1,
             renderer: (value, context) => zoneGridRenderer(value, context, isLeft),
             rendererIsComplex: true,