feat: Make rollup group behaviour a setting in the global settings menu (#2183)

Closes #2128

Author: AkshatJawne

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" id="show_extra_group_column_div">
+            <label
+              className="col-form-label col-3"
+              htmlFor="default-show-extra-group-column"
+            >
+              Rollup
+            </label>
+            <div className="col pr-0 pt-2" id="default-show-extra-group-column">
+              <Checkbox
+                checked={showExtraGroupColumn}
+                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/eslint-config/index.js

@@ -20,6 +20,12 @@ module.exports = {
     'react/jsx-uses-react': 'error',
     'react/jsx-uses-vars': 'error',
     'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
+    'react-hooks/exhaustive-deps': [
+      'warn',
+      {
+        additionalHooks: '(useOnChange)',
+      },
+    ],
     'react/react-in-jsx-scope': 'off',
     'react/sort-comp': [
       2,

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) {
@@ -4810,7 +4819,6 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
             {isVisible && (
               <IrisGridModelUpdater
                 model={model}
-                modelColumns={model.columns}
                 top={top}
                 bottom={bottom}
                 left={left}
@@ -4857,6 +4865,7 @@ class IrisGrid extends Component<IrisGridProps, IrisGridState> {
                 frozenColumns={frozenColumns}
                 columnHeaderGroups={columnHeaderGroups}
                 partitionConfig={partitionConfig}
+                showExtraGroupColumn={this.showExtraGroupColumn}
               />
             )}
             {!isMenuShown && (