feat: Make rollup group behaviour a setting in the global settings menu

packages/app-utils/src/storage/LocalWorkspaceStorage.ts

@@ -56,6 +56,7 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
       truncateNumbersWithPound: false,
       showEmptyStrings: true,
       showNullStrings: true,
+      showExtraGroupColumn: true,
       defaultNotebookSettings: {
         isMinimapEnabled: false,
       },
@@ -103,6 +104,10 @@ export class LocalWorkspaceStorage implements WorkspaceStorage {
         serverConfigValues,
         'showNullStrings'
       ),
+      showExtraGroupColumn: LocalWorkspaceStorage.getBooleanServerConfig(
+        serverConfigValues,
+        'showExtraGroupColumn'
+      ),
       defaultNotebookSettings:
         serverConfigValues?.get('isMinimapEnabled') !== undefined
           ? {

packages/code-studio/src/settings/FormattingSectionContent.tsx

@@ -28,6 +28,7 @@ import {
   getTruncateNumbersWithPound,
   getShowEmptyStrings,
   getShowNullStrings,
+  getShowExtraGroupColumn,
   updateSettings as updateSettingsAction,
   RootState,
   WorkspaceSettings,
@@ -56,6 +57,7 @@ interface FormattingSectionContentProps {
   truncateNumbersWithPound: boolean;
   showEmptyStrings: boolean;
   showNullStrings: boolean;
+  showExtraGroupColumn: boolean;
   updateSettings: (settings: Partial<WorkspaceSettings>) => void;
   defaultDecimalFormatOptions: FormatOption;
   defaultIntegerFormatOptions: FormatOption;
@@ -72,6 +74,7 @@ interface FormattingSectionContentState {
   truncateNumbersWithPound: boolean;
   showEmptyStrings: boolean;
   showNullStrings: boolean;
+  showExtraGroupColumn: boolean;
   timestampAtMenuOpen: Date;
 }
 
@@ -113,6 +116,8 @@ export class FormattingSectionContent extends PureComponent<
       this.handleShowEmptyStringsChange.bind(this);
     this.handleShowNullStringsChange =
       this.handleShowNullStringsChange.bind(this);
+    this.handleShowExtraGroupColumnChange =
+      this.handleShowExtraGroupColumnChange.bind(this);
 
     const {
       defaultDateTimeFormat,
@@ -124,6 +129,7 @@ export class FormattingSectionContent extends PureComponent<
       truncateNumbersWithPound,
       showEmptyStrings,
       showNullStrings,
+      showExtraGroupColumn,
     } = props;
 
     this.containerRef = React.createRef();
@@ -139,6 +145,7 @@ export class FormattingSectionContent extends PureComponent<
       truncateNumbersWithPound,
       showEmptyStrings,
       showNullStrings,
+      showExtraGroupColumn,
       timestampAtMenuOpen: new Date(),
     };
   }
@@ -330,6 +337,15 @@ export class FormattingSectionContent extends PureComponent<
     this.queueUpdate(update);
   }
 
+  handleShowExtraGroupColumnChange(): void {
+    const { showExtraGroupColumn } = this.state;
+    const update = {
+      showExtraGroupColumn: !showExtraGroupColumn,
+    };
+    this.setState(update);
+    this.queueUpdate(update);
+  }
+
   commitChanges(): void {
     const { updateSettings } = this.props;
     const updates = this.pendingUpdates.reduce(
@@ -356,6 +372,7 @@ export class FormattingSectionContent extends PureComponent<
       truncateNumbersWithPound,
       showEmptyStrings,
       showNullStrings,
+      showExtraGroupColumn,
     } = this.state;
 
     const {
@@ -596,6 +613,23 @@ export class FormattingSectionContent extends PureComponent<
               </Checkbox>
             </div>
           </div>
+
+          <div className="form-row mb-3">
+            <label
+              className="col-form-label col-3"
+              htmlFor="default-integer-format-input"
+            >
+              Rollup
+            </label>
+            <div className="col pr-0 pt-2">
+              <Checkbox
+                checked={showExtraGroupColumn ?? null}
+                onChange={this.handleShowExtraGroupColumnChange}
+              >
+                Show extra &quot;group&quot; column
+              </Checkbox>
+            </div>
+          </div>
         </div>
       </div>
     );
@@ -614,6 +648,7 @@ const mapStateToProps = (
   truncateNumbersWithPound: getTruncateNumbersWithPound(state),
   showEmptyStrings: getShowEmptyStrings(state),
   showNullStrings: getShowNullStrings(state),
+  showExtraGroupColumn: getShowExtraGroupColumn(state),
   timeZone: getTimeZone(state),
   defaults: getDefaultSettings(state),
 });

packages/iris-grid/src/IrisGrid.tsx

@@ -523,6 +523,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       truncateNumbersWithPound: false,
       showEmptyStrings: true,
       showNullStrings: true,
+      showExtraGroupColumn: true,
       formatter: EMPTY_ARRAY,
       decimalFormatOptions: PropTypes.shape({
         defaultFormatString: PropTypes.string,
@@ -637,6 +638,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     this.truncateNumbersWithPound = false;
     this.showEmptyStrings = true;
     this.showNullStrings = true;
+    this.showExtraGroupColumn = true;
 
     // When the loading scrim started/when it should extend to the end of the screen.
     this.tableSaver = null;
@@ -1023,6 +1025,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
   showNullStrings: boolean;
 
+  showExtraGroupColumn: boolean;
+
   // When the loading scrim started/when it should extend to the end of the screen.
   loadingScrimStartTime?: number;
 
@@ -1870,6 +1874,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
 
     const showEmptyStrings = settings?.showEmptyStrings ?? true;
     const showNullStrings = settings?.showNullStrings ?? true;
+    const showExtraGroupColumn = settings?.showExtraGroupColumn ?? true;
 
     const isColumnFormatChanged = !deepEqual(
       this.globalColumnFormats,
@@ -1892,6 +1897,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
     const isShowEmptyStringsChanged =
       this.showEmptyStrings !== showEmptyStrings;
     const isShowNullStringsChanged = this.showNullStrings !== showNullStrings;
+    const isShowExtraGroupColumnChanged =
+      this.showExtraGroupColumn !== showExtraGroupColumn;
 
     if (
       isColumnFormatChanged ||
@@ -1900,7 +1907,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       isIntegerFormattingChanged ||
       isTruncateNumbersChanged ||
       isShowEmptyStringsChanged ||
-      isShowNullStringsChanged
+      isShowNullStringsChanged ||
+      isShowExtraGroupColumnChanged
     ) {
       this.globalColumnFormats = globalColumnFormats;
       this.dateTimeFormatterOptions = dateTimeFormatterOptions;
@@ -1909,6 +1917,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       this.truncateNumbersWithPound = truncateNumbersWithPound;
       this.showEmptyStrings = showEmptyStrings;
       this.showNullStrings = showNullStrings;
+      this.showExtraGroupColumn = showExtraGroupColumn;
       this.updateFormatter({}, forceUpdate);
 
       if (isDateFormattingChanged && forceUpdate) {
@@ -1977,7 +1986,8 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
       this.integerFormatOptions,
       this.truncateNumbersWithPound,
       this.showEmptyStrings,
-      this.showNullStrings
+      this.showNullStrings,
+      this.showExtraGroupColumn
     );
 
     log.debug('updateFormatter', this.globalColumnFormats, mergedColumnFormats);
@@ -4810,7 +4820,6 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             {isVisible && (
               <IrisGridModelUpdater
                 model={model}
-                modelColumns={model.columns}
                 top={top}
                 bottom={bottom}
                 left={left}