diff --git a/superset-frontend/.eslintrc.js b/superset-frontend/.eslintrc.js
index 5d15f87e423..45274955ea4 100644
--- a/superset-frontend/.eslintrc.js
+++ b/superset-frontend/.eslintrc.js
@@ -93,6 +93,17 @@ module.exports = {
         '@typescript-eslint/ban-ts-ignore': 0,
         '@typescript-eslint/ban-ts-comment': 0, // disabled temporarily
         '@typescript-eslint/ban-types': 0, // disabled temporarily
+        '@typescript-eslint/naming-convention': [
+          'error',
+          {
+            selector: 'enum',
+            format: ['PascalCase'],
+          },
+          {
+            selector: 'enumMember',
+            format: ['PascalCase'],
+          },
+        ],
         '@typescript-eslint/no-empty-function': 0,
         '@typescript-eslint/no-explicit-any': 0,
         '@typescript-eslint/no-use-before-define': 1, // disabled temporarily
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx
index 19ae7bd78d6..5962e942705 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/ColumnTypeLabel/ColumnTypeLabel.tsx
@@ -57,13 +57,13 @@ export function ColumnTypeLabel({ type }: ColumnTypeLabelProps) {
 
   if (type === '' || type === 'expression') {
     typeIcon = <FunctionSvg aria-label={t('function type icon')} />;
-  } else if (type === GenericDataType.STRING) {
+  } else if (type === GenericDataType.String) {
     typeIcon = <StringSvg aria-label={t('string type icon')} />;
-  } else if (type === GenericDataType.NUMERIC) {
+  } else if (type === GenericDataType.Numeric) {
     typeIcon = <NumSvg aria-label={t('numeric type icon')} />;
-  } else if (type === GenericDataType.BOOLEAN) {
+  } else if (type === GenericDataType.Boolean) {
     typeIcon = <BooleanSvg aria-label={t('boolean type icon')} />;
-  } else if (type === GenericDataType.TEMPORAL) {
+  } else if (type === GenericDataType.Temporal) {
     typeIcon = <ClockCircleOutlined aria-label={t('temporal type icon')} />;
   }
 
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/constants.ts b/superset-frontend/packages/superset-ui-chart-controls/src/constants.ts
index 1aefc25464b..4230d6683f6 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/constants.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/constants.ts
@@ -43,7 +43,7 @@ export const DATASET_TIME_COLUMN_OPTION: ColumnMeta = {
   verbose_name: COLUMN_NAME_ALIASES[DTTM_ALIAS],
   column_name: DTTM_ALIAS,
   type: 'TIMESTAMP',
-  type_generic: GenericDataType.TEMPORAL,
+  type_generic: GenericDataType.Temporal,
   description: t(
     'A reference to the [Time] configuration, taking granularity into account',
   ),
@@ -53,12 +53,12 @@ export const QUERY_TIME_COLUMN_OPTION: QueryColumn = {
   column_name: DTTM_ALIAS,
   is_dttm: true,
   type: 'TIMESTAMP',
-  type_generic: GenericDataType.TEMPORAL,
+  type_generic: GenericDataType.Temporal,
 };
 
 export const QueryModeLabel = {
-  [QueryMode.aggregate]: t('Aggregate'),
-  [QueryMode.raw]: t('Raw records'),
+  [QueryMode.Aggregate]: t('Aggregate'),
+  [QueryMode.Raw]: t('Raw records'),
 };
 
 export const DEFAULT_SORT_SERIES_DATA: SortSeriesData = {
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/fixtures.ts b/superset-frontend/packages/superset-ui-chart-controls/src/fixtures.ts
index b12d5be048e..efdfef6c4f1 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/fixtures.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/fixtures.ts
@@ -37,7 +37,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'BIGINT',
-      type_generic: GenericDataType.NUMERIC,
+      type_generic: GenericDataType.Numeric,
       verbose_name: null,
       warning_markdown: null,
     },
@@ -55,7 +55,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'VARCHAR(16)',
-      type_generic: GenericDataType.STRING,
+      type_generic: GenericDataType.String,
       verbose_name: '',
       warning_markdown: null,
     },
@@ -73,7 +73,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'VARCHAR(10)',
-      type_generic: GenericDataType.STRING,
+      type_generic: GenericDataType.String,
       verbose_name: null,
       warning_markdown: null,
     },
@@ -91,7 +91,7 @@ export const TestDataset: Dataset = {
       is_dttm: true,
       python_date_format: null,
       type: 'TIMESTAMP WITHOUT TIME ZONE',
-      type_generic: GenericDataType.TEMPORAL,
+      type_generic: GenericDataType.Temporal,
       verbose_name: null,
       warning_markdown: null,
     },
@@ -109,7 +109,7 @@ export const TestDataset: Dataset = {
       is_dttm: false,
       python_date_format: null,
       type: 'VARCHAR(255)',
-      type_generic: GenericDataType.STRING,
+      type_generic: GenericDataType.String,
       verbose_name: null,
       warning_markdown: null,
     },
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx
index b0f3006353d..7fb4f9a8b9e 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/shared-controls/customControls.tsx
@@ -60,7 +60,7 @@ function isForcedCategorical(controls: ControlStateMapping): boolean {
     checkColumnType(
       getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
       controls?.datasource?.datasource,
-      [GenericDataType.NUMERIC],
+      [GenericDataType.Numeric],
     ) && !!controls?.xAxisForceCategorical?.value
   );
 }
@@ -71,7 +71,7 @@ function isSortable(controls: ControlStateMapping): boolean {
     checkColumnType(
       getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
       controls?.datasource?.datasource,
-      [GenericDataType.STRING, GenericDataType.BOOLEAN],
+      [GenericDataType.String, GenericDataType.Boolean],
     )
   );
 }
@@ -173,7 +173,7 @@ export const xAxisForceCategoricalControl = {
       checkColumnType(
         getColumnLabel(controls?.x_axis?.value as QueryFormColumn),
         controls?.datasource?.datasource,
-        [GenericDataType.NUMERIC],
+        [GenericDataType.Numeric],
       ),
     shouldMapStateToProps: () => true,
   },
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
index 8aa475a7f9b..546936ee756 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/types.ts
@@ -420,29 +420,29 @@ export type SectionOverrides = {
 
 // Ref:
 //  - superset-frontend/src/explore/components/ConditionalFormattingControl.tsx
-export enum COMPARATOR {
-  NONE = 'None',
-  GREATER_THAN = '>',
-  LESS_THAN = '<',
-  GREATER_OR_EQUAL = '≥',
-  LESS_OR_EQUAL = '≤',
-  EQUAL = '=',
-  NOT_EQUAL = '≠',
-  BETWEEN = '< x <',
-  BETWEEN_OR_EQUAL = '≤ x ≤',
-  BETWEEN_OR_LEFT_EQUAL = '≤ x <',
-  BETWEEN_OR_RIGHT_EQUAL = '< x ≤',
+export enum Comparator {
+  None = 'None',
+  GreaterThan = '>',
+  LessThan = '<',
+  GreaterOrEqual = '≥',
+  LessOrEqual = '≤',
+  Equal = '=',
+  NotEqual = '≠',
+  Between = '< x <',
+  BetweenOrEqual = '≤ x ≤',
+  BetweenOrLeftEqual = '≤ x <',
+  BetweenOrRightEqual = '< x ≤',
 }
 
-export const MULTIPLE_VALUE_COMPARATORS = [
-  COMPARATOR.BETWEEN,
-  COMPARATOR.BETWEEN_OR_EQUAL,
-  COMPARATOR.BETWEEN_OR_LEFT_EQUAL,
-  COMPARATOR.BETWEEN_OR_RIGHT_EQUAL,
+export const MultipleValueComparators = [
+  Comparator.Between,
+  Comparator.BetweenOrEqual,
+  Comparator.BetweenOrLeftEqual,
+  Comparator.BetweenOrRightEqual,
 ];
 
 export type ConditionalFormattingConfig = {
-  operator?: COMPARATOR;
+  operator?: Comparator;
   targetValue?: number;
   targetValueLeft?: number;
   targetValueRight?: number;
diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
index 1a6aa140a6f..4e5e89fe411 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/utils/getColorFormatters.ts
@@ -20,9 +20,9 @@ import memoizeOne from 'memoize-one';
 import { addAlpha, DataRecord } from '@superset-ui/core';
 import {
   ColorFormatters,
-  COMPARATOR,
+  Comparator,
   ConditionalFormattingConfig,
-  MULTIPLE_VALUE_COMPARATORS,
+  MultipleValueComparators,
 } from '../types';
 
 export const round = (num: number, precision = 0) =>
@@ -75,20 +75,20 @@ export const getColorFunction = (
     return () => undefined;
   }
   if (
-    MULTIPLE_VALUE_COMPARATORS.includes(operator) &&
+    MultipleValueComparators.includes(operator) &&
     (targetValueLeft === undefined || targetValueRight === undefined)
   ) {
     return () => undefined;
   }
   if (
-    operator !== COMPARATOR.NONE &&
-    !MULTIPLE_VALUE_COMPARATORS.includes(operator) &&
+    operator !== Comparator.None &&
+    !MultipleValueComparators.includes(operator) &&
     targetValue === undefined
   ) {
     return () => undefined;
   }
   switch (operator) {
-    case COMPARATOR.NONE:
+    case Comparator.None:
       minOpacity = MIN_OPACITY_UNBOUNDED;
       comparatorFunction = (value: number, allValues: number[]) => {
         const cutoffValue = Math.min(...allValues);
@@ -98,37 +98,37 @@ export const getColorFunction = (
           : false;
       };
       break;
-    case COMPARATOR.GREATER_THAN:
+    case Comparator.GreaterThan:
       comparatorFunction = (value: number, allValues: number[]) =>
         value > targetValue!
           ? { cutoffValue: targetValue!, extremeValue: Math.max(...allValues) }
           : false;
       break;
-    case COMPARATOR.LESS_THAN:
+    case Comparator.LessThan:
       comparatorFunction = (value: number, allValues: number[]) =>
         value < targetValue!
           ? { cutoffValue: targetValue!, extremeValue: Math.min(...allValues) }
           : false;
       break;
-    case COMPARATOR.GREATER_OR_EQUAL:
+    case Comparator.GreaterOrEqual:
       comparatorFunction = (value: number, allValues: number[]) =>
         value >= targetValue!
           ? { cutoffValue: targetValue!, extremeValue: Math.max(...allValues) }
           : false;
       break;
-    case COMPARATOR.LESS_OR_EQUAL:
+    case Comparator.LessOrEqual:
       comparatorFunction = (value: number, allValues: number[]) =>
         value <= targetValue!
           ? { cutoffValue: targetValue!, extremeValue: Math.min(...allValues) }
           : false;
       break;
-    case COMPARATOR.EQUAL:
+    case Comparator.Equal:
       comparatorFunction = (value: number) =>
         value === targetValue!
           ? { cutoffValue: targetValue!, extremeValue: targetValue! }
           : false;
       break;
-    case COMPARATOR.NOT_EQUAL:
+    case Comparator.NotEqual:
       comparatorFunction = (value: number, allValues: number[]) => {
         if (value === targetValue!) {
           return false;
@@ -144,25 +144,25 @@ export const getColorFunction = (
         };
       };
       break;
-    case COMPARATOR.BETWEEN:
+    case Comparator.Between:
       comparatorFunction = (value: number) =>
         value > targetValueLeft! && value < targetValueRight!
           ? { cutoffValue: targetValueLeft!, extremeValue: targetValueRight! }
           : false;
       break;
-    case COMPARATOR.BETWEEN_OR_EQUAL:
+    case Comparator.BetweenOrEqual:
       comparatorFunction = (value: number) =>
         value >= targetValueLeft! && value <= targetValueRight!
           ? { cutoffValue: targetValueLeft!, extremeValue: targetValueRight! }
           : false;
       break;
-    case COMPARATOR.BETWEEN_OR_LEFT_EQUAL:
+    case Comparator.BetweenOrLeftEqual:
       comparatorFunction = (value: number) =>
         value >= targetValueLeft! && value < targetValueRight!
           ? { cutoffValue: targetValueLeft!, extremeValue: targetValueRight! }
           : false;
       break;
-    case COMPARATOR.BETWEEN_OR_RIGHT_EQUAL:
+    case Comparator.BetweenOrRightEqual:
       comparatorFunction = (value: number) =>
         value > targetValueLeft! && value <= targetValueRight!
           ? { cutoffValue: targetValueLeft!, extremeValue: targetValueRight! }
@@ -197,9 +197,9 @@ export const getColorFormatters = memoizeOne(
       (acc: ColorFormatters, config: ConditionalFormattingConfig) => {
         if (
           config?.column !== undefined &&
-          (config?.operator === COMPARATOR.NONE ||
+          (config?.operator === Comparator.None ||
             (config?.operator !== undefined &&
-              (MULTIPLE_VALUE_COMPARATORS.includes(config?.operator)
+              (MultipleValueComparators.includes(config?.operator)
                 ? config?.targetValueLeft !== undefined &&
                   config?.targetValueRight !== undefined
                 : config?.targetValue !== undefined)))
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
index b1fb4b26535..ff146862b8a 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnOption.test.tsx
@@ -65,7 +65,7 @@ describe('ColumnOption', () => {
         column: {
           column_name: 'foo',
           type: 'VARCHAR',
-          type_generic: GenericDataType.STRING,
+          type_generic: GenericDataType.String,
         },
       }),
     );
@@ -92,11 +92,11 @@ describe('ColumnOption', () => {
   it('dttm column has correct column label if showType is true', () => {
     props.showType = true;
     props.column.expression = undefined;
-    props.column.type_generic = GenericDataType.TEMPORAL;
+    props.column.type_generic = GenericDataType.Temporal;
     wrapper = shallow(factory(props));
     expect(wrapper.find(ColumnTypeLabel)).toHaveLength(1);
     expect(wrapper.find(ColumnTypeLabel).props().type).toBe(
-      GenericDataType.TEMPORAL,
+      GenericDataType.Temporal,
     );
   });
 });
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx
index 8369a790968..07cbfa7a23f 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/components/ColumnTypeLabel.test.tsx
@@ -25,7 +25,7 @@ import { ColumnTypeLabel, ColumnTypeLabelProps } from '../../src';
 
 describe('ColumnOption', () => {
   const defaultProps = {
-    type: GenericDataType.STRING,
+    type: GenericDataType.String,
   };
 
   const props = { ...defaultProps };
@@ -40,15 +40,15 @@ describe('ColumnOption', () => {
     );
   });
   it('string type shows ABC icon', () => {
-    renderColumnTypeLabel({ type: GenericDataType.STRING });
+    renderColumnTypeLabel({ type: GenericDataType.String });
     expect(screen.getByLabelText('string type icon')).toBeVisible();
   });
   it('int type shows # icon', () => {
-    renderColumnTypeLabel({ type: GenericDataType.NUMERIC });
+    renderColumnTypeLabel({ type: GenericDataType.Numeric });
     expect(screen.getByLabelText('numeric type icon')).toBeVisible();
   });
   it('bool type shows 1|0 icon', () => {
-    renderColumnTypeLabel({ type: GenericDataType.BOOLEAN });
+    renderColumnTypeLabel({ type: GenericDataType.Boolean });
     expect(screen.getByLabelText('boolean type icon')).toBeVisible();
   });
   it('expression type shows function icon', () => {
@@ -60,7 +60,7 @@ describe('ColumnOption', () => {
     expect(screen.getByLabelText('unknown type icon')).toBeVisible();
   });
   it('datetime type displays', () => {
-    renderColumnTypeLabel({ type: GenericDataType.TEMPORAL });
+    renderColumnTypeLabel({ type: GenericDataType.Temporal });
     expect(screen.getByLabelText('temporal type icon')).toBeVisible();
   });
 });
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/checkColumnType.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/checkColumnType.test.ts
index 44ebbf605cf..71b95f15456 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/checkColumnType.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/checkColumnType.test.ts
@@ -21,25 +21,25 @@ import { checkColumnType, TestDataset } from '../../src';
 
 test('checkColumnType columns from a Dataset', () => {
   expect(
-    checkColumnType('num', TestDataset, [GenericDataType.NUMERIC]),
+    checkColumnType('num', TestDataset, [GenericDataType.Numeric]),
   ).toEqual(true);
-  expect(checkColumnType('num', TestDataset, [GenericDataType.STRING])).toEqual(
+  expect(checkColumnType('num', TestDataset, [GenericDataType.String])).toEqual(
     false,
   );
   expect(
-    checkColumnType('gender', TestDataset, [GenericDataType.STRING]),
+    checkColumnType('gender', TestDataset, [GenericDataType.String]),
   ).toEqual(true);
   expect(
-    checkColumnType('gender', TestDataset, [GenericDataType.NUMERIC]),
+    checkColumnType('gender', TestDataset, [GenericDataType.Numeric]),
   ).toEqual(false);
 });
 
 test('checkColumnType from a QueryResponse', () => {
   expect(
-    checkColumnType('Column 1', testQueryResponse, [GenericDataType.STRING]),
+    checkColumnType('Column 1', testQueryResponse, [GenericDataType.String]),
   ).toEqual(true);
   expect(
-    checkColumnType('Column 1', testQueryResponse, [GenericDataType.NUMERIC]),
+    checkColumnType('Column 1', testQueryResponse, [GenericDataType.Numeric]),
   ).toEqual(false);
 });
 
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/columnChoices.test.tsx b/superset-frontend/packages/superset-ui-chart-controls/test/utils/columnChoices.test.tsx
index de5bb1ab698..2fac0e60e79 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/columnChoices.test.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/columnChoices.test.tsx
@@ -36,19 +36,19 @@ describe('columnChoices()', () => {
           {
             column_name: 'fiz',
             type: 'INT',
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           {
             column_name: 'about',
             verbose_name: 'right',
             type: 'VARCHAR',
-            type_generic: GenericDataType.STRING,
+            type_generic: GenericDataType.String,
           },
           {
             column_name: 'foo',
             verbose_name: undefined,
             type: 'TIMESTAMP',
-            type_generic: GenericDataType.TEMPORAL,
+            type_generic: GenericDataType.Temporal,
           },
         ],
         verbose_map: {},
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
index 7daa3f968d1..6551e815d74 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getColorFormatters.test.ts
@@ -18,7 +18,7 @@
  */
 import { configure } from '@superset-ui/core';
 import {
-  COMPARATOR,
+  Comparator,
   getOpacity,
   round,
   getColorFormatters,
@@ -60,7 +60,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction GREATER_THAN', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.GREATER_THAN,
+        operator: Comparator.GreaterThan,
         targetValue: 50,
         colorScheme: '#FF0000',
         column: 'count',
@@ -74,7 +74,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction LESS_THAN', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.LESS_THAN,
+        operator: Comparator.LessThan,
         targetValue: 100,
         colorScheme: '#FF0000',
         column: 'count',
@@ -88,7 +88,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction GREATER_OR_EQUAL', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.GREATER_OR_EQUAL,
+        operator: Comparator.GreaterOrEqual,
         targetValue: 50,
         colorScheme: '#FF0000',
         column: 'count',
@@ -103,7 +103,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction LESS_OR_EQUAL', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.LESS_OR_EQUAL,
+        operator: Comparator.LessOrEqual,
         targetValue: 100,
         colorScheme: '#FF0000',
         column: 'count',
@@ -118,7 +118,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction EQUAL', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.EQUAL,
+        operator: Comparator.Equal,
         targetValue: 100,
         colorScheme: '#FF0000',
         column: 'count',
@@ -132,7 +132,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction NOT_EQUAL', () => {
     let colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.NOT_EQUAL,
+        operator: Comparator.NotEqual,
         targetValue: 60,
         colorScheme: '#FF0000',
         column: 'count',
@@ -145,7 +145,7 @@ describe('getColorFunction()', () => {
 
     colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.NOT_EQUAL,
+        operator: Comparator.NotEqual,
         targetValue: 90,
         colorScheme: '#FF0000',
         column: 'count',
@@ -160,7 +160,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction BETWEEN', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.BETWEEN,
+        operator: Comparator.Between,
         targetValueLeft: 75,
         targetValueRight: 125,
         colorScheme: '#FF0000',
@@ -175,7 +175,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction BETWEEN_OR_EQUAL', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.BETWEEN_OR_EQUAL,
+        operator: Comparator.BetweenOrEqual,
         targetValueLeft: 50,
         targetValueRight: 100,
         colorScheme: '#FF0000',
@@ -191,7 +191,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction BETWEEN_OR_EQUAL without opacity', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.BETWEEN_OR_EQUAL,
+        operator: Comparator.BetweenOrEqual,
         targetValueLeft: 50,
         targetValueRight: 100,
         colorScheme: '#FF0000',
@@ -210,7 +210,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction BETWEEN_OR_LEFT_EQUAL', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.BETWEEN_OR_LEFT_EQUAL,
+        operator: Comparator.BetweenOrLeftEqual,
         targetValueLeft: 50,
         targetValueRight: 100,
         colorScheme: '#FF0000',
@@ -225,7 +225,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction BETWEEN_OR_RIGHT_EQUAL', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.BETWEEN_OR_RIGHT_EQUAL,
+        operator: Comparator.BetweenOrRightEqual,
         targetValueLeft: 50,
         targetValueRight: 100,
         colorScheme: '#FF0000',
@@ -240,7 +240,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction GREATER_THAN with target value undefined', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.GREATER_THAN,
+        operator: Comparator.GreaterThan,
         targetValue: undefined,
         colorScheme: '#FF0000',
         column: 'count',
@@ -254,7 +254,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction BETWEEN with target value left undefined', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.BETWEEN,
+        operator: Comparator.Between,
         targetValueLeft: undefined,
         targetValueRight: 100,
         colorScheme: '#FF0000',
@@ -269,7 +269,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction BETWEEN with target value right undefined', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.BETWEEN,
+        operator: Comparator.Between,
         targetValueLeft: 50,
         targetValueRight: undefined,
         colorScheme: '#FF0000',
@@ -299,7 +299,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction with operator None', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.NONE,
+        operator: Comparator.None,
         colorScheme: '#FF0000',
         column: 'count',
       },
@@ -329,7 +329,7 @@ describe('getColorFunction()', () => {
   it('getColorFunction with colorScheme undefined', () => {
     const colorFunction = getColorFunction(
       {
-        operator: COMPARATOR.GREATER_THAN,
+        operator: Comparator.GreaterThan,
         targetValue: 150,
         colorScheme: undefined,
         column: 'count',
@@ -345,26 +345,26 @@ describe('getColorFormatters()', () => {
   it('correct column config', () => {
     const columnConfig = [
       {
-        operator: COMPARATOR.GREATER_THAN,
+        operator: Comparator.GreaterThan,
         targetValue: 50,
         colorScheme: '#FF0000',
         column: 'count',
       },
       {
-        operator: COMPARATOR.LESS_THAN,
+        operator: Comparator.LessThan,
         targetValue: 300,
         colorScheme: '#FF0000',
         column: 'sum',
       },
       {
-        operator: COMPARATOR.BETWEEN,
+        operator: Comparator.Between,
         targetValueLeft: 75,
         targetValueRight: 125,
         colorScheme: '#FF0000',
         column: 'count',
       },
       {
-        operator: COMPARATOR.GREATER_THAN,
+        operator: Comparator.GreaterThan,
         targetValue: 150,
         colorScheme: '#FF0000',
         column: undefined,
diff --git a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts
index f0a6529de71..0379e059468 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts
+++ b/superset-frontend/packages/superset-ui-chart-controls/test/utils/getTemporalColumns.test.ts
@@ -61,7 +61,7 @@ test('get temporal columns from a QueryResponse', () => {
         column_name: 'Column 2',
         is_dttm: true,
         type: 'TIMESTAMP',
-        type_generic: GenericDataType.TEMPORAL,
+        type_generic: GenericDataType.Temporal,
       },
     ],
     defaultTemporalColumn: 'Column 2',
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartBuildQueryRegistrySingleton.ts b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartBuildQueryRegistrySingleton.ts
index 1c5a5ca02da..d94f2b37ae7 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartBuildQueryRegistrySingleton.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartBuildQueryRegistrySingleton.ts
@@ -43,7 +43,7 @@ export type BuildQuery<T = any> = (
 
 class ChartBuildQueryRegistry extends Registry<BuildQuery> {
   constructor() {
-    super({ name: 'ChartBuildQuery', overwritePolicy: OverwritePolicy.WARN });
+    super({ name: 'ChartBuildQuery', overwritePolicy: OverwritePolicy.Warn });
   }
 }
 
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartComponentRegistrySingleton.ts b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartComponentRegistrySingleton.ts
index ce7eba5b3f4..0375a19bdec 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartComponentRegistrySingleton.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartComponentRegistrySingleton.ts
@@ -22,7 +22,7 @@ import { ChartType } from '../models/ChartPlugin';
 
 class ChartComponentRegistry extends Registry<ChartType> {
   constructor() {
-    super({ name: 'ChartComponent', overwritePolicy: OverwritePolicy.WARN });
+    super({ name: 'ChartComponent', overwritePolicy: OverwritePolicy.Warn });
   }
 }
 
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartMetadataRegistrySingleton.ts b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartMetadataRegistrySingleton.ts
index bebcb5c5e1b..8c87661580a 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartMetadataRegistrySingleton.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartMetadataRegistrySingleton.ts
@@ -22,7 +22,7 @@ import ChartMetadata from '../models/ChartMetadata';
 
 class ChartMetadataRegistry extends Registry<ChartMetadata, ChartMetadata> {
   constructor() {
-    super({ name: 'ChartMetadata', overwritePolicy: OverwritePolicy.WARN });
+    super({ name: 'ChartMetadata', overwritePolicy: OverwritePolicy.Warn });
   }
 }
 
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartTransformPropsRegistrySingleton.ts b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartTransformPropsRegistrySingleton.ts
index 15542ad9c12..6bc11fc42fb 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartTransformPropsRegistrySingleton.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/registries/ChartTransformPropsRegistrySingleton.ts
@@ -24,7 +24,7 @@ class ChartTransformPropsRegistry extends Registry<TransformProps<any>> {
   constructor() {
     super({
       name: 'ChartTransformProps',
-      overwritePolicy: OverwritePolicy.WARN,
+      overwritePolicy: OverwritePolicy.Warn,
     });
   }
 }
diff --git a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
index b3884a84880..b24e5e850ec 100644
--- a/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
+++ b/superset-frontend/packages/superset-ui-core/src/chart/types/Base.ts
@@ -23,15 +23,15 @@ import { JsonObject } from '../..';
 export type HandlerFunction = (...args: unknown[]) => void;
 
 export enum Behavior {
-  INTERACTIVE_CHART = 'INTERACTIVE_CHART',
-  NATIVE_FILTER = 'NATIVE_FILTER',
+  InteractiveChart = 'INTERACTIVE_CHART',
+  NativeFilter = 'NATIVE_FILTER',
 
   /**
    * Include `DRILL_TO_DETAIL` behavior if plugin handles `contextmenu` event
    * when dimensions are right-clicked on.
    */
-  DRILL_TO_DETAIL = 'DRILL_TO_DETAIL',
-  DRILL_BY = 'DRILL_BY',
+  DrillToDetail = 'DRILL_TO_DETAIL',
+  DrillBy = 'DRILL_BY',
 }
 
 export interface ContextMenuFilters {
@@ -48,11 +48,11 @@ export interface ContextMenuFilters {
 }
 
 export enum AppSection {
-  EXPLORE = 'EXPLORE',
-  DASHBOARD = 'DASHBOARD',
-  FILTER_BAR = 'FILTER_BAR',
-  FILTER_CONFIG_MODAL = 'FILTER_CONFIG_MODAL',
-  EMBEDDED = 'EMBEDDED',
+  Explore = 'EXPLORE',
+  Dashboard = 'DASHBOARD',
+  FilterBar = 'FILTER_BAR',
+  FilterConfigModal = 'FILTER_CONFIG_MODAL',
+  Embedded = 'EMBEDDED',
 }
 
 export type FilterState = { value?: any; [key: string]: any };
@@ -73,31 +73,31 @@ export interface PlainObject {
 }
 
 export enum ChartLabel {
-  DEPRECATED = 'DEPRECATED',
-  FEATURED = 'FEATURED',
+  Deprecated = 'DEPRECATED',
+  Featured = 'FEATURED',
 }
 
 export const chartLabelExplanations: Record<ChartLabel, string> = {
-  [ChartLabel.DEPRECATED]:
+  [ChartLabel.Deprecated]:
     'This chart uses features or modules which are no longer actively maintained. It will eventually be replaced or removed.',
-  [ChartLabel.FEATURED]:
+  [ChartLabel.Featured]:
     'This chart was tested and verified, so the overall experience should be stable.',
 };
 
 export const chartLabelWeight: Record<ChartLabel, { weight: number }> = {
-  [ChartLabel.DEPRECATED]: {
+  [ChartLabel.Deprecated]: {
     weight: -0.1,
   },
-  [ChartLabel.FEATURED]: {
+  [ChartLabel.Featured]: {
     weight: 0.1,
   },
 };
 
 export enum AxisType {
-  category = 'category',
-  value = 'value',
-  time = 'time',
-  log = 'log',
+  Category = 'category',
+  Value = 'value',
+  Time = 'time',
+  Log = 'log',
 }
 
 export interface LegendState {
diff --git a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
index 5004dce2dd7..8b8cd02519e 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/CategoricalColorScale.ts
@@ -106,7 +106,7 @@ class CategoricalColorScale extends ExtensibleFunction {
       this.forcedColors?.[cleanedValue] ||
       sharedColor;
 
-    if (isFeatureEnabled(FeatureFlag.USE_ANALAGOUS_COLORS)) {
+    if (isFeatureEnabled(FeatureFlag.UseAnalagousColors)) {
       const multiple = Math.floor(
         this.domain().length / this.originColors.length,
       );
@@ -119,7 +119,7 @@ class CategoricalColorScale extends ExtensibleFunction {
     const newColor = this.scale(cleanedValue);
     if (!color) {
       color = newColor;
-      if (isFeatureEnabled(FeatureFlag.AVOID_COLORS_COLLISION)) {
+      if (isFeatureEnabled(FeatureFlag.AvoidColorsCollision)) {
         this.removeSharedLabelColorFromRange(sharedColorMap, cleanedValue);
         color = this.scale(cleanedValue);
       }
diff --git a/superset-frontend/packages/superset-ui-core/src/color/ColorSchemeRegistry.ts b/superset-frontend/packages/superset-ui-core/src/color/ColorSchemeRegistry.ts
index e270ff6f0ef..2601be82e52 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/ColorSchemeRegistry.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/ColorSchemeRegistry.ts
@@ -23,7 +23,7 @@ export default class ColorSchemeRegistry<T> extends RegistryWithDefaultKey<T> {
   constructor() {
     super({
       name: 'ColorScheme',
-      overwritePolicy: OverwritePolicy.WARN,
+      overwritePolicy: OverwritePolicy.Warn,
       setFirstItemAsDefault: true,
     });
   }
diff --git a/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts b/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts
index bc417e6036a..4837d0f362b 100644
--- a/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts
+++ b/superset-frontend/packages/superset-ui-core/src/color/SharedLabelColorSingleton.ts
@@ -21,8 +21,8 @@ import { CategoricalColorNamespace } from '.';
 import { makeSingleton } from '../utils';
 
 export enum SharedLabelColorSource {
-  dashboard,
-  explore,
+  Dashboard,
+  Explore,
 }
 export class SharedLabelColor {
   sliceLabelMap: Map<number, string[]>;
@@ -35,7 +35,7 @@ export class SharedLabelColor {
     // { sliceId1: [label1, label2, ...], sliceId2: [label1, label2, ...] }
     this.sliceLabelMap = new Map();
     this.colorMap = new Map();
-    this.source = SharedLabelColorSource.dashboard;
+    this.source = SharedLabelColorSource.Dashboard;
   }
 
   updateColorMap(colorNamespace?: string, colorScheme?: string) {
@@ -59,7 +59,7 @@ export class SharedLabelColor {
 
   addSlice(label: string, color: string, sliceId?: number) {
     if (
-      this.source !== SharedLabelColorSource.dashboard ||
+      this.source !== SharedLabelColorSource.Dashboard ||
       sliceId === undefined
     )
       return;
@@ -72,7 +72,7 @@ export class SharedLabelColor {
   }
 
   removeSlice(sliceId: number) {
-    if (this.source !== SharedLabelColorSource.dashboard) return;
+    if (this.source !== SharedLabelColorSource.Dashboard) return;
     this.sliceLabelMap.delete(sliceId);
     const newColorMap = new Map();
     this.sliceLabelMap.forEach(labels => {
diff --git a/superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown.tsx b/superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown.tsx
index 2b36802d4b4..e7fbe9ee5e1 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/SafeMarkdown.tsx
@@ -44,7 +44,7 @@ function SafeMarkdown({
   htmlSanitization = true,
   htmlSchemaOverrides = {},
 }: SafeMarkdownProps) {
-  const escapeHtml = isFeatureEnabled(FeatureFlag.ESCAPE_MARKDOWN_HTML);
+  const escapeHtml = isFeatureEnabled(FeatureFlag.EscapeMarkdownHtml);
 
   const rehypePlugins = useMemo(() => {
     const rehypePlugins: any = [];
diff --git a/superset-frontend/packages/superset-ui-core/src/models/Registry.ts b/superset-frontend/packages/superset-ui-core/src/models/Registry.ts
index e876bc2b50f..53aff08c4a4 100644
--- a/superset-frontend/packages/superset-ui-core/src/models/Registry.ts
+++ b/superset-frontend/packages/superset-ui-core/src/models/Registry.ts
@@ -17,9 +17,9 @@
  * under the License.
  */
 export enum OverwritePolicy {
-  ALLOW = 'ALLOW',
-  PROHIBIT = 'PROHIBIT',
-  WARN = 'WARN',
+  Allow = 'ALLOW',
+  Prohibit = 'PROHIBIT',
+  Warn = 'WARN',
 }
 
 interface ItemWithValue<T> {
@@ -89,7 +89,7 @@ export default class Registry<
   listeners: Set<Listener>;
 
   constructor(config: RegistryConfig = {}) {
-    const { name = '', overwritePolicy = OverwritePolicy.ALLOW } = config;
+    const { name = '', overwritePolicy = OverwritePolicy.Allow } = config;
     this.name = name;
     this.overwritePolicy = overwritePolicy;
     this.items = {};
@@ -119,12 +119,12 @@ export default class Registry<
       this.has(key) &&
       (('value' in item && item.value !== value) || 'loader' in item);
     if (willOverwrite) {
-      if (this.overwritePolicy === OverwritePolicy.WARN) {
+      if (this.overwritePolicy === OverwritePolicy.Warn) {
         // eslint-disable-next-line no-console
         console.warn(
           `Item with key "${key}" already exists. You are assigning a new value.`,
         );
-      } else if (this.overwritePolicy === OverwritePolicy.PROHIBIT) {
+      } else if (this.overwritePolicy === OverwritePolicy.Prohibit) {
         throw new Error(
           `Item with key "${key}" already exists. Cannot overwrite.`,
         );
@@ -145,12 +145,12 @@ export default class Registry<
       this.has(key) &&
       (('loader' in item && item.loader !== loader) || 'value' in item);
     if (willOverwrite) {
-      if (this.overwritePolicy === OverwritePolicy.WARN) {
+      if (this.overwritePolicy === OverwritePolicy.Warn) {
         // eslint-disable-next-line no-console
         console.warn(
           `Item with key "${key}" already exists. You are assigning a new value.`,
         );
-      } else if (this.overwritePolicy === OverwritePolicy.PROHIBIT) {
+      } else if (this.overwritePolicy === OverwritePolicy.Prohibit) {
         throw new Error(
           `Item with key "${key}" already exists. Cannot overwrite.`,
         );
diff --git a/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormatterRegistry.ts b/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormatterRegistry.ts
index e64796ad33c..db3ab11cece 100644
--- a/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormatterRegistry.ts
+++ b/superset-frontend/packages/superset-ui-core/src/number-format/NumberFormatterRegistry.ts
@@ -33,7 +33,7 @@ export default class NumberFormatterRegistry extends RegistryWithDefaultKey<
   constructor() {
     super({
       name: 'NumberFormatter',
-      overwritePolicy: OverwritePolicy.WARN,
+      overwritePolicy: OverwritePolicy.Warn,
     });
 
     this.registerValue(
diff --git a/superset-frontend/packages/superset-ui-core/src/query/api/v1/types.ts b/superset-frontend/packages/superset-ui-core/src/query/api/v1/types.ts
index 09ef1bc7d68..37cc002c415 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/api/v1/types.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/api/v1/types.ts
@@ -47,25 +47,25 @@ export interface SupersetApiRequestOptions {
  */
 export enum SupersetApiErrorType {
   // Generic unknown error
-  UNKNOWN_ERROR = 'UNKNOWN_ERROR',
+  UnknownError = 'UNKNOWN_ERROR',
 
   // Frontend errors
-  FRONTEND_CSRF_ERROR = 'FRONTEND_CSRF_ERROR',
-  FRONTEND_NETWORK_ERROR = 'FRONTEND_NETWORK_ERROR',
-  FRONTEND_TIMEOUT_ERROR = 'FRONTEND_TIMEOUT_ERROR',
+  FrontendCsrfError = 'FRONTEND_CSRF_ERROR',
+  FrontendNetworkError = 'FRONTEND_NETWORK_ERROR',
+  FrontendTimeoutError = 'FRONTEND_TIMEOUT_ERROR',
 
   // DB Engine errors,
-  GENERIC_DB_ENGINE_ERROR = 'GENERIC_DB_ENGINE_ERROR',
+  GenericDbEngineError = 'GENERIC_DB_ENGINE_ERROR',
 
   // Viz errors,
-  VIZ_GET_DF_ERROR = 'VIZ_GET_DF_ERROR',
-  UNKNOWN_DATASOURCE_TYPE_ERROR = 'UNKNOWN_DATASOURCE_TYPE_ERROR',
-  FAILED_FETCHING_DATASOURCE_INFO_ERROR = 'FAILED_FETCHING_DATASOURCE_INFO_ERROR',
+  VizGetDfError = 'VIZ_GET_DF_ERROR',
+  UnknownDatasourceTypeError = 'UNKNOWN_DATASOURCE_TYPE_ERROR',
+  FailedFetchingDatasourceInfoError = 'FAILED_FETCHING_DATASOURCE_INFO_ERROR',
 
   // Security access errors,
-  TABLE_SECURITY_ACCESS_ERROR = 'TABLE_SECURITY_ACCESS_ERROR',
-  DATASOURCE_SECURITY_ACCESS_ERROR = 'DATASOURCE_SECURITY_ACCESS_ERROR',
-  MISSING_OWNERSHIP_ERROR = 'MISSING_OWNERSHIP_ERROR',
+  TableSecurityAccessError = 'TABLE_SECURITY_ACCESS_ERROR',
+  DatasourceSecurityAccessError = 'DATASOURCE_SECURITY_ACCESS_ERROR',
+  MissingOwnershipError = 'MISSING_OWNERSHIP_ERROR',
 }
 
 /**
@@ -129,7 +129,7 @@ export class SupersetApiError extends Error {
           ].join('\n')
         : this.stack;
     this.name = 'SupersetApiError';
-    this.errorType = errorType || SupersetApiErrorType.UNKNOWN_ERROR;
+    this.errorType = errorType || SupersetApiErrorType.UnknownError;
     this.extra = extra || {};
     if (link) {
       this.extra.link = link;
diff --git a/superset-frontend/packages/superset-ui-core/src/query/extractQueryFields.ts b/superset-frontend/packages/superset-ui-core/src/query/extractQueryFields.ts
index bbd173e6172..6cb0af8eec8 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/extractQueryFields.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/extractQueryFields.ts
@@ -73,13 +73,13 @@ export default function extractQueryFields(
     // For charts that support both aggregate and raw records mode,
     // we store both `groupby` and `columns` in `formData`, so users can
     // switch between modes while retaining the selected options for each.
-    if (queryMode === QueryMode.aggregate && normalizedKey === 'columns') {
+    if (queryMode === QueryMode.Aggregate && normalizedKey === 'columns') {
       return;
     }
 
     // for the same reason, ignore groupby and metrics in raw records mode
     if (
-      queryMode === QueryMode.raw &&
+      queryMode === QueryMode.Raw &&
       (normalizedKey === 'groupby' || normalizedKey === 'metrics')
     ) {
       return;
@@ -106,7 +106,7 @@ export default function extractQueryFields(
       getColumnLabel,
     ),
     metrics:
-      queryMode === QueryMode.raw
+      queryMode === QueryMode.Raw
         ? undefined
         : removeDuplicates(metrics, getMetricLabel),
     orderby:
diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts
index 40939a1f502..cb299c3ac96 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/types/Dashboard.ts
@@ -40,8 +40,8 @@ export interface NativeFilterTarget {
 }
 
 export enum NativeFilterType {
-  NATIVE_FILTER = 'NATIVE_FILTER',
-  DIVIDER = 'DIVIDER',
+  NativeFilter = 'NATIVE_FILTER',
+  Divider = 'DIVIDER',
 }
 
 export enum DataMaskType {
@@ -76,7 +76,7 @@ export type Filter = {
   requiredFirst?: boolean;
   tabsInScope?: string[];
   chartsInScope?: number[];
-  type: typeof NativeFilterType.NATIVE_FILTER;
+  type: typeof NativeFilterType.NativeFilter;
   description: string;
 };
 
@@ -86,13 +86,13 @@ export type Divider = Partial<Omit<Filter, 'id' | 'type'>> & {
   id: string;
   title: string;
   description: string;
-  type: typeof NativeFilterType.DIVIDER;
+  type: typeof NativeFilterType.Divider;
 };
 
 export function isNativeFilter(
   filterElement: Filter | Divider,
 ): filterElement is Filter {
-  return filterElement.type === NativeFilterType.NATIVE_FILTER;
+  return filterElement.type === NativeFilterType.NativeFilter;
 }
 
 export function isNativeFilterWithDataMask(
@@ -107,7 +107,7 @@ export function isNativeFilterWithDataMask(
 export function isFilterDivider(
   filterElement: Filter | Divider,
 ): filterElement is Divider {
-  return filterElement.type === NativeFilterType.DIVIDER;
+  return filterElement.type === NativeFilterType.Divider;
 }
 
 export type FilterConfiguration = Array<Filter | Divider>;
diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts b/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts
index 1271be2fff8..488caaa6003 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/types/Query.ts
@@ -257,32 +257,32 @@ export type QueryColumn = {
 
 // Possible states of a query object for processing on the server
 export enum QueryState {
-  STARTED = 'started',
-  STOPPED = 'stopped',
-  FAILED = 'failed',
-  PENDING = 'pending',
-  RUNNING = 'running',
-  SCHEDULED = 'scheduled',
-  SUCCESS = 'success',
-  FETCHING = 'fetching',
-  TIMED_OUT = 'timed_out',
+  Started = 'started',
+  Stopped = 'stopped',
+  Failed = 'failed',
+  Pending = 'pending',
+  Running = 'running',
+  Scheduled = 'scheduled',
+  Success = 'success',
+  Fetching = 'fetching',
+  TimedOut = 'timed_out',
 }
 
 // Inidcates a Query's state is still processing
 export const runningQueryStateList: QueryState[] = [
-  QueryState.RUNNING,
-  QueryState.STARTED,
-  QueryState.PENDING,
-  QueryState.FETCHING,
-  QueryState.SCHEDULED,
+  QueryState.Running,
+  QueryState.Started,
+  QueryState.Pending,
+  QueryState.Fetching,
+  QueryState.Scheduled,
 ];
 
 // Indicates a Query's state has completed processing regardless of success / failure
 export const concludedQueryStateList: QueryState[] = [
-  QueryState.STOPPED,
-  QueryState.FAILED,
-  QueryState.SUCCESS,
-  QueryState.TIMED_OUT,
+  QueryState.Stopped,
+  QueryState.Failed,
+  QueryState.Success,
+  QueryState.TimedOut,
 ];
 
 export type Query = {
@@ -359,7 +359,7 @@ export const testQuery: Query = {
   isDataPreview: false,
   progress: 0,
   resultsKey: null,
-  state: QueryState.SUCCESS,
+  state: QueryState.Success,
   tempSchema: null,
   trackingUrl: null,
   templateParams: null,
@@ -385,19 +385,19 @@ export const testQuery: Query = {
       column_name: 'Column 1',
       type: 'STRING',
       is_dttm: false,
-      type_generic: GenericDataType.STRING,
+      type_generic: GenericDataType.String,
     },
     {
       column_name: 'Column 3',
       type: 'STRING',
       is_dttm: false,
-      type_generic: GenericDataType.STRING,
+      type_generic: GenericDataType.String,
     },
     {
       column_name: 'Column 2',
       type: 'TIMESTAMP',
       is_dttm: true,
-      type_generic: GenericDataType.TEMPORAL,
+      type_generic: GenericDataType.Temporal,
     },
   ],
 };
@@ -409,19 +409,19 @@ export const testQueryResults = {
       {
         column_name: 'Column 1',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
         is_dttm: false,
       },
       {
         column_name: 'Column 3',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
         is_dttm: false,
       },
       {
         column_name: 'Column 2',
         type: 'TIMESTAMP',
-        type_generic: GenericDataType.TEMPORAL,
+        type_generic: GenericDataType.Temporal,
         is_dttm: true,
       },
     ],
@@ -433,19 +433,19 @@ export const testQueryResults = {
       {
         column_name: 'Column 1',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
         is_dttm: false,
       },
       {
         column_name: 'Column 3',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
         is_dttm: false,
       },
       {
         column_name: 'Column 2',
         type: 'TIMESTAMP',
-        type_generic: GenericDataType.TEMPORAL,
+        type_generic: GenericDataType.Temporal,
         is_dttm: true,
       },
     ],
diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/QueryFormData.ts b/superset-frontend/packages/superset-ui-core/src/query/types/QueryFormData.ts
index 1806f567ec5..ea2f0d082c4 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/types/QueryFormData.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/types/QueryFormData.ts
@@ -59,8 +59,8 @@ export interface FormDataResidual {
 }
 
 export enum QueryMode {
-  aggregate = 'aggregate',
-  raw = 'raw',
+  Aggregate = 'aggregate',
+  Raw = 'raw',
 }
 
 /**
diff --git a/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts b/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts
index e4869805f81..1705814df11 100644
--- a/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts
+++ b/superset-frontend/packages/superset-ui-core/src/query/types/QueryResponse.ts
@@ -24,10 +24,10 @@ import { AnnotationData } from './AnnotationLayer';
  * Generic data types, see enum of the same name in superset/utils/core.py.
  */
 export enum GenericDataType {
-  NUMERIC = 0,
-  STRING = 1,
-  TEMPORAL = 2,
-  BOOLEAN = 3,
+  Numeric = 0,
+  String = 1,
+  Temporal = 2,
+  Boolean = 3,
 }
 
 /**
diff --git a/superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistry.ts b/superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistry.ts
index 1df16963063..e99517e8de1 100644
--- a/superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistry.ts
+++ b/superset-frontend/packages/superset-ui-core/src/time-format/TimeFormatterRegistry.ts
@@ -29,7 +29,7 @@ export default class TimeFormatterRegistry extends RegistryWithDefaultKey<
     super({
       initialDefaultKey: TimeFormats.DATABASE_DATETIME,
       name: 'TimeFormatter',
-      overwritePolicy: OverwritePolicy.WARN,
+      overwritePolicy: OverwritePolicy.Warn,
     });
   }
 
diff --git a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts b/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
index f21d20650cc..d913a0ad194 100644
--- a/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
+++ b/superset-frontend/packages/superset-ui-core/src/utils/featureFlags.ts
@@ -22,41 +22,42 @@ import logger from './logging';
 // check into source control. We're hardcoding the supported flags for now.
 export enum FeatureFlag {
   // PLEASE KEEP THE LIST SORTED ALPHABETICALLY
-  ALERTS_ATTACH_REPORTS = 'ALERTS_ATTACH_REPORTS',
-  ALERT_REPORTS = 'ALERT_REPORTS',
-  ALLOW_FULL_CSV_EXPORT = 'ALLOW_FULL_CSV_EXPORT',
-  AVOID_COLORS_COLLISION = 'AVOID_COLORS_COLLISION',
-  CHART_PLUGINS_EXPERIMENTAL = 'CHART_PLUGINS_EXPERIMENTAL',
-  CONFIRM_DASHBOARD_DIFF = 'CONFIRM_DASHBOARD_DIFF',
+  AlertsAttachReports = 'ALERTS_ATTACH_REPORTS',
+  AlertReports = 'ALERT_REPORTS',
+  AllowFullCsvExport = 'ALLOW_FULL_CSV_EXPORT',
+  AvoidColorsCollision = 'AVOID_COLORS_COLLISION',
+  ChartPluginsExperimental = 'ChartPluginsExperimental',
+  ConfirmDashboardDiff = 'CONFIRM_DASHBOARD_DIFF',
   /** @deprecated */
-  DASHBOARD_CROSS_FILTERS = 'DASHBOARD_CROSS_FILTERS',
-  DASHBOARD_VIRTUALIZATION = 'DASHBOARD_VIRTUALIZATION',
-  DASHBOARD_RBAC = 'DASHBOARD_RBAC',
-  DATAPANEL_CLOSED_BY_DEFAULT = 'DATAPANEL_CLOSED_BY_DEFAULT',
-  DISABLE_LEGACY_DATASOURCE_EDITOR = 'DISABLE_LEGACY_DATASOURCE_EDITOR',
-  DRILL_TO_DETAIL = 'DRILL_TO_DETAIL',
-  DRILL_BY = 'DRILL_BY',
-  DYNAMIC_PLUGINS = 'DYNAMIC_PLUGINS',
-  EMBEDDABLE_CHARTS = 'EMBEDDABLE_CHARTS',
-  EMBEDDED_SUPERSET = 'EMBEDDED_SUPERSET',
-  ENABLE_ADVANCED_DATA_TYPES = 'ENABLE_ADVANCED_DATA_TYPES',
+  DashboardCrossFilters = 'DASHBOARD_CROSS_FILTERS',
+  DashboardVirtualization = 'DASHBOARD_VIRTUALIZATION',
+  DashboardRbac = 'DASHBOARD_RBAC',
+  DatapanelClosedByDefault = 'DATAPANEL_CLOSED_BY_DEFAULT',
+  DisableLegacyDatasourceEditor = 'DISABLE_LEGACY_DATASOURCE_EDITOR',
+  DrillToDetail = 'DRILL_TO_DETAIL',
+  DrillBy = 'DRILL_BY',
+  DynamicPlugins = 'DYNAMIC_PLUGINS',
+  EmbeddableCharts = 'EMBEDDABLE_CHARTS',
+  EmbeddedSuperset = 'EMBEDDED_SUPERSET',
+  EnableAdvancedDataTypes = 'ENABLE_ADVANCED_DATA_TYPES',
   /** @deprecated */
-  ENABLE_JAVASCRIPT_CONTROLS = 'ENABLE_JAVASCRIPT_CONTROLS',
-  ENABLE_TEMPLATE_PROCESSING = 'ENABLE_TEMPLATE_PROCESSING',
-  ESCAPE_MARKDOWN_HTML = 'ESCAPE_MARKDOWN_HTML',
-  ESTIMATE_QUERY_COST = 'ESTIMATE_QUERY_COST',
-  GLOBAL_ASYNC_QUERIES = 'GLOBAL_ASYNC_QUERIES',
-  HORIZONTAL_FILTER_BAR = 'HORIZONTAL_FILTER_BAR',
-  LISTVIEWS_DEFAULT_CARD_VIEW = 'LISTVIEWS_DEFAULT_CARD_VIEW',
-  SCHEDULED_QUERIES = 'SCHEDULED_QUERIES',
-  SHARE_QUERIES_VIA_KV_STORE = 'SHARE_QUERIES_VIA_KV_STORE',
-  SQLLAB_BACKEND_PERSISTENCE = 'SQLLAB_BACKEND_PERSISTENCE',
-  SQL_VALIDATORS_BY_ENGINE = 'SQL_VALIDATORS_BY_ENGINE',
-  SSH_TUNNELING = 'SSH_TUNNELING',
-  TAGGING_SYSTEM = 'TAGGING_SYSTEM',
-  THUMBNAILS = 'THUMBNAILS',
-  USE_ANALAGOUS_COLORS = 'USE_ANALAGOUS_COLORS',
+  EnableJavascriptControls = 'ENABLE_JAVASCRIPT_CONTROLS',
+  EnableTemplateProcessing = 'ENABLE_TEMPLATE_PROCESSING',
+  EscapeMarkdownHtml = 'ESCAPE_MARKDOWN_HTML',
+  EstimateQueryCost = 'ESTIMATE_QUERY_COST',
+  GlobalAsyncQueries = 'GLOBAL_ASYNC_QUERIES',
+  HorizontalFilterBar = 'HORIZONTAL_FILTER_BAR',
+  ListviewsDefaultCardView = 'LISTVIEWS_DEFAULT_CARD_VIEW',
+  ScheduledQueries = 'SCHEDULED_QUERIES',
+  ShareQueriesViaKvStore = 'SHARE_QUERIES_VIA_KV_STORE',
+  SqllabBackendPersistence = 'SQLLAB_BACKEND_PERSISTENCE',
+  SqlValidatorsByEngine = 'SQL_VALIDATORS_BY_ENGINE',
+  SshTunneling = 'SSH_TUNNELING',
+  TaggingSystem = 'TAGGING_SYSTEM',
+  Thumbnails = 'THUMBNAILS',
+  UseAnalagousColors = 'USE_ANALAGOUS_COLORS',
 }
+
 export type ScheduleQueriesProps = {
   JSONSCHEMA: {
     [key: string]: string;
@@ -69,9 +70,9 @@ export type ScheduleQueriesProps = {
   };
 };
 export type FeatureFlagMap = {
-  [key in Exclude<FeatureFlag, FeatureFlag.SCHEDULED_QUERIES>]?: boolean;
+  [key in Exclude<FeatureFlag, FeatureFlag.ScheduledQueries>]?: boolean;
 } & {
-  SCHEDULED_QUERIES?: ScheduleQueriesProps;
+  ScheduledQueries?: ScheduleQueriesProps;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/superset-frontend/packages/superset-ui-core/test/chart/models/ChartProps.test.ts b/superset-frontend/packages/superset-ui-core/test/chart/models/ChartProps.test.ts
index ca7bcf94bd0..f9bd7d76a31 100644
--- a/superset-frontend/packages/superset-ui-core/test/chart/models/ChartProps.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/chart/models/ChartProps.test.ts
@@ -29,7 +29,7 @@ const RAW_DATASOURCE = {
 
 const QUERY_DATA = { data: {} };
 const QUERIES_DATA = [QUERY_DATA];
-const BEHAVIORS = [Behavior.NATIVE_FILTER, Behavior.INTERACTIVE_CHART];
+const BEHAVIORS = [Behavior.NativeFilter, Behavior.InteractiveChart];
 
 describe('ChartProps', () => {
   it('exists', () => {
diff --git a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts b/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts
index 0d98198de13..48e43d8351a 100644
--- a/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/color/CategoricalColorScale.test.ts
@@ -83,7 +83,7 @@ describe('CategoricalColorScale', () => {
     });
     it('recycles colors when number of items exceed available colors', () => {
       window.featureFlags = {
-        [FeatureFlag.USE_ANALAGOUS_COLORS]: false,
+        [FeatureFlag.UseAnalagousColors]: false,
       };
       const colorSet: { [key: string]: number } = {};
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
@@ -109,7 +109,7 @@ describe('CategoricalColorScale', () => {
     });
     it('get analogous colors when number of items exceed available colors', () => {
       window.featureFlags = {
-        [FeatureFlag.USE_ANALAGOUS_COLORS]: true,
+        [FeatureFlag.UseAnalagousColors]: true,
       };
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
       scale.getColor('pig');
@@ -123,7 +123,7 @@ describe('CategoricalColorScale', () => {
 
     it('should remove shared color from range if avoid colors collision enabled', () => {
       window.featureFlags = {
-        [FeatureFlag.AVOID_COLORS_COLLISION]: true,
+        [FeatureFlag.AvoidColorsCollision]: true,
       };
       const scale = new CategoricalColorScale(['blue', 'red', 'green']);
       const color1 = scale.getColor('a', 1);
@@ -136,7 +136,7 @@ describe('CategoricalColorScale', () => {
       expect(scale.range()).toHaveLength(1);
     });
     window.featureFlags = {
-      [FeatureFlag.AVOID_COLORS_COLLISION]: false,
+      [FeatureFlag.AvoidColorsCollision]: false,
     };
   });
   describe('.setColor(value, forcedColor)', () => {
diff --git a/superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts b/superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts
index 88610874dbd..8f89ae8a693 100644
--- a/superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/color/SharedLabelColorSingleton.test.ts
@@ -53,7 +53,7 @@ describe('SharedLabelColor', () => {
   });
 
   beforeEach(() => {
-    getSharedLabelColor().source = SharedLabelColorSource.dashboard;
+    getSharedLabelColor().source = SharedLabelColorSource.Dashboard;
     getSharedLabelColor().clear();
   });
 
@@ -95,7 +95,7 @@ describe('SharedLabelColor', () => {
 
     it('should do nothing when source is not dashboard', () => {
       const sharedLabelColor = getSharedLabelColor();
-      sharedLabelColor.source = SharedLabelColorSource.explore;
+      sharedLabelColor.source = SharedLabelColorSource.Explore;
       sharedLabelColor.addSlice('a', 'red');
       expect(Object.fromEntries(sharedLabelColor.sliceLabelMap)).toEqual({});
     });
@@ -127,7 +127,7 @@ describe('SharedLabelColor', () => {
     it('should do nothing when source is not dashboard', () => {
       const sharedLabelColor = getSharedLabelColor();
       sharedLabelColor.addSlice('a', 'red', 1);
-      sharedLabelColor.source = SharedLabelColorSource.explore;
+      sharedLabelColor.source = SharedLabelColorSource.Explore;
       sharedLabelColor.removeSlice(1);
       expect(sharedLabelColor.sliceLabelMap.has(1)).toEqual(true);
     });
@@ -151,7 +151,7 @@ describe('SharedLabelColor', () => {
 
     it('should use recycle colors', () => {
       window.featureFlags = {
-        [FeatureFlag.USE_ANALAGOUS_COLORS]: false,
+        [FeatureFlag.UseAnalagousColors]: false,
       };
       const sharedLabelColor = getSharedLabelColor();
       sharedLabelColor.addSlice('a', 'red', 1);
@@ -166,7 +166,7 @@ describe('SharedLabelColor', () => {
 
     it('should use analagous colors', () => {
       window.featureFlags = {
-        [FeatureFlag.USE_ANALAGOUS_COLORS]: true,
+        [FeatureFlag.UseAnalagousColors]: true,
       };
       const sharedLabelColor = getSharedLabelColor();
       sharedLabelColor.addSlice('a', 'red', 1);
diff --git a/superset-frontend/packages/superset-ui-core/test/fixtures.ts b/superset-frontend/packages/superset-ui-core/test/fixtures.ts
index c4d3cc6d1b2..c2c791531ea 100644
--- a/superset-frontend/packages/superset-ui-core/test/fixtures.ts
+++ b/superset-frontend/packages/superset-ui-core/test/fixtures.ts
@@ -24,7 +24,7 @@ export const NUM_METRIC: AdhocMetric = {
   column: {
     id: 336,
     type: 'BIGINT',
-    type_generic: GenericDataType.NUMERIC,
+    type_generic: GenericDataType.Numeric,
     column_name: 'num',
     verbose_name: null,
     description: null,
diff --git a/superset-frontend/packages/superset-ui-core/test/models/Registry.test.ts b/superset-frontend/packages/superset-ui-core/test/models/Registry.test.ts
index 11c2e65eb51..6f2067eec31 100644
--- a/superset-frontend/packages/superset-ui-core/test/models/Registry.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/models/Registry.test.ts
@@ -336,7 +336,7 @@ describe('Registry', () => {
         it('warns when overwrite', () => {
           const restoreConsole = mockConsole();
           const registry = new Registry({
-            overwritePolicy: OverwritePolicy.WARN,
+            overwritePolicy: OverwritePolicy.Warn,
           });
           registry.registerValue('a', 'testValue');
           expect(() => registry.registerValue('a', 'testValue2')).not.toThrow();
@@ -349,7 +349,7 @@ describe('Registry', () => {
         it('warns when overwrite', () => {
           const restoreConsole = mockConsole();
           const registry = new Registry({
-            overwritePolicy: OverwritePolicy.WARN,
+            overwritePolicy: OverwritePolicy.Warn,
           });
           registry.registerLoader('a', () => 'testValue');
           expect(() =>
@@ -365,7 +365,7 @@ describe('Registry', () => {
       describe('.registerValue(key, value)', () => {
         it('throws error when overwrite', () => {
           const registry = new Registry({
-            overwritePolicy: OverwritePolicy.PROHIBIT,
+            overwritePolicy: OverwritePolicy.Prohibit,
           });
           registry.registerValue('a', 'testValue');
           expect(() => registry.registerValue('a', 'testValue2')).toThrow();
@@ -374,7 +374,7 @@ describe('Registry', () => {
       describe('.registerLoader(key, loader)', () => {
         it('warns when overwrite', () => {
           const registry = new Registry({
-            overwritePolicy: OverwritePolicy.PROHIBIT,
+            overwritePolicy: OverwritePolicy.Prohibit,
           });
           registry.registerLoader('a', () => 'testValue');
           expect(() =>
diff --git a/superset-frontend/packages/superset-ui-core/test/query/api/v1/handleError.test.ts b/superset-frontend/packages/superset-ui-core/test/query/api/v1/handleError.test.ts
index eec7a47b9ab..72b1a0f4117 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/api/v1/handleError.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/api/v1/handleError.test.ts
@@ -105,7 +105,7 @@ describe('handleError()', () => {
     const mockError = {
       error: {
         message: 'Request timeout',
-        error_type: SupersetApiErrorType.FRONTEND_TIMEOUT_ERROR,
+        error_type: SupersetApiErrorType.FrontendTimeoutError,
       },
     };
     await testHandleError(mockError, {
diff --git a/superset-frontend/packages/superset-ui-core/test/query/extractQueryFields.test.ts b/superset-frontend/packages/superset-ui-core/test/query/extractQueryFields.test.ts
index 56004a06e7b..4e290137167 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/extractQueryFields.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/extractQueryFields.test.ts
@@ -124,7 +124,7 @@ describe('extractQueryFields', () => {
         columns: ['a'],
         groupby: ['b'],
         metric: ['m'],
-        query_mode: QueryMode.raw,
+        query_mode: QueryMode.Raw,
       }),
     ).toEqual({
       columns: ['a'],
@@ -139,7 +139,7 @@ describe('extractQueryFields', () => {
         columns: ['a'],
         groupby: [],
         metric: ['m'],
-        query_mode: QueryMode.aggregate,
+        query_mode: QueryMode.Aggregate,
       }),
     ).toEqual({
       metrics: ['m'],
@@ -151,7 +151,7 @@ describe('extractQueryFields', () => {
         columns: ['a'],
         groupby: ['b'],
         metric: ['m'],
-        query_mode: QueryMode.aggregate,
+        query_mode: QueryMode.Aggregate,
       }),
     ).toEqual({
       metrics: ['m'],
diff --git a/superset-frontend/packages/superset-ui-core/test/query/types/Dashboard.test.ts b/superset-frontend/packages/superset-ui-core/test/query/types/Dashboard.test.ts
index f72bff490f1..79d79809408 100644
--- a/superset-frontend/packages/superset-ui-core/test/query/types/Dashboard.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/query/types/Dashboard.test.ts
@@ -35,7 +35,7 @@ const filter: Filter = {
   filterType: 'filter_type',
   targets: [{}],
   controlValues: {},
-  type: NativeFilterType.NATIVE_FILTER,
+  type: NativeFilterType.NativeFilter,
   description: 'Filter description.',
 };
 
@@ -46,7 +46,7 @@ const filterWithDataMask: FilterWithDataMask = {
 
 const filterDivider: Divider = {
   id: 'divider_id',
-  type: NativeFilterType.DIVIDER,
+  type: NativeFilterType.Divider,
   title: 'Divider title',
   description: 'Divider description.',
 };
diff --git a/superset-frontend/packages/superset-ui-core/test/utils/featureFlag.test.ts b/superset-frontend/packages/superset-ui-core/test/utils/featureFlag.test.ts
index bad77690a4d..12a644c062a 100644
--- a/superset-frontend/packages/superset-ui-core/test/utils/featureFlag.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/utils/featureFlag.test.ts
@@ -51,7 +51,7 @@ it('returns false and raises console error if feature flags have not been initia
   Object.defineProperty(window, 'featureFlags', {
     value: undefined,
   });
-  expect(uiCore.isFeatureEnabled(uiCore.FeatureFlag.DRILL_BY)).toEqual(false);
+  expect(uiCore.isFeatureEnabled(uiCore.FeatureFlag.DrillBy)).toEqual(false);
   expect(uiCore.logging.error).toHaveBeenCalled();
   expect(logging).toHaveBeenCalledWith('Failed to query feature flag DRILL_BY');
 });
@@ -60,7 +60,7 @@ it('returns false for unset feature flag', () => {
   Object.defineProperty(window, 'featureFlags', {
     value: {},
   });
-  expect(uiCore.isFeatureEnabled(uiCore.FeatureFlag.DRILL_BY)).toEqual(false);
+  expect(uiCore.isFeatureEnabled(uiCore.FeatureFlag.DrillBy)).toEqual(false);
 });
 
 it('returns true for set feature flag', () => {
@@ -69,5 +69,5 @@ it('returns true for set feature flag', () => {
       DRILL_BY: true,
     },
   });
-  expect(uiCore.isFeatureEnabled(uiCore.FeatureFlag.DRILL_BY)).toEqual(true);
+  expect(uiCore.isFeatureEnabled(uiCore.FeatureFlag.DrillBy)).toEqual(true);
 });
diff --git a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
index fd5245f6910..0ae466efd1a 100644
--- a/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
+++ b/superset-frontend/packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table/testData.ts
@@ -45,10 +45,10 @@ export const basicFormData: TableChartFormData = {
 export const basicData: Partial<ChartDataResponseResult> = {
   colnames: ['name', 'sum__num', 'MAX(ds)', 'Abc.com'],
   coltypes: [
-    GenericDataType.STRING,
-    GenericDataType.NUMERIC,
-    GenericDataType.TEMPORAL,
-    GenericDataType.STRING,
+    GenericDataType.String,
+    GenericDataType.Numeric,
+    GenericDataType.Temporal,
+    GenericDataType.String,
   ],
   data: [
     {
diff --git a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js
index fa531ef9da1..0ec12b6c4d3 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-heatmap/src/transformProps.js
@@ -55,11 +55,11 @@ export default function transformProps(chartProps) {
     currencyFormat,
   );
   const xAxisFormatter =
-    coltypes[0] === GenericDataType.TEMPORAL
+    coltypes[0] === GenericDataType.Temporal
       ? getTimeFormatter(timeFormat)
       : String;
   const yAxisFormatter =
-    coltypes[1] === GenericDataType.TEMPORAL
+    coltypes[1] === GenericDataType.Temporal
       ? getTimeFormatter(timeFormat)
       : String;
   return {
diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
index 540097be243..6b69c6b2d8c 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/WorldMap.js
@@ -86,7 +86,7 @@ function WorldMap(element, props) {
 
   let processedData;
   let colorScale;
-  if (colorBy === ColorBy.country) {
+  if (colorBy === ColorBy.Country) {
     colorScale = CategoricalColorNamespace.getScale(colorScheme);
 
     processedData = filteredData.map(d => ({
diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts
index 2ca11373f36..82d8dcb1e26 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/controlPanel.ts
@@ -112,10 +112,10 @@ const config: ControlPanelConfig = {
             config: {
               type: 'RadioButtonControl',
               label: t('Color by'),
-              default: ColorBy.metric,
+              default: ColorBy.Metric,
               options: [
-                [ColorBy.metric, t('Metric')],
-                [ColorBy.country, t('Country')],
+                [ColorBy.Metric, t('Metric')],
+                [ColorBy.Country, t('Country')],
               ],
               description: t(
                 'Choose whether a country should be shaded by the metric, or assigned a color based on a categorical color palette',
@@ -148,12 +148,12 @@ const config: ControlPanelConfig = {
     linear_color_scheme: {
       label: t('Country Color Scheme'),
       visibility: ({ controls }) =>
-        Boolean(controls?.color_by.value === ColorBy.metric),
+        Boolean(controls?.color_by.value === ColorBy.Metric),
     },
     color_scheme: {
       label: t('Country Color Scheme'),
       visibility: ({ controls }) =>
-        Boolean(controls?.color_by.value === ColorBy.country),
+        Boolean(controls?.color_by.value === ColorBy.Country),
     },
   },
   formDataOverrides: formData => ({
diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js
index 95eb6b59fdc..8c2cf10d4f6 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/index.js
@@ -46,9 +46,9 @@ const metadata = new ChartMetadata({
   thumbnail,
   useLegacyApi: true,
   behaviors: [
-    Behavior.INTERACTIVE_CHART,
-    Behavior.DRILL_TO_DETAIL,
-    Behavior.DRILL_BY,
+    Behavior.InteractiveChart,
+    Behavior.DrillToDetail,
+    Behavior.DrillBy,
   ],
 });
 
diff --git a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts
index b558b15b97f..e8ac50e09c6 100644
--- a/superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-world-map/src/utils.ts
@@ -18,6 +18,6 @@
  */
 
 export enum ColorBy {
-  metric = 'metric',
-  country = 'country',
+  Metric = 'metric',
+  Country = 'country',
 }
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx
index 5b307efd906..723407c5ad6 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx
@@ -72,12 +72,12 @@ function jsFunctionControl(
         {extraDescr}
       </div>
     ),
-    warning: !isFeatureEnabled(FeatureFlag.ENABLE_JAVASCRIPT_CONTROLS)
+    warning: !isFeatureEnabled(FeatureFlag.EnableJavascriptControls)
       ? t(
           'This functionality is disabled in your environment for security reasons.',
         )
       : null,
-    readOnly: !isFeatureEnabled(FeatureFlag.ENABLE_JAVASCRIPT_CONTROLS),
+    readOnly: !isFeatureEnabled(FeatureFlag.EnableJavascriptControls),
   };
 }
 
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Area/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Area/index.js
index ba20a958c9c..b85a6457924 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Area/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Area/index.js
@@ -38,7 +38,7 @@ const metadata = new ChartMetadata({
     { url: example3, caption: t('Video game consoles') },
     { url: example4, caption: t('Vehicle Types') },
   ],
-  label: ChartLabel.DEPRECATED,
+  label: ChartLabel.Deprecated,
   name: t('Area Chart (legacy)'),
   supportedAnnotationTypes: [ANNOTATION_TYPES.INTERVAL, ANNOTATION_TYPES.EVENT],
   tags: [
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bar/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bar/index.js
index 33436be1484..d2f14b4b71c 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bar/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bar/index.js
@@ -32,7 +32,7 @@ const metadata = new ChartMetadata({
     'Visualize how a metric changes over time using bars. Add a group by column to visualize group level metrics and how they change over time.',
   ),
   exampleGallery: [{ url: example1 }, { url: example2 }, { url: example3 }],
-  label: ChartLabel.DEPRECATED,
+  label: ChartLabel.Deprecated,
   name: t('Time-series Bar Chart (legacy)'),
   supportedAnnotationTypes: [ANNOTATION_TYPES.INTERVAL, ANNOTATION_TYPES.EVENT],
   tags: [
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js
index c2916c7a429..f3cf1f2435a 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Bubble/index.js
@@ -29,7 +29,7 @@ const metadata = new ChartMetadata({
     'Visualizes a metric across three dimensions of data in a single chart (X axis, Y axis, and bubble size). Bubbles from the same group can be showcased using bubble color.',
   ),
   exampleGallery: [{ url: example }],
-  label: ChartLabel.DEPRECATED,
+  label: ChartLabel.Deprecated,
   name: t('Bubble Chart (legacy)'),
   tags: [
     t('Multi-Dimensions'),
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DistBar/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DistBar/index.js
index 66b98e4ccc7..b29277f8c73 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DistBar/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/DistBar/index.js
@@ -35,7 +35,7 @@ const metadata = new ChartMetadata({
     { url: example2, caption: 'Grouped style' },
     { url: example3 },
   ],
-  label: ChartLabel.DEPRECATED,
+  label: ChartLabel.Deprecated,
   name: t('Bar Chart (legacy)'),
   tags: [
     t('Additive'),
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Line/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Line/index.js
index 51db67edf24..c848e7accd7 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Line/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Line/index.js
@@ -35,7 +35,7 @@ const metadata = new ChartMetadata({
     { url: example2 },
     { url: battery, caption: t('Battery level over time') },
   ],
-  label: ChartLabel.DEPRECATED,
+  label: ChartLabel.Deprecated,
   name: t('Line Chart (legacy)'),
   supportedAnnotationTypes: [
     ANNOTATION_TYPES.TIME_SERIES,
diff --git a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Pie/index.js b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Pie/index.js
index 75b66fb933c..408656ea120 100644
--- a/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Pie/index.js
+++ b/superset-frontend/plugins/legacy-preset-chart-nvd3/src/Pie/index.js
@@ -24,7 +24,7 @@ import controlPanel from './controlPanel';
 const metadata = new ChartMetadata({
   credits: ['http://nvd3.org'],
   description: '',
-  label: ChartLabel.DEPRECATED,
+  label: ChartLabel.Deprecated,
   name: t('Pie Chart (legacy)'),
   thumbnail,
   useLegacyApi: true,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
index 39b97bfd3da..f949182a515 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/controlPanel.ts
@@ -113,7 +113,7 @@ export default {
                     ? colnames
                         .filter(
                           (colname: string, index: number) =>
-                            coltypes[index] === GenericDataType.NUMERIC,
+                            coltypes[index] === GenericDataType.Numeric,
                         )
                         .map(colname => ({
                           value: colname,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
index d92283d7cca..5137f819203 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/index.ts
@@ -46,7 +46,7 @@ const metadata = {
     t('Description'),
   ],
   thumbnail,
-  behaviors: [Behavior.DRILL_TO_DETAIL],
+  behaviors: [Behavior.DrillToDetail],
 };
 
 export default class BigNumberTotalChartPlugin extends EchartsChartPlugin<
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts
index 4a68e1ff9f0..757ecd3e612 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberTotal/transformProps.ts
@@ -85,8 +85,8 @@ export default function transformProps(
   );
 
   const headerFormatter =
-    coltypes[0] === GenericDataType.TEMPORAL ||
-    coltypes[0] === GenericDataType.STRING ||
+    coltypes[0] === GenericDataType.Temporal ||
+    coltypes[0] === GenericDataType.String ||
     forceTimestampFormatting
       ? formatTime
       : numberFormatter;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
index 80a21ad2290..2f8da6ef0f0 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/index.ts
@@ -45,7 +45,7 @@ const metadata = {
     t('Trend'),
   ],
   thumbnail,
-  behaviors: [Behavior.DRILL_TO_DETAIL],
+  behaviors: [Behavior.DrillToDetail],
 };
 
 export default class BigNumberWithTrendlineChartPlugin extends EchartsChartPlugin<
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
index ce35b657616..c5e9e704263 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberWithTrendline/transformProps.ts
@@ -185,8 +185,8 @@ export default function transformProps(
   );
 
   const headerFormatter =
-    metricColtype === GenericDataType.TEMPORAL ||
-    metricColtype === GenericDataType.STRING ||
+    metricColtype === GenericDataType.Temporal ||
+    metricColtype === GenericDataType.String ||
     forceTimestampFormatting
       ? formatTime
       : numberFormatter;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
index dc993048178..abe6fcd67b9 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/BoxPlot/index.ts
@@ -46,9 +46,9 @@ export default class EchartsBoxPlotChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsBoxPlot'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Distribution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts
index c07776c4ac0..362e75556a8 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/index.ts
@@ -35,7 +35,7 @@ export default class EchartsBubbleChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsBubble'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.InteractiveChart],
         category: t('Correlation'),
         credits: ['https://echarts.apache.org'],
         description: t(
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts
index 754b26003bb..7731e095e00 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Bubble/transformProps.ts
@@ -158,7 +158,7 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
     convertInteger(xAxisTitleMargin),
   );
 
-  const xAxisType = logXAxis ? AxisType.log : AxisType.value;
+  const xAxisType = logXAxis ? AxisType.Log : AxisType.Value;
   const echartOptions: EChartsCoreOption = {
     series,
     xAxis: {
@@ -196,7 +196,7 @@ export default function transformProps(chartProps: EchartsBubbleChartProps) {
       nameGap: convertInteger(yAxisTitleMargin),
       min: yAxisMin,
       max: yAxisMax,
-      type: logYAxis ? AxisType.log : AxisType.value,
+      type: logYAxis ? AxisType.Log : AxisType.Value,
     },
     legend: {
       ...getLegendProps(legendType, legendOrientation, showLegend, theme),
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
index da0b066753b..9cad10bf1e2 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/controlPanel.tsx
@@ -82,11 +82,14 @@ const config: ControlPanelConfig = {
                 'Display percents in the label and tooltip as the percent of the total value, from the first step of the funnel, or from the previous step in the funnel.',
               ),
               choices: [
-                [PercentCalcType.FIRST_STEP, t('Calculate from first step')],
-                [PercentCalcType.PREV_STEP, t('Calculate from previous step')],
-                [PercentCalcType.TOTAL, t('Percent of total')],
+                [PercentCalcType.FirstStep, t('Calculate from first step')],
+                [
+                  PercentCalcType.PreviousStep,
+                  t('Calculate from previous step'),
+                ],
+                [PercentCalcType.Total, t('Percent of total')],
               ],
-              default: PercentCalcType.FIRST_STEP,
+              default: PercentCalcType.FirstStep,
               renderTrigger: true,
             },
           },
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
index 9660f525713..d679aa150b3 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/index.ts
@@ -46,9 +46,9 @@ export default class EchartsFunnelChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsFunnel'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('KPI'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
index df43fe0a83d..dbfb33b2e46 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/transformProps.ts
@@ -54,7 +54,7 @@ export function formatFunnelLabel({
   params,
   labelType,
   numberFormatter,
-  percentCalculationType = PercentCalcType.FIRST_STEP,
+  percentCalculationType = PercentCalcType.FirstStep,
   sanitizeName = false,
 }: {
   params: Pick<CallbackDataParams, 'name' | 'value' | 'percent' | 'data'>;
@@ -72,9 +72,9 @@ export function formatFunnelLabel({
   };
   let percent;
 
-  if (percentCalculationType === PercentCalcType.TOTAL) {
+  if (percentCalculationType === PercentCalcType.Total) {
     percent = (totalPercent ?? 0) / 100;
-  } else if (percentCalculationType === PercentCalcType.PREV_STEP) {
+  } else if (percentCalculationType === PercentCalcType.PreviousStep) {
     percent = prevStepPercent ?? 0;
   } else {
     percent = firstStepPercent ?? 0;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts
index 51595622345..18a40267cf8 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Funnel/types.ts
@@ -82,7 +82,7 @@ export type FunnelChartTransformedProps =
     ContextMenuTransformedProps;
 
 export enum PercentCalcType {
-  TOTAL = 'total',
-  PREV_STEP = 'prev_step',
-  FIRST_STEP = 'first_step',
+  Total = 'total',
+  PreviousStep = 'prev_step',
+  FirstStep = 'first_step',
 }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
index 78f6c386c85..2d241856801 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Gauge/index.ts
@@ -37,9 +37,9 @@ export default class EchartsGaugeChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsGauge'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('KPI'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
index d95f3dd98e2..bdab9b6da86 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Graph/index.ts
@@ -50,9 +50,9 @@ export default class EchartsGraphChartPlugin extends EchartsChartPlugin {
         ],
         thumbnail,
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
       },
       transformProps,
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
index 9c871407ff6..0d04de15ba4 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/EchartsMixedTimeseries.tsx
@@ -142,7 +142,7 @@ export default function EchartsMixedTimeseries({
           ...(eventParams.name ? [eventParams.name] : []),
           ...(isFirst ? labelMap : labelMapB)[eventParams.seriesName],
         ];
-        if (data && xAxis.type === AxisType.time) {
+        if (data && xAxis.type === AxisType.Time) {
           drillToDetailFilters.push({
             col:
               xAxis.label === DTTM_ALIAS
@@ -155,7 +155,7 @@ export default function EchartsMixedTimeseries({
           });
         }
         [
-          ...(data && xAxis.type === AxisType.category ? [xAxis.label] : []),
+          ...(data && xAxis.type === AxisType.Category ? [xAxis.label] : []),
           ...(isFirst ? formData.groupby : formData.groupbyB),
         ].forEach((dimension, i) =>
           drillToDetailFilters.push({
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
index f87d8413291..3ebc7c4f0d5 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/index.ts
@@ -49,9 +49,9 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsMixedTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
index 1d4eceb33f3..cbe821d9362 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts
@@ -20,6 +20,7 @@
 import { invert } from 'lodash';
 import {
   AnnotationLayer,
+  AxisType,
   buildCustomFormatters,
   CategoricalColorNamespace,
   CurrencyFormatter,
@@ -460,11 +461,11 @@ export default function transformProps(
   }
 
   const tooltipFormatter =
-    xAxisDataType === GenericDataType.TEMPORAL
+    xAxisDataType === GenericDataType.Temporal
       ? getTooltipTimeFormatter(tooltipTimeFormat)
       : String;
   const xAxisFormatter =
-    xAxisDataType === GenericDataType.TEMPORAL
+    xAxisDataType === GenericDataType.Temporal
       ? getXAxisFormatter(xAxisTimeFormat)
       : String;
 
@@ -503,7 +504,7 @@ export default function transformProps(
       },
       minorTick: { show: minorTicks },
       minInterval:
-        xAxisType === 'time' && timeGrainSqla
+        xAxisType === AxisType.Time && timeGrainSqla
           ? TIMEGRAIN_TO_TIMESTAMP[timeGrainSqla]
           : 0,
       ...getMinAndMaxFromBounds(
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
index 7380f575e8a..6c022ec7235 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Pie/index.ts
@@ -49,9 +49,9 @@ export default class EchartsPieChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsPie'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Part of a Whole'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
index 3b423c5128e..62893974369 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/controlPanel.tsx
@@ -165,7 +165,7 @@ const config: ControlPanelConfig = {
               description: t('Further customize how to display each metric'),
               renderTrigger: true,
               configFormLayout: {
-                [GenericDataType.NUMERIC]: [[radarMetricMaxValue]],
+                [GenericDataType.Numeric]: [[radarMetricMaxValue]],
               },
               shouldMapStateToProps() {
                 return true;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
index 70f94f42f97..5a919febbcf 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Radar/index.ts
@@ -48,9 +48,9 @@ export default class EchartsRadarChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsRadar'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Ranking'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
index 43309d5d27c..94fb33c9044 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Sunburst/index.ts
@@ -33,9 +33,9 @@ export default class EchartsSunburstChartPlugin extends EchartsChartPlugin {
       loadChart: () => import('./EchartsSunburst'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Part of a Whole'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
index b0fdfed0fb5..eb3564bb917 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Area/index.ts
@@ -45,9 +45,9 @@ export default class EchartsAreaChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('../EchartsTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
index 0223382193a..78a57367086 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx
@@ -173,7 +173,7 @@ export default function EchartsTimeseries({
           ...(eventParams.name ? [eventParams.name] : []),
           ...(labelMap[seriesName] ?? []),
         ];
-        if (data && xAxis.type === AxisType.time) {
+        if (data && xAxis.type === AxisType.Time) {
           drillToDetailFilters.push({
             col:
               // if the xAxis is '__timestamp', granularity_sqla will be the column of filter
@@ -187,7 +187,7 @@ export default function EchartsTimeseries({
           });
         }
         [
-          ...(xAxis.type === AxisType.category && data ? [xAxis.label] : []),
+          ...(xAxis.type === AxisType.Category && data ? [xAxis.label] : []),
           ...formData.groupby,
         ].forEach((dimension, i) =>
           drillToDetailFilters.push({
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
index 50cf3549fc5..ba2f873a172 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/controlPanel.tsx
@@ -59,9 +59,9 @@ const {
 function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
   const isXAxis = axis === 'x';
   const isVertical = (controls: ControlStateMapping) =>
-    Boolean(controls?.orientation.value === OrientationType.vertical);
+    Boolean(controls?.orientation.value === OrientationType.Vertical);
   const isHorizontal = (controls: ControlStateMapping) =>
-    Boolean(controls?.orientation.value === OrientationType.horizontal);
+    Boolean(controls?.orientation.value === OrientationType.Horizontal);
   return [
     [
       {
@@ -148,9 +148,9 @@ function createAxisTitleControl(axis: 'x' | 'y'): ControlSetRow[] {
 function createAxisControl(axis: 'x' | 'y'): ControlSetRow[] {
   const isXAxis = axis === 'x';
   const isVertical = (controls: ControlStateMapping) =>
-    Boolean(controls?.orientation.value === OrientationType.vertical);
+    Boolean(controls?.orientation.value === OrientationType.Vertical);
   const isHorizontal = (controls: ControlStateMapping) =>
-    Boolean(controls?.orientation.value === OrientationType.horizontal);
+    Boolean(controls?.orientation.value === OrientationType.Horizontal);
   return [
     [
       {
@@ -272,8 +272,8 @@ const config: ControlPanelConfig = {
               label: t('Bar orientation'),
               default: orientation,
               options: [
-                [OrientationType.vertical, t('Vertical')],
-                [OrientationType.horizontal, t('Horizontal')],
+                [OrientationType.Vertical, t('Vertical')],
+                [OrientationType.Horizontal, t('Horizontal')],
               ],
               description: t('Orientation of bar chart'),
             },
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
index 8057c8f0df3..6e1962b4cfb 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Bar/index.ts
@@ -51,9 +51,9 @@ export default class EchartsTimeseriesBarChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('../../EchartsTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
index e83f19e59d7..c778e0719bc 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Line/index.ts
@@ -50,9 +50,9 @@ export default class EchartsTimeseriesLineChartPlugin extends EchartsChartPlugin
       loadChart: () => import('../../EchartsTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
index 753f9150d5a..931a790cc03 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/Scatter/index.ts
@@ -49,9 +49,9 @@ export default class EchartsTimeseriesScatterChartPlugin extends EchartsChartPlu
       loadChart: () => import('../../EchartsTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
index de6a1d38a9f..320e4752e43 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Regular/SmoothLine/index.ts
@@ -49,9 +49,9 @@ export default class EchartsTimeseriesSmoothLineChartPlugin extends EchartsChart
       loadChart: () => import('../../EchartsTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
index 91deb322be3..c581da3e001 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/Step/index.ts
@@ -40,9 +40,9 @@ export default class EchartsTimeseriesStepChartPlugin extends EchartsChartPlugin
       loadChart: () => import('../EchartsTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts
index 839bc607f77..96efd4a06a9 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/constants.ts
@@ -69,7 +69,7 @@ export const DEFAULT_FORM_DATA: EchartsTimeseriesFormData = {
   showValue: false,
   onlyTotal: false,
   percentageThreshold: 0,
-  orientation: OrientationType.vertical,
+  orientation: OrientationType.Vertical,
   sort_series_type: 'sum',
   sort_series_ascending: false,
 };
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
index dace33a1083..33623952e7d 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/index.ts
@@ -39,9 +39,9 @@ export default class EchartsTimeseriesChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsTimeseries'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Evolution'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
index a5c380c5ffb..b9e04b2e85c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts
@@ -204,7 +204,7 @@ export default function transformProps(
   ) {
     xAxisLabel = verboseMap[xAxisLabel];
   }
-  const isHorizontal = orientation === OrientationType.horizontal;
+  const isHorizontal = orientation === OrientationType.Horizontal;
   const { totalStackedValues, thresholdValues } = extractDataTotalValues(
     rebasedData,
     {
@@ -410,11 +410,11 @@ export default function transformProps(
   }
 
   const tooltipFormatter =
-    xAxisDataType === GenericDataType.TEMPORAL
+    xAxisDataType === GenericDataType.Temporal
       ? getTooltipTimeFormatter(tooltipTimeFormat)
       : String;
   const xAxisFormatter =
-    xAxisDataType === GenericDataType.TEMPORAL
+    xAxisDataType === GenericDataType.Temporal
       ? getXAxisFormatter(xAxisTimeFormat)
       : String;
 
@@ -461,7 +461,7 @@ export default function transformProps(
     },
     minorTick: { show: minorTicks },
     minInterval:
-      xAxisType === AxisType.time && timeGrainSqla
+      xAxisType === AxisType.Time && timeGrainSqla
         ? TIMEGRAIN_TO_TIMESTAMP[timeGrainSqla]
         : 0,
     ...getMinAndMaxFromBounds(
@@ -475,7 +475,7 @@ export default function transformProps(
 
   let yAxis: any = {
     ...defaultYAxis,
-    type: logAxis ? AxisType.log : AxisType.value,
+    type: logAxis ? AxisType.Log : AxisType.Value,
     min: yAxisMin,
     max: yAxisMax,
     minorTick: { show: minorTicks },
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
index 692abb2c795..dbecb483dac 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/types.ts
@@ -38,8 +38,8 @@ import {
 } from '../types';
 
 export enum OrientationType {
-  vertical = 'vertical',
-  horizontal = 'horizontal',
+  Vertical = 'vertical',
+  Horizontal = 'horizontal',
 }
 
 export enum EchartsTimeseriesSeriesType {
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
index d0359aff964..e461e68605a 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Treemap/index.ts
@@ -48,9 +48,9 @@ export default class EchartsTreemapChartPlugin extends EchartsChartPlugin<
       loadChart: () => import('./EchartsTreemap'),
       metadata: {
         behaviors: [
-          Behavior.INTERACTIVE_CHART,
-          Behavior.DRILL_TO_DETAIL,
-          Behavior.DRILL_BY,
+          Behavior.InteractiveChart,
+          Behavior.DrillToDetail,
+          Behavior.DrillBy,
         ],
         category: t('Part of a Whole'),
         credits: ['https://echarts.apache.org'],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
index b8c66fabb1a..f0f2e9e5cb7 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/index.ts
@@ -47,7 +47,7 @@ export default class EchartsWaterfallChartPlugin extends ChartPlugin<
       controlPanel,
       loadChart: () => import('./EchartsWaterfall'),
       metadata: new ChartMetadata({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.InteractiveChart],
         credits: ['https://echarts.apache.org'],
         category: t('Evolution'),
         description: t(
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
index 84fbbf6cb9f..edc29363f25 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/Waterfall/transformProps.ts
@@ -339,7 +339,7 @@ export default function transformProps(
     if (value === TOTAL_MARK) {
       return TOTAL_MARK;
     }
-    if (coltypeMapping[xAxisColumns[index]] === GenericDataType.TEMPORAL) {
+    if (coltypeMapping[xAxisColumns[index]] === GenericDataType.Temporal) {
       if (typeof value === 'string') {
         return getTimeFormatter(xAxisTimeFormat)(Number.parseInt(value, 10));
       }
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts
index d3d858d9792..df6515d204e 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/annotation.ts
@@ -25,13 +25,13 @@ import {
   AnnotationLayer,
   AnnotationOpacity,
   AnnotationType,
+  AxisType,
   DataRecord,
   evalExpression,
   FormulaAnnotationLayer,
   isRecordAnnotationResult,
   isTableAnnotationLayer,
   isTimeseriesAnnotationResult,
-  AxisType,
 } from '@superset-ui/core';
 import { EchartsTimeseriesChartProps } from '../types';
 import { EchartsMixedTimeseriesProps } from '../MixedTimeseries/types';
@@ -46,7 +46,7 @@ export function evalFormula(
 
   return data.map(row => {
     let value = row[xAxis];
-    if (xAxisType === 'time') {
+    if (xAxisType === AxisType.Time) {
       value = new Date(value as string).getTime();
     }
     return [value, evalExpression(expression, (value || 0) as number)];
diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
index 8c87bf4333c..cebfe374d9c 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts
@@ -364,7 +364,7 @@ export function formatSeriesName(
   if (typeof name === 'boolean') {
     return name.toString();
   }
-  if (name instanceof Date || coltype === GenericDataType.TEMPORAL) {
+  if (name instanceof Date || coltype === GenericDataType.Temporal) {
     const normalizedName =
       typeof name === 'string' ? normalizeTimestamp(name) : name;
     const d =
@@ -535,15 +535,15 @@ export function getAxisType(
   dataType?: GenericDataType,
 ): AxisType {
   if (forceCategorical) {
-    return AxisType.category;
+    return AxisType.Category;
   }
-  if (dataType === GenericDataType.TEMPORAL) {
-    return AxisType.time;
+  if (dataType === GenericDataType.Temporal) {
+    return AxisType.Time;
   }
-  if (dataType === GenericDataType.NUMERIC && !stack) {
-    return AxisType.value;
+  if (dataType === GenericDataType.Numeric && !stack) {
+    return AxisType.Value;
   }
-  return AxisType.category;
+  return AxisType.Category;
 }
 
 export function getOverMaxHiddenFormatter(
@@ -585,7 +585,7 @@ export function getMinAndMaxFromBounds(
   max?: number,
   seriesType?: EchartsTimeseriesSeriesType,
 ): BoundsType | {} {
-  if (axisType === AxisType.value && truncateAxis) {
+  if (axisType === AxisType.Value && truncateAxis) {
     const ret: BoundsType = {};
     if (seriesType === EchartsTimeseriesSeriesType.Bar) {
       ret.scale = true;
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
index 9c1d35cdd3f..4d326ab3020 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/Funnel/transformProps.test.ts
@@ -93,7 +93,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.Key,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
       }),
     ).toEqual('My Label');
     expect(
@@ -101,7 +101,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.Value,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
       }),
     ).toEqual('1.23k');
     expect(
@@ -109,7 +109,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.Percent,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
       }),
     ).toEqual('12.34%');
     expect(
@@ -117,7 +117,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.Percent,
-        percentCalculationType: PercentCalcType.FIRST_STEP,
+        percentCalculationType: PercentCalcType.FirstStep,
       }),
     ).toEqual('50.00%');
     expect(
@@ -125,7 +125,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.Percent,
-        percentCalculationType: PercentCalcType.PREV_STEP,
+        percentCalculationType: PercentCalcType.PreviousStep,
       }),
     ).toEqual('85.00%');
     expect(
@@ -133,7 +133,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.KeyValue,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
       }),
     ).toEqual('My Label: 1.23k');
     expect(
@@ -141,7 +141,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.KeyPercent,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
       }),
     ).toEqual('My Label: 12.34%');
     expect(
@@ -149,7 +149,7 @@ describe('formatFunnelLabel', () => {
         params,
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.KeyValuePercent,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
       }),
     ).toEqual('My Label: 1.23k (12.34%)');
     expect(
@@ -157,7 +157,7 @@ describe('formatFunnelLabel', () => {
         params: { ...params, name: '<NULL>' },
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.Key,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
       }),
     ).toEqual('<NULL>');
     expect(
@@ -165,7 +165,7 @@ describe('formatFunnelLabel', () => {
         params: { ...params, name: '<NULL>' },
         numberFormatter,
         labelType: EchartsFunnelLabelTypeType.Key,
-        percentCalculationType: PercentCalcType.TOTAL,
+        percentCalculationType: PercentCalcType.Total,
         sanitizeName: true,
       }),
     ).toEqual('&lt;NULL&gt;');
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts
index 59afebd7365..fd2f4acf249 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/annotation.test.ts
@@ -161,7 +161,7 @@ describe('evalFormula', () => {
       { __timestamp: 10 },
     ];
 
-    expect(evalFormula(layer, data, '__timestamp', AxisType.time)).toEqual([
+    expect(evalFormula(layer, data, '__timestamp', AxisType.Time)).toEqual([
       [0, 1],
       [10, 11],
     ]);
@@ -178,7 +178,7 @@ describe('evalFormula', () => {
         { ...layer, value: 'y  = x* 2   -1' },
         data,
         '__timestamp',
-        AxisType.time,
+        AxisType.Time,
       ),
     ).toEqual([
       [0, -1],
@@ -194,7 +194,7 @@ describe('evalFormula', () => {
         { ...layer, value: 'y = 1000' },
         data,
         'gender',
-        AxisType.category,
+        AxisType.Category,
       ),
     ).toEqual([
       ['boy', 1000],
diff --git a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts
index 10768a47f8d..6e4848643eb 100644
--- a/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts
+++ b/superset-frontend/plugins/plugin-chart-echarts/test/utils/series.test.ts
@@ -645,7 +645,7 @@ describe('formatSeriesName', () => {
     expect(
       formatSeriesName('1995-01-01 00:00:00.000000', {
         timeFormatter: annualTimeFormatter,
-        coltype: GenericDataType.TEMPORAL,
+        coltype: GenericDataType.Temporal,
       }),
     ).toEqual('1995');
   });
@@ -911,33 +911,33 @@ test('calculateLowerLogTick', () => {
 });
 
 test('getAxisType without forced categorical', () => {
-  expect(getAxisType(false, false, GenericDataType.TEMPORAL)).toEqual(
-    AxisType.time,
+  expect(getAxisType(false, false, GenericDataType.Temporal)).toEqual(
+    AxisType.Time,
   );
-  expect(getAxisType(false, false, GenericDataType.NUMERIC)).toEqual(
-    AxisType.value,
+  expect(getAxisType(false, false, GenericDataType.Numeric)).toEqual(
+    AxisType.Value,
   );
-  expect(getAxisType(true, false, GenericDataType.NUMERIC)).toEqual(
-    AxisType.category,
+  expect(getAxisType(true, false, GenericDataType.Numeric)).toEqual(
+    AxisType.Category,
   );
-  expect(getAxisType(false, false, GenericDataType.BOOLEAN)).toEqual(
-    AxisType.category,
+  expect(getAxisType(false, false, GenericDataType.Boolean)).toEqual(
+    AxisType.Category,
   );
-  expect(getAxisType(false, false, GenericDataType.STRING)).toEqual(
-    AxisType.category,
+  expect(getAxisType(false, false, GenericDataType.String)).toEqual(
+    AxisType.Category,
   );
 });
 
 test('getAxisType with forced categorical', () => {
-  expect(getAxisType(false, true, GenericDataType.NUMERIC)).toEqual(
-    AxisType.category,
+  expect(getAxisType(false, true, GenericDataType.Numeric)).toEqual(
+    AxisType.Category,
   );
 });
 
 test('getMinAndMaxFromBounds returns empty object when not truncating', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.value,
+      AxisType.Value,
       false,
       10,
       100,
@@ -949,7 +949,7 @@ test('getMinAndMaxFromBounds returns empty object when not truncating', () => {
 test('getMinAndMaxFromBounds returns empty object for categorical axis', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.category,
+      AxisType.Category,
       false,
       10,
       100,
@@ -961,7 +961,7 @@ test('getMinAndMaxFromBounds returns empty object for categorical axis', () => {
 test('getMinAndMaxFromBounds returns empty object for time axis', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.time,
+      AxisType.Time,
       false,
       10,
       100,
@@ -973,7 +973,7 @@ test('getMinAndMaxFromBounds returns empty object for time axis', () => {
 test('getMinAndMaxFromBounds returns dataMin/dataMax for non-bar charts', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.value,
+      AxisType.Value,
       true,
       undefined,
       undefined,
@@ -988,7 +988,7 @@ test('getMinAndMaxFromBounds returns dataMin/dataMax for non-bar charts', () =>
 test('getMinAndMaxFromBounds returns bound without scale for non-bar charts', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.value,
+      AxisType.Value,
       true,
       10,
       undefined,
@@ -1003,7 +1003,7 @@ test('getMinAndMaxFromBounds returns bound without scale for non-bar charts', ()
 test('getMinAndMaxFromBounds returns scale when truncating without bounds', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.value,
+      AxisType.Value,
       true,
       undefined,
       undefined,
@@ -1015,7 +1015,7 @@ test('getMinAndMaxFromBounds returns scale when truncating without bounds', () =
 test('getMinAndMaxFromBounds returns automatic upper bound when truncating', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.value,
+      AxisType.Value,
       true,
       10,
       undefined,
@@ -1030,7 +1030,7 @@ test('getMinAndMaxFromBounds returns automatic upper bound when truncating', ()
 test('getMinAndMaxFromBounds returns automatic lower bound when truncating', () => {
   expect(
     getMinAndMaxFromBounds(
-      AxisType.value,
+      AxisType.Value,
       true,
       undefined,
       100,
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/queryMode.tsx b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/queryMode.tsx
index b895b97f28a..87178cc466b 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/queryMode.tsx
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/queryMode.tsx
@@ -29,8 +29,8 @@ const queryMode: ControlConfig<'RadioButtonControl'> = {
   label: t('Query mode'),
   default: null,
   options: [
-    [QueryMode.aggregate, QueryModeLabel[QueryMode.aggregate]],
-    [QueryMode.raw, QueryModeLabel[QueryMode.raw]],
+    [QueryMode.Aggregate, QueryModeLabel[QueryMode.Aggregate]],
+    [QueryMode.Raw, QueryModeLabel[QueryMode.Raw]],
   ],
   mapStateToProps: ({ controls }) => ({ value: getQueryMode(controls) }),
   rerender: ['all_columns', 'groupby', 'metrics', 'percent_metrics'],
diff --git a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/shared.ts b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/shared.ts
index 5f364a2880b..2c65c478012 100644
--- a/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/shared.ts
+++ b/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/shared.ts
@@ -29,14 +29,14 @@ import {
 
 export function getQueryMode(controls: ControlStateMapping): QueryMode {
   const mode = controls?.query_mode?.value;
-  if (mode === QueryMode.aggregate || mode === QueryMode.raw) {
+  if (mode === QueryMode.Aggregate || mode === QueryMode.Raw) {
     return mode as QueryMode;
   }
   const rawColumns = controls?.all_columns?.value as
     | QueryFormColumn[]
     | undefined;
   const hasRawColumns = rawColumns && rawColumns.length > 0;
-  return hasRawColumns ? QueryMode.raw : QueryMode.aggregate;
+  return hasRawColumns ? QueryMode.Raw : QueryMode.Aggregate;
 }
 
 /**
@@ -47,8 +47,8 @@ export function isQueryMode(mode: QueryMode) {
     getQueryMode(controls) === mode;
 }
 
-export const isAggMode = isQueryMode(QueryMode.aggregate);
-export const isRawMode = isQueryMode(QueryMode.raw);
+export const isAggMode = isQueryMode(QueryMode.Aggregate);
+export const isRawMode = isQueryMode(QueryMode.Raw);
 
 export const validateAggControlValues = (
   controls: ControlStateMapping,
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
index 32f10b07717..c727e0cfcad 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
@@ -439,8 +439,8 @@ export default function PivotTableChart(props: PivotTableProps) {
       rowSubTotals,
       highlightHeaderCellsOnHover:
         emitCrossFilters ||
-        isFeatureEnabled(FeatureFlag.DRILL_BY) ||
-        isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL),
+        isFeatureEnabled(FeatureFlag.DrillBy) ||
+        isFeatureEnabled(FeatureFlag.DrillToDetail),
       highlightedHeaderCells: selectedFilters,
       omittedHighlightHeaderGroups: [METRIC_KEY],
       cellColorFormatters: { [METRIC_KEY]: metricColorFormatters },
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts
index 6963c67f0d5..c890c1a8f6a 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/index.ts
@@ -48,9 +48,9 @@ export default class PivotTableChartPlugin extends ChartPlugin<
   constructor() {
     const metadata = new ChartMetadata({
       behaviors: [
-        Behavior.INTERACTIVE_CHART,
-        Behavior.DRILL_TO_DETAIL,
-        Behavior.DRILL_BY,
+        Behavior.InteractiveChart,
+        Behavior.DrillToDetail,
+        Behavior.DrillBy,
       ],
       category: t('Table'),
       description: t(
diff --git a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts
index 76c58b895fe..b7f4451ce49 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/plugin/transformProps.ts
@@ -112,7 +112,7 @@ export default function transformProps(chartProps: ChartProps<QueryFormData>) {
   const dateFormatters = colnames
     .filter(
       (colname: string, index: number) =>
-        coltypes[index] === GenericDataType.TEMPORAL,
+        coltypes[index] === GenericDataType.Temporal,
     )
     .reduce(
       (
diff --git a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
index 6120e198034..857af565e9d 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
@@ -56,8 +56,8 @@ export type GetTableSize = () => Partial<StickyState> | undefined;
 export type SetStickyState = (size?: Partial<StickyState>) => void;
 
 export enum ReducerActions {
-  init = 'init', // this is from global reducer
-  setStickyState = 'setStickyState',
+  Init = 'init', // this is from global reducer
+  SetStickyState = 'setStickyState',
 }
 
 export type ReducerAction<
@@ -341,7 +341,7 @@ function useInstance<D extends object>(instance: TableInstance<D>) {
   const setStickyState = useCallback(
     (size?: Partial<StickyState>) => {
       dispatch({
-        type: ReducerActions.setStickyState,
+        type: ReducerActions.SetStickyState,
         size,
       });
     },
@@ -395,7 +395,7 @@ export default function useSticky<D extends object>(hooks: Hooks<D>) {
       ReducerActions,
       { size: StickyState }
     >;
-    if (action.type === ReducerActions.init) {
+    if (action.type === ReducerActions.Init) {
       return {
         ...newState,
         sticky: {
@@ -403,7 +403,7 @@ export default function useSticky<D extends object>(hooks: Hooks<D>) {
         },
       };
     }
-    if (action.type === ReducerActions.setStickyState) {
+    if (action.type === ReducerActions.SetStickyState) {
       const { size } = action;
       if (!size) {
         return { ...newState };
diff --git a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
index d106e42a84f..785e34f6314 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
@@ -81,10 +81,10 @@ const ACTION_KEYS = {
  * Return sortType based on data type
  */
 function getSortTypeByDataType(dataType: GenericDataType): DefaultSortTypes {
-  if (dataType === GenericDataType.TEMPORAL) {
+  if (dataType === GenericDataType.Temporal) {
     return 'datetime';
   }
-  if (dataType === GenericDataType.STRING) {
+  if (dataType === GenericDataType.String) {
     return 'alphanumeric';
   }
   return 'basic';
diff --git a/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts b/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts
index b8102a0cebe..69631a5f35e 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/buildQuery.ts
@@ -39,12 +39,12 @@ import { updateExternalFormData } from './DataTable/utils/externalAPIs';
  */
 export function getQueryMode(formData: TableChartFormData) {
   const { query_mode: mode } = formData;
-  if (mode === QueryMode.aggregate || mode === QueryMode.raw) {
+  if (mode === QueryMode.Aggregate || mode === QueryMode.Raw) {
     return mode;
   }
   const rawColumns = formData?.all_columns;
   const hasRawColumns = rawColumns && rawColumns.length > 0;
-  return hasRawColumns ? QueryMode.raw : QueryMode.aggregate;
+  return hasRawColumns ? QueryMode.Raw : QueryMode.Aggregate;
 }
 
 const buildQuery: BuildQuery<TableChartFormData> = (
@@ -62,7 +62,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
     extra_form_data?.time_grain_sqla || formData.time_grain_sqla;
   let formDataCopy = formData;
   // never include time in raw records mode
-  if (queryMode === QueryMode.raw) {
+  if (queryMode === QueryMode.Raw) {
     formDataCopy = {
       ...formData,
       include_time: false,
@@ -73,7 +73,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
     let { metrics, orderby = [], columns = [] } = baseQueryObject;
     let postProcessing: PostProcessingRule[] = [];
 
-    if (queryMode === QueryMode.aggregate) {
+    if (queryMode === QueryMode.Aggregate) {
       metrics = metrics || [];
       // override orderby with timeseries metric when in aggregation mode
       if (sortByMetric) {
@@ -161,7 +161,7 @@ const buildQuery: BuildQuery<TableChartFormData> = (
     if (
       metrics?.length &&
       formData.show_totals &&
-      queryMode === QueryMode.aggregate
+      queryMode === QueryMode.Aggregate
     ) {
       extraQueries.push({
         ...queryObject,
diff --git a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
index bb608e1c058..ad39b504cba 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
+++ b/superset-frontend/plugins/plugin-chart-table/src/controlPanel.tsx
@@ -50,14 +50,14 @@ import { PAGE_SIZE_OPTIONS } from './consts';
 
 function getQueryMode(controls: ControlStateMapping): QueryMode {
   const mode = controls?.query_mode?.value;
-  if (mode === QueryMode.aggregate || mode === QueryMode.raw) {
+  if (mode === QueryMode.Aggregate || mode === QueryMode.Raw) {
     return mode as QueryMode;
   }
   const rawColumns = controls?.all_columns?.value as
     | QueryFormColumn[]
     | undefined;
   const hasRawColumns = rawColumns && rawColumns.length > 0;
-  return hasRawColumns ? QueryMode.raw : QueryMode.aggregate;
+  return hasRawColumns ? QueryMode.Raw : QueryMode.Aggregate;
 }
 
 /**
@@ -68,8 +68,8 @@ function isQueryMode(mode: QueryMode) {
     getQueryMode(controls) === mode;
 }
 
-const isAggMode = isQueryMode(QueryMode.aggregate);
-const isRawMode = isQueryMode(QueryMode.raw);
+const isAggMode = isQueryMode(QueryMode.Aggregate);
+const isRawMode = isQueryMode(QueryMode.Raw);
 
 const validateAggControlValues = (
   controls: ControlStateMapping,
@@ -86,8 +86,8 @@ const queryMode: ControlConfig<'RadioButtonControl'> = {
   label: t('Query mode'),
   default: null,
   options: [
-    [QueryMode.aggregate, QueryModeLabel[QueryMode.aggregate]],
-    [QueryMode.raw, QueryModeLabel[QueryMode.raw]],
+    [QueryMode.Aggregate, QueryModeLabel[QueryMode.Aggregate]],
+    [QueryMode.Raw, QueryModeLabel[QueryMode.Raw]],
   ],
   mapStateToProps: ({ controls }) => ({ value: getQueryMode(controls) }),
   rerender: ['all_columns', 'groupby', 'metrics', 'percent_metrics'],
@@ -501,7 +501,7 @@ const config: ControlPanelConfig = {
                     ? colnames
                         .filter(
                           (colname: string, index: number) =>
-                            coltypes[index] === GenericDataType.NUMERIC,
+                            coltypes[index] === GenericDataType.Numeric,
                         )
                         .map(colname => ({
                           value: colname,
diff --git a/superset-frontend/plugins/plugin-chart-table/src/index.ts b/superset-frontend/plugins/plugin-chart-table/src/index.ts
index 3d7b1dcea79..ce250aa87c2 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/index.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/index.ts
@@ -32,9 +32,9 @@ export * from './types';
 
 const metadata = new ChartMetadata({
   behaviors: [
-    Behavior.INTERACTIVE_CHART,
-    Behavior.DRILL_TO_DETAIL,
-    Behavior.DRILL_BY,
+    Behavior.InteractiveChart,
+    Behavior.DrillToDetail,
+    Behavior.DrillBy,
   ],
   category: t('Table'),
   canBeAnnotationTypes: ['EVENT', 'INTERVAL'],
diff --git a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
index e76201cac30..c0eacfb5134 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/transformProps.ts
@@ -62,7 +62,7 @@ const processDataRecords = memoizeOne(function processDataRecords(
     return data || [];
   }
   const timeColumns = columns.filter(
-    column => column.dataType === GenericDataType.TEMPORAL,
+    column => column.dataType === GenericDataType.Temporal,
   );
 
   if (timeColumns.length > 0) {
@@ -122,8 +122,8 @@ const processColumns = memoizeOne(function processColumns(
         isPercentMetric && verboseMap?.hasOwnProperty(key.replace('%', ''))
           ? `%${verboseMap[key.replace('%', '')]}`
           : verboseMap?.[key] || key;
-      const isTime = dataType === GenericDataType.TEMPORAL;
-      const isNumber = dataType === GenericDataType.NUMERIC;
+      const isTime = dataType === GenericDataType.Temporal;
+      const isNumber = dataType === GenericDataType.Numeric;
       const savedFormat = columnFormats?.[key];
       const savedCurrency = currencyFormats?.[key];
       const numberFormat = config.d3NumberFormat || savedFormat;
@@ -172,7 +172,7 @@ const processColumns = memoizeOne(function processColumns(
         key,
         label,
         dataType,
-        isNumeric: dataType === GenericDataType.NUMERIC,
+        isNumeric: dataType === GenericDataType.Numeric,
         isMetric,
         isPercentMetric,
         formatter,
@@ -257,7 +257,7 @@ const transformProps = (
   }
   const data = processDataRecords(baseQuery?.data, columns);
   const totals =
-    showTotals && queryMode === QueryMode.aggregate
+    showTotals && queryMode === QueryMode.Aggregate
       ? totalQuery?.data[0]
       : undefined;
   const columnColorFormatters =
@@ -266,7 +266,7 @@ const transformProps = (
   return {
     height,
     width,
-    isRawRecords: queryMode === QueryMode.raw,
+    isRawRecords: queryMode === QueryMode.Raw,
     data,
     totals,
     columns,
diff --git a/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts b/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts
index 139f92336c1..43cddad0a59 100644
--- a/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts
+++ b/superset-frontend/plugins/plugin-chart-table/src/utils/formatValue.ts
@@ -60,7 +60,7 @@ export function formatColumnValue(
   value: DataRecordValue,
 ) {
   const { dataType, formatter, config = {} } = column;
-  const isNumber = dataType === GenericDataType.NUMERIC;
+  const isNumber = dataType === GenericDataType.Numeric;
   const smallNumberFormatter =
     config.d3SmallNumberFormat === undefined
       ? formatter
diff --git a/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts b/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts
index e196eae1086..a86f7d181ba 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts
+++ b/superset-frontend/plugins/plugin-chart-table/test/buildQuery.test.ts
@@ -30,7 +30,7 @@ describe('plugin-chart-table', () => {
     it('should add post-processing and ignore duplicate metrics', () => {
       const query = buildQuery({
         ...basicFormData,
-        query_mode: QueryMode.aggregate,
+        query_mode: QueryMode.Aggregate,
         metrics: ['aaa', 'aaa'],
         percent_metrics: ['bbb', 'bbb'],
       }).queries[0];
@@ -49,7 +49,7 @@ describe('plugin-chart-table', () => {
     it('should not add metrics in raw records mode', () => {
       const query = buildQuery({
         ...basicFormData,
-        query_mode: QueryMode.raw,
+        query_mode: QueryMode.Raw,
         columns: ['a'],
         metrics: ['aaa', 'aaa'],
         percent_metrics: ['bbb', 'bbb'],
@@ -61,7 +61,7 @@ describe('plugin-chart-table', () => {
     it('should not add post-processing when there is no percent metric', () => {
       const query = buildQuery({
         ...basicFormData,
-        query_mode: QueryMode.aggregate,
+        query_mode: QueryMode.Aggregate,
         metrics: ['aaa'],
         percent_metrics: [],
       }).queries[0];
@@ -72,7 +72,7 @@ describe('plugin-chart-table', () => {
     it('should not add post-processing in raw records mode', () => {
       const query = buildQuery({
         ...basicFormData,
-        query_mode: QueryMode.raw,
+        query_mode: QueryMode.Raw,
         metrics: ['aaa'],
         columns: ['rawcol'],
         percent_metrics: ['ccc'],
@@ -85,7 +85,7 @@ describe('plugin-chart-table', () => {
       const query = buildQuery({
         ...basicFormData,
         groupby: ['col1'],
-        query_mode: QueryMode.aggregate,
+        query_mode: QueryMode.Aggregate,
         time_grain_sqla: TimeGranularity.MONTH,
         extra_form_data: { time_grain_sqla: TimeGranularity.QUARTER },
         temporal_columns_lookup: { col1: true },
@@ -103,7 +103,7 @@ describe('plugin-chart-table', () => {
         ...basicFormData,
         time_grain_sqla: TimeGranularity.MONTH,
         groupby: ['col1'],
-        query_mode: QueryMode.aggregate,
+        query_mode: QueryMode.Aggregate,
         temporal_columns_lookup: { col1: true },
       }).queries[0];
       expect(query.columns?.[0]).toEqual({
diff --git a/superset-frontend/plugins/plugin-chart-table/test/testData.ts b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
index 1f255703f57..24abc3381e4 100644
--- a/superset-frontend/plugins/plugin-chart-table/test/testData.ts
+++ b/superset-frontend/plugins/plugin-chart-table/test/testData.ts
@@ -96,10 +96,10 @@ const basic: TableChartProps = {
       ...basicQueryResult,
       colnames: ['__timestamp', 'name', 'sum__num', 'abc.com'],
       coltypes: [
-        GenericDataType.TEMPORAL,
-        GenericDataType.STRING,
-        GenericDataType.NUMERIC,
-        GenericDataType.STRING,
+        GenericDataType.Temporal,
+        GenericDataType.String,
+        GenericDataType.Numeric,
+        GenericDataType.String,
       ],
       data: [
         {
@@ -165,9 +165,9 @@ const advanced: TableChartProps = {
       ...basicQueryResult,
       colnames: ['name', 'sum__num', '%pct_nice'],
       coltypes: [
-        GenericDataType.STRING,
-        GenericDataType.NUMERIC,
-        GenericDataType.NUMERIC,
+        GenericDataType.String,
+        GenericDataType.Numeric,
+        GenericDataType.Numeric,
       ],
       data: [...(basic.queriesData[0].data || [])],
     },
@@ -178,14 +178,14 @@ const raw = {
   ...advanced,
   rawFormData: {
     ...advanced.rawFormData,
-    query_mode: QueryMode.raw,
+    query_mode: QueryMode.Raw,
     columns: ['num'],
   },
   queriesData: [
     {
       ...basicQueryResult,
       colnames: ['num'],
-      coltypes: [GenericDataType.NUMERIC],
+      coltypes: [GenericDataType.Numeric],
       data: [
         {
           num: 1234,
diff --git a/superset-frontend/spec/fixtures/mockDashboardInfo.js b/superset-frontend/spec/fixtures/mockDashboardInfo.js
index b2f9f118322..4fd599ea3b4 100644
--- a/superset-frontend/spec/fixtures/mockDashboardInfo.js
+++ b/superset-frontend/spec/fixtures/mockDashboardInfo.js
@@ -38,5 +38,5 @@ export default {
     flash_messages: [],
     conf: { SUPERSET_WEBSERVER_TIMEOUT: 60 },
   },
-  filterBarOrientation: FilterBarOrientation.VERTICAL,
+  filterBarOrientation: FilterBarOrientation.Vertical,
 };
diff --git a/superset-frontend/spec/fixtures/mockNativeFilters.ts b/superset-frontend/spec/fixtures/mockNativeFilters.ts
index 1ff78467d68..070f48ab06b 100644
--- a/superset-frontend/spec/fixtures/mockNativeFilters.ts
+++ b/superset-frontend/spec/fixtures/mockNativeFilters.ts
@@ -52,7 +52,7 @@ export const nativeFilters: NativeFiltersState = {
         enableEmptyFilter: false,
         inverseSelection: false,
       },
-      type: NativeFilterType.NATIVE_FILTER,
+      type: NativeFilterType.NativeFilter,
       description: '',
       chartsInScope: [18],
     },
@@ -83,7 +83,7 @@ export const nativeFilters: NativeFiltersState = {
         enableEmptyFilter: false,
         inverseSelection: false,
       },
-      type: NativeFilterType.NATIVE_FILTER,
+      type: NativeFilterType.NativeFilter,
       description: '2 letter code',
       chartsInScope: [18],
     },
diff --git a/superset-frontend/spec/fixtures/mockStore.js b/superset-frontend/spec/fixtures/mockStore.js
index 1689555dd5a..df464f7b7b2 100644
--- a/superset-frontend/spec/fixtures/mockStore.js
+++ b/superset-frontend/spec/fixtures/mockStore.js
@@ -127,7 +127,7 @@ export const stateWithNativeFilters = {
     },
   },
   dashboardInfo: {
-    filterBarOrientation: FilterBarOrientation.VERTICAL,
+    filterBarOrientation: FilterBarOrientation.Vertical,
   },
 };
 
@@ -160,7 +160,7 @@ export const stateWithoutNativeFilters = {
   },
   dashboardInfo: {
     dash_edit_perm: true,
-    filterBarOrientation: FilterBarOrientation.VERTICAL,
+    filterBarOrientation: FilterBarOrientation.Vertical,
     metadata: {
       native_filter_configuration: [],
     },
diff --git a/superset-frontend/src/SqlLab/actions/sqlLab.js b/superset-frontend/src/SqlLab/actions/sqlLab.js
index e93538959d9..9cfd76e2e2d 100644
--- a/superset-frontend/src/SqlLab/actions/sqlLab.js
+++ b/superset-frontend/src/SqlLab/actions/sqlLab.js
@@ -108,8 +108,8 @@ export const addDangerToast = addDangerToastAction;
 export const addWarningToast = addWarningToastAction;
 
 export const CtasEnum = {
-  TABLE: 'TABLE',
-  VIEW: 'VIEW',
+  Table: 'TABLE',
+  View: 'VIEW',
 };
 const ERR_MSG_CANT_LOAD_QUERY = t("The query couldn't be loaded");
 
@@ -513,7 +513,7 @@ export function migrateQueryEditorFromLocalStorage(
 
 export function addQueryEditor(queryEditor) {
   return function (dispatch) {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.post({
           endpoint: '/tabstateview/',
           postPayload: { queryEditor },
@@ -562,7 +562,7 @@ export function addNewQueryEditor() {
       ...(unsavedQueryEditor.id === activeQueryEditor?.id &&
         unsavedQueryEditor),
     };
-    const warning = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const warning = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? ''
       : t(
           '-- Note: Unless you save your query, these tabs will NOT persist if you clear your cookies or change browsers.\n\n',
@@ -613,7 +613,7 @@ export function cloneQueryToNewTab(query, autorun) {
 
 export function setActiveQueryEditor(queryEditor) {
   return function (dispatch) {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.post({
           endpoint: encodeURI(`/tabstateview/${queryEditor.id}/activate`),
         })
@@ -676,7 +676,7 @@ export function setTables(tableSchemas) {
 export function switchQueryEditor(queryEditor, displayLimit) {
   return function (dispatch) {
     if (
-      isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE) &&
+      isFeatureEnabled(FeatureFlag.SqllabBackendPersistence) &&
       queryEditor &&
       !queryEditor.loaded
     ) {
@@ -735,7 +735,7 @@ export function toggleLeftBar(queryEditor) {
 
 export function removeQueryEditor(queryEditor) {
   return function (dispatch) {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.delete({
           endpoint: encodeURI(`/tabstateview/${queryEditor.id}`),
         })
@@ -768,7 +768,7 @@ export function removeAllOtherQueryEditors(queryEditor) {
 
 export function removeQuery(query) {
   return function (dispatch) {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.delete({
           endpoint: encodeURI(
             `/tabstateview/${query.sqlEditorId}/query/${query.id}`,
@@ -843,7 +843,7 @@ export function saveQuery(query, clientId) {
 
 export const addSavedQueryToTabState =
   (queryEditor, savedQuery) => dispatch => {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.put({
           endpoint: `/tabstateview/${queryEditor.id}`,
           postPayload: { saved_query_id: savedQuery.remoteId },
@@ -893,7 +893,7 @@ export function queryEditorSetAndSaveSql(targetQueryEditor, sql, queryId) {
     const queryEditor = getUpToDateQuery(getState(), targetQueryEditor);
     // saved query and set tab state use this action
     dispatch(queryEditorSetSql(queryEditor, sql, queryId));
-    if (isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)) {
+    if (isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)) {
       return SupersetClient.put({
         endpoint: encodeURI(`/tabstateview/${queryEditor.id}`),
         postPayload: { sql, latest_query_id: queryId },
@@ -1016,7 +1016,7 @@ export function runTablePreviewQuery(newTable) {
 
 export function syncTable(table, tableMetadata) {
   return function (dispatch) {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.post({
           endpoint: encodeURI('/tableschemaview/'),
           postPayload: { table: { ...tableMetadata, ...table } },
@@ -1075,7 +1075,7 @@ export function reFetchQueryResults(query) {
 
 export function expandTable(table) {
   return function (dispatch) {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.post({
           endpoint: encodeURI(`/tableschemaview/${table.id}/expanded`),
           postPayload: { expanded: true },
@@ -1099,7 +1099,7 @@ export function expandTable(table) {
 
 export function collapseTable(table) {
   return function (dispatch) {
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? SupersetClient.post({
           endpoint: encodeURI(`/tableschemaview/${table.id}/expanded`),
           postPayload: { expanded: false },
@@ -1124,7 +1124,7 @@ export function collapseTable(table) {
 export function removeTables(tables) {
   return function (dispatch) {
     const tablesToRemove = tables?.filter(Boolean) ?? [];
-    const sync = isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)
+    const sync = isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)
       ? Promise.all(
           tablesToRemove.map(table =>
             SupersetClient.delete({
diff --git a/superset-frontend/src/SqlLab/components/KeyboardShortcutButton/index.tsx b/superset-frontend/src/SqlLab/components/KeyboardShortcutButton/index.tsx
index 0599793d862..764884614c5 100644
--- a/superset-frontend/src/SqlLab/components/KeyboardShortcutButton/index.tsx
+++ b/superset-frontend/src/SqlLab/components/KeyboardShortcutButton/index.tsx
@@ -24,38 +24,38 @@ import { detectOS } from 'src/utils/common';
 const userOS = detectOS();
 
 export enum KeyboardShortcut {
-  CTRL_R = 'ctrl+r',
-  CTRL_ENTER = 'ctrl+enter',
-  CTRL_SHIFT_ENTER = 'ctrl+shift+enter',
-  CTRL_P = 'ctrl+p',
-  CTRL_Q = 'ctrl+q',
-  CTRL_E = 'ctrl+e',
-  CTRL_T = 'ctrl+t',
-  CTRL_X = 'ctrl+x',
-  ALT_ENTER = 'alt+enter',
-  CMD_F = 'cmd+f',
-  CMD_OPT_F = 'cmd+opt+f',
-  CTRL_F = 'ctrl+f',
-  CTRL_H = 'ctrl+h',
-  CTRL_SHIFT_F = 'ctrl+shift+f',
+  CtrlR = 'ctrl+r',
+  CtrlEnter = 'ctrl+enter',
+  CtrlShiftEnter = 'ctrl+shift+enter',
+  CtrlP = 'ctrl+p',
+  CtrlQ = 'ctrl+q',
+  CtrlE = 'ctrl+e',
+  CtrlT = 'ctrl+t',
+  CtrlX = 'ctrl+x',
+  AltEnter = 'alt+enter',
+  CmdF = 'cmd+f',
+  CmdOptF = 'cmd+opt+f',
+  CtrlF = 'ctrl+f',
+  CtrlH = 'ctrl+h',
+  CtrlShiftF = 'ctrl+shift+f',
 }
 
 export const KEY_MAP = {
-  [KeyboardShortcut.CTRL_R]: t('Run query'),
-  [KeyboardShortcut.CTRL_ENTER]: t('Run query'),
-  [KeyboardShortcut.ALT_ENTER]: t('Run query'),
-  [KeyboardShortcut.CTRL_SHIFT_ENTER]: t('Run current query'),
-  [KeyboardShortcut.CTRL_X]: userOS === 'MacOS' ? t('Stop query') : undefined,
-  [KeyboardShortcut.CTRL_E]: userOS !== 'MacOS' ? t('Stop query') : undefined,
-  [KeyboardShortcut.CTRL_Q]: userOS === 'Windows' ? t('New tab') : undefined,
-  [KeyboardShortcut.CTRL_T]: userOS !== 'Windows' ? t('New tab') : undefined,
-  [KeyboardShortcut.CTRL_P]: t('Previous Line'),
-  [KeyboardShortcut.CTRL_SHIFT_F]: t('Format SQL'),
+  [KeyboardShortcut.CtrlR]: t('Run query'),
+  [KeyboardShortcut.CtrlEnter]: t('Run query'),
+  [KeyboardShortcut.AltEnter]: t('Run query'),
+  [KeyboardShortcut.CtrlShiftEnter]: t('Run current query'),
+  [KeyboardShortcut.CtrlX]: userOS === 'MacOS' ? t('Stop query') : undefined,
+  [KeyboardShortcut.CtrlE]: userOS !== 'MacOS' ? t('Stop query') : undefined,
+  [KeyboardShortcut.CtrlQ]: userOS === 'Windows' ? t('New tab') : undefined,
+  [KeyboardShortcut.CtrlT]: userOS !== 'Windows' ? t('New tab') : undefined,
+  [KeyboardShortcut.CtrlP]: t('Previous Line'),
+  [KeyboardShortcut.CtrlShiftF]: t('Format SQL'),
   // default ace editor shortcuts
-  [KeyboardShortcut.CMD_F]: userOS === 'MacOS' ? t('Find') : undefined,
-  [KeyboardShortcut.CTRL_F]: userOS !== 'MacOS' ? t('Find') : undefined,
-  [KeyboardShortcut.CMD_OPT_F]: userOS === 'MacOS' ? t('Replace') : undefined,
-  [KeyboardShortcut.CTRL_H]: userOS !== 'MacOS' ? t('Replace') : undefined,
+  [KeyboardShortcut.CmdF]: userOS === 'MacOS' ? t('Find') : undefined,
+  [KeyboardShortcut.CtrlF]: userOS !== 'MacOS' ? t('Find') : undefined,
+  [KeyboardShortcut.CmdOptF]: userOS === 'MacOS' ? t('Replace') : undefined,
+  [KeyboardShortcut.CtrlH]: userOS !== 'MacOS' ? t('Replace') : undefined,
 };
 
 const KeyMapByCommand = Object.entries(KEY_MAP).reduce(
diff --git a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
index 58e55a1df79..358802d5445 100644
--- a/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ResultSet/index.tsx
@@ -69,11 +69,11 @@ import ExploreResultsButton from '../ExploreResultsButton';
 import HighlightedSql from '../HighlightedSql';
 import QueryStateLabel from '../QueryStateLabel';
 
-enum LIMITING_FACTOR {
-  QUERY = 'QUERY',
-  QUERY_AND_DROPDOWN = 'QUERY_AND_DROPDOWN',
-  DROPDOWN = 'DROPDOWN',
-  NOT_LIMITED = 'NOT_LIMITED',
+enum LimitingFactor {
+  Query = 'QUERY',
+  QueryAndDropdown = 'QUERY_AND_DROPDOWN',
+  Dropdown = 'DROPDOWN',
+  NotLimited = 'NOT_LIMITED',
 }
 
 export interface ResultSetProps {
@@ -338,23 +338,22 @@ const ResultSet = ({
       ),
     };
     const shouldUseDefaultDropdownAlert =
-      limit === defaultQueryLimit &&
-      limitingFactor === LIMITING_FACTOR.DROPDOWN;
+      limit === defaultQueryLimit && limitingFactor === LimitingFactor.Dropdown;
 
-    if (limitingFactor === LIMITING_FACTOR.QUERY && csv) {
+    if (limitingFactor === LimitingFactor.Query && csv) {
       limitMessage = t(
         'The number of rows displayed is limited to %(rows)d by the query',
         { rows },
       );
     } else if (
-      limitingFactor === LIMITING_FACTOR.DROPDOWN &&
+      limitingFactor === LimitingFactor.Dropdown &&
       !shouldUseDefaultDropdownAlert
     ) {
       limitMessage = t(
         'The number of rows displayed is limited to %(rows)d by the limit dropdown.',
         { rows },
       );
-    } else if (limitingFactor === LIMITING_FACTOR.QUERY_AND_DROPDOWN) {
+    } else if (limitingFactor === LimitingFactor.QueryAndDropdown) {
       limitMessage = t(
         'The number of rows displayed is limited to %(rows)d by the query and limit dropdown.',
         { rows },
@@ -444,8 +443,8 @@ const ResultSet = ({
   let trackingUrl;
   if (
     query.trackingUrl &&
-    query.state !== QueryState.SUCCESS &&
-    query.state !== QueryState.FETCHING
+    query.state !== QueryState.Success &&
+    query.state !== QueryState.Fetching
   ) {
     trackingUrl = (
       <Button
@@ -454,7 +453,7 @@ const ResultSet = ({
         href={query.trackingUrl}
         target="_blank"
       >
-        {query.state === QueryState.RUNNING
+        {query.state === QueryState.Running
           ? t('Track job')
           : t('See query details')}
       </Button>
@@ -470,11 +469,11 @@ const ResultSet = ({
     );
   }
 
-  if (query.state === QueryState.STOPPED) {
+  if (query.state === QueryState.Stopped) {
     return <Alert type="warning" message={t('Query was stopped')} />;
   }
 
-  if (query.state === QueryState.FAILED) {
+  if (query.state === QueryState.Failed) {
     return (
       <ResultlessStyles>
         <ErrorMessageWithStackTrace
@@ -490,10 +489,10 @@ const ResultSet = ({
     );
   }
 
-  if (query.state === QueryState.SUCCESS && query.ctas) {
+  if (query.state === QueryState.Success && query.ctas) {
     const { tempSchema, tempTable } = query;
     let object = 'Table';
-    if (query.ctas_method === CtasEnum.VIEW) {
+    if (query.ctas_method === CtasEnum.View) {
       object = 'View';
     }
     return (
@@ -529,7 +528,7 @@ const ResultSet = ({
     );
   }
 
-  if (query.state === QueryState.SUCCESS && query.results) {
+  if (query.state === QueryState.Success && query.results) {
     const { results } = query;
     // Accounts for offset needed for height of ResultSetRowsReturned component if !limitReached
     const rowMessageHeight = !limitReached ? 32 : 0;
@@ -608,7 +607,7 @@ const ResultSet = ({
     }
   }
 
-  if (query.cached || (query.state === QueryState.SUCCESS && !query.results)) {
+  if (query.cached || (query.state === QueryState.Success && !query.results)) {
     if (query.isDataPreview) {
       return (
         <Button
diff --git a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
index 8e90f1c664d..885265fe8d2 100644
--- a/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SaveDatasetModal/index.tsx
@@ -164,7 +164,7 @@ export const SaveDatasetModal = ({
     `${datasource?.name || UNTITLED} ${moment().format('L HH:mm:ss')}`;
   const [datasetName, setDatasetName] = useState(getDefaultDatasetName());
   const [newOrOverwrite, setNewOrOverwrite] = useState(
-    DatasetRadioState.SAVE_NEW,
+    DatasetRadioState.SaveNew,
   );
   const [shouldOverwriteDataset, setShouldOverwriteDataset] = useState(false);
   const [datasetToOverwrite, setDatasetToOverwrite] = useState<
@@ -337,9 +337,9 @@ export const SaveDatasetModal = ({
   };
 
   const disableSaveAndExploreBtn =
-    (newOrOverwrite === DatasetRadioState.SAVE_NEW &&
+    (newOrOverwrite === DatasetRadioState.SaveNew &&
       datasetName.length === 0) ||
-    (newOrOverwrite === DatasetRadioState.OVERWRITE_DATASET &&
+    (newOrOverwrite === DatasetRadioState.OverwriteDataset &&
       isEmpty(selectedDatasetToOverwrite));
 
   const filterAutocompleteOption = (
@@ -354,7 +354,7 @@ export const SaveDatasetModal = ({
       onHide={onHide}
       footer={
         <>
-          {newOrOverwrite === DatasetRadioState.SAVE_NEW && (
+          {newOrOverwrite === DatasetRadioState.SaveNew && (
             <Button
               disabled={disableSaveAndExploreBtn}
               buttonStyle="primary"
@@ -364,7 +364,7 @@ export const SaveDatasetModal = ({
               {buttonTextOnSave}
             </Button>
           )}
-          {newOrOverwrite === DatasetRadioState.OVERWRITE_DATASET && (
+          {newOrOverwrite === DatasetRadioState.OverwriteDataset && (
             <>
               {shouldOverwriteDataset && (
                 <Button onClick={handleOverwriteCancel}>{t('Back')}</Button>
diff --git a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
index a123576c3e4..8f4cde1a66f 100644
--- a/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ShareSqlLabQuery/index.tsx
@@ -92,7 +92,7 @@ const ShareSqlLabQuery = ({
     }
   };
   const getCopyUrl = (callback: Function) => {
-    if (isFeatureEnabled(FeatureFlag.SHARE_QUERIES_VIA_KV_STORE)) {
+    if (isFeatureEnabled(FeatureFlag.ShareQueriesViaKvStore)) {
       return getCopyUrlForKvStore(callback);
     }
     return getCopyUrlForSavedQuery(callback);
@@ -116,7 +116,7 @@ const ShareSqlLabQuery = ({
   };
 
   const canShare =
-    !!remoteId || isFeatureEnabled(FeatureFlag.SHARE_QUERIES_VIA_KV_STORE);
+    !!remoteId || isFeatureEnabled(FeatureFlag.ShareQueriesViaKvStore);
 
   return (
     <>
diff --git a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
index 38a20f9f6df..9aa0b75755a 100644
--- a/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SouthPane/index.tsx
@@ -164,7 +164,7 @@ const SouthPane = ({
         latestQuery.errors = latestQuery.extra.errors;
       }
       if (
-        isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE) &&
+        isFeatureEnabled(FeatureFlag.SqllabBackendPersistence) &&
         latestQuery.state === 'success' &&
         !latestQuery.resultsKey &&
         !latestQuery.results
diff --git a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
index 0e6a4845d50..82132536851 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditor/index.tsx
@@ -279,7 +279,7 @@ const SqlEditor: React.FC<Props> = ({
     queryEditor.southPercent || INITIAL_SOUTH_PERCENT,
   );
   const [autocompleteEnabled, setAutocompleteEnabled] = useState(
-    getItem(LocalStorageKeys.sqllab__is_autocomplete_enabled, true),
+    getItem(LocalStorageKeys.SqllabIsAutocompleteEnabled, true),
   );
   const [showCreateAsModal, setShowCreateAsModal] = useState(false);
   const [createAs, setCreateAs] = useState('');
@@ -291,7 +291,7 @@ const SqlEditor: React.FC<Props> = ({
   const SqlFormExtension = extensionsRegistry.get('sqleditor.extension.form');
 
   const startQuery = useCallback(
-    (ctasArg = false, ctas_method = CtasEnum.TABLE) => {
+    (ctasArg = false, ctas_method = CtasEnum.Table) => {
       if (!database) {
         return;
       }
@@ -348,8 +348,8 @@ const SqlEditor: React.FC<Props> = ({
     return [
       {
         name: 'runQuery1',
-        key: KeyboardShortcut.CTRL_R,
-        descr: KEY_MAP[KeyboardShortcut.CTRL_R],
+        key: KeyboardShortcut.CtrlR,
+        descr: KEY_MAP[KeyboardShortcut.CtrlR],
         func: () => {
           if (queryEditor.sql.trim() !== '') {
             startQuery();
@@ -358,8 +358,8 @@ const SqlEditor: React.FC<Props> = ({
       },
       {
         name: 'runQuery2',
-        key: KeyboardShortcut.CTRL_ENTER,
-        descr: KEY_MAP[KeyboardShortcut.CTRL_ENTER],
+        key: KeyboardShortcut.CtrlEnter,
+        descr: KEY_MAP[KeyboardShortcut.CtrlEnter],
         func: () => {
           if (queryEditor.sql.trim() !== '') {
             startQuery();
@@ -370,12 +370,12 @@ const SqlEditor: React.FC<Props> = ({
         name: 'newTab',
         ...(userOS === 'Windows'
           ? {
-              key: KeyboardShortcut.CTRL_Q,
-              descr: KEY_MAP[KeyboardShortcut.CTRL_Q],
+              key: KeyboardShortcut.CtrlQ,
+              descr: KEY_MAP[KeyboardShortcut.CtrlQ],
             }
           : {
-              key: KeyboardShortcut.CTRL_T,
-              descr: KEY_MAP[KeyboardShortcut.CTRL_T],
+              key: KeyboardShortcut.CtrlT,
+              descr: KEY_MAP[KeyboardShortcut.CtrlT],
             }),
         func: () => {
           dispatch(addNewQueryEditor());
@@ -385,19 +385,19 @@ const SqlEditor: React.FC<Props> = ({
         name: 'stopQuery',
         ...(userOS === 'MacOS'
           ? {
-              key: KeyboardShortcut.CTRL_X,
-              descr: KEY_MAP[KeyboardShortcut.CTRL_X],
+              key: KeyboardShortcut.CtrlX,
+              descr: KEY_MAP[KeyboardShortcut.CtrlX],
             }
           : {
-              key: KeyboardShortcut.CTRL_E,
-              descr: KEY_MAP[KeyboardShortcut.CTRL_E],
+              key: KeyboardShortcut.CtrlE,
+              descr: KEY_MAP[KeyboardShortcut.CtrlE],
             }),
         func: stopQuery,
       },
       {
         name: 'formatQuery',
-        key: KeyboardShortcut.CTRL_SHIFT_F,
-        descr: KEY_MAP[KeyboardShortcut.CTRL_SHIFT_F],
+        key: KeyboardShortcut.CtrlShiftF,
+        descr: KEY_MAP[KeyboardShortcut.CtrlShiftF],
         func: () => {
           formatCurrentQuery();
         },
@@ -413,8 +413,8 @@ const SqlEditor: React.FC<Props> = ({
       ...getHotkeyConfig(),
       {
         name: 'runQuery3',
-        key: KeyboardShortcut.CTRL_SHIFT_ENTER,
-        descr: KEY_MAP[KeyboardShortcut.CTRL_SHIFT_ENTER],
+        key: KeyboardShortcut.CtrlShiftEnter,
+        descr: KEY_MAP[KeyboardShortcut.CtrlShiftEnter],
         func: (editor: AceEditor['editor']) => {
           if (!editor.getValue().trim()) {
             return;
@@ -471,8 +471,8 @@ const SqlEditor: React.FC<Props> = ({
     if (userOS === 'MacOS') {
       base.push({
         name: 'previousLine',
-        key: KeyboardShortcut.CTRL_P,
-        descr: KEY_MAP[KeyboardShortcut.CTRL_P],
+        key: KeyboardShortcut.CtrlP,
+        descr: KEY_MAP[KeyboardShortcut.CtrlP],
         func: editor => {
           editor.navigateUp();
         },
@@ -589,21 +589,18 @@ const SqlEditor: React.FC<Props> = ({
   };
 
   const handleToggleAutocompleteEnabled = () => {
-    setItem(
-      LocalStorageKeys.sqllab__is_autocomplete_enabled,
-      !autocompleteEnabled,
-    );
+    setItem(LocalStorageKeys.SqllabIsAutocompleteEnabled, !autocompleteEnabled);
     setAutocompleteEnabled(!autocompleteEnabled);
   };
 
   const createTableAs = () => {
-    startQuery(true, CtasEnum.TABLE);
+    startQuery(true, CtasEnum.Table);
     setShowCreateAsModal(false);
     setCtas('');
   };
 
   const createViewAs = () => {
-    startQuery(true, CtasEnum.VIEW);
+    startQuery(true, CtasEnum.View);
     setShowCreateAsModal(false);
     setCtas('');
   };
@@ -628,7 +625,7 @@ const SqlEditor: React.FC<Props> = ({
             onChange={handleToggleAutocompleteEnabled}
           />{' '}
         </Menu.Item>
-        {isFeatureEnabled(FeatureFlag.ENABLE_TEMPLATE_PROCESSING) && (
+        {isFeatureEnabled(FeatureFlag.EnableTemplateProcessing) && (
           <Menu.Item>
             <TemplateParamsEditor
               language="json"
@@ -678,7 +675,7 @@ const SqlEditor: React.FC<Props> = ({
           <Menu.Item
             onClick={() => {
               setShowCreateAsModal(true);
-              setCreateAs(CtasEnum.TABLE);
+              setCreateAs(CtasEnum.Table);
             }}
             key="1"
           >
@@ -689,7 +686,7 @@ const SqlEditor: React.FC<Props> = ({
           <Menu.Item
             onClick={() => {
               setShowCreateAsModal(true);
-              setCreateAs(CtasEnum.VIEW);
+              setCreateAs(CtasEnum.View);
             }}
             key="2"
           >
@@ -712,7 +709,7 @@ const SqlEditor: React.FC<Props> = ({
               overlayCreateAsMenu={showMenu ? runMenuBtn : null}
             />
           </span>
-          {isFeatureEnabled(FeatureFlag.ESTIMATE_QUERY_COST) &&
+          {isFeatureEnabled(FeatureFlag.EstimateQueryCost) &&
             database?.allows_cost_estimate && (
               <span>
                 <EstimateQueryCostButton
@@ -814,10 +811,10 @@ const SqlEditor: React.FC<Props> = ({
   };
 
   const createViewModalTitle =
-    createAs === CtasEnum.VIEW ? 'CREATE VIEW AS' : 'CREATE TABLE AS';
+    createAs === CtasEnum.View ? 'CREATE VIEW AS' : 'CREATE TABLE AS';
 
   const createModalPlaceHolder =
-    createAs === CtasEnum.VIEW
+    createAs === CtasEnum.View
       ? t('Specify name to CREATE VIEW AS schema in: public')
       : t('Specify name to CREATE TABLE AS schema in: public');
 
@@ -869,7 +866,7 @@ const SqlEditor: React.FC<Props> = ({
             <Button onClick={() => setShowCreateAsModal(false)}>
               {t('Cancel')}
             </Button>
-            {createAs === CtasEnum.TABLE && (
+            {createAs === CtasEnum.Table && (
               <Button
                 buttonStyle="primary"
                 disabled={ctas.length === 0}
@@ -878,7 +875,7 @@ const SqlEditor: React.FC<Props> = ({
                 {t('Create')}
               </Button>
             )}
-            {createAs === CtasEnum.VIEW && (
+            {createAs === CtasEnum.View && (
               <Button
                 buttonStyle="primary"
                 disabled={ctas.length === 0}
diff --git a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
index 1a9cb17f977..eff67d49b15 100644
--- a/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
+++ b/superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.tsx
@@ -127,13 +127,13 @@ const SqlEditorLeftBar = ({
   useEffect(() => {
     const bool = querystring.parse(window.location.search).db;
     const userSelected = getItem(
-      LocalStorageKeys.db,
+      LocalStorageKeys.Database,
       null,
     ) as DatabaseObject | null;
 
     if (bool && userSelected) {
       setUserSelected(userSelected);
-      setItem(LocalStorageKeys.db, null);
+      setItem(LocalStorageKeys.Database, null);
     } else if (database) {
       setUserSelected(database);
     }
diff --git a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
index 35479c48b50..0bd60fff7e1 100644
--- a/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
+++ b/superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx
@@ -88,7 +88,7 @@ class TabbedSqlEditors extends React.PureComponent {
 
   componentDidMount() {
     // migrate query editor and associated tables state to server
-    if (isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)) {
+    if (isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)) {
       const localStorageTables = this.props.tables.filter(
         table => table.inLocalStorage,
       );
@@ -183,7 +183,7 @@ class TabbedSqlEditors extends React.PureComponent {
       const qe = this.activeQueryEditor();
       const latestQuery = this.props.queries[qe.latestQueryId];
       if (
-        isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE) &&
+        isFeatureEnabled(FeatureFlag.SqllabBackendPersistence) &&
         latestQuery &&
         latestQuery.resultsKey
       ) {
diff --git a/superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx b/superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx
index e25d88f5dce..9d3e5f71c5f 100644
--- a/superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx
+++ b/superset-frontend/src/SqlLab/components/TableElement/TableElement.test.tsx
@@ -142,7 +142,7 @@ test('removes the table', async () => {
   const isFeatureEnabledMock = jest
     .spyOn(uiCore, 'isFeatureEnabled')
     .mockImplementation(
-      featureFlag => featureFlag === FeatureFlag.SQLLAB_BACKEND_PERSISTENCE,
+      featureFlag => featureFlag === FeatureFlag.SqllabBackendPersistence,
     );
   const { getAllByTestId, getByText } = render(
     <TableElement {...mockedProps} />,
diff --git a/superset-frontend/src/SqlLab/fixtures.ts b/superset-frontend/src/SqlLab/fixtures.ts
index 7a08c51876f..24d512a1b3d 100644
--- a/superset-frontend/src/SqlLab/fixtures.ts
+++ b/superset-frontend/src/SqlLab/fixtures.ts
@@ -224,7 +224,7 @@ export const queries = [
     id: 'BkA1CLrJg',
     progress: 100,
     startDttm: 1476910566092.96,
-    state: QueryState.SUCCESS,
+    state: QueryState.Success,
     tempTable: null,
     userId: 1,
     executedSql: null,
@@ -282,7 +282,7 @@ export const queries = [
     id: 'S1zeAISkx',
     progress: 100,
     startDttm: 1476910570802.2,
-    state: QueryState.SUCCESS,
+    state: QueryState.Success,
     tempTable: null,
     userId: 1,
     executedSql:
@@ -315,7 +315,7 @@ export const queryWithNoQueryLimit = {
   id: 'BkA1CLrJg',
   progress: 100,
   startDttm: 1476910566092.96,
-  state: QueryState.SUCCESS,
+  state: QueryState.Success,
   tempTable: null,
   userId: 1,
   executedSql: null,
@@ -487,7 +487,7 @@ export const stoppedQuery = {
   sql: 'SELECT ...',
   sqlEditorId: 'rJaf5u9WZ',
   startDttm: 1497400851936,
-  state: QueryState.STOPPED,
+  state: QueryState.Stopped,
   tab: 'Untitled Query 2',
   tempTable: '',
 };
@@ -505,7 +505,7 @@ export const failedQueryWithErrorMessage = {
   sql: 'SELECT ...',
   sqlEditorId: 'rJaf5u9WZ',
   startDttm: 1497400851936,
-  state: QueryState.FAILED,
+  state: QueryState.Failed,
   tab: 'Untitled Query 2',
   tempTable: '',
 };
@@ -530,7 +530,7 @@ export const failedQueryWithErrors = {
   sql: 'SELECT ...',
   sqlEditorId: 'rJaf5u9WZ',
   startDttm: 1497400851936,
-  state: QueryState.FAILED,
+  state: QueryState.Failed,
   tab: 'Untitled Query 2',
   tempTable: '',
 };
@@ -546,7 +546,7 @@ const baseQuery: QueryResponse = {
   id: 'BkA1CLrJg',
   progress: 100,
   startDttm: 1476910566092.96,
-  state: QueryState.SUCCESS,
+  state: QueryState.Success,
   tempSchema: null,
   tempTable: 'temp',
   userId: 1,
@@ -582,13 +582,13 @@ const baseQuery: QueryResponse = {
         is_dttm: true,
         column_name: 'ds',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
       },
       {
         is_dttm: false,
         column_name: 'gender',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
       },
     ],
     selected_columns: [
@@ -596,13 +596,13 @@ const baseQuery: QueryResponse = {
         is_dttm: true,
         column_name: 'ds',
         type: 'STRING',
-        type_generic: GenericDataType.TEMPORAL,
+        type_generic: GenericDataType.Temporal,
       },
       {
         is_dttm: false,
         column_name: 'gender',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
       },
     ],
     expanded_columns: [
@@ -610,7 +610,7 @@ const baseQuery: QueryResponse = {
         is_dttm: true,
         column_name: 'ds',
         type: 'STRING',
-        type_generic: GenericDataType.STRING,
+        type_generic: GenericDataType.String,
       },
     ],
     data: [
@@ -627,7 +627,7 @@ export const runningQuery: QueryResponse = {
   ctas: false,
   id: 'ryhMUZCGb',
   progress: 90,
-  state: QueryState.RUNNING,
+  state: QueryState.Running,
   startDttm: Date.now() - 500,
 };
 
@@ -638,7 +638,7 @@ export const successfulQuery: QueryResponse = {
   ctas: false,
   id: 'ryhMUZCGb',
   progress: 100,
-  state: QueryState.SUCCESS,
+  state: QueryState.Success,
   startDttm: Date.now() - 500,
 };
 
diff --git a/superset-frontend/src/SqlLab/middlewares/persistSqlLabStateEnhancer.js b/superset-frontend/src/SqlLab/middlewares/persistSqlLabStateEnhancer.js
index d1bec5e0c16..25dda5cd3d3 100644
--- a/superset-frontend/src/SqlLab/middlewares/persistSqlLabStateEnhancer.js
+++ b/superset-frontend/src/SqlLab/middlewares/persistSqlLabStateEnhancer.js
@@ -41,7 +41,7 @@ const sqlLabPersistStateConfig = {
     slicer: paths => state => {
       const subset = {};
       paths.forEach(path => {
-        if (isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE)) {
+        if (isFeatureEnabled(FeatureFlag.SqllabBackendPersistence)) {
           const {
             queryEditors,
             editorTabLastUpdatedAt,
diff --git a/superset-frontend/src/SqlLab/reducers/getInitialState.ts b/superset-frontend/src/SqlLab/reducers/getInitialState.ts
index 8f21a3ff10f..8450060faca 100644
--- a/superset-frontend/src/SqlLab/reducers/getInitialState.ts
+++ b/superset-frontend/src/SqlLab/reducers/getInitialState.ts
@@ -77,7 +77,7 @@ export default function getInitialState({
     let queryEditor: QueryEditor;
     if (activeTab && activeTab.id === id) {
       queryEditor = {
-        version: activeTab.extra_json?.version ?? QueryEditorVersion.v1,
+        version: activeTab.extra_json?.version ?? QueryEditorVersion.V1,
         id: id.toString(),
         loaded: true,
         name: activeTab.label,
diff --git a/superset-frontend/src/SqlLab/reducers/sqlLab.js b/superset-frontend/src/SqlLab/reducers/sqlLab.js
index 1d799c559df..40a4dfb29d1 100644
--- a/superset-frontend/src/SqlLab/reducers/sqlLab.js
+++ b/superset-frontend/src/SqlLab/reducers/sqlLab.js
@@ -318,7 +318,7 @@ export default function sqlLabReducer(state = {}, action) {
     },
     [actions.STOP_QUERY]() {
       return alterInObject(state, 'queries', action.query, {
-        state: QueryState.STOPPED,
+        state: QueryState.Stopped,
         results: [],
       });
     },
@@ -332,7 +332,7 @@ export default function sqlLabReducer(state = {}, action) {
     },
     [actions.REQUEST_QUERY_RESULTS]() {
       return alterInObject(state, 'queries', action.query, {
-        state: QueryState.FETCHING,
+        state: QueryState.Fetching,
       });
     },
     [actions.QUERY_SUCCESS]() {
@@ -340,7 +340,7 @@ export default function sqlLabReducer(state = {}, action) {
       // or the final result was unsuccessful
       if (
         action.query.state === QueryState.STOPPED ||
-        action.results.status !== QueryState.SUCCESS
+        action.results.status !== QueryState.Success
       ) {
         return state;
       }
@@ -349,7 +349,7 @@ export default function sqlLabReducer(state = {}, action) {
         progress: 100,
         results: action.results,
         rows: action?.results?.query?.rows || 0,
-        state: QueryState.SUCCESS,
+        state: QueryState.Success,
         limitingFactor: action?.results?.query?.limitingFactor,
         tempSchema: action?.results?.query?.tempSchema,
         tempTable: action?.results?.query?.tempTable,
@@ -365,11 +365,11 @@ export default function sqlLabReducer(state = {}, action) {
       return alterInObject(state, 'queries', action.query, alts);
     },
     [actions.QUERY_FAILED]() {
-      if (action.query.state === QueryState.STOPPED) {
+      if (action.query.state === QueryState.Stopped) {
         return state;
       }
       const alts = {
-        state: QueryState.FAILED,
+        state: QueryState.Failed,
         errors: action.errors,
         errorMessage: action.msg,
         endDttm: now(),
@@ -648,8 +648,8 @@ export default function sqlLabReducer(state = {}, action) {
       Object.entries(action.alteredQueries).forEach(([id, changedQuery]) => {
         if (
           !state.queries.hasOwnProperty(id) ||
-          (state.queries[id].state !== QueryState.STOPPED &&
-            state.queries[id].state !== QueryState.FAILED)
+          (state.queries[id].state !== QueryState.Stopped &&
+            state.queries[id].state !== QueryState.Failed)
         ) {
           const changedOn = normalizeTimestamp(changedQuery.changed_on);
           const timestamp = Date.parse(changedOn);
@@ -671,11 +671,11 @@ export default function sqlLabReducer(state = {}, action) {
             // because of async behavior, sql lab may still poll a couple of seconds
             // when it started fetching or finished rendering results
             state:
-              currentState === QueryState.SUCCESS &&
+              currentState === QueryState.Success &&
               [
-                QueryState.FETCHING,
-                QueryState.SUCCESS,
-                QueryState.RUNNING,
+                QueryState.Fetching,
+                QueryState.Success,
+                QueryState.Running,
               ].includes(prevState)
                 ? prevState
                 : currentState,
diff --git a/superset-frontend/src/SqlLab/reducers/sqlLab.test.js b/superset-frontend/src/SqlLab/reducers/sqlLab.test.js
index e1a234734bc..485094adafe 100644
--- a/superset-frontend/src/SqlLab/reducers/sqlLab.test.js
+++ b/superset-frontend/src/SqlLab/reducers/sqlLab.test.js
@@ -397,7 +397,7 @@ describe('sqlLabReducer', () => {
         id: 'abcd',
         changed_on: Date.now(),
         startDttm: Date.now(),
-        state: QueryState.FETCHING,
+        state: QueryState.Fetching,
         progress: 100,
         resultsKey: 'fa3dccc4-c549-4fbf-93c8-b4fb5a6fb8b7',
         cached: false,
@@ -412,7 +412,7 @@ describe('sqlLabReducer', () => {
               ...query,
               results: {
                 query_id: 1234,
-                status: QueryState.SUCCESS,
+                status: QueryState.Success,
                 data: [],
               },
             },
@@ -420,7 +420,7 @@ describe('sqlLabReducer', () => {
         },
         actions.clearInactiveQueries(Date.now()),
       );
-      expect(newState.queries.abcd.state).toBe(QueryState.SUCCESS);
+      expect(newState.queries.abcd.state).toBe(QueryState.Success);
     });
   });
 });
diff --git a/superset-frontend/src/SqlLab/types.ts b/superset-frontend/src/SqlLab/types.ts
index ec2580f870d..6b150c2ba50 100644
--- a/superset-frontend/src/SqlLab/types.ts
+++ b/superset-frontend/src/SqlLab/types.ts
@@ -30,10 +30,10 @@ export type QueryDictionary = {
 };
 
 export enum QueryEditorVersion {
-  v1 = 1,
+  V1 = 1,
 }
 
-export const LatestQueryEditorVersion = QueryEditorVersion.v1;
+export const LatestQueryEditorVersion = QueryEditorVersion.V1;
 
 export interface CursorPosition {
   row: number;
@@ -112,8 +112,8 @@ export type SqlLabRootState = {
 };
 
 export enum DatasetRadioState {
-  SAVE_NEW = 1,
-  OVERWRITE_DATASET = 2,
+  SaveNew = 1,
+  OverwriteDataset = 2,
 }
 
 export const EXPLORE_CHART_DEFAULT = {
diff --git a/superset-frontend/src/components/Chart/Chart.jsx b/superset-frontend/src/components/Chart/Chart.jsx
index 401fa52f279..4b8e82975ed 100644
--- a/superset-frontend/src/components/Chart/Chart.jsx
+++ b/superset-frontend/src/components/Chart/Chart.jsx
@@ -203,7 +203,7 @@ class Chart extends React.PureComponent {
       chartAlert !== undefined &&
       chartAlert !== NONEXISTENT_DATASET &&
       datasource === PLACEHOLDER_DATASOURCE &&
-      datasetsStatus !== ResourceStatus.ERROR
+      datasetsStatus !== ResourceStatus.Error
     ) {
       return (
         <Styles
@@ -299,7 +299,7 @@ class Chart extends React.PureComponent {
         >
           <div className="slice_container" data-test="slice-container">
             {this.props.isInView ||
-            !isFeatureEnabled(FeatureFlag.DASHBOARD_VIRTUALIZATION) ||
+            !isFeatureEnabled(FeatureFlag.DashboardVirtualization) ||
             isCurrentUserBot() ? (
               <ChartRenderer
                 {...this.props}
diff --git a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
index ce8bb9d7d7c..c03b1a1301c 100644
--- a/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
+++ b/superset-frontend/src/components/Chart/ChartContextMenu/ChartContextMenu.tsx
@@ -114,23 +114,23 @@ const ChartContextMenu = (
   const canExploreOrView = canExplore || canViewDrill;
 
   const showDrillToDetail =
-    isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL) &&
+    isFeatureEnabled(FeatureFlag.DrillToDetail) &&
     canExploreOrView &&
     canDatasourceSamples &&
     isDisplayed(ContextMenuItem.DrillToDetail);
 
   const showDrillBy =
-    isFeatureEnabled(FeatureFlag.DRILL_BY) &&
+    isFeatureEnabled(FeatureFlag.DrillBy) &&
     canExploreOrView &&
     isDisplayed(ContextMenuItem.DrillBy);
 
   const showCrossFilters =
-    isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+    isFeatureEnabled(FeatureFlag.DashboardCrossFilters) &&
     isDisplayed(ContextMenuItem.CrossFilter);
 
   const isCrossFilteringSupportedByChart = getChartMetadataRegistry()
     .get(formData.viz_type)
-    ?.behaviors?.includes(Behavior.INTERACTIVE_CHART);
+    ?.behaviors?.includes(Behavior.InteractiveChart);
 
   let itemsCount = 0;
   if (showCrossFilters) {
diff --git a/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx b/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx
index 0d65bb60384..2e7937ffbda 100644
--- a/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx
+++ b/superset-frontend/src/components/Chart/ChartContextMenu/useContextMenu.test.tsx
@@ -29,9 +29,9 @@ const CONTEXT_MENU_TEST_ID = 'chart-context-menu';
 
 // @ts-ignore
 global.featureFlags = {
-  [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
-  [FeatureFlag.DRILL_TO_DETAIL]: true,
-  [FeatureFlag.DRILL_BY]: true,
+  [FeatureFlag.DashboardCrossFilters]: true,
+  [FeatureFlag.DrillToDetail]: true,
+  [FeatureFlag.DrillBy]: true,
 };
 
 const setup = ({
diff --git a/superset-frontend/src/components/Chart/ChartRenderer.jsx b/superset-frontend/src/components/Chart/ChartRenderer.jsx
index 006dd54fcb3..84339f3e05e 100644
--- a/superset-frontend/src/components/Chart/ChartRenderer.jsx
+++ b/superset-frontend/src/components/Chart/ChartRenderer.jsx
@@ -70,7 +70,7 @@ const BLANK = {};
 const BIG_NO_RESULT_MIN_WIDTH = 300;
 const BIG_NO_RESULT_MIN_HEIGHT = 220;
 
-const behaviors = [Behavior.INTERACTIVE_CHART];
+const behaviors = [Behavior.InteractiveChart];
 
 const defaultProps = {
   addFilter: () => BLANK,
@@ -87,8 +87,8 @@ class ChartRenderer extends React.Component {
     this.state = {
       showContextMenu:
         props.source === ChartSource.Dashboard &&
-        (isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL) ||
-          isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)),
+        (isFeatureEnabled(FeatureFlag.DrillToDetail) ||
+          isFeatureEnabled(FeatureFlag.DashboardCrossFilters)),
       inContextMenu: false,
       legendState: undefined,
     };
@@ -319,7 +319,7 @@ class ChartRenderer extends React.Component {
     // Detail props or if it'll cause side-effects (e.g. excessive re-renders).
     const drillToDetailProps = getChartMetadataRegistry()
       .get(formData.viz_type)
-      ?.behaviors.find(behavior => behavior === Behavior.DRILL_TO_DETAIL)
+      ?.behaviors.find(behavior => behavior === Behavior.DrillToDetail)
       ? { inContextMenu: this.state.inContextMenu }
       : {};
 
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
index 485e19652cd..41cc6b3c08e 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.test.tsx
@@ -113,7 +113,7 @@ getChartMetadataRegistry().registerValue(
     name: 'fake pie',
     thumbnail: '.png',
     useLegacyApi: false,
-    behaviors: [Behavior.DRILL_BY],
+    behaviors: [Behavior.DrillBy],
   }),
 );
 
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
index 3354241ef81..2fe711474e1 100644
--- a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -115,7 +115,7 @@ export const DrillByMenuItems = ({
     () =>
       getChartMetadataRegistry()
         .get(formData.viz_type)
-        ?.behaviors.find(behavior => behavior === Behavior.DRILL_BY),
+        ?.behaviors.find(behavior => behavior === Behavior.DrillBy),
     [formData.viz_type],
   );
   const verboseMap = useVerboseMap(dataset);
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx
index 73f3a028e93..6ef9b331e65 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailMenuItems.tsx
@@ -121,7 +121,7 @@ const DrillDetailMenuItems = ({
     () =>
       getChartMetadataRegistry()
         .get(formData.viz_type)
-        ?.behaviors.find(behavior => behavior === Behavior.DRILL_TO_DETAIL),
+        ?.behaviors.find(behavior => behavior === Behavior.DrillToDetail),
     [formData.viz_type],
   );
 
diff --git a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
index d337e9b013a..9ae93088169 100644
--- a/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
+++ b/superset-frontend/src/components/Chart/DrillDetail/DrillDetailPane.tsx
@@ -122,7 +122,7 @@ export default function DrillDetailPane({
         key: column,
         dataIndex: column,
         title:
-          resultsPage?.colTypes[index] === GenericDataType.TEMPORAL ? (
+          resultsPage?.colTypes[index] === GenericDataType.Temporal ? (
             <HeaderWithRadioGroup
               headerTitle={column}
               groupTitle={t('Formatting')}
@@ -153,7 +153,7 @@ export default function DrillDetailPane({
             return <NullCell />;
           }
           if (
-            resultsPage?.colTypes[index] === GenericDataType.TEMPORAL &&
+            resultsPage?.colTypes[index] === GenericDataType.Temporal &&
             timeFormatting[column] !== TimeFormatting.Original &&
             (typeof value === 'number' || value instanceof Date)
           ) {
@@ -262,7 +262,7 @@ export default function DrillDetailPane({
 
   const bootstrapping =
     (!responseError && !resultsPages.size) ||
-    metadataBarStatus === ResourceStatus.LOADING;
+    metadataBarStatus === ResourceStatus.Loading;
 
   let tableContent = null;
   if (responseError) {
@@ -290,7 +290,7 @@ export default function DrillDetailPane({
         <Table
           data={data}
           columns={mappedColumns}
-          size={TableSize.SMALL}
+          size={TableSize.Small}
           defaultPageSize={PAGE_SIZE}
           recordCount={resultsPage?.total}
           usePagination
diff --git a/superset-frontend/src/components/Chart/chartAction.js b/superset-frontend/src/components/Chart/chartAction.js
index fbb790824cd..f10232bcddf 100644
--- a/superset-frontend/src/components/Chart/chartAction.js
+++ b/superset-frontend/src/components/Chart/chartAction.js
@@ -406,7 +406,7 @@ export function exploreJSON(
 
     const chartDataRequestCaught = chartDataRequest
       .then(({ response, json }) => {
-        if (isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) {
+        if (isFeatureEnabled(FeatureFlag.GlobalAsyncQueries)) {
           // deal with getChartDataRequest transforming the response data
           const result = 'result' in json ? json.result : json;
           const [useLegacyApi] = getQuerySettings(formData);
@@ -454,7 +454,7 @@ export function exploreJSON(
         return dispatch(chartUpdateSucceeded(queriesResponse, key));
       })
       .catch(response => {
-        if (isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) {
+        if (isFeatureEnabled(FeatureFlag.GlobalAsyncQueries)) {
           return dispatch(chartUpdateFailed([response], key));
         }
 
diff --git a/superset-frontend/src/components/Chart/chartReducer.ts b/superset-frontend/src/components/Chart/chartReducer.ts
index d91d77c49ae..997c5bf7b7c 100644
--- a/superset-frontend/src/components/Chart/chartReducer.ts
+++ b/superset-frontend/src/components/Chart/chartReducer.ts
@@ -195,7 +195,7 @@ export default function chartReducer(
   if (action.type === HYDRATE_DASHBOARD || action.type === HYDRATE_EXPLORE) {
     return { ...action.data.charts };
   }
-  if (action.type === DatasourcesAction.SET_DATASOURCES) {
+  if (action.type === DatasourcesAction.SetDatasources) {
     return Object.fromEntries(
       Object.entries(charts).map(([chartId, chart]) => [
         chartId,
diff --git a/superset-frontend/src/components/Datasource/CollectionTable.tsx b/superset-frontend/src/components/Datasource/CollectionTable.tsx
index f1a1422287f..13dc0a2ce21 100644
--- a/superset-frontend/src/components/Datasource/CollectionTable.tsx
+++ b/superset-frontend/src/components/Datasource/CollectionTable.tsx
@@ -60,9 +60,9 @@ interface CRUDCollectionProps {
 type Sort = number | string | boolean | any;
 
 enum SortOrder {
-  asc = 1,
-  desc = 2,
-  unsort = 0,
+  Asc = 1,
+  Desc = 2,
+  Unsorted = 0,
 }
 
 interface CRUDCollectionState {
@@ -270,7 +270,7 @@ export default class CRUDCollection extends React.PureComponent<
     }));
   }
 
-  sortColumn(col: string, sort = SortOrder.unsort) {
+  sortColumn(col: string, sort = SortOrder.Unsorted) {
     const { sortColumns } = this.props;
     // default sort logic sorting string, boolean and number
     const compareSort = (m: Sort, n: Sort) => {
@@ -282,7 +282,7 @@ export default class CRUDCollection extends React.PureComponent<
     return () => {
       if (sortColumns?.includes(col)) {
         // display in unsorted order if no sort specified
-        if (sort === SortOrder.unsort) {
+        if (sort === SortOrder.Unsorted) {
           const { collection } = createKeyedCollection(this.props.collection);
           const collectionArray = createCollectionArray(collection);
           this.setState({
@@ -298,7 +298,7 @@ export default class CRUDCollection extends React.PureComponent<
           (a: object, b: object) => compareSort(a[col], b[col]),
         );
         const newCollection =
-          sort === SortOrder.asc ? sorted : sorted.reverse();
+          sort === SortOrder.Asc ? sorted : sorted.reverse();
 
         this.setState(prevState => ({
           ...prevState,
@@ -311,10 +311,10 @@ export default class CRUDCollection extends React.PureComponent<
   }
 
   renderSortIcon(col: string) {
-    if (this.state.sortColumn === col && this.state.sort === SortOrder.asc) {
+    if (this.state.sortColumn === col && this.state.sort === SortOrder.Asc) {
       return <Icons.SortAsc onClick={this.sortColumn(col, 2)} />;
     }
-    if (this.state.sortColumn === col && this.state.sort === SortOrder.desc) {
+    if (this.state.sortColumn === col && this.state.sort === SortOrder.Desc) {
       return <Icons.SortDesc onClick={this.sortColumn(col, 0)} />;
     }
     return <Icons.Sort onClick={this.sortColumn(col, 1)} />;
diff --git a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
index 2bc92d7c0c1..cc18ec0fe43 100644
--- a/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
+++ b/superset-frontend/src/components/Datasource/DatasourceEditor.jsx
@@ -191,7 +191,7 @@ function ColumnCollectionTable({
   return (
     <CollectionTable
       tableColumns={
-        isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)
+        isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
           ? [
               'column_name',
               'advanced_data_type',
@@ -211,7 +211,7 @@ function ColumnCollectionTable({
             ]
       }
       sortColumns={
-        isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)
+        isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
           ? [
               'column_name',
               'advanced_data_type',
@@ -287,7 +287,7 @@ function ColumnCollectionTable({
                 }
               />
             )}
-            {isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES) ? (
+            {isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes) ? (
               <Field
                 fieldKey="advanced_data_type"
                 label={t('Advanced data type')}
@@ -359,7 +359,7 @@ function ColumnCollectionTable({
         </FormContainer>
       }
       columnLabels={
-        isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)
+        isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
           ? {
               column_name: t('Column'),
               advanced_data_type: t('Advanced data type'),
@@ -380,7 +380,7 @@ function ColumnCollectionTable({
       }
       onChange={onColumnsChange}
       itemRenderers={
-        isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)
+        isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)
           ? {
               column_name: (v, onItemChange, _, record) =>
                 editableColumnName ? (
diff --git a/superset-frontend/src/components/Datasource/DatasourceModal.tsx b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
index 3e3acde4b25..e318821a5b4 100644
--- a/superset-frontend/src/components/Datasource/DatasourceModal.tsx
+++ b/superset-frontend/src/components/Datasource/DatasourceModal.tsx
@@ -272,7 +272,7 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
   };
 
   const showLegacyDatasourceEditor = !isFeatureEnabled(
-    FeatureFlag.DISABLE_LEGACY_DATASOURCE_EDITOR,
+    FeatureFlag.DisableLegacyDatasourceEditor,
   );
 
   return (
diff --git a/superset-frontend/src/components/Dropdown/index.tsx b/superset-frontend/src/components/Dropdown/index.tsx
index 1e2e03ceb24..86464734379 100644
--- a/superset-frontend/src/components/Dropdown/index.tsx
+++ b/superset-frontend/src/components/Dropdown/index.tsx
@@ -68,8 +68,8 @@ const MenuDotsWrapper = styled.div`
 `;
 
 export enum IconOrientation {
-  VERTICAL = 'vertical',
-  HORIZONTAL = 'horizontal',
+  Vertical = 'vertical',
+  Horizontal = 'horizontal',
 }
 export interface DropdownProps extends DropDownProps {
   overlay: React.ReactElement;
@@ -77,10 +77,10 @@ export interface DropdownProps extends DropDownProps {
 }
 
 const RenderIcon = (
-  iconOrientation: IconOrientation = IconOrientation.VERTICAL,
+  iconOrientation: IconOrientation = IconOrientation.Vertical,
 ) => {
   const component =
-    iconOrientation === IconOrientation.HORIZONTAL ? (
+    iconOrientation === IconOrientation.Horizontal ? (
       <Icons.MoreHoriz iconSize="xl" />
     ) : (
       <MenuDots />
@@ -90,7 +90,7 @@ const RenderIcon = (
 
 export const Dropdown = ({
   overlay,
-  iconOrientation = IconOrientation.VERTICAL,
+  iconOrientation = IconOrientation.Vertical,
   ...rest
 }: DropdownProps) => (
   <AntdDropdown overlay={overlay} {...rest}>
diff --git a/superset-frontend/src/components/DynamicPlugins/index.tsx b/superset-frontend/src/components/DynamicPlugins/index.tsx
index 9134e73fdad..791cebc4807 100644
--- a/superset-frontend/src/components/DynamicPlugins/index.tsx
+++ b/superset-frontend/src/components/DynamicPlugins/index.tsx
@@ -172,7 +172,7 @@ export const DynamicPluginProvider: React.FC = ({ children }) => {
       ...getRegistryData(),
       // eslint-disable-next-line @typescript-eslint/no-use-before-define
       fetchAll,
-      loading: isFeatureEnabled(FeatureFlag.DYNAMIC_PLUGINS),
+      loading: isFeatureEnabled(FeatureFlag.DynamicPlugins),
       // TODO: Write fetchByKeys
     }),
   );
@@ -210,7 +210,7 @@ export const DynamicPluginProvider: React.FC = ({ children }) => {
   }
 
   useEffect(() => {
-    if (isFeatureEnabled(FeatureFlag.DYNAMIC_PLUGINS)) {
+    if (isFeatureEnabled(FeatureFlag.DynamicPlugins)) {
       fetchAll();
     }
     const registryListener = () => {
diff --git a/superset-frontend/src/components/ErrorMessage/getErrorMessageComponentRegistry.ts b/superset-frontend/src/components/ErrorMessage/getErrorMessageComponentRegistry.ts
index e21a9d37a7a..9f69f9ab2d8 100644
--- a/superset-frontend/src/components/ErrorMessage/getErrorMessageComponentRegistry.ts
+++ b/superset-frontend/src/components/ErrorMessage/getErrorMessageComponentRegistry.ts
@@ -26,7 +26,7 @@ class ErrorMessageComponentRegistry extends Registry<
   constructor() {
     super({
       name: 'ErrorMessageComponent',
-      overwritePolicy: OverwritePolicy.ALLOW,
+      overwritePolicy: OverwritePolicy.Allow,
     });
   }
 }
diff --git a/superset-frontend/src/components/FilterableTable/index.tsx b/superset-frontend/src/components/FilterableTable/index.tsx
index d89a65ad329..d731313bdea 100644
--- a/superset-frontend/src/components/FilterableTable/index.tsx
+++ b/superset-frontend/src/components/FilterableTable/index.tsx
@@ -253,7 +253,7 @@ const FilterableTable = ({
       {fitted && (
         <Table
           loading={filterText !== keyword}
-          size={TableSize.SMALL}
+          size={TableSize.Small}
           height={totalTableHeight + 42}
           usePagination={false}
           columns={columns}
diff --git a/superset-frontend/src/components/ListView/types.ts b/superset-frontend/src/components/ListView/types.ts
index 0c1314f2637..005d8fde7cc 100644
--- a/superset-frontend/src/components/ListView/types.ts
+++ b/superset-frontend/src/components/ListView/types.ts
@@ -93,32 +93,32 @@ export interface InternalFilter extends FilterValue {
 }
 
 export enum FilterOperator {
-  startsWith = 'sw',
-  endsWith = 'ew',
-  contains = 'ct',
-  equals = 'eq',
-  notStartsWith = 'nsw',
-  notEndsWith = 'new',
-  notContains = 'nct',
-  notEquals = 'neq',
-  greaterThan = 'gt',
-  lessThan = 'lt',
-  relationManyMany = 'rel_m_m',
-  relationOneMany = 'rel_o_m',
-  titleOrSlug = 'title_or_slug',
-  nameOrDescription = 'name_or_description',
-  allText = 'all_text',
-  chartAllText = 'chart_all_text',
-  datasetIsNullOrEmpty = 'dataset_is_null_or_empty',
-  between = 'between',
-  dashboardIsFav = 'dashboard_is_favorite',
-  chartIsFav = 'chart_is_favorite',
-  chartIsCertified = 'chart_is_certified',
-  dashboardIsCertified = 'dashboard_is_certified',
-  datasetIsCertified = 'dataset_is_certified',
-  dashboardHasCreatedBy = 'dashboard_has_created_by',
-  chartHasCreatedBy = 'chart_has_created_by',
-  dashboardTags = 'dashboard_tags',
-  chartTags = 'chart_tags',
-  savedQueryTags = 'saved_query_tags',
+  StartsWith = 'sw',
+  EndsWith = 'ew',
+  Contains = 'ct',
+  Equals = 'eq',
+  NotStartsWith = 'nsw',
+  NotEndsWith = 'new',
+  NotContains = 'nct',
+  NotEquals = 'neq',
+  GreaterThan = 'gt',
+  LessThan = 'lt',
+  RelationManyMany = 'rel_m_m',
+  RelationOneMany = 'rel_o_m',
+  TitleOrSlug = 'title_or_slug',
+  NameOrDescription = 'name_or_description',
+  AllText = 'all_text',
+  ChartAllText = 'chart_all_text',
+  DatasetIsNullOrEmpty = 'dataset_is_null_or_empty',
+  Between = 'between',
+  DashboardIsFav = 'dashboard_is_favorite',
+  ChartIsFav = 'chart_is_favorite',
+  ChartIsCertified = 'chart_is_certified',
+  DashboardIsCertified = 'dashboard_is_certified',
+  DatasetIsCertified = 'dataset_is_certified',
+  DashboardHasCreatedBy = 'dashboard_has_created_by',
+  ChartHasCreatedBy = 'chart_has_created_by',
+  DashboardTags = 'dashboard_tags',
+  ChartTags = 'chart_tags',
+  SavedQueryTags = 'saved_query_tags',
 }
diff --git a/superset-frontend/src/components/MessageToasts/Toast.tsx b/superset-frontend/src/components/MessageToasts/Toast.tsx
index c248a2427b3..37ba148feb8 100644
--- a/superset-frontend/src/components/MessageToasts/Toast.tsx
+++ b/superset-frontend/src/components/MessageToasts/Toast.tsx
@@ -79,13 +79,13 @@ export default function Toast({ toast, onCloseToast }: ToastPresenterProps) {
   let className = 'toast--success';
   let icon = <Icons.CircleCheckSolid css={theme => StyledIcon(theme)} />;
 
-  if (toast.toastType === ToastType.WARNING) {
+  if (toast.toastType === ToastType.Warning) {
     icon = <Icons.WarningSolid css={StyledIcon} />;
     className = 'toast--warning';
-  } else if (toast.toastType === ToastType.DANGER) {
+  } else if (toast.toastType === ToastType.Danger) {
     icon = <Icons.ErrorSolid css={StyledIcon} />;
     className = 'toast--danger';
-  } else if (toast.toastType === ToastType.INFO) {
+  } else if (toast.toastType === ToastType.Info) {
     icon = <Icons.InfoSolid css={StyledIcon} />;
     className = 'toast--info';
   }
diff --git a/superset-frontend/src/components/MessageToasts/actions.ts b/superset-frontend/src/components/MessageToasts/actions.ts
index 37fcf80f178..8bae97fb682 100644
--- a/superset-frontend/src/components/MessageToasts/actions.ts
+++ b/superset-frontend/src/components/MessageToasts/actions.ts
@@ -59,7 +59,7 @@ export const ADD_INFO_TOAST = 'ADD_INFO_TOAST';
 export function addInfoToast(text: string, options?: ToastOptions) {
   return addToast({
     text,
-    toastType: ToastType.INFO,
+    toastType: ToastType.Info,
     duration: 4000,
     ...options,
   });
@@ -69,7 +69,7 @@ export const ADD_SUCCESS_TOAST = 'ADD_SUCCESS_TOAST';
 export function addSuccessToast(text: string, options?: ToastOptions) {
   return addToast({
     text,
-    toastType: ToastType.SUCCESS,
+    toastType: ToastType.Success,
     duration: 4000,
     ...options,
   });
@@ -79,7 +79,7 @@ export const ADD_WARNING_TOAST = 'ADD_WARNING_TOAST';
 export function addWarningToast(text: string, options?: ToastOptions) {
   return addToast({
     text,
-    toastType: ToastType.WARNING,
+    toastType: ToastType.Warning,
     duration: 6000,
     ...options,
   });
@@ -89,7 +89,7 @@ export const ADD_DANGER_TOAST = 'ADD_DANGER_TOAST';
 export function addDangerToast(text: string, options?: ToastOptions) {
   return addToast({
     text,
-    toastType: ToastType.DANGER,
+    toastType: ToastType.Danger,
     duration: 8000,
     ...options,
   });
diff --git a/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.js b/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.js
index 982df171007..e6398b4e383 100644
--- a/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.js
+++ b/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.js
@@ -25,8 +25,8 @@ export default function toastsFromPyFlashMessages(flashMessages = []) {
   flashMessages.forEach(([messageType, message]) => {
     const toastType =
       messageType === 'danger'
-        ? ToastType.DANGER
-        : (messageType === 'success' && ToastType.SUCCESS) || ToastType.INFO;
+        ? ToastType.Danger
+        : (messageType === 'success' && ToastType.Success) || ToastType.Info;
 
     const toast = addToast({
       text: message,
diff --git a/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.test.js b/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.test.js
index d19ac0c5d5e..fe2ea294f9b 100644
--- a/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.test.js
+++ b/superset-frontend/src/components/MessageToasts/getToastsFromPyFlashMessages.test.js
@@ -23,7 +23,7 @@ describe('getToastsFromPyFlashMessages', () => {
   it('should return an info toast', () => {
     const toast = getToastsFromPyFlashMessages([['info', 'info test']])[0];
     expect(toast).toMatchObject({
-      toastType: ToastType.INFO,
+      toastType: ToastType.Info,
       text: 'info test',
     });
   });
@@ -33,7 +33,7 @@ describe('getToastsFromPyFlashMessages', () => {
       ['success', 'success test'],
     ])[0];
     expect(toast).toMatchObject({
-      toastType: ToastType.SUCCESS,
+      toastType: ToastType.Success,
       text: 'success test',
     });
   });
@@ -41,7 +41,7 @@ describe('getToastsFromPyFlashMessages', () => {
   it('should return a danger toast', () => {
     const toast = getToastsFromPyFlashMessages([['danger', 'danger test']])[0];
     expect(toast).toMatchObject({
-      toastType: ToastType.DANGER,
+      toastType: ToastType.Danger,
       text: 'danger test',
     });
   });
diff --git a/superset-frontend/src/components/MessageToasts/mockMessageToasts.js b/superset-frontend/src/components/MessageToasts/mockMessageToasts.js
index 4604e5de6cd..b06fd0c49fa 100644
--- a/superset-frontend/src/components/MessageToasts/mockMessageToasts.js
+++ b/superset-frontend/src/components/MessageToasts/mockMessageToasts.js
@@ -19,6 +19,6 @@
 import { ToastType } from 'src/components/MessageToasts/types';
 
 export default [
-  { id: 'info_id', toastType: ToastType.INFO, text: 'info toast' },
-  { id: 'danger_id', toastType: ToastType.DANGER, text: 'danger toast' },
+  { id: 'info_id', toastType: ToastType.Info, text: 'info toast' },
+  { id: 'danger_id', toastType: ToastType.Danger, text: 'danger toast' },
 ];
diff --git a/superset-frontend/src/components/MessageToasts/types.ts b/superset-frontend/src/components/MessageToasts/types.ts
index fd4b27074b6..07090ea46d0 100644
--- a/superset-frontend/src/components/MessageToasts/types.ts
+++ b/superset-frontend/src/components/MessageToasts/types.ts
@@ -17,10 +17,10 @@
  * under the License.
  */
 export enum ToastType {
-  INFO = 'INFO_TOAST',
-  SUCCESS = 'SUCCESS_TOAST',
-  WARNING = 'WARNING_TOAST',
-  DANGER = 'DANGER_TOAST',
+  Info = 'INFO_TOAST',
+  Success = 'SUCCESS_TOAST',
+  Warning = 'WARNING_TOAST',
+  Danger = 'DANGER_TOAST',
 }
 
 export interface ToastMeta {
diff --git a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
index f6d6178111b..64fdca72cdf 100644
--- a/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
+++ b/superset-frontend/src/components/MetadataBar/ContentConfig.tsx
@@ -54,7 +54,7 @@ const config = (contentType: ContentType) => {
    */
 
   switch (type) {
-    case MetadataType.DASHBOARDS:
+    case MetadataType.Dashboards:
       return {
         icon: Icons.FundProjectionScreenOutlined,
         title: contentType.title,
@@ -65,13 +65,13 @@ const config = (contentType: ContentType) => {
         ) : undefined,
       };
 
-    case MetadataType.DESCRIPTION:
+    case MetadataType.Description:
       return {
         icon: Icons.BookOutlined,
         title: contentType.value,
       };
 
-    case MetadataType.LAST_MODIFIED:
+    case MetadataType.LastModified:
       return {
         icon: Icons.EditOutlined,
         title: contentType.value,
@@ -83,7 +83,7 @@ const config = (contentType: ContentType) => {
         ),
       };
 
-    case MetadataType.OWNER:
+    case MetadataType.Owner:
       return {
         icon: Icons.UserOutlined,
         title: contentType.createdBy,
@@ -98,28 +98,28 @@ const config = (contentType: ContentType) => {
         ),
       };
 
-    case MetadataType.ROWS:
+    case MetadataType.Rows:
       return {
         icon: Icons.InsertRowBelowOutlined,
         title: contentType.title,
         tooltip: contentType.title,
       };
 
-    case MetadataType.SQL:
+    case MetadataType.Sql:
       return {
         icon: Icons.ConsoleSqlOutlined,
         title: contentType.title,
         tooltip: contentType.title,
       };
 
-    case MetadataType.TABLE:
+    case MetadataType.Table:
       return {
         icon: Icons.Table,
         title: contentType.title,
         tooltip: contentType.title,
       };
 
-    case MetadataType.TAGS:
+    case MetadataType.Tags:
       return {
         icon: Icons.TagsOutlined,
         title: contentType.values.join(', '),
diff --git a/superset-frontend/src/components/MetadataBar/ContentType.ts b/superset-frontend/src/components/MetadataBar/ContentType.ts
index f5428aa61f4..b4fcb103f0c 100644
--- a/superset-frontend/src/components/MetadataBar/ContentType.ts
+++ b/superset-frontend/src/components/MetadataBar/ContentType.ts
@@ -18,38 +18,38 @@
  */
 
 export enum MetadataType {
-  DASHBOARDS = 'dashboards',
-  DESCRIPTION = 'description',
-  LAST_MODIFIED = 'lastModified',
-  OWNER = 'owner',
-  ROWS = 'rows',
-  SQL = 'sql',
-  TABLE = 'table',
-  TAGS = 'tags',
+  Dashboards = 'dashboards',
+  Description = 'description',
+  LastModified = 'lastModified',
+  Owner = 'owner',
+  Rows = 'rows',
+  Sql = 'sql',
+  Table = 'table',
+  Tags = 'tags',
 }
 
 export type Dashboards = {
-  type: MetadataType.DASHBOARDS;
+  type: MetadataType.Dashboards;
   title: string;
   description?: string;
   onClick?: (type: string) => void;
 };
 
 export type Description = {
-  type: MetadataType.DESCRIPTION;
+  type: MetadataType.Description;
   value: string;
   onClick?: (type: string) => void;
 };
 
 export type LastModified = {
-  type: MetadataType.LAST_MODIFIED;
+  type: MetadataType.LastModified;
   value: string;
   modifiedBy: string;
   onClick?: (type: string) => void;
 };
 
 export type Owner = {
-  type: MetadataType.OWNER;
+  type: MetadataType.Owner;
   createdBy: string;
   owners?: string[];
   createdOn: string;
@@ -57,25 +57,25 @@ export type Owner = {
 };
 
 export type Rows = {
-  type: MetadataType.ROWS;
+  type: MetadataType.Rows;
   title: string;
   onClick?: (type: string) => void;
 };
 
 export type Sql = {
-  type: MetadataType.SQL;
+  type: MetadataType.Sql;
   title: string;
   onClick?: (type: string) => void;
 };
 
 export type Table = {
-  type: MetadataType.TABLE;
+  type: MetadataType.Table;
   title: string;
   onClick?: (type: string) => void;
 };
 
 export type Tags = {
-  type: MetadataType.TAGS;
+  type: MetadataType.Tags;
   values: string[];
   onClick?: (type: string) => void;
 };
diff --git a/superset-frontend/src/components/MetadataBar/MetadataBar.stories.mdx b/superset-frontend/src/components/MetadataBar/MetadataBar.stories.mdx
index d85c2c62268..1942dd059d4 100644
--- a/superset-frontend/src/components/MetadataBar/MetadataBar.stories.mdx
+++ b/superset-frontend/src/components/MetadataBar/MetadataBar.stories.mdx
@@ -41,14 +41,14 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export enum MetadataType {
-      DASHBOARDS = 'dashboards',
-      DESCRIPTION = 'description',
-      LAST_MODIFIED = 'lastModified',
-      OWNER = 'owner',
-      ROWS = 'rows',
-      SQL = 'sql',
-      TABLE = 'table',
-      TAGS = 'tags',
+      Dashboards = 'dashboards',
+      Description = 'description',
+      LastModified = 'lastModified',
+      Owner = 'owner',
+      Rows = 'rows',
+      Sql = 'sql',
+      Table = 'table',
+      Tags = 'tags',
     }`}
 />
 
@@ -57,7 +57,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Dashboards = {
-      type: MetadataType.DASHBOARDS;
+      type: MetadataType.Dashboards;
       title: string;
       description?: string;
       onClick?: (type: string) => void;
@@ -69,7 +69,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Description = {
-      type: MetadataType.DESCRIPTION;
+      type: MetadataType.Description;
       value: string;
       onClick?: (type: string) => void;
     };`}
@@ -80,7 +80,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type LastModified = {
-      type: MetadataType.LAST_MODIFIED;
+      type: MetadataType.LastModified;
       value: Date;
       modifiedBy: string;
       onClick?: (type: string) => void;
@@ -92,7 +92,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Owner = {
-      type: MetadataType.OWNER;
+      type: MetadataType.Owner;
       createdBy: string;
       owners: string[];
       createdOn: Date;
@@ -105,7 +105,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Rows = {
-      type: MetadataType.ROWS;
+      type: MetadataType.Rows;
       title: string;
       onClick?: (type: string) => void;
     };`}
@@ -116,7 +116,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Sql = {
-      type: MetadataType.SQL;
+      type: MetadataType.Sql;
       title: string;
       onClick?: (type: string) => void;
     };`}
@@ -127,7 +127,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Table = {
-      type: MetadataType.TABLE;
+      type: MetadataType.Table;
       title: string;
       onClick?: (type: string) => void;
     };`}
@@ -138,7 +138,7 @@ Below you can find the configurations for each content type:
   format={true}
   code={`
     export type Tags = {
-      type: MetadataType.TAGS;
+      type: MetadataType.Tags;
       values: string[];
       onClick?: (type: string) => void;
     };`}
diff --git a/superset-frontend/src/components/MetadataBar/MetadataBar.stories.tsx b/superset-frontend/src/components/MetadataBar/MetadataBar.stories.tsx
index 1b5fb33d961..27149b9f2f6 100644
--- a/superset-frontend/src/components/MetadataBar/MetadataBar.stories.tsx
+++ b/superset-frontend/src/components/MetadataBar/MetadataBar.stories.tsx
@@ -72,26 +72,26 @@ Basic.story = {
 Basic.args = {
   items: [
     {
-      type: MetadataType.SQL,
+      type: MetadataType.Sql,
       title: 'Click to view query',
     },
     {
-      type: MetadataType.OWNER,
+      type: MetadataType.Owner,
       createdBy: 'Jane Smith',
       owners: ['John Doe', 'Mary Wilson'],
       createdOn: A_WEEK_AGO,
     },
     {
-      type: MetadataType.LAST_MODIFIED,
+      type: MetadataType.LastModified,
       value: A_WEEK_AGO,
       modifiedBy: 'Jane Smith',
     },
     {
-      type: MetadataType.TAGS,
+      type: MetadataType.Tags,
       values: ['management', 'research', 'poc'],
     },
     {
-      type: MetadataType.DASHBOARDS,
+      type: MetadataType.Dashboards,
       title: 'Added to 452 dashboards',
       description:
         'To preview the list of dashboards go to "More" settings on the right.',
diff --git a/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx b/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
index 7a7f7430f23..ce3be8df16a 100644
--- a/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
+++ b/superset-frontend/src/components/MetadataBar/MetadataBar.test.tsx
@@ -58,39 +58,39 @@ const runWithBarCollapsed = async (func: Function) => {
 
 const ITEMS: ContentType[] = [
   {
-    type: MetadataType.DASHBOARDS,
+    type: MetadataType.Dashboards,
     title: DASHBOARD_TITLE,
     description: DASHBOARD_DESCRIPTION,
   },
   {
-    type: MetadataType.DESCRIPTION,
+    type: MetadataType.Description,
     value: DESCRIPTION_VALUE,
   },
   {
-    type: MetadataType.LAST_MODIFIED,
+    type: MetadataType.LastModified,
     value: TWO_DAYS_AGO,
     modifiedBy: MODIFIED_BY,
   },
   {
-    type: MetadataType.OWNER,
+    type: MetadataType.Owner,
     createdBy: CREATED_BY,
     owners: OWNERS,
     createdOn: A_WEEK_AGO,
   },
   {
-    type: MetadataType.ROWS,
+    type: MetadataType.Rows,
     title: ROWS_TITLE,
   },
   {
-    type: MetadataType.SQL,
+    type: MetadataType.Sql,
     title: SQL_TITLE,
   },
   {
-    type: MetadataType.TABLE,
+    type: MetadataType.Table,
     title: TABLE_TITLE,
   },
   {
-    type: MetadataType.TAGS,
+    type: MetadataType.Tags,
     values: TAGS,
   },
 ];
diff --git a/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.test.ts b/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.test.ts
index 347cfd8b9ae..74ea8e61515 100644
--- a/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.test.ts
+++ b/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.test.ts
@@ -48,7 +48,7 @@ describe('useStoredSidebarWidth', () => {
   it('returns a stored filterBar width from localStorage', () => {
     const id = '123';
     const expectedWidth = 378;
-    setItem(LocalStorageKeys.common__resizable_sidebar_widths, {
+    setItem(LocalStorageKeys.CommonResizableSidebarWidths, {
       [id]: expectedWidth,
       '456': 250,
     });
@@ -66,7 +66,7 @@ describe('useStoredSidebarWidth', () => {
     const expectedWidth = 378;
     const otherDashboardId = '456';
     const otherDashboardWidth = 253;
-    setItem(LocalStorageKeys.common__resizable_sidebar_widths, {
+    setItem(LocalStorageKeys.CommonResizableSidebarWidths, {
       [id]: 300,
       [otherDashboardId]: otherDashboardWidth,
     });
@@ -81,7 +81,7 @@ describe('useStoredSidebarWidth', () => {
 
     const updatedWidth = result.current[0];
     const widthsMap = getItem(
-      LocalStorageKeys.common__resizable_sidebar_widths,
+      LocalStorageKeys.CommonResizableSidebarWidths,
       {},
     );
     expect(widthsMap[id]).toEqual(expectedWidth);
diff --git a/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.ts b/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.ts
index 4448d2ec52a..360a8cd5587 100644
--- a/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.ts
+++ b/superset-frontend/src/components/ResizableSidebar/useStoredSidebarWidth.ts
@@ -33,7 +33,7 @@ export default function useStoredSidebarWidth(
   useEffect(() => {
     widthsMapRef.current =
       widthsMapRef.current ??
-      getItem(LocalStorageKeys.common__resizable_sidebar_widths, {});
+      getItem(LocalStorageKeys.CommonResizableSidebarWidths, {});
     if (widthsMapRef.current[id]) {
       setSidebarWidth(widthsMapRef.current[id]);
     }
@@ -41,7 +41,7 @@ export default function useStoredSidebarWidth(
 
   function setStoredSidebarWidth(updatedWidth: number) {
     setSidebarWidth(updatedWidth);
-    setItem(LocalStorageKeys.common__resizable_sidebar_widths, {
+    setItem(LocalStorageKeys.CommonResizableSidebarWidths, {
       ...widthsMapRef.current,
       [id]: updatedWidth,
     });
diff --git a/superset-frontend/src/components/Table/Table.stories.tsx b/superset-frontend/src/components/Table/Table.stories.tsx
index 4a890aadf42..a2efe4abfc2 100644
--- a/superset-frontend/src/components/Table/Table.stories.tsx
+++ b/superset-frontend/src/components/Table/Table.stories.tsx
@@ -17,17 +17,17 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import {
+  ColumnsType,
+  ETableAction,
+  OnChangeFunction,
+  SUPERSET_TABLE_COLUMN,
   Table,
   TableSize,
-  SUPERSET_TABLE_COLUMN,
-  ColumnsType,
-  OnChangeFunction,
-  ETableAction,
 } from './index';
-import { numericalSort, alphabeticalSort } from './sorters';
+import { alphabeticalSort, numericalSort } from './sorters';
 import ButtonCell from './cell-renderers/ButtonCell';
 import ActionCell from './cell-renderers/ActionCell';
 import { exampleMenuOptions } from './cell-renderers/ActionCell/fixtures';
@@ -88,7 +88,7 @@ function generateColumns(amount: number): ColumnsType<ExampleData>[] {
       width: 90,
       render: (value: number) => (
         <NumericCell
-          options={{ style: Style.CURRENCY, currency: CurrencyCode.EUR }}
+          options={{ style: Style.Currency, currency: CurrencyCode.EUR }}
           value={value}
           locale={LocaleCode.en_US}
         />
@@ -238,7 +238,7 @@ const rendererColumns: ColumnsType<RendererData> = [
     key: 'euroCell',
     render: (value: number) => (
       <NumericCell
-        options={{ style: Style.CURRENCY, currency: CurrencyCode.EUR }}
+        options={{ style: Style.Currency, currency: CurrencyCode.EUR }}
         value={value}
         locale={LocaleCode.en_US}
       />
@@ -250,7 +250,7 @@ const rendererColumns: ColumnsType<RendererData> = [
     key: 'dollarCell',
     render: (value: number) => (
       <NumericCell
-        options={{ style: Style.CURRENCY, currency: CurrencyCode.USD }}
+        options={{ style: Style.Currency, currency: CurrencyCode.USD }}
         value={value}
         locale={LocaleCode.en_US}
       />
@@ -326,7 +326,7 @@ function handlers(record: object, rowIndex: number) {
 Basic.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   onRow: handlers,
   usePagination: false,
 };
@@ -338,7 +338,7 @@ export const Pagination: ComponentStory<typeof Table> = args => (
 Pagination.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   pageSizeOptions: ['5', '10', '15', '20', '25'],
   defaultPageSize: 5,
 };
@@ -377,7 +377,7 @@ const paginationColumns: ColumnsType<BasicData> = [
     width: 100,
     render: (value: number) => (
       <NumericCell
-        options={{ style: Style.CURRENCY, currency: CurrencyCode.EUR }}
+        options={{ style: Style.Currency, currency: CurrencyCode.EUR }}
         value={value}
         locale={LocaleCode.en_US}
       />
@@ -413,7 +413,7 @@ export const ServerPagination: ComponentStory<typeof Table> = args => {
     const pageSize = pagination?.pageSize ?? 5;
     const current = pagination?.current ?? 0;
     switch (extra?.action) {
-      case ETableAction.PAGINATE: {
+      case ETableAction.Paginate: {
         setLoading(true);
         // simulate a fetch
         setTimeout(() => {
@@ -422,11 +422,11 @@ export const ServerPagination: ComponentStory<typeof Table> = args => {
         }, 1000);
         break;
       }
-      case ETableAction.SORT: {
+      case ETableAction.Sort: {
         action(`table-sort-change: ${JSON.stringify(sorter)}`);
         break;
       }
-      case ETableAction.FILTER: {
+      case ETableAction.Filter: {
         action(`table-sort-change: ${JSON.stringify(filters)}`);
         break;
       }
@@ -450,7 +450,7 @@ export const ServerPagination: ComponentStory<typeof Table> = args => {
 
 ServerPagination.args = {
   columns: paginationColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   pageSizeOptions: ['5', '20', '50'],
   defaultPageSize: 5,
 };
@@ -462,7 +462,7 @@ export const VirtualizedPerformance: ComponentStory<typeof Table> = args => (
 VirtualizedPerformance.args = {
   data: bigdata,
   columns: bigColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   resizable: true,
   reorderable: true,
   height: 350,
@@ -477,7 +477,7 @@ export const Loading: ComponentStory<typeof Table> = args => (
 Loading.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   loading: true,
 };
 
@@ -488,7 +488,7 @@ export const ResizableColumns: ComponentStory<typeof Table> = args => (
 ResizableColumns.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   resizable: true,
 };
 
@@ -543,7 +543,7 @@ export const ReorderableColumns: ComponentStory<typeof Table> = args => {
 ReorderableColumns.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   reorderable: true,
 };
 
@@ -578,7 +578,7 @@ export const CellRenderers: ComponentStory<typeof Table> = args => (
 CellRenderers.args = {
   data: rendererData,
   columns: rendererColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   reorderable: true,
 };
 
@@ -659,7 +659,7 @@ export const HeaderRenderers: ComponentStory<typeof Table> = () => {
         <NumericCell
           value={value}
           options={{
-            style: Style.CURRENCY,
+            style: Style.Currency,
             currency:
               priceLocale === LocaleCode.en_US
                 ? CurrencyCode.USD
@@ -675,7 +675,7 @@ export const HeaderRenderers: ComponentStory<typeof Table> = () => {
     <Table<ShoppingData>
       data={shoppingData}
       columns={shoppingColumns}
-      size={TableSize.SMALL}
+      size={TableSize.Small}
       resizable
     />
   );
diff --git a/superset-frontend/src/components/Table/Table.test.tsx b/superset-frontend/src/components/Table/Table.test.tsx
index eded7efeb96..3d20093aedb 100644
--- a/superset-frontend/src/components/Table/Table.test.tsx
+++ b/superset-frontend/src/components/Table/Table.test.tsx
@@ -65,7 +65,7 @@ const testColumns: ColumnsType<BasicData> = [
 
 test('renders with default props', async () => {
   render(
-    <Table size={TableSize.MIDDLE} columns={testColumns} data={testData} />,
+    <Table size={TableSize.Middle} columns={testColumns} data={testData} />,
   );
   await waitFor(() =>
     testColumns.forEach(column =>
diff --git a/superset-frontend/src/components/Table/VirtualTable.tsx b/superset-frontend/src/components/Table/VirtualTable.tsx
index 4d4dc2a0042..4ac2cef3a3b 100644
--- a/superset-frontend/src/components/Table/VirtualTable.tsx
+++ b/superset-frontend/src/components/Table/VirtualTable.tsx
@@ -178,7 +178,7 @@ const VirtualTable = <RecordType extends object>(
       {},
       {},
       {
-        action: ETableAction.PAGINATE,
+        action: ETableAction.Paginate,
         currentDataSource: [],
       },
     );
@@ -187,7 +187,7 @@ const VirtualTable = <RecordType extends object>(
   const renderVirtualList = (rawData: object[], { ref, onScroll }: any) => {
     // eslint-disable-next-line no-param-reassign
     ref.current = connectObject;
-    const cellSize = size === TableSize.MIDDLE ? MIDDLE : SMALL;
+    const cellSize = size === TableSize.Middle ? MIDDLE : SMALL;
     return (
       <Grid
         ref={gridRef}
diff --git a/superset-frontend/src/components/Table/cell-renderers/ActionCell/index.tsx b/superset-frontend/src/components/Table/cell-renderers/ActionCell/index.tsx
index b6ba57420c6..e40c700987a 100644
--- a/superset-frontend/src/components/Table/cell-renderers/ActionCell/index.tsx
+++ b/superset-frontend/src/components/Table/cell-renderers/ActionCell/index.tsx
@@ -128,7 +128,7 @@ export function ActionCell(props: ActionCellProps) {
   };
   return (
     <Dropdown
-      iconOrientation={IconOrientation.HORIZONTAL}
+      iconOrientation={IconOrientation.Horizontal}
       onVisibleChange={handleVisibleChange}
       trigger={['click']}
       overlay={
diff --git a/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.stories.tsx b/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.stories.tsx
index bb0b52fe625..b1a0d42a1eb 100644
--- a/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.stories.tsx
+++ b/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.stories.tsx
@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { CurrencyCode, LocaleCode, NumericCell, Style } from './index';
+import { CurrencyCode, NumericCell, LocaleCode, Style } from './index';
 
 export default {
   title: 'Design System/Components/Table/Cell Renderers/NumericCell',
@@ -41,7 +41,7 @@ FrenchLocale.args = {
   value: 5678943,
   locale: LocaleCode.fr,
   options: {
-    style: Style.CURRENCY,
+    style: Style.Currency,
     currency: CurrencyCode.EUR,
   },
 };
diff --git a/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.test.tsx b/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.test.tsx
index b76a5bef65f..50cadddfba9 100644
--- a/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.test.tsx
+++ b/superset-frontend/src/components/Table/cell-renderers/NumericCell/NumericCell.test.tsx
@@ -26,7 +26,7 @@ test('renders with French locale and Euro currency format', () => {
       value={5678943}
       locale={LocaleCode.fr}
       options={{
-        style: Style.CURRENCY,
+        style: Style.Currency,
         currency: CurrencyCode.EUR,
       }}
     />,
@@ -40,7 +40,7 @@ test('renders with English US locale and USD currency format', () => {
       value={5678943}
       locale={LocaleCode.en_US}
       options={{
-        style: Style.CURRENCY,
+        style: Style.Currency,
         currency: CurrencyCode.USD,
       }}
     />,
diff --git a/superset-frontend/src/components/Table/cell-renderers/NumericCell/index.tsx b/superset-frontend/src/components/Table/cell-renderers/NumericCell/index.tsx
index 5e6d61aa478..b35dfd5cee1 100644
--- a/superset-frontend/src/components/Table/cell-renderers/NumericCell/index.tsx
+++ b/superset-frontend/src/components/Table/cell-renderers/NumericCell/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/naming-convention */
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
@@ -34,55 +35,6 @@ export interface NumericCellProps {
   options?: NumberOptions;
 }
 
-interface NumberOptions {
-  /**
-   * Style of number to display
-   */
-  style?: Style;
-
-  /**
-   * ISO 4217 currency code
-   */
-  currency?: CurrencyCode;
-
-  /**
-   * Languages in the form of a ISO 639-1 language code with optional region or script modifier (e.g. de_AT).
-   */
-  maximumFractionDigits?: number;
-
-  /**
-   * A number from 1 to 21 (default is 21)
-   */
-  maximumSignificantDigits?: number;
-
-  /**
-   * A number from 0 to 20 (default is 3)
-   */
-  minimumFractionDigits?: number;
-
-  /**
-   * A number from 1 to 21 (default is 1)
-   */
-  minimumIntegerDigits?: number;
-
-  /**
-   * A number from 1 to 21 (default is 21)
-   */
-  minimumSignificantDigits?: number;
-}
-
-export enum Style {
-  CURRENCY = 'currency',
-  DECIMAL = 'decimal',
-  PERCENT = 'percent',
-}
-
-export enum CurrencyDisplay {
-  SYMBOL = 'symbol',
-  CODE = 'code',
-  NAME = 'name',
-}
-
 export enum LocaleCode {
   af = 'af',
   ak = 'ak',
@@ -403,6 +355,55 @@ export enum CurrencyCode {
   ZWL = 'ZWL',
 }
 
+interface NumberOptions {
+  /**
+   * Style of number to display
+   */
+  style?: Style;
+
+  /**
+   * ISO 4217 currency code
+   */
+  currency?: CurrencyCode;
+
+  /**
+   * Languages in the form of a ISO 639-1 language code with optional region or script modifier (e.g. de_AT).
+   */
+  maximumFractionDigits?: number;
+
+  /**
+   * A number from 1 to 21 (default is 21)
+   */
+  maximumSignificantDigits?: number;
+
+  /**
+   * A number from 0 to 20 (default is 3)
+   */
+  minimumFractionDigits?: number;
+
+  /**
+   * A number from 1 to 21 (default is 1)
+   */
+  minimumIntegerDigits?: number;
+
+  /**
+   * A number from 1 to 21 (default is 21)
+   */
+  minimumSignificantDigits?: number;
+}
+
+export enum Style {
+  Currency = 'currency',
+  Decimal = 'decimal',
+  Percent = 'percent',
+}
+
+export enum CurrencyDisplay {
+  Symbol = 'symbol',
+  Code = 'code',
+  Name = 'name',
+}
+
 export function NumericCell(props: NumericCellProps) {
   const { value, locale = LocaleCode.en_US, options } = props;
   let displayValue = value?.toString() ?? value;
diff --git a/superset-frontend/src/components/Table/index.tsx b/superset-frontend/src/components/Table/index.tsx
index 12fdcec1d8e..c1956395b89 100644
--- a/superset-frontend/src/components/Table/index.tsx
+++ b/superset-frontend/src/components/Table/index.tsx
@@ -31,17 +31,17 @@ import VirtualTable from './VirtualTable';
 export const SUPERSET_TABLE_COLUMN = 'superset/table-column';
 
 export enum SelectionType {
-  'DISABLED' = 'disabled',
-  'SINGLE' = 'single',
-  'MULTI' = 'multi',
+  Disabled = 'disabled',
+  Single = 'single',
+  Multi = 'multi',
 }
 
 export type SortOrder = 'descend' | 'ascend' | null;
 
 export enum ETableAction {
-  PAGINATE = 'paginate',
-  SORT = 'sort',
-  FILTER = 'filter',
+  Paginate = 'paginate',
+  Sort = 'sort',
+  Filter = 'filter',
 }
 
 export type { ColumnsType };
@@ -49,8 +49,8 @@ export type OnChangeFunction<RecordType> =
   AntTableProps<RecordType>['onChange'];
 
 export enum TableSize {
-  SMALL = 'small',
-  MIDDLE = 'middle',
+  Small = 'small',
+  Middle = 'middle',
 }
 
 export interface TableProps<RecordType> {
@@ -234,9 +234,9 @@ const defaultLocale = {
 
 const selectionMap = {};
 const noop = () => {};
-selectionMap[SelectionType.MULTI] = 'checkbox';
-selectionMap[SelectionType.SINGLE] = 'radio';
-selectionMap[SelectionType.DISABLED] = null;
+selectionMap[SelectionType.Multi] = 'checkbox';
+selectionMap[SelectionType.Single] = 'radio';
+selectionMap[SelectionType.Disabled] = null;
 
 export function Table<RecordType extends object>(
   props: TableProps<RecordType>,
@@ -247,8 +247,8 @@ export function Table<RecordType extends object>(
     columns,
     selectedRows = defaultRowSelection,
     handleRowSelection,
-    size = TableSize.SMALL,
-    selectionType = SelectionType.DISABLED,
+    size = TableSize.Small,
+    selectionType = SelectionType.Disabled,
     sticky = true,
     loading = false,
     resizable = false,
diff --git a/superset-frontend/src/dashboard/actions/dashboardState.js b/superset-frontend/src/dashboard/actions/dashboardState.js
index fa3eeadf41d..bdbf4309031 100644
--- a/superset-frontend/src/dashboard/actions/dashboardState.js
+++ b/superset-frontend/src/dashboard/actions/dashboardState.js
@@ -255,7 +255,7 @@ export function saveDashboardRequest(data, id, saveType) {
       css: css || '',
       dashboard_title: dashboard_title || t('[ untitled dashboard ]'),
       owners: ensureIsArray(owners).map(o => (hasId(o) ? o.id : o)),
-      roles: !isFeatureEnabled(FeatureFlag.DASHBOARD_RBAC)
+      roles: !isFeatureEnabled(FeatureFlag.DashboardRbac)
         ? undefined
         : ensureIsArray(roles).map(r => (hasId(r) ? r.id : r)),
       slug: slug || null,
@@ -295,7 +295,7 @@ export function saveDashboardRequest(data, id, saveType) {
       if (lastModifiedTime) {
         dispatch(saveDashboardRequestSuccess(lastModifiedTime));
       }
-      if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+      if (isFeatureEnabled(FeatureFlag.DashboardCrossFilters)) {
         const { chartConfiguration, globalChartConfiguration } =
           handleChartConfiguration();
         dispatch(
@@ -372,7 +372,7 @@ export function saveDashboardRequest(data, id, saveType) {
     ) {
       let chartConfiguration = {};
       let globalChartConfiguration = {};
-      if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+      if (isFeatureEnabled(FeatureFlag.DashboardCrossFilters)) {
         ({ chartConfiguration, globalChartConfiguration } =
           handleChartConfiguration());
       }
@@ -406,7 +406,7 @@ export function saveDashboardRequest(data, id, saveType) {
           .catch(response => onError(response));
       return new Promise((resolve, reject) => {
         if (
-          !isFeatureEnabled(FeatureFlag.CONFIRM_DASHBOARD_DIFF) ||
+          !isFeatureEnabled(FeatureFlag.ConfirmDashboardDiff) ||
           saveType === SAVE_TYPE_OVERWRITE_CONFIRMED
         ) {
           // skip overwrite precheck
diff --git a/superset-frontend/src/dashboard/actions/datasources.ts b/superset-frontend/src/dashboard/actions/datasources.ts
index 42004272ccb..f48c1242845 100644
--- a/superset-frontend/src/dashboard/actions/datasources.ts
+++ b/superset-frontend/src/dashboard/actions/datasources.ts
@@ -22,31 +22,31 @@ import { Datasource, RootState } from 'src/dashboard/types';
 
 // update datasources index for Dashboard
 export enum DatasourcesAction {
-  SET_DATASOURCES = 'SET_DATASOURCES',
-  SET_DATASOURCE = 'SET_DATASOURCE',
+  SetDatasources = 'SET_DATASOURCES',
+  SetDatasource = 'SET_DATASOURCE',
 }
 
 export type DatasourcesActionPayload =
   | {
-      type: DatasourcesAction.SET_DATASOURCES;
+      type: DatasourcesAction.SetDatasources;
       datasources: Datasource[] | null;
     }
   | {
-      type: DatasourcesAction.SET_DATASOURCE;
+      type: DatasourcesAction.SetDatasource;
       key: Datasource['uid'];
       datasource: Datasource;
     };
 
 export function setDatasources(datasources: Datasource[] | null) {
   return {
-    type: DatasourcesAction.SET_DATASOURCES,
+    type: DatasourcesAction.SetDatasources,
     datasources,
   };
 }
 
 export function setDatasource(datasource: Datasource, key: string) {
   return {
-    type: DatasourcesAction.SET_DATASOURCE,
+    type: DatasourcesAction.SetDatasource,
     key,
     datasource,
   };
diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js
index 930280a1f9b..7898ad0929f 100644
--- a/superset-frontend/src/dashboard/actions/hydrate.js
+++ b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -241,7 +241,7 @@ export const hydrateDashboard =
       filterConfig: metadata?.native_filter_configuration || [],
     });
 
-    if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+    if (isFeatureEnabled(FeatureFlag.DashboardCrossFilters)) {
       const { chartConfiguration, globalChartConfiguration } =
         getCrossFiltersConfiguration(
           dashboardLayout.present,
@@ -292,9 +292,9 @@ export const hydrateDashboard =
             conf: common?.conf,
           },
           filterBarOrientation:
-            (isFeatureEnabled(FeatureFlag.HORIZONTAL_FILTER_BAR) &&
+            (isFeatureEnabled(FeatureFlag.HorizontalFilterBar) &&
               metadata.filter_bar_orientation) ||
-            FilterBarOrientation.VERTICAL,
+            FilterBarOrientation.Vertical,
           crossFiltersEnabled,
         },
         dataMask,
@@ -323,7 +323,7 @@ export const hydrateDashboard =
           isRefreshing: false,
           isFiltersRefreshing: false,
           activeTabs: activeTabs || dashboardState?.activeTabs || [],
-          datasetsStatus: ResourceStatus.LOADING,
+          datasetsStatus: ResourceStatus.Loading,
         },
         dashboardLayout,
       },
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
index 3aa22a84086..6a13e72a6cc 100644
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.test.tsx
@@ -40,7 +40,7 @@ declare const global: {
 
 test('do not render thumbnail if feature flag is not set', async () => {
   global.featureFlags = {
-    [FeatureFlag.THUMBNAILS]: false,
+    [FeatureFlag.Thumbnails]: false,
   };
 
   await act(async () => {
@@ -52,7 +52,7 @@ test('do not render thumbnail if feature flag is not set', async () => {
 
 test('render thumbnail if feature flag is set', async () => {
   global.featureFlags = {
-    [FeatureFlag.THUMBNAILS]: true,
+    [FeatureFlag.Thumbnails]: true,
   };
 
   await act(async () => {
diff --git a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
index af824bf4c3e..5874d651584 100644
--- a/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
+++ b/superset-frontend/src/dashboard/components/AddSliceCard/AddSliceCard.tsx
@@ -186,7 +186,7 @@ const AddSliceCard: React.FC<{
   thumbnailUrl,
   visType,
 }) => {
-  const showThumbnails = isFeatureEnabled(FeatureFlag.THUMBNAILS);
+  const showThumbnails = isFeatureEnabled(FeatureFlag.Thumbnails);
   const [sliceAddedBadge, setSliceAddedBadge] = useState<HTMLDivElement>();
   const { mountedPluginMetadata } = usePluginContext();
   const vizName = useMemo(
diff --git a/superset-frontend/src/dashboard/components/Dashboard.jsx b/superset-frontend/src/dashboard/components/Dashboard.jsx
index 6e909f3b152..713abfa74f1 100644
--- a/superset-frontend/src/dashboard/components/Dashboard.jsx
+++ b/superset-frontend/src/dashboard/components/Dashboard.jsx
@@ -162,7 +162,7 @@ class Dashboard extends React.PureComponent {
     const { appliedFilters, appliedOwnDataCharts } = this;
     const { activeFilters, ownDataCharts, chartConfiguration } = this.props;
     if (
-      isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+      isFeatureEnabled(FeatureFlag.DashboardCrossFilters) &&
       !chartConfiguration
     ) {
       // For a first loading we need to wait for cross filters charts data loaded to get all active filters
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index cf50c24db55..ebb4ece2bb3 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -385,13 +385,13 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     state => state.dashboardState.fullSizeChartId,
   );
   const crossFiltersEnabled = isFeatureEnabled(
-    FeatureFlag.DASHBOARD_CROSS_FILTERS,
+    FeatureFlag.DashboardCrossFilters,
   );
   const filterBarOrientation = useSelector<RootState, FilterBarOrientation>(
     ({ dashboardInfo }) =>
-      isFeatureEnabled(FeatureFlag.HORIZONTAL_FILTER_BAR)
+      isFeatureEnabled(FeatureFlag.HorizontalFilterBar)
         ? dashboardInfo.filterBarOrientation
-        : FilterBarOrientation.VERTICAL,
+        : FilterBarOrientation.Vertical,
   );
 
   const handleChangeTab = useCallback(
@@ -424,10 +424,10 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
       ? dashboardLayout[rootChildId]
       : undefined;
   const standaloneMode = getUrlParam(URL_PARAMS.standalone);
-  const isReport = standaloneMode === DashboardStandaloneMode.REPORT;
+  const isReport = standaloneMode === DashboardStandaloneMode.Report;
   const hideDashboardHeader =
     uiConfig.hideTitle ||
-    standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
+    standaloneMode === DashboardStandaloneMode.HideNavAndTitle ||
     isReport;
 
   const [barTopOffset, setBarTopOffset] = useState(0);
@@ -478,7 +478,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
         dashboardFiltersOpen ||
         editMode ||
         !nativeFiltersEnabled ||
-        filterBarOrientation === FilterBarOrientation.HORIZONTAL
+        filterBarOrientation === FilterBarOrientation.Horizontal
           ? 0
           : -32,
     }),
@@ -516,9 +516,9 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
       <div>
         {!hideDashboardHeader && <DashboardHeader />}
         {showFilterBar &&
-          filterBarOrientation === FilterBarOrientation.HORIZONTAL && (
+          filterBarOrientation === FilterBarOrientation.Horizontal && (
             <FilterBar
-              orientation={FilterBarOrientation.HORIZONTAL}
+              orientation={FilterBarOrientation.Horizontal}
               hidden={isReport}
             />
           )}
@@ -566,13 +566,13 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     !dashboardFiltersOpen &&
     !editMode &&
     nativeFiltersEnabled &&
-    filterBarOrientation !== FilterBarOrientation.HORIZONTAL
+    filterBarOrientation !== FilterBarOrientation.Horizontal
       ? 0
       : theme.gridUnit * 8;
 
   return (
     <DashboardWrapper>
-      {showFilterBar && filterBarOrientation === FilterBarOrientation.VERTICAL && (
+      {showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical && (
         <>
           <ResizableSidebar
             id={`dashboard:${dashboardId}`}
@@ -594,7 +594,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
                   <StickyPanel ref={containerRef} width={filterBarWidth}>
                     <ErrorBoundary>
                       <FilterBar
-                        orientation={FilterBarOrientation.VERTICAL}
+                        orientation={FilterBarOrientation.Vertical}
                         verticalConfig={{
                           filtersOpen: dashboardFiltersOpen,
                           toggleFiltersBar: toggleDashboardFiltersOpen,
diff --git a/superset-frontend/src/dashboard/components/Header/index.jsx b/superset-frontend/src/dashboard/components/Header/index.jsx
index e94aa610a15..485185d6073 100644
--- a/superset-frontend/src/dashboard/components/Header/index.jsx
+++ b/superset-frontend/src/dashboard/components/Header/index.jsx
@@ -471,7 +471,7 @@ class Header extends React.PureComponent {
     const userCanShare = dashboardInfo.dash_share_perm;
     const userCanSaveAs = dashboardInfo.dash_save_perm;
     const userCanCurate =
-      isFeatureEnabled(FeatureFlag.EMBEDDED_SUPERSET) &&
+      isFeatureEnabled(FeatureFlag.EmbeddedSuperset) &&
       findPermission('can_set_embedded', 'Dashboard', user.roles);
     const refreshLimit =
       dashboardInfo.common?.conf?.SUPERSET_DASHBOARD_PERIODICAL_REFRESH_LIMIT;
diff --git a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
index 3a1421e3805..1b5ef5fcebf 100644
--- a/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/dashboard/components/PropertiesModal/index.tsx
@@ -401,7 +401,7 @@ const PropertiesModal = ({
       updateMetadata: false,
     });
 
-    if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+    if (isFeatureEnabled(FeatureFlag.TaggingSystem)) {
       // update tags
       try {
         fetchTags(
@@ -422,7 +422,7 @@ const PropertiesModal = ({
 
     const moreOnSubmitProps: { roles?: Roles } = {};
     const morePutProps: { roles?: number[] } = {};
-    if (isFeatureEnabled(FeatureFlag.DASHBOARD_RBAC)) {
+    if (isFeatureEnabled(FeatureFlag.DashboardRbac)) {
       moreOnSubmitProps.roles = roles;
       morePutProps.roles = (roles || []).map(r => r.id);
     }
@@ -603,7 +603,7 @@ const PropertiesModal = ({
   }, [dashboardInfo, dashboardTitle, form]);
 
   useEffect(() => {
-    if (!isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) return;
+    if (!isFeatureEnabled(FeatureFlag.TaggingSystem)) return;
     try {
       fetchTags(
         {
@@ -698,7 +698,7 @@ const PropertiesModal = ({
             </p>
           </Col>
         </Row>
-        {isFeatureEnabled(FeatureFlag.DASHBOARD_RBAC)
+        {isFeatureEnabled(FeatureFlag.DashboardRbac)
           ? getRowsWithRoles()
           : getRowsWithoutRoles()}
         <Row>
@@ -727,14 +727,14 @@ const PropertiesModal = ({
             </p>
           </Col>
         </Row>
-        {isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) ? (
+        {isFeatureEnabled(FeatureFlag.TaggingSystem) ? (
           <Row gutter={16}>
             <Col xs={24} md={12}>
               <h3 css={{ marginTop: '1em' }}>{t('Tags')}</h3>
             </Col>
           </Row>
         ) : null}
-        {isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) ? (
+        {isFeatureEnabled(FeatureFlag.TaggingSystem) ? (
           <Row gutter={16}>
             <Col xs={24} md={12}>
               <StyledFormItem>
diff --git a/superset-frontend/src/dashboard/components/SliceAdder.jsx b/superset-frontend/src/dashboard/components/SliceAdder.jsx
index 617fd32e8fc..b84cc52e024 100644
--- a/superset-frontend/src/dashboard/components/SliceAdder.jsx
+++ b/superset-frontend/src/dashboard/components/SliceAdder.jsx
@@ -147,7 +147,7 @@ class SliceAdder extends React.Component {
       sortBy: DEFAULT_SORT_KEY,
       selectedSliceIdsSet: new Set(props.selectedSliceIds),
       showOnlyMyCharts: getItem(
-        LocalStorageKeys.dashboard__editor_show_only_my_charts,
+        LocalStorageKeys.DashboardEditorShowOnlyMyCharts,
         true,
       ),
     };
@@ -312,10 +312,7 @@ class SliceAdder extends React.Component {
         showOnlyMyCharts,
       ),
     }));
-    setItem(
-      LocalStorageKeys.dashboard__editor_show_only_my_charts,
-      showOnlyMyCharts,
-    );
+    setItem(LocalStorageKeys.DashboardEditorShowOnlyMyCharts, showOnlyMyCharts);
   }
 
   render() {
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
index dc94e77cac0..31a3cad9f6c 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/SliceHeaderControls.test.tsx
@@ -196,7 +196,7 @@ test('Should "export to Excel"', async () => {
 test('Export full CSV is under featureflag', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.ALLOW_FULL_CSV_EXPORT]: false,
+    [FeatureFlag.AllowFullCsvExport]: false,
   };
   const props = createProps('table');
   renderWrapper(props);
@@ -208,7 +208,7 @@ test('Export full CSV is under featureflag', async () => {
 test('Should "export full CSV"', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.ALLOW_FULL_CSV_EXPORT]: true,
+    [FeatureFlag.AllowFullCsvExport]: true,
   };
   const props = createProps('table');
   renderWrapper(props);
@@ -222,7 +222,7 @@ test('Should "export full CSV"', async () => {
 test('Should not show export full CSV if report is not table', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.ALLOW_FULL_CSV_EXPORT]: true,
+    [FeatureFlag.AllowFullCsvExport]: true,
   };
   renderWrapper();
   userEvent.hover(screen.getByText('Download'));
@@ -233,7 +233,7 @@ test('Should not show export full CSV if report is not table', async () => {
 test('Export full Excel is under featureflag', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.ALLOW_FULL_CSV_EXPORT]: false,
+    [FeatureFlag.AllowFullCsvExport]: false,
   };
   const props = createProps('table');
   renderWrapper(props);
@@ -245,7 +245,7 @@ test('Export full Excel is under featureflag', async () => {
 test('Should "export full Excel"', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.ALLOW_FULL_CSV_EXPORT]: true,
+    [FeatureFlag.AllowFullCsvExport]: true,
   };
   const props = createProps('table');
   renderWrapper(props);
@@ -259,7 +259,7 @@ test('Should "export full Excel"', async () => {
 test('Should not show export full Excel if report is not table', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.ALLOW_FULL_CSV_EXPORT]: true,
+    [FeatureFlag.AllowFullCsvExport]: true,
   };
   renderWrapper();
   userEvent.hover(screen.getByText('Download'));
@@ -298,7 +298,7 @@ test('Should "Enter fullscreen"', () => {
 test('Drill to detail modal is under featureflag', () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DRILL_TO_DETAIL]: false,
+    [FeatureFlag.DrillToDetail]: false,
   };
   const props = createProps();
   renderWrapper(props);
@@ -308,7 +308,7 @@ test('Drill to detail modal is under featureflag', () => {
 test('Should show "Drill to detail"', () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DRILL_TO_DETAIL]: true,
+    [FeatureFlag.DrillToDetail]: true,
   };
   const props = createProps();
   props.slice.slice_id = 18;
@@ -324,7 +324,7 @@ test('Should show "Drill to detail"', () => {
 test('Should show menu items tied to can_view_and_drill permission', () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DRILL_TO_DETAIL]: true,
+    [FeatureFlag.DrillToDetail]: true,
   };
   const props = {
     ...createProps(),
diff --git a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
index b1196e7c114..d4b9a1a0b93 100644
--- a/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx
@@ -269,10 +269,10 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
     useSelector<RootState, boolean>(
       ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
     ) &&
-    isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+    isFeatureEnabled(FeatureFlag.DashboardCrossFilters) &&
     getChartMetadataRegistry()
       .get(props.slice.viz_type)
-      ?.behaviors?.includes(Behavior.INTERACTIVE_CHART);
+      ?.behaviors?.includes(Behavior.InteractiveChart);
   const canViewDrill = useSelector((state: RootState) =>
     findPermission('can_view_and_drill', 'Dashboard', state.user?.roles),
   );
@@ -485,7 +485,7 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
         </Menu.Item>
       )}
 
-      {isFeatureEnabled(FeatureFlag.DRILL_TO_DETAIL) &&
+      {isFeatureEnabled(FeatureFlag.DrillToDetail) &&
         canExploreOrView &&
         canDatasourceSamples && (
           <DrillDetailMenuItems
@@ -526,7 +526,7 @@ const SliceHeaderControls = (props: SliceHeaderControlsPropsWithRouter) => {
             {t('Export to Excel')}
           </Menu.Item>
 
-          {isFeatureEnabled(FeatureFlag.ALLOW_FULL_CSV_EXPORT) &&
+          {isFeatureEnabled(FeatureFlag.AllowFullCsvExport) &&
             props.supersetCanCSV &&
             isTable && (
               <>
diff --git a/superset-frontend/src/dashboard/components/SyncDashboardState/SyncDashboardState.test.tsx b/superset-frontend/src/dashboard/components/SyncDashboardState/SyncDashboardState.test.tsx
index 1565a43e196..063e88975de 100644
--- a/superset-frontend/src/dashboard/components/SyncDashboardState/SyncDashboardState.test.tsx
+++ b/superset-frontend/src/dashboard/components/SyncDashboardState/SyncDashboardState.test.tsx
@@ -26,7 +26,7 @@ test('stores the dashboard info with local storages', () => {
   render(<SyncDashboardState dashboardPageId={testDashboardPageId} />, {
     useRedux: true,
   });
-  expect(getItem(LocalStorageKeys.dashboard__explore_context, {})).toEqual({
+  expect(getItem(LocalStorageKeys.DashboardExploreContext, {})).toEqual({
     [testDashboardPageId]: expect.objectContaining({
       dashboardPageId: testDashboardPageId,
     }),
diff --git a/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx b/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx
index fd252e83c6d..4ad1f3518ef 100644
--- a/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx
+++ b/superset-frontend/src/dashboard/components/SyncDashboardState/index.tsx
@@ -34,7 +34,7 @@ const EMPTY_OBJECT = {};
 
 export const getDashboardContextLocalStorage = () => {
   const dashboardsContexts = getItem(
-    LocalStorageKeys.dashboard__explore_context,
+    LocalStorageKeys.DashboardExploreContext,
     {},
   );
   // A new dashboard tab id is generated on each dashboard page opening.
@@ -52,7 +52,7 @@ const updateDashboardTabLocalStorage = (
   dashboardContext: DashboardContextForExplore,
 ) => {
   const dashboardsContexts = getDashboardContextLocalStorage();
-  setItem(LocalStorageKeys.dashboard__explore_context, {
+  setItem(LocalStorageKeys.DashboardExploreContext, {
     ...dashboardsContexts,
     [dashboardPageId]: dashboardContext,
   });
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
index ae3db36d1db..d645a1a2cfc 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx
@@ -118,7 +118,7 @@ class Row extends React.PureComponent {
   // if chart rendered - remove it if it's more than 4 view heights away from current viewport
   componentDidMount() {
     if (
-      isFeatureEnabled(FeatureFlag.DASHBOARD_VIRTUALIZATION) &&
+      isFeatureEnabled(FeatureFlag.DashboardVirtualization) &&
       !isCurrentUserBot()
     ) {
       this.observerEnabler = new IntersectionObserver(
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
index cb6f17d96db..3c44081a3f9 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
@@ -109,7 +109,7 @@ const ActionButtons = ({
   dataMaskApplied,
   dataMaskSelected,
   isApplyDisabled,
-  filterBarOrientation = FilterBarOrientation.VERTICAL,
+  filterBarOrientation = FilterBarOrientation.Vertical,
 }: ActionButtonsProps) => {
   const isClearAllEnabled = useMemo(
     () =>
@@ -121,7 +121,7 @@ const ActionButtons = ({
       ),
     [dataMaskApplied, dataMaskSelected],
   );
-  const isVertical = filterBarOrientation === FilterBarOrientation.VERTICAL;
+  const isVertical = filterBarOrientation === FilterBarOrientation.Vertical;
 
   return (
     <div
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx
index 85dc3bf7054..523f536edcc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.test.tsx
@@ -31,7 +31,7 @@ const mockedProps = {
     status: IndicatorStatus.CrossFilterApplied,
     path: ['test-path'],
   },
-  orientation: FilterBarOrientation.HORIZONTAL,
+  orientation: FilterBarOrientation.Horizontal,
   last: false,
 };
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
index 981d99e56d6..98f4027ca77 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilter.tsx
@@ -63,7 +63,7 @@ const CrossFilter = (props: {
     <div
       key={`${filter.name}${filter.emitterId}`}
       css={css`
-        ${orientation === FilterBarOrientation.VERTICAL
+        ${orientation === FilterBarOrientation.Vertical
           ? `
             display: block;
             margin-bottom: ${theme.gridUnit * 4}px;
@@ -75,7 +75,7 @@ const CrossFilter = (props: {
     >
       <CrossFilterTitle
         title={filter.name}
-        orientation={orientation || FilterBarOrientation.HORIZONTAL}
+        orientation={orientation || FilterBarOrientation.Horizontal}
         onHighlightFilterSource={() => handleHighlightFilterSource(filter.path)}
       />
       {(filter.column || filter.value) && (
@@ -89,7 +89,7 @@ const CrossFilter = (props: {
         <span
           data-test="cross-filters-divider"
           css={css`
-            ${orientation === FilterBarOrientation.HORIZONTAL
+            ${orientation === FilterBarOrientation.Horizontal
               ? `
                 width: 1px;
                 height: 22px;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx
index b4b04355430..b22d6b3f90d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.test.tsx
@@ -36,7 +36,7 @@ const mockedProps: {
     status: IndicatorStatus.CrossFilterApplied,
     path: ['test-path'],
   },
-  orientation: FilterBarOrientation.HORIZONTAL,
+  orientation: FilterBarOrientation.Horizontal,
   removeCrossFilter: jest.fn(),
 };
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
index d4b07899199..b4562d44701 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTag.tsx
@@ -71,7 +71,7 @@ const CrossFilterTag = (props: {
   return (
     <StyledTag
       css={css`
-        ${orientation === FilterBarOrientation.VERTICAL
+        ${orientation === FilterBarOrientation.Vertical
           ? `
             margin-top: ${theme.gridUnit * 2}px;
           `
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx
index 16987440a24..9b6e14964f1 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.test.tsx
@@ -24,7 +24,7 @@ import CrossFilterTitle from './CrossFilterTitle';
 
 const mockedProps = {
   title: 'test-title',
-  orientation: FilterBarOrientation.HORIZONTAL,
+  orientation: FilterBarOrientation.Horizontal,
   onHighlightFilterSource: jest.fn(),
 };
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
index 9221bffe152..867103b028a 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/CrossFilterTitle.tsx
@@ -68,7 +68,7 @@ const CrossFilterChartTitle = (props: {
       <Tooltip title={titleIsTruncated ? title : null}>
         <span
           css={css`
-            max-width: ${orientation === FilterBarOrientation.VERTICAL
+            max-width: ${orientation === FilterBarOrientation.Vertical
               ? `${theme.gridUnit * 45}px`
               : `${theme.gridUnit * 15}px`};
             line-height: 1.4;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
index a748f9ed997..ea7ee76ba8e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/CrossFilters/VerticalCollapse.tsx
@@ -59,7 +59,7 @@ const CrossFiltersVerticalCollapse = (props: {
         <CrossFilter
           key={filter.emitterId}
           filter={filter}
-          orientation={FilterBarOrientation.VERTICAL}
+          orientation={FilterBarOrientation.Vertical}
         />
       )),
     [crossFilters],
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
index 99b5fa23f92..42f92522ff1 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
@@ -160,7 +160,7 @@ describe('FilterBar', () => {
   const renderWrapper = (props = closedBarProps, state?: object) =>
     render(
       <FilterBar
-        orientation={FilterBarOrientation.VERTICAL}
+        orientation={FilterBarOrientation.Vertical}
         verticalConfig={{
           width: 280,
           height: 400,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
index 8c236c27148..1c5f2ab2c73 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/FilterBarSettings.test.tsx
@@ -47,7 +47,7 @@ const initialState: { dashboardInfo: DashboardInfo } = {
     },
     json_metadata: '',
     dash_edit_perm: true,
-    filterBarOrientation: FilterBarOrientation.VERTICAL,
+    filterBarOrientation: FilterBarOrientation.Vertical,
     common: {
       conf: {},
       flash_messages: [],
@@ -73,7 +73,7 @@ const setup = (dashboardInfoOverride: Partial<DashboardInfo> = {}) =>
 test('Dropdown trigger renders with FF HORIZONTAL_FILTER_BAR on', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: true,
+    [FeatureFlag.HorizontalFilterBar]: true,
   };
   await setup();
   expect(screen.getByLabelText('gear')).toBeVisible();
@@ -82,7 +82,7 @@ test('Dropdown trigger renders with FF HORIZONTAL_FILTER_BAR on', async () => {
 test('Dropdown trigger does not render with FF HORIZONTAL_FILTER_BAR off', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: false,
+    [FeatureFlag.HorizontalFilterBar]: false,
   };
   await setup();
   expect(screen.queryByLabelText('gear')).not.toBeInTheDocument();
@@ -91,7 +91,7 @@ test('Dropdown trigger does not render with FF HORIZONTAL_FILTER_BAR off', async
 test('Dropdown trigger renders with dashboard edit permissions', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: true,
+    [FeatureFlag.HorizontalFilterBar]: true,
   };
   await setup({
     dash_edit_perm: true,
@@ -102,7 +102,7 @@ test('Dropdown trigger renders with dashboard edit permissions', async () => {
 test('Dropdown trigger does not render without dashboard edit permissions', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: true,
+    [FeatureFlag.HorizontalFilterBar]: true,
   };
   await setup({
     dash_edit_perm: false,
@@ -114,7 +114,7 @@ test('Dropdown trigger does not render without dashboard edit permissions', asyn
 test('Dropdown trigger renders with FF DASHBOARD_CROSS_FILTERS on', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
+    [FeatureFlag.DashboardCrossFilters]: true,
   };
   await setup();
 
@@ -124,7 +124,7 @@ test('Dropdown trigger renders with FF DASHBOARD_CROSS_FILTERS on', async () =>
 test('Dropdown trigger does not render with FF DASHBOARD_CROSS_FILTERS off', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: false,
+    [FeatureFlag.DashboardCrossFilters]: false,
   };
   await setup();
 
@@ -134,7 +134,7 @@ test('Dropdown trigger does not render with FF DASHBOARD_CROSS_FILTERS off', asy
 test('Popover shows cross-filtering option on by default', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
+    [FeatureFlag.DashboardCrossFilters]: true,
   };
   await setup();
   userEvent.click(screen.getByLabelText('gear'));
@@ -145,7 +145,7 @@ test('Popover shows cross-filtering option on by default', async () => {
 test('Can enable/disable cross-filtering', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
+    [FeatureFlag.DashboardCrossFilters]: true,
   };
   fetchMock.reset();
   fetchMock.put('glob:*/api/v1/dashboard/1', {
@@ -165,7 +165,7 @@ test('Can enable/disable cross-filtering', async () => {
 test('Popover opens with "Vertical" selected', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: true,
+    [FeatureFlag.HorizontalFilterBar]: true,
   };
   await setup();
   userEvent.click(screen.getByLabelText('gear'));
@@ -180,9 +180,9 @@ test('Popover opens with "Vertical" selected', async () => {
 test('Popover opens with "Horizontal" selected', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: true,
+    [FeatureFlag.HorizontalFilterBar]: true,
   };
-  await setup({ filterBarOrientation: FilterBarOrientation.HORIZONTAL });
+  await setup({ filterBarOrientation: FilterBarOrientation.Horizontal });
   userEvent.click(screen.getByLabelText('gear'));
   userEvent.hover(screen.getByText('Orientation of filter bar'));
   expect(await screen.findByText('Vertical (Left)')).toBeInTheDocument();
@@ -195,7 +195,7 @@ test('Popover opens with "Horizontal" selected', async () => {
 test('On selection change, send request and update checked value', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: true,
+    [FeatureFlag.HorizontalFilterBar]: true,
   };
   fetchMock.reset();
   fetchMock.put('glob:*/api/v1/dashboard/1', {
@@ -256,7 +256,7 @@ test('On selection change, send request and update checked value', async () => {
 test('On failed request, restore previous selection', async () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.HORIZONTAL_FILTER_BAR]: true,
+    [FeatureFlag.HorizontalFilterBar]: true,
   };
   fetchMock.reset();
   fetchMock.put('glob:*/api/v1/dashboard/1', 400);
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
index 8aa51f06339..05f57beb6bc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBarSettings/index.tsx
@@ -67,7 +67,7 @@ const CROSS_FILTERS_MENU_KEY = 'cross-filters-menu-key';
 const CROSS_FILTERS_SCOPING_MENU_KEY = 'cross-filters-scoping-menu-key';
 
 const isOrientation = (o: SelectedKey): o is FilterBarOrientation =>
-  o === FilterBarOrientation.VERTICAL || o === FilterBarOrientation.HORIZONTAL;
+  o === FilterBarOrientation.Vertical || o === FilterBarOrientation.Horizontal;
 
 const FilterBarSettings = () => {
   const dispatch = useDispatch();
@@ -81,7 +81,7 @@ const FilterBarSettings = () => {
   const [selectedFilterBarOrientation, setSelectedFilterBarOrientation] =
     useState(filterBarOrientation);
   const isCrossFiltersFeatureEnabled = isFeatureEnabled(
-    FeatureFlag.DASHBOARD_CROSS_FILTERS,
+    FeatureFlag.DashboardCrossFilters,
   );
   const shouldEnableCrossFilters =
     isCrossFiltersEnabled && isCrossFiltersFeatureEnabled;
@@ -92,7 +92,7 @@ const FilterBarSettings = () => {
     ({ dashboardInfo }) => dashboardInfo.dash_edit_perm,
   );
   const canSetHorizontalFilterBar =
-    canEdit && isFeatureEnabled(FeatureFlag.HORIZONTAL_FILTER_BAR);
+    canEdit && isFeatureEnabled(FeatureFlag.HorizontalFilterBar);
 
   const [openScopingModal, scopingModal] = useCrossFiltersScopingModal();
 
@@ -184,11 +184,11 @@ const FilterBarSettings = () => {
         label: t('Orientation of filter bar'),
         children: [
           {
-            key: FilterBarOrientation.VERTICAL,
+            key: FilterBarOrientation.Vertical,
             label: t('Vertical (Left)'),
           },
           {
-            key: FilterBarOrientation.HORIZONTAL,
+            key: FilterBarOrientation.Horizontal,
             label: t('Horizontal (Top)'),
           },
         ],
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
index 96f51f5359e..bc66d07c08b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx
@@ -153,7 +153,7 @@ const useFilterControlDisplay = (
   overflow: boolean,
 ) =>
   useMemo(() => {
-    if (orientation === FilterBarOrientation.HORIZONTAL) {
+    if (orientation === FilterBarOrientation.Horizontal) {
       if (overflow) {
         return {
           FilterControlContainer: HorizontalOverflowFilterControlContainer,
@@ -228,7 +228,7 @@ const FilterControl = ({
   inView,
   showOverflow,
   parentRef,
-  orientation = FilterBarOrientation.VERTICAL,
+  orientation = FilterBarOrientation.Vertical,
   overflow = false,
 }: FilterControlProps) => {
   const portalNode = useMemo(() => createHtmlPortalNode(), []);
@@ -275,7 +275,7 @@ const FilterControl = ({
 
   const isScrolling = useContext(FilterBarScrollContext);
   const filterCardPlacement = useMemo(() => {
-    if (orientation === FilterBarOrientation.HORIZONTAL) {
+    if (orientation === FilterBarOrientation.Horizontal) {
       if (overflow) {
         return FilterCardPlacement.Left;
       }
@@ -302,7 +302,7 @@ const FilterControl = ({
       </InPortal>
       <FilterControlContainer
         layout={
-          orientation === FilterBarOrientation.HORIZONTAL && !overflow
+          orientation === FilterBarOrientation.Horizontal && !overflow
             ? 'horizontal'
             : 'vertical'
         }
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
index 629ec75cb00..a0a6c1231e1 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControls.tsx
@@ -75,9 +75,9 @@ const FilterControls: FC<FilterControlsProps> = ({
 }) => {
   const filterBarOrientation = useSelector<RootState, FilterBarOrientation>(
     ({ dashboardInfo }) =>
-      isFeatureEnabled(FeatureFlag.HORIZONTAL_FILTER_BAR)
+      isFeatureEnabled(FeatureFlag.HorizontalFilterBar)
         ? dashboardInfo.filterBarOrientation
-        : FilterBarOrientation.VERTICAL,
+        : FilterBarOrientation.Vertical,
   );
 
   const { outlinedFilterId, lastUpdated } = useFilterOutlined();
@@ -97,7 +97,7 @@ const FilterControls: FC<FilterControlsProps> = ({
   const verboseMaps = useChartsVerboseMaps();
 
   const isCrossFiltersEnabled = isFeatureEnabled(
-    FeatureFlag.DASHBOARD_CROSS_FILTERS,
+    FeatureFlag.DashboardCrossFilters,
   );
   const selectedCrossFilters = useMemo(
     () =>
@@ -208,7 +208,7 @@ const FilterControls: FC<FilterControlsProps> = ({
       id: `${c.name}${c.emitterId}`,
       element: rendererCrossFilter(
         c,
-        FilterBarOrientation.HORIZONTAL,
+        FilterBarOrientation.Horizontal,
         selectedCrossFilters.at(-1),
       ),
     }));
@@ -326,9 +326,9 @@ const FilterControls: FC<FilterControlsProps> = ({
             )}
           </InPortal>
         ))}
-      {filterBarOrientation === FilterBarOrientation.VERTICAL &&
+      {filterBarOrientation === FilterBarOrientation.Vertical &&
         renderVerticalContent()}
-      {filterBarOrientation === FilterBarOrientation.HORIZONTAL &&
+      {filterBarOrientation === FilterBarOrientation.Horizontal &&
         renderHorizontalContent()}
     </>
   );
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx
index 46e7c03fadb..37385ff5e9f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.stories.tsx
@@ -65,7 +65,7 @@ export const HorizontalFilterDivider = (props: FilterDividerProps) => (
         background-color: white;
       `}
     >
-      <FilterDivider orientation={FilterBarOrientation.HORIZONTAL} {...props} />
+      <FilterDivider orientation={FilterBarOrientation.Horizontal} {...props} />
     </div>
   </div>
 );
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
index 8491c93d8fa..d038ec6380b 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.test.tsx
@@ -56,7 +56,7 @@ test('vertical mode, title and description', () => {
 test('horizontal mode, title', () => {
   render(
     <FilterDivider
-      orientation={FilterBarOrientation.HORIZONTAL}
+      orientation={FilterBarOrientation.Horizontal}
       title={SAMPLE_TITLE}
       description=""
       overflow
@@ -75,7 +75,7 @@ test('horizontal mode, title', () => {
 test('horizontal mode, title and description', async () => {
   render(
     <FilterDivider
-      orientation={FilterBarOrientation.HORIZONTAL}
+      orientation={FilterBarOrientation.Horizontal}
       title={SAMPLE_TITLE}
       description={SAMPLE_DESCRIPTION}
     />,
@@ -98,7 +98,7 @@ test('horizontal mode, title and description', async () => {
 test('horizontal overflow mode, title', () => {
   render(
     <FilterDivider
-      orientation={FilterBarOrientation.HORIZONTAL}
+      orientation={FilterBarOrientation.Horizontal}
       overflow
       title={SAMPLE_TITLE}
       description=""
@@ -117,7 +117,7 @@ test('horizontal overflow mode, title', () => {
 test('horizontal overflow mode, title and description', () => {
   render(
     <FilterDivider
-      orientation={FilterBarOrientation.HORIZONTAL}
+      orientation={FilterBarOrientation.Horizontal}
       overflow
       title={SAMPLE_TITLE}
       description={SAMPLE_DESCRIPTION}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
index 6efe2c45152..0d812ef5d54 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterDivider.tsx
@@ -147,10 +147,10 @@ const HorizontalOverflowDivider = ({
 const FilterDivider = ({
   title,
   description,
-  orientation = FilterBarOrientation.VERTICAL,
+  orientation = FilterBarOrientation.Vertical,
   overflow = false,
 }: FilterDividerProps) => {
-  if (orientation === FilterBarOrientation.HORIZONTAL) {
+  if (orientation === FilterBarOrientation.Horizontal) {
     if (overflow) {
       return (
         <HorizontalOverflowDivider title={title} description={description} />
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
index f44a1a1df68..5041fa3c97e 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx
@@ -71,7 +71,7 @@ const StyledDiv = styled.div`
 `;
 
 const queriesDataPlaceholder = [{ data: [{}] }];
-const behaviors = [Behavior.NATIVE_FILTER];
+const behaviors = [Behavior.NativeFilter];
 
 const useShouldFilterRefresh = () => {
   const isDashboardRefreshing = useSelector<RootState, boolean>(
@@ -93,7 +93,7 @@ const FilterValue: React.FC<FilterControlProps> = ({
   showOverflow,
   parentRef,
   setFilterActive,
-  orientation = FilterBarOrientation.VERTICAL,
+  orientation = FilterBarOrientation.Vertical,
   overflow = false,
   validateStatus,
 }) => {
@@ -178,7 +178,7 @@ const FilterValue: React.FC<FilterControlProps> = ({
         ownState: filterOwnState,
       })
         .then(({ response, json }) => {
-          if (isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) {
+          if (isFeatureEnabled(FeatureFlag.GlobalAsyncQueries)) {
             // deal with getChartDataRequest transforming the response data
             const result = 'result' in json ? json.result[0] : json;
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
index 0e7ceef6d38..2edfc92db6c 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FiltersDropdownContent/index.tsx
@@ -30,7 +30,7 @@ export interface FiltersDropdownContentProps {
   renderer: (filter: Filter | Divider, index: number) => ReactNode;
   rendererCrossFilter: (
     crossFilter: CrossFilterIndicator,
-    orientation: FilterBarOrientation.VERTICAL,
+    orientation: FilterBarOrientation.Vertical,
     last: CrossFilterIndicator,
   ) => ReactNode;
   showCollapsePanel?: boolean;
@@ -55,7 +55,7 @@ export const FiltersDropdownContent = ({
     {overflowedCrossFilters.map(crossFilter =>
       rendererCrossFilter(
         crossFilter,
-        FilterBarOrientation.VERTICAL,
+        FilterBarOrientation.Vertical,
         overflowedCrossFilters.at(-1) as CrossFilterIndicator,
       ),
     )}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
index 47f181682ff..0b35c146f7f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx
@@ -115,7 +115,7 @@ const HorizontalFilterBar: React.FC<HorizontalBarProps> = ({
     state => state.dashboardLayout.present,
   );
   const isCrossFiltersEnabled = isFeatureEnabled(
-    FeatureFlag.DASHBOARD_CROSS_FILTERS,
+    FeatureFlag.DashboardCrossFilters,
   );
   const verboseMaps = useChartsVerboseMaps();
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/HorizontalFilterBar.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/HorizontalFilterBar.test.tsx
index 09625151a2c..898e78da129 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/HorizontalFilterBar.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/HorizontalFilterBar.test.tsx
@@ -53,7 +53,7 @@ test('should not render the empty message', async () => {
     filterValues: [
       {
         id: 'test',
-        type: NativeFilterType.NATIVE_FILTER,
+        type: NativeFilterType.NativeFilter,
       },
     ],
   });
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
index cb6da807d6b..ac7ab58f8b3 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Vertical.tsx
@@ -190,7 +190,7 @@ const VerticalFilterBar: React.FC<VerticalBarProps> = ({
 
   const crossFilters = useMemo(
     () =>
-      isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) ? (
+      isFeatureEnabled(FeatureFlag.DashboardCrossFilters) ? (
         <CrossFiltersVertical />
       ) : null,
     [],
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index f41f9bc3aaf..7bf45f76c54 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -128,7 +128,7 @@ const publishDataMask = debounce(
 
 export const FilterBarScrollContext = createContext(false);
 const FilterBar: React.FC<FiltersBarProps> = ({
-  orientation = FilterBarOrientation.VERTICAL,
+  orientation = FilterBarOrientation.Vertical,
   verticalConfig,
   hidden = false,
 }) => {
@@ -286,7 +286,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   );
 
   const filterBarComponent =
-    orientation === FilterBarOrientation.HORIZONTAL ? (
+    orientation === FilterBarOrientation.Horizontal ? (
       <Horizontal
         actions={actions}
         canEdit={canEdit}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
index f75612baeb1..2c62d69eb5f 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/FilterCard.test.tsx
@@ -49,7 +49,7 @@ const baseInitialState = {
           rootPath: [DASHBOARD_ROOT_ID],
           excluded: [],
         },
-        type: NativeFilterType.NATIVE_FILTER,
+        type: NativeFilterType.NativeFilter,
         description: '',
       },
       'NATIVE_FILTER-2': {
@@ -71,7 +71,7 @@ const baseInitialState = {
           rootPath: [DASHBOARD_ROOT_ID],
           excluded: [],
         },
-        type: NativeFilterType.NATIVE_FILTER,
+        type: NativeFilterType.NativeFilter,
         description: '',
       },
     },
@@ -188,7 +188,7 @@ const baseFilter: Filter = {
     rootPath: [DASHBOARD_ROOT_ID],
     excluded: [],
   },
-  type: NativeFilterType.NATIVE_FILTER,
+  type: NativeFilterType.NativeFilter,
   description: '',
 };
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
index 6db4db853e2..68912c17b54 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/DividerConfigForm.tsx
@@ -56,7 +56,7 @@ const DividerConfigForm: React.FC<Props> = ({ componentId, divider }) => (
     <FormItem
       hidden
       name={['filters', componentId, 'type']}
-      initialValue={NativeFilterType.DIVIDER}
+      initialValue={NativeFilterType.Divider}
     />
   </Container>
 );
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
index a080d356451..81a99559e31 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FilterTitlePane.tsx
@@ -53,8 +53,8 @@ const TabsContainer = styled.div`
 `;
 
 const options = [
-  { label: t('Filter'), type: NativeFilterType.NATIVE_FILTER },
-  { label: t('Divider'), type: NativeFilterType.DIVIDER },
+  { label: t('Filter'), type: NativeFilterType.NativeFilter },
+  { label: t('Divider'), type: NativeFilterType.Divider },
 ];
 
 const FilterTitlePane: React.FC<Props> = ({
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
index 1733514ac36..56523f811d6 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/DefaultValue.tsx
@@ -69,8 +69,8 @@ const DefaultValue: FC<DefaultValueProps> = ({
           ? TIME_FILTER_INPUT_WIDTH
           : INPUT_WIDTH
       }
-      appSection={AppSection.FILTER_CONFIG_MODAL}
-      behaviors={[Behavior.NATIVE_FILTER]}
+      appSection={AppSection.FilterConfigModal}
+      behaviors={[Behavior.NativeFilter]}
       formData={formData}
       // For charts that don't have datasource we need workaround for empty placeholder
       queriesData={
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
index 0682279120d..72b73ba8480 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/FilterScope.tsx
@@ -70,8 +70,8 @@ const FilterScope: FC<FilterScopeProps> = ({
   const lastSpecificScope = useRef(initialFilterScope);
   const [initialScopingType] = useState(
     isScopingAll(initialFilterScope, chartId)
-      ? ScopingType.all
-      : ScopingType.specific,
+      ? ScopingType.All
+      : ScopingType.Specific,
   );
   const [hasScopeBeenModified, setHasScopeBeenModified] = useState(
     !!filterScope,
@@ -79,7 +79,7 @@ const FilterScope: FC<FilterScopeProps> = ({
 
   const onUpdateFormValues = useCallback(
     (formValues: any) => {
-      if (formScopingType === ScopingType.specific) {
+      if (formScopingType === ScopingType.Specific) {
         lastSpecificScope.current = formValues.scope;
       }
       updateFormValues(formValues);
@@ -97,8 +97,8 @@ const FilterScope: FC<FilterScopeProps> = ({
     updateFormValues({
       scope: newScope,
       scoping: isScopingAll(newScope, chartId)
-        ? ScopingType.all
-        : ScopingType.specific,
+        ? ScopingType.All
+        : ScopingType.Specific,
     });
   }, [
     chartId,
@@ -118,7 +118,7 @@ const FilterScope: FC<FilterScopeProps> = ({
         <Radio.Group
           onChange={({ target: { value } }) => {
             const scope =
-              value === ScopingType.all
+              value === ScopingType.All
                 ? getDefaultScopeValue(chartId)
                 : lastSpecificScope.current;
             updateFormValues({ scope });
@@ -126,18 +126,18 @@ const FilterScope: FC<FilterScopeProps> = ({
             forceUpdate();
           }}
         >
-          <Radio value={ScopingType.all}>{t('Apply to all panels')}</Radio>
-          <Radio value={ScopingType.specific}>
+          <Radio value={ScopingType.All}>{t('Apply to all panels')}</Radio>
+          <Radio value={ScopingType.Specific}>
             {t('Apply to specific panels')}
           </Radio>
         </Radio.Group>
       </CleanFormItem>
       <Typography.Text type="secondary">
-        {(formScopingType ?? initialScopingType) === ScopingType.specific
+        {(formScopingType ?? initialScopingType) === ScopingType.Specific
           ? t('Only selected panels will be affected by this filter')
           : t('All panels with this column will be affected by this filter')}
       </Typography.Text>
-      {(formScopingType ?? initialScopingType) === ScopingType.specific && (
+      {(formScopingType ?? initialScopingType) === ScopingType.Specific && (
         <ScopingTree
           updateFormValues={onUpdateFormValues}
           initialScope={initialFilterScope}
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/types.ts
index 8c9d2a5f3cf..31759afc0af 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/types.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope/types.ts
@@ -20,8 +20,8 @@
 import { ReactNode } from 'react';
 
 export enum ScopingType {
-  all,
-  specific,
+  All,
+  Specific,
 }
 
 /** UI Ant tree type */
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
index e9c0f52cc6e..029a95f3abf 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx
@@ -375,9 +375,7 @@ const FiltersConfigForm = (
   const nativeFilterItems = getChartMetadataRegistry().items;
   const nativeFilterVizTypes = Object.entries(nativeFilterItems)
     // @ts-ignore
-    .filter(([, { value }]) =>
-      value.behaviors?.includes(Behavior.NATIVE_FILTER),
-    )
+    .filter(([, { value }]) => value.behaviors?.includes(Behavior.NativeFilter))
     .map(([key]) => key);
 
   const loadedDatasets = useSelector<RootState, DatasourcesState>(
@@ -498,7 +496,7 @@ const FiltersConfigForm = (
         force,
       })
         .then(({ response, json }) => {
-          if (isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) {
+          if (isFeatureEnabled(FeatureFlag.GlobalAsyncQueries)) {
             // deal with getChartDataRequest transforming the response data
             const result = 'result' in json ? json.result[0] : json;
 
@@ -811,7 +809,7 @@ const FiltersConfigForm = (
           <StyledFormItem
             name={['filters', filterId, 'type']}
             hidden
-            initialValue={NativeFilterType.NATIVE_FILTER}
+            initialValue={NativeFilterType.NativeFilter}
           >
             <Input />
           </StyledFormItem>
@@ -841,7 +839,7 @@ const FiltersConfigForm = (
                 const isDisabled =
                   FILTER_SUPPORTED_TYPES[filterType]?.length === 1 &&
                   FILTER_SUPPORTED_TYPES[filterType]?.includes(
-                    GenericDataType.TEMPORAL,
+                    GenericDataType.Temporal,
                   ) &&
                   !doLoadedDatasetsHaveTemporalColumns;
                 return {
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts
index 61beb575378..f66d49685b7 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/constants.ts
@@ -25,14 +25,14 @@ export const INPUT_WIDTH = 270;
 export const TIME_FILTER_INPUT_WIDTH = 350;
 
 export const FILTER_SUPPORTED_TYPES = {
-  filter_time: [GenericDataType.TEMPORAL],
-  filter_timegrain: [GenericDataType.TEMPORAL],
-  filter_timecolumn: [GenericDataType.TEMPORAL],
+  filter_time: [GenericDataType.Temporal],
+  filter_timegrain: [GenericDataType.Temporal],
+  filter_timecolumn: [GenericDataType.Temporal],
   filter_select: [
-    GenericDataType.BOOLEAN,
-    GenericDataType.STRING,
-    GenericDataType.NUMERIC,
-    GenericDataType.TEMPORAL,
+    GenericDataType.Boolean,
+    GenericDataType.String,
+    GenericDataType.Numeric,
+    GenericDataType.Temporal,
   ],
-  filter_range: [GenericDataType.NUMERIC],
+  filter_range: [GenericDataType.Numeric],
 };
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
index 7a3af4fe264..24cb9763d27 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/getControlItemsMap.test.tsx
@@ -60,7 +60,7 @@ const filterMock: Filter = {
   filterType: '',
   targets: [{}],
   controlValues: {},
-  type: NativeFilterType.NATIVE_FILTER,
+  type: NativeFilterType.NativeFilter,
   description: '',
 };
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
index b7aa2cab392..b1f35b8a07a 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/utils.ts
@@ -73,7 +73,7 @@ export const hasTemporalColumns = (
 ) => {
   const columnTypes = ensureIsArray(dataset?.column_types);
   return (
-    columnTypes.length === 0 || columnTypes.includes(GenericDataType.TEMPORAL)
+    columnTypes.length === 0 || columnTypes.includes(GenericDataType.Temporal)
   );
 };
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts
index 65c4af3b04d..3eda21057b4 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/state.ts
@@ -52,7 +52,7 @@ export const useOpenModal = (
   // add a filter on modal open
   useEffect(() => {
     if (createNewOnOpen && isOpen && !wasOpen) {
-      addFilter(NativeFilterType.NATIVE_FILTER);
+      addFilter(NativeFilterType.NativeFilter);
     }
   }, [createNewOnOpen, isOpen, wasOpen, addFilter]);
 };
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts
index ea4916b53f1..6f40ea65429 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/types.ts
@@ -45,12 +45,12 @@ export interface NativeFiltersFormItem {
   adhoc_filters?: AdhocFilter[];
   time_range?: string;
   granularity_sqla?: string;
-  type: typeof NativeFilterType.NATIVE_FILTER;
+  type: typeof NativeFilterType.NativeFilter;
   description: string;
 }
 export interface NativeFilterDivider {
   id: string;
-  type: typeof NativeFilterType.DIVIDER;
+  type: typeof NativeFilterType.Divider;
   title: string;
   description: string;
 }
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
index 83247e1a300..ed60a957dcc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/utils.ts
@@ -106,10 +106,10 @@ export const createHandleSave =
         const formInputs = values.filters?.[id];
         // if user didn't open a filter, return the original config
         if (!formInputs) return filterConfigMap[id];
-        if (formInputs.type === NativeFilterType.DIVIDER) {
+        if (formInputs.type === NativeFilterType.Divider) {
           return {
             id,
-            type: NativeFilterType.DIVIDER,
+            type: NativeFilterType.Divider,
             scope: {
               rootPath: [DASHBOARD_ROOT_ID],
               excluded: [],
@@ -194,7 +194,7 @@ export const NATIVE_FILTER_PREFIX = 'NATIVE_FILTER-';
 export const NATIVE_FILTER_DIVIDER_PREFIX = 'NATIVE_FILTER_DIVIDER-';
 export const generateFilterId = (type: NativeFilterType) => {
   const prefix =
-    type === NativeFilterType.NATIVE_FILTER
+    type === NativeFilterType.NativeFilter
       ? NATIVE_FILTER_PREFIX
       : NATIVE_FILTER_DIVIDER_PREFIX;
   return `${prefix}${shortid.generate()}`;
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts
index ae8a2f7a4df..36f0fd1925d 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/selectors.ts
@@ -295,7 +295,7 @@ export const selectChartCrossFilters = (
   filterEmitter = false,
 ): Indicator[] | CrossFilterIndicator[] => {
   let crossFilterIndicators: any = [];
-  if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+  if (isFeatureEnabled(FeatureFlag.DashboardCrossFilters)) {
     crossFilterIndicators = Object.values(chartConfiguration)
       .filter(chartConfig => {
         const inScope =
@@ -363,7 +363,7 @@ export const selectNativeIndicatorsForChart = (
     Object.values(nativeFilters)
       .filter(
         nativeFilter =>
-          nativeFilter.type === NativeFilterType.NATIVE_FILTER &&
+          nativeFilter.type === NativeFilterType.NativeFilter &&
           nativeFilter.chartsInScope?.includes(chartId),
       )
       .map(nativeFilter => {
@@ -385,7 +385,7 @@ export const selectNativeIndicatorsForChart = (
       });
 
   let crossFilterIndicators: any = [];
-  if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+  if (isFeatureEnabled(FeatureFlag.DashboardCrossFilters)) {
     crossFilterIndicators = selectChartCrossFilters(
       dataMask,
       chartId,
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.test.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.test.ts
index be636bf17a4..019a9e760cc 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/utils.test.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.test.ts
@@ -41,17 +41,17 @@ describe('nativeFilterGate', () => {
     });
 
     it('should return true for cross filter chart', () => {
-      expect(nativeFilterGate([Behavior.INTERACTIVE_CHART])).toEqual(true);
+      expect(nativeFilterGate([Behavior.InteractiveChart])).toEqual(true);
     });
 
     it('should return false for native filter chart with cross filter support', () => {
       expect(
-        nativeFilterGate([Behavior.NATIVE_FILTER, Behavior.INTERACTIVE_CHART]),
+        nativeFilterGate([Behavior.NativeFilter, Behavior.InteractiveChart]),
       ).toEqual(false);
     });
 
     it('should return false for native filter behavior', () => {
-      expect(nativeFilterGate([Behavior.NATIVE_FILTER])).toEqual(false);
+      expect(nativeFilterGate([Behavior.NativeFilter])).toEqual(false);
     });
   });
 
@@ -60,7 +60,7 @@ describe('nativeFilterGate', () => {
       isFeatureEnabledMock = jest
         .spyOn(uiCore, 'isFeatureEnabled')
         .mockImplementation((featureFlag: FeatureFlag) =>
-          [FeatureFlag.DASHBOARD_CROSS_FILTERS].includes(featureFlag),
+          [FeatureFlag.DashboardCrossFilters].includes(featureFlag),
         );
     });
 
@@ -74,17 +74,17 @@ describe('nativeFilterGate', () => {
     });
 
     it('should return true for cross filter chart', () => {
-      expect(nativeFilterGate([Behavior.INTERACTIVE_CHART])).toEqual(true);
+      expect(nativeFilterGate([Behavior.InteractiveChart])).toEqual(true);
     });
 
     it('should return true for native filter chart with cross filter support', () => {
       expect(
-        nativeFilterGate([Behavior.NATIVE_FILTER, Behavior.INTERACTIVE_CHART]),
+        nativeFilterGate([Behavior.NativeFilter, Behavior.InteractiveChart]),
       ).toEqual(true);
     });
 
     it('should return false for native filter behavior', () => {
-      expect(nativeFilterGate([Behavior.NATIVE_FILTER])).toEqual(false);
+      expect(nativeFilterGate([Behavior.NativeFilter])).toEqual(false);
     });
   });
 });
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
index 12f6d33e20b..0ba28d0a3a3 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
+++ b/superset-frontend/src/dashboard/components/nativeFilters/utils.ts
@@ -130,7 +130,7 @@ export function mergeExtraFormData(
 export function isCrossFilter(vizType: string) {
   // @ts-ignore need export from superset-ui `ItemWithValue`
   return getChartMetadataRegistry().items[vizType]?.value.behaviors?.includes(
-    Behavior.INTERACTIVE_CHART,
+    Behavior.InteractiveChart,
   );
 }
 
@@ -150,9 +150,9 @@ export function getExtraFormData(
 
 export function nativeFilterGate(behaviors: Behavior[]): boolean {
   return (
-    !behaviors.includes(Behavior.NATIVE_FILTER) ||
-    (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
-      behaviors.includes(Behavior.INTERACTIVE_CHART))
+    !behaviors.includes(Behavior.NativeFilter) ||
+    (isFeatureEnabled(FeatureFlag.DashboardCrossFilters) &&
+      behaviors.includes(Behavior.InteractiveChart))
   );
 }
 
diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
index 3c2e56bec4c..c01dc76f1e5 100644
--- a/superset-frontend/src/dashboard/containers/DashboardPage.tsx
+++ b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
@@ -106,7 +106,7 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
     // generated next time user opens a dashboard and the old one won't be reused
     const handleTabClose = () => {
       const dashboardsContexts = getDashboardContextLocalStorage();
-      setItem(LocalStorageKeys.dashboard__explore_context, {
+      setItem(LocalStorageKeys.DashboardExploreContext, {
         ...dashboardsContexts,
         [dashboardPageId]: {
           ...dashboardsContexts[dashboardPageId],
@@ -187,7 +187,7 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
 
   useEffect(() => {
     const sharedLabelColor = getSharedLabelColor();
-    sharedLabelColor.source = SharedLabelColorSource.dashboard;
+    sharedLabelColor.source = SharedLabelColorSource.Dashboard;
     return () => {
       // clean up label color
       const categoricalNamespace = CategoricalColorNamespace.getNamespace(
diff --git a/superset-frontend/src/dashboard/fixtures/mockNativeFilters.ts b/superset-frontend/src/dashboard/fixtures/mockNativeFilters.ts
index 8d6ded58f14..d1d37cbf6ae 100644
--- a/superset-frontend/src/dashboard/fixtures/mockNativeFilters.ts
+++ b/superset-frontend/src/dashboard/fixtures/mockNativeFilters.ts
@@ -61,7 +61,7 @@ export const nativeFiltersInfo: NativeFiltersState = {
         allowsMultipleValues: true,
         isRequired: false,
       },
-      type: NativeFilterType.NATIVE_FILTER,
+      type: NativeFilterType.NativeFilter,
       description: 'test description',
     },
   },
diff --git a/superset-frontend/src/dashboard/reducers/datasources.ts b/superset-frontend/src/dashboard/reducers/datasources.ts
index 864641645ed..386657455a9 100644
--- a/superset-frontend/src/dashboard/reducers/datasources.ts
+++ b/superset-frontend/src/dashboard/reducers/datasources.ts
@@ -27,13 +27,13 @@ export default function datasourcesReducer(
   datasources: DatasourcesState | undefined,
   action: DatasourcesActionPayload,
 ) {
-  if (action.type === DatasourcesAction.SET_DATASOURCES) {
+  if (action.type === DatasourcesAction.SetDatasources) {
     return {
       ...datasources,
       ...keyBy(action.datasources, 'uid'),
     };
   }
-  if (action.type === DatasourcesAction.SET_DATASOURCE) {
+  if (action.type === DatasourcesAction.SetDatasource) {
     return {
       ...datasources,
       [action.key]: action.datasource,
diff --git a/superset-frontend/src/dashboard/types.ts b/superset-frontend/src/dashboard/types.ts
index 4f28e721868..13e8d37af81 100644
--- a/superset-frontend/src/dashboard/types.ts
+++ b/superset-frontend/src/dashboard/types.ts
@@ -55,8 +55,8 @@ export type Chart = ChartState & {
 };
 
 export enum FilterBarOrientation {
-  VERTICAL = 'VERTICAL',
-  HORIZONTAL = 'HORIZONTAL',
+  Vertical = 'VERTICAL',
+  Horizontal = 'HORIZONTAL',
 }
 
 // chart's cross filter scoping can have its custom value or point to the global configuration
diff --git a/superset-frontend/src/dashboard/util/constants.ts b/superset-frontend/src/dashboard/util/constants.ts
index 0743d7a5a42..02cd7a991d6 100644
--- a/superset-frontend/src/dashboard/util/constants.ts
+++ b/superset-frontend/src/dashboard/util/constants.ts
@@ -73,8 +73,8 @@ export const IN_COMPONENT_ELEMENT_TYPES = ['LABEL'];
 export const ALL_FILTERS_ROOT = 'ALL_FILTERS_ROOT';
 
 export enum DashboardStandaloneMode {
-  NONE = 0,
-  HIDE_NAV = 1,
-  HIDE_NAV_AND_TITLE = 2,
-  REPORT = 3,
+  None = 0,
+  HideNav = 1,
+  HideNavAndTitle = 2,
+  Report = 3,
 }
diff --git a/superset-frontend/src/dashboard/util/crossFilters.test.ts b/superset-frontend/src/dashboard/util/crossFilters.test.ts
index 0e9fc00de80..b88579cc843 100644
--- a/superset-frontend/src/dashboard/util/crossFilters.test.ts
+++ b/superset-frontend/src/dashboard/util/crossFilters.test.ts
@@ -134,7 +134,7 @@ beforeEach(() => {
     .callsFake(() => ({
       // @ts-ignore
       get: () => ({
-        behaviors: [Behavior.INTERACTIVE_CHART],
+        behaviors: [Behavior.InteractiveChart],
       }),
     }));
 });
@@ -146,7 +146,7 @@ afterEach(() => {
 test('Generate correct cross filters configuration without initial configuration', () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
+    [FeatureFlag.DashboardCrossFilters]: true,
   };
 
   // @ts-ignore
@@ -180,7 +180,7 @@ test('Generate correct cross filters configuration without initial configuration
 test('Generate correct cross filters configuration with initial configuration', () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
+    [FeatureFlag.DashboardCrossFilters]: true,
   };
 
   expect(
@@ -222,7 +222,7 @@ test('Generate correct cross filters configuration with initial configuration',
 test('Return undefined if DASHBOARD_CROSS_FILTERS feature flag is disabled', () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: false,
+    [FeatureFlag.DashboardCrossFilters]: false,
   };
   expect(
     getCrossFiltersConfiguration(
@@ -236,7 +236,7 @@ test('Return undefined if DASHBOARD_CROSS_FILTERS feature flag is disabled', ()
 test('Recalculate charts in global filter scope when charts change', () => {
   // @ts-ignore
   global.featureFlags = {
-    [FeatureFlag.DASHBOARD_CROSS_FILTERS]: true,
+    [FeatureFlag.DashboardCrossFilters]: true,
   };
   expect(
     getCrossFiltersConfiguration(
diff --git a/superset-frontend/src/dashboard/util/crossFilters.ts b/superset-frontend/src/dashboard/util/crossFilters.ts
index 8e1a706286d..903a1f74fbe 100644
--- a/superset-frontend/src/dashboard/util/crossFilters.ts
+++ b/superset-frontend/src/dashboard/util/crossFilters.ts
@@ -37,7 +37,7 @@ import { DEFAULT_CROSS_FILTER_SCOPING } from '../constants';
 export const isCrossFiltersEnabled = (
   metadataCrossFiltersEnabled: boolean | undefined,
 ): boolean =>
-  isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS) &&
+  isFeatureEnabled(FeatureFlag.DashboardCrossFilters) &&
   (metadataCrossFiltersEnabled === undefined || metadataCrossFiltersEnabled);
 
 export const getCrossFiltersConfiguration = (
@@ -48,7 +48,7 @@ export const getCrossFiltersConfiguration = (
   >,
   charts: ChartsState,
 ) => {
-  if (!isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+  if (!isFeatureEnabled(FeatureFlag.DashboardCrossFilters)) {
     return undefined;
   }
 
@@ -82,7 +82,7 @@ export const getCrossFiltersConfiguration = (
         {}
       )?.behaviors ?? [];
 
-    if (behaviors.includes(Behavior.INTERACTIVE_CHART)) {
+    if (behaviors.includes(Behavior.InteractiveChart)) {
       if (metadata.chart_configuration?.[chartId]) {
         // We need to clone to avoid mutating Redux state
         chartConfiguration[chartId] = cloneDeep(
diff --git a/superset-frontend/src/dashboard/util/getDashboardUrl.test.js b/superset-frontend/src/dashboard/util/getDashboardUrl.test.js
index c75f2c98b06..fe60904403e 100644
--- a/superset-frontend/src/dashboard/util/getDashboardUrl.test.js
+++ b/superset-frontend/src/dashboard/util/getDashboardUrl.test.js
@@ -55,10 +55,10 @@ describe('getChartIdsFromLayout', () => {
     const urlWithStandalone = getDashboardUrl({
       pathname: 'path',
       filters,
-      standalone: DashboardStandaloneMode.HIDE_NAV,
+      standalone: DashboardStandaloneMode.HideNav,
     });
     expect(urlWithStandalone).toBe(
-      `path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D&standalone=${DashboardStandaloneMode.HIDE_NAV}`,
+      `path?preselect_filters=%7B%2235%22%3A%7B%22key%22%3A%5B%22value%22%5D%7D%7D&standalone=${DashboardStandaloneMode.HideNav}`,
     );
   });
 
@@ -77,10 +77,10 @@ describe('getChartIdsFromLayout', () => {
     const urlWithStandalone = getDashboardUrl({
       pathname: 'path',
       filters: undefined,
-      standalone: DashboardStandaloneMode.HIDE_NAV,
+      standalone: DashboardStandaloneMode.HideNav,
     });
     expect(urlWithStandalone).toBe(
-      `path?standalone=${DashboardStandaloneMode.HIDE_NAV}`,
+      `path?standalone=${DashboardStandaloneMode.HideNav}`,
     );
   });
 
@@ -94,10 +94,10 @@ describe('getChartIdsFromLayout', () => {
     }));
     const urlWithStandalone = getDashboardUrl({
       pathname: 'path',
-      standalone: DashboardStandaloneMode.HIDE_NAV,
+      standalone: DashboardStandaloneMode.HideNav,
     });
     expect(urlWithStandalone).toBe(
-      `path?unkown_param=value&standalone=${DashboardStandaloneMode.HIDE_NAV}`,
+      `path?unkown_param=value&standalone=${DashboardStandaloneMode.HideNav}`,
     );
     windowSpy.mockRestore();
   });
diff --git a/superset-frontend/src/dashboard/util/permissionUtils.test.ts b/superset-frontend/src/dashboard/util/permissionUtils.test.ts
index c6d707dbb0e..29ff675e979 100644
--- a/superset-frontend/src/dashboard/util/permissionUtils.test.ts
+++ b/superset-frontend/src/dashboard/util/permissionUtils.test.ts
@@ -188,7 +188,7 @@ describe('canUserSaveAsDashboard with RBAC feature flag disabled', () => {
       .spyOn(uiCore, 'isFeatureEnabled')
       .mockImplementation(
         (featureFlag: uiCore.FeatureFlag) =>
-          featureFlag !== uiCore.FeatureFlag.DASHBOARD_RBAC,
+          featureFlag !== uiCore.FeatureFlag.DashboardRbac,
       );
   });
 
@@ -216,7 +216,7 @@ describe('canUserSaveAsDashboard with RBAC feature flag enabled', () => {
       .spyOn(uiCore, 'isFeatureEnabled')
       .mockImplementation(
         (featureFlag: uiCore.FeatureFlag) =>
-          featureFlag === uiCore.FeatureFlag.DASHBOARD_RBAC,
+          featureFlag === uiCore.FeatureFlag.DashboardRbac,
       );
   });
 
diff --git a/superset-frontend/src/dashboard/util/permissionUtils.ts b/superset-frontend/src/dashboard/util/permissionUtils.ts
index 4b09710d59d..9db6b40c675 100644
--- a/superset-frontend/src/dashboard/util/permissionUtils.ts
+++ b/superset-frontend/src/dashboard/util/permissionUtils.ts
@@ -76,6 +76,6 @@ export const canUserSaveAsDashboard = (
 ) =>
   isUserWithPermissionsAndRoles(user) &&
   findPermission('can_write', 'Dashboard', user?.roles) &&
-  (!isFeatureEnabled(FeatureFlag.DASHBOARD_RBAC) ||
+  (!isFeatureEnabled(FeatureFlag.DashboardRbac) ||
     isUserAdmin(user) ||
     isUserDashboardOwner(dashboard, user));
diff --git a/superset-frontend/src/dataMask/reducer.ts b/superset-frontend/src/dataMask/reducer.ts
index f2163a54a44..25ecbeb9d49 100644
--- a/superset-frontend/src/dataMask/reducer.ts
+++ b/superset-frontend/src/dataMask/reducer.ts
@@ -116,7 +116,7 @@ const dataMaskReducer = produce(
       // TODO: update hydrate to .ts
       // @ts-ignore
       case HYDRATE_DASHBOARD:
-        if (isFeatureEnabled(FeatureFlag.DASHBOARD_CROSS_FILTERS)) {
+        if (isFeatureEnabled(FeatureFlag.DashboardCrossFilters)) {
           Object.keys(
             // @ts-ignore
             action.data.dashboardInfo?.metadata?.chart_configuration,
diff --git a/superset-frontend/src/explore/actions/saveModalActions.js b/superset-frontend/src/explore/actions/saveModalActions.js
index 53c8952082d..9f4ff947789 100644
--- a/superset-frontend/src/explore/actions/saveModalActions.js
+++ b/superset-frontend/src/explore/actions/saveModalActions.js
@@ -61,7 +61,7 @@ const extractAdhocFiltersFromFormData = formDataToHandle =>
 
 const hasTemporalRangeFilter = formData =>
   (formData?.adhoc_filters || []).some(
-    filter => filter.operator === Operators.TEMPORAL_RANGE,
+    filter => filter.operator === Operators.TemporalRange,
   );
 
 export const getSlicePayload = (
@@ -84,7 +84,7 @@ export const getSlicePayload = (
     Object.keys(adhocFilters || {}).forEach(adhocFilterKey => {
       if (isEmpty(adhocFilters[adhocFilterKey])) {
         formDataFromSlice?.[adhocFilterKey]?.forEach(filter => {
-          if (filter.operator === Operators.TEMPORAL_RANGE && !filter.isExtra) {
+          if (filter.operator === Operators.TemporalRange && !filter.isExtra) {
             adhocFilters[adhocFilterKey].push({
               ...filter,
               comparator: 'No filter',
@@ -101,7 +101,7 @@ export const getSlicePayload = (
   // TEMPORAL_RANGE filters are converted to 'No filter' when saving a chart.
   if (!hasTemporalRangeFilter(adhocFilters)) {
     formDataWithNativeFilters?.adhoc_filters?.forEach(filter => {
-      if (filter.operator === Operators.TEMPORAL_RANGE && filter.isExtra) {
+      if (filter.operator === Operators.TemporalRange && filter.isExtra) {
         adhocFilters.adhoc_filters.push({ ...filter, comparator: 'No filter' });
       }
     });
diff --git a/superset-frontend/src/explore/components/ChartPills.tsx b/superset-frontend/src/explore/components/ChartPills.tsx
index 09595576dd7..99f7c5aad5a 100644
--- a/superset-frontend/src/explore/components/ChartPills.tsx
+++ b/superset-frontend/src/explore/components/ChartPills.tsx
@@ -21,12 +21,13 @@ import { css, QueryData, SupersetTheme } from '@superset-ui/core';
 import RowCountLabel from 'src/explore/components/RowCountLabel';
 import CachedLabel from 'src/components/CachedLabel';
 import Timer from 'src/components/Timer';
+import { Type } from 'src/components/Label';
 
-enum CHART_STATUS_MAP {
-  failed = 'danger',
-  loading = 'warning',
-  success = 'success',
-}
+const CHART_STATUS_MAP = {
+  failed: 'danger' as Type,
+  loading: 'warning' as Type,
+  success: 'success' as Type,
+};
 
 export type ChartPillsProps = {
   queriesResponse: QueryData[];
diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
index d4b1caccc94..561c7cc7cd4 100644
--- a/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
+++ b/superset-frontend/src/explore/components/ControlPanelsContainer.tsx
@@ -70,7 +70,7 @@ import Control from './Control';
 import { ExploreAlert } from './ExploreAlert';
 import { RunQueryButton } from './RunQueryButton';
 import { Operators } from '../constants';
-import { CLAUSES } from './controls/FilterControl/types';
+import { Clauses } from './controls/FilterControl/types';
 
 const { confirm } = Modal;
 
@@ -301,7 +301,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
       const noFilter = !adhoc_filters?.find(
         filter =>
           filter.expressionType === 'SIMPLE' &&
-          filter.operator === Operators.TEMPORAL_RANGE &&
+          filter.operator === Operators.TemporalRange &&
           filter.subject === x_axis,
       );
       if (noFilter) {
@@ -314,9 +314,9 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
             setControlValue('adhoc_filters', [
               ...(adhoc_filters || []),
               {
-                clause: CLAUSES.WHERE,
+                clause: Clauses.Where,
                 subject: x_axis,
-                operator: Operators.TEMPORAL_RANGE,
+                operator: Operators.TemporalRange,
                 comparator: defaultTimeFilter || NO_TIME_RANGE,
                 expressionType: 'SIMPLE',
               },
@@ -490,7 +490,7 @@ export const ControlPanelsContainer = (props: ControlPanelsContainerProps) => {
         values: Record<string, any>[],
       ) => {
         const isTemporalRange = (filter: Record<string, any>) =>
-          filter.operator === Operators.TEMPORAL_RANGE;
+          filter.operator === Operators.TemporalRange;
         if (!controls?.time_range?.value && isTemporalRange(valueToBeDeleted)) {
           const count = values.filter(isTemporalRange).length;
           if (count === 1) {
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
index b98a495c0ab..990356a76f2 100644
--- a/superset-frontend/src/explore/components/DataTableControl/index.tsx
+++ b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -310,7 +310,7 @@ export const useTableColumns = (
               const colType = coltypes?.[index];
               const firstValue = data[0][key];
               const originalFormattedTimeColumnIndex =
-                colType === GenericDataType.TEMPORAL
+                colType === GenericDataType.Temporal
                   ? originalFormattedTimeColumns.indexOf(key)
                   : -1;
               const isOriginalTimeColumn =
@@ -320,7 +320,7 @@ export const useTableColumns = (
                 id: key || index,
                 accessor: row => row[key],
                 Header:
-                  colType === GenericDataType.TEMPORAL &&
+                  colType === GenericDataType.Temporal &&
                   typeof firstValue !== 'string' ? (
                     <DataTableTemporalHeaderCell
                       columnName={key}
@@ -342,7 +342,7 @@ export const useTableColumns = (
                     return <CellNull>{NULL_DISPLAY}</CellNull>;
                   }
                   if (
-                    colType === GenericDataType.TEMPORAL &&
+                    colType === GenericDataType.Temporal &&
                     originalFormattedTimeColumnIndex === -1 &&
                     typeof value === 'number'
                   ) {
diff --git a/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts b/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
index 8e51732c2e8..e0728483342 100644
--- a/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
+++ b/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
@@ -45,12 +45,12 @@ const colnames = [
   STRTIME_KEY,
 ];
 const coltypes = [
-  GenericDataType.BOOLEAN,
-  GenericDataType.BOOLEAN,
-  GenericDataType.STRING,
-  GenericDataType.STRING,
-  GenericDataType.TEMPORAL,
-  GenericDataType.TEMPORAL,
+  GenericDataType.Boolean,
+  GenericDataType.Boolean,
+  GenericDataType.String,
+  GenericDataType.String,
+  GenericDataType.Temporal,
+  GenericDataType.Temporal,
 ];
 
 const cellValues = {
diff --git a/superset-frontend/src/explore/components/DataTableControl/utils.ts b/superset-frontend/src/explore/components/DataTableControl/utils.ts
index f8e8e42e31d..253870b0453 100644
--- a/superset-frontend/src/explore/components/DataTableControl/utils.ts
+++ b/superset-frontend/src/explore/components/DataTableControl/utils.ts
@@ -25,7 +25,7 @@ import {
 
 export const getTimeColumns = (datasourceId?: string): string[] => {
   const colsMap = getItem(
-    LocalStorageKeys.explore__data_table_original_formatted_time_columns,
+    LocalStorageKeys.ExploreDataTableOriginalFormattedTimeColumns,
     {},
   );
   if (datasourceId === undefined) {
@@ -36,14 +36,11 @@ export const getTimeColumns = (datasourceId?: string): string[] => {
 
 export const setTimeColumns = (datasourceId: string, columns: string[]) => {
   const colsMap = getItem(
-    LocalStorageKeys.explore__data_table_original_formatted_time_columns,
+    LocalStorageKeys.ExploreDataTableOriginalFormattedTimeColumns,
     {},
   );
-  setItem(
-    LocalStorageKeys.explore__data_table_original_formatted_time_columns,
-    {
-      ...colsMap,
-      [datasourceId]: columns,
-    },
-  );
+  setItem(LocalStorageKeys.ExploreDataTableOriginalFormattedTimeColumns, {
+    ...colsMap,
+    [datasourceId]: columns,
+  });
 };
diff --git a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
index 726f3ea4689..15148be880c 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/DataTablesPane.tsx
@@ -102,14 +102,14 @@ export const DataTablesPane = ({
     samples: false,
   });
   const [panelOpen, setPanelOpen] = useState(
-    isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
+    isFeatureEnabled(FeatureFlag.DatapanelClosedByDefault)
       ? false
-      : getItem(LocalStorageKeys.is_datapanel_open, false),
+      : getItem(LocalStorageKeys.IsDatapanelOpen, false),
   );
 
   useEffect(() => {
-    if (!isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT))
-      setItem(LocalStorageKeys.is_datapanel_open, panelOpen);
+    if (!isFeatureEnabled(FeatureFlag.DatapanelClosedByDefault))
+      setItem(LocalStorageKeys.IsDatapanelOpen, panelOpen);
   }, [panelOpen]);
 
   useEffect(() => {
diff --git a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
index c898988c90d..7a02114a2f5 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/components/DataTableControls.tsx
@@ -56,7 +56,7 @@ export const TableControls = ({
   )
     .filter(
       ([name, type]) =>
-        type === GenericDataType.TEMPORAL &&
+        type === GenericDataType.Temporal &&
         name &&
         !originalTimeColumns.includes(name),
     )
diff --git a/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx b/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
index 34dcf01bca7..74358af959e 100644
--- a/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
+++ b/superset-frontend/src/explore/components/DataTablesPane/test/DataTablesPane.test.tsx
@@ -149,10 +149,10 @@ describe('DataTablesPane', () => {
   test('Displaying the data pane is under featureflag', () => {
     // @ts-ignore
     global.featureFlags = {
-      [FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT]: true,
+      [FeatureFlag.DatapanelClosedByDefault]: true,
     };
     const props = createDataTablesPaneProps(0);
-    setItem(LocalStorageKeys.is_datapanel_open, true);
+    setItem(LocalStorageKeys.IsDatapanelOpen, true);
     render(<DataTablesPane {...props} />, {
       useRedux: true,
     });
diff --git a/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx b/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx
index 05909b1e64f..1840ad7a67a 100644
--- a/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx
+++ b/superset-frontend/src/explore/components/DatasourcePanel/fixtures.tsx
@@ -29,7 +29,7 @@ export const columns = [
     is_dttm: false,
     python_date_format: null,
     type: 'DOUBLE',
-    type_generic: GenericDataType.NUMERIC,
+    type_generic: GenericDataType.Numeric,
     verbose_name: null,
   },
   {
@@ -43,7 +43,7 @@ export const columns = [
     is_dttm: false,
     python_date_format: null,
     type: 'VARCHAR',
-    type_generic: GenericDataType.STRING,
+    type_generic: GenericDataType.String,
     verbose_name: null,
   },
   {
@@ -56,7 +56,7 @@ export const columns = [
     is_dttm: false,
     python_date_format: null,
     type: 'INT',
-    type_generic: GenericDataType.NUMERIC,
+    type_generic: GenericDataType.Numeric,
     verbose_name: null,
   },
 ];
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
index 3d9f6b995cc..c52d8f4cbe8 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/ExploreChartHeader.test.tsx
@@ -34,7 +34,7 @@ const chartEndpoint = 'glob:*api/v1/chart/*';
 fetchMock.get(chartEndpoint, { json: 'foo' });
 
 window.featureFlags = {
-  [FeatureFlag.EMBEDDABLE_CHARTS]: true,
+  [FeatureFlag.EmbeddableCharts]: true,
 };
 
 const createProps = (additionalProps = {}) => ({
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
index d151459e5d4..dba78af035b 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.jsx
@@ -179,7 +179,7 @@ export const ExploreChartHeader = ({
     }
     const items = [];
     items.push({
-      type: MetadataType.DASHBOARDS,
+      type: MetadataType.Dashboards,
       title:
         metadata.dashboards.length > 0
           ? tn(
@@ -197,19 +197,19 @@ export const ExploreChartHeader = ({
           : undefined,
     });
     items.push({
-      type: MetadataType.LAST_MODIFIED,
+      type: MetadataType.LastModified,
       value: metadata.changed_on_humanized,
       modifiedBy: metadata.changed_by || t('Not available'),
     });
     items.push({
-      type: MetadataType.OWNER,
+      type: MetadataType.Owner,
       createdBy: metadata.created_by || t('Not available'),
       owners: metadata.owners.length > 0 ? metadata.owners : t('None'),
       createdOn: metadata.created_on_humanized,
     });
     if (slice?.description) {
       items.push({
-        type: MetadataType.DESCRIPTION,
+        type: MetadataType.Description,
         value: slice?.description,
       });
     }
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx
index 63e139e755d..66d524b9f3a 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel/ExploreChartPanel.test.jsx
@@ -154,7 +154,7 @@ describe('ChartContainer', () => {
 
   it('hides gutter when collapsing data panel', async () => {
     const props = createProps();
-    setItem(LocalStorageKeys.is_datapanel_open, true);
+    setItem(LocalStorageKeys.IsDatapanelOpen, true);
     const { container } = render(<ChartContainer {...props} />, {
       useRedux: true,
     });
diff --git a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
index bc2d83a90a6..01e7a1289b4 100644
--- a/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreChartPanel/index.jsx
@@ -148,14 +148,14 @@ const ExploreChartPanel = ({
     height: chartPanelHeight,
   } = useResizeDetectorByObserver();
   const [splitSizes, setSplitSizes] = useState(
-    isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
+    isFeatureEnabled(FeatureFlag.DatapanelClosedByDefault)
       ? INITIAL_SIZES
-      : getItem(LocalStorageKeys.chart_split_sizes, INITIAL_SIZES),
+      : getItem(LocalStorageKeys.ChartSplitSizes, INITIAL_SIZES),
   );
   const [showSplite, setShowSplit] = useState(
-    isFeatureEnabled(FeatureFlag.DATAPANEL_CLOSED_BY_DEFAULT)
+    isFeatureEnabled(FeatureFlag.DatapanelClosedByDefault)
       ? false
-      : getItem(LocalStorageKeys.is_datapanel_open, false),
+      : getItem(LocalStorageKeys.IsDatapanelOpen, false),
   );
 
   const [showDatasetModal, setShowDatasetModal] = useState(false);
@@ -202,7 +202,7 @@ const ExploreChartPanel = ({
   }, [updateQueryContext]);
 
   useEffect(() => {
-    setItem(LocalStorageKeys.chart_split_sizes, splitSizes);
+    setItem(LocalStorageKeys.ChartSplitSizes, splitSizes);
   }, [splitSizes]);
 
   const onDragEnd = useCallback(sizes => {
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
index 0550ba2b29e..d3a32a2bd64 100644
--- a/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
+++ b/superset-frontend/src/explore/components/ExploreViewContainer/index.jsx
@@ -600,13 +600,13 @@ function ExploreViewContainer(props) {
         <Resizable
           onResizeStop={(evt, direction, ref, d) => {
             setShouldForceUpdate(d?.width);
-            setSidebarWidths(LocalStorageKeys.datasource_width, d);
+            setSidebarWidths(LocalStorageKeys.DatasourceWidth, d);
           }}
           defaultSize={{
-            width: getSidebarWidths(LocalStorageKeys.datasource_width),
+            width: getSidebarWidths(LocalStorageKeys.DatasourceWidth),
             height: '100%',
           }}
-          minWidth={defaultSidebarsWidth[LocalStorageKeys.datasource_width]}
+          minWidth={defaultSidebarsWidth[LocalStorageKeys.DatasourceWidth]}
           maxWidth="33%"
           enable={{ right: true }}
           className={
@@ -658,13 +658,13 @@ function ExploreViewContainer(props) {
         ) : null}
         <Resizable
           onResizeStop={(evt, direction, ref, d) =>
-            setSidebarWidths(LocalStorageKeys.controls_width, d)
+            setSidebarWidths(LocalStorageKeys.ControlsWidth, d)
           }
           defaultSize={{
-            width: getSidebarWidths(LocalStorageKeys.controls_width),
+            width: getSidebarWidths(LocalStorageKeys.ControlsWidth),
             height: '100%',
           }}
-          minWidth={defaultSidebarsWidth[LocalStorageKeys.controls_width]}
+          minWidth={defaultSidebarsWidth[LocalStorageKeys.ControlsWidth]}
           maxWidth="33%"
           enable={{ right: true }}
           className="col-sm-3 explore-column controls-column"
diff --git a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
index bd6ff4b7562..e1dae92a6f3 100644
--- a/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
+++ b/superset-frontend/src/explore/components/ExportToCSVDropdown/index.tsx
@@ -22,9 +22,9 @@ import Icons from 'src/components/Icons';
 import { AntdDropdown } from 'src/components';
 import { Menu } from 'src/components/Menu';
 
-enum MENU_KEYS {
-  EXPORT_ORIGINAL = 'export_original',
-  EXPORT_PIVOTED = 'export_pivoted',
+enum MenuKeys {
+  ExportOriginal = 'export_original',
+  ExportPivoted = 'export_pivoted',
 }
 
 interface ExportToCSVButtonProps {
@@ -52,10 +52,10 @@ export const ExportToCSVDropdown = ({
   const handleMenuClick = useCallback(
     ({ key }: { key: React.Key }) => {
       switch (key) {
-        case MENU_KEYS.EXPORT_ORIGINAL:
+        case MenuKeys.ExportOriginal:
           exportCSVOriginal();
           break;
-        case MENU_KEYS.EXPORT_PIVOTED:
+        case MenuKeys.ExportPivoted:
           exportCSVPivoted();
           break;
         default:
@@ -70,13 +70,13 @@ export const ExportToCSVDropdown = ({
       trigger={['click']}
       overlay={
         <Menu onClick={handleMenuClick} selectable={false}>
-          <Menu.Item key={MENU_KEYS.EXPORT_ORIGINAL}>
+          <Menu.Item key={MenuKeys.ExportOriginal}>
             <MenuItemContent>
               {t('Original')}
               <Icons.Download />
             </MenuItemContent>
           </Menu.Item>
-          <Menu.Item key={MENU_KEYS.EXPORT_PIVOTED}>
+          <Menu.Item key={MenuKeys.ExportPivoted}>
             <MenuItemContent>
               {t('Pivoted')}
               <Icons.Download />
diff --git a/superset-frontend/src/explore/components/PropertiesModal/index.tsx b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
index df031653460..ba78dfa037b 100644
--- a/superset-frontend/src/explore/components/PropertiesModal/index.tsx
+++ b/superset-frontend/src/explore/components/PropertiesModal/index.tsx
@@ -208,7 +208,7 @@ function PropertiesModal({
         }[]
       ).map(o => o.value);
     }
-    if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+    if (isFeatureEnabled(FeatureFlag.TaggingSystem)) {
       // update tags
       try {
         fetchTags(
@@ -264,7 +264,7 @@ function PropertiesModal({
   }, [slice.slice_name]);
 
   useEffect(() => {
-    if (!isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) return;
+    if (!isFeatureEnabled(FeatureFlag.TaggingSystem)) return;
     try {
       fetchTags(
         {
@@ -426,10 +426,10 @@ function PropertiesModal({
                 )}
               </StyledHelpBlock>
             </FormItem>
-            {isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && (
+            {isFeatureEnabled(FeatureFlag.TaggingSystem) && (
               <h3 css={{ marginTop: '1em' }}>{t('Tags')}</h3>
             )}
-            {isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && (
+            {isFeatureEnabled(FeatureFlag.TaggingSystem) && (
               <FormItem>
                 <AsyncSelect
                   ariaLabel="Tags"
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx
index d35f46a671d..191351e929c 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/ColumnConfigPopover.tsx
@@ -69,7 +69,7 @@ export default function ColumnConfigPopover({
 
   const layout =
     configFormLayout[
-      column.type === undefined ? GenericDataType.STRING : column.type
+      column.type === undefined ? GenericDataType.String : column.type
     ];
 
   if (isTabLayoutItem(layout[0])) {
diff --git a/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx b/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
index 684d8faf14b..14ceeefde4d 100644
--- a/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
+++ b/superset-frontend/src/explore/components/controls/ColumnConfigControl/constants.tsx
@@ -177,14 +177,14 @@ export const SHARED_COLUMN_CONFIG_PROPS = {
 };
 
 export const DEFAULT_CONFIG_FORM_LAYOUT: ColumnConfigFormLayout = {
-  [GenericDataType.STRING]: [
+  [GenericDataType.String]: [
     [
       'columnWidth',
       { name: 'horizontalAlign', override: { defaultValue: 'left' } },
     ],
     ['truncateLongCells'],
   ],
-  [GenericDataType.NUMERIC]: [
+  [GenericDataType.Numeric]: [
     {
       tab: t('Display'),
       children: [
@@ -206,14 +206,14 @@ export const DEFAULT_CONFIG_FORM_LAYOUT: ColumnConfigFormLayout = {
       ],
     },
   ],
-  [GenericDataType.TEMPORAL]: [
+  [GenericDataType.Temporal]: [
     [
       'columnWidth',
       { name: 'horizontalAlign', override: { defaultValue: 'left' } },
     ],
     ['d3TimeFormat'],
   ],
-  [GenericDataType.BOOLEAN]: [
+  [GenericDataType.Boolean]: [
     [
       'columnWidth',
       { name: 'horizontalAlign', override: { defaultValue: 'left' } },
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
index 2b9050c3bd0..6c4ae9f412e 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/ConditionalFormattingControl.tsx
@@ -18,11 +18,11 @@
  */
 import React, { useEffect, useState } from 'react';
 import { styled, css, t, useTheme } from '@superset-ui/core';
+import { Comparator } from '@superset-ui/chart-controls';
 import Icons from 'src/components/Icons';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import { FormattingPopover } from './FormattingPopover';
 import {
-  COMPARATOR,
   ConditionalFormattingConfig,
   ConditionalFormattingControlProps,
 } from './types';
@@ -123,16 +123,16 @@ const ConditionalFormattingControl = ({
   }: ConditionalFormattingConfig) => {
     const columnName = (column && verboseMap?.[column]) ?? column;
     switch (operator) {
-      case COMPARATOR.NONE:
+      case Comparator.None:
         return `${columnName}`;
-      case COMPARATOR.BETWEEN:
-        return `${targetValueLeft} ${COMPARATOR.LESS_THAN} ${columnName} ${COMPARATOR.LESS_THAN} ${targetValueRight}`;
-      case COMPARATOR.BETWEEN_OR_EQUAL:
-        return `${targetValueLeft} ${COMPARATOR.LESS_OR_EQUAL} ${columnName} ${COMPARATOR.LESS_OR_EQUAL} ${targetValueRight}`;
-      case COMPARATOR.BETWEEN_OR_LEFT_EQUAL:
-        return `${targetValueLeft} ${COMPARATOR.LESS_OR_EQUAL} ${columnName} ${COMPARATOR.LESS_THAN} ${targetValueRight}`;
-      case COMPARATOR.BETWEEN_OR_RIGHT_EQUAL:
-        return `${targetValueLeft} ${COMPARATOR.LESS_THAN} ${columnName} ${COMPARATOR.LESS_OR_EQUAL} ${targetValueRight}`;
+      case Comparator.Between:
+        return `${targetValueLeft} ${Comparator.LessThan} ${columnName} ${Comparator.LessThan} ${targetValueRight}`;
+      case Comparator.BetweenOrEqual:
+        return `${targetValueLeft} ${Comparator.LessOrEqual} ${columnName} ${Comparator.LessOrEqual} ${targetValueRight}`;
+      case Comparator.BetweenOrLeftEqual:
+        return `${targetValueLeft} ${Comparator.LessOrEqual} ${columnName} ${Comparator.LessThan} ${targetValueRight}`;
+      case Comparator.BetweenOrRightEqual:
+        return `${targetValueLeft} ${Comparator.LessThan} ${columnName} ${Comparator.LessOrEqual} ${targetValueRight}`;
       default:
         return `${columnName} ${operator} ${targetValue}`;
     }
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
index 154255eee7e..533e185475a 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/FormattingPopoverContent.tsx
@@ -18,16 +18,16 @@
  */
 import React from 'react';
 import { styled, SupersetTheme, t, useTheme } from '@superset-ui/core';
+import {
+  Comparator,
+  MultipleValueComparators,
+} from '@superset-ui/chart-controls';
 import { Form, FormItem, FormProps } from 'src/components/Form';
 import Select from 'src/components/Select/Select';
 import { Col, Row } from 'src/components';
 import { InputNumber } from 'src/components/Input';
 import Button from 'src/components/Button';
-import {
-  COMPARATOR,
-  ConditionalFormattingConfig,
-  MULTIPLE_VALUE_COMPARATORS,
-} from './types';
+import { ConditionalFormattingConfig } from './types';
 
 const FullWidthInputNumber = styled(InputNumber)`
   width: 100%;
@@ -48,17 +48,17 @@ const colorSchemeOptions = (theme: SupersetTheme) => [
 ];
 
 const operatorOptions = [
-  { value: COMPARATOR.NONE, label: t('None') },
-  { value: COMPARATOR.GREATER_THAN, label: '>' },
-  { value: COMPARATOR.LESS_THAN, label: '<' },
-  { value: COMPARATOR.GREATER_OR_EQUAL, label: '≥' },
-  { value: COMPARATOR.LESS_OR_EQUAL, label: '≤' },
-  { value: COMPARATOR.EQUAL, label: '=' },
-  { value: COMPARATOR.NOT_EQUAL, label: '≠' },
-  { value: COMPARATOR.BETWEEN, label: '< x <' },
-  { value: COMPARATOR.BETWEEN_OR_EQUAL, label: '≤ x ≤' },
-  { value: COMPARATOR.BETWEEN_OR_LEFT_EQUAL, label: '≤ x <' },
-  { value: COMPARATOR.BETWEEN_OR_RIGHT_EQUAL, label: '< x ≤' },
+  { value: Comparator.None, label: t('None') },
+  { value: Comparator.GreaterThan, label: '>' },
+  { value: Comparator.LessThan, label: '<' },
+  { value: Comparator.GreaterOrEqual, label: '≥' },
+  { value: Comparator.LessOrEqual, label: '≤' },
+  { value: Comparator.Equal, label: '=' },
+  { value: Comparator.NotEqual, label: '≠' },
+  { value: Comparator.Between, label: '< x <' },
+  { value: Comparator.BetweenOrEqual, label: '≤ x ≤' },
+  { value: Comparator.BetweenOrLeftEqual, label: '≤ x <' },
+  { value: Comparator.BetweenOrRightEqual, label: '< x ≤' },
 ];
 
 const targetValueValidator =
@@ -88,11 +88,11 @@ const targetValueRightValidator = targetValueValidator(
   t('This value should be greater than the left target value'),
 );
 
-const isOperatorMultiValue = (operator?: COMPARATOR) =>
-  operator && MULTIPLE_VALUE_COMPARATORS.includes(operator);
+const isOperatorMultiValue = (operator?: Comparator) =>
+  operator && MultipleValueComparators.includes(operator);
 
-const isOperatorNone = (operator?: COMPARATOR) =>
-  !operator || operator === COMPARATOR.NONE;
+const isOperatorNone = (operator?: Comparator) =>
+  !operator || operator === Comparator.None;
 
 const rulesRequired = [{ required: true, message: t('Required') }];
 
diff --git a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
index 5d4c5114594..4edadf99b42 100644
--- a/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/ConditionalFormattingControl/types.ts
@@ -19,31 +19,10 @@
 
 import { ReactNode } from 'react';
 import { PopoverProps } from 'antd/lib/popover';
-import { ControlComponentProps } from '@superset-ui/chart-controls';
-
-export enum COMPARATOR {
-  NONE = 'None',
-  GREATER_THAN = '>',
-  LESS_THAN = '<',
-  GREATER_OR_EQUAL = '≥',
-  LESS_OR_EQUAL = '≤',
-  EQUAL = '=',
-  NOT_EQUAL = '≠',
-  BETWEEN = '< x <',
-  BETWEEN_OR_EQUAL = '≤ x ≤',
-  BETWEEN_OR_LEFT_EQUAL = '≤ x <',
-  BETWEEN_OR_RIGHT_EQUAL = '< x ≤',
-}
-
-export const MULTIPLE_VALUE_COMPARATORS = [
-  COMPARATOR.BETWEEN,
-  COMPARATOR.BETWEEN_OR_EQUAL,
-  COMPARATOR.BETWEEN_OR_LEFT_EQUAL,
-  COMPARATOR.BETWEEN_OR_RIGHT_EQUAL,
-];
+import { Comparator, ControlComponentProps } from '@superset-ui/chart-controls';
 
 export type ConditionalFormattingConfig = {
-  operator?: COMPARATOR;
+  operator?: Comparator;
   targetValue?: number;
   targetValueLeft?: number;
   targetValueRight?: number;
diff --git a/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx b/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
index ebcf4722213..be605804e73 100644
--- a/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
+++ b/superset-frontend/src/explore/components/controls/ContourControl/ContourPopoverControl.tsx
@@ -31,7 +31,7 @@ import {
   ErrorMapType,
 } from './types';
 
-enum CONTOUR_TYPES {
+enum ContourTypes {
   Isoline = 'ISOLINE',
   Isoband = 'ISOBAND',
 }
@@ -53,7 +53,7 @@ const isIsoband = (contour: ContourType) => {
 };
 
 const getTabKey = (contour: ContourType | undefined) =>
-  contour && isIsoband(contour) ? CONTOUR_TYPES.Isoband : CONTOUR_TYPES.Isoline;
+  contour && isIsoband(contour) ? ContourTypes.Isoband : ContourTypes.Isoline;
 
 const determineErrorMap = (tab: string, contour: ContourType) => {
   const errorMap: ErrorMapType = {
@@ -67,13 +67,13 @@ const determineErrorMap = (tab: string, contour: ContourType) => {
   if (lowerThresholdError) errorMap.lowerThreshold.push(lowerThresholdError);
 
   // Isoline only validation
-  if (tab === CONTOUR_TYPES.Isoline) {
+  if (tab === ContourTypes.Isoline) {
     const strokeWidthError = legacyValidateInteger(contour.strokeWidth);
     if (strokeWidthError) errorMap.strokeWidth.push(strokeWidthError);
   }
 
   // Isoband only validation
-  if (tab === CONTOUR_TYPES.Isoband) {
+  if (tab === ContourTypes.Isoband) {
     const upperThresholdError = legacyValidateInteger(contour.upperThreshold);
     if (upperThresholdError) errorMap.upperThreshold.push(upperThresholdError);
     if (
@@ -140,7 +140,7 @@ const ContourPopoverControl = ({
   const [isComplete, setIsComplete] = useState(false);
 
   useEffect(() => {
-    const isIsoband = currentTab === CONTOUR_TYPES.Isoband;
+    const isIsoband = currentTab === ContourTypes.Isoband;
     const validLower =
       Boolean(contour.lowerThreshold) || contour.lowerThreshold === 0;
     const validUpper =
@@ -204,7 +204,7 @@ const ContourPopoverControl = ({
   const handleSave = () => {
     if (isComplete && onSave) {
       const newContour =
-        currentTab === CONTOUR_TYPES.Isoline
+        currentTab === ContourTypes.Isoline
           ? formatIsoline(contour)
           : formatIsoband(contour);
       onSave(convertContourToNumeric(newContour));
@@ -221,10 +221,10 @@ const ContourPopoverControl = ({
       >
         <Tabs.TabPane
           className="adhoc-filter-edit-tab"
-          key={CONTOUR_TYPES.Isoline}
+          key={ContourTypes.Isoline}
           tab={t('Isoline')}
         >
-          <div key={CONTOUR_TYPES.Isoline} className="isoline-popover-section">
+          <div key={ContourTypes.Isoline} className="isoline-popover-section">
             <StyledRow>
               <Col flex="1">
                 <ControlHeader
@@ -274,10 +274,10 @@ const ContourPopoverControl = ({
         </Tabs.TabPane>
         <Tabs.TabPane
           className="adhoc-filter-edit-tab"
-          key={CONTOUR_TYPES.Isoband}
+          key={ContourTypes.Isoband}
           tab={t('Isoband')}
         >
-          <div key={CONTOUR_TYPES.Isoband} className="isoline-popover-section">
+          <div key={ContourTypes.Isoband} className="isoline-popover-section">
             <StyledRow>
               <Col flex="1">
                 <ControlHeader
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index a5ee71f8c23..a1a0a670f6d 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
@@ -40,7 +40,7 @@ import ControlPopover from '../ControlPopover/ControlPopover';
 
 import { DateFilterControlProps, FrameType } from './types';
 import {
-  DATE_FILTER_TEST_KEY,
+  DateFilterTestKey,
   fetchTimeRange,
   FRAME_OPTIONS,
   guessFrame,
@@ -302,9 +302,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
       {frame === 'Custom' && (
         <CustomFrame value={timeRangeValue} onChange={setTimeRangeValue} />
       )}
-      {frame === 'No filter' && (
-        <div data-test={DATE_FILTER_TEST_KEY.noFilter} />
-      )}
+      {frame === 'No filter' && <div data-test={DateFilterTestKey.NoFilter} />}
       <Divider />
       <div>
         <div className="section-title">{t('Actual time range')}</div>
@@ -327,7 +325,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
           cta
           key="cancel"
           onClick={onHide}
-          data-test={DATE_FILTER_TEST_KEY.cancelButton}
+          data-test={DateFilterTestKey.CancelButton}
         >
           {t('CANCEL')}
         </Button>
@@ -337,7 +335,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
           disabled={!validTimeRange}
           key="apply"
           onClick={onSave}
-          data-test={DATE_FILTER_TEST_KEY.applyButton}
+          data-test={DateFilterTestKey.ApplyButton}
         >
           {t('APPLY')}
         </Button>
@@ -378,7 +376,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
           label={actualTimeRange}
           isActive={show}
           isPlaceholder={actualTimeRange === NO_TIME_RANGE}
-          data-test={DATE_FILTER_TEST_KEY.popoverOverlay}
+          data-test={DateFilterTestKey.PopoverOverlay}
           ref={labelRef}
         />
       </Tooltip>
@@ -397,7 +395,7 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
           label={actualTimeRange}
           isActive={show}
           isPlaceholder={actualTimeRange === NO_TIME_RANGE}
-          data-test={DATE_FILTER_TEST_KEY.modalOverlay}
+          data-test={DateFilterTestKey.ModalOverlay}
           ref={labelRef}
         />
       </Tooltip>
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx
index d3de2b9991b..06f2cec7def 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/components/CommonFrame.tsx
@@ -22,7 +22,7 @@ import { Radio } from 'src/components/Radio';
 import {
   COMMON_RANGE_OPTIONS,
   COMMON_RANGE_SET,
-  DATE_FILTER_TEST_KEY,
+  DateFilterTestKey,
 } from 'src/explore/components/controls/DateFilterControl/utils';
 import {
   CommonRangeType,
@@ -39,10 +39,7 @@ export function CommonFrame(props: FrameComponentProps) {
 
   return (
     <>
-      <div
-        className="section-title"
-        data-test={DATE_FILTER_TEST_KEY.commonFrame}
-      >
+      <div className="section-title" data-test={DateFilterTestKey.CommonFrame}>
         {t('Configure Time Range: Last...')}
       </div>
       <Radio.Group
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
index dc7559beece..4ded8a19c4a 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx
@@ -27,7 +27,7 @@ import userEvent from '@testing-library/user-event';
 import { NO_TIME_RANGE } from '@superset-ui/core';
 import DateFilterLabel from '..';
 import { DateFilterControlProps } from '../types';
-import { DATE_FILTER_TEST_KEY } from '../utils';
+import { DateFilterTestKey } from '../utils';
 
 const mockStore = configureStore([thunk]);
 
@@ -56,7 +56,7 @@ test('DateFilter with default props', () => {
   // should be popover by default
   userEvent.click(screen.getByText(NO_TIME_RANGE));
   expect(
-    screen.getByTestId(DATE_FILTER_TEST_KEY.popoverOverlay),
+    screen.getByTestId(DateFilterTestKey.PopoverOverlay),
   ).toBeInTheDocument();
 });
 
@@ -65,7 +65,7 @@ test('DateFilter should be applied the overlayStyle props', () => {
   // should be Modal as overlay
   userEvent.click(screen.getByText(NO_TIME_RANGE));
   expect(
-    screen.getByTestId(DATE_FILTER_TEST_KEY.modalOverlay),
+    screen.getByTestId(DateFilterTestKey.ModalOverlay),
   ).toBeInTheDocument();
 });
 
@@ -82,9 +82,7 @@ test('DateFilter should be applied the global config time_filter from the store'
   expect(screen.getByText('Last week')).toBeInTheDocument();
 
   userEvent.click(screen.getByText('Last week'));
-  expect(
-    screen.getByTestId(DATE_FILTER_TEST_KEY.commonFrame),
-  ).toBeInTheDocument();
+  expect(screen.getByTestId(DateFilterTestKey.CommonFrame)).toBeInTheDocument();
 });
 
 test('Open and close popover', () => {
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
index dad77fb9cb8..fca0dd3db9b 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
+++ b/superset-frontend/src/explore/components/controls/DateFilterControl/utils/constants.ts
@@ -132,11 +132,11 @@ export const LOCALE_MAPPING = {
   nl: 'nl_NL',
 };
 
-export enum DATE_FILTER_TEST_KEY {
-  commonFrame = 'common-frame',
-  modalOverlay = 'modal-overlay',
-  popoverOverlay = 'time-range-trigger',
-  noFilter = 'no-filter',
-  cancelButton = 'cancel-button',
-  applyButton = 'date-filter-control__apply-button',
+export enum DateFilterTestKey {
+  CommonFrame = 'common-frame',
+  ModalOverlay = 'modal-overlay',
+  PopoverOverlay = 'time-range-trigger',
+  NoFilter = 'no-filter',
+  CancelButton = 'cancel-button',
+  ApplyButton = 'date-filter-control__apply-button',
 }
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
index 0a4606dcb1d..f47c3a01019 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
@@ -37,7 +37,7 @@ import {
   DndFilterSelectProps,
 } from 'src/explore/components/controls/DndColumnSelectControl/DndFilterSelect';
 import { PLACEHOLDER_DATASOURCE } from 'src/dashboard/constants';
-import { EXPRESSION_TYPES } from '../FilterControl/types';
+import { ExpressionTypes } from '../FilterControl/types';
 
 const defaultProps: DndFilterSelectProps = {
   type: 'DndFilterSelect',
@@ -91,7 +91,7 @@ test('renders with default props', async () => {
 test('renders with value', async () => {
   const value = new AdhocFilter({
     sqlExpression: 'COUNT(*)',
-    expressionType: EXPRESSION_TYPES.SQL,
+    expressionType: ExpressionTypes.Sql,
   });
   render(setup({ value }), {
     useDnd: true,
@@ -124,7 +124,7 @@ test('renders options with column', async () => {
         {
           id: 1,
           type: 'VARCHAR',
-          type_generic: GenericDataType.STRING,
+          type_generic: GenericDataType.String,
           column_name: 'Column',
         },
       ],
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
index 4c9f5b3aafa..5295bd6dae2 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
@@ -50,7 +50,7 @@ import { DndItemType } from 'src/explore/components/DndItemType';
 import { ControlComponentProps } from 'src/explore/components/Control';
 import DndAdhocFilterOption from './DndAdhocFilterOption';
 import { useDefaultTimeFilter } from '../DateFilterControl/utils';
-import { CLAUSES, EXPRESSION_TYPES } from '../FilterControl/types';
+import { Clauses, ExpressionTypes } from '../FilterControl/types';
 
 const { warning } = Modal;
 
@@ -246,36 +246,36 @@ const DndFilterSelect = (props: DndFilterSelectProps) => {
       // via datasource saved metric
       if (filterOptions.saved_metric_name) {
         return new AdhocFilter({
-          expressionType: EXPRESSION_TYPES.SQL,
+          expressionType: ExpressionTypes.Sql,
           subject: getMetricExpression(filterOptions.saved_metric_name),
           operator:
-            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
-          operatorId: Operators.GREATER_THAN,
+            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
+          operatorId: Operators.GreaterThan,
           comparator: 0,
-          clause: CLAUSES.HAVING,
+          clause: Clauses.Having,
         });
       }
       // has a custom label, meaning it's custom column
       if (filterOptions.label) {
         return new AdhocFilter({
-          expressionType: EXPRESSION_TYPES.SQL,
+          expressionType: ExpressionTypes.Sql,
           subject: new AdhocMetric(option).translateToSql(),
           operator:
-            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
-          operatorId: Operators.GREATER_THAN,
+            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
+          operatorId: Operators.GreaterThan,
           comparator: 0,
-          clause: CLAUSES.HAVING,
+          clause: Clauses.Having,
         });
       }
       // add a new filter item
       if (filterOptions.column_name) {
         return new AdhocFilter({
-          expressionType: EXPRESSION_TYPES.SIMPLE,
+          expressionType: ExpressionTypes.Simple,
           subject: filterOptions.column_name,
-          operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.EQUALS].operation,
-          operatorId: Operators.EQUALS,
+          operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.Equals].operation,
+          operatorId: Operators.Equals,
           comparator: '',
-          clause: CLAUSES.WHERE,
+          clause: Clauses.Where,
           isNew: true,
         });
       }
@@ -352,15 +352,15 @@ const DndFilterSelect = (props: DndFilterSelectProps) => {
   const adhocFilter = useMemo(() => {
     if (isSavedMetric(droppedItem)) {
       return new AdhocFilter({
-        expressionType: EXPRESSION_TYPES.SQL,
-        clause: CLAUSES.HAVING,
+        expressionType: ExpressionTypes.Sql,
+        clause: Clauses.Having,
         sqlExpression: droppedItem?.expression,
       });
     }
     if (droppedItem instanceof AdhocMetric) {
       return new AdhocFilter({
-        expressionType: EXPRESSION_TYPES.SQL,
-        clause: CLAUSES.HAVING,
+        expressionType: ExpressionTypes.Sql,
+        clause: Clauses.Having,
         sqlExpression: (droppedItem as AdhocMetric)?.translateToSql(),
       });
     }
@@ -368,15 +368,15 @@ const DndFilterSelect = (props: DndFilterSelectProps) => {
       subject: (droppedItem as ColumnMeta)?.column_name,
     };
     if (config.subject) {
-      config.operator = OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.IN].operation;
-      config.operatorId = Operators.IN;
+      config.operator = OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.In].operation;
+      config.operatorId = Operators.In;
     }
     if (
       isColumnMeta(droppedItem) &&
       isTemporalColumn(droppedItem?.column_name, props.datasource)
     ) {
-      config.operator = Operators.TEMPORAL_RANGE;
-      config.operatorId = Operators.TEMPORAL_RANGE;
+      config.operator = Operators.TemporalRange;
+      config.operatorId = Operators.TemporalRange;
       config.comparator = defaultTimeFilter;
     }
     return new AdhocFilter(config);
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
index eaf7acfe963..8f489773e83 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
@@ -312,12 +312,12 @@ const DndMetricSelect = (props: any) => {
       const config: Partial<AdhocMetric> = {
         column: itemValue,
       };
-      if (itemValue.type_generic === GenericDataType.NUMERIC) {
+      if (itemValue.type_generic === GenericDataType.Numeric) {
         config.aggregate = AGGREGATES.SUM;
       } else if (
-        itemValue.type_generic === GenericDataType.STRING ||
-        itemValue.type_generic === GenericDataType.BOOLEAN ||
-        itemValue.type_generic === GenericDataType.TEMPORAL
+        itemValue.type_generic === GenericDataType.String ||
+        itemValue.type_generic === GenericDataType.Boolean ||
+        itemValue.type_generic === GenericDataType.Temporal
       ) {
         config.aggregate = AGGREGATES.COUNT_DISTINCT;
       }
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/AdhocFilter.test.js b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/AdhocFilter.test.js
index 19cc2f783e7..ed25e78c12f 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/AdhocFilter.test.js
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/AdhocFilter.test.js
@@ -18,25 +18,25 @@
  */
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import { Operators } from 'src/explore/constants';
-import { EXPRESSION_TYPES, CLAUSES } from '../types';
+import { ExpressionTypes, Clauses } from '../types';
 
 describe('AdhocFilter', () => {
   it('sets filterOptionName in constructor', () => {
     const adhocFilter = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '>',
       comparator: '10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     expect(adhocFilter.filterOptionName.length).toBeGreaterThan(10);
     expect(adhocFilter).toEqual({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '>',
       datasourceWarning: false,
       comparator: '10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
       filterOptionName: adhocFilter.filterOptionName,
       sqlExpression: null,
       isExtra: false,
@@ -47,11 +47,11 @@ describe('AdhocFilter', () => {
   it('can create altered duplicates', () => {
     const adhocFilter1 = new AdhocFilter({
       isNew: true,
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '>',
       comparator: '10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     const adhocFilter2 = adhocFilter1.duplicateWith({ operator: '<' });
 
@@ -70,11 +70,11 @@ describe('AdhocFilter', () => {
 
   it('can verify equality', () => {
     const adhocFilter1 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '>',
       comparator: '10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     const adhocFilter2 = adhocFilter1.duplicateWith({});
 
@@ -86,11 +86,11 @@ describe('AdhocFilter', () => {
 
   it('can verify inequality', () => {
     const adhocFilter1 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '>',
       comparator: '10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     const adhocFilter2 = adhocFilter1.duplicateWith({ operator: '<' });
 
@@ -98,9 +98,9 @@ describe('AdhocFilter', () => {
     expect(adhocFilter1.equals(adhocFilter2)).toBe(false);
 
     const adhocFilter3 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SQL,
+      expressionType: ExpressionTypes.Sql,
       sqlExpression: 'value > 10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     const adhocFilter4 = adhocFilter3.duplicateWith({
       sqlExpression: 'value = 5',
@@ -112,27 +112,27 @@ describe('AdhocFilter', () => {
 
   it('can determine if it is valid', () => {
     const adhocFilter1 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '>',
       comparator: '10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter1.isValid()).toBe(true);
 
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '>',
       comparator: null,
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter2.isValid()).toBe(false);
 
     const adhocFilter3 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SQL,
+      expressionType: ExpressionTypes.Sql,
       sqlExpression: 'some expression',
       clause: null,
     });
@@ -140,67 +140,67 @@ describe('AdhocFilter', () => {
     expect(adhocFilter3.isValid()).toBe(false);
 
     const adhocFilter4 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: 'IN',
       comparator: [],
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter4.isValid()).toBe(false);
 
     const adhocFilter5 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: 'IN',
       comparator: ['val1'],
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter5.isValid()).toBe(true);
 
     const adhocFilter6 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '==',
       comparator: 1,
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter6.isValid()).toBe(true);
 
     const adhocFilter7 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '==',
       comparator: 0,
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter7.isValid()).toBe(true);
 
     const adhocFilter8 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '==',
       comparator: null,
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter8.isValid()).toBe(false);
 
     const adhocFilter9 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: 'IS NULL',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     expect(adhocFilter9.isValid()).toBe(true);
     const adhocFilter10 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: 'IS NOT NULL',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     // eslint-disable-next-line no-unused-expressions
     expect(adhocFilter10.isValid()).toBe(true);
@@ -208,55 +208,55 @@ describe('AdhocFilter', () => {
 
   it('can translate from simple expressions to sql expressions', () => {
     const adhocFilter1 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'value',
       operator: '==',
       comparator: '10',
-      clause: CLAUSES.WHERE,
+      clause: Clauses.Where,
     });
     expect(adhocFilter1.translateToSql()).toBe('value = 10');
 
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'SUM(value)',
       operator: '!=',
       comparator: '5',
-      clause: CLAUSES.HAVING,
+      clause: Clauses.Having,
     });
     expect(adhocFilter2.translateToSql()).toBe('SUM(value) <> 5');
   });
   it('sets comparator to null when operator is IS_NULL', () => {
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'SUM(value)',
       operator: 'IS NULL',
-      operatorId: Operators.IS_NULL,
+      operatorId: Operators.IsNull,
       comparator: '5',
-      clause: CLAUSES.HAVING,
+      clause: Clauses.Having,
     });
     expect(adhocFilter2.comparator).toBe(null);
   });
   it('sets comparator to null when operator is IS_NOT_NULL', () => {
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'SUM(value)',
       operator: 'IS NOT NULL',
-      operatorId: Operators.IS_NOT_NULL,
+      operatorId: Operators.IsNotNull,
       comparator: '5',
-      clause: CLAUSES.HAVING,
+      clause: Clauses.Having,
     });
     expect(adhocFilter2.comparator).toBe(null);
   });
   it('sets the label properly if subject is a string', () => {
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'order_date',
     });
     expect(adhocFilter2.getDefaultLabel()).toBe('order_date');
   });
   it('sets the label properly if subject is an object with the column_date property', () => {
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: {
         column_name: 'year',
       },
@@ -265,7 +265,7 @@ describe('AdhocFilter', () => {
   });
   it('sets the label to empty is there is no column_name in the object', () => {
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: {
         unknown: 'year',
       },
@@ -274,7 +274,7 @@ describe('AdhocFilter', () => {
   });
   it('sets the label to empty is there is no subject', () => {
     const adhocFilter2 = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: undefined,
     });
     expect(adhocFilter2.getDefaultLabel()).toBe('');
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js
index f00491b89fa..627cc50c44a 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilter/index.js
@@ -22,7 +22,7 @@ import {
   OPERATOR_ENUM_TO_OPERATOR_TYPE,
 } from 'src/explore/constants';
 import { translateToSql } from '../utils/translateToSQL';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const CUSTOM_OPERATIONS = [...CUSTOM_OPERATORS].map(
   op => OPERATOR_ENUM_TO_OPERATOR_TYPE[op].operation,
@@ -30,29 +30,28 @@ const CUSTOM_OPERATIONS = [...CUSTOM_OPERATORS].map(
 
 export default class AdhocFilter {
   constructor(adhocFilter) {
-    this.expressionType = adhocFilter.expressionType || EXPRESSION_TYPES.SIMPLE;
-    if (this.expressionType === EXPRESSION_TYPES.SIMPLE) {
+    this.expressionType = adhocFilter.expressionType || ExpressionTypes.Simple;
+    if (this.expressionType === ExpressionTypes.Simple) {
       this.subject = adhocFilter.subject;
       this.operator = adhocFilter.operator?.toUpperCase();
       this.operatorId = adhocFilter.operatorId;
       this.comparator = adhocFilter.comparator;
       if (
-        [Operators.IS_TRUE, Operators.IS_FALSE].indexOf(
-          adhocFilter.operatorId,
-        ) >= 0
+        [Operators.IsTrue, Operators.IsFalse].indexOf(adhocFilter.operatorId) >=
+        0
       ) {
-        this.comparator = adhocFilter.operatorId === Operators.IS_TRUE;
+        this.comparator = adhocFilter.operatorId === Operators.IsTrue;
       }
       if (
-        [Operators.IS_NULL, Operators.IS_NOT_NULL].indexOf(
+        [Operators.IsNull, Operators.IsNotNull].indexOf(
           adhocFilter.operatorId,
         ) >= 0
       ) {
         this.comparator = null;
       }
-      this.clause = adhocFilter.clause || CLAUSES.WHERE;
+      this.clause = adhocFilter.clause || Clauses.Where;
       this.sqlExpression = null;
-    } else if (this.expressionType === EXPRESSION_TYPES.SQL) {
+    } else if (this.expressionType === ExpressionTypes.Sql) {
       this.sqlExpression =
         typeof adhocFilter.sqlExpression === 'string'
           ? adhocFilter.sqlExpression
@@ -103,13 +102,13 @@ export default class AdhocFilter {
   }
 
   isValid() {
-    const nullCheckOperators = [Operators.IS_NOT_NULL, Operators.IS_NULL].map(
+    const nullCheckOperators = [Operators.IsNotNull, Operators.IsNull].map(
       op => OPERATOR_ENUM_TO_OPERATOR_TYPE[op].operation,
     );
-    const truthCheckOperators = [Operators.IS_TRUE, Operators.IS_FALSE].map(
+    const truthCheckOperators = [Operators.IsTrue, Operators.IsFalse].map(
       op => OPERATOR_ENUM_TO_OPERATOR_TYPE[op].operation,
     );
-    if (this.expressionType === EXPRESSION_TYPES.SIMPLE) {
+    if (this.expressionType === ExpressionTypes.Simple) {
       if (nullCheckOperators.indexOf(this.operator) >= 0) {
         return !!(this.operator && this.subject);
       }
@@ -127,7 +126,7 @@ export default class AdhocFilter {
           return true;
         }
       }
-    } else if (this.expressionType === EXPRESSION_TYPES.SQL) {
+    } else if (this.expressionType === ExpressionTypes.Sql) {
       return !!(this.sqlExpression && this.clause);
     }
     return false;
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/AdhocFilterControl.test.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/AdhocFilterControl.test.jsx
index 964f0def000..05ede90353c 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/AdhocFilterControl.test.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/AdhocFilterControl.test.jsx
@@ -31,18 +31,18 @@ import {
 } from 'src/explore/constants';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
 import AdhocFilterControl from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
-  operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
+  operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const sumValueAdhocMetric = new AdhocMetric({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   column: { type: 'VARCHAR(255)', column_name: 'source' },
   aggregate: AGGREGATES.SUM,
 });
@@ -92,12 +92,12 @@ describe('AdhocFilterControl', () => {
     expect(
       adhocFilter.equals(
         new AdhocFilter({
-          expressionType: EXPRESSION_TYPES.SQL,
+          expressionType: ExpressionTypes.Sql,
           subject: savedMetric.expression,
           operator:
-            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
+            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
           comparator: 0,
-          clause: CLAUSES.HAVING,
+          clause: Clauses.Having,
         }),
       ),
     ).toBe(true);
@@ -112,12 +112,12 @@ describe('AdhocFilterControl', () => {
     expect(
       adhocFilter.equals(
         new AdhocFilter({
-          expressionType: EXPRESSION_TYPES.SQL,
+          expressionType: ExpressionTypes.Sql,
           subject: sumValueAdhocMetric.label,
           operator:
-            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
+            OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
           comparator: 0,
-          clause: CLAUSES.HAVING,
+          clause: Clauses.Having,
         }),
       ),
     ).toBe(true);
@@ -136,11 +136,11 @@ describe('AdhocFilterControl', () => {
     expect(
       newAdhocFilter.equals(
         new AdhocFilter({
-          expressionType: EXPRESSION_TYPES.SIMPLE,
+          expressionType: ExpressionTypes.Simple,
           subject: columns[0].column_name,
-          operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.EQUALS].operation,
+          operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.Equals].operation,
           comparator: '',
-          clause: CLAUSES.WHERE,
+          clause: Clauses.Where,
         }),
       ),
     ).toBe(true);
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
index c1a95bc8f2d..7b6a3938fd7 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx
@@ -48,7 +48,7 @@ import AdhocFilterOption from 'src/explore/components/controls/FilterControl/Adh
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import adhocFilterType from 'src/explore/components/controls/FilterControl/adhocFilterType';
 import columnType from 'src/explore/components/controls/FilterControl/columnType';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const { warning } = Modal;
 
@@ -258,33 +258,33 @@ class AdhocFilterControl extends React.Component {
     // via datasource saved metric
     if (option.saved_metric_name) {
       return new AdhocFilter({
-        expressionType: EXPRESSION_TYPES.SQL,
+        expressionType: ExpressionTypes.Sql,
         subject: this.getMetricExpression(option.saved_metric_name),
         operator:
-          OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
+          OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
         comparator: 0,
-        clause: CLAUSES.HAVING,
+        clause: Clauses.Having,
       });
     }
     // has a custom label, meaning it's custom column
     if (option.label) {
       return new AdhocFilter({
-        expressionType: EXPRESSION_TYPES.SQL,
+        expressionType: ExpressionTypes.Sql,
         subject: new AdhocMetric(option).translateToSql(),
         operator:
-          OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
+          OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
         comparator: 0,
-        clause: CLAUSES.HAVING,
+        clause: Clauses.Having,
       });
     }
     // add a new filter item
     if (option.column_name) {
       return new AdhocFilter({
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
         subject: option.column_name,
-        operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.EQUALS].operation,
+        operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.Equals].operation,
         comparator: '',
-        clause: CLAUSES.WHERE,
+        clause: Clauses.Where,
         isNew: true,
       });
     }
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/AdhocFilterEditPopover.test.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/AdhocFilterEditPopover.test.jsx
index d81abdc0796..51c8be3f606 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/AdhocFilterEditPopover.test.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/AdhocFilterEditPopover.test.jsx
@@ -30,20 +30,20 @@ import AdhocFilterEditPopoverSimpleTabContent from 'src/explore/components/contr
 import AdhocFilterEditPopoverSqlTabContent from 'src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent';
 import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
 import AdhocFilterEditPopover from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
   operator: '>',
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const sqlAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SQL,
+  expressionType: ExpressionTypes.Sql,
   sqlExpression: 'value > 10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const faultyAdhocFilter = new AdhocFilter({
@@ -51,11 +51,11 @@ const faultyAdhocFilter = new AdhocFilter({
   subject: null,
   operator: '>',
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const sumValueAdhocMetric = new AdhocMetric({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   column: { type: 'VARCHAR(255)', column_name: 'source' },
   aggregate: AGGREGATES.SUM,
 });
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
index 34be012f5ec..94b04b1114a 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx
@@ -32,7 +32,7 @@ import {
   POPOVER_INITIAL_HEIGHT,
   POPOVER_INITIAL_WIDTH,
 } from 'src/explore/constants';
-import { EXPRESSION_TYPES } from '../types';
+import { ExpressionTypes } from '../types';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,
@@ -208,7 +208,7 @@ export default class AdhocFilterEditPopover extends React.Component {
         >
           <Tabs.TabPane
             className="adhoc-filter-edit-tab"
-            key={EXPRESSION_TYPES.SIMPLE}
+            key={ExpressionTypes.Simple}
             tab={t('Simple')}
           >
             <ErrorBoundary>
@@ -227,7 +227,7 @@ export default class AdhocFilterEditPopover extends React.Component {
           </Tabs.TabPane>
           <Tabs.TabPane
             className="adhoc-filter-edit-tab"
-            key={EXPRESSION_TYPES.SQL}
+            key={ExpressionTypes.Sql}
             tab={t('Custom SQL')}
           >
             <ErrorBoundary>
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/AdhocFilterEditPopoverSimpleTabContent.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/AdhocFilterEditPopoverSimpleTabContent.test.tsx
index d1e85a30b13..e376963eb6d 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/AdhocFilterEditPopoverSimpleTabContent.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/AdhocFilterEditPopoverSimpleTabContent.test.tsx
@@ -43,19 +43,19 @@ import AdhocFilterEditPopoverSimpleTabContent, {
   useSimpleTabFilterProps,
   Props,
 } from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
-  operatorId: Operators.GREATER_THAN,
-  operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GREATER_THAN].operation,
+  operatorId: Operators.GreaterThan,
+  operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.GreaterThan].operation,
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const advancedTypeTestAdhocFilterTest = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'advancedDataType',
   operatorId: null,
   operator: null,
@@ -64,26 +64,26 @@ const advancedTypeTestAdhocFilterTest = new AdhocFilter({
 });
 
 const simpleMultiAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
-  operatorId: Operators.IN,
-  operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.IN].operation,
+  operatorId: Operators.In,
+  operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.In].operation,
   comparator: ['10'],
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const sumValueAdhocMetric = new AdhocMetric({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   column: { type: 'VARCHAR(255)', column_name: 'source', id: 5 },
   aggregate: AGGREGATES.SUM,
   label: 'test-AdhocMetric',
 });
 
 const simpleCustomFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'ds',
   operator: 'LATEST PARTITION',
-  operatorId: Operators.LATEST_PARTITION,
+  operatorId: Operators.LatestPartition,
 });
 
 const options = [
@@ -150,7 +150,7 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
   it('shows boolean only operators when subject is boolean', () => {
     const { props } = setup({
       adhocFilter: new AdhocFilter({
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
         subject: 'value',
         operatorId: null,
         operator: null,
@@ -169,16 +169,16 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
     });
     const { isOperatorRelevant } = useSimpleTabFilterProps(props);
     [
-      Operators.IS_TRUE,
-      Operators.IS_FALSE,
-      Operators.IS_NULL,
-      Operators.IS_FALSE,
+      Operators.IsTrue,
+      Operators.IsFalse,
+      Operators.IsNull,
+      Operators.IsFalse,
     ].map(operator => expect(isOperatorRelevant(operator, 'value')).toBe(true));
   });
   it('shows boolean only operators when subject is number', () => {
     const { props } = setup({
       adhocFilter: new AdhocFilter({
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
         subject: 'value',
         operatorId: null,
         operator: null,
@@ -197,20 +197,20 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
     });
     const { isOperatorRelevant } = useSimpleTabFilterProps(props);
     [
-      Operators.IS_TRUE,
-      Operators.IS_FALSE,
-      Operators.IS_NULL,
-      Operators.IS_NOT_NULL,
+      Operators.IsTrue,
+      Operators.IsFalse,
+      Operators.IsNull,
+      Operators.IsNotNull,
     ].map(operator => expect(isOperatorRelevant(operator, 'value')).toBe(true));
   });
 
   it('will convert from individual comparator to array if the operator changes to multi', () => {
     const { props } = setup();
     const { onOperatorChange } = useSimpleTabFilterProps(props);
-    onOperatorChange(Operators.IN);
+    onOperatorChange(Operators.In);
     expect(props.onChange.calledOnce).toBe(true);
     expect(props.onChange.lastCall.args[0].comparator).toEqual(['10']);
-    expect(props.onChange.lastCall.args[0].operatorId).toEqual(Operators.IN);
+    expect(props.onChange.lastCall.args[0].operatorId).toEqual(Operators.In);
   });
 
   it('will convert from array to individual comparators if the operator changes from multi', () => {
@@ -218,11 +218,11 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
       adhocFilter: simpleMultiAdhocFilter,
     });
     const { onOperatorChange } = useSimpleTabFilterProps(props);
-    onOperatorChange(Operators.LESS_THAN);
+    onOperatorChange(Operators.LessThan);
     expect(props.onChange.calledOnce).toBe(true);
     expect(props.onChange.lastCall.args[0]).toEqual(
       simpleMultiAdhocFilter.duplicateWith({
-        operatorId: Operators.LESS_THAN,
+        operatorId: Operators.LessThan,
         operator: '<',
         comparator: '10',
       }),
@@ -242,7 +242,7 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
   it('will filter operators for table datasources', () => {
     const { props } = setup({ datasource: { type: 'table' } });
     const { isOperatorRelevant } = useSimpleTabFilterProps(props);
-    expect(isOperatorRelevant(Operators.LIKE, 'value')).toBe(true);
+    expect(isOperatorRelevant(Operators.Like, 'value')).toBe(true);
   });
 
   it('will show LATEST PARTITION operator', () => {
@@ -256,13 +256,13 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
       partitionColumn: 'ds',
     });
     const { isOperatorRelevant } = useSimpleTabFilterProps(props);
-    expect(isOperatorRelevant(Operators.LATEST_PARTITION, 'ds')).toBe(true);
-    expect(isOperatorRelevant(Operators.LATEST_PARTITION, 'value')).toBe(false);
+    expect(isOperatorRelevant(Operators.LatestPartition, 'ds')).toBe(true);
+    expect(isOperatorRelevant(Operators.LatestPartition, 'value')).toBe(false);
   });
 
   it('will generate custom sqlExpression for LATEST PARTITION operator', () => {
     const testAdhocFilter = new AdhocFilter({
-      expressionType: EXPRESSION_TYPES.SIMPLE,
+      expressionType: ExpressionTypes.Simple,
       subject: 'ds',
     });
     const { props } = setup({
@@ -275,13 +275,13 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
       partitionColumn: 'ds',
     });
     const { onOperatorChange } = useSimpleTabFilterProps(props);
-    onOperatorChange(Operators.LATEST_PARTITION);
+    onOperatorChange(Operators.LatestPartition);
     expect(props.onChange.calledOnce).toBe(true);
     expect(props.onChange.lastCall.args[0]).toEqual(
       testAdhocFilter.duplicateWith({
         subject: 'ds',
         operator: 'LATEST PARTITION',
-        operatorId: Operators.LATEST_PARTITION,
+        operatorId: Operators.LatestPartition,
         comparator: null,
         clause: 'WHERE',
         expressionType: 'SQL',
@@ -300,7 +300,7 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
       adhocFilter: simpleAdhocFilter,
     });
     const { isOperatorRelevant } = useSimpleTabFilterProps(props);
-    const booleanOnlyOperators = [Operators.IS_TRUE, Operators.IS_FALSE];
+    const booleanOnlyOperators = [Operators.IsTrue, Operators.IsFalse];
     booleanOnlyOperators.forEach(operator => {
       expect(isOperatorRelevant(operator, 'value')).toBe(false);
     });
@@ -321,7 +321,7 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
       adhocFilter: simpleAdhocFilter,
     });
     const { isOperatorRelevant } = useSimpleTabFilterProps(props);
-    const booleanOnlyOperators = [Operators.IS_TRUE, Operators.IS_FALSE];
+    const booleanOnlyOperators = [Operators.IsTrue, Operators.IsFalse];
     booleanOnlyOperators.forEach(operator => {
       expect(isOperatorRelevant(operator, 'value')).toBe(true);
     });
@@ -329,25 +329,25 @@ describe('AdhocFilterEditPopoverSimpleTabContent', () => {
   it('sets comparator to true when operator is IS_TRUE', () => {
     const { props } = setup();
     const { onOperatorChange } = useSimpleTabFilterProps(props);
-    onOperatorChange(Operators.IS_TRUE);
+    onOperatorChange(Operators.IsTrue);
     expect(props.onChange.calledOnce).toBe(true);
-    expect(props.onChange.lastCall.args[0].operatorId).toBe(Operators.IS_TRUE);
+    expect(props.onChange.lastCall.args[0].operatorId).toBe(Operators.IsTrue);
     expect(props.onChange.lastCall.args[0].operator).toBe('==');
     expect(props.onChange.lastCall.args[0].comparator).toBe(true);
   });
   it('sets comparator to false when operator is IS_FALSE', () => {
     const { props } = setup();
     const { onOperatorChange } = useSimpleTabFilterProps(props);
-    onOperatorChange(Operators.IS_FALSE);
+    onOperatorChange(Operators.IsFalse);
     expect(props.onChange.calledOnce).toBe(true);
-    expect(props.onChange.lastCall.args[0].operatorId).toBe(Operators.IS_FALSE);
+    expect(props.onChange.lastCall.args[0].operatorId).toBe(Operators.IsFalse);
     expect(props.onChange.lastCall.args[0].operator).toBe('==');
     expect(props.onChange.lastCall.args[0].comparator).toBe(false);
   });
   it('sets comparator to null when operator is IS_NULL or IS_NOT_NULL', () => {
     const { props } = setup();
     const { onOperatorChange } = useSimpleTabFilterProps(props);
-    [Operators.IS_NULL, Operators.IS_NOT_NULL].forEach(op => {
+    [Operators.IsNull, Operators.IsNotNull].forEach(op => {
       onOperatorChange(op);
       expect(props.onChange.called).toBe(true);
       expect(props.onChange.lastCall.args[0].operatorId).toBe(op);
@@ -367,7 +367,7 @@ fetchMock.get(ADVANCED_DATA_TYPE_ENDPOINT_VALID, {
   result: {
     display_value: 'VALID',
     error_message: '',
-    valid_filter_operators: [Operators.EQUALS],
+    valid_filter_operators: [Operators.Equals],
     values: ['VALID'],
   },
 });
@@ -402,7 +402,7 @@ describe('AdhocFilterEditPopoverSimpleTabContent Advanced data Type Test', () =>
       .spyOn(uiCore, 'isFeatureEnabled')
       .mockImplementation(
         (featureFlag: FeatureFlag) =>
-          featureFlag === FeatureFlag.ENABLE_ADVANCED_DATA_TYPES,
+          featureFlag === FeatureFlag.EnableAdvancedDataTypes,
       );
   });
 
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
index c58d2b2bd1e..fcd85b20c91 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent/index.tsx
@@ -51,7 +51,7 @@ import {
 import useAdvancedDataTypes from './useAdvancedDataTypes';
 import { useDatePickerInAdhocFilter } from '../utils';
 import { useDefaultTimeFilter } from '../../DateFilterControl/utils';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const StyledInput = styled(Input)`
   margin-bottom: ${({ theme }) => theme.gridUnit * 4}px;
@@ -74,13 +74,13 @@ const SelectWithLabel = styled(Select)<{ labelText: string }>`
 `;
 
 export interface SimpleExpressionType {
-  expressionType: keyof typeof EXPRESSION_TYPES;
+  expressionType: keyof typeof ExpressionTypes;
   column: ColumnMeta;
   aggregate: keyof typeof AGGREGATES;
   label: string;
 }
 export interface SQLExpressionType {
-  expressionType: keyof typeof EXPRESSION_TYPES;
+  expressionType: keyof typeof ExpressionTypes;
   sqlExpression: string;
   label: string;
 }
@@ -124,24 +124,22 @@ export const useSimpleTabFilterProps = (props: Props) => {
       !!column && (column.type === 'INT' || column.type === 'INTEGER');
     const isColumnFunction = !!column && !!column.expression;
 
-    if (operator && operator === Operators.LATEST_PARTITION) {
+    if (operator && operator === Operators.LatestPartition) {
       const { partitionColumn } = props;
       return partitionColumn && subject && subject === partitionColumn;
     }
-    if (operator && operator === Operators.TEMPORAL_RANGE) {
+    if (operator && operator === Operators.TemporalRange) {
       // hide the TEMPORAL_RANGE operator
       return false;
     }
-    if (operator === Operators.IS_TRUE || operator === Operators.IS_FALSE) {
+    if (operator === Operators.IsTrue || operator === Operators.IsFalse) {
       return isColumnBoolean || isColumnNumber || isColumnFunction;
     }
     if (isColumnBoolean) {
-      return (
-        operator === Operators.IS_NULL || operator === Operators.IS_NOT_NULL
-      );
+      return operator === Operators.IsNull || operator === Operators.IsNotNull;
     }
     return (
-      props.adhocFilter.clause !== CLAUSES.HAVING ||
+      props.adhocFilter.clause !== Clauses.Having ||
       HAVING_OPERATORS.indexOf(operator) !== -1
     );
   };
@@ -156,13 +154,13 @@ export const useSimpleTabFilterProps = (props: Props) => {
     // infer the new clause based on what subject was selected.
     if (option && 'column_name' in option) {
       subject = option.column_name;
-      clause = CLAUSES.WHERE;
+      clause = Clauses.Where;
     } else if (option && 'saved_metric_name' in option) {
       subject = option.saved_metric_name;
-      clause = CLAUSES.HAVING;
+      clause = Clauses.Having;
     } else if (option?.label) {
       subject = option.label;
-      clause = CLAUSES.HAVING;
+      clause = Clauses.Having;
     }
     let { operator, operatorId, comparator } = props.adhocFilter;
     operator =
@@ -171,15 +169,15 @@ export const useSimpleTabFilterProps = (props: Props) => {
         : null;
     if (!isDefined(operator)) {
       // if operator is `null`, use the `IN` and reset the comparator.
-      operator = Operators.IN;
-      operatorId = Operators.IN;
+      operator = Operators.In;
+      operatorId = Operators.In;
       comparator = undefined;
     }
 
     if (isTemporalColumn(id, props.datasource)) {
       subject = id;
-      operator = Operators.TEMPORAL_RANGE;
-      operatorId = Operators.TEMPORAL_RANGE;
+      operator = Operators.TemporalRange;
+      operatorId = Operators.TemporalRange;
       comparator = defaultTimeFilter;
     }
 
@@ -188,7 +186,7 @@ export const useSimpleTabFilterProps = (props: Props) => {
         subject,
         clause,
         operator,
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
         operatorId,
         comparator,
       }),
@@ -208,17 +206,17 @@ export const useSimpleTabFilterProps = (props: Props) => {
         ? currentComparator[0]
         : currentComparator;
     }
-    if (operatorId === Operators.IS_TRUE || operatorId === Operators.IS_FALSE) {
-      newComparator = Operators.IS_TRUE === operatorId;
+    if (operatorId === Operators.IsTrue || operatorId === Operators.IsFalse) {
+      newComparator = Operators.IsTrue === operatorId;
     }
     if (operatorId && CUSTOM_OPERATORS.has(operatorId)) {
       props.onChange(
         props.adhocFilter.duplicateWith({
           subject: props.adhocFilter.subject,
-          clause: CLAUSES.WHERE,
+          clause: Clauses.Where,
           operatorId,
           operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[operatorId].operation,
-          expressionType: EXPRESSION_TYPES.SQL,
+          expressionType: ExpressionTypes.Sql,
           datasource: props.datasource,
         }),
       );
@@ -228,7 +226,7 @@ export const useSimpleTabFilterProps = (props: Props) => {
           operatorId,
           operator: OPERATOR_ENUM_TO_OPERATOR_TYPE[operatorId].operation,
           comparator: newComparator,
-          expressionType: EXPRESSION_TYPES.SIMPLE,
+          expressionType: ExpressionTypes.Simple,
         }),
       );
     }
@@ -237,7 +235,7 @@ export const useSimpleTabFilterProps = (props: Props) => {
     props.onChange(
       props.adhocFilter.duplicateWith({
         comparator,
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
       }),
     );
   };
@@ -253,9 +251,9 @@ export const useSimpleTabFilterProps = (props: Props) => {
     props.onChange(
       props.adhocFilter.duplicateWith({
         subject: columnName,
-        operator: Operators.TEMPORAL_RANGE,
+        operator: Operators.TemporalRange,
         comparator: timeRange,
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
       }),
     );
   };
@@ -341,7 +339,7 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
   };
 
   subjectSelectProps.placeholder =
-    props.adhocFilter.clause === CLAUSES.WHERE
+    props.adhocFilter.clause === Clauses.Where
       ? t('%s column(s)', columns.length)
       : t('To filter on a metric, use Custom SQL tab.');
   columns = props.options.filter(
@@ -386,7 +384,7 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
   const datePicker = useDatePickerInAdhocFilter({
     columnName: props.adhocFilter.subject,
     timeRange:
-      props.adhocFilter.operator === Operators.TEMPORAL_RANGE
+      props.adhocFilter.operator === Operators.TemporalRange
         ? props.adhocFilter.comparator
         : undefined,
     datasource: props.datasource,
@@ -397,7 +395,7 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
     const refreshComparatorSuggestions = () => {
       const { datasource } = props;
       const col = props.adhocFilter.subject;
-      const having = props.adhocFilter.clause === CLAUSES.HAVING;
+      const having = props.adhocFilter.clause === Clauses.Having;
 
       if (col && datasource && datasource.filter_select && !having) {
         const controller = new AbortController();
@@ -433,13 +431,13 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
   }, [props.adhocFilter.subject]);
 
   useEffect(() => {
-    if (isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)) {
+    if (isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)) {
       fetchSubjectAdvancedDataType(props);
     }
   }, [props.adhocFilter.subject]);
 
   useEffect(() => {
-    if (isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)) {
+    if (isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)) {
       fetchAdvancedDataTypeValueCallback(
         comparator === undefined ? '' : comparator,
         advancedDataTypesState,
@@ -449,7 +447,7 @@ const AdhocFilterEditPopoverSimpleTabContent: React.FC<Props> = props => {
   }, [comparator, subjectAdvancedDataType, fetchAdvancedDataTypeValueCallback]);
 
   useEffect(() => {
-    if (isFeatureEnabled(FeatureFlag.ENABLE_ADVANCED_DATA_TYPES)) {
+    if (isFeatureEnabled(FeatureFlag.EnableAdvancedDataTypes)) {
       setComparator(props.adhocFilter.comparator);
     }
   }, [props.adhocFilter.comparator]);
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.jsx
index c0837fdb486..9bdd20c0f0e 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.jsx
@@ -23,12 +23,12 @@ import { shallow } from 'enzyme';
 
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import AdhocFilterEditPopoverSqlTabContent from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const sqlAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SQL,
+  expressionType: ExpressionTypes.Sql,
   sqlExpression: 'value > 10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 function setup(overrides) {
@@ -52,11 +52,11 @@ describe('AdhocFilterEditPopoverSqlTabContent', () => {
 
   it('passes the new clause to onChange after onSqlExpressionClauseChange', () => {
     const { wrapper, onChange } = setup();
-    wrapper.instance().onSqlExpressionClauseChange(CLAUSES.HAVING);
+    wrapper.instance().onSqlExpressionClauseChange(Clauses.Having);
     expect(onChange.calledOnce).toBe(true);
     expect(
       onChange.lastCall.args[0].equals(
-        sqlAdhocFilter.duplicateWith({ clause: CLAUSES.HAVING }),
+        sqlAdhocFilter.duplicateWith({ clause: Clauses.Having }),
       ),
     ).toBe(true);
   });
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
index 2e46e072555..852bfc38b38 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
@@ -26,7 +26,7 @@ import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
 import columnType from 'src/explore/components/controls/FilterControl/columnType';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,
@@ -72,7 +72,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     this.props.onChange(
       this.props.adhocFilter.duplicateWith({
         clause,
-        expressionType: EXPRESSION_TYPES.SQL,
+        expressionType: ExpressionTypes.Sql,
       }),
     );
   }
@@ -81,7 +81,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     this.props.onChange(
       this.props.adhocFilter.duplicateWith({
         sqlExpression,
-        expressionType: EXPRESSION_TYPES.SQL,
+        expressionType: ExpressionTypes.Sql,
       }),
     );
   }
@@ -115,7 +115,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
         })
         .filter(Boolean),
     );
-    const selectOptions = Object.keys(CLAUSES).map(clause => ({
+    const selectOptions = Object.keys(Clauses).map(clause => ({
       label: clause,
       value: clause,
     }));
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
index 514a10094d5..3fff11b3296 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
@@ -21,14 +21,14 @@ import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import AdhocFilterOption, { AdhocFilterOptionProps } from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
   operator: '>',
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const options = [
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
index b983c413ead..fcfe01c41a5 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
@@ -21,14 +21,14 @@ import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import AdhocFilterPopoverTrigger from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
   operator: '>',
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const mockedProps = {
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js b/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js
index df9f43a5d66..b8900c1756b 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js
+++ b/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js
@@ -17,12 +17,12 @@
  * under the License.
  */
 import PropTypes from 'prop-types';
-import { CLAUSES, EXPRESSION_TYPES } from './types';
+import { Clauses, ExpressionTypes } from './types';
 
 export default PropTypes.oneOfType([
   PropTypes.shape({
-    expressionType: PropTypes.oneOf([EXPRESSION_TYPES.SIMPLE]).isRequired,
-    clause: PropTypes.oneOf([CLAUSES.HAVING, CLAUSES.WHERE]).isRequired,
+    expressionType: PropTypes.oneOf([ExpressionTypes.Simple]).isRequired,
+    clause: PropTypes.oneOf([Clauses.Having, Clauses.Where]).isRequired,
     subject: PropTypes.string.isRequired,
     comparator: PropTypes.oneOfType([
       PropTypes.string,
@@ -30,8 +30,8 @@ export default PropTypes.oneOfType([
     ]).isRequired,
   }),
   PropTypes.shape({
-    expressionType: PropTypes.oneOf([EXPRESSION_TYPES.SQL]).isRequired,
-    clause: PropTypes.oneOf([CLAUSES.WHERE, CLAUSES.HAVING]).isRequired,
+    expressionType: PropTypes.oneOf([ExpressionTypes.Sql]).isRequired,
+    clause: PropTypes.oneOf([Clauses.Where, Clauses.Having]).isRequired,
     sqlExpression: PropTypes.string.isRequired,
   }),
 ]);
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/types.ts b/superset-frontend/src/explore/components/controls/FilterControl/types.ts
index 4adceab2173..d2eebc5bffd 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/FilterControl/types.ts
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-export enum EXPRESSION_TYPES {
-  SIMPLE = 'SIMPLE',
-  SQL = 'SQL',
+export enum ExpressionTypes {
+  Simple = 'SIMPLE',
+  Sql = 'SQL',
 }
 
-export enum CLAUSES {
-  HAVING = 'HAVING',
-  WHERE = 'WHERE',
+export enum Clauses {
+  Having = 'HAVING',
+  Where = 'WHERE',
 }
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts b/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts
index e041a30fbab..e5124e44c56 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts
+++ b/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts
@@ -64,7 +64,7 @@ export const translateToSql = (
       operator &&
       // 'LATEST PARTITION' supported callback only
       operator ===
-        OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.LATEST_PARTITION].operation
+        OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.LatestPartition].operation
         ? OPERATORS_TO_SQL[operator](adhocFilter)
         : OPERATORS_TO_SQL[operator];
     return getSimpleSQLExpression(subject, op, comparator);
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts
index 4deb8fbc6ab..1c3dc321a8b 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts
+++ b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts
@@ -22,15 +22,15 @@ import { Operators } from 'src/explore/constants';
 import * as FetchTimeRangeModule from 'src/explore/components/controls/DateFilterControl';
 import { useGetTimeRangeLabel } from './useGetTimeRangeLabel';
 import AdhocFilter from '../AdhocFilter';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 test('should return empty object if operator is not TEMPORAL_RANGE', () => {
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'value',
     operator: '>',
     comparator: '10',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
   const { result } = renderHook(() => useGetTimeRangeLabel(adhocFilter));
   expect(result.current).toEqual({});
@@ -38,11 +38,11 @@ test('should return empty object if operator is not TEMPORAL_RANGE', () => {
 
 test('should return empty object if expressionType is SQL', () => {
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SQL,
+    expressionType: ExpressionTypes.Sql,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: 'Last week',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
   const { result } = renderHook(() => useGetTimeRangeLabel(adhocFilter));
   expect(result.current).toEqual({});
@@ -50,11 +50,11 @@ test('should return empty object if expressionType is SQL', () => {
 
 test('should get "No filter" label', () => {
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: NO_TIME_RANGE,
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
   const { result } = renderHook(() => useGetTimeRangeLabel(adhocFilter));
   expect(result.current).toEqual({
@@ -69,11 +69,11 @@ test('should get actualTimeRange and title', async () => {
     .mockResolvedValue({ value: 'MOCK TIME' });
 
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: 'Last week',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
 
   const { result } = await renderHook(() => useGetTimeRangeLabel(adhocFilter));
@@ -89,11 +89,11 @@ test('should get actualTimeRange and title when gets an error', async () => {
     .mockResolvedValue({ error: 'MOCK ERROR' });
 
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: 'Last week',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
 
   const { result } = await renderHook(() => useGetTimeRangeLabel(adhocFilter));
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx
index f06743ed5cb..3a0b7a45cad 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx
@@ -21,7 +21,7 @@ import { NO_TIME_RANGE } from '@superset-ui/core';
 import { fetchTimeRange } from 'src/explore/components/controls/DateFilterControl';
 import { Operators } from 'src/explore/constants';
 import AdhocFilter from '../AdhocFilter';
-import { EXPRESSION_TYPES } from '../types';
+import { ExpressionTypes } from '../types';
 
 interface Results {
   actualTimeRange?: string;
@@ -33,13 +33,13 @@ export const useGetTimeRangeLabel = (adhocFilter: AdhocFilter): Results => {
 
   useEffect(() => {
     if (
-      adhocFilter.operator !== Operators.TEMPORAL_RANGE ||
-      adhocFilter.expressionType !== EXPRESSION_TYPES.SIMPLE
+      adhocFilter.operator !== Operators.TemporalRange ||
+      adhocFilter.expressionType !== ExpressionTypes.Simple
     ) {
       setActualTimeRange({});
     }
     if (
-      adhocFilter.operator === Operators.TEMPORAL_RANGE &&
+      adhocFilter.operator === Operators.TemporalRange &&
       adhocFilter.comparator === NO_TIME_RANGE
     ) {
       setActualTimeRange({
@@ -49,8 +49,8 @@ export const useGetTimeRangeLabel = (adhocFilter: AdhocFilter): Results => {
     }
 
     if (
-      adhocFilter.operator === Operators.TEMPORAL_RANGE &&
-      adhocFilter.expressionType === EXPRESSION_TYPES.SIMPLE &&
+      adhocFilter.operator === Operators.TemporalRange &&
+      adhocFilter.expressionType === ExpressionTypes.Simple &&
       adhocFilter.comparator !== NO_TIME_RANGE &&
       actualTimeRange.title !== adhocFilter.comparator
     ) {
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index 347b339481d..4905e9a3337 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -58,11 +58,11 @@ type VizEntry = {
   value: ChartMetadata;
 };
 
-enum SECTIONS {
-  ALL_CHARTS = 'ALL_CHARTS',
-  CATEGORY = 'CATEGORY',
-  TAGS = 'TAGS',
-  RECOMMENDED_TAGS = 'RECOMMENDED_TAGS',
+enum Sections {
+  AllCharts = 'ALL_CHARTS',
+  Category = 'CATEGORY',
+  Tags = 'TAGS',
+  RecommendedTags = 'RECOMMENDED_TAGS',
 }
 
 const DEFAULT_ORDER = [
@@ -573,8 +573,8 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
 
   const [activeSection, setActiveSection] = useState<string>(() =>
     selectedVizMetadata?.category
-      ? SECTIONS.CATEGORY
-      : SECTIONS.RECOMMENDED_TAGS,
+      ? Sections.Category
+      : Sections.RecommendedTags,
   );
 
   // get a fuse instance for fuzzy search
@@ -666,17 +666,17 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
 
   const sectionMap = useMemo(
     () => ({
-      [SECTIONS.RECOMMENDED_TAGS]: {
+      [Sections.RecommendedTags]: {
         title: t('Recommended tags'),
         icon: <Icons.Tags />,
         selectors: RECOMMENDED_TAGS,
       },
-      [SECTIONS.CATEGORY]: {
+      [Sections.Category]: {
         title: t('Category'),
         icon: <Icons.Category />,
         selectors: categories,
       },
-      [SECTIONS.TAGS]: {
+      [Sections.Tags]: {
         title: t('Tags'),
         icon: <Icons.Tags />,
         selectors: tags,
@@ -689,21 +689,18 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
     if (isActivelySearching) {
       return searchResults;
     }
-    if (
-      activeSelector === ALL_CHARTS &&
-      activeSection === SECTIONS.ALL_CHARTS
-    ) {
+    if (activeSelector === ALL_CHARTS && activeSection === Sections.AllCharts) {
       return sortedMetadata;
     }
     if (
-      activeSection === SECTIONS.CATEGORY &&
+      activeSection === Sections.Category &&
       chartsByCategory[activeSelector]
     ) {
       return chartsByCategory[activeSelector];
     }
     if (
-      (activeSection === SECTIONS.TAGS ||
-        activeSection === SECTIONS.RECOMMENDED_TAGS) &&
+      (activeSection === Sections.Tags ||
+        activeSection === Sections.RecommendedTags) &&
       chartsByTags[activeSelector]
     ) {
       return chartsByTags[activeSelector];
@@ -725,13 +722,13 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
               margin-bottom: 0;
             `
           }
-          sectionId={SECTIONS.ALL_CHARTS}
+          sectionId={Sections.AllCharts}
           selector={ALL_CHARTS}
           icon={<Icons.Ballot />}
           isSelected={
             !isActivelySearching &&
             ALL_CHARTS === activeSelector &&
-            SECTIONS.ALL_CHARTS === activeSection
+            Sections.AllCharts === activeSection
           }
           onClick={clickSelector}
         />
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
index db1efd711d3..0d30e573559 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
@@ -373,7 +373,7 @@ export const useExploreAdditionalActionsMenu = (
           <Menu.Item key={MENU_KEYS.SHARE_BY_EMAIL}>
             {t('Share chart by email')}
           </Menu.Item>
-          {isFeatureEnabled(FeatureFlag.EMBEDDABLE_CHARTS) ? (
+          {isFeatureEnabled(FeatureFlag.EmbeddableCharts) ? (
             <Menu.Item key={MENU_KEYS.EMBED_CODE}>
               <ModalTrigger
                 triggerNode={
diff --git a/superset-frontend/src/explore/constants.ts b/superset-frontend/src/explore/constants.ts
index 09362f423d7..e2bc7ea04aa 100644
--- a/superset-frontend/src/explore/constants.ts
+++ b/superset-frontend/src/explore/constants.ts
@@ -29,22 +29,22 @@ export const AGGREGATES = {
 export const AGGREGATES_OPTIONS = Object.values(AGGREGATES);
 
 export enum Operators {
-  EQUALS = 'EQUALS',
-  NOT_EQUALS = 'NOT_EQUALS',
-  LESS_THAN = 'LESS_THAN',
-  LESS_THAN_OR_EQUAL = 'LESS_THAN_OR_EQUAL',
-  GREATER_THAN = 'GREATER_THAN',
-  GREATER_THAN_OR_EQUAL = 'GREATER_THAN_OR_EQUAL',
-  IN = 'IN',
-  NOT_IN = 'NOT_IN',
-  LIKE = 'LIKE',
-  ILIKE = 'ILIKE',
-  IS_NOT_NULL = 'IS_NOT_NULL',
-  IS_NULL = 'IS_NULL',
-  LATEST_PARTITION = 'LATEST_PARTITION',
-  IS_TRUE = 'IS_TRUE',
-  IS_FALSE = 'IS_FALSE',
-  TEMPORAL_RANGE = 'TEMPORAL_RANGE',
+  Equals = 'EQUALS',
+  NotEquals = 'NOT_EQUALS',
+  LessThan = 'LESS_THAN',
+  LessThanOrEqual = 'LESS_THAN_OR_EQUAL',
+  GreaterThan = 'GREATER_THAN',
+  GreaterThanOrEqual = 'GREATER_THAN_OR_EQUAL',
+  In = 'IN',
+  NotIn = 'NOT_IN',
+  Like = 'LIKE',
+  CaseInsensitiveLike = 'ILIKE',
+  IsNotNull = 'IS_NOT_NULL',
+  IsNull = 'IS_NULL',
+  LatestPartition = 'LATEST_PARTITION',
+  IsTrue = 'IS_TRUE',
+  IsFalse = 'IS_FALSE',
+  TemporalRange = 'TEMPORAL_RANGE',
 }
 
 export interface OperatorType {
@@ -55,37 +55,37 @@ export interface OperatorType {
 export const OPERATOR_ENUM_TO_OPERATOR_TYPE: {
   [key in Operators]: OperatorType;
 } = {
-  [Operators.EQUALS]: { display: t('Equal to (=)'), operation: '==' },
-  [Operators.NOT_EQUALS]: { display: t('Not equal to (≠)'), operation: '!=' },
-  [Operators.LESS_THAN]: { display: t('Less than (<)'), operation: '<' },
-  [Operators.LESS_THAN_OR_EQUAL]: {
+  [Operators.Equals]: { display: t('Equal to (=)'), operation: '==' },
+  [Operators.NotEquals]: { display: t('Not equal to (≠)'), operation: '!=' },
+  [Operators.LessThan]: { display: t('Less than (<)'), operation: '<' },
+  [Operators.LessThanOrEqual]: {
     display: t('Less or equal (<=)'),
     operation: '<=',
   },
-  [Operators.GREATER_THAN]: { display: t('Greater than (>)'), operation: '>' },
-  [Operators.GREATER_THAN_OR_EQUAL]: {
+  [Operators.GreaterThan]: { display: t('Greater than (>)'), operation: '>' },
+  [Operators.GreaterThanOrEqual]: {
     display: t('Greater or equal (>=)'),
     operation: '>=',
   },
-  [Operators.IN]: { display: t('In'), operation: 'IN' },
-  [Operators.NOT_IN]: { display: t('Not in'), operation: 'NOT IN' },
-  [Operators.LIKE]: { display: t('Like'), operation: 'LIKE' },
-  [Operators.ILIKE]: {
+  [Operators.In]: { display: t('In'), operation: 'IN' },
+  [Operators.NotIn]: { display: t('Not in'), operation: 'NOT IN' },
+  [Operators.Like]: { display: t('Like'), operation: 'LIKE' },
+  [Operators.CaseInsensitiveLike]: {
     display: t('Like (case insensitive)'),
     operation: 'ILIKE',
   },
-  [Operators.IS_NOT_NULL]: {
+  [Operators.IsNotNull]: {
     display: t('Is not null'),
     operation: 'IS NOT NULL',
   },
-  [Operators.IS_NULL]: { display: t('Is null'), operation: 'IS NULL' },
-  [Operators.LATEST_PARTITION]: {
+  [Operators.IsNull]: { display: t('Is null'), operation: 'IS NULL' },
+  [Operators.LatestPartition]: {
     display: t('use latest_partition template'),
     operation: 'LATEST PARTITION',
   },
-  [Operators.IS_TRUE]: { display: t('Is true'), operation: '==' },
-  [Operators.IS_FALSE]: { display: t('Is false'), operation: '==' },
-  [Operators.TEMPORAL_RANGE]: {
+  [Operators.IsTrue]: { display: t('Is true'), operation: '==' },
+  [Operators.IsFalse]: { display: t('Is false'), operation: '==' },
+  [Operators.TemporalRange]: {
     display: t('TEMPORAL_RANGE'),
     operation: 'TEMPORAL_RANGE',
   },
@@ -93,30 +93,33 @@ export const OPERATOR_ENUM_TO_OPERATOR_TYPE: {
 
 export const OPERATORS_OPTIONS = Object.values(Operators) as Operators[];
 
-export const TABLE_ONLY_OPERATORS = [Operators.LIKE, Operators.ILIKE];
-export const HAVING_OPERATORS = [
-  Operators.EQUALS,
-  Operators.NOT_EQUALS,
-  Operators.LESS_THAN,
-  Operators.LESS_THAN_OR_EQUAL,
-  Operators.GREATER_THAN,
-  Operators.GREATER_THAN_OR_EQUAL,
+export const TABLE_ONLY_OPERATORS = [
+  Operators.Like,
+  Operators.CaseInsensitiveLike,
 ];
-export const MULTI_OPERATORS = new Set([Operators.IN, Operators.NOT_IN]);
+export const HAVING_OPERATORS = [
+  Operators.Equals,
+  Operators.NotEquals,
+  Operators.LessThan,
+  Operators.LessThanOrEqual,
+  Operators.GreaterThan,
+  Operators.GreaterThanOrEqual,
+];
+export const MULTI_OPERATORS = new Set([Operators.In, Operators.NotIn]);
 // CUSTOM_OPERATORS will show operator in simple mode,
 // but will generate customized sqlExpression
 export const CUSTOM_OPERATORS = new Set([
-  Operators.LATEST_PARTITION,
-  Operators.TEMPORAL_RANGE,
+  Operators.LatestPartition,
+  Operators.TemporalRange,
 ]);
 // DISABLE_INPUT_OPERATORS will disable filter value input
 // in adhocFilter control
 export const DISABLE_INPUT_OPERATORS = [
-  Operators.IS_NOT_NULL,
-  Operators.IS_NULL,
-  Operators.LATEST_PARTITION,
-  Operators.IS_TRUE,
-  Operators.IS_FALSE,
+  Operators.IsNotNull,
+  Operators.IsNull,
+  Operators.LatestPartition,
+  Operators.IsTrue,
+  Operators.IsFalse,
 ];
 
 export const sqlaAutoGeneratedMetricNameRegex =
diff --git a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx b/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
index 3105f308688..b39468841bd 100644
--- a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
+++ b/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
@@ -96,7 +96,7 @@ describe('exploreUtils', () => {
       compareURI(
         URI(url),
         URI('/explore/').search({
-          standalone: DashboardStandaloneMode.HIDE_NAV,
+          standalone: DashboardStandaloneMode.HideNav,
         }),
       );
     });
diff --git a/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts b/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts
index 343f9efeecb..e6526ab7048 100644
--- a/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts
+++ b/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts
@@ -39,8 +39,8 @@ test('Should return "" if subject is falsy', () => {
 });
 
 test('Should return null string and empty string', () => {
-  expect(getSimpleSQLExpression(params.subject, Operators.IN, [null, ''])).toBe(
-    `subject ${Operators.IN} (${NULL_STRING}, ${EMPTY_STRING})`,
+  expect(getSimpleSQLExpression(params.subject, Operators.In, [null, ''])).toBe(
+    `subject ${Operators.In} (${NULL_STRING}, ${EMPTY_STRING})`,
   );
 });
 
diff --git a/superset-frontend/src/explore/exploreUtils/index.js b/superset-frontend/src/explore/exploreUtils/index.js
index 67dc0c77656..4fc8147a189 100644
--- a/superset-frontend/src/explore/exploreUtils/index.js
+++ b/superset-frontend/src/explore/exploreUtils/index.js
@@ -99,7 +99,7 @@ export function mountExploreUrl(endpointType, extraSearch = {}, force = false) {
     if (force) {
       search.force = '1';
     }
-    search.standalone = DashboardStandaloneMode.HIDE_NAV;
+    search.standalone = DashboardStandaloneMode.HideNav;
   }
   return uri.directory(directory).search(search).toString();
 }
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index e371efcf1b9..98dae684961 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -504,7 +504,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   const isEditMode = alert !== null;
   const formatOptionEnabled =
     contentType === 'chart' &&
-    (isFeatureEnabled(FeatureFlag.ALERTS_ATTACH_REPORTS) || isReport);
+    (isFeatureEnabled(FeatureFlag.AlertsAttachReports) || isReport);
 
   const [notificationAddState, setNotificationAddState] =
     useState<NotificationAddStatus>('active');
diff --git a/superset-frontend/src/features/alerts/types.ts b/superset-frontend/src/features/alerts/types.ts
index e01cf6f438d..d8b166302c8 100644
--- a/superset-frontend/src/features/alerts/types.ts
+++ b/superset-frontend/src/features/alerts/types.ts
@@ -18,7 +18,7 @@
  */
 
 import Owner from 'src/types/Owner';
-import { NOTIFICATION_FORMATS } from 'src/features/reports/types';
+import { NotificationFormats } from 'src/features/reports/types';
 
 type user = {
   id: number;
@@ -85,7 +85,7 @@ export type AlertObject = {
   sql?: string;
   timezone?: string;
   recipients?: Array<Recipient>;
-  report_format?: NOTIFICATION_FORMATS;
+  report_format?: NotificationFormats;
   type?: string;
   validator_config_json?: {
     op?: Operator;
diff --git a/superset-frontend/src/features/charts/ChartCard.tsx b/superset-frontend/src/features/charts/ChartCard.tsx
index 38a46eb8987..2883df20a51 100644
--- a/superset-frontend/src/features/charts/ChartCard.tsx
+++ b/superset-frontend/src/features/charts/ChartCard.tsx
@@ -146,7 +146,7 @@ export default function ChartCard({
         certifiedBy={chart.certified_by}
         certificationDetails={chart.certification_details}
         cover={
-          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+          !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
             <></>
           ) : null
         }
diff --git a/superset-frontend/src/features/dashboards/DashboardCard.tsx b/superset-frontend/src/features/dashboards/DashboardCard.tsx
index 640648c9030..e977c62f52d 100644
--- a/superset-frontend/src/features/dashboards/DashboardCard.tsx
+++ b/superset-frontend/src/features/dashboards/DashboardCard.tsx
@@ -122,7 +122,7 @@ function DashboardCard({
           <Label>{dashboard.published ? t('published') : t('draft')}</Label>
         }
         cover={
-          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+          !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
             <></>
           ) : null
         }
diff --git a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
index 0125fd36d51..c5e268e5691 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
@@ -26,8 +26,8 @@ import { FieldPropTypes } from '.';
 import { infoTooltip, labelMarginBottom, CredentialInfoForm } from '../styles';
 
 enum CredentialInfoOptions {
-  jsonUpload,
-  copyPaste,
+  JsonUpload,
+  CopyPaste,
 }
 
 // These are the columns that are going to be added to encrypted extra, they differ in name based
@@ -47,7 +47,7 @@ export const EncryptedField = ({
   editNewDb,
 }: FieldPropTypes) => {
   const [uploadOption, setUploadOption] = useState<number>(
-    CredentialInfoOptions.jsonUpload.valueOf(),
+    CredentialInfoOptions.JsonUpload.valueOf(),
   );
   const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
     null,
@@ -97,17 +97,17 @@ export const EncryptedField = ({
             style={{ width: '100%' }}
             onChange={option => setUploadOption(option)}
           >
-            <AntdSelect.Option value={CredentialInfoOptions.jsonUpload}>
+            <AntdSelect.Option value={CredentialInfoOptions.JsonUpload}>
               {t('Upload JSON file')}
             </AntdSelect.Option>
 
-            <AntdSelect.Option value={CredentialInfoOptions.copyPaste}>
+            <AntdSelect.Option value={CredentialInfoOptions.CopyPaste}>
               {t('Copy and Paste JSON credentials')}
             </AntdSelect.Option>
           </AntdSelect>
         </>
       )}
-      {uploadOption === CredentialInfoOptions.copyPaste ||
+      {uploadOption === CredentialInfoOptions.CopyPaste ||
       isEditMode ||
       editNewDb ? (
         <div className="input-container">
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
index f708761a208..7823d82fafb 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@@ -59,7 +59,7 @@ const SSHTunnelForm = ({
   >;
   setSSHTunnelLoginMethod: (method: AuthType) => void;
 }) => {
-  const [usePassword, setUsePassword] = useState<AuthType>(AuthType.password);
+  const [usePassword, setUsePassword] = useState<AuthType>(AuthType.Password);
 
   return (
     <Form>
@@ -126,13 +126,13 @@ const SSHTunnelForm = ({
                 }}
               >
                 <Radio
-                  value={AuthType.password}
+                  value={AuthType.Password}
                   data-test="ssh-tunnel-use_password-radio"
                 >
                   {t('Password')}
                 </Radio>
                 <Radio
-                  value={AuthType.privateKey}
+                  value={AuthType.PrivateKey}
                   data-test="ssh-tunnel-use_private_key-radio"
                 >
                   {t('Private Key & Password')}
@@ -142,7 +142,7 @@ const SSHTunnelForm = ({
           </StyledDiv>
         </Col>
       </StyledRow>
-      {usePassword === AuthType.password && (
+      {usePassword === AuthType.Password && (
         <StyledRow gutter={16}>
           <Col xs={24}>
             <StyledDiv>
@@ -172,7 +172,7 @@ const SSHTunnelForm = ({
           </Col>
         </StyledRow>
       )}
-      {usePassword === AuthType.privateKey && (
+      {usePassword === AuthType.PrivateKey && (
         <>
           <StyledRow gutter={16}>
             <Col xs={24}>
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
index a3cc38ca37a..388e3c83b1a 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
@@ -41,7 +41,7 @@ const SSHTunnelSwitch = ({
           setUseSSHTunneling(changed);
           if (!changed) {
             setDB({
-              type: ActionType.removeSSHTunnelConfig,
+              type: ActionType.RemoveSSHTunnelConfig,
             });
           }
         }}
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
index ba443e00994..0f60857f06b 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
@@ -30,7 +30,7 @@ import {
 import { getExtensionsRegistry } from '@superset-ui/core';
 import setupExtensions from 'src/setup/setupExtensions';
 import * as hooks from 'src/views/CRUD/hooks';
-import { DatabaseObject, CONFIGURATION_METHOD } from '../types';
+import { DatabaseObject, ConfigurationMethod } from '../types';
 import DatabaseModal, {
   dbReducer,
   DBReducerActionType,
@@ -304,7 +304,7 @@ fetchMock.post(VALIDATE_PARAMS_ENDPOINT, {
 const databaseFixture: DatabaseObject = {
   id: 123,
   backend: 'postgres',
-  configuration_method: CONFIGURATION_METHOD.DYNAMIC_FORM,
+  configuration_method: ConfigurationMethod.DynamicForm,
   database_name: 'Postgres',
   name: 'PostgresDB',
   is_managed_externally: false,
@@ -1639,14 +1639,14 @@ describe('DatabaseModal', () => {
 
 describe('dbReducer', () => {
   test('it will reset state to null', () => {
-    const action: DBReducerActionType = { type: ActionType.reset };
+    const action: DBReducerActionType = { type: ActionType.Reset };
     const currentState = dbReducer(databaseFixture, action);
     expect(currentState).toBeNull();
   });
 
   test('it will set state to payload from fetched', () => {
     const action: DBReducerActionType = {
-      type: ActionType.fetched,
+      type: ActionType.Fetched,
       payload: databaseFixture,
     };
     const currentState = dbReducer({}, action);
@@ -1661,7 +1661,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra editor', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraEditorChange,
+      type: ActionType.ExtraEditorChange,
       payload: { name: 'foo', json: JSON.stringify({ bar: 1 }) },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1674,7 +1674,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from editor', () => {
     const action: DBReducerActionType = {
-      type: ActionType.editorChange,
+      type: ActionType.EditorChange,
       payload: { name: 'foo', json: JSON.stringify({ bar: 1 }) },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1687,7 +1687,7 @@ describe('dbReducer', () => {
 
   test('it will add extra payload to existing extra data', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraEditorChange,
+      type: ActionType.ExtraEditorChange,
       payload: { name: 'foo', json: JSON.stringify({ bar: 1 }) },
     };
     // extra should be a string
@@ -1707,7 +1707,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'foo', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1721,7 +1721,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change when checkbox', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'foo', type: 'checkbox', checked: true },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1735,7 +1735,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change when schema_cache_timeout', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schema_cache_timeout', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1749,7 +1749,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change when table_cache_timeout', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'table_cache_timeout', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1763,7 +1763,7 @@ describe('dbReducer', () => {
 
   test('it will overwrite state to payload from extra input change when table_cache_timeout', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'table_cache_timeout', value: 'bar' },
     };
     const currentState = dbReducer(
@@ -1784,7 +1784,7 @@ describe('dbReducer', () => {
   test(`it will set state to payload from extra
   input change when schemas_allowed_for_file_upload`, () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schemas_allowed_for_file_upload', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1799,7 +1799,7 @@ describe('dbReducer', () => {
   test(`it will overwrite state to payload from extra
   input change when schemas_allowed_for_file_upload`, () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schemas_allowed_for_file_upload', value: 'bar' },
     };
     const currentState = dbReducer(
@@ -1821,7 +1821,7 @@ describe('dbReducer', () => {
   input change when schemas_allowed_for_file_upload
   with blank list`, () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schemas_allowed_for_file_upload', value: 'bar,' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1835,7 +1835,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from input change', () => {
     const action: DBReducerActionType = {
-      type: ActionType.inputChange,
+      type: ActionType.InputChange,
       payload: { name: 'foo', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1848,7 +1848,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from input change for checkbox', () => {
     const action: DBReducerActionType = {
-      type: ActionType.inputChange,
+      type: ActionType.InputChange,
       payload: { name: 'foo', type: 'checkbox', checked: true },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1861,7 +1861,7 @@ describe('dbReducer', () => {
 
   test('it will change state to payload from input change for checkbox', () => {
     const action: DBReducerActionType = {
-      type: ActionType.inputChange,
+      type: ActionType.InputChange,
       payload: { name: 'allow_ctas', type: 'checkbox', checked: false },
     };
     const currentState = dbReducer(
@@ -1880,7 +1880,7 @@ describe('dbReducer', () => {
 
   test('it will add a parameter', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'host', value: '127.0.0.1' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1895,7 +1895,7 @@ describe('dbReducer', () => {
 
   test('it will add a parameter with existing parameters', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'port', value: '1234' },
     };
     const currentState = dbReducer(
@@ -1919,7 +1919,7 @@ describe('dbReducer', () => {
 
   test('it will change a parameter with existing parameters', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'host', value: 'localhost' },
     };
     const currentState = dbReducer(
@@ -1942,7 +1942,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from parametersChange with catalog', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'name', type: 'catalog-0', value: 'bar' },
     };
     const currentState = dbReducer(
@@ -1963,7 +1963,7 @@ describe('dbReducer', () => {
 
   test('it will add a new catalog array when empty', () => {
     const action: DBReducerActionType = {
-      type: ActionType.addTableCatalogSheet,
+      type: ActionType.AddTableCatalogSheet,
     };
     const currentState = dbReducer(databaseFixture, action);
 
@@ -1975,7 +1975,7 @@ describe('dbReducer', () => {
 
   test('it will add a new catalog array when one exists', () => {
     const action: DBReducerActionType = {
-      type: ActionType.addTableCatalogSheet,
+      type: ActionType.AddTableCatalogSheet,
     };
     const currentState = dbReducer(
       { ...databaseFixture, catalog: [{ name: 'foo', value: 'baz' }] },
@@ -1993,7 +1993,7 @@ describe('dbReducer', () => {
 
   test('it will remove a catalog when one exists', () => {
     const action: DBReducerActionType = {
-      type: ActionType.removeTableCatalogSheet,
+      type: ActionType.RemoveTableCatalogSheet,
       payload: { indexToDelete: 0 },
     };
     const currentState = dbReducer(
@@ -2010,7 +2010,7 @@ describe('dbReducer', () => {
   test('it will add db information when one is selected', () => {
     const { backend, ...db } = databaseFixture;
     const action: DBReducerActionType = {
-      type: ActionType.dbSelected,
+      type: ActionType.DbSelected,
       payload: {
         engine_information: {
           supports_file_upload: true,
@@ -2042,7 +2042,7 @@ describe('dbReducer', () => {
 
   test('it will add a SSH Tunnel config parameter', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersSSHTunnelChange,
+      type: ActionType.ParametersSSHTunnelChange,
       payload: { name: 'server_address', value: '127.0.0.1' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -2057,7 +2057,7 @@ describe('dbReducer', () => {
 
   test('it will add a SSH Tunnel config parameter with existing configs', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersSSHTunnelChange,
+      type: ActionType.ParametersSSHTunnelChange,
       payload: { name: 'server_port', value: '22' },
     };
     const currentState = dbReducer(
@@ -2081,7 +2081,7 @@ describe('dbReducer', () => {
 
   test('it will change a SSH Tunnel config parameter with existing configs', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersSSHTunnelChange,
+      type: ActionType.ParametersSSHTunnelChange,
       payload: { name: 'server_address', value: 'localhost' },
     };
     const currentState = dbReducer(
@@ -2104,7 +2104,7 @@ describe('dbReducer', () => {
 
   test('it will remove the SSH Tunnel config parameters', () => {
     const action: DBReducerActionType = {
-      type: ActionType.removeSSHTunnelConfig,
+      type: ActionType.RemoveSSHTunnelConfig,
     };
     const currentState = dbReducer(databaseFixture, action);
     expect(currentState).toEqual({
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
index 18c93f2bf46..add52181234 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
@@ -61,7 +61,7 @@ import { isEmpty, pick } from 'lodash';
 import {
   DatabaseObject,
   DatabaseForm,
-  CONFIGURATION_METHOD,
+  ConfigurationMethod,
   CatalogObject,
   Engines,
   ExtraJson,
@@ -145,27 +145,27 @@ interface DatabaseModalProps {
 }
 
 export enum ActionType {
-  addTableCatalogSheet,
-  configMethodChange,
-  dbSelected,
-  editorChange,
-  extraEditorChange,
-  extraInputChange,
-  fetched,
-  inputChange,
-  parametersChange,
-  queryChange,
-  removeTableCatalogSheet,
-  reset,
-  textChange,
-  parametersSSHTunnelChange,
-  setSSHTunnelLoginMethod,
-  removeSSHTunnelConfig,
+  AddTableCatalogSheet,
+  ConfigMethodChange,
+  DbSelected,
+  EditorChange,
+  ExtraEditorChange,
+  ExtraInputChange,
+  Fetched,
+  InputChange,
+  ParametersChange,
+  QueryChange,
+  RemoveTableCatalogSheet,
+  Reset,
+  TextChange,
+  ParametersSSHTunnelChange,
+  SetSSHTunnelLoginMethod,
+  RemoveSSHTunnelConfig,
 }
 
 export enum AuthType {
-  password,
-  privateKey,
+  Password,
+  PrivateKey,
 }
 
 interface DBReducerPayloadType {
@@ -180,26 +180,26 @@ interface DBReducerPayloadType {
 export type DBReducerActionType =
   | {
       type:
-        | ActionType.extraEditorChange
-        | ActionType.extraInputChange
-        | ActionType.textChange
-        | ActionType.queryChange
-        | ActionType.inputChange
-        | ActionType.editorChange
-        | ActionType.parametersChange
-        | ActionType.parametersSSHTunnelChange;
+        | ActionType.ExtraEditorChange
+        | ActionType.ExtraInputChange
+        | ActionType.TextChange
+        | ActionType.QueryChange
+        | ActionType.InputChange
+        | ActionType.EditorChange
+        | ActionType.ParametersChange
+        | ActionType.ParametersSSHTunnelChange;
       payload: DBReducerPayloadType;
     }
   | {
-      type: ActionType.fetched;
+      type: ActionType.Fetched;
       payload: Partial<DatabaseObject>;
     }
   | {
-      type: ActionType.dbSelected;
+      type: ActionType.DbSelected;
       payload: {
         database_name?: string;
         engine?: string;
-        configuration_method: CONFIGURATION_METHOD;
+        configuration_method: ConfigurationMethod;
         engine_information?: {};
         driver?: string;
         sqlalchemy_uri_placeholder?: string;
@@ -207,26 +207,26 @@ export type DBReducerActionType =
     }
   | {
       type:
-        | ActionType.reset
-        | ActionType.addTableCatalogSheet
-        | ActionType.removeSSHTunnelConfig;
+        | ActionType.Reset
+        | ActionType.AddTableCatalogSheet
+        | ActionType.RemoveSSHTunnelConfig;
     }
   | {
-      type: ActionType.removeTableCatalogSheet;
+      type: ActionType.RemoveTableCatalogSheet;
       payload: {
         indexToDelete: number;
       };
     }
   | {
-      type: ActionType.configMethodChange;
+      type: ActionType.ConfigMethodChange;
       payload: {
         database_name?: string;
         engine?: string;
-        configuration_method: CONFIGURATION_METHOD;
+        configuration_method: ConfigurationMethod;
       };
     }
   | {
-      type: ActionType.setSSHTunnelLoginMethod;
+      type: ActionType.SetSSHTunnelLoginMethod;
       payload: {
         login_method: AuthType;
       };
@@ -251,7 +251,7 @@ export function dbReducer(
   const extraJson: ExtraJson = JSON.parse(trimmedState.extra || '{}');
 
   switch (action.type) {
-    case ActionType.extraEditorChange:
+    case ActionType.ExtraEditorChange:
       // "extra" payload in state is a string
       try {
         // we don't want to stringify encoded strings twice
@@ -266,7 +266,7 @@ export function dbReducer(
           [action.payload.name]: actionPayloadJson,
         }),
       };
-    case ActionType.extraInputChange:
+    case ActionType.ExtraInputChange:
       // "extra" payload in state is a string
       if (
         action.payload.name === 'schema_cache_timeout' ||
@@ -329,7 +329,7 @@ export function dbReducer(
               : action.payload.value,
         }),
       };
-    case ActionType.inputChange:
+    case ActionType.InputChange:
       if (action.payload.type === 'checkbox') {
         return {
           ...trimmedState,
@@ -340,7 +340,7 @@ export function dbReducer(
         ...trimmedState,
         [action.payload.name]: action.payload.value,
       };
-    case ActionType.parametersChange:
+    case ActionType.ParametersChange:
       // catalog params will always have a catalog state for
       // dbs that use a catalog, i.e., gsheets, even if the
       // fields are empty strings
@@ -382,7 +382,7 @@ export function dbReducer(
         },
       };
 
-    case ActionType.parametersSSHTunnelChange:
+    case ActionType.ParametersSSHTunnelChange:
       return {
         ...trimmedState,
         ssh_tunnel: {
@@ -390,7 +390,7 @@ export function dbReducer(
           [action.payload.name]: action.payload.value,
         },
       };
-    case ActionType.setSSHTunnelLoginMethod: {
+    case ActionType.SetSSHTunnelLoginMethod: {
       let ssh_tunnel = {};
       if (trimmedState?.ssh_tunnel) {
         // remove any attributes that are considered sensitive
@@ -401,7 +401,7 @@ export function dbReducer(
           'username',
         ]);
       }
-      if (action.payload.login_method === AuthType.privateKey) {
+      if (action.payload.login_method === AuthType.PrivateKey) {
         return {
           ...trimmedState,
           ssh_tunnel: {
@@ -412,7 +412,7 @@ export function dbReducer(
           },
         };
       }
-      if (action.payload.login_method === AuthType.password) {
+      if (action.payload.login_method === AuthType.Password) {
         return {
           ...trimmedState,
           ssh_tunnel: {
@@ -425,12 +425,12 @@ export function dbReducer(
         ...trimmedState,
       };
     }
-    case ActionType.removeSSHTunnelConfig:
+    case ActionType.RemoveSSHTunnelConfig:
       return {
         ...trimmedState,
         ssh_tunnel: undefined,
       };
-    case ActionType.addTableCatalogSheet:
+    case ActionType.AddTableCatalogSheet:
       if (trimmedState.catalog !== undefined) {
         return {
           ...trimmedState,
@@ -441,17 +441,17 @@ export function dbReducer(
         ...trimmedState,
         catalog: [{ name: '', value: '' }],
       };
-    case ActionType.removeTableCatalogSheet:
+    case ActionType.RemoveTableCatalogSheet:
       trimmedState.catalog?.splice(action.payload.indexToDelete, 1);
       return {
         ...trimmedState,
       };
-    case ActionType.editorChange:
+    case ActionType.EditorChange:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.json,
       };
-    case ActionType.queryChange:
+    case ActionType.QueryChange:
       return {
         ...trimmedState,
         parameters: {
@@ -460,12 +460,12 @@ export function dbReducer(
         },
         query_input: action.payload.value,
       };
-    case ActionType.textChange:
+    case ActionType.TextChange:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
       };
-    case ActionType.fetched:
+    case ActionType.Fetched:
       // convert query to a string and store in query_input
       query = action.payload?.parameters?.query || {};
       query_input = Object.entries(query)
@@ -474,8 +474,7 @@ export function dbReducer(
 
       if (
         action.payload.masked_encrypted_extra &&
-        action.payload.configuration_method ===
-          CONFIGURATION_METHOD.DYNAMIC_FORM
+        action.payload.configuration_method === ConfigurationMethod.DynamicForm
       ) {
         // "extra" payload from the api is a string
         const extraJsonPayload: ExtraJson = {
@@ -510,19 +509,19 @@ export function dbReducer(
         query_input,
       };
 
-    case ActionType.dbSelected:
+    case ActionType.DbSelected:
       // set initial state for blank form
       return {
         ...action.payload,
         extra: DEFAULT_EXTRA,
         expose_in_sqllab: true,
       };
-    case ActionType.configMethodChange:
+    case ActionType.ConfigMethodChange:
       return {
         ...action.payload,
       };
 
-    case ActionType.reset:
+    case ActionType.Reset:
     default:
       return null;
   }
@@ -626,12 +625,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     ) as DatabaseObject
   )?.engine_information?.disable_ssh_tunneling;
   const isSSHTunneling =
-    isFeatureEnabled(FeatureFlag.SSH_TUNNELING) &&
-    !disableSSHTunnelingForEngine;
+    isFeatureEnabled(FeatureFlag.SshTunneling) && !disableSSHTunnelingForEngine;
   const hasAlert =
     connectionAlert || !!(db?.engine && engineSpecificAlertMapping[db.engine]);
   const useSqlAlchemyForm =
-    db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI;
+    db?.configuration_method === ConfigurationMethod.SqlalchemyUri;
   const useTabLayout = isEditMode || useSqlAlchemyForm;
   const isDynamic = (engine: string | undefined) =>
     availableDbs?.databases?.find(
@@ -690,7 +688,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   };
 
   const onClose = () => {
-    setDB({ type: ActionType.reset });
+    setDB({ type: ActionType.Reset });
     setHasConnectedDb(false);
     setValidationErrors(null); // reset validation errors on close
     clearError();
@@ -752,7 +750,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     // Clone DB object
     const dbToUpdate = { ...(db || {}) };
 
-    if (dbToUpdate.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM) {
+    if (dbToUpdate.configuration_method === ConfigurationMethod.DynamicForm) {
       // Validate DB before saving
       if (dbToUpdate?.parameters?.catalog) {
         // need to stringify gsheets catalog to allow it to be serialized
@@ -836,7 +834,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       const result = await updateResource(
         db.id as number,
         dbToUpdate as DatabaseObject,
-        dbToUpdate.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM, // onShow toast on SQLA Forms
+        dbToUpdate.configuration_method === ConfigurationMethod.DynamicForm, // onShow toast on SQLA Forms
       );
       if (result) {
         if (onDatabaseAdd) onDatabaseAdd();
@@ -861,7 +859,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       // Create
       const dbId = await createResource(
         dbToUpdate as DatabaseObject,
-        dbToUpdate.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM, // onShow toast on SQLA Forms
+        dbToUpdate.configuration_method === ConfigurationMethod.DynamicForm, // onShow toast on SQLA Forms
       );
       if (dbId) {
         setHasConnectedDb(true);
@@ -934,10 +932,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     if (database_name === 'Other') {
       // Allow users to connect to DB via legacy SQLA form
       setDB({
-        type: ActionType.dbSelected,
+        type: ActionType.DbSelected,
         payload: {
           database_name,
-          configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI,
+          configuration_method: ConfigurationMethod.SqlalchemyUri,
           engine: undefined,
           engine_information: {
             supports_file_upload: true,
@@ -957,13 +955,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       } = selectedDbModel;
       const isDynamic = parameters !== undefined;
       setDB({
-        type: ActionType.dbSelected,
+        type: ActionType.DbSelected,
         payload: {
           database_name,
           engine,
           configuration_method: isDynamic
-            ? CONFIGURATION_METHOD.DYNAMIC_FORM
-            : CONFIGURATION_METHOD.SQLALCHEMY_URI,
+            ? ConfigurationMethod.DynamicForm
+            : ConfigurationMethod.SqlalchemyUri,
           engine_information,
           driver: default_driver,
           sqlalchemy_uri_placeholder,
@@ -972,7 +970,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
       if (engine === Engines.GSheet) {
         // only create a catalog if the DB is Google Sheets
-        setDB({ type: ActionType.addTableCatalogSheet });
+        setDB({ type: ActionType.AddTableCatalogSheet });
       }
     }
   };
@@ -1086,7 +1084,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       setSSHTunnelPrivateKeys({});
       setSSHTunnelPrivateKeyPasswords({});
     }
-    setDB({ type: ActionType.reset });
+    setDB({ type: ActionType.Reset });
     setFileList([]);
   };
 
@@ -1238,7 +1236,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   useEffect(() => {
     if (dbFetched) {
       setDB({
-        type: ActionType.fetched,
+        type: ActionType.Fetched,
         payload: dbFetched,
       });
       // keep a copy of the name separate for display purposes
@@ -1545,7 +1543,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const fetchAndSetDB = () => {
     setLoading(true);
     fetchResource(dbFetched?.id as number).then(r => {
-      setItem(LocalStorageKeys.db, r);
+      setItem(LocalStorageKeys.Database, r);
     });
   };
 
@@ -1557,7 +1555,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }: {
         target: HTMLInputElement | HTMLTextAreaElement;
       }) =>
-        onChange(ActionType.parametersSSHTunnelChange, {
+        onChange(ActionType.ParametersSSHTunnelChange, {
           type: target.type,
           name: target.name,
           value: target.value,
@@ -1565,7 +1563,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }
       setSSHTunnelLoginMethod={(method: AuthType) =>
         setDB({
-          type: ActionType.setSSHTunnelLoginMethod,
+          type: ActionType.SetSSHTunnelLoginMethod,
           payload: { login_method: method },
         })
       }
@@ -1605,28 +1603,28 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         sslForced={false}
         dbModel={dbModel}
         onAddTableCatalog={() => {
-          setDB({ type: ActionType.addTableCatalogSheet });
+          setDB({ type: ActionType.AddTableCatalogSheet });
         }}
         onQueryChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.queryChange, {
+          onChange(ActionType.QueryChange, {
             name: target.name,
             value: target.value,
           })
         }
         onExtraInputChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.extraInputChange, {
+          onChange(ActionType.ExtraInputChange, {
             name: target.name,
             value: target.value,
           })
         }
         onRemoveTableCatalog={(idx: number) => {
           setDB({
-            type: ActionType.removeTableCatalogSheet,
+            type: ActionType.RemoveTableCatalogSheet,
             payload: { indexToDelete: idx },
           });
         }}
         onParametersChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.parametersChange, {
+          onChange(ActionType.ParametersChange, {
             type: target.type,
             name: target.name,
             checked: target.checked,
@@ -1634,7 +1632,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           })
         }
         onChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.textChange, {
+          onChange(ActionType.TextChange, {
             name: target.name,
             value: target.value,
           })
@@ -1657,7 +1655,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           extraExtension={dbConfigExtraExtension}
           db={db as DatabaseObject}
           onInputChange={({ target }: { target: HTMLInputElement }) =>
-            onChange(ActionType.inputChange, {
+            onChange(ActionType.InputChange, {
               type: target.type,
               name: target.name,
               checked: target.checked,
@@ -1665,16 +1663,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             })
           }
           onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
-            onChange(ActionType.textChange, {
+            onChange(ActionType.TextChange, {
               name: target.name,
               value: target.value,
             })
           }
           onEditorChange={(payload: { name: string; json: any }) =>
-            onChange(ActionType.editorChange, payload)
+            onChange(ActionType.EditorChange, payload)
           }
           onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
-            onChange(ActionType.extraInputChange, {
+            onChange(ActionType.ExtraInputChange, {
               type: target.type,
               name: target.name,
               checked: target.checked,
@@ -1682,7 +1680,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             });
           }}
           onExtraEditorChange={(payload: { name: string; json: any }) =>
-            onChange(ActionType.extraEditorChange, payload)
+            onChange(ActionType.ExtraEditorChange, payload)
           }
         />
       );
@@ -1782,7 +1780,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <SqlAlchemyForm
                 db={db as DatabaseObject}
                 onInputChange={({ target }: { target: HTMLInputElement }) =>
-                  onChange(ActionType.inputChange, {
+                  onChange(ActionType.InputChange, {
                     type: target.type,
                     name: target.name,
                     checked: target.checked,
@@ -1810,11 +1808,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     buttonStyle="link"
                     onClick={() =>
                       setDB({
-                        type: ActionType.configMethodChange,
+                        type: ActionType.ConfigMethodChange,
                         payload: {
                           database_name: db?.database_name,
-                          configuration_method:
-                            CONFIGURATION_METHOD.DYNAMIC_FORM,
+                          configuration_method: ConfigurationMethod.DynamicForm,
                           engine: db?.engine,
                         },
                       })
@@ -1869,7 +1866,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             extraExtension={dbConfigExtraExtension}
             db={db as DatabaseObject}
             onInputChange={({ target }: { target: HTMLInputElement }) =>
-              onChange(ActionType.inputChange, {
+              onChange(ActionType.InputChange, {
                 type: target.type,
                 name: target.name,
                 checked: target.checked,
@@ -1877,16 +1874,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               })
             }
             onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
-              onChange(ActionType.textChange, {
+              onChange(ActionType.TextChange, {
                 name: target.name,
                 value: target.value,
               })
             }
             onEditorChange={(payload: { name: string; json: any }) =>
-              onChange(ActionType.editorChange, payload)
+              onChange(ActionType.EditorChange, payload)
             }
             onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
-              onChange(ActionType.extraInputChange, {
+              onChange(ActionType.ExtraInputChange, {
                 type: target.type,
                 name: target.name,
                 checked: target.checked,
@@ -1894,7 +1891,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               });
             }}
             onExtraEditorChange={(payload: { name: string; json: any }) => {
-              onChange(ActionType.extraEditorChange, payload);
+              onChange(ActionType.ExtraEditorChange, payload);
             }}
           />
         </Tabs.TabPane>
@@ -1993,11 +1990,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                         buttonStyle="link"
                         onClick={() =>
                           setDB({
-                            type: ActionType.configMethodChange,
+                            type: ActionType.ConfigMethodChange,
                             payload: {
                               engine: db.engine,
                               configuration_method:
-                                CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                                ConfigurationMethod.SqlalchemyUri,
                               database_name: db.database_name,
                             },
                           })
diff --git a/superset-frontend/src/features/databases/types.ts b/superset-frontend/src/features/databases/types.ts
index 1d616fa13c0..50e535f9b1f 100644
--- a/superset-frontend/src/features/databases/types.ts
+++ b/superset-frontend/src/features/databases/types.ts
@@ -41,7 +41,7 @@ export type DatabaseObject = {
   backend?: string;
   changed_on?: string;
   changed_on_delta_humanized?: string;
-  configuration_method: CONFIGURATION_METHOD;
+  configuration_method: ConfigurationMethod;
   created_by?: null | DatabaseUser;
   database_name: string;
   driver: string;
@@ -199,9 +199,9 @@ export type DatabaseForm = {
 
 // the values should align with the database
 // model enum in superset/superset/models/core.py
-export enum CONFIGURATION_METHOD {
-  SQLALCHEMY_URI = 'sqlalchemy_form',
-  DYNAMIC_FORM = 'dynamic_form',
+export enum ConfigurationMethod {
+  SqlalchemyUri = 'sqlalchemy_form',
+  DynamicForm = 'dynamic_form',
 }
 
 export enum Engines {
diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
index c49e48d3fea..38563b6c9be 100644
--- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -290,7 +290,7 @@ const DatasetPanel = ({
               <TableScrollContainer>
                 <Table
                   loading={loading}
-                  size={TableSize.SMALL}
+                  size={TableSize.Small}
                   columns={tableColumnDefinition}
                   data={columnList}
                   pageSizeOptions={pageSizeOptions}
@@ -303,7 +303,7 @@ const DatasetPanel = ({
               <TableScrollContainer>
                 <Table
                   loading={loading}
-                  size={TableSize.SMALL}
+                  size={TableSize.Small}
                   columns={tableColumnDefinition}
                   data={columnList}
                   pageSizeOptions={pageSizeOptions}
diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
index a744381df82..7238b6b061d 100644
--- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
@@ -161,7 +161,7 @@ const useDatasetChartRecords = (datasetId: string) => {
     () => [
       {
         id: 'datasource_id',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         value: datasetId,
       },
     ],
@@ -241,7 +241,7 @@ const DatasetUsage = ({ datasetId }: DatasetUsageProps) => {
       <Table
         columns={columns}
         data={data}
-        size={TableSize.MIDDLE}
+        size={TableSize.Middle}
         defaultPageSize={DEFAULT_PAGE_SIZE}
         recordCount={recordCount}
         loading={loading}
diff --git a/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx b/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
index 78669b2df2d..57572e185e1 100644
--- a/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
@@ -75,7 +75,7 @@ export default function Header({
     placeholder: DEFAULT_TITLE,
     onSave: (newDatasetName: string) => {
       setDataset({
-        type: DatasetActionType.changeDataset,
+        type: DatasetActionType.ChangeDataset,
         payload: { name: 'dataset_name', value: newDatasetName },
       });
     },
diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
index 1be10f4a052..093a65626ba 100644
--- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
@@ -125,27 +125,27 @@ export default function LeftPanel({
 
   const setDatabase = useCallback(
     (db: Partial<DatabaseObject>) => {
-      setDataset({ type: DatasetActionType.selectDatabase, payload: { db } });
+      setDataset({ type: DatasetActionType.SelectDatabase, payload: { db } });
     },
     [setDataset],
   );
   const setSchema = (schema: string) => {
     if (schema) {
       setDataset({
-        type: DatasetActionType.selectSchema,
+        type: DatasetActionType.SelectSchema,
         payload: { name: 'schema', value: schema },
       });
     }
   };
   const setTable = (tableName: string) => {
     setDataset({
-      type: DatasetActionType.selectTable,
+      type: DatasetActionType.SelectTable,
       payload: { name: 'table_name', value: tableName },
     });
   };
   useEffect(() => {
     const currentUserSelectedDb = getItem(
-      LocalStorageKeys.db,
+      LocalStorageKeys.Database,
       null,
     ) as DatabaseObject;
     if (currentUserSelectedDb) {
diff --git a/superset-frontend/src/features/datasets/AddDataset/types.tsx b/superset-frontend/src/features/datasets/AddDataset/types.tsx
index 89473e5426c..998d315940e 100644
--- a/superset-frontend/src/features/datasets/AddDataset/types.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/types.tsx
@@ -19,10 +19,10 @@
 import { DatabaseObject } from 'src/components/DatabaseSelector';
 
 export enum DatasetActionType {
-  selectDatabase,
-  selectSchema,
-  selectTable,
-  changeDataset,
+  SelectDatabase,
+  SelectSchema,
+  SelectTable,
+  ChangeDataset,
 }
 
 export interface DatasetObject {
@@ -44,13 +44,13 @@ export type Schema = {
 
 export type DSReducerActionType =
   | {
-      type: DatasetActionType.selectDatabase;
+      type: DatasetActionType.SelectDatabase;
       payload: Partial<DatasetObject>;
     }
   | {
       type:
-        | DatasetActionType.changeDataset
-        | DatasetActionType.selectSchema
-        | DatasetActionType.selectTable;
+        | DatasetActionType.ChangeDataset
+        | DatasetActionType.SelectSchema
+        | DatasetActionType.SelectTable;
       payload: DatasetReducerPayloadType;
     };
diff --git a/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx b/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
index 8c2f83977ac..5a5281720a9 100644
--- a/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
+++ b/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
@@ -38,7 +38,7 @@ export const useDatasetMetadataBar = ({
   const theme = useTheme();
   const [result, setResult] = useState<Dataset>();
   const [status, setStatus] = useState<ResourceStatus>(
-    datasetProps ? ResourceStatus.COMPLETE : ResourceStatus.LOADING,
+    datasetProps ? ResourceStatus.Complete : ResourceStatus.Loading,
   );
 
   useEffect(() => {
@@ -48,10 +48,10 @@ export const useDatasetMetadataBar = ({
       })
         .then(({ json: { result } }) => {
           setResult(result);
-          setStatus(ResourceStatus.COMPLETE);
+          setStatus(ResourceStatus.Complete);
         })
         .catch(() => {
-          setStatus(ResourceStatus.ERROR);
+          setStatus(ResourceStatus.Error);
         });
     }
   }, [datasetId, datasetProps]);
@@ -82,23 +82,23 @@ export const useDatasetMetadataBar = ({
           ? owners.map(owner => `${owner.first_name} ${owner.last_name}`)
           : [notAvailable];
       items.push({
-        type: MetadataType.TABLE,
+        type: MetadataType.Table,
         title: table_name,
       });
       items.push({
-        type: MetadataType.LAST_MODIFIED,
+        type: MetadataType.LastModified,
         value: changed_on_humanized,
         modifiedBy,
       });
       items.push({
-        type: MetadataType.OWNER,
+        type: MetadataType.Owner,
         createdBy,
         owners: formattedOwners,
         createdOn: created_on_humanized,
       });
       if (description) {
         items.push({
-          type: MetadataType.DESCRIPTION,
+          type: MetadataType.Description,
           value: description,
         });
       }
@@ -110,10 +110,10 @@ export const useDatasetMetadataBar = ({
           margin-bottom: ${theme.gridUnit * 4}px;
         `}
       >
-        {status === ResourceStatus.COMPLETE && (
+        {status === ResourceStatus.Complete && (
           <MetadataBar items={items} tooltipPlacement="bottom" />
         )}
-        {status === ResourceStatus.ERROR && (
+        {status === ResourceStatus.Error && (
           <Alert
             type="error"
             message={t('There was an error loading the dataset metadata')}
diff --git a/superset-frontend/src/features/home/ActivityTable.tsx b/superset-frontend/src/features/home/ActivityTable.tsx
index b3f43eac5e0..2bedeb43bae 100644
--- a/superset-frontend/src/features/home/ActivityTable.tsx
+++ b/superset-frontend/src/features/home/ActivityTable.tsx
@@ -151,7 +151,7 @@ export default function ActivityTable({
       label: t('Edited'),
       onClick: () => {
         setActiveChild(TableTab.Edited);
-        setItem(LocalStorageKeys.homepage_activity_filter, TableTab.Edited);
+        setItem(LocalStorageKeys.HomepageActivityFilter, TableTab.Edited);
       },
     },
     {
@@ -159,7 +159,7 @@ export default function ActivityTable({
       label: t('Created'),
       onClick: () => {
         setActiveChild(TableTab.Created);
-        setItem(LocalStorageKeys.homepage_activity_filter, TableTab.Created);
+        setItem(LocalStorageKeys.HomepageActivityFilter, TableTab.Created);
       },
     },
   ];
@@ -170,7 +170,7 @@ export default function ActivityTable({
       label: t('Viewed'),
       onClick: () => {
         setActiveChild(TableTab.Viewed);
-        setItem(LocalStorageKeys.homepage_activity_filter, TableTab.Viewed);
+        setItem(LocalStorageKeys.HomepageActivityFilter, TableTab.Viewed);
       },
     });
   }
diff --git a/superset-frontend/src/features/home/ChartTable.tsx b/superset-frontend/src/features/home/ChartTable.tsx
index c84a0c81c23..65b904a485e 100644
--- a/superset-frontend/src/features/home/ChartTable.tsx
+++ b/superset-frontend/src/features/home/ChartTable.tsx
@@ -72,7 +72,7 @@ function ChartTable({
 }: ChartTableProps) {
   const history = useHistory();
   const initialTab = getItem(
-    LocalStorageKeys.homepage_chart_filter,
+    LocalStorageKeys.HomepageChartFilter,
     TableTab.Other,
   );
 
@@ -145,7 +145,7 @@ function ChartTable({
       label: t('Favorite'),
       onClick: () => {
         setActiveTab(TableTab.Favorite);
-        setItem(LocalStorageKeys.homepage_chart_filter, TableTab.Favorite);
+        setItem(LocalStorageKeys.HomepageChartFilter, TableTab.Favorite);
       },
     },
     {
@@ -153,7 +153,7 @@ function ChartTable({
       label: t('Mine'),
       onClick: () => {
         setActiveTab(TableTab.Mine);
-        setItem(LocalStorageKeys.homepage_chart_filter, TableTab.Mine);
+        setItem(LocalStorageKeys.HomepageChartFilter, TableTab.Mine);
       },
     },
   ];
@@ -163,7 +163,7 @@ function ChartTable({
       label: otherTabTitle,
       onClick: () => {
         setActiveTab(TableTab.Other);
-        setItem(LocalStorageKeys.homepage_chart_filter, TableTab.Other);
+        setItem(LocalStorageKeys.HomepageChartFilter, TableTab.Other);
       },
     });
   }
diff --git a/superset-frontend/src/features/home/DashboardTable.tsx b/superset-frontend/src/features/home/DashboardTable.tsx
index 36ea29e9556..3cb2716322c 100644
--- a/superset-frontend/src/features/home/DashboardTable.tsx
+++ b/superset-frontend/src/features/home/DashboardTable.tsx
@@ -57,7 +57,7 @@ function DashboardTable({
 }: DashboardTableProps) {
   const history = useHistory();
   const defaultTab = getItem(
-    LocalStorageKeys.homepage_dashboard_filter,
+    LocalStorageKeys.HomepageDashboardFilter,
     TableTab.Other,
   );
 
@@ -156,7 +156,7 @@ function DashboardTable({
       label: t('Favorite'),
       onClick: () => {
         setActiveTab(TableTab.Favorite);
-        setItem(LocalStorageKeys.homepage_dashboard_filter, TableTab.Favorite);
+        setItem(LocalStorageKeys.HomepageDashboardFilter, TableTab.Favorite);
       },
     },
     {
@@ -164,7 +164,7 @@ function DashboardTable({
       label: t('Mine'),
       onClick: () => {
         setActiveTab(TableTab.Mine);
-        setItem(LocalStorageKeys.homepage_dashboard_filter, TableTab.Mine);
+        setItem(LocalStorageKeys.HomepageDashboardFilter, TableTab.Mine);
       },
     },
   ];
@@ -175,7 +175,7 @@ function DashboardTable({
       label: otherTabTitle,
       onClick: () => {
         setActiveTab(TableTab.Other);
-        setItem(LocalStorageKeys.homepage_dashboard_filter, TableTab.Other);
+        setItem(LocalStorageKeys.HomepageDashboardFilter, TableTab.Other);
       },
     });
   }
diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx
index 67b72fc515b..4cb98ff3650 100644
--- a/superset-frontend/src/features/home/Menu.tsx
+++ b/superset-frontend/src/features/home/Menu.tsx
@@ -209,11 +209,11 @@ export function Menu({
     return () => window.removeEventListener('resize', windowResize);
   }, []);
 
-  enum paths {
-    EXPLORE = '/explore',
-    DASHBOARD = '/dashboard',
-    CHART = '/chart',
-    DATASETS = '/tablemodelview',
+  enum Paths {
+    Explore = '/explore',
+    Dashboard = '/dashboard',
+    Chart = '/chart',
+    Datasets = '/tablemodelview',
   }
 
   const defaultTabSelection: string[] = [];
@@ -222,13 +222,13 @@ export function Menu({
   useEffect(() => {
     const path = location.pathname;
     switch (true) {
-      case path.startsWith(paths.DASHBOARD):
+      case path.startsWith(Paths.Dashboard):
         setActiveTabs(['Dashboards']);
         break;
-      case path.startsWith(paths.CHART) || path.startsWith(paths.EXPLORE):
+      case path.startsWith(Paths.Chart) || path.startsWith(Paths.Explore):
         setActiveTabs(['Charts']);
         break;
-      case path.startsWith(paths.DATASETS):
+      case path.startsWith(Paths.Datasets):
         setActiveTabs(['Datasets']);
         break;
       default:
diff --git a/superset-frontend/src/features/home/RightMenu.test.tsx b/superset-frontend/src/features/home/RightMenu.test.tsx
index d823b378954..05ddc3e653b 100644
--- a/superset-frontend/src/features/home/RightMenu.test.tsx
+++ b/superset-frontend/src/features/home/RightMenu.test.tsx
@@ -38,17 +38,17 @@ const dropdownItems = [
     childs: [
       {
         label: 'Connect database',
-        name: GlobalMenuDataOptions.DB_CONNECTION,
+        name: GlobalMenuDataOptions.DbConnection,
         perm: true,
       },
       {
         label: 'Create dataset',
-        name: GlobalMenuDataOptions.DATASET_CREATION,
+        name: GlobalMenuDataOptions.DatasetCreation,
         perm: true,
       },
       {
         label: 'Connect Google Sheet',
-        name: GlobalMenuDataOptions.GOOGLE_SHEETS,
+        name: GlobalMenuDataOptions.GoogleSheets,
         perm: true,
       },
       {
diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx
index 20e1d525b3d..438ca14197a 100644
--- a/superset-frontend/src/features/home/RightMenu.tsx
+++ b/superset-frontend/src/features/home/RightMenu.tsx
@@ -172,18 +172,18 @@ const RightMenu = ({
       childs: [
         {
           label: t('Connect database'),
-          name: GlobalMenuDataOptions.DB_CONNECTION,
+          name: GlobalMenuDataOptions.DbConnection,
           perm: canDatabase && !nonExamplesDBConnected,
         },
         {
           label: t('Create dataset'),
-          name: GlobalMenuDataOptions.DATASET_CREATION,
+          name: GlobalMenuDataOptions.DatasetCreation,
           url: '/dataset/add/',
           perm: canDataset && nonExamplesDBConnected,
         },
         {
           label: t('Connect Google Sheet'),
-          name: GlobalMenuDataOptions.GOOGLE_SHEETS,
+          name: GlobalMenuDataOptions.GoogleSheets,
           perm: canDatabase && HAS_GSHEETS_INSTALLED,
         },
         {
@@ -284,9 +284,9 @@ const RightMenu = ({
   );
 
   const handleMenuSelection = (itemChose: any) => {
-    if (itemChose.key === GlobalMenuDataOptions.DB_CONNECTION) {
+    if (itemChose.key === GlobalMenuDataOptions.DbConnection) {
       setShowDatabaseModal(true);
-    } else if (itemChose.key === GlobalMenuDataOptions.GOOGLE_SHEETS) {
+    } else if (itemChose.key === GlobalMenuDataOptions.GoogleSheets) {
       setShowDatabaseModal(true);
       setEngine('Google Sheets');
     }
diff --git a/superset-frontend/src/features/home/types.ts b/superset-frontend/src/features/home/types.ts
index 59a3c2668ff..1c7eebfb77e 100644
--- a/superset-frontend/src/features/home/types.ts
+++ b/superset-frontend/src/features/home/types.ts
@@ -48,7 +48,7 @@ export interface RightMenuProps {
 }
 
 export enum GlobalMenuDataOptions {
-  GOOGLE_SHEETS = 'gsheets',
-  DB_CONNECTION = 'dbconnection',
-  DATASET_CREATION = 'datasetCreation',
+  GoogleSheets = 'gsheets',
+  DbConnection = 'dbconnection',
+  DatasetCreation = 'datasetCreation',
 }
diff --git a/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx b/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx
index f6501877c76..778f878c6b2 100644
--- a/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx
+++ b/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx
@@ -47,7 +47,7 @@ const mockQueries: QueryObject[] = [...new Array(3)].map((_, i) => ({
     { schema: 'foo', table: 'table' },
     { schema: 'bar', table: 'table_2' },
   ],
-  status: QueryState.SUCCESS,
+  status: QueryState.Success,
   tab_name: 'Main Tab',
   user: {
     first_name: 'cool',
diff --git a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx
index ea1d823d249..249c6667efa 100644
--- a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx
@@ -133,7 +133,7 @@ describe('Header Report Dropdown', () => {
       .spyOn(featureFlags, 'isFeatureEnabled')
       .mockImplementation(
         (featureFlag: featureFlags.FeatureFlag) =>
-          featureFlag === featureFlags.FeatureFlag.ALERT_REPORTS,
+          featureFlag === featureFlags.FeatureFlag.AlertReports,
       );
   });
 
diff --git a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
index 84d19bae695..5553e6361ac 100644
--- a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
@@ -91,8 +91,8 @@ const DropdownItemExtension = extensionsRegistry.get(
 );
 
 export enum CreationMethod {
-  CHARTS = 'charts',
-  DASHBOARDS = 'dashboards',
+  Charts = 'charts',
+  Dashboards = 'dashboards',
 }
 export interface HeaderReportProps {
   dashboardId?: number;
@@ -119,8 +119,8 @@ export default function HeaderReportDropDown({
   const dispatch = useDispatch();
   const report = useSelector<any, AlertObject>(state => {
     const resourceType = dashboardId
-      ? CreationMethod.DASHBOARDS
-      : CreationMethod.CHARTS;
+      ? CreationMethod.Dashboards
+      : CreationMethod.Charts;
     return (
       reportSelector(state, resourceType, dashboardId || chart?.id) ||
       EMPTY_OBJECT
@@ -133,7 +133,7 @@ export default function HeaderReportDropDown({
     UserWithPermissionsAndRoles
   >(state => state.user);
   const canAddReports = () => {
-    if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
+    if (!isFeatureEnabled(FeatureFlag.AlertReports)) {
       return false;
     }
 
@@ -323,7 +323,7 @@ export default function HeaderReportDropDown({
             dashboardId={dashboardId}
             chart={chart}
             creationMethod={
-              dashboardId ? CreationMethod.DASHBOARDS : CreationMethod.CHARTS
+              dashboardId ? CreationMethod.Dashboards : CreationMethod.Charts
             }
           />
           {useTextMenu ? textMenu() : iconMenu()}
diff --git a/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx b/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
index c5508b3c2b2..6767c06e8b7 100644
--- a/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
@@ -56,7 +56,7 @@ describe('Email Report Modal', () => {
     isFeatureEnabledMock = jest
       .spyOn(uiCore, 'isFeatureEnabled')
       .mockImplementation(
-        (featureFlag: FeatureFlag) => featureFlag === FeatureFlag.ALERT_REPORTS,
+        (featureFlag: FeatureFlag) => featureFlag === FeatureFlag.AlertReports,
       );
   });
 
diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx
index ed48a8a6114..37833fedc8c 100644
--- a/superset-frontend/src/features/reports/ReportModal/index.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/index.tsx
@@ -42,7 +42,7 @@ import { ChartState } from 'src/explore/types';
 import {
   ReportCreationMethod,
   ReportObject,
-  NOTIFICATION_FORMATS,
+  NotificationFormats,
 } from 'src/features/reports/types';
 import { reportSelector } from 'src/views/CRUD/hooks';
 import {
@@ -120,8 +120,8 @@ function ReportModal({
   const isTextBasedChart =
     isChart && vizType && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType);
   const defaultNotificationFormat = isTextBasedChart
-    ? NOTIFICATION_FORMATS.TEXT
-    : NOTIFICATION_FORMATS.PNG;
+    ? NotificationFormats.Text
+    : NotificationFormats.PNG;
   const entityName = dashboardName || chartName;
   const initialState: ReportObjectState = useMemo(
     () => ({
@@ -156,8 +156,8 @@ function ReportModal({
   // Report fetch logic
   const report = useSelector<any, ReportObject>(state => {
     const resourceType = dashboardId
-      ? CreationMethod.DASHBOARDS
-      : CreationMethod.CHARTS;
+      ? CreationMethod.Dashboards
+      : CreationMethod.Charts;
     return (
       reportSelector(state, resourceType, dashboardId || chart?.id) ||
       EMPTY_OBJECT
@@ -253,14 +253,14 @@ function ReportModal({
           value={currentReport.report_format || defaultNotificationFormat}
         >
           {isTextBasedChart && (
-            <StyledRadio value={NOTIFICATION_FORMATS.TEXT}>
+            <StyledRadio value={NotificationFormats.Text}>
               {t('Text embedded in email')}
             </StyledRadio>
           )}
-          <StyledRadio value={NOTIFICATION_FORMATS.PNG}>
+          <StyledRadio value={NotificationFormats.PNG}>
             {t('Image (PNG) embedded in email')}
           </StyledRadio>
-          <StyledRadio value={NOTIFICATION_FORMATS.CSV}>
+          <StyledRadio value={NotificationFormats.CSV}>
             {t('Formatted CSV attached in email')}
           </StyledRadio>
         </StyledRadioGroup>
diff --git a/superset-frontend/src/features/reports/types.ts b/superset-frontend/src/features/reports/types.ts
index b67a7bac7be..9a3f055b49f 100644
--- a/superset-frontend/src/features/reports/types.ts
+++ b/superset-frontend/src/features/reports/types.ts
@@ -26,12 +26,12 @@ export type ReportCreationMethod = 'charts' | 'dashboards' | 'alerts_reports';
 export type ReportRecipientType = 'Email' | 'Slack';
 
 export enum ReportType {
-  DASHBOARDS = 'dashboards',
-  CHARTS = 'charts',
+  Dashboards = 'dashboards',
+  Charts = 'charts',
 }
 
-export enum NOTIFICATION_FORMATS {
-  TEXT = 'TEXT',
+export enum NotificationFormats {
+  Text = 'TEXT',
   PNG = 'PNG',
   CSV = 'CSV',
 }
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx
index 6253c42c827..735e5fa756f 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx
@@ -165,7 +165,7 @@ describe('Rule modal', () => {
       rule: {
         id: 1,
         name: 'test rule',
-        filter_type: FilterType.BASE,
+        filter_type: FilterType.Base,
         tables: [{ key: 1, id: 1, value: 'birth_names' }],
         roles: [],
       },
@@ -183,7 +183,7 @@ describe('Rule modal', () => {
       rule: {
         id: 1,
         name: 'rls 1',
-        filter_type: FilterType.BASE,
+        filter_type: FilterType.Base,
       },
     });
 
@@ -284,7 +284,7 @@ describe('Rule modal', () => {
       rule: {
         id: 1,
         name: 'rls 1',
-        filter_type: FilterType.BASE,
+        filter_type: FilterType.Base,
       },
     });
 
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
index 7e4143e5827..135803fc8f1 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
@@ -124,7 +124,7 @@ export interface RowLevelSecurityModalProps {
 
 const DEAFULT_RULE = {
   name: '',
-  filter_type: FilterType.REGULAR,
+  filter_type: FilterType.Regular,
   tables: [],
   roles: [],
   clause: '',
@@ -418,7 +418,7 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
 
           <StyledInputContainer>
             <div className="control-label">
-              {currentRule.filter_type === FilterType.BASE
+              {currentRule.filter_type === FilterType.Base
                 ? t('Excluded roles')
                 : t('Roles')}{' '}
               <InfoTooltip
diff --git a/superset-frontend/src/features/rls/types.ts b/superset-frontend/src/features/rls/types.ts
index ae0166c8e1e..47054f17c4e 100644
--- a/superset-frontend/src/features/rls/types.ts
+++ b/superset-frontend/src/features/rls/types.ts
@@ -18,8 +18,8 @@
  */
 
 export enum FilterType {
-  REGULAR = 'Regular',
-  BASE = 'Base',
+  Regular = 'Regular',
+  Base = 'Base',
 }
 
 export type RLSObject = {
diff --git a/superset-frontend/src/features/tags/TagCard.tsx b/superset-frontend/src/features/tags/TagCard.tsx
index f9d82f9bcec..7c9dfadaa55 100644
--- a/superset-frontend/src/features/tags/TagCard.tsx
+++ b/superset-frontend/src/features/tags/TagCard.tsx
@@ -94,7 +94,7 @@ function TagCard({
       <ListViewCard
         title={tag.name}
         cover={
-          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+          !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
             <></>
           ) : null
         }
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
index fb442e86bc4..cd213e4f92d 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
@@ -52,7 +52,7 @@ export const range = ({ width, height }: { width: number; height: number }) => (
           column: {
             column_name: 'SP_POP_TOTL',
             id: 1,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
@@ -63,7 +63,7 @@ export const range = ({ width, height }: { width: number; height: number }) => (
           column: {
             column_name: 'SP_POP_TOTL',
             id: 2,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
index 0a2aac41ba8..8c09b4d614a 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
@@ -37,7 +37,7 @@ const rangeProps = {
         column: {
           column_name: 'SP_POP_TOTL',
           id: 1,
-          type_generic: GenericDataType.NUMERIC,
+          type_generic: GenericDataType.Numeric,
         },
         expressionType: 'SIMPLE',
         hasCustomLabel: true,
@@ -48,7 +48,7 @@ const rangeProps = {
         column: {
           column_name: 'SP_POP_TOTL',
           id: 2,
-          type_generic: GenericDataType.NUMERIC,
+          type_generic: GenericDataType.Numeric,
         },
         expressionType: 'SIMPLE',
         hasCustomLabel: true,
@@ -70,7 +70,7 @@ const rangeProps = {
     {
       rowcount: 1,
       colnames: ['min', 'max'],
-      coltypes: [GenericDataType.NUMERIC, GenericDataType.NUMERIC],
+      coltypes: [GenericDataType.Numeric, GenericDataType.Numeric],
       data: [{ min: 10, max: 100 }],
       applied_filters: [],
       rejected_filters: [],
@@ -79,7 +79,7 @@ const rangeProps = {
   width: 220,
   behaviors: ['NATIVE_FILTER'],
   isRefreshing: false,
-  appSection: AppSection.DASHBOARD,
+  appSection: AppSection.Dashboard,
 };
 
 describe('RangeFilterPlugin', () => {
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 5c8533dd1e5..0a866c09443 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -82,14 +82,14 @@ const Wrapper = styled.div<{
     }
     & .ant-slider {
       margin-top: ${
-        orientation === FilterBarOrientation.HORIZONTAL ? 0 : theme.gridUnit
+        orientation === FilterBarOrientation.Horizontal ? 0 : theme.gridUnit
       }px;
       margin-bottom: ${
-        orientation === FilterBarOrientation.HORIZONTAL ? 0 : theme.gridUnit * 5
+        orientation === FilterBarOrientation.Horizontal ? 0 : theme.gridUnit * 5
       }px;
 
       ${
-        orientation === FilterBarOrientation.HORIZONTAL &&
+        orientation === FilterBarOrientation.Horizontal &&
         !isOverflowing &&
         `line-height: 1.2;`
       }
diff --git a/superset-frontend/src/filters/components/Range/buildQuery.ts b/superset-frontend/src/filters/components/Range/buildQuery.ts
index 8a76e5a28c1..31b91e4e2ff 100644
--- a/superset-frontend/src/filters/components/Range/buildQuery.ts
+++ b/superset-frontend/src/filters/components/Range/buildQuery.ts
@@ -50,7 +50,7 @@ export default function buildQuery(formData: QueryFormData) {
           column: {
             column_name: column,
             id: 1,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
@@ -61,7 +61,7 @@ export default function buildQuery(formData: QueryFormData) {
           column: {
             column_name: column,
             id: 2,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
diff --git a/superset-frontend/src/filters/components/Range/index.ts b/superset-frontend/src/filters/components/Range/index.ts
index 6c44b6e7ce3..d6729bb842e 100644
--- a/superset-frontend/src/filters/components/Range/index.ts
+++ b/superset-frontend/src/filters/components/Range/index.ts
@@ -27,7 +27,7 @@ export default class RangeFilterPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Range filter'),
       description: t('Range filter plugin using AntD'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       tags: [t('Experimental')],
       thumbnail,
     });
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
index 99e62598714..fb793ea5ec0 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
@@ -66,7 +66,7 @@ const selectMultipleProps = {
   width: 220,
   behaviors: ['NATIVE_FILTER'],
   isRefreshing: false,
-  appSection: AppSection.DASHBOARD,
+  appSection: AppSection.Dashboard,
 };
 
 describe('SelectFilterPlugin', () => {
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index e25eb03c4ab..5b111b7decc 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -147,7 +147,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
                 .join(', ')}${suffix}`
             : undefined,
           value:
-            appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem
+            appSection === AppSection.FilterConfigModal && defaultToFirstItem
               ? undefined
               : values,
         },
@@ -168,7 +168,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   );
 
   const isDisabled =
-    appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem;
+    appSection === AppSection.FilterConfigModal && defaultToFirstItem;
 
   const onSearch = useMemo(
     () =>
@@ -316,7 +316,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
           onChange={handleChange}
           ref={inputRef}
           loading={isRefreshing}
-          oneLine={filterBarOrientation === FilterBarOrientation.HORIZONTAL}
+          oneLine={filterBarOrientation === FilterBarOrientation.Horizontal}
           invertSelection={inverseSelection}
           options={options}
           sortComparator={sortComparator}
diff --git a/superset-frontend/src/filters/components/Select/buildQuery.test.ts b/superset-frontend/src/filters/components/Select/buildQuery.test.ts
index c643ab927b4..151b4dbd8c1 100644
--- a/superset-frontend/src/filters/components/Select/buildQuery.test.ts
+++ b/superset-frontend/src/filters/components/Select/buildQuery.test.ts
@@ -101,7 +101,7 @@ describe('Select buildQuery', () => {
     const queryContext = buildQuery(formData, {
       ownState: {
         search: 'abc',
-        coltypeMap: { my_col: GenericDataType.STRING },
+        coltypeMap: { my_col: GenericDataType.String },
       },
     });
     expect(queryContext.queries.length).toEqual(1);
@@ -115,7 +115,7 @@ describe('Select buildQuery', () => {
     const queryContext = buildQuery(formData, {
       ownState: {
         search: '123',
-        coltypeMap: { my_col: GenericDataType.NUMERIC },
+        coltypeMap: { my_col: GenericDataType.Numeric },
       },
     });
     expect(queryContext.queries.length).toEqual(1);
diff --git a/superset-frontend/src/filters/components/Select/buildQuery.ts b/superset-frontend/src/filters/components/Select/buildQuery.ts
index 45d05cffd01..9d014670f13 100644
--- a/superset-frontend/src/filters/components/Select/buildQuery.ts
+++ b/superset-frontend/src/filters/components/Select/buildQuery.ts
@@ -40,8 +40,8 @@ const buildQuery: BuildQuery<PluginFilterSelectQueryFormData> = (
       columns.filter(isPhysicalColumn).forEach(column => {
         const label = getColumnLabel(column);
         if (
-          coltypeMap[label] === GenericDataType.STRING ||
-          (coltypeMap[label] === GenericDataType.NUMERIC &&
+          coltypeMap[label] === GenericDataType.String ||
+          (coltypeMap[label] === GenericDataType.Numeric &&
             !Number.isNaN(Number(search)))
         ) {
           extraFilters.push({
diff --git a/superset-frontend/src/filters/components/Select/index.ts b/superset-frontend/src/filters/components/Select/index.ts
index 7ded0c36357..8e2ef68a7d6 100644
--- a/superset-frontend/src/filters/components/Select/index.ts
+++ b/superset-frontend/src/filters/components/Select/index.ts
@@ -27,7 +27,7 @@ export default class FilterSelectPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Select filter'),
       description: t('Select filter plugin using AntD'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       enableNoResults: false,
       tags: [t('Experimental')],
       thumbnail,
diff --git a/superset-frontend/src/filters/components/Time/index.ts b/superset-frontend/src/filters/components/Time/index.ts
index 8a46949a545..f6c3d27ce26 100644
--- a/superset-frontend/src/filters/components/Time/index.ts
+++ b/superset-frontend/src/filters/components/Time/index.ts
@@ -26,7 +26,7 @@ export default class TimeFilterPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Time filter'),
       description: t('Custom time filter plugin'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       thumbnail,
       tags: [t('Experimental')],
       datasourceCount: 0,
diff --git a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
index 4c25b4bec0f..072636a4967 100644
--- a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
@@ -77,7 +77,7 @@ export default function PluginFilterTimeColumn(
   }, [JSON.stringify(filterState.value)]);
 
   const timeColumns = (data || []).filter(
-    row => row.dtype === GenericDataType.TEMPORAL,
+    row => row.dtype === GenericDataType.Temporal,
   );
 
   const placeholderText =
diff --git a/superset-frontend/src/filters/components/TimeColumn/index.ts b/superset-frontend/src/filters/components/TimeColumn/index.ts
index ada18644b98..046eb4c8d0a 100644
--- a/superset-frontend/src/filters/components/TimeColumn/index.ts
+++ b/superset-frontend/src/filters/components/TimeColumn/index.ts
@@ -27,7 +27,7 @@ export default class FilterTimeColumnPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Time column'),
       description: t('Time column filter plugin'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       tags: [t('Experimental')],
       thumbnail,
     });
diff --git a/superset-frontend/src/filters/components/TimeGrain/index.ts b/superset-frontend/src/filters/components/TimeGrain/index.ts
index d44ec4ed65a..0b6c27901f2 100644
--- a/superset-frontend/src/filters/components/TimeGrain/index.ts
+++ b/superset-frontend/src/filters/components/TimeGrain/index.ts
@@ -27,7 +27,7 @@ export default class FilterTimeGrainPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Time grain'),
       description: t('Time grain filter plugin'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       tags: [t('Experimental')],
       thumbnail,
     });
diff --git a/superset-frontend/src/filters/utils.test.ts b/superset-frontend/src/filters/utils.test.ts
index aeba5d32def..49d4e803b18 100644
--- a/superset-frontend/src/filters/utils.test.ts
+++ b/superset-frontend/src/filters/utils.test.ts
@@ -139,36 +139,36 @@ describe('Filter utils', () => {
   describe('getDataRecordFormatter', () => {
     it('default formatter returns expected values', () => {
       const formatter = getDataRecordFormatter();
-      expect(formatter(null, GenericDataType.STRING)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.NUMERIC)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.TEMPORAL)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.BOOLEAN)).toEqual(NULL_STRING);
-      expect(formatter('foo', GenericDataType.STRING)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.NUMERIC)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.TEMPORAL)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(true, GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter(false, GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter('true', GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter('false', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter('TRUE', GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter('FALSE', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(0, GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(1, GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter(2, GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter(0, GenericDataType.STRING)).toEqual('0');
-      expect(formatter(0, GenericDataType.NUMERIC)).toEqual('0');
-      expect(formatter(0, GenericDataType.TEMPORAL)).toEqual('0');
-      expect(formatter(1234567.89, GenericDataType.STRING)).toEqual(
+      expect(formatter(null, GenericDataType.String)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Numeric)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Temporal)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Boolean)).toEqual(NULL_STRING);
+      expect(formatter('foo', GenericDataType.String)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Numeric)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Temporal)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(true, GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter(false, GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter('true', GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter('false', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter('TRUE', GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter('FALSE', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(0, GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(1, GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter(2, GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter(0, GenericDataType.String)).toEqual('0');
+      expect(formatter(0, GenericDataType.Numeric)).toEqual('0');
+      expect(formatter(0, GenericDataType.Temporal)).toEqual('0');
+      expect(formatter(1234567.89, GenericDataType.String)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.NUMERIC)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Numeric)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.TEMPORAL)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Temporal)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.BOOLEAN)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Boolean)).toEqual(
         TRUE_STRING,
       );
     });
@@ -178,41 +178,41 @@ describe('Filter utils', () => {
         timeFormatter: getTimeFormatter(TimeFormats.DATABASE_DATETIME),
         numberFormatter: getNumberFormatter(NumberFormats.SMART_NUMBER),
       });
-      expect(formatter(null, GenericDataType.STRING)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.NUMERIC)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.TEMPORAL)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.BOOLEAN)).toEqual(NULL_STRING);
-      expect(formatter('foo', GenericDataType.STRING)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.NUMERIC)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.TEMPORAL)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(0, GenericDataType.STRING)).toEqual('0');
-      expect(formatter(0, GenericDataType.NUMERIC)).toEqual('0');
-      expect(formatter(0, GenericDataType.TEMPORAL)).toEqual(
+      expect(formatter(null, GenericDataType.String)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Numeric)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Temporal)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Boolean)).toEqual(NULL_STRING);
+      expect(formatter('foo', GenericDataType.String)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Numeric)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Temporal)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(0, GenericDataType.String)).toEqual('0');
+      expect(formatter(0, GenericDataType.Numeric)).toEqual('0');
+      expect(formatter(0, GenericDataType.Temporal)).toEqual(
         '1970-01-01 00:00:00',
       );
-      expect(formatter(0, GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(1234567.89, GenericDataType.STRING)).toEqual(
+      expect(formatter(0, GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(1234567.89, GenericDataType.String)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.NUMERIC)).toEqual('1.23M');
-      expect(formatter(1234567.89, GenericDataType.TEMPORAL)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Numeric)).toEqual('1.23M');
+      expect(formatter(1234567.89, GenericDataType.Temporal)).toEqual(
         '1970-01-01 00:20:34',
       );
-      expect(formatter(1234567.89, GenericDataType.BOOLEAN)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Boolean)).toEqual(
         TRUE_STRING,
       );
-      expect(formatter('1970-01-01 00:00:00', GenericDataType.STRING)).toEqual(
+      expect(formatter('1970-01-01 00:00:00', GenericDataType.String)).toEqual(
         '1970-01-01 00:00:00',
       );
-      expect(formatter('1970-01-01 00:00:00', GenericDataType.NUMERIC)).toEqual(
+      expect(formatter('1970-01-01 00:00:00', GenericDataType.Numeric)).toEqual(
         '1970-01-01 00:00:00',
       );
-      expect(formatter('1970-01-01 00:00:00', GenericDataType.BOOLEAN)).toEqual(
+      expect(formatter('1970-01-01 00:00:00', GenericDataType.Boolean)).toEqual(
         FALSE_STRING,
       );
       expect(
-        formatter('1970-01-01 00:00:00', GenericDataType.TEMPORAL),
+        formatter('1970-01-01 00:00:00', GenericDataType.Temporal),
       ).toEqual('1970-01-01 00:00:00');
     });
   });
diff --git a/superset-frontend/src/filters/utils.ts b/superset-frontend/src/filters/utils.ts
index 69ca82f58ef..859f68f9cea 100644
--- a/superset-frontend/src/filters/utils.ts
+++ b/superset-frontend/src/filters/utils.ts
@@ -26,8 +26,8 @@ import {
 } from '@superset-ui/core';
 import { FALSE_STRING, NULL_STRING, TRUE_STRING } from 'src/utils/common';
 import {
-  CLAUSES,
-  EXPRESSION_TYPES,
+  Clauses,
+  ExpressionTypes,
 } from '../explore/components/controls/FilterControl/types';
 
 export const getSelectExtraFormData = (
@@ -40,8 +40,8 @@ export const getSelectExtraFormData = (
   if (emptyFilter) {
     extra.adhoc_filters = [
       {
-        expressionType: EXPRESSION_TYPES.SQL,
-        clause: CLAUSES.WHERE,
+        expressionType: ExpressionTypes.Sql,
+        clause: Clauses.Where,
         sqlExpression: '1 = 0',
       },
     ];
@@ -105,7 +105,7 @@ export function getDataRecordFormatter({
     if (typeof value === 'boolean') {
       return value ? TRUE_STRING : FALSE_STRING;
     }
-    if (dtype === GenericDataType.BOOLEAN) {
+    if (dtype === GenericDataType.Boolean) {
       try {
         return JSON.parse(String(value).toLowerCase())
           ? TRUE_STRING
@@ -117,13 +117,13 @@ export function getDataRecordFormatter({
     if (typeof value === 'string') {
       return value;
     }
-    if (timeFormatter && dtype === GenericDataType.TEMPORAL) {
+    if (timeFormatter && dtype === GenericDataType.Temporal) {
       return timeFormatter(value);
     }
     if (
       numberFormatter &&
       typeof value === 'number' &&
-      dtype === GenericDataType.NUMERIC
+      dtype === GenericDataType.Numeric
     ) {
       return numberFormatter(value);
     }
diff --git a/superset-frontend/src/hooks/apiResources/apiResources.test.ts b/superset-frontend/src/hooks/apiResources/apiResources.test.ts
index 6a5478e3bb8..be966472a99 100644
--- a/superset-frontend/src/hooks/apiResources/apiResources.test.ts
+++ b/superset-frontend/src/hooks/apiResources/apiResources.test.ts
@@ -57,7 +57,7 @@ describe('apiResource hooks', () => {
         useApiResourceFullBody('/test/endpoint'),
       );
       expect(result.current).toEqual({
-        status: ResourceStatus.LOADING,
+        status: ResourceStatus.Loading,
         result: null,
         error: null,
       });
@@ -74,7 +74,7 @@ describe('apiResource hooks', () => {
         jest.runAllTimers();
       });
       expect(result.current).toEqual({
-        status: ResourceStatus.COMPLETE,
+        status: ResourceStatus.Complete,
         result: fakeApiResult,
         error: null,
       });
@@ -90,7 +90,7 @@ describe('apiResource hooks', () => {
         jest.runAllTimers();
       });
       expect(result.current).toEqual({
-        status: ResourceStatus.ERROR,
+        status: ResourceStatus.Error,
         result: null,
         error: fakeError,
       });
@@ -102,7 +102,7 @@ describe('apiResource hooks', () => {
       const { result } = renderHook(() =>
         useTransformedResource(
           {
-            status: ResourceStatus.COMPLETE,
+            status: ResourceStatus.Complete,
             result: fakeApiResult,
             error: null,
           },
@@ -110,7 +110,7 @@ describe('apiResource hooks', () => {
         ),
       );
       expect(result.current).toEqual({
-        status: ResourceStatus.COMPLETE,
+        status: ResourceStatus.Complete,
         result: {
           id: 1,
           name: 'FAKE API RESULT',
@@ -127,7 +127,7 @@ describe('apiResource hooks', () => {
       const { result } = renderHook(() =>
         useTransformedResource(
           {
-            status: ResourceStatus.LOADING,
+            status: ResourceStatus.Loading,
             result: null,
             error: null,
           },
@@ -135,7 +135,7 @@ describe('apiResource hooks', () => {
         ),
       );
       expect(result.current).toEqual({
-        status: ResourceStatus.LOADING,
+        status: ResourceStatus.Loading,
         result: null,
         error: null,
       });
@@ -156,7 +156,7 @@ describe('apiResource hooks', () => {
         jest.runAllTimers();
       });
       expect(result.current).toEqual({
-        status: ResourceStatus.COMPLETE,
+        status: ResourceStatus.Complete,
         result: fakeApiResult,
         error: null,
       });
diff --git a/superset-frontend/src/hooks/apiResources/apiResources.ts b/superset-frontend/src/hooks/apiResources/apiResources.ts
index 3b6a3922b11..722998c32fb 100644
--- a/superset-frontend/src/hooks/apiResources/apiResources.ts
+++ b/superset-frontend/src/hooks/apiResources/apiResources.ts
@@ -21,9 +21,9 @@ import { makeApi } from '@superset-ui/core';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 export enum ResourceStatus {
-  LOADING = 'loading',
-  COMPLETE = 'complete',
-  ERROR = 'error',
+  Loading = 'loading',
+  Complete = 'complete',
+  Error = 'error',
 }
 
 /**
@@ -44,25 +44,25 @@ export type Resource<T> = LoadingState | CompleteState<T> | ErrorState;
 // }
 
 type LoadingState = {
-  status: ResourceStatus.LOADING;
+  status: ResourceStatus.Loading;
   result: null;
   error: null;
 };
 
 type CompleteState<T> = {
-  status: ResourceStatus.COMPLETE;
+  status: ResourceStatus.Complete;
   result: T;
   error: null;
 };
 
 type ErrorState = {
-  status: ResourceStatus.ERROR;
+  status: ResourceStatus.Error;
   result: null;
   error: Error;
 };
 
 const initialState: LoadingState = {
-  status: ResourceStatus.LOADING,
+  status: ResourceStatus.Loading,
   result: null,
   error: null,
 };
@@ -112,7 +112,7 @@ export function useApiResourceFullBody<RESULT>(
       .then(result => {
         if (!cancelled) {
           setResource({
-            status: ResourceStatus.COMPLETE,
+            status: ResourceStatus.Complete,
             result,
             error: null,
           });
@@ -121,7 +121,7 @@ export function useApiResourceFullBody<RESULT>(
       .catch(error => {
         if (!cancelled) {
           setResource({
-            status: ResourceStatus.ERROR,
+            status: ResourceStatus.Error,
             result: null,
             error,
           });
@@ -149,7 +149,7 @@ export function useTransformedResource<IN, OUT>(
   transformFn: (result: IN) => OUT,
 ): Resource<OUT> {
   return useMemo(() => {
-    if (resource.status !== ResourceStatus.COMPLETE) {
+    if (resource.status !== ResourceStatus.Complete) {
       // While incomplete, there is no result - no need to transform.
       return resource;
     }
@@ -160,7 +160,7 @@ export function useTransformedResource<IN, OUT>(
       };
     } catch (e) {
       return {
-        status: ResourceStatus.ERROR,
+        status: ResourceStatus.Error,
         result: null,
         error: e,
       };
diff --git a/superset-frontend/src/middleware/asyncEvent.ts b/superset-frontend/src/middleware/asyncEvent.ts
index 1d5fcb66c56..faa14229ca9 100644
--- a/superset-frontend/src/middleware/asyncEvent.ts
+++ b/superset-frontend/src/middleware/asyncEvent.ts
@@ -230,7 +230,7 @@ const wsConnect = (): void => {
 };
 
 export const init = (appConfig?: AppConfig) => {
-  if (!isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) return;
+  if (!isFeatureEnabled(FeatureFlag.GlobalAsyncQueries)) return;
   if (pollingTimeoutId) clearTimeout(pollingTimeoutId);
 
   listenersByJobId = {};
diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx
index c6d14d186f1..fdbfe9f13db 100644
--- a/superset-frontend/src/pages/AlertReportList/index.tsx
+++ b/superset-frontend/src/pages/AlertReportList/index.tsx
@@ -116,7 +116,7 @@ function AlertList({
     () => [
       {
         id: 'type',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         value: isReportEnabled ? 'Report' : 'Alert',
       },
     ],
@@ -401,7 +401,7 @@ function AlertList({
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -450,14 +450,14 @@ function AlertList({
         key: 'search',
         id: 'name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Owner'),
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'report',
@@ -474,7 +474,7 @@ function AlertList({
         key: 'status',
         id: 'last_state',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'Any',
         selects: [
           {
@@ -495,7 +495,7 @@ function AlertList({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'report',
diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx
index b94cab846df..dc99e0f6e86 100644
--- a/superset-frontend/src/pages/AllEntities/index.tsx
+++ b/superset-frontend/src/pages/AllEntities/index.tsx
@@ -125,21 +125,21 @@ function AllEntities() {
   const items = [];
   if (tag?.description) {
     const description: Description = {
-      type: MetadataType.DESCRIPTION,
+      type: MetadataType.Description,
       value: tag?.description || '',
     };
     items.push(description);
   }
 
   const owner: Owner = {
-    type: MetadataType.OWNER,
+    type: MetadataType.Owner,
     createdBy: getOwnerName(tag?.created_by),
     createdOn: tag?.created_on_delta_humanized || '',
   };
   items.push(owner);
 
   const lastModified: LastModified = {
-    type: MetadataType.LAST_MODIFIED,
+    type: MetadataType.LastModified,
     value: tag?.changed_on_delta_humanized || '',
     modifiedBy: getOwnerName(tag?.changed_by),
   };
diff --git a/superset-frontend/src/pages/AnnotationLayerList/index.tsx b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
index fff5743b5ab..20312f93fcd 100644
--- a/superset-frontend/src/pages/AnnotationLayerList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
@@ -201,7 +201,7 @@ function AnnotationLayersList({
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -239,14 +239,14 @@ function AnnotationLayersList({
         key: 'search',
         id: 'name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Changed by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'annotation_layer',
diff --git a/superset-frontend/src/pages/Chart/Chart.test.tsx b/superset-frontend/src/pages/Chart/Chart.test.tsx
index fb4f9a88916..35ea788437b 100644
--- a/superset-frontend/src/pages/Chart/Chart.test.tsx
+++ b/superset-frontend/src/pages/Chart/Chart.test.tsx
@@ -81,7 +81,7 @@ describe('ChartPage', () => {
 
     beforeEach(() => {
       localStorage.setItem(
-        LocalStorageKeys.dashboard__explore_context,
+        LocalStorageKeys.DashboardExploreContext,
         JSON.stringify({
           [dashboardPageId]: {},
         }),
diff --git a/superset-frontend/src/pages/Chart/index.tsx b/superset-frontend/src/pages/Chart/index.tsx
index 167de09acc3..c679e0e6288 100644
--- a/superset-frontend/src/pages/Chart/index.tsx
+++ b/superset-frontend/src/pages/Chart/index.tsx
@@ -75,9 +75,7 @@ const getDashboardPageContext = (pageId?: string | null) => {
   if (!pageId) {
     return null;
   }
-  return (
-    getItem(LocalStorageKeys.dashboard__explore_context, {})[pageId] || null
-  );
+  return getItem(LocalStorageKeys.DashboardExploreContext, {})[pageId] || null;
 };
 
 const getDashboardContextFormData = () => {
@@ -153,7 +151,7 @@ export default function ExplorePage() {
           isExploreInitialized.current = true;
         });
     }
-    getSharedLabelColor().source = SharedLabelColorSource.explore;
+    getSharedLabelColor().source = SharedLabelColorSource.Explore;
   }, [dispatch, location]);
 
   if (!isLoaded) {
diff --git a/superset-frontend/src/pages/ChartList/index.tsx b/superset-frontend/src/pages/ChartList/index.tsx
index bfd945ea189..d3547072018 100644
--- a/superset-frontend/src/pages/ChartList/index.tsx
+++ b/superset-frontend/src/pages/ChartList/index.tsx
@@ -272,7 +272,7 @@ function ChartList(props: ChartListProps) {
           filters: [
             {
               col: 'dashboard_title',
-              opr: FilterOperator.startsWith,
+              opr: FilterOperator.StartsWith,
               value: filterValue,
             },
           ],
@@ -425,7 +425,7 @@ function ChartList(props: ChartListProps) {
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
-        hidden: !isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM),
+        hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
       },
       {
         Cell: ({
@@ -539,7 +539,7 @@ function ChartList(props: ChartListProps) {
         hidden: !canEdit && !canDelete,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -563,7 +563,7 @@ function ChartList(props: ChartListProps) {
       id: 'id',
       urlDisplay: 'favorite',
       input: 'select',
-      operator: FilterOperator.chartIsFav,
+      operator: FilterOperator.ChartIsFav,
       unfilteredLabel: t('Any'),
       selects: [
         { label: t('Yes'), value: true },
@@ -580,14 +580,14 @@ function ChartList(props: ChartListProps) {
         key: 'search',
         id: 'slice_name',
         input: 'search',
-        operator: FilterOperator.chartAllText,
+        operator: FilterOperator.ChartAllText,
       },
       {
         Header: t('Type'),
         key: 'viz_type',
         id: 'viz_type',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         selects: registry
           .keys()
@@ -613,19 +613,19 @@ function ChartList(props: ChartListProps) {
         key: 'dataset',
         id: 'datasource_id',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchDatasets,
         paginate: true,
       },
-      ...(isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && canReadTag
+      ...(isFeatureEnabled(FeatureFlag.TaggingSystem) && canReadTag
         ? [
             {
               Header: t('Tag'),
               key: 'tags',
               id: 'tags',
               input: 'select',
-              operator: FilterOperator.chartTags,
+              operator: FilterOperator.ChartTags,
               unfilteredLabel: t('All'),
               fetchSelects: loadTags,
             },
@@ -636,7 +636,7 @@ function ChartList(props: ChartListProps) {
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'chart',
@@ -658,7 +658,7 @@ function ChartList(props: ChartListProps) {
         key: 'dashboards',
         id: 'dashboards',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: fetchDashboards,
         paginate: true,
@@ -670,7 +670,7 @@ function ChartList(props: ChartListProps) {
         id: 'id',
         urlDisplay: 'certified',
         input: 'select',
-        operator: FilterOperator.chartIsCertified,
+        operator: FilterOperator.ChartIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Yes'), value: true },
@@ -682,7 +682,7 @@ function ChartList(props: ChartListProps) {
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'chart',
@@ -729,7 +729,7 @@ function ChartList(props: ChartListProps) {
         showThumbnails={
           userSettings
             ? userSettings.thumbnails
-            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+            : isFeatureEnabled(FeatureFlag.Thumbnails)
         }
         hasPerm={hasPerm}
         openChartEditModal={openChartEditModal}
@@ -849,10 +849,10 @@ function ChartList(props: ChartListProps) {
               showThumbnails={
                 userSettings
                   ? userSettings.thumbnails
-                  : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+                  : isFeatureEnabled(FeatureFlag.Thumbnails)
               }
               defaultViewMode={
-                isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)
+                isFeatureEnabled(FeatureFlag.ListviewsDefaultCardView)
                   ? 'card'
                   : 'table'
               }
diff --git a/superset-frontend/src/pages/CssTemplateList/index.tsx b/superset-frontend/src/pages/CssTemplateList/index.tsx
index b77217b22f7..c54a61df298 100644
--- a/superset-frontend/src/pages/CssTemplateList/index.tsx
+++ b/superset-frontend/src/pages/CssTemplateList/index.tsx
@@ -179,7 +179,7 @@ function CssTemplatesList({
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -224,14 +224,14 @@ function CssTemplatesList({
         key: 'search',
         id: 'template_name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Modified by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'css_template',
diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx
index 76b34c6652b..23261aff84a 100644
--- a/superset-frontend/src/pages/DashboardList/index.tsx
+++ b/superset-frontend/src/pages/DashboardList/index.tsx
@@ -346,7 +346,7 @@ function DashboardList(props: DashboardListProps) {
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
-        hidden: !isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM),
+        hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
       },
       {
         Cell: ({
@@ -456,7 +456,7 @@ function DashboardList(props: DashboardListProps) {
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -480,7 +480,7 @@ function DashboardList(props: DashboardListProps) {
       id: 'id',
       urlDisplay: 'favorite',
       input: 'select',
-      operator: FilterOperator.dashboardIsFav,
+      operator: FilterOperator.DashboardIsFav,
       unfilteredLabel: t('Any'),
       selects: [
         { label: t('Yes'), value: true },
@@ -497,28 +497,28 @@ function DashboardList(props: DashboardListProps) {
         key: 'search',
         id: 'dashboard_title',
         input: 'search',
-        operator: FilterOperator.titleOrSlug,
+        operator: FilterOperator.TitleOrSlug,
       },
       {
         Header: t('Status'),
         key: 'published',
         id: 'published',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Published'), value: true },
           { label: t('Draft'), value: false },
         ],
       },
-      ...(isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && canReadTag
+      ...(isFeatureEnabled(FeatureFlag.TaggingSystem) && canReadTag
         ? [
             {
               Header: t('Tag'),
               key: 'tags',
               id: 'tags',
               input: 'select',
-              operator: FilterOperator.dashboardTags,
+              operator: FilterOperator.DashboardTags,
               unfilteredLabel: t('All'),
               fetchSelects: loadTags,
             },
@@ -529,7 +529,7 @@ function DashboardList(props: DashboardListProps) {
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'dashboard',
@@ -553,7 +553,7 @@ function DashboardList(props: DashboardListProps) {
         id: 'id',
         urlDisplay: 'certified',
         input: 'select',
-        operator: FilterOperator.dashboardIsCertified,
+        operator: FilterOperator.DashboardIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Yes'), value: true },
@@ -565,7 +565,7 @@ function DashboardList(props: DashboardListProps) {
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'dashboard',
@@ -614,7 +614,7 @@ function DashboardList(props: DashboardListProps) {
         showThumbnails={
           userKey
             ? userKey.thumbnails
-            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+            : isFeatureEnabled(FeatureFlag.Thumbnails)
         }
         userId={user?.userId}
         loading={loading}
@@ -754,11 +754,11 @@ function DashboardList(props: DashboardListProps) {
                 showThumbnails={
                   userKey
                     ? userKey.thumbnails
-                    : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+                    : isFeatureEnabled(FeatureFlag.Thumbnails)
                 }
                 renderCard={renderCard}
                 defaultViewMode={
-                  isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)
+                  isFeatureEnabled(FeatureFlag.ListviewsDefaultCardView)
                     ? 'card'
                     : 'table'
                 }
diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx
index b30786941ea..b5854c9a9f1 100644
--- a/superset-frontend/src/pages/DatabaseList/index.tsx
+++ b/superset-frontend/src/pages/DatabaseList/index.tsx
@@ -191,7 +191,7 @@ function DatabaseList({
         }
 
         // Delete user-selected db from local storage
-        setItem(LocalStorageKeys.db, null);
+        setItem(LocalStorageKeys.Database, null);
 
         // Close delete modal
         setDatabaseCurrentlyDeleting(null);
@@ -474,7 +474,7 @@ function DatabaseList({
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -488,14 +488,14 @@ function DatabaseList({
         key: 'search',
         id: 'database_name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Expose in SQL Lab'),
         key: 'expose_in_sql_lab',
         id: 'expose_in_sqllab',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         selects: [
           { label: t('Yes'), value: true },
@@ -515,7 +515,7 @@ function DatabaseList({
         key: 'allow_run_async',
         id: 'allow_run_async',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         selects: [
           { label: t('Yes'), value: true },
@@ -527,7 +527,7 @@ function DatabaseList({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'database',
diff --git a/superset-frontend/src/pages/DatasetCreation/index.tsx b/superset-frontend/src/pages/DatasetCreation/index.tsx
index baeaa01e30b..66acc4fa235 100644
--- a/superset-frontend/src/pages/DatasetCreation/index.tsx
+++ b/superset-frontend/src/pages/DatasetCreation/index.tsx
@@ -44,25 +44,25 @@ export function datasetReducer(
   };
 
   switch (action.type) {
-    case DatasetActionType.selectDatabase:
+    case DatasetActionType.SelectDatabase:
       return {
         ...trimmedState,
         ...action.payload,
         schema: null,
         table_name: null,
       };
-    case DatasetActionType.selectSchema:
+    case DatasetActionType.SelectSchema:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
         table_name: null,
       };
-    case DatasetActionType.selectTable:
+    case DatasetActionType.SelectTable:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
       };
-    case DatasetActionType.changeDataset:
+    case DatasetActionType.ChangeDataset:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx
index 2ec521ad450..3b457f26354 100644
--- a/superset-frontend/src/pages/DatasetList/index.tsx
+++ b/superset-frontend/src/pages/DatasetList/index.tsx
@@ -506,7 +506,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -520,14 +520,14 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'search',
         id: 'table_name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Type'),
         key: 'sql',
         id: 'sql',
         input: 'select',
-        operator: FilterOperator.datasetIsNullOrEmpty,
+        operator: FilterOperator.DatasetIsNullOrEmpty,
         unfilteredLabel: 'All',
         selects: [
           { label: t('Virtual'), value: false },
@@ -539,7 +539,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'database',
         id: 'database',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: 'All',
         fetchSelects: createFetchRelated(
           'dataset',
@@ -555,7 +555,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'schema',
         id: 'schema',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'All',
         fetchSelects: createFetchDistinct(
           'dataset',
@@ -571,7 +571,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: 'All',
         fetchSelects: createFetchRelated(
           'dataset',
@@ -592,7 +592,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         id: 'id',
         urlDisplay: 'certified',
         input: 'select',
-        operator: FilterOperator.datasetIsCertified,
+        operator: FilterOperator.DatasetIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Yes'), value: true },
@@ -604,7 +604,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'dataset',
diff --git a/superset-frontend/src/pages/Home/index.tsx b/superset-frontend/src/pages/Home/index.tsx
index c61d15e2ab6..23141111717 100644
--- a/superset-frontend/src/pages/Home/index.tsx
+++ b/superset-frontend/src/pages/Home/index.tsx
@@ -164,7 +164,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
   const [activeChild, setActiveChild] = useState('Loading');
   const userKey = dangerouslyGetItemDoNotUse(id, null);
   let defaultChecked = false;
-  const isThumbnailsEnabled = isFeatureEnabled(FeatureFlag.THUMBNAILS);
+  const isThumbnailsEnabled = isFeatureEnabled(FeatureFlag.Thumbnails);
   if (isThumbnailsEnabled) {
     defaultChecked =
       userKey?.thumbnails === undefined ? true : userKey?.thumbnails;
@@ -178,12 +178,12 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
   );
   const [isFetchingActivityData, setIsFetchingActivityData] = useState(true);
 
-  const collapseState = getItem(LocalStorageKeys.homepage_collapse_state, []);
+  const collapseState = getItem(LocalStorageKeys.HomepageCollapseState, []);
   const [activeState, setActiveState] = useState<Array<string>>(collapseState);
 
   const handleCollapse = (state: Array<string>) => {
     setActiveState(state);
-    setItem(LocalStorageKeys.homepage_collapse_state, state);
+    setItem(LocalStorageKeys.HomepageCollapseState, state);
   };
 
   const WelcomeMessageExtension = extensionsRegistry.get('welcome.message');
@@ -220,7 +220,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
     if (!otherTabFilters) {
       return;
     }
-    const activeTab = getItem(LocalStorageKeys.homepage_activity_filter, null);
+    const activeTab = getItem(LocalStorageKeys.HomepageActivityFilter, null);
     setActiveState(collapseState.length > 0 ? collapseState : DEFAULT_TAB_ARR);
     getRecentActivityObjs(user.userId!, recent, addDangerToast, otherTabFilters)
       .then(res => {
diff --git a/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx b/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx
index e39c279a53c..35d084c4833 100644
--- a/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx
@@ -55,7 +55,7 @@ const mockQueries: QueryObject[] = [...new Array(3)].map((_, i) => ({
     { schema: 'foo', table: 'table' },
     { schema: 'bar', table: 'table_2' },
   ],
-  status: QueryState.SUCCESS,
+  status: QueryState.Success,
   tab_name: 'Main Tab',
   user: {
     first_name: 'cool',
diff --git a/superset-frontend/src/pages/QueryHistoryList/index.tsx b/superset-frontend/src/pages/QueryHistoryList/index.tsx
index 94b646d9e43..f2d72af9dcf 100644
--- a/superset-frontend/src/pages/QueryHistoryList/index.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx
@@ -135,7 +135,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
     ...commonMenuData,
   };
 
-  const initialSort = [{ id: QueryObjectColumns.start_time, desc: true }];
+  const initialSort = [{ id: QueryObjectColumns.StartTime, desc: true }];
   const columns = useMemo(
     () => [
       {
@@ -157,38 +157,38 @@ function QueryList({ addDangerToast }: QueryListProps) {
             name: null,
             label: '',
           };
-          if (status === QueryState.SUCCESS) {
+          if (status === QueryState.Success) {
             statusConfig.name = (
               <Icons.Check iconColor={theme.colors.success.base} />
             );
             statusConfig.label = t('Success');
           } else if (
-            status === QueryState.FAILED ||
-            status === QueryState.STOPPED
+            status === QueryState.Failed ||
+            status === QueryState.Stopped
           ) {
             statusConfig.name = (
               <Icons.XSmall
                 iconColor={
-                  status === QueryState.FAILED
+                  status === QueryState.Failed
                     ? theme.colors.error.base
                     : theme.colors.grayscale.base
                 }
               />
             );
             statusConfig.label = t('Failed');
-          } else if (status === QueryState.RUNNING) {
+          } else if (status === QueryState.Running) {
             statusConfig.name = (
               <Icons.Running iconColor={theme.colors.primary.base} />
             );
             statusConfig.label = t('Running');
-          } else if (status === QueryState.TIMED_OUT) {
+          } else if (status === QueryState.TimedOut) {
             statusConfig.name = (
               <Icons.Offline iconColor={theme.colors.grayscale.light1} />
             );
             statusConfig.label = t('Offline');
           } else if (
-            status === QueryState.SCHEDULED ||
-            status === QueryState.PENDING
+            status === QueryState.Scheduled ||
+            status === QueryState.Pending
           ) {
             statusConfig.name = (
               <Icons.Queued iconColor={theme.colors.grayscale.base} />
@@ -201,12 +201,12 @@ function QueryList({ addDangerToast }: QueryListProps) {
             </Tooltip>
           );
         },
-        accessor: QueryObjectColumns.status,
+        accessor: QueryObjectColumns.Status,
         size: 'xs',
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.start_time,
+        accessor: QueryObjectColumns.StartTime,
         Header: t('Time'),
         size: 'xl',
         Cell: ({
@@ -236,7 +236,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
             original: { status, start_time, end_time },
           },
         }: any) => {
-          const timerType = status === QueryState.FAILED ? 'danger' : status;
+          const timerType = status === QueryState.Failed ? 'danger' : status;
           const timerTime = end_time
             ? moment(moment.utc(end_time - start_time)).format(TIME_WITH_MS)
             : '00:00:00.000';
@@ -248,21 +248,21 @@ function QueryList({ addDangerToast }: QueryListProps) {
         },
       },
       {
-        accessor: QueryObjectColumns.tab_name,
+        accessor: QueryObjectColumns.TabName,
         Header: t('Tab name'),
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.database_name,
+        accessor: QueryObjectColumns.DatabaseName,
         Header: t('Database'),
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.database,
+        accessor: QueryObjectColumns.Database,
         hidden: true,
       },
       {
-        accessor: QueryObjectColumns.schema,
+        accessor: QueryObjectColumns.Schema,
         Header: t('Schema'),
         size: 'xl',
       },
@@ -299,13 +299,13 @@ function QueryList({ addDangerToast }: QueryListProps) {
 
           return main;
         },
-        accessor: QueryObjectColumns.sql_tables,
+        accessor: QueryObjectColumns.SqlTables,
         Header: t('Tables'),
         size: 'xl',
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.user_first_name,
+        accessor: QueryObjectColumns.UserFirstName,
         Header: t('User'),
         size: 'xl',
         Cell: ({
@@ -315,16 +315,16 @@ function QueryList({ addDangerToast }: QueryListProps) {
         }: any) => getOwnerName(user),
       },
       {
-        accessor: QueryObjectColumns.user,
+        accessor: QueryObjectColumns.User,
         hidden: true,
       },
       {
-        accessor: QueryObjectColumns.rows,
+        accessor: QueryObjectColumns.Rows,
         Header: t('Rows'),
         size: 'md',
       },
       {
-        accessor: QueryObjectColumns.sql,
+        accessor: QueryObjectColumns.Sql,
         Header: t('SQL'),
         Cell: ({ row: { original, id } }: any) => (
           <div
@@ -366,7 +366,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'database',
         id: 'database',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'query',
@@ -384,7 +384,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'state',
         id: 'status',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'All',
         fetchSelects: createFetchDistinct(
           'query',
@@ -402,7 +402,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'user',
         id: 'user',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: 'All',
         fetchSelects: createFetchRelated(
           'query',
@@ -420,14 +420,14 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'start_time',
         id: 'start_time',
         input: 'datetime_range',
-        operator: FilterOperator.between,
+        operator: FilterOperator.Between,
       },
       {
         Header: t('Search by query text'),
         key: 'sql',
         id: 'sql',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
     ],
     [addDangerToast],
diff --git a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
index bef42284d0b..4c1fa85ff58 100644
--- a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
+++ b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
@@ -224,7 +224,7 @@ function RowLevelSecurityList(props: RLSProps) {
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -258,14 +258,14 @@ function RowLevelSecurityList(props: RLSProps) {
         key: 'search',
         id: 'name',
         input: 'search',
-        operator: FilterOperator.startsWith,
+        operator: FilterOperator.StartsWith,
       },
       {
         Header: t('Filter Type'),
         key: 'filter_type',
         id: 'filter_type',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Regular'), value: 'Regular' },
@@ -277,14 +277,14 @@ function RowLevelSecurityList(props: RLSProps) {
         key: 'search',
         id: 'group_key',
         input: 'search',
-        operator: FilterOperator.startsWith,
+        operator: FilterOperator.StartsWith,
       },
       {
         Header: t('Modified by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'rowlevelsecurity',
diff --git a/superset-frontend/src/pages/SavedQueryList/index.tsx b/superset-frontend/src/pages/SavedQueryList/index.tsx
index 958107aa5d2..bbad3c89fb8 100644
--- a/superset-frontend/src/pages/SavedQueryList/index.tsx
+++ b/superset-frontend/src/pages/SavedQueryList/index.tsx
@@ -362,7 +362,7 @@ function SavedQueryList({
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
-        hidden: !isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM),
+        hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
       },
       {
         Cell: ({
@@ -433,7 +433,7 @@ function SavedQueryList({
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -447,14 +447,14 @@ function SavedQueryList({
         id: 'label',
         key: 'search',
         input: 'search',
-        operator: FilterOperator.allText,
+        operator: FilterOperator.AllText,
       },
       {
         Header: t('Database'),
         key: 'database',
         id: 'database',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'saved_query',
@@ -475,7 +475,7 @@ function SavedQueryList({
         id: 'schema',
         key: 'schema',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'All',
         fetchSelects: createFetchDistinct(
           'saved_query',
@@ -488,14 +488,14 @@ function SavedQueryList({
         ),
         paginate: true,
       },
-      ...((isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && canReadTag
+      ...((isFeatureEnabled(FeatureFlag.TaggingSystem) && canReadTag
         ? [
             {
               Header: t('Tag'),
               id: 'tags',
               key: 'tags',
               input: 'select',
-              operator: FilterOperator.savedQueryTags,
+              operator: FilterOperator.SavedQueryTags,
               fetchSelects: loadTags,
             },
           ]
@@ -505,7 +505,7 @@ function SavedQueryList({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'saved_query',
diff --git a/superset-frontend/src/pages/SqlLab/index.tsx b/superset-frontend/src/pages/SqlLab/index.tsx
index 3f19b54c295..06e34e26658 100644
--- a/superset-frontend/src/pages/SqlLab/index.tsx
+++ b/superset-frontend/src/pages/SqlLab/index.tsx
@@ -73,7 +73,7 @@ export default function SqlLab() {
       >
         <SqlLabGlobalStyles />
         <App />
-        {isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE) && (
+        {isFeatureEnabled(FeatureFlag.SqllabBackendPersistence) && (
           <EditorAutoSync />
         )}
       </div>
diff --git a/superset-frontend/src/pages/Tags/index.tsx b/superset-frontend/src/pages/Tags/index.tsx
index 30bdc993431..a6fe13ef4cb 100644
--- a/superset-frontend/src/pages/Tags/index.tsx
+++ b/superset-frontend/src/pages/Tags/index.tsx
@@ -246,7 +246,7 @@ function TagList(props: TagListProps) {
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -259,14 +259,14 @@ function TagList(props: TagListProps) {
         Header: t('Name'),
         id: 'name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Modified by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'tag',
@@ -385,10 +385,10 @@ function TagList(props: TagListProps) {
                 showThumbnails={
                   userKey
                     ? userKey.thumbnails
-                    : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+                    : isFeatureEnabled(FeatureFlag.Thumbnails)
                 }
                 defaultViewMode={
-                  isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)
+                  isFeatureEnabled(FeatureFlag.ListviewsDefaultCardView)
                     ? 'card'
                     : 'table'
                 }
diff --git a/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts b/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts
index f27b8c849f3..f82f9d89e47 100644
--- a/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts
+++ b/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts
@@ -17,14 +17,14 @@
  * under the License.
  */
 
-export enum DASHBOARD_VIRTUALIZATION_MODE {
-  NONE = 'NONE',
-  VIEWPORT = 'VIEWPORT',
-  PAGINATED = 'PAGINATED',
+export enum DashboardVirtualizationMode {
+  None = 'NONE',
+  Viewport = 'VIEWPORT',
+  Paginated = 'PAGINATED',
 }
 
 export const isDashboardVirtualizationEnabled = (
-  virtualizationMode: DASHBOARD_VIRTUALIZATION_MODE,
+  virtualizationMode: DashboardVirtualizationMode,
 ) =>
-  virtualizationMode === DASHBOARD_VIRTUALIZATION_MODE.VIEWPORT ||
-  virtualizationMode === DASHBOARD_VIRTUALIZATION_MODE.PAGINATED;
+  virtualizationMode === DashboardVirtualizationMode.Viewport ||
+  virtualizationMode === DashboardVirtualizationMode.Paginated;
diff --git a/superset-frontend/src/utils/localStorageHelpers.test.ts b/superset-frontend/src/utils/localStorageHelpers.test.ts
index 8392ee5291a..d969e3f2771 100644
--- a/superset-frontend/src/utils/localStorageHelpers.test.ts
+++ b/superset-frontend/src/utils/localStorageHelpers.test.ts
@@ -32,12 +32,12 @@ describe('localStorageHelpers', () => {
   });
 
   it('gets a value that was set', () => {
-    setItem(LocalStorageKeys.is_datapanel_open, false);
+    setItem(LocalStorageKeys.IsDatapanelOpen, false);
 
-    expect(getItem(LocalStorageKeys.is_datapanel_open, true)).toBe(false);
+    expect(getItem(LocalStorageKeys.IsDatapanelOpen, true)).toBe(false);
   });
 
   it('returns the default value for an unset value', () => {
-    expect(getItem(LocalStorageKeys.is_datapanel_open, true)).toBe(true);
+    expect(getItem(LocalStorageKeys.IsDatapanelOpen, true)).toBe(true);
   });
 });
diff --git a/superset-frontend/src/utils/localStorageHelpers.ts b/superset-frontend/src/utils/localStorageHelpers.ts
index 12fba5b94c9..4d8d35a4907 100644
--- a/superset-frontend/src/utils/localStorageHelpers.ts
+++ b/superset-frontend/src/utils/localStorageHelpers.ts
@@ -30,16 +30,16 @@ export enum LocalStorageKeys {
    * TODO: Update all local storage keys to follow the new pattern. This is a breaking change,
    * and therefore should be done in a major release.
    */
-  db = 'db',
-  chart_split_sizes = 'chart_split_sizes',
-  controls_width = 'controls_width',
-  datasource_width = 'datasource_width',
-  is_datapanel_open = 'is_datapanel_open',
-  homepage_chart_filter = 'homepage_chart_filter',
-  homepage_dashboard_filter = 'homepage_dashboard_filter',
-  homepage_collapse_state = 'homepage_collapse_state',
-  homepage_activity_filter = 'homepage_activity_filter',
-  datasetname_set_successful = 'datasetname_set_successful',
+  Database = 'db',
+  ChartSplitSizes = 'chart_split_sizes',
+  ControlsWidth = 'controls_width',
+  DatasourceWidth = 'datasource_width',
+  IsDatapanelOpen = 'is_datapanel_open',
+  HomepageChartFilter = 'homepage_chart_filter',
+  HomepageDashboardFilter = 'homepage_dashboard_filter',
+  HomepageCollapseState = 'homepage_collapse_state',
+  HomepageActivityFilter = 'homepage_activity_filter',
+  DatasetnameSetSuccessful = 'datasetname_set_successful',
   /** END LEGACY LOCAL STORAGE KEYS */
 
   /**
@@ -49,12 +49,12 @@ export enum LocalStorageKeys {
    * Example:
    * sqllab__is_autocomplete_enabled
    */
-  sqllab__is_autocomplete_enabled = 'sqllab__is_autocomplete_enabled',
-  explore__data_table_original_formatted_time_columns = 'explore__data_table_original_formatted_time_columns',
-  dashboard__custom_filter_bar_widths = 'dashboard__custom_filter_bar_widths',
-  dashboard__explore_context = 'dashboard__explore_context',
-  dashboard__editor_show_only_my_charts = 'dashboard__editor_show_only_my_charts',
-  common__resizable_sidebar_widths = 'common__resizable_sidebar_widths',
+  SqllabIsAutocompleteEnabled = 'sqllab__is_autocomplete_enabled',
+  ExploreDataTableOriginalFormattedTimeColumns = 'explore__data_table_original_formatted_time_columns',
+  DashboardCustomFilterBarWidths = 'dashboard__custom_filter_bar_widths',
+  DashboardExploreContext = 'dashboard__explore_context',
+  DashboardEditorShowOnlyMyCharts = 'dashboard__editor_show_only_my_charts',
+  CommonResizableSidebarWidths = 'common__resizable_sidebar_widths',
 }
 
 export type LocalStorageValues = {
diff --git a/superset-frontend/src/utils/simpleFilterToAdhoc.ts b/superset-frontend/src/utils/simpleFilterToAdhoc.ts
index c3ce6c95e96..a3db14c0743 100644
--- a/superset-frontend/src/utils/simpleFilterToAdhoc.ts
+++ b/superset-frontend/src/utils/simpleFilterToAdhoc.ts
@@ -23,15 +23,15 @@ import {
   SimpleAdhocFilter,
 } from '@superset-ui/core';
 import {
-  CLAUSES,
-  EXPRESSION_TYPES,
+  Clauses,
+  ExpressionTypes,
 } from '../explore/components/controls/FilterControl/types';
 import { OPERATOR_ENUM_TO_OPERATOR_TYPE } from '../explore/constants';
 import { translateToSql } from '../explore/components/controls/FilterControl/utils/translateToSQL';
 
 export const simpleFilterToAdhoc = (
   filterClause: QueryObjectFilterClause,
-  clause: CLAUSES = CLAUSES.WHERE,
+  clause: Clauses = Clauses.Where,
 ) => {
   let result: AdhocFilter;
   if (isAdhocColumn(filterClause.col)) {
@@ -39,7 +39,7 @@ export const simpleFilterToAdhoc = (
       expressionType: 'SQL',
       clause,
       sqlExpression: translateToSql({
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
         subject: `(${filterClause.col.sqlExpression})`,
         operator: filterClause.op,
         comparator: 'val' in filterClause ? filterClause.val : undefined,
diff --git a/superset-frontend/src/views/CRUD/types.ts b/superset-frontend/src/views/CRUD/types.ts
index 2fff111b47c..fd937135556 100644
--- a/superset-frontend/src/views/CRUD/types.ts
+++ b/superset-frontend/src/views/CRUD/types.ts
@@ -110,24 +110,24 @@ export interface QueryObject {
 }
 
 export enum QueryObjectColumns {
-  id = 'id',
-  changed_on = 'changed_on',
-  changed_by = 'changed_by',
-  database = 'database',
-  database_name = 'database.database_name',
-  schema = 'schema',
-  sql = 'sql',
-  executed_sql = 'executed_sql',
-  sql_tables = 'sql_tables',
-  status = 'status',
-  tab_name = 'tab_name',
-  user = 'user',
-  user_first_name = 'user.first_name',
-  start_time = 'start_time',
-  end_time = 'end_time',
-  rows = 'rows',
-  tmp_table_name = 'tmp_table_name',
-  tracking_url = 'tracking_url',
+  Id = 'id',
+  ChangedOn = 'changed_on',
+  ChangedBy = 'changed_by',
+  Database = 'database',
+  DatabaseName = 'database.database_name',
+  Schema = 'schema',
+  Sql = 'sql',
+  ExecutedSql = 'executed_sql',
+  SqlTables = 'sql_tables',
+  Status = 'status',
+  TabName = 'tab_name',
+  User = 'user',
+  UserFirstName = 'user.first_name',
+  StartTime = 'start_time',
+  EndTime = 'end_time',
+  Rows = 'rows',
+  TmpTableName = 'tmp_table_name',
+  TrackingUrl = 'tracking_url',
 }
 
 export type ImportResourceName =
diff --git a/superset-frontend/src/views/routes.tsx b/superset-frontend/src/views/routes.tsx
index 63d502fed08..f1d6ccc9bd2 100644
--- a/superset-frontend/src/views/routes.tsx
+++ b/superset-frontend/src/views/routes.tsx
@@ -227,7 +227,7 @@ export const routes: Routes = [
   },
 ];
 
-if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+if (isFeatureEnabled(FeatureFlag.TaggingSystem)) {
   routes.push({
     path: '/superset/all_entities/',
     Component: AllEntities,
diff --git a/superset-frontend/src/views/store.ts b/superset-frontend/src/views/store.ts
index a9c3a9eb13d..e096dc40e6a 100644
--- a/superset-frontend/src/views/store.ts
+++ b/superset-frontend/src/views/store.ts
@@ -108,7 +108,7 @@ const CombinedDatasourceReducers = (
   datasources: DatasourcesState | undefined | { [key: string]: Dataset },
   action: DatasourcesActionPayload | AnyDatasourcesAction | HydrateExplore,
 ) => {
-  if (action.type === DatasourcesAction.SET_DATASOURCES) {
+  if (action.type === DatasourcesAction.SetDatasources) {
     return dashboardDatasources(
       datasources as DatasourcesState | undefined,
       action as DatasourcesActionPayload,
diff --git a/superset-frontend/src/visualizations/presets/MainPreset.js b/superset-frontend/src/visualizations/presets/MainPreset.js
index 98ee67a5d21..7e39f3b5024 100644
--- a/superset-frontend/src/visualizations/presets/MainPreset.js
+++ b/superset-frontend/src/visualizations/presets/MainPreset.js
@@ -82,7 +82,7 @@ import TimeTableChartPlugin from '../TimeTable';
 export default class MainPreset extends Preset {
   constructor() {
     const experimentalPlugins = isFeatureEnabled(
-      FeatureFlag.CHART_PLUGINS_EXPERIMENTAL,
+      FeatureFlag.ChartPluginsExperimental,
     )
       ? [new PopKPIPlugin().configure({ key: 'pop_kpi' })]
       : [];