fix: Formatting Rule Doesn't use default set by user (#1547)

* Default Formatting Rule should change depending on the defaults set by
the user
* Changing columnType should fill the input with the default string

Author: Zhou-Ziheng

packages/code-studio/src/settings/ColumnSpecificSectionContent.test.tsx

@@ -138,7 +138,10 @@ it('displays an error when the formatting rule is empty', async () => {
   expect(screen.getByDisplayValue('test')).toBeInTheDocument();
 
   await user.selectOptions(screen.getByLabelText('Column Type'), 'Decimal');
-  await user.type(screen.getByLabelText('Formatting Rule'), ' {backspace}');
+  await user.type(
+    screen.getByLabelText('Formatting Rule'),
+    ' {Control>}A{/Control}{backspace}'
+  );
   expect(screen.queryByText(/Empty formatting rule\./)).toBeInTheDocument();
 });
 
@@ -215,7 +218,7 @@ it('should change the input value when column type is Integer', async () => {
   await user.selectOptions(screen.getByLabelText('Column Type'), 'Integer');
   await user.type(
     screen.getByLabelText('Formatting Rule'),
-    `{selectall}${newFormat}`
+    `{Control>}A{/Control}${newFormat}`
   );
 
   expect(screen.getByDisplayValue(newFormat)).toBeInTheDocument();

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

@@ -71,9 +71,6 @@ interface ColumnSpecificSectionContentState {
   showTimeZone: boolean;
   showTSeparator: boolean;
   timeZone: string;
-  defaultDateTimeFormat: string;
-  defaultDecimalFormatOptions: FormatOption;
-  defaultIntegerFormatOptions: FormatOption;
   truncateNumbersWithPound: boolean;
   timestampAtMenuOpen: Date;
 }
@@ -116,9 +113,6 @@ export class ColumnSpecificSectionContent extends PureComponent<
 
     const {
       formatter,
-      defaultDateTimeFormat,
-      defaultDecimalFormatOptions,
-      defaultIntegerFormatOptions,
       showTimeZone,
       showTSeparator,
       timeZone,
@@ -141,9 +135,6 @@ export class ColumnSpecificSectionContent extends PureComponent<
       showTimeZone,
       showTSeparator,
       timeZone,
-      defaultDateTimeFormat,
-      defaultDecimalFormatOptions,
-      defaultIntegerFormatOptions,
       truncateNumbersWithPound,
       timestampAtMenuOpen: new Date(),
     };
@@ -221,7 +212,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
         let resetKeys = {};
         if (key === 'columnType') {
           resetKeys = {
-            format: '',
+            format: this.makeDefaultFormatterItemByType(value as string),
           };
         }
         const newEntry = {
@@ -284,14 +275,18 @@ export class ColumnSpecificSectionContent extends PureComponent<
   commitChanges(): void {
     const {
       formatSettings,
-      defaultDateTimeFormat,
       showTimeZone,
       showTSeparator,
       timeZone,
-      defaultDecimalFormatOptions,
-      defaultIntegerFormatOptions,
       truncateNumbersWithPound,
     } = this.state;
+
+    const {
+      defaultDateTimeFormat,
+      defaultDecimalFormatOptions,
+      defaultIntegerFormatOptions,
+    } = this.props;
+
     const { dh } = this.props;
 
     const formatter =
@@ -390,6 +385,41 @@ export class ColumnSpecificSectionContent extends PureComponent<
     return error;
   }
 
+  makeDefaultFormatterItemByType(
+    columnType: string
+  ): TableColumnFormat | string {
+    switch (TableUtils.getNormalizedType(columnType)) {
+      case TableUtils.dataType.INT: {
+        const { defaultIntegerFormatOptions } = this.props;
+        const { defaultFormatString: defaultIntegerFormatString } =
+          defaultIntegerFormatOptions;
+        return IntegerColumnFormatter.makeFormat(
+          '',
+          defaultIntegerFormatString ??
+            IntegerColumnFormatter.DEFAULT_FORMAT_STRING,
+          IntegerColumnFormatter.TYPE_GLOBAL,
+          undefined
+        );
+      }
+
+      case TableUtils.dataType.DECIMAL: {
+        const { defaultDecimalFormatOptions } = this.props;
+        const { defaultFormatString: defaultDecimalFormatString } =
+          defaultDecimalFormatOptions;
+        return DecimalColumnFormatter.makeFormat(
+          '',
+          defaultDecimalFormatString ??
+            DecimalColumnFormatter.DEFAULT_FORMAT_STRING,
+          DecimalColumnFormatter.TYPE_GLOBAL,
+          undefined
+        );
+      }
+      default: {
+        return '';
+      }
+    }
+  }
+
   renderFormatRule(i: number, rule: FormatterItem): ReactElement {
     const columnNameId = `input-${i}-columnName`;
     const columnTypeId = `input-${i}-columnType`;
@@ -401,6 +431,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
       this.handleFormatRuleChange(i, 'isNewRule', false);
     const onTypeChange = (e: ChangeEvent<HTMLSelectElement>): void =>
       this.handleFormatRuleChange(i, 'columnType', e.target.value);
+
     const ruleError = this.getRuleError(rule);
 
     return (
@@ -511,6 +542,7 @@ export class ColumnSpecificSectionContent extends PureComponent<
     isInvalid: boolean
   ): ReactElement {
     const { showTimeZone, showTSeparator, timeZone } = this.state;
+
     const value = format.formatString ?? '';
     return (
       <select
@@ -544,6 +576,8 @@ export class ColumnSpecificSectionContent extends PureComponent<
     format: Partial<TableColumnFormat>,
     isInvalid: boolean
   ): ReactElement {
+    const { defaultIntegerFormatOptions } = this.props;
+    const { defaultFormatString } = defaultIntegerFormatOptions;
     const value = format.formatString ?? '';
     return (
       <input
@@ -552,7 +586,9 @@ export class ColumnSpecificSectionContent extends PureComponent<
         })}
         data-lpignore
         id={formatId}
-        placeholder={IntegerColumnFormatter.DEFAULT_FORMAT_STRING}
+        placeholder={
+          defaultFormatString ?? IntegerColumnFormatter.DEFAULT_FORMAT_STRING
+        }
         type="text"
         value={value}
         onChange={e => {
@@ -574,6 +610,9 @@ export class ColumnSpecificSectionContent extends PureComponent<
     format: Partial<TableColumnFormat>,
     isInvalid: boolean
   ): ReactElement {
+    const { defaultDecimalFormatOptions } = this.props;
+    const { defaultFormatString } = defaultDecimalFormatOptions;
+
     const value = format.formatString ?? '';
     return (
       <input
@@ -582,7 +621,9 @@ export class ColumnSpecificSectionContent extends PureComponent<
         })}
         data-lpignore
         id={formatId}
-        placeholder={DecimalColumnFormatter.DEFAULT_FORMAT_STRING}
+        placeholder={
+          defaultFormatString ?? DecimalColumnFormatter.DEFAULT_FORMAT_STRING
+        }
         type="text"
         value={value}
         onChange={e => {

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

@@ -617,7 +617,7 @@ export class FormattingSectionContent extends PureComponent<
                 checked={truncateNumbersWithPound ?? null}
                 onChange={this.handleTruncateNumbersWithPoundChange}
               >
-                Truncate numbers with #
+                Show truncated numbers as ###
               </Checkbox>
             </div>
           </div>