You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by vi...@apache.org on 2024/02/01 01:40:51 UTC

(superset) branch master updated: chore: make TS enums strictly PascalCase (#26875)

This is an automated email from the ASF dual-hosted git repository.

villebro pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 19f8405bc0 chore: make TS enums strictly PascalCase (#26875)
19f8405bc0 is described below

commit 19f8405bc07127b5e67118cbbaec5dfce2cd349d
Author: Ville Brofeldt <33...@users.noreply.github.com>
AuthorDate: Wed Jan 31 17:40:44 2024 -0800

    chore: make TS enums strictly PascalCase (#26875)
---
 superset-frontend/.eslintrc.js                     |  11 ++
 .../components/ColumnTypeLabel/ColumnTypeLabel.tsx |   8 +-
 .../superset-ui-chart-controls/src/constants.ts    |   8 +-
 .../superset-ui-chart-controls/src/fixtures.ts     |  10 +-
 .../src/shared-controls/customControls.tsx         |   6 +-
 .../superset-ui-chart-controls/src/types.ts        |  36 ++--
 .../src/utils/getColorFormatters.ts                |  36 ++--
 .../test/components/ColumnOption.test.tsx          |   6 +-
 .../test/components/ColumnTypeLabel.test.tsx       |  10 +-
 .../test/utils/checkColumnType.test.ts             |  12 +-
 .../test/utils/columnChoices.test.tsx              |   6 +-
 .../test/utils/getColorFormatters.test.ts          |  44 ++---
 .../test/utils/getTemporalColumns.test.ts          |   2 +-
 .../registries/ChartBuildQueryRegistrySingleton.ts |   2 +-
 .../registries/ChartComponentRegistrySingleton.ts  |   2 +-
 .../registries/ChartMetadataRegistrySingleton.ts   |   2 +-
 .../ChartTransformPropsRegistrySingleton.ts        |   2 +-
 .../superset-ui-core/src/chart/types/Base.ts       |  38 ++--
 .../src/color/CategoricalColorScale.ts             |   4 +-
 .../src/color/ColorSchemeRegistry.ts               |   2 +-
 .../src/color/SharedLabelColorSingleton.ts         |  10 +-
 .../src/components/SafeMarkdown.tsx                |   2 +-
 .../superset-ui-core/src/models/Registry.ts        |  16 +-
 .../src/number-format/NumberFormatterRegistry.ts   |   2 +-
 .../superset-ui-core/src/query/api/v1/types.ts     |  24 +--
 .../src/query/extractQueryFields.ts                |   6 +-
 .../superset-ui-core/src/query/types/Dashboard.ts  |  12 +-
 .../superset-ui-core/src/query/types/Query.ts      |  56 +++---
 .../src/query/types/QueryFormData.ts               |   4 +-
 .../src/query/types/QueryResponse.ts               |   8 +-
 .../src/time-format/TimeFormatterRegistry.ts       |   2 +-
 .../superset-ui-core/src/utils/featureFlags.ts     |  69 ++++----
 .../test/chart/models/ChartProps.test.ts           |   2 +-
 .../test/color/CategoricalColorScale.test.ts       |   8 +-
 .../test/color/SharedLabelColorSingleton.test.ts   |  10 +-
 .../packages/superset-ui-core/test/fixtures.ts     |   2 +-
 .../superset-ui-core/test/models/Registry.test.ts  |   8 +-
 .../test/query/api/v1/handleError.test.ts          |   2 +-
 .../test/query/extractQueryFields.test.ts          |   6 +-
 .../test/query/types/Dashboard.test.ts             |   4 +-
 .../test/utils/featureFlag.test.ts                 |   6 +-
 .../stories/plugins/plugin-chart-table/testData.ts |   8 +-
 .../src/transformProps.js                          |   4 +-
 .../legacy-plugin-chart-world-map/src/WorldMap.js  |   2 +-
 .../src/controlPanel.ts                            |  10 +-
 .../legacy-plugin-chart-world-map/src/index.js     |   6 +-
 .../legacy-plugin-chart-world-map/src/utils.ts     |   4 +-
 .../src/utilities/Shared_DeckGL.jsx                |   4 +-
 .../legacy-preset-chart-nvd3/src/Area/index.js     |   2 +-
 .../legacy-preset-chart-nvd3/src/Bar/index.js      |   2 +-
 .../legacy-preset-chart-nvd3/src/Bubble/index.js   |   2 +-
 .../legacy-preset-chart-nvd3/src/DistBar/index.js  |   2 +-
 .../legacy-preset-chart-nvd3/src/Line/index.js     |   2 +-
 .../legacy-preset-chart-nvd3/src/Pie/index.js      |   2 +-
 .../src/BigNumber/BigNumberTotal/controlPanel.ts   |   2 +-
 .../src/BigNumber/BigNumberTotal/index.ts          |   2 +-
 .../src/BigNumber/BigNumberTotal/transformProps.ts |   4 +-
 .../src/BigNumber/BigNumberWithTrendline/index.ts  |   2 +-
 .../BigNumberWithTrendline/transformProps.ts       |   4 +-
 .../plugin-chart-echarts/src/BoxPlot/index.ts      |   6 +-
 .../plugin-chart-echarts/src/Bubble/index.ts       |   2 +-
 .../src/Bubble/transformProps.ts                   |   4 +-
 .../src/Funnel/controlPanel.tsx                    |  11 +-
 .../plugin-chart-echarts/src/Funnel/index.ts       |   6 +-
 .../src/Funnel/transformProps.ts                   |   6 +-
 .../plugin-chart-echarts/src/Funnel/types.ts       |   6 +-
 .../plugin-chart-echarts/src/Gauge/index.ts        |   6 +-
 .../plugin-chart-echarts/src/Graph/index.ts        |   6 +-
 .../src/MixedTimeseries/EchartsMixedTimeseries.tsx |   4 +-
 .../src/MixedTimeseries/index.ts                   |   6 +-
 .../src/MixedTimeseries/transformProps.ts          |   7 +-
 .../plugins/plugin-chart-echarts/src/Pie/index.ts  |   6 +-
 .../src/Radar/controlPanel.tsx                     |   2 +-
 .../plugin-chart-echarts/src/Radar/index.ts        |   6 +-
 .../plugin-chart-echarts/src/Sunburst/index.ts     |   6 +-
 .../src/Timeseries/Area/index.ts                   |   6 +-
 .../src/Timeseries/EchartsTimeseries.tsx           |   4 +-
 .../src/Timeseries/Regular/Bar/controlPanel.tsx    |  12 +-
 .../src/Timeseries/Regular/Bar/index.ts            |   6 +-
 .../src/Timeseries/Regular/Line/index.ts           |   6 +-
 .../src/Timeseries/Regular/Scatter/index.ts        |   6 +-
 .../src/Timeseries/Regular/SmoothLine/index.ts     |   6 +-
 .../src/Timeseries/Step/index.ts                   |   6 +-
 .../src/Timeseries/constants.ts                    |   2 +-
 .../plugin-chart-echarts/src/Timeseries/index.ts   |   6 +-
 .../src/Timeseries/transformProps.ts               |  10 +-
 .../plugin-chart-echarts/src/Timeseries/types.ts   |   4 +-
 .../plugin-chart-echarts/src/Treemap/index.ts      |   6 +-
 .../plugin-chart-echarts/src/Waterfall/index.ts    |   2 +-
 .../src/Waterfall/transformProps.ts                |   2 +-
 .../plugin-chart-echarts/src/utils/annotation.ts   |   4 +-
 .../plugin-chart-echarts/src/utils/series.ts       |  16 +-
 .../test/Funnel/transformProps.test.ts             |  20 +--
 .../test/utils/annotation.test.ts                  |   6 +-
 .../plugin-chart-echarts/test/utils/series.test.ts |  42 ++---
 .../src/plugin/controls/queryMode.tsx              |   4 +-
 .../src/plugin/controls/shared.ts                  |   8 +-
 .../src/PivotTableChart.tsx                        |   4 +-
 .../plugin-chart-pivot-table/src/plugin/index.ts   |   6 +-
 .../src/plugin/transformProps.ts                   |   2 +-
 .../src/DataTable/hooks/useSticky.tsx              |  10 +-
 .../plugins/plugin-chart-table/src/TableChart.tsx  |   4 +-
 .../plugins/plugin-chart-table/src/buildQuery.ts   |  10 +-
 .../plugin-chart-table/src/controlPanel.tsx        |  14 +-
 .../plugins/plugin-chart-table/src/index.ts        |   6 +-
 .../plugin-chart-table/src/transformProps.ts       |  12 +-
 .../plugin-chart-table/src/utils/formatValue.ts    |   2 +-
 .../plugin-chart-table/test/buildQuery.test.ts     |  12 +-
 .../plugins/plugin-chart-table/test/testData.ts    |  18 +-
 .../spec/fixtures/mockDashboardInfo.js             |   2 +-
 .../spec/fixtures/mockNativeFilters.ts             |   4 +-
 superset-frontend/spec/fixtures/mockStore.js       |   4 +-
 superset-frontend/src/SqlLab/actions/sqlLab.js     |  28 +--
 .../components/KeyboardShortcutButton/index.tsx    |  56 +++---
 .../src/SqlLab/components/ResultSet/index.tsx      |  37 ++--
 .../SqlLab/components/SaveDatasetModal/index.tsx   |  10 +-
 .../SqlLab/components/ShareSqlLabQuery/index.tsx   |   4 +-
 .../src/SqlLab/components/SouthPane/index.tsx      |   2 +-
 .../src/SqlLab/components/SqlEditor/index.tsx      |  65 ++++---
 .../SqlLab/components/SqlEditorLeftBar/index.tsx   |   4 +-
 .../SqlLab/components/TabbedSqlEditors/index.jsx   |   4 +-
 .../components/TableElement/TableElement.test.tsx  |   2 +-
 superset-frontend/src/SqlLab/fixtures.ts           |  28 +--
 .../middlewares/persistSqlLabStateEnhancer.js      |   2 +-
 .../src/SqlLab/reducers/getInitialState.ts         |   2 +-
 superset-frontend/src/SqlLab/reducers/sqlLab.js    |  24 +--
 .../src/SqlLab/reducers/sqlLab.test.js             |   6 +-
 superset-frontend/src/SqlLab/types.ts              |   8 +-
 superset-frontend/src/components/Chart/Chart.jsx   |   4 +-
 .../Chart/ChartContextMenu/ChartContextMenu.tsx    |   8 +-
 .../Chart/ChartContextMenu/useContextMenu.test.tsx |   6 +-
 .../src/components/Chart/ChartRenderer.jsx         |   8 +-
 .../Chart/DrillBy/DrillByMenuItems.test.tsx        |   2 +-
 .../components/Chart/DrillBy/DrillByMenuItems.tsx  |   2 +-
 .../Chart/DrillDetail/DrillDetailMenuItems.tsx     |   2 +-
 .../Chart/DrillDetail/DrillDetailPane.tsx          |   8 +-
 .../src/components/Chart/chartAction.js            |   4 +-
 .../src/components/Chart/chartReducer.ts           |   2 +-
 .../src/components/Datasource/CollectionTable.tsx  |  16 +-
 .../src/components/Datasource/DatasourceEditor.jsx |  10 +-
 .../src/components/Datasource/DatasourceModal.tsx  |   2 +-
 .../src/components/Dropdown/index.tsx              |  10 +-
 .../src/components/DynamicPlugins/index.tsx        |   4 +-
 .../getErrorMessageComponentRegistry.ts            |   2 +-
 .../src/components/FilterableTable/index.tsx       |   2 +-
 superset-frontend/src/components/ListView/types.ts |  56 +++---
 .../src/components/MessageToasts/Toast.tsx         |   6 +-
 .../src/components/MessageToasts/actions.ts        |   8 +-
 .../MessageToasts/getToastsFromPyFlashMessages.js  |   4 +-
 .../getToastsFromPyFlashMessages.test.js           |   6 +-
 .../components/MessageToasts/mockMessageToasts.js  |   4 +-
 .../src/components/MessageToasts/types.ts          |   8 +-
 .../src/components/MetadataBar/ContentConfig.tsx   |  16 +-
 .../src/components/MetadataBar/ContentType.ts      |  32 ++--
 .../components/MetadataBar/MetadataBar.stories.mdx |  32 ++--
 .../components/MetadataBar/MetadataBar.stories.tsx |  10 +-
 .../components/MetadataBar/MetadataBar.test.tsx    |  16 +-
 .../ResizableSidebar/useStoredSidebarWidth.test.ts |   6 +-
 .../ResizableSidebar/useStoredSidebarWidth.ts      |   4 +-
 .../src/components/Table/Table.stories.tsx         |  46 ++---
 .../src/components/Table/Table.test.tsx            |   2 +-
 .../src/components/Table/VirtualTable.tsx          |   4 +-
 .../Table/cell-renderers/ActionCell/index.tsx      |   2 +-
 .../NumericCell/NumericCell.stories.tsx            |   4 +-
 .../NumericCell/NumericCell.test.tsx               |   4 +-
 .../Table/cell-renderers/NumericCell/index.tsx     |  99 +++++------
 superset-frontend/src/components/Table/index.tsx   |  26 +--
 .../src/dashboard/actions/dashboardState.js        |   8 +-
 .../src/dashboard/actions/datasources.ts           |  12 +-
 superset-frontend/src/dashboard/actions/hydrate.js |   8 +-
 .../components/AddSliceCard/AddSliceCard.test.tsx  |   4 +-
 .../components/AddSliceCard/AddSliceCard.tsx       |   2 +-
 .../src/dashboard/components/Dashboard.jsx         |   2 +-
 .../DashboardBuilder/DashboardBuilder.tsx          |  22 +--
 .../src/dashboard/components/Header/index.jsx      |   2 +-
 .../dashboard/components/PropertiesModal/index.tsx |  12 +-
 .../src/dashboard/components/SliceAdder.jsx        |   7 +-
 .../SliceHeaderControls.test.tsx                   |  18 +-
 .../components/SliceHeaderControls/index.tsx       |   8 +-
 .../SyncDashboardState/SyncDashboardState.test.tsx |   2 +-
 .../components/SyncDashboardState/index.tsx        |   4 +-
 .../dashboard/components/gridComponents/Row.jsx    |   2 +-
 .../FilterBar/ActionButtons/index.tsx              |   4 +-
 .../FilterBar/CrossFilters/CrossFilter.test.tsx    |   2 +-
 .../FilterBar/CrossFilters/CrossFilter.tsx         |   6 +-
 .../FilterBar/CrossFilters/CrossFilterTag.test.tsx |   2 +-
 .../FilterBar/CrossFilters/CrossFilterTag.tsx      |   2 +-
 .../CrossFilters/CrossFilterTitle.test.tsx         |   2 +-
 .../FilterBar/CrossFilters/CrossFilterTitle.tsx    |   2 +-
 .../FilterBar/CrossFilters/VerticalCollapse.tsx    |   2 +-
 .../nativeFilters/FilterBar/FilterBar.test.tsx     |   2 +-
 .../FilterBarSettings/FilterBarSettings.test.tsx   |  28 +--
 .../FilterBar/FilterBarSettings/index.tsx          |  10 +-
 .../FilterBar/FilterControls/FilterControl.tsx     |   8 +-
 .../FilterBar/FilterControls/FilterControls.tsx    |  12 +-
 .../FilterControls/FilterDivider.stories.tsx       |   2 +-
 .../FilterControls/FilterDivider.test.tsx          |   8 +-
 .../FilterBar/FilterControls/FilterDivider.tsx     |   4 +-
 .../FilterBar/FilterControls/FilterValue.tsx       |   6 +-
 .../FilterBar/FiltersDropdownContent/index.tsx     |   4 +-
 .../nativeFilters/FilterBar/Horizontal.tsx         |   2 +-
 .../FilterBar/HorizontalFilterBar.test.tsx         |   2 +-
 .../nativeFilters/FilterBar/Vertical.tsx           |   2 +-
 .../components/nativeFilters/FilterBar/index.tsx   |   4 +-
 .../nativeFilters/FilterCard/FilterCard.test.tsx   |   6 +-
 .../FiltersConfigModal/DividerConfigForm.tsx       |   2 +-
 .../FiltersConfigModal/FilterTitlePane.tsx         |   4 +-
 .../FiltersConfigForm/DefaultValue.tsx             |   4 +-
 .../FiltersConfigForm/FilterScope/FilterScope.tsx  |  20 +--
 .../FiltersConfigForm/FilterScope/types.ts         |   4 +-
 .../FiltersConfigForm/FiltersConfigForm.tsx        |  10 +-
 .../FiltersConfigForm/constants.ts                 |  16 +-
 .../FiltersConfigForm/getControlItemsMap.test.tsx  |   2 +-
 .../FiltersConfigModal/FiltersConfigForm/utils.ts  |   2 +-
 .../nativeFilters/FiltersConfigModal/state.ts      |   2 +-
 .../nativeFilters/FiltersConfigModal/types.ts      |   4 +-
 .../nativeFilters/FiltersConfigModal/utils.ts      |   6 +-
 .../components/nativeFilters/selectors.ts          |   6 +-
 .../components/nativeFilters/utils.test.ts         |  14 +-
 .../dashboard/components/nativeFilters/utils.ts    |   8 +-
 .../src/dashboard/containers/DashboardPage.tsx     |   4 +-
 .../src/dashboard/fixtures/mockNativeFilters.ts    |   2 +-
 .../src/dashboard/reducers/datasources.ts          |   4 +-
 superset-frontend/src/dashboard/types.ts           |   4 +-
 superset-frontend/src/dashboard/util/constants.ts  |   8 +-
 .../src/dashboard/util/crossFilters.test.ts        |  10 +-
 .../src/dashboard/util/crossFilters.ts             |   6 +-
 .../src/dashboard/util/getDashboardUrl.test.js     |  12 +-
 .../src/dashboard/util/permissionUtils.test.ts     |   4 +-
 .../src/dashboard/util/permissionUtils.ts          |   2 +-
 superset-frontend/src/dataMask/reducer.ts          |   2 +-
 .../src/explore/actions/saveModalActions.js        |   6 +-
 .../src/explore/components/ChartPills.tsx          |  11 +-
 .../explore/components/ControlPanelsContainer.tsx  |  10 +-
 .../explore/components/DataTableControl/index.tsx  |   6 +-
 .../DataTableControl/useTableColumns.test.ts       |  12 +-
 .../explore/components/DataTableControl/utils.ts   |  15 +-
 .../components/DataTablesPane/DataTablesPane.tsx   |   8 +-
 .../components/DataTableControls.tsx               |   2 +-
 .../DataTablesPane/test/DataTablesPane.test.tsx    |   4 +-
 .../components/DatasourcePanel/fixtures.tsx        |   6 +-
 .../ExploreChartHeader/ExploreChartHeader.test.tsx |   2 +-
 .../components/ExploreChartHeader/index.jsx        |   8 +-
 .../ExploreChartPanel/ExploreChartPanel.test.jsx   |   2 +-
 .../explore/components/ExploreChartPanel/index.jsx |  10 +-
 .../components/ExploreViewContainer/index.jsx      |  12 +-
 .../components/ExportToCSVDropdown/index.tsx       |  14 +-
 .../explore/components/PropertiesModal/index.tsx   |   8 +-
 .../ColumnConfigControl/ColumnConfigPopover.tsx    |   2 +-
 .../controls/ColumnConfigControl/constants.tsx     |   8 +-
 .../ConditionalFormattingControl.tsx               |  20 +--
 .../FormattingPopoverContent.tsx                   |  40 ++---
 .../controls/ConditionalFormattingControl/types.ts |  25 +--
 .../ContourControl/ContourPopoverControl.tsx       |  20 +--
 .../controls/DateFilterControl/DateFilterLabel.tsx |  14 +-
 .../DateFilterControl/components/CommonFrame.tsx   |   7 +-
 .../tests/DateFilterLabel.test.tsx                 |  10 +-
 .../controls/DateFilterControl/utils/constants.ts  |  14 +-
 .../DndFilterSelect.test.tsx                       |   6 +-
 .../DndColumnSelectControl/DndFilterSelect.tsx     |  42 ++---
 .../DndColumnSelectControl/DndMetricSelect.tsx     |   8 +-
 .../FilterControl/AdhocFilter/AdhocFilter.test.js  |  92 +++++-----
 .../controls/FilterControl/AdhocFilter/index.js    |  27 ++-
 .../AdhocFilterControl/AdhocFilterControl.test.jsx |  28 +--
 .../FilterControl/AdhocFilterControl/index.jsx     |  20 +--
 .../AdhocFilterEditPopover.test.jsx                |  14 +-
 .../FilterControl/AdhocFilterEditPopover/index.jsx |   6 +-
 ...AdhocFilterEditPopoverSimpleTabContent.test.tsx |  84 ++++-----
 .../index.tsx                                      |  62 ++++---
 .../AdhocFilterEditPopoverSqlTabContent.test.jsx   |  10 +-
 .../AdhocFilterEditPopoverSqlTabContent/index.jsx  |   8 +-
 .../AdhocFilterOption/AdhocFilterOption.test.tsx   |   6 +-
 .../AdhocFilterPopoverTrigger.test.tsx             |   6 +-
 .../controls/FilterControl/adhocFilterType.js      |  10 +-
 .../components/controls/FilterControl/types.ts     |  12 +-
 .../controls/FilterControl/utils/translateToSQL.ts |   2 +-
 .../utils/useGetTimeRangeLabel.test.ts             |  30 ++--
 .../FilterControl/utils/useGetTimeRangeLabel.tsx   |  12 +-
 .../controls/VizTypeControl/VizTypeGallery.tsx     |  35 ++--
 .../useExploreAdditionalActionsMenu/index.jsx      |   2 +-
 superset-frontend/src/explore/constants.ts         |  97 ++++++-----
 .../src/explore/exploreUtils/exploreUtils.test.jsx |   2 +-
 .../exploreUtils/getSimpleSQLExpression.test.ts    |   4 +-
 .../src/explore/exploreUtils/index.js              |   2 +-
 .../src/features/alerts/AlertReportModal.tsx       |   2 +-
 superset-frontend/src/features/alerts/types.ts     |   4 +-
 .../src/features/charts/ChartCard.tsx              |   2 +-
 .../src/features/dashboards/DashboardCard.tsx      |   2 +-
 .../DatabaseConnectionForm/EncryptedField.tsx      |  12 +-
 .../databases/DatabaseModal/SSHTunnelForm.tsx      |  10 +-
 .../databases/DatabaseModal/SSHTunnelSwitch.tsx    |   2 +-
 .../databases/DatabaseModal/index.test.tsx         |  60 +++----
 .../src/features/databases/DatabaseModal/index.tsx | 191 ++++++++++-----------
 superset-frontend/src/features/databases/types.ts  |   8 +-
 .../AddDataset/DatasetPanel/DatasetPanel.tsx       |   4 +-
 .../AddDataset/EditDataset/UsageTab/index.tsx      |   4 +-
 .../features/datasets/AddDataset/Header/index.tsx  |   2 +-
 .../datasets/AddDataset/LeftPanel/index.tsx        |   8 +-
 .../src/features/datasets/AddDataset/types.tsx     |  16 +-
 .../datasets/metadataBar/useDatasetMetadataBar.tsx |  18 +-
 .../src/features/home/ActivityTable.tsx            |   6 +-
 superset-frontend/src/features/home/ChartTable.tsx |   8 +-
 .../src/features/home/DashboardTable.tsx           |   8 +-
 superset-frontend/src/features/home/Menu.tsx       |  16 +-
 .../src/features/home/RightMenu.test.tsx           |   6 +-
 superset-frontend/src/features/home/RightMenu.tsx  |  10 +-
 superset-frontend/src/features/home/types.ts       |   6 +-
 .../features/queries/QueryPreviewModal.test.tsx    |   2 +-
 .../HeaderReportDropdown/index.test.tsx            |   2 +-
 .../ReportModal/HeaderReportDropdown/index.tsx     |  12 +-
 .../reports/ReportModal/ReportModal.test.tsx       |   2 +-
 .../src/features/reports/ReportModal/index.tsx     |  16 +-
 superset-frontend/src/features/reports/types.ts    |   8 +-
 .../features/rls/RowLevelSecurityModal.test.tsx    |   6 +-
 .../src/features/rls/RowLevelSecurityModal.tsx     |   4 +-
 superset-frontend/src/features/rls/types.ts        |   4 +-
 superset-frontend/src/features/tags/TagCard.tsx    |   2 +-
 .../components/Range/RangeFilterPlugin.stories.tsx |   4 +-
 .../components/Range/RangeFilterPlugin.test.tsx    |   8 +-
 .../filters/components/Range/RangeFilterPlugin.tsx |   6 +-
 .../src/filters/components/Range/buildQuery.ts     |   4 +-
 .../src/filters/components/Range/index.ts          |   2 +-
 .../components/Select/SelectFilterPlugin.test.tsx  |   2 +-
 .../components/Select/SelectFilterPlugin.tsx       |   6 +-
 .../filters/components/Select/buildQuery.test.ts   |   4 +-
 .../src/filters/components/Select/buildQuery.ts    |   4 +-
 .../src/filters/components/Select/index.ts         |   2 +-
 .../src/filters/components/Time/index.ts           |   2 +-
 .../TimeColumn/TimeColumnFilterPlugin.tsx          |   2 +-
 .../src/filters/components/TimeColumn/index.ts     |   2 +-
 .../src/filters/components/TimeGrain/index.ts      |   2 +-
 superset-frontend/src/filters/utils.test.ts        |  88 +++++-----
 superset-frontend/src/filters/utils.ts             |  14 +-
 .../src/hooks/apiResources/apiResources.test.ts    |  16 +-
 .../src/hooks/apiResources/apiResources.ts         |  22 +--
 superset-frontend/src/middleware/asyncEvent.ts     |   2 +-
 .../src/pages/AlertReportList/index.tsx            |  12 +-
 superset-frontend/src/pages/AllEntities/index.tsx  |   6 +-
 .../src/pages/AnnotationLayerList/index.tsx        |   6 +-
 superset-frontend/src/pages/Chart/Chart.test.tsx   |   2 +-
 superset-frontend/src/pages/Chart/index.tsx        |   6 +-
 superset-frontend/src/pages/ChartList/index.tsx    |  32 ++--
 .../src/pages/CssTemplateList/index.tsx            |   6 +-
 .../src/pages/DashboardList/index.tsx              |  26 +--
 superset-frontend/src/pages/DatabaseList/index.tsx |  12 +-
 .../src/pages/DatasetCreation/index.tsx            |   8 +-
 superset-frontend/src/pages/DatasetList/index.tsx  |  16 +-
 superset-frontend/src/pages/Home/index.tsx         |   8 +-
 .../QueryHistoryList/QueryHistoryList.test.tsx     |   2 +-
 .../src/pages/QueryHistoryList/index.tsx           |  52 +++---
 .../src/pages/RowLevelSecurityList/index.tsx       |  10 +-
 .../src/pages/SavedQueryList/index.tsx             |  16 +-
 superset-frontend/src/pages/SqlLab/index.tsx       |   2 +-
 superset-frontend/src/pages/Tags/index.tsx         |  10 +-
 .../src/utils/isDashboardVirtualizationEnabled.ts  |  14 +-
 .../src/utils/localStorageHelpers.test.ts          |   6 +-
 superset-frontend/src/utils/localStorageHelpers.ts |  32 ++--
 superset-frontend/src/utils/simpleFilterToAdhoc.ts |   8 +-
 superset-frontend/src/views/CRUD/types.ts          |  36 ++--
 superset-frontend/src/views/routes.tsx             |   2 +-
 superset-frontend/src/views/store.ts               |   2 +-
 .../src/visualizations/presets/MainPreset.js       |   2 +-
 362 files changed, 2001 insertions(+), 2031 deletions(-)

diff --git a/superset-frontend/.eslintrc.js b/superset-frontend/.eslintrc.js
index 5d15f87e42..45274955ea 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 19ae7bd78d..5962e94270 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 1aefc25464..4230d6683f 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 b12d5be048..efdfef6c4f 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 b0f3006353..7fb4f9a8b9 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 8aa475a7f9..546936ee75 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 1a6aa140a6..4e5e89fe41 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 b1fb4b2653..ff146862b8 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 8369a79096..07cbfa7a23 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 44ebbf605c..71b95f1545 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 de5bb1ab69..2fac0e60e7 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 7daa3f968d..6551e815d7 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 f0a6529de7..0379e05946 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 1c5a5ca02d..d94f2b37ae 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 ce7eba5b3f..0375a19bde 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 bebcb5c5e1..8c87661580 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 15542ad9c1..6bc11fc42f 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 b3884a8488..b24e5e850e 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 5004dce2dd..8b8cd02519 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 e270ff6f0e..2601be82e5 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 bc417e6036..4837d0f362 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 2b36802d4b..e7fbe9ee5e 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 e876bc2b50..53aff08c4a 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 e64796ad33..db3ab11cec 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 09ef1bc7d6..37cc002c41 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 bbd173e617..6cb0af8eec 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 40939a1f50..cb299c3ac9 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 1271be2fff..488caaa600 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 1806f567ec..ea2f0d082c 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 e4869805f8..1705814df1 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 1df1696306..e99517e8de 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 f21d20650c..d913a0ad19 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 ca7bcf94bd..f9bd7d76a3 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 0d98198de1..48e43d8351 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 88610874db..8f89ae8a69 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 c4d3cc6d1b..c2c791531e 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 11c2e65eb5..6f2067eec3 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 eec7a47b9a..72b1a0f411 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 56004a06e7..4e29013716 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 f72bff490f..79d7980940 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 bad77690a4..12a644c062 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 fd5245f691..0ae466efd1 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 fa531ef9da..0ec12b6c4d 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 540097be24..6b69c6b2d8 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 2ca11373f3..82d8dcb1e2 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 95eb6b59fd..8c2cf10d4f 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 b558b15b97..e8ac50e09c 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 5b307efd90..723407c5ad 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 ba20a958c9..b85a645792 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 33436be148..d2f14b4b71 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 c2916c7a42..f3cf1f2435 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 66b98e4ccc..b29277f8c7 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 51db67edf2..c848e7accd 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 75b66fb933..408656ea12 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 39b97bfd3d..f949182a51 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 d92283d7cc..5137f81920 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 4a68e1ff9f..757ecd3e61 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 80a21ad229..2f8da6ef0f 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 ce35b65761..c5e9e70426 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 dc99304817..abe6fcd67b 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 c07776c4ac..362e75556a 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 754b26003b..7731e095e0 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 da0b066753..9cad10bf1e 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 9660f52571..d679aa150b 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 df43fe0a83..dbfb33b2e4 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 5159562234..18a40267cf 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 78f6c386c8..2d24185680 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 d95f3dd98e..bdab9b6da8 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 9c871407ff..0d04de15ba 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 f87d841329..3ebc7c4f0d 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 1d4eceb33f..cbe821d936 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 7380f575e8..6c022ec723 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 3b423c5128..6289397436 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 70f94f42f9..5a919febbc 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 43309d5d27..94fb33c904 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 b0fdfed0fb..eb3564bb91 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 0223382193..78a5736708 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 50cf3549fc..ba2f873a17 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 8057c8f0df..6e1962b4cf 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 e83f19e59d..c778e0719b 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 753f9150d5..931a790cc0 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 de6a1d38a9..320e4752e4 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 91deb322be..c581da3e00 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 839bc607f7..96efd4a06a 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 dace33a108..33623952e7 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 a5c380c5ff..b9e04b2e85 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 692abb2c79..dbecb483da 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 d0359aff96..e461e68605 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 b8c66fabb1..f0f2e9e5cb 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 84fbbf6cb9..edc29363f2 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 d3d858d979..df6515d204 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 8c87bf4333..cebfe374d9 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 9c1d35cdd3..4d326ab302 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 59afebd736..fd2f4acf24 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 10768a47f8..6e4848643e 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 b895b97f28..87178cc466 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 5f364a2880..2c65c47801 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 32f10b0771..c727e0cfca 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 6963c67f0d..c890c1a8f6 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 76c58b895f..b7f4451ce4 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 6120e19803..857af565e9 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 d106e42a84..785e34f631 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 b8102a0ceb..69631a5f35 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 bb608e1c05..ad39b504cb 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 3d7b1dcea7..ce250aa87c 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 e76201cac3..c0eacfb513 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 139f92336c..43cddad0a5 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 e196eae108..a86f7d181b 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 1f255703f5..24abc3381e 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 b2f9f11832..4fd599ea3b 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 1ff78467d6..070f48ab06 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 1689555dd5..df464f7b7b 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 e93538959d..9cfd76e2e2 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 0599793d86..764884614c 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 58e55a1df7..358802d544 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 8e90f1c664..885265fe8d 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 a123576c3e..8f4cde1a66 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 38a20f9f6d..9aa0b75755 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 0e6a4845d5..8213253685 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 1a9cb17f97..eff67d49b1 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 35479c48b5..0bd60fff7e 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 e25d88f5dc..9d3e5f71c5 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 7a08c51876..24d512a1b3 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 d1bec5e0c1..25dda5cd3d 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 8f21a3ff10..8450060fac 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 1d799c559d..40a4dfb29d 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 e1a234734b..485094adaf 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 ec2580f870..6b150c2ba5 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 401fa52f27..4b8e82975e 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 ce8bb9d7d7..c03b1a1301 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 0d65bb6038..2e7937ffbd 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 006dd54fcb..84339f3e05 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 485e19652c..41cc6b3c08 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 3354241ef8..2fe711474e 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 73f3a028e9..6ef9b331e6 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 d337e9b013..9ae9308816 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 fbb790824c..f10232bcdd 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 d91d77c49a..997c5bf7b7 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 f1a1422287..13dc0a2ce2 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 2bc92d7c0c..cc18ec0fe4 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 3e3acde4b2..e318821a5b 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 1e2e03ceb2..8646473437 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 9134e73fda..791cebc480 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 e21a9d37a7..9f69f9ab2d 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 d89a65ad32..d731313bde 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 0c1314f263..005d8fde7c 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 c248a2427b..37ba148feb 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 37fcf80f17..8bae97fb68 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 982df17100..e6398b4e38 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 d19ac0c5d5..fe2ea294f9 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 4604e5de6c..b06fd0c49f 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 fd4b27074b..07090ea46d 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 f6d6178111..64fdca72cd 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 f5428aa61f..b4fcb103f0 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 d85c2c6226..1942dd059d 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 1b5fb33d96..27149b9f2f 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 7a7f7430f2..ce3be8df16 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 347cfd8b9a..74ea8e6151 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 4448d2ec52..360a8cd558 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 4a890aadf4..a2efe4abfc 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 {
-  Table,
-  TableSize,
-  SUPERSET_TABLE_COLUMN,
   ColumnsType,
-  OnChangeFunction,
   ETableAction,
+  OnChangeFunction,
+  SUPERSET_TABLE_COLUMN,
+  Table,
+  TableSize,
 } 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 eded7efeb9..3d20093aed 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 4d4dc2a004..4ac2cef3a3 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 b6ba57420c..e40c700987 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 bb0b52fe62..b1a0d42a1e 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 b76a5bef65..50cadddfba 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 5e6d61aa47..b35dfd5cee 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 12fdcec1d8..c1956395b8 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 fa3eeadf41..bdbf430903 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 42004272cc..f48c124284 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 930280a1f9..7898ad0929 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 3aa22a8408..6a13e72a6c 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 af824bf4c3..5874d65158 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 6e909f3b15..713abfa74f 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 cf50c24db5..ebb4ece2bb 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 e94aa610a1..485185d607 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 3a1421e380..1b5ef5fceb 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 617fd32e8f..b84cc52e02 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 dc94e77cac..31a3cad9f6 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 b1196e7c11..d4b9a1a0b9 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 1565a43e19..063e88975d 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 fd252e83c6..4ad1f3518e 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 ae3db36d1d..d645a1a2cf 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 cb6f17d96d..3c44081a3f 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 85dc3bf705..523f536edc 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 981d99e56d..98f4027ca7 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 b4b0435543..b22d6b3f90 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 d4b0789919..b4562d4470 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 16987440a2..9b6e14964f 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 9221bffe15..867103b028 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 a748f9ed99..ea7ee76ba8 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 99b5fa23f9..42f92522ff 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 8c236c2714..1c5f2ab2c7 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 8aa51f0633..05f57beb6b 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 96f51f5359..bc66d07c08 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 629ec75cb0..a0a6c1231e 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 46e7c03fad..37385ff5e9 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 8491c93d8f..d038ec6380 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 6efe2c4515..0d812ef5d5 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 f44a1a1df6..5041fa3c97 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 0e7ceef6d3..2edfc92db6 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 47f181682f..0b35c146f7 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 09625151a2..898e78da12 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 cb6da807d6..ac7ab58f8b 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 f41f9bc3aa..7bf45f76c5 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 f75612baeb..2c62d69eb5 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 6db4db853e..68912c17b5 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 a080d35645..81a99559e3 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 1733514ac3..56523f811d 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 0682279120..72b73ba848 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 8c9d2a5f3c..31759afc0a 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 e9c0f52cc6..029a95f3ab 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 61beb57537..f66d49685b 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 7a3af4fe26..24cb9763d2 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 b7aa2cab39..b1f35b8a07 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 65c4af3b04..3eda21057b 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 ea4916b53f..6f40ea6542 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 83247e1a30..ed60a957dc 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 ae8a2f7a4d..36f0fd1925 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 be636bf17a..019a9e760c 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 12f6d33e20..0ba28d0a3a 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 3c2e56bec4..c01dc76f1e 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 8d6ded58f1..d1d37cbf6a 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 864641645e..386657455a 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 4f28e72186..13e8d37af8 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 0743d7a5a4..02cd7a991d 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 0e9fc00de8..b88579cc84 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 8e1a706286..903a1f74fb 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 c75f2c98b0..fe60904403 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 c6d707dbb0..29ff675e97 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 4b09710d59..9db6b40c67 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 f2163a54a4..25ecbeb9d4 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 53c8952082..9f4ff94778 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 09595576dd..99f7c5aad5 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 d4b1caccc9..561c7cc7cd 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 b98a495c0a..990356a76f 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 8e51732c2e..e072848334 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 f8e8e42e31..253870b045 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 726f3ea468..15148be880 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 c898988c90..7a02114a2f 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 34dcf01bca..74358af959 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 05909b1e64..1840ad7a67 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 3d9f6b995c..c52d8f4cbe 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 d151459e5d..dba78af035 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 63e139e755..66d524b9f3 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 bc2d83a90a..01e7a1289b 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 0550ba2b29..d3a32a2bd6 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 bd6ff4b756..e1dae92a6f 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 df03165346..ba78dfa037 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 d35f46a671..191351e929 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 684d8faf14..14ceeefde4 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 2b9050c3bd..6c4ae9f412 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 154255eee7..533e185475 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 5d4c511459..4edadf99b4 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 ebcf472221..be605804e7 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 a5ee71f8c2..a1a0a670f6 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 d3de2b9991..06f2cec7de 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 dc7559beec..4ded8a19c4 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 dad77fb9cb..fca0dd3db9 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 0a4606dcb1..f47c3a0101 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 4c9f5b3aaf..5295bd6dae 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 eaf7acfe96..8f489773e8 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 19cc2f783e..ed25e78c12 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 f00491b89f..627cc50c44 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 964f0def00..05ede90353 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 c1a95bc8f2..7b6a3938fd 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 d81abdc079..51c8be3f60 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 34be012f5e..94b04b1114 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 d1e85a30b1..e376963eb6 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 c58d2b2bd1..fcd85b20c9 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 c0837fdb48..9bdd20c0f0 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 2e46e07255..852bfc38b3 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';
 
... 4111 lines suppressed ...