From 19f8405bc07127b5e67118cbbaec5dfce2cd349d Mon Sep 17 00:00:00 2001
From: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Date: Wed, 31 Jan 2024 17:40:44 -0800
Subject: [PATCH] chore: make TS enums strictly PascalCase (#26875)

---
 superset-frontend/.eslintrc.js                |  11 +
 .../ColumnTypeLabel/ColumnTypeLabel.tsx       |   8 +-
 .../src/constants.ts                          |   8 +-
 .../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 +-
 .../ChartBuildQueryRegistrySingleton.ts       |   2 +-
 .../ChartComponentRegistrySingleton.ts        |   2 +-
 .../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 +-
 .../number-format/NumberFormatterRegistry.ts  |   2 +-
 .../src/query/api/v1/types.ts                 |  24 +--
 .../src/query/extractQueryFields.ts           |   6 +-
 .../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 +-
 .../src/utils/featureFlags.ts                 |  69 +++----
 .../test/chart/models/ChartProps.test.ts      |   2 +-
 .../test/color/CategoricalColorScale.test.ts  |   8 +-
 .../color/SharedLabelColorSingleton.test.ts   |  10 +-
 .../superset-ui-core/test/fixtures.ts         |   2 +-
 .../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 +-
 .../plugins/plugin-chart-table/testData.ts    |   8 +-
 .../src/transformProps.js                     |   4 +-
 .../src/WorldMap.js                           |   2 +-
 .../src/controlPanel.ts                       |  10 +-
 .../src/index.js                              |   6 +-
 .../src/utils.ts                              |   4 +-
 .../src/utilities/Shared_DeckGL.jsx           |   4 +-
 .../src/Area/index.js                         |   2 +-
 .../legacy-preset-chart-nvd3/src/Bar/index.js |   2 +-
 .../src/Bubble/index.js                       |   2 +-
 .../src/DistBar/index.js                      |   2 +-
 .../src/Line/index.js                         |   2 +-
 .../legacy-preset-chart-nvd3/src/Pie/index.js |   2 +-
 .../BigNumber/BigNumberTotal/controlPanel.ts  |   2 +-
 .../src/BigNumber/BigNumberTotal/index.ts     |   2 +-
 .../BigNumberTotal/transformProps.ts          |   4 +-
 .../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 +-
 .../EchartsMixedTimeseries.tsx                |   4 +-
 .../src/MixedTimeseries/index.ts              |   6 +-
 .../src/MixedTimeseries/transformProps.ts     |   7 +-
 .../plugin-chart-echarts/src/Pie/index.ts     |   6 +-
 .../src/Radar/controlPanel.tsx                |   2 +-
 .../plugin-chart-echarts/src/Radar/index.ts   |   6 +-
 .../src/Sunburst/index.ts                     |   6 +-
 .../src/Timeseries/Area/index.ts              |   6 +-
 .../src/Timeseries/EchartsTimeseries.tsx      |   4 +-
 .../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 +-
 .../Timeseries/Regular/SmoothLine/index.ts    |   6 +-
 .../src/Timeseries/Step/index.ts              |   6 +-
 .../src/Timeseries/constants.ts               |   2 +-
 .../src/Timeseries/index.ts                   |   6 +-
 .../src/Timeseries/transformProps.ts          |  10 +-
 .../src/Timeseries/types.ts                   |   4 +-
 .../plugin-chart-echarts/src/Treemap/index.ts |   6 +-
 .../src/Waterfall/index.ts                    |   2 +-
 .../src/Waterfall/transformProps.ts           |   2 +-
 .../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 +-
 .../test/utils/series.test.ts                 |  42 ++--
 .../src/plugin/controls/queryMode.tsx         |   4 +-
 .../src/plugin/controls/shared.ts             |   8 +-
 .../src/PivotTableChart.tsx                   |   4 +-
 .../src/plugin/index.ts                       |   6 +-
 .../src/plugin/transformProps.ts              |   2 +-
 .../src/DataTable/hooks/useSticky.tsx         |  10 +-
 .../plugin-chart-table/src/TableChart.tsx     |   4 +-
 .../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 +-
 .../src/utils/formatValue.ts                  |   2 +-
 .../test/buildQuery.test.ts                   |  12 +-
 .../plugin-chart-table/test/testData.ts       |  18 +-
 .../spec/fixtures/mockDashboardInfo.js        |   2 +-
 .../spec/fixtures/mockNativeFilters.ts        |   4 +-
 superset-frontend/spec/fixtures/mockStore.js  |   4 +-
 .../src/SqlLab/actions/sqlLab.js              |  28 +--
 .../KeyboardShortcutButton/index.tsx          |  56 ++---
 .../src/SqlLab/components/ResultSet/index.tsx |  37 ++--
 .../components/SaveDatasetModal/index.tsx     |  10 +-
 .../components/ShareSqlLabQuery/index.tsx     |   4 +-
 .../src/SqlLab/components/SouthPane/index.tsx |   2 +-
 .../src/SqlLab/components/SqlEditor/index.tsx |  65 +++---
 .../components/SqlEditorLeftBar/index.tsx     |   4 +-
 .../components/TabbedSqlEditors/index.jsx     |   4 +-
 .../TableElement/TableElement.test.tsx        |   2 +-
 superset-frontend/src/SqlLab/fixtures.ts      |  28 +--
 .../middlewares/persistSqlLabStateEnhancer.js |   2 +-
 .../src/SqlLab/reducers/getInitialState.ts    |   2 +-
 .../src/SqlLab/reducers/sqlLab.js             |  24 +--
 .../src/SqlLab/reducers/sqlLab.test.js        |   6 +-
 superset-frontend/src/SqlLab/types.ts         |   8 +-
 .../src/components/Chart/Chart.jsx            |   4 +-
 .../ChartContextMenu/ChartContextMenu.tsx     |   8 +-
 .../ChartContextMenu/useContextMenu.test.tsx  |   6 +-
 .../src/components/Chart/ChartRenderer.jsx    |   8 +-
 .../Chart/DrillBy/DrillByMenuItems.test.tsx   |   2 +-
 .../Chart/DrillBy/DrillByMenuItems.tsx        |   2 +-
 .../DrillDetail/DrillDetailMenuItems.tsx      |   2 +-
 .../Chart/DrillDetail/DrillDetailPane.tsx     |   8 +-
 .../src/components/Chart/chartAction.js       |   4 +-
 .../src/components/Chart/chartReducer.ts      |   2 +-
 .../components/Datasource/CollectionTable.tsx |  16 +-
 .../Datasource/DatasourceEditor.jsx           |  10 +-
 .../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 +-
 .../src/components/ListView/types.ts          |  56 ++---
 .../src/components/MessageToasts/Toast.tsx    |   6 +-
 .../src/components/MessageToasts/actions.ts   |   8 +-
 .../getToastsFromPyFlashMessages.js           |   4 +-
 .../getToastsFromPyFlashMessages.test.js      |   6 +-
 .../MessageToasts/mockMessageToasts.js        |   4 +-
 .../src/components/MessageToasts/types.ts     |   8 +-
 .../components/MetadataBar/ContentConfig.tsx  |  16 +-
 .../src/components/MetadataBar/ContentType.ts |  32 +--
 .../MetadataBar/MetadataBar.stories.mdx       |  32 +--
 .../MetadataBar/MetadataBar.stories.tsx       |  10 +-
 .../MetadataBar/MetadataBar.test.tsx          |  16 +-
 .../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 +-
 .../cell-renderers/NumericCell/index.tsx      |  99 ++++-----
 .../src/components/Table/index.tsx            |  26 +--
 .../src/dashboard/actions/dashboardState.js   |   8 +-
 .../src/dashboard/actions/datasources.ts      |  12 +-
 .../src/dashboard/actions/hydrate.js          |   8 +-
 .../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 +-
 .../components/PropertiesModal/index.tsx      |  12 +-
 .../src/dashboard/components/SliceAdder.jsx   |   7 +-
 .../SliceHeaderControls.test.tsx              |  18 +-
 .../components/SliceHeaderControls/index.tsx  |   8 +-
 .../SyncDashboardState.test.tsx               |   2 +-
 .../components/SyncDashboardState/index.tsx   |   4 +-
 .../components/gridComponents/Row.jsx         |   2 +-
 .../FilterBar/ActionButtons/index.tsx         |   4 +-
 .../CrossFilters/CrossFilter.test.tsx         |   2 +-
 .../FilterBar/CrossFilters/CrossFilter.tsx    |   6 +-
 .../CrossFilters/CrossFilterTag.test.tsx      |   2 +-
 .../FilterBar/CrossFilters/CrossFilterTag.tsx |   2 +-
 .../CrossFilters/CrossFilterTitle.test.tsx    |   2 +-
 .../CrossFilters/CrossFilterTitle.tsx         |   2 +-
 .../CrossFilters/VerticalCollapse.tsx         |   2 +-
 .../FilterBar/FilterBar.test.tsx              |   2 +-
 .../FilterBarSettings.test.tsx                |  28 +--
 .../FilterBar/FilterBarSettings/index.tsx     |  10 +-
 .../FilterControls/FilterControl.tsx          |   8 +-
 .../FilterControls/FilterControls.tsx         |  12 +-
 .../FilterControls/FilterDivider.stories.tsx  |   2 +-
 .../FilterControls/FilterDivider.test.tsx     |   8 +-
 .../FilterControls/FilterDivider.tsx          |   4 +-
 .../FilterBar/FilterControls/FilterValue.tsx  |   6 +-
 .../FiltersDropdownContent/index.tsx          |   4 +-
 .../nativeFilters/FilterBar/Horizontal.tsx    |   2 +-
 .../FilterBar/HorizontalFilterBar.test.tsx    |   2 +-
 .../nativeFilters/FilterBar/Vertical.tsx      |   2 +-
 .../nativeFilters/FilterBar/index.tsx         |   4 +-
 .../FilterCard/FilterCard.test.tsx            |   6 +-
 .../FiltersConfigModal/DividerConfigForm.tsx  |   2 +-
 .../FiltersConfigModal/FilterTitlePane.tsx    |   4 +-
 .../FiltersConfigForm/DefaultValue.tsx        |   4 +-
 .../FilterScope/FilterScope.tsx               |  20 +-
 .../FiltersConfigForm/FilterScope/types.ts    |   4 +-
 .../FiltersConfigForm/FiltersConfigForm.tsx   |  10 +-
 .../FiltersConfigForm/constants.ts            |  16 +-
 .../getControlItemsMap.test.tsx               |   2 +-
 .../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 +-
 .../components/nativeFilters/utils.ts         |   8 +-
 .../dashboard/containers/DashboardPage.tsx    |   4 +-
 .../dashboard/fixtures/mockNativeFilters.ts   |   2 +-
 .../src/dashboard/reducers/datasources.ts     |   4 +-
 superset-frontend/src/dashboard/types.ts      |   4 +-
 .../src/dashboard/util/constants.ts           |   8 +-
 .../src/dashboard/util/crossFilters.test.ts   |  10 +-
 .../src/dashboard/util/crossFilters.ts        |   6 +-
 .../dashboard/util/getDashboardUrl.test.js    |  12 +-
 .../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 +-
 .../components/ControlPanelsContainer.tsx     |  10 +-
 .../components/DataTableControl/index.tsx     |   6 +-
 .../DataTableControl/useTableColumns.test.ts  |  12 +-
 .../components/DataTableControl/utils.ts      |  15 +-
 .../DataTablesPane/DataTablesPane.tsx         |   8 +-
 .../components/DataTableControls.tsx          |   2 +-
 .../test/DataTablesPane.test.tsx              |   4 +-
 .../components/DatasourcePanel/fixtures.tsx   |   6 +-
 .../ExploreChartHeader.test.tsx               |   2 +-
 .../components/ExploreChartHeader/index.jsx   |   8 +-
 .../ExploreChartPanel.test.jsx                |   2 +-
 .../components/ExploreChartPanel/index.jsx    |  10 +-
 .../components/ExploreViewContainer/index.jsx |  12 +-
 .../components/ExportToCSVDropdown/index.tsx  |  14 +-
 .../components/PropertiesModal/index.tsx      |   8 +-
 .../ColumnConfigPopover.tsx                   |   2 +-
 .../ColumnConfigControl/constants.tsx         |   8 +-
 .../ConditionalFormattingControl.tsx          |  20 +-
 .../FormattingPopoverContent.tsx              |  40 ++--
 .../ConditionalFormattingControl/types.ts     |  25 +--
 .../ContourControl/ContourPopoverControl.tsx  |  20 +-
 .../DateFilterControl/DateFilterLabel.tsx     |  14 +-
 .../components/CommonFrame.tsx                |   7 +-
 .../tests/DateFilterLabel.test.tsx            |  10 +-
 .../DateFilterControl/utils/constants.ts      |  14 +-
 .../DndFilterSelect.test.tsx                  |   6 +-
 .../DndFilterSelect.tsx                       |  42 ++--
 .../DndMetricSelect.tsx                       |   8 +-
 .../AdhocFilter/AdhocFilter.test.js           |  92 ++++-----
 .../FilterControl/AdhocFilter/index.js        |  27 ++-
 .../AdhocFilterControl.test.jsx               |  28 +--
 .../AdhocFilterControl/index.jsx              |  20 +-
 .../AdhocFilterEditPopover.test.jsx           |  14 +-
 .../AdhocFilterEditPopover/index.jsx          |   6 +-
 ...FilterEditPopoverSimpleTabContent.test.tsx |  84 ++++----
 .../index.tsx                                 |  62 +++---
 ...hocFilterEditPopoverSqlTabContent.test.jsx |  10 +-
 .../index.jsx                                 |   8 +-
 .../AdhocFilterOption.test.tsx                |   6 +-
 .../AdhocFilterPopoverTrigger.test.tsx        |   6 +-
 .../controls/FilterControl/adhocFilterType.js |  10 +-
 .../controls/FilterControl/types.ts           |  12 +-
 .../FilterControl/utils/translateToSQL.ts     |   2 +-
 .../utils/useGetTimeRangeLabel.test.ts        |  30 +--
 .../utils/useGetTimeRangeLabel.tsx            |  12 +-
 .../VizTypeControl/VizTypeGallery.tsx         |  35 ++--
 .../useExploreAdditionalActionsMenu/index.jsx |   2 +-
 superset-frontend/src/explore/constants.ts    |  99 ++++-----
 .../exploreUtils/exploreUtils.test.jsx        |   2 +-
 .../getSimpleSQLExpression.test.ts            |   4 +-
 .../src/explore/exploreUtils/index.js         |   2 +-
 .../src/features/alerts/AlertReportModal.tsx  |   2 +-
 .../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 +-
 .../DatabaseModal/SSHTunnelSwitch.tsx         |   2 +-
 .../databases/DatabaseModal/index.test.tsx    |  60 +++---
 .../databases/DatabaseModal/index.tsx         | 191 +++++++++---------
 .../src/features/databases/types.ts           |   8 +-
 .../AddDataset/DatasetPanel/DatasetPanel.tsx  |   4 +-
 .../AddDataset/EditDataset/UsageTab/index.tsx |   4 +-
 .../datasets/AddDataset/Header/index.tsx      |   2 +-
 .../datasets/AddDataset/LeftPanel/index.tsx   |   8 +-
 .../features/datasets/AddDataset/types.tsx    |  16 +-
 .../metadataBar/useDatasetMetadataBar.tsx     |  18 +-
 .../src/features/home/ActivityTable.tsx       |   6 +-
 .../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 +-
 .../src/features/home/RightMenu.tsx           |  10 +-
 superset-frontend/src/features/home/types.ts  |   6 +-
 .../queries/QueryPreviewModal.test.tsx        |   2 +-
 .../HeaderReportDropdown/index.test.tsx       |   2 +-
 .../HeaderReportDropdown/index.tsx            |  12 +-
 .../reports/ReportModal/ReportModal.test.tsx  |   2 +-
 .../features/reports/ReportModal/index.tsx    |  16 +-
 .../src/features/reports/types.ts             |   8 +-
 .../rls/RowLevelSecurityModal.test.tsx        |   6 +-
 .../features/rls/RowLevelSecurityModal.tsx    |   4 +-
 superset-frontend/src/features/rls/types.ts   |   4 +-
 .../src/features/tags/TagCard.tsx             |   2 +-
 .../Range/RangeFilterPlugin.stories.tsx       |   4 +-
 .../Range/RangeFilterPlugin.test.tsx          |   8 +-
 .../components/Range/RangeFilterPlugin.tsx    |   6 +-
 .../filters/components/Range/buildQuery.ts    |   4 +-
 .../src/filters/components/Range/index.ts     |   2 +-
 .../Select/SelectFilterPlugin.test.tsx        |   2 +-
 .../components/Select/SelectFilterPlugin.tsx  |   6 +-
 .../components/Select/buildQuery.test.ts      |   4 +-
 .../filters/components/Select/buildQuery.ts   |   4 +-
 .../src/filters/components/Select/index.ts    |   2 +-
 .../src/filters/components/Time/index.ts      |   2 +-
 .../TimeColumn/TimeColumnFilterPlugin.tsx     |   2 +-
 .../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 +-
 .../hooks/apiResources/apiResources.test.ts   |  16 +-
 .../src/hooks/apiResources/apiResources.ts    |  22 +-
 .../src/middleware/asyncEvent.ts              |   2 +-
 .../src/pages/AlertReportList/index.tsx       |  12 +-
 .../src/pages/AllEntities/index.tsx           |   6 +-
 .../src/pages/AnnotationLayerList/index.tsx   |   6 +-
 .../src/pages/Chart/Chart.test.tsx            |   2 +-
 superset-frontend/src/pages/Chart/index.tsx   |   6 +-
 .../src/pages/ChartList/index.tsx             |  32 +--
 .../src/pages/CssTemplateList/index.tsx       |   6 +-
 .../src/pages/DashboardList/index.tsx         |  26 +--
 .../src/pages/DatabaseList/index.tsx          |  12 +-
 .../src/pages/DatasetCreation/index.tsx       |   8 +-
 .../src/pages/DatasetList/index.tsx           |  16 +-
 superset-frontend/src/pages/Home/index.tsx    |   8 +-
 .../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 +-
 .../utils/isDashboardVirtualizationEnabled.ts |  14 +-
 .../src/utils/localStorageHelpers.test.ts     |   6 +-
 .../src/utils/localStorageHelpers.ts          |  32 +--
 .../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, 2002 insertions(+), 2032 deletions(-)

diff --git a/superset-frontend/.eslintrc.js b/superset-frontend/.eslintrc.js
index 5d15f87e4..45274955e 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 19ae7bd78..5962e9427 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 1aefc2546..4230d6683 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 b12d5be04..efdfef6c4 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 b0f300635..7fb4f9a8b 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 8aa475a7f..546936ee7 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 1a6aa140a..4e5e89fe4 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 b1fb4b265..ff146862b 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 8369a7909..07cbfa7a2 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 44ebbf605..71b95f154 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 de5bb1ab6..2fac0e60e 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 7daa3f968..6551e815d 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 f0a6529de..0379e0594 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 1c5a5ca02..d94f2b37a 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 ce7eba5b3..0375a19bd 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 bebcb5c5e..8c8766158 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 15542ad9c..6bc11fc42 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 b3884a848..b24e5e850 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 5004dce2d..8b8cd0251 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 e270ff6f0..2601be82e 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 bc417e603..4837d0f36 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 2b36802d4..e7fbe9ee5 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 e876bc2b5..53aff08c4 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 e64796ad3..db3ab11ce 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 09ef1bc7d..37cc002c4 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 bbd173e61..6cb0af8ee 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 40939a1f5..cb299c3ac 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 1271be2ff..488caaa60 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 1806f567e..ea2f0d082 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 e4869805f..1705814df 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 1df169630..e99517e8d 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 f21d20650..d913a0ad1 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 ca7bcf94b..f9bd7d76a 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 0d98198de..48e43d835 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 88610874d..8f89ae8a6 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 c4d3cc6d1..c2c791531 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 11c2e65eb..6f2067eec 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 eec7a47b9..72b1a0f41 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 56004a06e..4e2901371 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 f72bff490..79d798094 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 bad77690a..12a644c06 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 fd5245f69..0ae466efd 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 fa531ef9d..0ec12b6c4 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 540097be2..6b69c6b2d 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 2ca11373f..82d8dcb1e 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 95eb6b59f..8c2cf10d4 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 b558b15b9..e8ac50e09 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 5b307efd9..723407c5a 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 ba20a958c..b85a64579 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 33436be14..d2f14b4b7 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 c2916c7a4..f3cf1f243 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 66b98e4cc..b29277f8c 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 51db67edf..c848e7acc 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 75b66fb93..408656ea1 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 39b97bfd3..f949182a5 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 d92283d7c..5137f8192 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 4a68e1ff9..757ecd3e6 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 80a21ad22..2f8da6ef0 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 ce35b6576..c5e9e7042 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 dc9930481..abe6fcd67 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 c07776c4a..362e75556 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 754b26003..7731e095e 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 da0b06675..9cad10bf1 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 9660f5257..d679aa150 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 df43fe0a8..dbfb33b2e 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 515956223..18a40267c 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 78f6c386c..2d2418568 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 d95f3dd98..bdab9b6da 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 9c871407f..0d04de15b 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 f87d84132..3ebc7c4f0 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 1d4eceb33..cbe821d93 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 7380f575e..6c022ec72 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 3b423c512..628939743 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 70f94f42f..5a919febb 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 43309d5d2..94fb33c90 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 b0fdfed0f..eb3564bb9 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 022338219..78a573670 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 50cf3549f..ba2f873a1 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 8057c8f0d..6e1962b4c 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 e83f19e59..c778e0719 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 753f9150d..931a790cc 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 de6a1d38a..320e4752e 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 91deb322b..c581da3e0 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 839bc607f..96efd4a06 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 dace33a10..33623952e 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 a5c380c5f..b9e04b2e8 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 692abb2c7..dbecb483d 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 d0359aff9..e461e6860 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 b8c66fabb..f0f2e9e5c 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 84fbbf6cb..edc29363f 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 d3d858d97..df6515d20 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 8c87bf433..cebfe374d 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 9c1d35cdd..4d326ab30 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 59afebd73..fd2f4acf2 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 10768a47f..6e4848643 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 b895b97f2..87178cc46 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 5f364a288..2c65c4780 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 32f10b077..c727e0cfc 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 6963c67f0..c890c1a8f 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 76c58b895..b7f4451ce 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 6120e1980..857af565e 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 d106e42a8..785e34f63 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 b8102a0ce..69631a5f3 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 bb608e1c0..ad39b504c 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 3d7b1dcea..ce250aa87 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 e76201cac..c0eacfb51 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 139f92336..43cddad0a 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 e196eae10..a86f7d181 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 1f255703f..24abc3381 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 b2f9f1183..4fd599ea3 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 1ff78467d..070f48ab0 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 1689555dd..df464f7b7 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 e93538959..9cfd76e2e 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 0599793d8..764884614 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 58e55a1df..358802d54 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 8e90f1c66..885265fe8 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 a123576c3..8f4cde1a6 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 38a20f9f6..9aa0b7575 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 0e6a4845d..821325368 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 1a9cb17f9..eff67d49b 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 35479c48b..0bd60fff7 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 e25d88f5d..9d3e5f71c 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 7a08c5187..24d512a1b 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 d1bec5e0c..25dda5cd3 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 8f21a3ff1..8450060fa 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 1d799c559..40a4dfb29 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 e1a234734..485094ada 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 ec2580f87..6b150c2ba 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 401fa52f2..4b8e82975 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 ce8bb9d7d..c03b1a130 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 0d65bb603..2e7937ffb 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 006dd54fc..84339f3e0 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 485e19652..41cc6b3c0 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 3354241ef..2fe711474 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 73f3a028e..6ef9b331e 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 d337e9b01..9ae930881 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 fbb790824..f10232bcd 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 d91d77c49..997c5bf7b 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 f1a142228..13dc0a2ce 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 2bc92d7c0..cc18ec0fe 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 3e3acde4b..e318821a5 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 1e2e03ceb..864647343 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 9134e73fd..791cebc48 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 e21a9d37a..9f69f9ab2 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 d89a65ad3..d731313bd 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 0c1314f26..005d8fde7 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 c248a2427..37ba148fe 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 37fcf80f1..8bae97fb6 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 982df1710..e6398b4e3 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 d19ac0c5d..fe2ea294f 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 4604e5de6..b06fd0c49 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 fd4b27074..07090ea46 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 f6d617811..64fdca72c 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 f5428aa61..b4fcb103f 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 d85c2c622..1942dd059 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 1b5fb33d9..27149b9f2 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 7a7f7430f..ce3be8df1 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 347cfd8b9..74ea8e615 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 4448d2ec5..360a8cd55 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 4a890aadf..a2efe4abf 100644
--- a/superset-frontend/src/components/Table/Table.stories.tsx
+++ b/superset-frontend/src/components/Table/Table.stories.tsx
@@ -17,17 +17,17 @@
  * under the License.
  */
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import {
+  ColumnsType,
+  ETableAction,
+  OnChangeFunction,
+  SUPERSET_TABLE_COLUMN,
   Table,
   TableSize,
-  SUPERSET_TABLE_COLUMN,
-  ColumnsType,
-  OnChangeFunction,
-  ETableAction,
 } from './index';
-import { numericalSort, alphabeticalSort } from './sorters';
+import { alphabeticalSort, numericalSort } from './sorters';
 import ButtonCell from './cell-renderers/ButtonCell';
 import ActionCell from './cell-renderers/ActionCell';
 import { exampleMenuOptions } from './cell-renderers/ActionCell/fixtures';
@@ -88,7 +88,7 @@ function generateColumns(amount: number): ColumnsType<ExampleData>[] {
       width: 90,
       render: (value: number) => (
         <NumericCell
-          options={{ style: Style.CURRENCY, currency: CurrencyCode.EUR }}
+          options={{ style: Style.Currency, currency: CurrencyCode.EUR }}
           value={value}
           locale={LocaleCode.en_US}
         />
@@ -238,7 +238,7 @@ const rendererColumns: ColumnsType<RendererData> = [
     key: 'euroCell',
     render: (value: number) => (
       <NumericCell
-        options={{ style: Style.CURRENCY, currency: CurrencyCode.EUR }}
+        options={{ style: Style.Currency, currency: CurrencyCode.EUR }}
         value={value}
         locale={LocaleCode.en_US}
       />
@@ -250,7 +250,7 @@ const rendererColumns: ColumnsType<RendererData> = [
     key: 'dollarCell',
     render: (value: number) => (
       <NumericCell
-        options={{ style: Style.CURRENCY, currency: CurrencyCode.USD }}
+        options={{ style: Style.Currency, currency: CurrencyCode.USD }}
         value={value}
         locale={LocaleCode.en_US}
       />
@@ -326,7 +326,7 @@ function handlers(record: object, rowIndex: number) {
 Basic.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   onRow: handlers,
   usePagination: false,
 };
@@ -338,7 +338,7 @@ export const Pagination: ComponentStory<typeof Table> = args => (
 Pagination.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   pageSizeOptions: ['5', '10', '15', '20', '25'],
   defaultPageSize: 5,
 };
@@ -377,7 +377,7 @@ const paginationColumns: ColumnsType<BasicData> = [
     width: 100,
     render: (value: number) => (
       <NumericCell
-        options={{ style: Style.CURRENCY, currency: CurrencyCode.EUR }}
+        options={{ style: Style.Currency, currency: CurrencyCode.EUR }}
         value={value}
         locale={LocaleCode.en_US}
       />
@@ -413,7 +413,7 @@ export const ServerPagination: ComponentStory<typeof Table> = args => {
     const pageSize = pagination?.pageSize ?? 5;
     const current = pagination?.current ?? 0;
     switch (extra?.action) {
-      case ETableAction.PAGINATE: {
+      case ETableAction.Paginate: {
         setLoading(true);
         // simulate a fetch
         setTimeout(() => {
@@ -422,11 +422,11 @@ export const ServerPagination: ComponentStory<typeof Table> = args => {
         }, 1000);
         break;
       }
-      case ETableAction.SORT: {
+      case ETableAction.Sort: {
         action(`table-sort-change: ${JSON.stringify(sorter)}`);
         break;
       }
-      case ETableAction.FILTER: {
+      case ETableAction.Filter: {
         action(`table-sort-change: ${JSON.stringify(filters)}`);
         break;
       }
@@ -450,7 +450,7 @@ export const ServerPagination: ComponentStory<typeof Table> = args => {
 
 ServerPagination.args = {
   columns: paginationColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   pageSizeOptions: ['5', '20', '50'],
   defaultPageSize: 5,
 };
@@ -462,7 +462,7 @@ export const VirtualizedPerformance: ComponentStory<typeof Table> = args => (
 VirtualizedPerformance.args = {
   data: bigdata,
   columns: bigColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   resizable: true,
   reorderable: true,
   height: 350,
@@ -477,7 +477,7 @@ export const Loading: ComponentStory<typeof Table> = args => (
 Loading.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   loading: true,
 };
 
@@ -488,7 +488,7 @@ export const ResizableColumns: ComponentStory<typeof Table> = args => (
 ResizableColumns.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   resizable: true,
 };
 
@@ -543,7 +543,7 @@ export const ReorderableColumns: ComponentStory<typeof Table> = args => {
 ReorderableColumns.args = {
   data: basicData,
   columns: basicColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   reorderable: true,
 };
 
@@ -578,7 +578,7 @@ export const CellRenderers: ComponentStory<typeof Table> = args => (
 CellRenderers.args = {
   data: rendererData,
   columns: rendererColumns,
-  size: TableSize.SMALL,
+  size: TableSize.Small,
   reorderable: true,
 };
 
@@ -659,7 +659,7 @@ export const HeaderRenderers: ComponentStory<typeof Table> = () => {
         <NumericCell
           value={value}
           options={{
-            style: Style.CURRENCY,
+            style: Style.Currency,
             currency:
               priceLocale === LocaleCode.en_US
                 ? CurrencyCode.USD
@@ -675,7 +675,7 @@ export const HeaderRenderers: ComponentStory<typeof Table> = () => {
     <Table<ShoppingData>
       data={shoppingData}
       columns={shoppingColumns}
-      size={TableSize.SMALL}
+      size={TableSize.Small}
       resizable
     />
   );
diff --git a/superset-frontend/src/components/Table/Table.test.tsx b/superset-frontend/src/components/Table/Table.test.tsx
index eded7efeb..3d20093ae 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 4d4dc2a00..4ac2cef3a 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 b6ba57420..e40c70098 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 bb0b52fe6..b1a0d42a1 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 b76a5bef6..50cadddfb 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 5e6d61aa4..b35dfd5ce 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 12fdcec1d..c1956395b 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 fa3eeadf4..bdbf43090 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 42004272c..f48c12428 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 930280a1f..7898ad092 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 3aa22a840..6a13e72a6 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 af824bf4c..5874d6515 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 6e909f3b1..713abfa74 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 cf50c24db..ebb4ece2b 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 e94aa610a..485185d60 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 3a1421e38..1b5ef5fce 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 617fd32e8..b84cc52e0 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 dc94e77ca..31a3cad9f 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 b1196e7c1..d4b9a1a0b 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 1565a43e1..063e88975 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 fd252e83c..4ad1f3518 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 ae3db36d1..d645a1a2c 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 cb6f17d96..3c44081a3 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 85dc3bf70..523f536ed 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 981d99e56..98f4027ca 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 b4b043554..b22d6b3f9 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 d4b078991..b4562d447 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 16987440a..9b6e14964 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 9221bffe1..867103b02 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 a748f9ed9..ea7ee76ba 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 99b5fa23f..42f92522f 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 8c236c271..1c5f2ab2c 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 8aa51f063..05f57beb6 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 96f51f535..bc66d07c0 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 629ec75cb..a0a6c1231 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 46e7c03fa..37385ff5e 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 8491c93d8..d038ec638 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 6efe2c451..0d812ef5d 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 f44a1a1df..5041fa3c9 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 0e7ceef6d..2edfc92db 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 47f181682..0b35c146f 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 09625151a..898e78da1 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 cb6da807d..ac7ab58f8 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 f41f9bc3a..7bf45f76c 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 f75612bae..2c62d69eb 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 6db4db853..68912c17b 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 a080d3564..81a99559e 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 1733514ac..56523f811 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 068227912..72b73ba84 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 8c9d2a5f3..31759afc0 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 e9c0f52cc..029a95f3a 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 61beb5753..f66d49685 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 7a3af4fe2..24cb9763d 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 b7aa2cab3..b1f35b8a0 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 65c4af3b0..3eda21057 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 ea4916b53..6f40ea654 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 83247e1a3..ed60a957d 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 ae8a2f7a4..36f0fd192 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 be636bf17..019a9e760 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 12f6d33e2..0ba28d0a3 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 3c2e56bec..c01dc76f1 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 8d6ded58f..d1d37cbf6 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 864641645..386657455 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 4f28e7218..13e8d37af 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 0743d7a5a..02cd7a991 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 0e9fc00de..b88579cc8 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 8e1a70628..903a1f74f 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 c75f2c98b..fe6090440 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 c6d707dbb..29ff675e9 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 4b09710d5..9db6b40c6 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 f2163a54a..25ecbeb9d 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 53c895208..9f4ff9477 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 09595576d..99f7c5aad 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 d4b1caccc..561c7cc7c 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 b98a495c0..990356a76 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 8e51732c2..e07284833 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 f8e8e42e3..253870b04 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 726f3ea46..15148be88 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 c898988c9..7a02114a2 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 34dcf01bc..74358af95 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 05909b1e6..1840ad7a6 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 3d9f6b995..c52d8f4cb 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 d151459e5..dba78af03 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 63e139e75..66d524b9f 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 bc2d83a90..01e7a1289 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 0550ba2b2..d3a32a2bd 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 bd6ff4b75..e1dae92a6 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 df0316534..ba78dfa03 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 d35f46a67..191351e92 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 684d8faf1..14ceeefde 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 2b9050c3b..6c4ae9f41 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 154255eee..533e18547 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 5d4c51145..4edadf99b 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 ebcf47222..be605804e 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 a5ee71f8c..a1a0a670f 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 d3de2b999..06f2cec7d 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 dc7559bee..4ded8a19c 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 dad77fb9c..fca0dd3db 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 0a4606dcb..f47c3a010 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 4c9f5b3aa..5295bd6da 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 eaf7acfe9..8f489773e 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 19cc2f783..ed25e78c1 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 f00491b89..627cc50c4 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 964f0def0..05ede9035 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 c1a95bc8f..7b6a3938f 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 d81abdc07..51c8be3f6 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 34be012f5..94b04b111 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 d1e85a30b..e376963eb 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 c58d2b2bd..fcd85b20c 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 c0837fdb4..9bdd20c0f 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 2e46e0725..852bfc38b 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx
@@ -26,7 +26,7 @@ import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import adhocMetricType from 'src/explore/components/controls/MetricControl/adhocMetricType';
 import columnType from 'src/explore/components/controls/FilterControl/columnType';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const propTypes = {
   adhocFilter: PropTypes.instanceOf(AdhocFilter).isRequired,
@@ -72,7 +72,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     this.props.onChange(
       this.props.adhocFilter.duplicateWith({
         clause,
-        expressionType: EXPRESSION_TYPES.SQL,
+        expressionType: ExpressionTypes.Sql,
       }),
     );
   }
@@ -81,7 +81,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
     this.props.onChange(
       this.props.adhocFilter.duplicateWith({
         sqlExpression,
-        expressionType: EXPRESSION_TYPES.SQL,
+        expressionType: ExpressionTypes.Sql,
       }),
     );
   }
@@ -115,7 +115,7 @@ export default class AdhocFilterEditPopoverSqlTabContent extends React.Component
         })
         .filter(Boolean),
     );
-    const selectOptions = Object.keys(CLAUSES).map(clause => ({
+    const selectOptions = Object.keys(Clauses).map(clause => ({
       label: clause,
       value: clause,
     }));
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
index 514a10094..3fff11b32 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/AdhocFilterOption.test.tsx
@@ -21,14 +21,14 @@ import { render, screen, waitFor } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import AdhocFilterOption, { AdhocFilterOptionProps } from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
   operator: '>',
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const options = [
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
index b983c413e..fcfe01c41 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx
@@ -21,14 +21,14 @@ import { render, screen } from 'spec/helpers/testing-library';
 import userEvent from '@testing-library/user-event';
 import AdhocFilter from 'src/explore/components/controls/FilterControl/AdhocFilter';
 import AdhocFilterPopoverTrigger from '.';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 const simpleAdhocFilter = new AdhocFilter({
-  expressionType: EXPRESSION_TYPES.SIMPLE,
+  expressionType: ExpressionTypes.Simple,
   subject: 'value',
   operator: '>',
   comparator: '10',
-  clause: CLAUSES.WHERE,
+  clause: Clauses.Where,
 });
 
 const mockedProps = {
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js b/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js
index df9f43a5d..b8900c175 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js
+++ b/superset-frontend/src/explore/components/controls/FilterControl/adhocFilterType.js
@@ -17,12 +17,12 @@
  * under the License.
  */
 import PropTypes from 'prop-types';
-import { CLAUSES, EXPRESSION_TYPES } from './types';
+import { Clauses, ExpressionTypes } from './types';
 
 export default PropTypes.oneOfType([
   PropTypes.shape({
-    expressionType: PropTypes.oneOf([EXPRESSION_TYPES.SIMPLE]).isRequired,
-    clause: PropTypes.oneOf([CLAUSES.HAVING, CLAUSES.WHERE]).isRequired,
+    expressionType: PropTypes.oneOf([ExpressionTypes.Simple]).isRequired,
+    clause: PropTypes.oneOf([Clauses.Having, Clauses.Where]).isRequired,
     subject: PropTypes.string.isRequired,
     comparator: PropTypes.oneOfType([
       PropTypes.string,
@@ -30,8 +30,8 @@ export default PropTypes.oneOfType([
     ]).isRequired,
   }),
   PropTypes.shape({
-    expressionType: PropTypes.oneOf([EXPRESSION_TYPES.SQL]).isRequired,
-    clause: PropTypes.oneOf([CLAUSES.WHERE, CLAUSES.HAVING]).isRequired,
+    expressionType: PropTypes.oneOf([ExpressionTypes.Sql]).isRequired,
+    clause: PropTypes.oneOf([Clauses.Where, Clauses.Having]).isRequired,
     sqlExpression: PropTypes.string.isRequired,
   }),
 ]);
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/types.ts b/superset-frontend/src/explore/components/controls/FilterControl/types.ts
index 4adceab21..d2eebc5bf 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/FilterControl/types.ts
@@ -17,12 +17,12 @@
  * under the License.
  */
 
-export enum EXPRESSION_TYPES {
-  SIMPLE = 'SIMPLE',
-  SQL = 'SQL',
+export enum ExpressionTypes {
+  Simple = 'SIMPLE',
+  Sql = 'SQL',
 }
 
-export enum CLAUSES {
-  HAVING = 'HAVING',
-  WHERE = 'WHERE',
+export enum Clauses {
+  Having = 'HAVING',
+  Where = 'WHERE',
 }
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts b/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts
index e041a30fb..e5124e44c 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts
+++ b/superset-frontend/src/explore/components/controls/FilterControl/utils/translateToSQL.ts
@@ -64,7 +64,7 @@ export const translateToSql = (
       operator &&
       // 'LATEST PARTITION' supported callback only
       operator ===
-        OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.LATEST_PARTITION].operation
+        OPERATOR_ENUM_TO_OPERATOR_TYPE[Operators.LatestPartition].operation
         ? OPERATORS_TO_SQL[operator](adhocFilter)
         : OPERATORS_TO_SQL[operator];
     return getSimpleSQLExpression(subject, op, comparator);
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts
index 4deb8fbc6..1c3dc321a 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts
+++ b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.test.ts
@@ -22,15 +22,15 @@ import { Operators } from 'src/explore/constants';
 import * as FetchTimeRangeModule from 'src/explore/components/controls/DateFilterControl';
 import { useGetTimeRangeLabel } from './useGetTimeRangeLabel';
 import AdhocFilter from '../AdhocFilter';
-import { CLAUSES, EXPRESSION_TYPES } from '../types';
+import { Clauses, ExpressionTypes } from '../types';
 
 test('should return empty object if operator is not TEMPORAL_RANGE', () => {
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'value',
     operator: '>',
     comparator: '10',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
   const { result } = renderHook(() => useGetTimeRangeLabel(adhocFilter));
   expect(result.current).toEqual({});
@@ -38,11 +38,11 @@ test('should return empty object if operator is not TEMPORAL_RANGE', () => {
 
 test('should return empty object if expressionType is SQL', () => {
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SQL,
+    expressionType: ExpressionTypes.Sql,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: 'Last week',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
   const { result } = renderHook(() => useGetTimeRangeLabel(adhocFilter));
   expect(result.current).toEqual({});
@@ -50,11 +50,11 @@ test('should return empty object if expressionType is SQL', () => {
 
 test('should get "No filter" label', () => {
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: NO_TIME_RANGE,
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
   const { result } = renderHook(() => useGetTimeRangeLabel(adhocFilter));
   expect(result.current).toEqual({
@@ -69,11 +69,11 @@ test('should get actualTimeRange and title', async () => {
     .mockResolvedValue({ value: 'MOCK TIME' });
 
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: 'Last week',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
 
   const { result } = await renderHook(() => useGetTimeRangeLabel(adhocFilter));
@@ -89,11 +89,11 @@ test('should get actualTimeRange and title when gets an error', async () => {
     .mockResolvedValue({ error: 'MOCK ERROR' });
 
   const adhocFilter = new AdhocFilter({
-    expressionType: EXPRESSION_TYPES.SIMPLE,
+    expressionType: ExpressionTypes.Simple,
     subject: 'temporal column',
-    operator: Operators.TEMPORAL_RANGE,
+    operator: Operators.TemporalRange,
     comparator: 'Last week',
-    clause: CLAUSES.WHERE,
+    clause: Clauses.Where,
   });
 
   const { result } = await renderHook(() => useGetTimeRangeLabel(adhocFilter));
diff --git a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx
index f06743ed5..3a0b7a45c 100644
--- a/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx
+++ b/superset-frontend/src/explore/components/controls/FilterControl/utils/useGetTimeRangeLabel.tsx
@@ -21,7 +21,7 @@ import { NO_TIME_RANGE } from '@superset-ui/core';
 import { fetchTimeRange } from 'src/explore/components/controls/DateFilterControl';
 import { Operators } from 'src/explore/constants';
 import AdhocFilter from '../AdhocFilter';
-import { EXPRESSION_TYPES } from '../types';
+import { ExpressionTypes } from '../types';
 
 interface Results {
   actualTimeRange?: string;
@@ -33,13 +33,13 @@ export const useGetTimeRangeLabel = (adhocFilter: AdhocFilter): Results => {
 
   useEffect(() => {
     if (
-      adhocFilter.operator !== Operators.TEMPORAL_RANGE ||
-      adhocFilter.expressionType !== EXPRESSION_TYPES.SIMPLE
+      adhocFilter.operator !== Operators.TemporalRange ||
+      adhocFilter.expressionType !== ExpressionTypes.Simple
     ) {
       setActualTimeRange({});
     }
     if (
-      adhocFilter.operator === Operators.TEMPORAL_RANGE &&
+      adhocFilter.operator === Operators.TemporalRange &&
       adhocFilter.comparator === NO_TIME_RANGE
     ) {
       setActualTimeRange({
@@ -49,8 +49,8 @@ export const useGetTimeRangeLabel = (adhocFilter: AdhocFilter): Results => {
     }
 
     if (
-      adhocFilter.operator === Operators.TEMPORAL_RANGE &&
-      adhocFilter.expressionType === EXPRESSION_TYPES.SIMPLE &&
+      adhocFilter.operator === Operators.TemporalRange &&
+      adhocFilter.expressionType === ExpressionTypes.Simple &&
       adhocFilter.comparator !== NO_TIME_RANGE &&
       actualTimeRange.title !== adhocFilter.comparator
     ) {
diff --git a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
index 347b33948..4905e9a33 100644
--- a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
+++ b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeGallery.tsx
@@ -58,11 +58,11 @@ type VizEntry = {
   value: ChartMetadata;
 };
 
-enum SECTIONS {
-  ALL_CHARTS = 'ALL_CHARTS',
-  CATEGORY = 'CATEGORY',
-  TAGS = 'TAGS',
-  RECOMMENDED_TAGS = 'RECOMMENDED_TAGS',
+enum Sections {
+  AllCharts = 'ALL_CHARTS',
+  Category = 'CATEGORY',
+  Tags = 'TAGS',
+  RecommendedTags = 'RECOMMENDED_TAGS',
 }
 
 const DEFAULT_ORDER = [
@@ -573,8 +573,8 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
 
   const [activeSection, setActiveSection] = useState<string>(() =>
     selectedVizMetadata?.category
-      ? SECTIONS.CATEGORY
-      : SECTIONS.RECOMMENDED_TAGS,
+      ? Sections.Category
+      : Sections.RecommendedTags,
   );
 
   // get a fuse instance for fuzzy search
@@ -666,17 +666,17 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
 
   const sectionMap = useMemo(
     () => ({
-      [SECTIONS.RECOMMENDED_TAGS]: {
+      [Sections.RecommendedTags]: {
         title: t('Recommended tags'),
         icon: <Icons.Tags />,
         selectors: RECOMMENDED_TAGS,
       },
-      [SECTIONS.CATEGORY]: {
+      [Sections.Category]: {
         title: t('Category'),
         icon: <Icons.Category />,
         selectors: categories,
       },
-      [SECTIONS.TAGS]: {
+      [Sections.Tags]: {
         title: t('Tags'),
         icon: <Icons.Tags />,
         selectors: tags,
@@ -689,21 +689,18 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
     if (isActivelySearching) {
       return searchResults;
     }
-    if (
-      activeSelector === ALL_CHARTS &&
-      activeSection === SECTIONS.ALL_CHARTS
-    ) {
+    if (activeSelector === ALL_CHARTS && activeSection === Sections.AllCharts) {
       return sortedMetadata;
     }
     if (
-      activeSection === SECTIONS.CATEGORY &&
+      activeSection === Sections.Category &&
       chartsByCategory[activeSelector]
     ) {
       return chartsByCategory[activeSelector];
     }
     if (
-      (activeSection === SECTIONS.TAGS ||
-        activeSection === SECTIONS.RECOMMENDED_TAGS) &&
+      (activeSection === Sections.Tags ||
+        activeSection === Sections.RecommendedTags) &&
       chartsByTags[activeSelector]
     ) {
       return chartsByTags[activeSelector];
@@ -725,13 +722,13 @@ export default function VizTypeGallery(props: VizTypeGalleryProps) {
               margin-bottom: 0;
             `
           }
-          sectionId={SECTIONS.ALL_CHARTS}
+          sectionId={Sections.AllCharts}
           selector={ALL_CHARTS}
           icon={<Icons.Ballot />}
           isSelected={
             !isActivelySearching &&
             ALL_CHARTS === activeSelector &&
-            SECTIONS.ALL_CHARTS === activeSection
+            Sections.AllCharts === activeSection
           }
           onClick={clickSelector}
         />
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
index db1efd711..0d30e5735 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
@@ -373,7 +373,7 @@ export const useExploreAdditionalActionsMenu = (
           <Menu.Item key={MENU_KEYS.SHARE_BY_EMAIL}>
             {t('Share chart by email')}
           </Menu.Item>
-          {isFeatureEnabled(FeatureFlag.EMBEDDABLE_CHARTS) ? (
+          {isFeatureEnabled(FeatureFlag.EmbeddableCharts) ? (
             <Menu.Item key={MENU_KEYS.EMBED_CODE}>
               <ModalTrigger
                 triggerNode={
diff --git a/superset-frontend/src/explore/constants.ts b/superset-frontend/src/explore/constants.ts
index 09362f423..e2bc7ea04 100644
--- a/superset-frontend/src/explore/constants.ts
+++ b/superset-frontend/src/explore/constants.ts
@@ -29,22 +29,22 @@ export const AGGREGATES = {
 export const AGGREGATES_OPTIONS = Object.values(AGGREGATES);
 
 export enum Operators {
-  EQUALS = 'EQUALS',
-  NOT_EQUALS = 'NOT_EQUALS',
-  LESS_THAN = 'LESS_THAN',
-  LESS_THAN_OR_EQUAL = 'LESS_THAN_OR_EQUAL',
-  GREATER_THAN = 'GREATER_THAN',
-  GREATER_THAN_OR_EQUAL = 'GREATER_THAN_OR_EQUAL',
-  IN = 'IN',
-  NOT_IN = 'NOT_IN',
-  LIKE = 'LIKE',
-  ILIKE = 'ILIKE',
-  IS_NOT_NULL = 'IS_NOT_NULL',
-  IS_NULL = 'IS_NULL',
-  LATEST_PARTITION = 'LATEST_PARTITION',
-  IS_TRUE = 'IS_TRUE',
-  IS_FALSE = 'IS_FALSE',
-  TEMPORAL_RANGE = 'TEMPORAL_RANGE',
+  Equals = 'EQUALS',
+  NotEquals = 'NOT_EQUALS',
+  LessThan = 'LESS_THAN',
+  LessThanOrEqual = 'LESS_THAN_OR_EQUAL',
+  GreaterThan = 'GREATER_THAN',
+  GreaterThanOrEqual = 'GREATER_THAN_OR_EQUAL',
+  In = 'IN',
+  NotIn = 'NOT_IN',
+  Like = 'LIKE',
+  CaseInsensitiveLike = 'ILIKE',
+  IsNotNull = 'IS_NOT_NULL',
+  IsNull = 'IS_NULL',
+  LatestPartition = 'LATEST_PARTITION',
+  IsTrue = 'IS_TRUE',
+  IsFalse = 'IS_FALSE',
+  TemporalRange = 'TEMPORAL_RANGE',
 }
 
 export interface OperatorType {
@@ -55,37 +55,37 @@ export interface OperatorType {
 export const OPERATOR_ENUM_TO_OPERATOR_TYPE: {
   [key in Operators]: OperatorType;
 } = {
-  [Operators.EQUALS]: { display: t('Equal to (=)'), operation: '==' },
-  [Operators.NOT_EQUALS]: { display: t('Not equal to (≠)'), operation: '!=' },
-  [Operators.LESS_THAN]: { display: t('Less than (<)'), operation: '<' },
-  [Operators.LESS_THAN_OR_EQUAL]: {
+  [Operators.Equals]: { display: t('Equal to (=)'), operation: '==' },
+  [Operators.NotEquals]: { display: t('Not equal to (≠)'), operation: '!=' },
+  [Operators.LessThan]: { display: t('Less than (<)'), operation: '<' },
+  [Operators.LessThanOrEqual]: {
     display: t('Less or equal (<=)'),
     operation: '<=',
   },
-  [Operators.GREATER_THAN]: { display: t('Greater than (>)'), operation: '>' },
-  [Operators.GREATER_THAN_OR_EQUAL]: {
+  [Operators.GreaterThan]: { display: t('Greater than (>)'), operation: '>' },
+  [Operators.GreaterThanOrEqual]: {
     display: t('Greater or equal (>=)'),
     operation: '>=',
   },
-  [Operators.IN]: { display: t('In'), operation: 'IN' },
-  [Operators.NOT_IN]: { display: t('Not in'), operation: 'NOT IN' },
-  [Operators.LIKE]: { display: t('Like'), operation: 'LIKE' },
-  [Operators.ILIKE]: {
+  [Operators.In]: { display: t('In'), operation: 'IN' },
+  [Operators.NotIn]: { display: t('Not in'), operation: 'NOT IN' },
+  [Operators.Like]: { display: t('Like'), operation: 'LIKE' },
+  [Operators.CaseInsensitiveLike]: {
     display: t('Like (case insensitive)'),
     operation: 'ILIKE',
   },
-  [Operators.IS_NOT_NULL]: {
+  [Operators.IsNotNull]: {
     display: t('Is not null'),
     operation: 'IS NOT NULL',
   },
-  [Operators.IS_NULL]: { display: t('Is null'), operation: 'IS NULL' },
-  [Operators.LATEST_PARTITION]: {
+  [Operators.IsNull]: { display: t('Is null'), operation: 'IS NULL' },
+  [Operators.LatestPartition]: {
     display: t('use latest_partition template'),
     operation: 'LATEST PARTITION',
   },
-  [Operators.IS_TRUE]: { display: t('Is true'), operation: '==' },
-  [Operators.IS_FALSE]: { display: t('Is false'), operation: '==' },
-  [Operators.TEMPORAL_RANGE]: {
+  [Operators.IsTrue]: { display: t('Is true'), operation: '==' },
+  [Operators.IsFalse]: { display: t('Is false'), operation: '==' },
+  [Operators.TemporalRange]: {
     display: t('TEMPORAL_RANGE'),
     operation: 'TEMPORAL_RANGE',
   },
@@ -93,30 +93,33 @@ export const OPERATOR_ENUM_TO_OPERATOR_TYPE: {
 
 export const OPERATORS_OPTIONS = Object.values(Operators) as Operators[];
 
-export const TABLE_ONLY_OPERATORS = [Operators.LIKE, Operators.ILIKE];
-export const HAVING_OPERATORS = [
-  Operators.EQUALS,
-  Operators.NOT_EQUALS,
-  Operators.LESS_THAN,
-  Operators.LESS_THAN_OR_EQUAL,
-  Operators.GREATER_THAN,
-  Operators.GREATER_THAN_OR_EQUAL,
+export const TABLE_ONLY_OPERATORS = [
+  Operators.Like,
+  Operators.CaseInsensitiveLike,
 ];
-export const MULTI_OPERATORS = new Set([Operators.IN, Operators.NOT_IN]);
+export const HAVING_OPERATORS = [
+  Operators.Equals,
+  Operators.NotEquals,
+  Operators.LessThan,
+  Operators.LessThanOrEqual,
+  Operators.GreaterThan,
+  Operators.GreaterThanOrEqual,
+];
+export const MULTI_OPERATORS = new Set([Operators.In, Operators.NotIn]);
 // CUSTOM_OPERATORS will show operator in simple mode,
 // but will generate customized sqlExpression
 export const CUSTOM_OPERATORS = new Set([
-  Operators.LATEST_PARTITION,
-  Operators.TEMPORAL_RANGE,
+  Operators.LatestPartition,
+  Operators.TemporalRange,
 ]);
 // DISABLE_INPUT_OPERATORS will disable filter value input
 // in adhocFilter control
 export const DISABLE_INPUT_OPERATORS = [
-  Operators.IS_NOT_NULL,
-  Operators.IS_NULL,
-  Operators.LATEST_PARTITION,
-  Operators.IS_TRUE,
-  Operators.IS_FALSE,
+  Operators.IsNotNull,
+  Operators.IsNull,
+  Operators.LatestPartition,
+  Operators.IsTrue,
+  Operators.IsFalse,
 ];
 
 export const sqlaAutoGeneratedMetricNameRegex =
diff --git a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx b/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
index 3105f3086..b39468841 100644
--- a/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
+++ b/superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx
@@ -96,7 +96,7 @@ describe('exploreUtils', () => {
       compareURI(
         URI(url),
         URI('/explore/').search({
-          standalone: DashboardStandaloneMode.HIDE_NAV,
+          standalone: DashboardStandaloneMode.HideNav,
         }),
       );
     });
diff --git a/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts b/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts
index 343f9efee..e6526ab70 100644
--- a/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts
+++ b/superset-frontend/src/explore/exploreUtils/getSimpleSQLExpression.test.ts
@@ -39,8 +39,8 @@ test('Should return "" if subject is falsy', () => {
 });
 
 test('Should return null string and empty string', () => {
-  expect(getSimpleSQLExpression(params.subject, Operators.IN, [null, ''])).toBe(
-    `subject ${Operators.IN} (${NULL_STRING}, ${EMPTY_STRING})`,
+  expect(getSimpleSQLExpression(params.subject, Operators.In, [null, ''])).toBe(
+    `subject ${Operators.In} (${NULL_STRING}, ${EMPTY_STRING})`,
   );
 });
 
diff --git a/superset-frontend/src/explore/exploreUtils/index.js b/superset-frontend/src/explore/exploreUtils/index.js
index 67dc0c776..4fc8147a1 100644
--- a/superset-frontend/src/explore/exploreUtils/index.js
+++ b/superset-frontend/src/explore/exploreUtils/index.js
@@ -99,7 +99,7 @@ export function mountExploreUrl(endpointType, extraSearch = {}, force = false) {
     if (force) {
       search.force = '1';
     }
-    search.standalone = DashboardStandaloneMode.HIDE_NAV;
+    search.standalone = DashboardStandaloneMode.HideNav;
   }
   return uri.directory(directory).search(search).toString();
 }
diff --git a/superset-frontend/src/features/alerts/AlertReportModal.tsx b/superset-frontend/src/features/alerts/AlertReportModal.tsx
index e371efcf1..98dae6849 100644
--- a/superset-frontend/src/features/alerts/AlertReportModal.tsx
+++ b/superset-frontend/src/features/alerts/AlertReportModal.tsx
@@ -504,7 +504,7 @@ const AlertReportModal: FunctionComponent<AlertReportModalProps> = ({
   const isEditMode = alert !== null;
   const formatOptionEnabled =
     contentType === 'chart' &&
-    (isFeatureEnabled(FeatureFlag.ALERTS_ATTACH_REPORTS) || isReport);
+    (isFeatureEnabled(FeatureFlag.AlertsAttachReports) || isReport);
 
   const [notificationAddState, setNotificationAddState] =
     useState<NotificationAddStatus>('active');
diff --git a/superset-frontend/src/features/alerts/types.ts b/superset-frontend/src/features/alerts/types.ts
index e01cf6f43..d8b166302 100644
--- a/superset-frontend/src/features/alerts/types.ts
+++ b/superset-frontend/src/features/alerts/types.ts
@@ -18,7 +18,7 @@
  */
 
 import Owner from 'src/types/Owner';
-import { NOTIFICATION_FORMATS } from 'src/features/reports/types';
+import { NotificationFormats } from 'src/features/reports/types';
 
 type user = {
   id: number;
@@ -85,7 +85,7 @@ export type AlertObject = {
   sql?: string;
   timezone?: string;
   recipients?: Array<Recipient>;
-  report_format?: NOTIFICATION_FORMATS;
+  report_format?: NotificationFormats;
   type?: string;
   validator_config_json?: {
     op?: Operator;
diff --git a/superset-frontend/src/features/charts/ChartCard.tsx b/superset-frontend/src/features/charts/ChartCard.tsx
index 38a46eb89..2883df20a 100644
--- a/superset-frontend/src/features/charts/ChartCard.tsx
+++ b/superset-frontend/src/features/charts/ChartCard.tsx
@@ -146,7 +146,7 @@ export default function ChartCard({
         certifiedBy={chart.certified_by}
         certificationDetails={chart.certification_details}
         cover={
-          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+          !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
             <></>
           ) : null
         }
diff --git a/superset-frontend/src/features/dashboards/DashboardCard.tsx b/superset-frontend/src/features/dashboards/DashboardCard.tsx
index 640648c90..e977c62f5 100644
--- a/superset-frontend/src/features/dashboards/DashboardCard.tsx
+++ b/superset-frontend/src/features/dashboards/DashboardCard.tsx
@@ -122,7 +122,7 @@ function DashboardCard({
           <Label>{dashboard.published ? t('published') : t('draft')}</Label>
         }
         cover={
-          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+          !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
             <></>
           ) : null
         }
diff --git a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
index 0125fd36d..c5e268e56 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/DatabaseConnectionForm/EncryptedField.tsx
@@ -26,8 +26,8 @@ import { FieldPropTypes } from '.';
 import { infoTooltip, labelMarginBottom, CredentialInfoForm } from '../styles';
 
 enum CredentialInfoOptions {
-  jsonUpload,
-  copyPaste,
+  JsonUpload,
+  CopyPaste,
 }
 
 // These are the columns that are going to be added to encrypted extra, they differ in name based
@@ -47,7 +47,7 @@ export const EncryptedField = ({
   editNewDb,
 }: FieldPropTypes) => {
   const [uploadOption, setUploadOption] = useState<number>(
-    CredentialInfoOptions.jsonUpload.valueOf(),
+    CredentialInfoOptions.JsonUpload.valueOf(),
   );
   const [fileToUpload, setFileToUpload] = useState<string | null | undefined>(
     null,
@@ -97,17 +97,17 @@ export const EncryptedField = ({
             style={{ width: '100%' }}
             onChange={option => setUploadOption(option)}
           >
-            <AntdSelect.Option value={CredentialInfoOptions.jsonUpload}>
+            <AntdSelect.Option value={CredentialInfoOptions.JsonUpload}>
               {t('Upload JSON file')}
             </AntdSelect.Option>
 
-            <AntdSelect.Option value={CredentialInfoOptions.copyPaste}>
+            <AntdSelect.Option value={CredentialInfoOptions.CopyPaste}>
               {t('Copy and Paste JSON credentials')}
             </AntdSelect.Option>
           </AntdSelect>
         </>
       )}
-      {uploadOption === CredentialInfoOptions.copyPaste ||
+      {uploadOption === CredentialInfoOptions.CopyPaste ||
       isEditMode ||
       editNewDb ? (
         <div className="input-container">
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
index f708761a2..7823d82fa 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelForm.tsx
@@ -59,7 +59,7 @@ const SSHTunnelForm = ({
   >;
   setSSHTunnelLoginMethod: (method: AuthType) => void;
 }) => {
-  const [usePassword, setUsePassword] = useState<AuthType>(AuthType.password);
+  const [usePassword, setUsePassword] = useState<AuthType>(AuthType.Password);
 
   return (
     <Form>
@@ -126,13 +126,13 @@ const SSHTunnelForm = ({
                 }}
               >
                 <Radio
-                  value={AuthType.password}
+                  value={AuthType.Password}
                   data-test="ssh-tunnel-use_password-radio"
                 >
                   {t('Password')}
                 </Radio>
                 <Radio
-                  value={AuthType.privateKey}
+                  value={AuthType.PrivateKey}
                   data-test="ssh-tunnel-use_private_key-radio"
                 >
                   {t('Private Key & Password')}
@@ -142,7 +142,7 @@ const SSHTunnelForm = ({
           </StyledDiv>
         </Col>
       </StyledRow>
-      {usePassword === AuthType.password && (
+      {usePassword === AuthType.Password && (
         <StyledRow gutter={16}>
           <Col xs={24}>
             <StyledDiv>
@@ -172,7 +172,7 @@ const SSHTunnelForm = ({
           </Col>
         </StyledRow>
       )}
-      {usePassword === AuthType.privateKey && (
+      {usePassword === AuthType.PrivateKey && (
         <>
           <StyledRow gutter={16}>
             <Col xs={24}>
diff --git a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
index a3cc38ca3..388e3c83b 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/SSHTunnelSwitch.tsx
@@ -41,7 +41,7 @@ const SSHTunnelSwitch = ({
           setUseSSHTunneling(changed);
           if (!changed) {
             setDB({
-              type: ActionType.removeSSHTunnelConfig,
+              type: ActionType.RemoveSSHTunnelConfig,
             });
           }
         }}
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
index ba443e009..0f60857f0 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
@@ -30,7 +30,7 @@ import {
 import { getExtensionsRegistry } from '@superset-ui/core';
 import setupExtensions from 'src/setup/setupExtensions';
 import * as hooks from 'src/views/CRUD/hooks';
-import { DatabaseObject, CONFIGURATION_METHOD } from '../types';
+import { DatabaseObject, ConfigurationMethod } from '../types';
 import DatabaseModal, {
   dbReducer,
   DBReducerActionType,
@@ -304,7 +304,7 @@ fetchMock.post(VALIDATE_PARAMS_ENDPOINT, {
 const databaseFixture: DatabaseObject = {
   id: 123,
   backend: 'postgres',
-  configuration_method: CONFIGURATION_METHOD.DYNAMIC_FORM,
+  configuration_method: ConfigurationMethod.DynamicForm,
   database_name: 'Postgres',
   name: 'PostgresDB',
   is_managed_externally: false,
@@ -1639,14 +1639,14 @@ describe('DatabaseModal', () => {
 
 describe('dbReducer', () => {
   test('it will reset state to null', () => {
-    const action: DBReducerActionType = { type: ActionType.reset };
+    const action: DBReducerActionType = { type: ActionType.Reset };
     const currentState = dbReducer(databaseFixture, action);
     expect(currentState).toBeNull();
   });
 
   test('it will set state to payload from fetched', () => {
     const action: DBReducerActionType = {
-      type: ActionType.fetched,
+      type: ActionType.Fetched,
       payload: databaseFixture,
     };
     const currentState = dbReducer({}, action);
@@ -1661,7 +1661,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra editor', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraEditorChange,
+      type: ActionType.ExtraEditorChange,
       payload: { name: 'foo', json: JSON.stringify({ bar: 1 }) },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1674,7 +1674,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from editor', () => {
     const action: DBReducerActionType = {
-      type: ActionType.editorChange,
+      type: ActionType.EditorChange,
       payload: { name: 'foo', json: JSON.stringify({ bar: 1 }) },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1687,7 +1687,7 @@ describe('dbReducer', () => {
 
   test('it will add extra payload to existing extra data', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraEditorChange,
+      type: ActionType.ExtraEditorChange,
       payload: { name: 'foo', json: JSON.stringify({ bar: 1 }) },
     };
     // extra should be a string
@@ -1707,7 +1707,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'foo', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1721,7 +1721,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change when checkbox', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'foo', type: 'checkbox', checked: true },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1735,7 +1735,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change when schema_cache_timeout', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schema_cache_timeout', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1749,7 +1749,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from extra input change when table_cache_timeout', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'table_cache_timeout', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1763,7 +1763,7 @@ describe('dbReducer', () => {
 
   test('it will overwrite state to payload from extra input change when table_cache_timeout', () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'table_cache_timeout', value: 'bar' },
     };
     const currentState = dbReducer(
@@ -1784,7 +1784,7 @@ describe('dbReducer', () => {
   test(`it will set state to payload from extra
   input change when schemas_allowed_for_file_upload`, () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schemas_allowed_for_file_upload', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1799,7 +1799,7 @@ describe('dbReducer', () => {
   test(`it will overwrite state to payload from extra
   input change when schemas_allowed_for_file_upload`, () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schemas_allowed_for_file_upload', value: 'bar' },
     };
     const currentState = dbReducer(
@@ -1821,7 +1821,7 @@ describe('dbReducer', () => {
   input change when schemas_allowed_for_file_upload
   with blank list`, () => {
     const action: DBReducerActionType = {
-      type: ActionType.extraInputChange,
+      type: ActionType.ExtraInputChange,
       payload: { name: 'schemas_allowed_for_file_upload', value: 'bar,' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1835,7 +1835,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from input change', () => {
     const action: DBReducerActionType = {
-      type: ActionType.inputChange,
+      type: ActionType.InputChange,
       payload: { name: 'foo', value: 'bar' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1848,7 +1848,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from input change for checkbox', () => {
     const action: DBReducerActionType = {
-      type: ActionType.inputChange,
+      type: ActionType.InputChange,
       payload: { name: 'foo', type: 'checkbox', checked: true },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1861,7 +1861,7 @@ describe('dbReducer', () => {
 
   test('it will change state to payload from input change for checkbox', () => {
     const action: DBReducerActionType = {
-      type: ActionType.inputChange,
+      type: ActionType.InputChange,
       payload: { name: 'allow_ctas', type: 'checkbox', checked: false },
     };
     const currentState = dbReducer(
@@ -1880,7 +1880,7 @@ describe('dbReducer', () => {
 
   test('it will add a parameter', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'host', value: '127.0.0.1' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -1895,7 +1895,7 @@ describe('dbReducer', () => {
 
   test('it will add a parameter with existing parameters', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'port', value: '1234' },
     };
     const currentState = dbReducer(
@@ -1919,7 +1919,7 @@ describe('dbReducer', () => {
 
   test('it will change a parameter with existing parameters', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'host', value: 'localhost' },
     };
     const currentState = dbReducer(
@@ -1942,7 +1942,7 @@ describe('dbReducer', () => {
 
   test('it will set state to payload from parametersChange with catalog', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersChange,
+      type: ActionType.ParametersChange,
       payload: { name: 'name', type: 'catalog-0', value: 'bar' },
     };
     const currentState = dbReducer(
@@ -1963,7 +1963,7 @@ describe('dbReducer', () => {
 
   test('it will add a new catalog array when empty', () => {
     const action: DBReducerActionType = {
-      type: ActionType.addTableCatalogSheet,
+      type: ActionType.AddTableCatalogSheet,
     };
     const currentState = dbReducer(databaseFixture, action);
 
@@ -1975,7 +1975,7 @@ describe('dbReducer', () => {
 
   test('it will add a new catalog array when one exists', () => {
     const action: DBReducerActionType = {
-      type: ActionType.addTableCatalogSheet,
+      type: ActionType.AddTableCatalogSheet,
     };
     const currentState = dbReducer(
       { ...databaseFixture, catalog: [{ name: 'foo', value: 'baz' }] },
@@ -1993,7 +1993,7 @@ describe('dbReducer', () => {
 
   test('it will remove a catalog when one exists', () => {
     const action: DBReducerActionType = {
-      type: ActionType.removeTableCatalogSheet,
+      type: ActionType.RemoveTableCatalogSheet,
       payload: { indexToDelete: 0 },
     };
     const currentState = dbReducer(
@@ -2010,7 +2010,7 @@ describe('dbReducer', () => {
   test('it will add db information when one is selected', () => {
     const { backend, ...db } = databaseFixture;
     const action: DBReducerActionType = {
-      type: ActionType.dbSelected,
+      type: ActionType.DbSelected,
       payload: {
         engine_information: {
           supports_file_upload: true,
@@ -2042,7 +2042,7 @@ describe('dbReducer', () => {
 
   test('it will add a SSH Tunnel config parameter', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersSSHTunnelChange,
+      type: ActionType.ParametersSSHTunnelChange,
       payload: { name: 'server_address', value: '127.0.0.1' },
     };
     const currentState = dbReducer(databaseFixture, action);
@@ -2057,7 +2057,7 @@ describe('dbReducer', () => {
 
   test('it will add a SSH Tunnel config parameter with existing configs', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersSSHTunnelChange,
+      type: ActionType.ParametersSSHTunnelChange,
       payload: { name: 'server_port', value: '22' },
     };
     const currentState = dbReducer(
@@ -2081,7 +2081,7 @@ describe('dbReducer', () => {
 
   test('it will change a SSH Tunnel config parameter with existing configs', () => {
     const action: DBReducerActionType = {
-      type: ActionType.parametersSSHTunnelChange,
+      type: ActionType.ParametersSSHTunnelChange,
       payload: { name: 'server_address', value: 'localhost' },
     };
     const currentState = dbReducer(
@@ -2104,7 +2104,7 @@ describe('dbReducer', () => {
 
   test('it will remove the SSH Tunnel config parameters', () => {
     const action: DBReducerActionType = {
-      type: ActionType.removeSSHTunnelConfig,
+      type: ActionType.RemoveSSHTunnelConfig,
     };
     const currentState = dbReducer(databaseFixture, action);
     expect(currentState).toEqual({
diff --git a/superset-frontend/src/features/databases/DatabaseModal/index.tsx b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
index 18c93f2bf..add521812 100644
--- a/superset-frontend/src/features/databases/DatabaseModal/index.tsx
+++ b/superset-frontend/src/features/databases/DatabaseModal/index.tsx
@@ -61,7 +61,7 @@ import { isEmpty, pick } from 'lodash';
 import {
   DatabaseObject,
   DatabaseForm,
-  CONFIGURATION_METHOD,
+  ConfigurationMethod,
   CatalogObject,
   Engines,
   ExtraJson,
@@ -145,27 +145,27 @@ interface DatabaseModalProps {
 }
 
 export enum ActionType {
-  addTableCatalogSheet,
-  configMethodChange,
-  dbSelected,
-  editorChange,
-  extraEditorChange,
-  extraInputChange,
-  fetched,
-  inputChange,
-  parametersChange,
-  queryChange,
-  removeTableCatalogSheet,
-  reset,
-  textChange,
-  parametersSSHTunnelChange,
-  setSSHTunnelLoginMethod,
-  removeSSHTunnelConfig,
+  AddTableCatalogSheet,
+  ConfigMethodChange,
+  DbSelected,
+  EditorChange,
+  ExtraEditorChange,
+  ExtraInputChange,
+  Fetched,
+  InputChange,
+  ParametersChange,
+  QueryChange,
+  RemoveTableCatalogSheet,
+  Reset,
+  TextChange,
+  ParametersSSHTunnelChange,
+  SetSSHTunnelLoginMethod,
+  RemoveSSHTunnelConfig,
 }
 
 export enum AuthType {
-  password,
-  privateKey,
+  Password,
+  PrivateKey,
 }
 
 interface DBReducerPayloadType {
@@ -180,26 +180,26 @@ interface DBReducerPayloadType {
 export type DBReducerActionType =
   | {
       type:
-        | ActionType.extraEditorChange
-        | ActionType.extraInputChange
-        | ActionType.textChange
-        | ActionType.queryChange
-        | ActionType.inputChange
-        | ActionType.editorChange
-        | ActionType.parametersChange
-        | ActionType.parametersSSHTunnelChange;
+        | ActionType.ExtraEditorChange
+        | ActionType.ExtraInputChange
+        | ActionType.TextChange
+        | ActionType.QueryChange
+        | ActionType.InputChange
+        | ActionType.EditorChange
+        | ActionType.ParametersChange
+        | ActionType.ParametersSSHTunnelChange;
       payload: DBReducerPayloadType;
     }
   | {
-      type: ActionType.fetched;
+      type: ActionType.Fetched;
       payload: Partial<DatabaseObject>;
     }
   | {
-      type: ActionType.dbSelected;
+      type: ActionType.DbSelected;
       payload: {
         database_name?: string;
         engine?: string;
-        configuration_method: CONFIGURATION_METHOD;
+        configuration_method: ConfigurationMethod;
         engine_information?: {};
         driver?: string;
         sqlalchemy_uri_placeholder?: string;
@@ -207,26 +207,26 @@ export type DBReducerActionType =
     }
   | {
       type:
-        | ActionType.reset
-        | ActionType.addTableCatalogSheet
-        | ActionType.removeSSHTunnelConfig;
+        | ActionType.Reset
+        | ActionType.AddTableCatalogSheet
+        | ActionType.RemoveSSHTunnelConfig;
     }
   | {
-      type: ActionType.removeTableCatalogSheet;
+      type: ActionType.RemoveTableCatalogSheet;
       payload: {
         indexToDelete: number;
       };
     }
   | {
-      type: ActionType.configMethodChange;
+      type: ActionType.ConfigMethodChange;
       payload: {
         database_name?: string;
         engine?: string;
-        configuration_method: CONFIGURATION_METHOD;
+        configuration_method: ConfigurationMethod;
       };
     }
   | {
-      type: ActionType.setSSHTunnelLoginMethod;
+      type: ActionType.SetSSHTunnelLoginMethod;
       payload: {
         login_method: AuthType;
       };
@@ -251,7 +251,7 @@ export function dbReducer(
   const extraJson: ExtraJson = JSON.parse(trimmedState.extra || '{}');
 
   switch (action.type) {
-    case ActionType.extraEditorChange:
+    case ActionType.ExtraEditorChange:
       // "extra" payload in state is a string
       try {
         // we don't want to stringify encoded strings twice
@@ -266,7 +266,7 @@ export function dbReducer(
           [action.payload.name]: actionPayloadJson,
         }),
       };
-    case ActionType.extraInputChange:
+    case ActionType.ExtraInputChange:
       // "extra" payload in state is a string
       if (
         action.payload.name === 'schema_cache_timeout' ||
@@ -329,7 +329,7 @@ export function dbReducer(
               : action.payload.value,
         }),
       };
-    case ActionType.inputChange:
+    case ActionType.InputChange:
       if (action.payload.type === 'checkbox') {
         return {
           ...trimmedState,
@@ -340,7 +340,7 @@ export function dbReducer(
         ...trimmedState,
         [action.payload.name]: action.payload.value,
       };
-    case ActionType.parametersChange:
+    case ActionType.ParametersChange:
       // catalog params will always have a catalog state for
       // dbs that use a catalog, i.e., gsheets, even if the
       // fields are empty strings
@@ -382,7 +382,7 @@ export function dbReducer(
         },
       };
 
-    case ActionType.parametersSSHTunnelChange:
+    case ActionType.ParametersSSHTunnelChange:
       return {
         ...trimmedState,
         ssh_tunnel: {
@@ -390,7 +390,7 @@ export function dbReducer(
           [action.payload.name]: action.payload.value,
         },
       };
-    case ActionType.setSSHTunnelLoginMethod: {
+    case ActionType.SetSSHTunnelLoginMethod: {
       let ssh_tunnel = {};
       if (trimmedState?.ssh_tunnel) {
         // remove any attributes that are considered sensitive
@@ -401,7 +401,7 @@ export function dbReducer(
           'username',
         ]);
       }
-      if (action.payload.login_method === AuthType.privateKey) {
+      if (action.payload.login_method === AuthType.PrivateKey) {
         return {
           ...trimmedState,
           ssh_tunnel: {
@@ -412,7 +412,7 @@ export function dbReducer(
           },
         };
       }
-      if (action.payload.login_method === AuthType.password) {
+      if (action.payload.login_method === AuthType.Password) {
         return {
           ...trimmedState,
           ssh_tunnel: {
@@ -425,12 +425,12 @@ export function dbReducer(
         ...trimmedState,
       };
     }
-    case ActionType.removeSSHTunnelConfig:
+    case ActionType.RemoveSSHTunnelConfig:
       return {
         ...trimmedState,
         ssh_tunnel: undefined,
       };
-    case ActionType.addTableCatalogSheet:
+    case ActionType.AddTableCatalogSheet:
       if (trimmedState.catalog !== undefined) {
         return {
           ...trimmedState,
@@ -441,17 +441,17 @@ export function dbReducer(
         ...trimmedState,
         catalog: [{ name: '', value: '' }],
       };
-    case ActionType.removeTableCatalogSheet:
+    case ActionType.RemoveTableCatalogSheet:
       trimmedState.catalog?.splice(action.payload.indexToDelete, 1);
       return {
         ...trimmedState,
       };
-    case ActionType.editorChange:
+    case ActionType.EditorChange:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.json,
       };
-    case ActionType.queryChange:
+    case ActionType.QueryChange:
       return {
         ...trimmedState,
         parameters: {
@@ -460,12 +460,12 @@ export function dbReducer(
         },
         query_input: action.payload.value,
       };
-    case ActionType.textChange:
+    case ActionType.TextChange:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
       };
-    case ActionType.fetched:
+    case ActionType.Fetched:
       // convert query to a string and store in query_input
       query = action.payload?.parameters?.query || {};
       query_input = Object.entries(query)
@@ -474,8 +474,7 @@ export function dbReducer(
 
       if (
         action.payload.masked_encrypted_extra &&
-        action.payload.configuration_method ===
-          CONFIGURATION_METHOD.DYNAMIC_FORM
+        action.payload.configuration_method === ConfigurationMethod.DynamicForm
       ) {
         // "extra" payload from the api is a string
         const extraJsonPayload: ExtraJson = {
@@ -510,19 +509,19 @@ export function dbReducer(
         query_input,
       };
 
-    case ActionType.dbSelected:
+    case ActionType.DbSelected:
       // set initial state for blank form
       return {
         ...action.payload,
         extra: DEFAULT_EXTRA,
         expose_in_sqllab: true,
       };
-    case ActionType.configMethodChange:
+    case ActionType.ConfigMethodChange:
       return {
         ...action.payload,
       };
 
-    case ActionType.reset:
+    case ActionType.Reset:
     default:
       return null;
   }
@@ -626,12 +625,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     ) as DatabaseObject
   )?.engine_information?.disable_ssh_tunneling;
   const isSSHTunneling =
-    isFeatureEnabled(FeatureFlag.SSH_TUNNELING) &&
-    !disableSSHTunnelingForEngine;
+    isFeatureEnabled(FeatureFlag.SshTunneling) && !disableSSHTunnelingForEngine;
   const hasAlert =
     connectionAlert || !!(db?.engine && engineSpecificAlertMapping[db.engine]);
   const useSqlAlchemyForm =
-    db?.configuration_method === CONFIGURATION_METHOD.SQLALCHEMY_URI;
+    db?.configuration_method === ConfigurationMethod.SqlalchemyUri;
   const useTabLayout = isEditMode || useSqlAlchemyForm;
   const isDynamic = (engine: string | undefined) =>
     availableDbs?.databases?.find(
@@ -690,7 +688,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   };
 
   const onClose = () => {
-    setDB({ type: ActionType.reset });
+    setDB({ type: ActionType.Reset });
     setHasConnectedDb(false);
     setValidationErrors(null); // reset validation errors on close
     clearError();
@@ -752,7 +750,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     // Clone DB object
     const dbToUpdate = { ...(db || {}) };
 
-    if (dbToUpdate.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM) {
+    if (dbToUpdate.configuration_method === ConfigurationMethod.DynamicForm) {
       // Validate DB before saving
       if (dbToUpdate?.parameters?.catalog) {
         // need to stringify gsheets catalog to allow it to be serialized
@@ -836,7 +834,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       const result = await updateResource(
         db.id as number,
         dbToUpdate as DatabaseObject,
-        dbToUpdate.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM, // onShow toast on SQLA Forms
+        dbToUpdate.configuration_method === ConfigurationMethod.DynamicForm, // onShow toast on SQLA Forms
       );
       if (result) {
         if (onDatabaseAdd) onDatabaseAdd();
@@ -861,7 +859,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       // Create
       const dbId = await createResource(
         dbToUpdate as DatabaseObject,
-        dbToUpdate.configuration_method === CONFIGURATION_METHOD.DYNAMIC_FORM, // onShow toast on SQLA Forms
+        dbToUpdate.configuration_method === ConfigurationMethod.DynamicForm, // onShow toast on SQLA Forms
       );
       if (dbId) {
         setHasConnectedDb(true);
@@ -934,10 +932,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
     if (database_name === 'Other') {
       // Allow users to connect to DB via legacy SQLA form
       setDB({
-        type: ActionType.dbSelected,
+        type: ActionType.DbSelected,
         payload: {
           database_name,
-          configuration_method: CONFIGURATION_METHOD.SQLALCHEMY_URI,
+          configuration_method: ConfigurationMethod.SqlalchemyUri,
           engine: undefined,
           engine_information: {
             supports_file_upload: true,
@@ -957,13 +955,13 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       } = selectedDbModel;
       const isDynamic = parameters !== undefined;
       setDB({
-        type: ActionType.dbSelected,
+        type: ActionType.DbSelected,
         payload: {
           database_name,
           engine,
           configuration_method: isDynamic
-            ? CONFIGURATION_METHOD.DYNAMIC_FORM
-            : CONFIGURATION_METHOD.SQLALCHEMY_URI,
+            ? ConfigurationMethod.DynamicForm
+            : ConfigurationMethod.SqlalchemyUri,
           engine_information,
           driver: default_driver,
           sqlalchemy_uri_placeholder,
@@ -972,7 +970,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
       if (engine === Engines.GSheet) {
         // only create a catalog if the DB is Google Sheets
-        setDB({ type: ActionType.addTableCatalogSheet });
+        setDB({ type: ActionType.AddTableCatalogSheet });
       }
     }
   };
@@ -1086,7 +1084,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       setSSHTunnelPrivateKeys({});
       setSSHTunnelPrivateKeyPasswords({});
     }
-    setDB({ type: ActionType.reset });
+    setDB({ type: ActionType.Reset });
     setFileList([]);
   };
 
@@ -1238,7 +1236,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   useEffect(() => {
     if (dbFetched) {
       setDB({
-        type: ActionType.fetched,
+        type: ActionType.Fetched,
         payload: dbFetched,
       });
       // keep a copy of the name separate for display purposes
@@ -1545,7 +1543,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const fetchAndSetDB = () => {
     setLoading(true);
     fetchResource(dbFetched?.id as number).then(r => {
-      setItem(LocalStorageKeys.db, r);
+      setItem(LocalStorageKeys.Database, r);
     });
   };
 
@@ -1557,7 +1555,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }: {
         target: HTMLInputElement | HTMLTextAreaElement;
       }) =>
-        onChange(ActionType.parametersSSHTunnelChange, {
+        onChange(ActionType.ParametersSSHTunnelChange, {
           type: target.type,
           name: target.name,
           value: target.value,
@@ -1565,7 +1563,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
       }
       setSSHTunnelLoginMethod={(method: AuthType) =>
         setDB({
-          type: ActionType.setSSHTunnelLoginMethod,
+          type: ActionType.SetSSHTunnelLoginMethod,
           payload: { login_method: method },
         })
       }
@@ -1605,28 +1603,28 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
         sslForced={false}
         dbModel={dbModel}
         onAddTableCatalog={() => {
-          setDB({ type: ActionType.addTableCatalogSheet });
+          setDB({ type: ActionType.AddTableCatalogSheet });
         }}
         onQueryChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.queryChange, {
+          onChange(ActionType.QueryChange, {
             name: target.name,
             value: target.value,
           })
         }
         onExtraInputChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.extraInputChange, {
+          onChange(ActionType.ExtraInputChange, {
             name: target.name,
             value: target.value,
           })
         }
         onRemoveTableCatalog={(idx: number) => {
           setDB({
-            type: ActionType.removeTableCatalogSheet,
+            type: ActionType.RemoveTableCatalogSheet,
             payload: { indexToDelete: idx },
           });
         }}
         onParametersChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.parametersChange, {
+          onChange(ActionType.ParametersChange, {
             type: target.type,
             name: target.name,
             checked: target.checked,
@@ -1634,7 +1632,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           })
         }
         onChange={({ target }: { target: HTMLInputElement }) =>
-          onChange(ActionType.textChange, {
+          onChange(ActionType.TextChange, {
             name: target.name,
             value: target.value,
           })
@@ -1657,7 +1655,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
           extraExtension={dbConfigExtraExtension}
           db={db as DatabaseObject}
           onInputChange={({ target }: { target: HTMLInputElement }) =>
-            onChange(ActionType.inputChange, {
+            onChange(ActionType.InputChange, {
               type: target.type,
               name: target.name,
               checked: target.checked,
@@ -1665,16 +1663,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             })
           }
           onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
-            onChange(ActionType.textChange, {
+            onChange(ActionType.TextChange, {
               name: target.name,
               value: target.value,
             })
           }
           onEditorChange={(payload: { name: string; json: any }) =>
-            onChange(ActionType.editorChange, payload)
+            onChange(ActionType.EditorChange, payload)
           }
           onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
-            onChange(ActionType.extraInputChange, {
+            onChange(ActionType.ExtraInputChange, {
               type: target.type,
               name: target.name,
               checked: target.checked,
@@ -1682,7 +1680,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             });
           }}
           onExtraEditorChange={(payload: { name: string; json: any }) =>
-            onChange(ActionType.extraEditorChange, payload)
+            onChange(ActionType.ExtraEditorChange, payload)
           }
         />
       );
@@ -1782,7 +1780,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               <SqlAlchemyForm
                 db={db as DatabaseObject}
                 onInputChange={({ target }: { target: HTMLInputElement }) =>
-                  onChange(ActionType.inputChange, {
+                  onChange(ActionType.InputChange, {
                     type: target.type,
                     name: target.name,
                     checked: target.checked,
@@ -1810,11 +1808,10 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     buttonStyle="link"
                     onClick={() =>
                       setDB({
-                        type: ActionType.configMethodChange,
+                        type: ActionType.ConfigMethodChange,
                         payload: {
                           database_name: db?.database_name,
-                          configuration_method:
-                            CONFIGURATION_METHOD.DYNAMIC_FORM,
+                          configuration_method: ConfigurationMethod.DynamicForm,
                           engine: db?.engine,
                         },
                       })
@@ -1869,7 +1866,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             extraExtension={dbConfigExtraExtension}
             db={db as DatabaseObject}
             onInputChange={({ target }: { target: HTMLInputElement }) =>
-              onChange(ActionType.inputChange, {
+              onChange(ActionType.InputChange, {
                 type: target.type,
                 name: target.name,
                 checked: target.checked,
@@ -1877,16 +1874,16 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               })
             }
             onTextChange={({ target }: { target: HTMLTextAreaElement }) =>
-              onChange(ActionType.textChange, {
+              onChange(ActionType.TextChange, {
                 name: target.name,
                 value: target.value,
               })
             }
             onEditorChange={(payload: { name: string; json: any }) =>
-              onChange(ActionType.editorChange, payload)
+              onChange(ActionType.EditorChange, payload)
             }
             onExtraInputChange={({ target }: { target: HTMLInputElement }) => {
-              onChange(ActionType.extraInputChange, {
+              onChange(ActionType.ExtraInputChange, {
                 type: target.type,
                 name: target.name,
                 checked: target.checked,
@@ -1894,7 +1891,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               });
             }}
             onExtraEditorChange={(payload: { name: string; json: any }) => {
-              onChange(ActionType.extraEditorChange, payload);
+              onChange(ActionType.ExtraEditorChange, payload);
             }}
           />
         </Tabs.TabPane>
@@ -1993,11 +1990,11 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                         buttonStyle="link"
                         onClick={() =>
                           setDB({
-                            type: ActionType.configMethodChange,
+                            type: ActionType.ConfigMethodChange,
                             payload: {
                               engine: db.engine,
                               configuration_method:
-                                CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                                ConfigurationMethod.SqlalchemyUri,
                               database_name: db.database_name,
                             },
                           })
diff --git a/superset-frontend/src/features/databases/types.ts b/superset-frontend/src/features/databases/types.ts
index 1d616fa13..50e535f9b 100644
--- a/superset-frontend/src/features/databases/types.ts
+++ b/superset-frontend/src/features/databases/types.ts
@@ -41,7 +41,7 @@ export type DatabaseObject = {
   backend?: string;
   changed_on?: string;
   changed_on_delta_humanized?: string;
-  configuration_method: CONFIGURATION_METHOD;
+  configuration_method: ConfigurationMethod;
   created_by?: null | DatabaseUser;
   database_name: string;
   driver: string;
@@ -199,9 +199,9 @@ export type DatabaseForm = {
 
 // the values should align with the database
 // model enum in superset/superset/models/core.py
-export enum CONFIGURATION_METHOD {
-  SQLALCHEMY_URI = 'sqlalchemy_form',
-  DYNAMIC_FORM = 'dynamic_form',
+export enum ConfigurationMethod {
+  SqlalchemyUri = 'sqlalchemy_form',
+  DynamicForm = 'dynamic_form',
 }
 
 export enum Engines {
diff --git a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
index c49e48d3f..38563b6c9 100644
--- a/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/DatasetPanel/DatasetPanel.tsx
@@ -290,7 +290,7 @@ const DatasetPanel = ({
               <TableScrollContainer>
                 <Table
                   loading={loading}
-                  size={TableSize.SMALL}
+                  size={TableSize.Small}
                   columns={tableColumnDefinition}
                   data={columnList}
                   pageSizeOptions={pageSizeOptions}
@@ -303,7 +303,7 @@ const DatasetPanel = ({
               <TableScrollContainer>
                 <Table
                   loading={loading}
-                  size={TableSize.SMALL}
+                  size={TableSize.Small}
                   columns={tableColumnDefinition}
                   data={columnList}
                   pageSizeOptions={pageSizeOptions}
diff --git a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
index a744381df..7238b6b06 100644
--- a/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/EditDataset/UsageTab/index.tsx
@@ -161,7 +161,7 @@ const useDatasetChartRecords = (datasetId: string) => {
     () => [
       {
         id: 'datasource_id',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         value: datasetId,
       },
     ],
@@ -241,7 +241,7 @@ const DatasetUsage = ({ datasetId }: DatasetUsageProps) => {
       <Table
         columns={columns}
         data={data}
-        size={TableSize.MIDDLE}
+        size={TableSize.Middle}
         defaultPageSize={DEFAULT_PAGE_SIZE}
         recordCount={recordCount}
         loading={loading}
diff --git a/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx b/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
index 78669b2df..57572e185 100644
--- a/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/Header/index.tsx
@@ -75,7 +75,7 @@ export default function Header({
     placeholder: DEFAULT_TITLE,
     onSave: (newDatasetName: string) => {
       setDataset({
-        type: DatasetActionType.changeDataset,
+        type: DatasetActionType.ChangeDataset,
         payload: { name: 'dataset_name', value: newDatasetName },
       });
     },
diff --git a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
index 1be10f4a0..093a65626 100644
--- a/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/LeftPanel/index.tsx
@@ -125,27 +125,27 @@ export default function LeftPanel({
 
   const setDatabase = useCallback(
     (db: Partial<DatabaseObject>) => {
-      setDataset({ type: DatasetActionType.selectDatabase, payload: { db } });
+      setDataset({ type: DatasetActionType.SelectDatabase, payload: { db } });
     },
     [setDataset],
   );
   const setSchema = (schema: string) => {
     if (schema) {
       setDataset({
-        type: DatasetActionType.selectSchema,
+        type: DatasetActionType.SelectSchema,
         payload: { name: 'schema', value: schema },
       });
     }
   };
   const setTable = (tableName: string) => {
     setDataset({
-      type: DatasetActionType.selectTable,
+      type: DatasetActionType.SelectTable,
       payload: { name: 'table_name', value: tableName },
     });
   };
   useEffect(() => {
     const currentUserSelectedDb = getItem(
-      LocalStorageKeys.db,
+      LocalStorageKeys.Database,
       null,
     ) as DatabaseObject;
     if (currentUserSelectedDb) {
diff --git a/superset-frontend/src/features/datasets/AddDataset/types.tsx b/superset-frontend/src/features/datasets/AddDataset/types.tsx
index 89473e542..998d31594 100644
--- a/superset-frontend/src/features/datasets/AddDataset/types.tsx
+++ b/superset-frontend/src/features/datasets/AddDataset/types.tsx
@@ -19,10 +19,10 @@
 import { DatabaseObject } from 'src/components/DatabaseSelector';
 
 export enum DatasetActionType {
-  selectDatabase,
-  selectSchema,
-  selectTable,
-  changeDataset,
+  SelectDatabase,
+  SelectSchema,
+  SelectTable,
+  ChangeDataset,
 }
 
 export interface DatasetObject {
@@ -44,13 +44,13 @@ export type Schema = {
 
 export type DSReducerActionType =
   | {
-      type: DatasetActionType.selectDatabase;
+      type: DatasetActionType.SelectDatabase;
       payload: Partial<DatasetObject>;
     }
   | {
       type:
-        | DatasetActionType.changeDataset
-        | DatasetActionType.selectSchema
-        | DatasetActionType.selectTable;
+        | DatasetActionType.ChangeDataset
+        | DatasetActionType.SelectSchema
+        | DatasetActionType.SelectTable;
       payload: DatasetReducerPayloadType;
     };
diff --git a/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx b/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
index 8c2f83977..5a5281720 100644
--- a/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
+++ b/superset-frontend/src/features/datasets/metadataBar/useDatasetMetadataBar.tsx
@@ -38,7 +38,7 @@ export const useDatasetMetadataBar = ({
   const theme = useTheme();
   const [result, setResult] = useState<Dataset>();
   const [status, setStatus] = useState<ResourceStatus>(
-    datasetProps ? ResourceStatus.COMPLETE : ResourceStatus.LOADING,
+    datasetProps ? ResourceStatus.Complete : ResourceStatus.Loading,
   );
 
   useEffect(() => {
@@ -48,10 +48,10 @@ export const useDatasetMetadataBar = ({
       })
         .then(({ json: { result } }) => {
           setResult(result);
-          setStatus(ResourceStatus.COMPLETE);
+          setStatus(ResourceStatus.Complete);
         })
         .catch(() => {
-          setStatus(ResourceStatus.ERROR);
+          setStatus(ResourceStatus.Error);
         });
     }
   }, [datasetId, datasetProps]);
@@ -82,23 +82,23 @@ export const useDatasetMetadataBar = ({
           ? owners.map(owner => `${owner.first_name} ${owner.last_name}`)
           : [notAvailable];
       items.push({
-        type: MetadataType.TABLE,
+        type: MetadataType.Table,
         title: table_name,
       });
       items.push({
-        type: MetadataType.LAST_MODIFIED,
+        type: MetadataType.LastModified,
         value: changed_on_humanized,
         modifiedBy,
       });
       items.push({
-        type: MetadataType.OWNER,
+        type: MetadataType.Owner,
         createdBy,
         owners: formattedOwners,
         createdOn: created_on_humanized,
       });
       if (description) {
         items.push({
-          type: MetadataType.DESCRIPTION,
+          type: MetadataType.Description,
           value: description,
         });
       }
@@ -110,10 +110,10 @@ export const useDatasetMetadataBar = ({
           margin-bottom: ${theme.gridUnit * 4}px;
         `}
       >
-        {status === ResourceStatus.COMPLETE && (
+        {status === ResourceStatus.Complete && (
           <MetadataBar items={items} tooltipPlacement="bottom" />
         )}
-        {status === ResourceStatus.ERROR && (
+        {status === ResourceStatus.Error && (
           <Alert
             type="error"
             message={t('There was an error loading the dataset metadata')}
diff --git a/superset-frontend/src/features/home/ActivityTable.tsx b/superset-frontend/src/features/home/ActivityTable.tsx
index b3f43eac5..2bedeb43b 100644
--- a/superset-frontend/src/features/home/ActivityTable.tsx
+++ b/superset-frontend/src/features/home/ActivityTable.tsx
@@ -151,7 +151,7 @@ export default function ActivityTable({
       label: t('Edited'),
       onClick: () => {
         setActiveChild(TableTab.Edited);
-        setItem(LocalStorageKeys.homepage_activity_filter, TableTab.Edited);
+        setItem(LocalStorageKeys.HomepageActivityFilter, TableTab.Edited);
       },
     },
     {
@@ -159,7 +159,7 @@ export default function ActivityTable({
       label: t('Created'),
       onClick: () => {
         setActiveChild(TableTab.Created);
-        setItem(LocalStorageKeys.homepage_activity_filter, TableTab.Created);
+        setItem(LocalStorageKeys.HomepageActivityFilter, TableTab.Created);
       },
     },
   ];
@@ -170,7 +170,7 @@ export default function ActivityTable({
       label: t('Viewed'),
       onClick: () => {
         setActiveChild(TableTab.Viewed);
-        setItem(LocalStorageKeys.homepage_activity_filter, TableTab.Viewed);
+        setItem(LocalStorageKeys.HomepageActivityFilter, TableTab.Viewed);
       },
     });
   }
diff --git a/superset-frontend/src/features/home/ChartTable.tsx b/superset-frontend/src/features/home/ChartTable.tsx
index c84a0c81c..65b904a48 100644
--- a/superset-frontend/src/features/home/ChartTable.tsx
+++ b/superset-frontend/src/features/home/ChartTable.tsx
@@ -72,7 +72,7 @@ function ChartTable({
 }: ChartTableProps) {
   const history = useHistory();
   const initialTab = getItem(
-    LocalStorageKeys.homepage_chart_filter,
+    LocalStorageKeys.HomepageChartFilter,
     TableTab.Other,
   );
 
@@ -145,7 +145,7 @@ function ChartTable({
       label: t('Favorite'),
       onClick: () => {
         setActiveTab(TableTab.Favorite);
-        setItem(LocalStorageKeys.homepage_chart_filter, TableTab.Favorite);
+        setItem(LocalStorageKeys.HomepageChartFilter, TableTab.Favorite);
       },
     },
     {
@@ -153,7 +153,7 @@ function ChartTable({
       label: t('Mine'),
       onClick: () => {
         setActiveTab(TableTab.Mine);
-        setItem(LocalStorageKeys.homepage_chart_filter, TableTab.Mine);
+        setItem(LocalStorageKeys.HomepageChartFilter, TableTab.Mine);
       },
     },
   ];
@@ -163,7 +163,7 @@ function ChartTable({
       label: otherTabTitle,
       onClick: () => {
         setActiveTab(TableTab.Other);
-        setItem(LocalStorageKeys.homepage_chart_filter, TableTab.Other);
+        setItem(LocalStorageKeys.HomepageChartFilter, TableTab.Other);
       },
     });
   }
diff --git a/superset-frontend/src/features/home/DashboardTable.tsx b/superset-frontend/src/features/home/DashboardTable.tsx
index 36ea29e95..3cb271632 100644
--- a/superset-frontend/src/features/home/DashboardTable.tsx
+++ b/superset-frontend/src/features/home/DashboardTable.tsx
@@ -57,7 +57,7 @@ function DashboardTable({
 }: DashboardTableProps) {
   const history = useHistory();
   const defaultTab = getItem(
-    LocalStorageKeys.homepage_dashboard_filter,
+    LocalStorageKeys.HomepageDashboardFilter,
     TableTab.Other,
   );
 
@@ -156,7 +156,7 @@ function DashboardTable({
       label: t('Favorite'),
       onClick: () => {
         setActiveTab(TableTab.Favorite);
-        setItem(LocalStorageKeys.homepage_dashboard_filter, TableTab.Favorite);
+        setItem(LocalStorageKeys.HomepageDashboardFilter, TableTab.Favorite);
       },
     },
     {
@@ -164,7 +164,7 @@ function DashboardTable({
       label: t('Mine'),
       onClick: () => {
         setActiveTab(TableTab.Mine);
-        setItem(LocalStorageKeys.homepage_dashboard_filter, TableTab.Mine);
+        setItem(LocalStorageKeys.HomepageDashboardFilter, TableTab.Mine);
       },
     },
   ];
@@ -175,7 +175,7 @@ function DashboardTable({
       label: otherTabTitle,
       onClick: () => {
         setActiveTab(TableTab.Other);
-        setItem(LocalStorageKeys.homepage_dashboard_filter, TableTab.Other);
+        setItem(LocalStorageKeys.HomepageDashboardFilter, TableTab.Other);
       },
     });
   }
diff --git a/superset-frontend/src/features/home/Menu.tsx b/superset-frontend/src/features/home/Menu.tsx
index 67b72fc51..4cb98ff36 100644
--- a/superset-frontend/src/features/home/Menu.tsx
+++ b/superset-frontend/src/features/home/Menu.tsx
@@ -209,11 +209,11 @@ export function Menu({
     return () => window.removeEventListener('resize', windowResize);
   }, []);
 
-  enum paths {
-    EXPLORE = '/explore',
-    DASHBOARD = '/dashboard',
-    CHART = '/chart',
-    DATASETS = '/tablemodelview',
+  enum Paths {
+    Explore = '/explore',
+    Dashboard = '/dashboard',
+    Chart = '/chart',
+    Datasets = '/tablemodelview',
   }
 
   const defaultTabSelection: string[] = [];
@@ -222,13 +222,13 @@ export function Menu({
   useEffect(() => {
     const path = location.pathname;
     switch (true) {
-      case path.startsWith(paths.DASHBOARD):
+      case path.startsWith(Paths.Dashboard):
         setActiveTabs(['Dashboards']);
         break;
-      case path.startsWith(paths.CHART) || path.startsWith(paths.EXPLORE):
+      case path.startsWith(Paths.Chart) || path.startsWith(Paths.Explore):
         setActiveTabs(['Charts']);
         break;
-      case path.startsWith(paths.DATASETS):
+      case path.startsWith(Paths.Datasets):
         setActiveTabs(['Datasets']);
         break;
       default:
diff --git a/superset-frontend/src/features/home/RightMenu.test.tsx b/superset-frontend/src/features/home/RightMenu.test.tsx
index d823b3789..05ddc3e65 100644
--- a/superset-frontend/src/features/home/RightMenu.test.tsx
+++ b/superset-frontend/src/features/home/RightMenu.test.tsx
@@ -38,17 +38,17 @@ const dropdownItems = [
     childs: [
       {
         label: 'Connect database',
-        name: GlobalMenuDataOptions.DB_CONNECTION,
+        name: GlobalMenuDataOptions.DbConnection,
         perm: true,
       },
       {
         label: 'Create dataset',
-        name: GlobalMenuDataOptions.DATASET_CREATION,
+        name: GlobalMenuDataOptions.DatasetCreation,
         perm: true,
       },
       {
         label: 'Connect Google Sheet',
-        name: GlobalMenuDataOptions.GOOGLE_SHEETS,
+        name: GlobalMenuDataOptions.GoogleSheets,
         perm: true,
       },
       {
diff --git a/superset-frontend/src/features/home/RightMenu.tsx b/superset-frontend/src/features/home/RightMenu.tsx
index 20e1d525b..438ca1419 100644
--- a/superset-frontend/src/features/home/RightMenu.tsx
+++ b/superset-frontend/src/features/home/RightMenu.tsx
@@ -172,18 +172,18 @@ const RightMenu = ({
       childs: [
         {
           label: t('Connect database'),
-          name: GlobalMenuDataOptions.DB_CONNECTION,
+          name: GlobalMenuDataOptions.DbConnection,
           perm: canDatabase && !nonExamplesDBConnected,
         },
         {
           label: t('Create dataset'),
-          name: GlobalMenuDataOptions.DATASET_CREATION,
+          name: GlobalMenuDataOptions.DatasetCreation,
           url: '/dataset/add/',
           perm: canDataset && nonExamplesDBConnected,
         },
         {
           label: t('Connect Google Sheet'),
-          name: GlobalMenuDataOptions.GOOGLE_SHEETS,
+          name: GlobalMenuDataOptions.GoogleSheets,
           perm: canDatabase && HAS_GSHEETS_INSTALLED,
         },
         {
@@ -284,9 +284,9 @@ const RightMenu = ({
   );
 
   const handleMenuSelection = (itemChose: any) => {
-    if (itemChose.key === GlobalMenuDataOptions.DB_CONNECTION) {
+    if (itemChose.key === GlobalMenuDataOptions.DbConnection) {
       setShowDatabaseModal(true);
-    } else if (itemChose.key === GlobalMenuDataOptions.GOOGLE_SHEETS) {
+    } else if (itemChose.key === GlobalMenuDataOptions.GoogleSheets) {
       setShowDatabaseModal(true);
       setEngine('Google Sheets');
     }
diff --git a/superset-frontend/src/features/home/types.ts b/superset-frontend/src/features/home/types.ts
index 59a3c2668..1c7eebfb7 100644
--- a/superset-frontend/src/features/home/types.ts
+++ b/superset-frontend/src/features/home/types.ts
@@ -48,7 +48,7 @@ export interface RightMenuProps {
 }
 
 export enum GlobalMenuDataOptions {
-  GOOGLE_SHEETS = 'gsheets',
-  DB_CONNECTION = 'dbconnection',
-  DATASET_CREATION = 'datasetCreation',
+  GoogleSheets = 'gsheets',
+  DbConnection = 'dbconnection',
+  DatasetCreation = 'datasetCreation',
 }
diff --git a/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx b/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx
index f6501877c..778f878c6 100644
--- a/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx
+++ b/superset-frontend/src/features/queries/QueryPreviewModal.test.tsx
@@ -47,7 +47,7 @@ const mockQueries: QueryObject[] = [...new Array(3)].map((_, i) => ({
     { schema: 'foo', table: 'table' },
     { schema: 'bar', table: 'table_2' },
   ],
-  status: QueryState.SUCCESS,
+  status: QueryState.Success,
   tab_name: 'Main Tab',
   user: {
     first_name: 'cool',
diff --git a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx
index ea1d823d2..249c6667e 100644
--- a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.test.tsx
@@ -133,7 +133,7 @@ describe('Header Report Dropdown', () => {
       .spyOn(featureFlags, 'isFeatureEnabled')
       .mockImplementation(
         (featureFlag: featureFlags.FeatureFlag) =>
-          featureFlag === featureFlags.FeatureFlag.ALERT_REPORTS,
+          featureFlag === featureFlags.FeatureFlag.AlertReports,
       );
   });
 
diff --git a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
index 84d19bae6..5553e6361 100644
--- a/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/HeaderReportDropdown/index.tsx
@@ -91,8 +91,8 @@ const DropdownItemExtension = extensionsRegistry.get(
 );
 
 export enum CreationMethod {
-  CHARTS = 'charts',
-  DASHBOARDS = 'dashboards',
+  Charts = 'charts',
+  Dashboards = 'dashboards',
 }
 export interface HeaderReportProps {
   dashboardId?: number;
@@ -119,8 +119,8 @@ export default function HeaderReportDropDown({
   const dispatch = useDispatch();
   const report = useSelector<any, AlertObject>(state => {
     const resourceType = dashboardId
-      ? CreationMethod.DASHBOARDS
-      : CreationMethod.CHARTS;
+      ? CreationMethod.Dashboards
+      : CreationMethod.Charts;
     return (
       reportSelector(state, resourceType, dashboardId || chart?.id) ||
       EMPTY_OBJECT
@@ -133,7 +133,7 @@ export default function HeaderReportDropDown({
     UserWithPermissionsAndRoles
   >(state => state.user);
   const canAddReports = () => {
-    if (!isFeatureEnabled(FeatureFlag.ALERT_REPORTS)) {
+    if (!isFeatureEnabled(FeatureFlag.AlertReports)) {
       return false;
     }
 
@@ -323,7 +323,7 @@ export default function HeaderReportDropDown({
             dashboardId={dashboardId}
             chart={chart}
             creationMethod={
-              dashboardId ? CreationMethod.DASHBOARDS : CreationMethod.CHARTS
+              dashboardId ? CreationMethod.Dashboards : CreationMethod.Charts
             }
           />
           {useTextMenu ? textMenu() : iconMenu()}
diff --git a/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx b/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
index c5508b3c2..6767c06e8 100644
--- a/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/ReportModal.test.tsx
@@ -56,7 +56,7 @@ describe('Email Report Modal', () => {
     isFeatureEnabledMock = jest
       .spyOn(uiCore, 'isFeatureEnabled')
       .mockImplementation(
-        (featureFlag: FeatureFlag) => featureFlag === FeatureFlag.ALERT_REPORTS,
+        (featureFlag: FeatureFlag) => featureFlag === FeatureFlag.AlertReports,
       );
   });
 
diff --git a/superset-frontend/src/features/reports/ReportModal/index.tsx b/superset-frontend/src/features/reports/ReportModal/index.tsx
index ed48a8a61..37833fedc 100644
--- a/superset-frontend/src/features/reports/ReportModal/index.tsx
+++ b/superset-frontend/src/features/reports/ReportModal/index.tsx
@@ -42,7 +42,7 @@ import { ChartState } from 'src/explore/types';
 import {
   ReportCreationMethod,
   ReportObject,
-  NOTIFICATION_FORMATS,
+  NotificationFormats,
 } from 'src/features/reports/types';
 import { reportSelector } from 'src/views/CRUD/hooks';
 import {
@@ -120,8 +120,8 @@ function ReportModal({
   const isTextBasedChart =
     isChart && vizType && TEXT_BASED_VISUALIZATION_TYPES.includes(vizType);
   const defaultNotificationFormat = isTextBasedChart
-    ? NOTIFICATION_FORMATS.TEXT
-    : NOTIFICATION_FORMATS.PNG;
+    ? NotificationFormats.Text
+    : NotificationFormats.PNG;
   const entityName = dashboardName || chartName;
   const initialState: ReportObjectState = useMemo(
     () => ({
@@ -156,8 +156,8 @@ function ReportModal({
   // Report fetch logic
   const report = useSelector<any, ReportObject>(state => {
     const resourceType = dashboardId
-      ? CreationMethod.DASHBOARDS
-      : CreationMethod.CHARTS;
+      ? CreationMethod.Dashboards
+      : CreationMethod.Charts;
     return (
       reportSelector(state, resourceType, dashboardId || chart?.id) ||
       EMPTY_OBJECT
@@ -253,14 +253,14 @@ function ReportModal({
           value={currentReport.report_format || defaultNotificationFormat}
         >
           {isTextBasedChart && (
-            <StyledRadio value={NOTIFICATION_FORMATS.TEXT}>
+            <StyledRadio value={NotificationFormats.Text}>
               {t('Text embedded in email')}
             </StyledRadio>
           )}
-          <StyledRadio value={NOTIFICATION_FORMATS.PNG}>
+          <StyledRadio value={NotificationFormats.PNG}>
             {t('Image (PNG) embedded in email')}
           </StyledRadio>
-          <StyledRadio value={NOTIFICATION_FORMATS.CSV}>
+          <StyledRadio value={NotificationFormats.CSV}>
             {t('Formatted CSV attached in email')}
           </StyledRadio>
         </StyledRadioGroup>
diff --git a/superset-frontend/src/features/reports/types.ts b/superset-frontend/src/features/reports/types.ts
index b67a7bac7..9a3f055b4 100644
--- a/superset-frontend/src/features/reports/types.ts
+++ b/superset-frontend/src/features/reports/types.ts
@@ -26,12 +26,12 @@ export type ReportCreationMethod = 'charts' | 'dashboards' | 'alerts_reports';
 export type ReportRecipientType = 'Email' | 'Slack';
 
 export enum ReportType {
-  DASHBOARDS = 'dashboards',
-  CHARTS = 'charts',
+  Dashboards = 'dashboards',
+  Charts = 'charts',
 }
 
-export enum NOTIFICATION_FORMATS {
-  TEXT = 'TEXT',
+export enum NotificationFormats {
+  Text = 'TEXT',
   PNG = 'PNG',
   CSV = 'CSV',
 }
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx
index 6253c42c8..735e5fa75 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.test.tsx
@@ -165,7 +165,7 @@ describe('Rule modal', () => {
       rule: {
         id: 1,
         name: 'test rule',
-        filter_type: FilterType.BASE,
+        filter_type: FilterType.Base,
         tables: [{ key: 1, id: 1, value: 'birth_names' }],
         roles: [],
       },
@@ -183,7 +183,7 @@ describe('Rule modal', () => {
       rule: {
         id: 1,
         name: 'rls 1',
-        filter_type: FilterType.BASE,
+        filter_type: FilterType.Base,
       },
     });
 
@@ -284,7 +284,7 @@ describe('Rule modal', () => {
       rule: {
         id: 1,
         name: 'rls 1',
-        filter_type: FilterType.BASE,
+        filter_type: FilterType.Base,
       },
     });
 
diff --git a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
index 7e4143e58..135803fc8 100644
--- a/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
+++ b/superset-frontend/src/features/rls/RowLevelSecurityModal.tsx
@@ -124,7 +124,7 @@ export interface RowLevelSecurityModalProps {
 
 const DEAFULT_RULE = {
   name: '',
-  filter_type: FilterType.REGULAR,
+  filter_type: FilterType.Regular,
   tables: [],
   roles: [],
   clause: '',
@@ -418,7 +418,7 @@ function RowLevelSecurityModal(props: RowLevelSecurityModalProps) {
 
           <StyledInputContainer>
             <div className="control-label">
-              {currentRule.filter_type === FilterType.BASE
+              {currentRule.filter_type === FilterType.Base
                 ? t('Excluded roles')
                 : t('Roles')}{' '}
               <InfoTooltip
diff --git a/superset-frontend/src/features/rls/types.ts b/superset-frontend/src/features/rls/types.ts
index ae0166c8e..47054f17c 100644
--- a/superset-frontend/src/features/rls/types.ts
+++ b/superset-frontend/src/features/rls/types.ts
@@ -18,8 +18,8 @@
  */
 
 export enum FilterType {
-  REGULAR = 'Regular',
-  BASE = 'Base',
+  Regular = 'Regular',
+  Base = 'Base',
 }
 
 export type RLSObject = {
diff --git a/superset-frontend/src/features/tags/TagCard.tsx b/superset-frontend/src/features/tags/TagCard.tsx
index f9d82f9bc..7c9dfadaa 100644
--- a/superset-frontend/src/features/tags/TagCard.tsx
+++ b/superset-frontend/src/features/tags/TagCard.tsx
@@ -94,7 +94,7 @@ function TagCard({
       <ListViewCard
         title={tag.name}
         cover={
-          !isFeatureEnabled(FeatureFlag.THUMBNAILS) || !showThumbnails ? (
+          !isFeatureEnabled(FeatureFlag.Thumbnails) || !showThumbnails ? (
             <></>
           ) : null
         }
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
index fb442e86b..cd213e4f9 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.stories.tsx
@@ -52,7 +52,7 @@ export const range = ({ width, height }: { width: number; height: number }) => (
           column: {
             column_name: 'SP_POP_TOTL',
             id: 1,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
@@ -63,7 +63,7 @@ export const range = ({ width, height }: { width: number; height: number }) => (
           column: {
             column_name: 'SP_POP_TOTL',
             id: 2,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
index 0a2aac41b..8c09b4d61 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.test.tsx
@@ -37,7 +37,7 @@ const rangeProps = {
         column: {
           column_name: 'SP_POP_TOTL',
           id: 1,
-          type_generic: GenericDataType.NUMERIC,
+          type_generic: GenericDataType.Numeric,
         },
         expressionType: 'SIMPLE',
         hasCustomLabel: true,
@@ -48,7 +48,7 @@ const rangeProps = {
         column: {
           column_name: 'SP_POP_TOTL',
           id: 2,
-          type_generic: GenericDataType.NUMERIC,
+          type_generic: GenericDataType.Numeric,
         },
         expressionType: 'SIMPLE',
         hasCustomLabel: true,
@@ -70,7 +70,7 @@ const rangeProps = {
     {
       rowcount: 1,
       colnames: ['min', 'max'],
-      coltypes: [GenericDataType.NUMERIC, GenericDataType.NUMERIC],
+      coltypes: [GenericDataType.Numeric, GenericDataType.Numeric],
       data: [{ min: 10, max: 100 }],
       applied_filters: [],
       rejected_filters: [],
@@ -79,7 +79,7 @@ const rangeProps = {
   width: 220,
   behaviors: ['NATIVE_FILTER'],
   isRefreshing: false,
-  appSection: AppSection.DASHBOARD,
+  appSection: AppSection.Dashboard,
 };
 
 describe('RangeFilterPlugin', () => {
diff --git a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
index 5c8533dd1..0a866c094 100644
--- a/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx
@@ -82,14 +82,14 @@ const Wrapper = styled.div<{
     }
     & .ant-slider {
       margin-top: ${
-        orientation === FilterBarOrientation.HORIZONTAL ? 0 : theme.gridUnit
+        orientation === FilterBarOrientation.Horizontal ? 0 : theme.gridUnit
       }px;
       margin-bottom: ${
-        orientation === FilterBarOrientation.HORIZONTAL ? 0 : theme.gridUnit * 5
+        orientation === FilterBarOrientation.Horizontal ? 0 : theme.gridUnit * 5
       }px;
 
       ${
-        orientation === FilterBarOrientation.HORIZONTAL &&
+        orientation === FilterBarOrientation.Horizontal &&
         !isOverflowing &&
         `line-height: 1.2;`
       }
diff --git a/superset-frontend/src/filters/components/Range/buildQuery.ts b/superset-frontend/src/filters/components/Range/buildQuery.ts
index 8a76e5a28..31b91e4e2 100644
--- a/superset-frontend/src/filters/components/Range/buildQuery.ts
+++ b/superset-frontend/src/filters/components/Range/buildQuery.ts
@@ -50,7 +50,7 @@ export default function buildQuery(formData: QueryFormData) {
           column: {
             column_name: column,
             id: 1,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
@@ -61,7 +61,7 @@ export default function buildQuery(formData: QueryFormData) {
           column: {
             column_name: column,
             id: 2,
-            type_generic: GenericDataType.NUMERIC,
+            type_generic: GenericDataType.Numeric,
           },
           expressionType: 'SIMPLE',
           hasCustomLabel: true,
diff --git a/superset-frontend/src/filters/components/Range/index.ts b/superset-frontend/src/filters/components/Range/index.ts
index 6c44b6e7c..d6729bb84 100644
--- a/superset-frontend/src/filters/components/Range/index.ts
+++ b/superset-frontend/src/filters/components/Range/index.ts
@@ -27,7 +27,7 @@ export default class RangeFilterPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Range filter'),
       description: t('Range filter plugin using AntD'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       tags: [t('Experimental')],
       thumbnail,
     });
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
index 99e625987..fb793ea5e 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.test.tsx
@@ -66,7 +66,7 @@ const selectMultipleProps = {
   width: 220,
   behaviors: ['NATIVE_FILTER'],
   isRefreshing: false,
-  appSection: AppSection.DASHBOARD,
+  appSection: AppSection.Dashboard,
 };
 
 describe('SelectFilterPlugin', () => {
diff --git a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
index e25eb03c4..5b111b7de 100644
--- a/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx
@@ -147,7 +147,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
                 .join(', ')}${suffix}`
             : undefined,
           value:
-            appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem
+            appSection === AppSection.FilterConfigModal && defaultToFirstItem
               ? undefined
               : values,
         },
@@ -168,7 +168,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   );
 
   const isDisabled =
-    appSection === AppSection.FILTER_CONFIG_MODAL && defaultToFirstItem;
+    appSection === AppSection.FilterConfigModal && defaultToFirstItem;
 
   const onSearch = useMemo(
     () =>
@@ -316,7 +316,7 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
           onChange={handleChange}
           ref={inputRef}
           loading={isRefreshing}
-          oneLine={filterBarOrientation === FilterBarOrientation.HORIZONTAL}
+          oneLine={filterBarOrientation === FilterBarOrientation.Horizontal}
           invertSelection={inverseSelection}
           options={options}
           sortComparator={sortComparator}
diff --git a/superset-frontend/src/filters/components/Select/buildQuery.test.ts b/superset-frontend/src/filters/components/Select/buildQuery.test.ts
index c643ab927..151b4dbd8 100644
--- a/superset-frontend/src/filters/components/Select/buildQuery.test.ts
+++ b/superset-frontend/src/filters/components/Select/buildQuery.test.ts
@@ -101,7 +101,7 @@ describe('Select buildQuery', () => {
     const queryContext = buildQuery(formData, {
       ownState: {
         search: 'abc',
-        coltypeMap: { my_col: GenericDataType.STRING },
+        coltypeMap: { my_col: GenericDataType.String },
       },
     });
     expect(queryContext.queries.length).toEqual(1);
@@ -115,7 +115,7 @@ describe('Select buildQuery', () => {
     const queryContext = buildQuery(formData, {
       ownState: {
         search: '123',
-        coltypeMap: { my_col: GenericDataType.NUMERIC },
+        coltypeMap: { my_col: GenericDataType.Numeric },
       },
     });
     expect(queryContext.queries.length).toEqual(1);
diff --git a/superset-frontend/src/filters/components/Select/buildQuery.ts b/superset-frontend/src/filters/components/Select/buildQuery.ts
index 45d05cffd..9d014670f 100644
--- a/superset-frontend/src/filters/components/Select/buildQuery.ts
+++ b/superset-frontend/src/filters/components/Select/buildQuery.ts
@@ -40,8 +40,8 @@ const buildQuery: BuildQuery<PluginFilterSelectQueryFormData> = (
       columns.filter(isPhysicalColumn).forEach(column => {
         const label = getColumnLabel(column);
         if (
-          coltypeMap[label] === GenericDataType.STRING ||
-          (coltypeMap[label] === GenericDataType.NUMERIC &&
+          coltypeMap[label] === GenericDataType.String ||
+          (coltypeMap[label] === GenericDataType.Numeric &&
             !Number.isNaN(Number(search)))
         ) {
           extraFilters.push({
diff --git a/superset-frontend/src/filters/components/Select/index.ts b/superset-frontend/src/filters/components/Select/index.ts
index 7ded0c363..8e2ef68a7 100644
--- a/superset-frontend/src/filters/components/Select/index.ts
+++ b/superset-frontend/src/filters/components/Select/index.ts
@@ -27,7 +27,7 @@ export default class FilterSelectPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Select filter'),
       description: t('Select filter plugin using AntD'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       enableNoResults: false,
       tags: [t('Experimental')],
       thumbnail,
diff --git a/superset-frontend/src/filters/components/Time/index.ts b/superset-frontend/src/filters/components/Time/index.ts
index 8a46949a5..f6c3d27ce 100644
--- a/superset-frontend/src/filters/components/Time/index.ts
+++ b/superset-frontend/src/filters/components/Time/index.ts
@@ -26,7 +26,7 @@ export default class TimeFilterPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Time filter'),
       description: t('Custom time filter plugin'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       thumbnail,
       tags: [t('Experimental')],
       datasourceCount: 0,
diff --git a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
index 4c25b4bec..072636a49 100644
--- a/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
+++ b/superset-frontend/src/filters/components/TimeColumn/TimeColumnFilterPlugin.tsx
@@ -77,7 +77,7 @@ export default function PluginFilterTimeColumn(
   }, [JSON.stringify(filterState.value)]);
 
   const timeColumns = (data || []).filter(
-    row => row.dtype === GenericDataType.TEMPORAL,
+    row => row.dtype === GenericDataType.Temporal,
   );
 
   const placeholderText =
diff --git a/superset-frontend/src/filters/components/TimeColumn/index.ts b/superset-frontend/src/filters/components/TimeColumn/index.ts
index ada18644b..046eb4c8d 100644
--- a/superset-frontend/src/filters/components/TimeColumn/index.ts
+++ b/superset-frontend/src/filters/components/TimeColumn/index.ts
@@ -27,7 +27,7 @@ export default class FilterTimeColumnPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Time column'),
       description: t('Time column filter plugin'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       tags: [t('Experimental')],
       thumbnail,
     });
diff --git a/superset-frontend/src/filters/components/TimeGrain/index.ts b/superset-frontend/src/filters/components/TimeGrain/index.ts
index d44ec4ed6..0b6c27901 100644
--- a/superset-frontend/src/filters/components/TimeGrain/index.ts
+++ b/superset-frontend/src/filters/components/TimeGrain/index.ts
@@ -27,7 +27,7 @@ export default class FilterTimeGrainPlugin extends ChartPlugin {
     const metadata = new ChartMetadata({
       name: t('Time grain'),
       description: t('Time grain filter plugin'),
-      behaviors: [Behavior.INTERACTIVE_CHART, Behavior.NATIVE_FILTER],
+      behaviors: [Behavior.InteractiveChart, Behavior.NativeFilter],
       tags: [t('Experimental')],
       thumbnail,
     });
diff --git a/superset-frontend/src/filters/utils.test.ts b/superset-frontend/src/filters/utils.test.ts
index aeba5d32d..49d4e803b 100644
--- a/superset-frontend/src/filters/utils.test.ts
+++ b/superset-frontend/src/filters/utils.test.ts
@@ -139,36 +139,36 @@ describe('Filter utils', () => {
   describe('getDataRecordFormatter', () => {
     it('default formatter returns expected values', () => {
       const formatter = getDataRecordFormatter();
-      expect(formatter(null, GenericDataType.STRING)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.NUMERIC)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.TEMPORAL)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.BOOLEAN)).toEqual(NULL_STRING);
-      expect(formatter('foo', GenericDataType.STRING)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.NUMERIC)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.TEMPORAL)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(true, GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter(false, GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter('true', GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter('false', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter('TRUE', GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter('FALSE', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(0, GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(1, GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter(2, GenericDataType.BOOLEAN)).toEqual(TRUE_STRING);
-      expect(formatter(0, GenericDataType.STRING)).toEqual('0');
-      expect(formatter(0, GenericDataType.NUMERIC)).toEqual('0');
-      expect(formatter(0, GenericDataType.TEMPORAL)).toEqual('0');
-      expect(formatter(1234567.89, GenericDataType.STRING)).toEqual(
+      expect(formatter(null, GenericDataType.String)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Numeric)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Temporal)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Boolean)).toEqual(NULL_STRING);
+      expect(formatter('foo', GenericDataType.String)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Numeric)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Temporal)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(true, GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter(false, GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter('true', GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter('false', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter('TRUE', GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter('FALSE', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(0, GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(1, GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter(2, GenericDataType.Boolean)).toEqual(TRUE_STRING);
+      expect(formatter(0, GenericDataType.String)).toEqual('0');
+      expect(formatter(0, GenericDataType.Numeric)).toEqual('0');
+      expect(formatter(0, GenericDataType.Temporal)).toEqual('0');
+      expect(formatter(1234567.89, GenericDataType.String)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.NUMERIC)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Numeric)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.TEMPORAL)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Temporal)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.BOOLEAN)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Boolean)).toEqual(
         TRUE_STRING,
       );
     });
@@ -178,41 +178,41 @@ describe('Filter utils', () => {
         timeFormatter: getTimeFormatter(TimeFormats.DATABASE_DATETIME),
         numberFormatter: getNumberFormatter(NumberFormats.SMART_NUMBER),
       });
-      expect(formatter(null, GenericDataType.STRING)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.NUMERIC)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.TEMPORAL)).toEqual(NULL_STRING);
-      expect(formatter(null, GenericDataType.BOOLEAN)).toEqual(NULL_STRING);
-      expect(formatter('foo', GenericDataType.STRING)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.NUMERIC)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.TEMPORAL)).toEqual('foo');
-      expect(formatter('foo', GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(0, GenericDataType.STRING)).toEqual('0');
-      expect(formatter(0, GenericDataType.NUMERIC)).toEqual('0');
-      expect(formatter(0, GenericDataType.TEMPORAL)).toEqual(
+      expect(formatter(null, GenericDataType.String)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Numeric)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Temporal)).toEqual(NULL_STRING);
+      expect(formatter(null, GenericDataType.Boolean)).toEqual(NULL_STRING);
+      expect(formatter('foo', GenericDataType.String)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Numeric)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Temporal)).toEqual('foo');
+      expect(formatter('foo', GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(0, GenericDataType.String)).toEqual('0');
+      expect(formatter(0, GenericDataType.Numeric)).toEqual('0');
+      expect(formatter(0, GenericDataType.Temporal)).toEqual(
         '1970-01-01 00:00:00',
       );
-      expect(formatter(0, GenericDataType.BOOLEAN)).toEqual(FALSE_STRING);
-      expect(formatter(1234567.89, GenericDataType.STRING)).toEqual(
+      expect(formatter(0, GenericDataType.Boolean)).toEqual(FALSE_STRING);
+      expect(formatter(1234567.89, GenericDataType.String)).toEqual(
         '1234567.89',
       );
-      expect(formatter(1234567.89, GenericDataType.NUMERIC)).toEqual('1.23M');
-      expect(formatter(1234567.89, GenericDataType.TEMPORAL)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Numeric)).toEqual('1.23M');
+      expect(formatter(1234567.89, GenericDataType.Temporal)).toEqual(
         '1970-01-01 00:20:34',
       );
-      expect(formatter(1234567.89, GenericDataType.BOOLEAN)).toEqual(
+      expect(formatter(1234567.89, GenericDataType.Boolean)).toEqual(
         TRUE_STRING,
       );
-      expect(formatter('1970-01-01 00:00:00', GenericDataType.STRING)).toEqual(
+      expect(formatter('1970-01-01 00:00:00', GenericDataType.String)).toEqual(
         '1970-01-01 00:00:00',
       );
-      expect(formatter('1970-01-01 00:00:00', GenericDataType.NUMERIC)).toEqual(
+      expect(formatter('1970-01-01 00:00:00', GenericDataType.Numeric)).toEqual(
         '1970-01-01 00:00:00',
       );
-      expect(formatter('1970-01-01 00:00:00', GenericDataType.BOOLEAN)).toEqual(
+      expect(formatter('1970-01-01 00:00:00', GenericDataType.Boolean)).toEqual(
         FALSE_STRING,
       );
       expect(
-        formatter('1970-01-01 00:00:00', GenericDataType.TEMPORAL),
+        formatter('1970-01-01 00:00:00', GenericDataType.Temporal),
       ).toEqual('1970-01-01 00:00:00');
     });
   });
diff --git a/superset-frontend/src/filters/utils.ts b/superset-frontend/src/filters/utils.ts
index 69ca82f58..859f68f9c 100644
--- a/superset-frontend/src/filters/utils.ts
+++ b/superset-frontend/src/filters/utils.ts
@@ -26,8 +26,8 @@ import {
 } from '@superset-ui/core';
 import { FALSE_STRING, NULL_STRING, TRUE_STRING } from 'src/utils/common';
 import {
-  CLAUSES,
-  EXPRESSION_TYPES,
+  Clauses,
+  ExpressionTypes,
 } from '../explore/components/controls/FilterControl/types';
 
 export const getSelectExtraFormData = (
@@ -40,8 +40,8 @@ export const getSelectExtraFormData = (
   if (emptyFilter) {
     extra.adhoc_filters = [
       {
-        expressionType: EXPRESSION_TYPES.SQL,
-        clause: CLAUSES.WHERE,
+        expressionType: ExpressionTypes.Sql,
+        clause: Clauses.Where,
         sqlExpression: '1 = 0',
       },
     ];
@@ -105,7 +105,7 @@ export function getDataRecordFormatter({
     if (typeof value === 'boolean') {
       return value ? TRUE_STRING : FALSE_STRING;
     }
-    if (dtype === GenericDataType.BOOLEAN) {
+    if (dtype === GenericDataType.Boolean) {
       try {
         return JSON.parse(String(value).toLowerCase())
           ? TRUE_STRING
@@ -117,13 +117,13 @@ export function getDataRecordFormatter({
     if (typeof value === 'string') {
       return value;
     }
-    if (timeFormatter && dtype === GenericDataType.TEMPORAL) {
+    if (timeFormatter && dtype === GenericDataType.Temporal) {
       return timeFormatter(value);
     }
     if (
       numberFormatter &&
       typeof value === 'number' &&
-      dtype === GenericDataType.NUMERIC
+      dtype === GenericDataType.Numeric
     ) {
       return numberFormatter(value);
     }
diff --git a/superset-frontend/src/hooks/apiResources/apiResources.test.ts b/superset-frontend/src/hooks/apiResources/apiResources.test.ts
index 6a5478e3b..be966472a 100644
--- a/superset-frontend/src/hooks/apiResources/apiResources.test.ts
+++ b/superset-frontend/src/hooks/apiResources/apiResources.test.ts
@@ -57,7 +57,7 @@ describe('apiResource hooks', () => {
         useApiResourceFullBody('/test/endpoint'),
       );
       expect(result.current).toEqual({
-        status: ResourceStatus.LOADING,
+        status: ResourceStatus.Loading,
         result: null,
         error: null,
       });
@@ -74,7 +74,7 @@ describe('apiResource hooks', () => {
         jest.runAllTimers();
       });
       expect(result.current).toEqual({
-        status: ResourceStatus.COMPLETE,
+        status: ResourceStatus.Complete,
         result: fakeApiResult,
         error: null,
       });
@@ -90,7 +90,7 @@ describe('apiResource hooks', () => {
         jest.runAllTimers();
       });
       expect(result.current).toEqual({
-        status: ResourceStatus.ERROR,
+        status: ResourceStatus.Error,
         result: null,
         error: fakeError,
       });
@@ -102,7 +102,7 @@ describe('apiResource hooks', () => {
       const { result } = renderHook(() =>
         useTransformedResource(
           {
-            status: ResourceStatus.COMPLETE,
+            status: ResourceStatus.Complete,
             result: fakeApiResult,
             error: null,
           },
@@ -110,7 +110,7 @@ describe('apiResource hooks', () => {
         ),
       );
       expect(result.current).toEqual({
-        status: ResourceStatus.COMPLETE,
+        status: ResourceStatus.Complete,
         result: {
           id: 1,
           name: 'FAKE API RESULT',
@@ -127,7 +127,7 @@ describe('apiResource hooks', () => {
       const { result } = renderHook(() =>
         useTransformedResource(
           {
-            status: ResourceStatus.LOADING,
+            status: ResourceStatus.Loading,
             result: null,
             error: null,
           },
@@ -135,7 +135,7 @@ describe('apiResource hooks', () => {
         ),
       );
       expect(result.current).toEqual({
-        status: ResourceStatus.LOADING,
+        status: ResourceStatus.Loading,
         result: null,
         error: null,
       });
@@ -156,7 +156,7 @@ describe('apiResource hooks', () => {
         jest.runAllTimers();
       });
       expect(result.current).toEqual({
-        status: ResourceStatus.COMPLETE,
+        status: ResourceStatus.Complete,
         result: fakeApiResult,
         error: null,
       });
diff --git a/superset-frontend/src/hooks/apiResources/apiResources.ts b/superset-frontend/src/hooks/apiResources/apiResources.ts
index 3b6a3922b..722998c32 100644
--- a/superset-frontend/src/hooks/apiResources/apiResources.ts
+++ b/superset-frontend/src/hooks/apiResources/apiResources.ts
@@ -21,9 +21,9 @@ import { makeApi } from '@superset-ui/core';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
 export enum ResourceStatus {
-  LOADING = 'loading',
-  COMPLETE = 'complete',
-  ERROR = 'error',
+  Loading = 'loading',
+  Complete = 'complete',
+  Error = 'error',
 }
 
 /**
@@ -44,25 +44,25 @@ export type Resource<T> = LoadingState | CompleteState<T> | ErrorState;
 // }
 
 type LoadingState = {
-  status: ResourceStatus.LOADING;
+  status: ResourceStatus.Loading;
   result: null;
   error: null;
 };
 
 type CompleteState<T> = {
-  status: ResourceStatus.COMPLETE;
+  status: ResourceStatus.Complete;
   result: T;
   error: null;
 };
 
 type ErrorState = {
-  status: ResourceStatus.ERROR;
+  status: ResourceStatus.Error;
   result: null;
   error: Error;
 };
 
 const initialState: LoadingState = {
-  status: ResourceStatus.LOADING,
+  status: ResourceStatus.Loading,
   result: null,
   error: null,
 };
@@ -112,7 +112,7 @@ export function useApiResourceFullBody<RESULT>(
       .then(result => {
         if (!cancelled) {
           setResource({
-            status: ResourceStatus.COMPLETE,
+            status: ResourceStatus.Complete,
             result,
             error: null,
           });
@@ -121,7 +121,7 @@ export function useApiResourceFullBody<RESULT>(
       .catch(error => {
         if (!cancelled) {
           setResource({
-            status: ResourceStatus.ERROR,
+            status: ResourceStatus.Error,
             result: null,
             error,
           });
@@ -149,7 +149,7 @@ export function useTransformedResource<IN, OUT>(
   transformFn: (result: IN) => OUT,
 ): Resource<OUT> {
   return useMemo(() => {
-    if (resource.status !== ResourceStatus.COMPLETE) {
+    if (resource.status !== ResourceStatus.Complete) {
       // While incomplete, there is no result - no need to transform.
       return resource;
     }
@@ -160,7 +160,7 @@ export function useTransformedResource<IN, OUT>(
       };
     } catch (e) {
       return {
-        status: ResourceStatus.ERROR,
+        status: ResourceStatus.Error,
         result: null,
         error: e,
       };
diff --git a/superset-frontend/src/middleware/asyncEvent.ts b/superset-frontend/src/middleware/asyncEvent.ts
index 1d5fcb66c..faa14229c 100644
--- a/superset-frontend/src/middleware/asyncEvent.ts
+++ b/superset-frontend/src/middleware/asyncEvent.ts
@@ -230,7 +230,7 @@ const wsConnect = (): void => {
 };
 
 export const init = (appConfig?: AppConfig) => {
-  if (!isFeatureEnabled(FeatureFlag.GLOBAL_ASYNC_QUERIES)) return;
+  if (!isFeatureEnabled(FeatureFlag.GlobalAsyncQueries)) return;
   if (pollingTimeoutId) clearTimeout(pollingTimeoutId);
 
   listenersByJobId = {};
diff --git a/superset-frontend/src/pages/AlertReportList/index.tsx b/superset-frontend/src/pages/AlertReportList/index.tsx
index c6d14d186..fdbfe9f13 100644
--- a/superset-frontend/src/pages/AlertReportList/index.tsx
+++ b/superset-frontend/src/pages/AlertReportList/index.tsx
@@ -116,7 +116,7 @@ function AlertList({
     () => [
       {
         id: 'type',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         value: isReportEnabled ? 'Report' : 'Alert',
       },
     ],
@@ -401,7 +401,7 @@ function AlertList({
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -450,14 +450,14 @@ function AlertList({
         key: 'search',
         id: 'name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Owner'),
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'report',
@@ -474,7 +474,7 @@ function AlertList({
         key: 'status',
         id: 'last_state',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'Any',
         selects: [
           {
@@ -495,7 +495,7 @@ function AlertList({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'report',
diff --git a/superset-frontend/src/pages/AllEntities/index.tsx b/superset-frontend/src/pages/AllEntities/index.tsx
index b94cab846..dc99e0f6e 100644
--- a/superset-frontend/src/pages/AllEntities/index.tsx
+++ b/superset-frontend/src/pages/AllEntities/index.tsx
@@ -125,21 +125,21 @@ function AllEntities() {
   const items = [];
   if (tag?.description) {
     const description: Description = {
-      type: MetadataType.DESCRIPTION,
+      type: MetadataType.Description,
       value: tag?.description || '',
     };
     items.push(description);
   }
 
   const owner: Owner = {
-    type: MetadataType.OWNER,
+    type: MetadataType.Owner,
     createdBy: getOwnerName(tag?.created_by),
     createdOn: tag?.created_on_delta_humanized || '',
   };
   items.push(owner);
 
   const lastModified: LastModified = {
-    type: MetadataType.LAST_MODIFIED,
+    type: MetadataType.LastModified,
     value: tag?.changed_on_delta_humanized || '',
     modifiedBy: getOwnerName(tag?.changed_by),
   };
diff --git a/superset-frontend/src/pages/AnnotationLayerList/index.tsx b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
index fff5743b5..20312f93f 100644
--- a/superset-frontend/src/pages/AnnotationLayerList/index.tsx
+++ b/superset-frontend/src/pages/AnnotationLayerList/index.tsx
@@ -201,7 +201,7 @@ function AnnotationLayersList({
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -239,14 +239,14 @@ function AnnotationLayersList({
         key: 'search',
         id: 'name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Changed by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'annotation_layer',
diff --git a/superset-frontend/src/pages/Chart/Chart.test.tsx b/superset-frontend/src/pages/Chart/Chart.test.tsx
index fb4f9a889..35ea78843 100644
--- a/superset-frontend/src/pages/Chart/Chart.test.tsx
+++ b/superset-frontend/src/pages/Chart/Chart.test.tsx
@@ -81,7 +81,7 @@ describe('ChartPage', () => {
 
     beforeEach(() => {
       localStorage.setItem(
-        LocalStorageKeys.dashboard__explore_context,
+        LocalStorageKeys.DashboardExploreContext,
         JSON.stringify({
           [dashboardPageId]: {},
         }),
diff --git a/superset-frontend/src/pages/Chart/index.tsx b/superset-frontend/src/pages/Chart/index.tsx
index 167de09ac..c679e0e62 100644
--- a/superset-frontend/src/pages/Chart/index.tsx
+++ b/superset-frontend/src/pages/Chart/index.tsx
@@ -75,9 +75,7 @@ const getDashboardPageContext = (pageId?: string | null) => {
   if (!pageId) {
     return null;
   }
-  return (
-    getItem(LocalStorageKeys.dashboard__explore_context, {})[pageId] || null
-  );
+  return getItem(LocalStorageKeys.DashboardExploreContext, {})[pageId] || null;
 };
 
 const getDashboardContextFormData = () => {
@@ -153,7 +151,7 @@ export default function ExplorePage() {
           isExploreInitialized.current = true;
         });
     }
-    getSharedLabelColor().source = SharedLabelColorSource.explore;
+    getSharedLabelColor().source = SharedLabelColorSource.Explore;
   }, [dispatch, location]);
 
   if (!isLoaded) {
diff --git a/superset-frontend/src/pages/ChartList/index.tsx b/superset-frontend/src/pages/ChartList/index.tsx
index bfd945ea1..d35470720 100644
--- a/superset-frontend/src/pages/ChartList/index.tsx
+++ b/superset-frontend/src/pages/ChartList/index.tsx
@@ -272,7 +272,7 @@ function ChartList(props: ChartListProps) {
           filters: [
             {
               col: 'dashboard_title',
-              opr: FilterOperator.startsWith,
+              opr: FilterOperator.StartsWith,
               value: filterValue,
             },
           ],
@@ -425,7 +425,7 @@ function ChartList(props: ChartListProps) {
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
-        hidden: !isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM),
+        hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
       },
       {
         Cell: ({
@@ -539,7 +539,7 @@ function ChartList(props: ChartListProps) {
         hidden: !canEdit && !canDelete,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -563,7 +563,7 @@ function ChartList(props: ChartListProps) {
       id: 'id',
       urlDisplay: 'favorite',
       input: 'select',
-      operator: FilterOperator.chartIsFav,
+      operator: FilterOperator.ChartIsFav,
       unfilteredLabel: t('Any'),
       selects: [
         { label: t('Yes'), value: true },
@@ -580,14 +580,14 @@ function ChartList(props: ChartListProps) {
         key: 'search',
         id: 'slice_name',
         input: 'search',
-        operator: FilterOperator.chartAllText,
+        operator: FilterOperator.ChartAllText,
       },
       {
         Header: t('Type'),
         key: 'viz_type',
         id: 'viz_type',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         selects: registry
           .keys()
@@ -613,19 +613,19 @@ function ChartList(props: ChartListProps) {
         key: 'dataset',
         id: 'datasource_id',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchDatasets,
         paginate: true,
       },
-      ...(isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && canReadTag
+      ...(isFeatureEnabled(FeatureFlag.TaggingSystem) && canReadTag
         ? [
             {
               Header: t('Tag'),
               key: 'tags',
               id: 'tags',
               input: 'select',
-              operator: FilterOperator.chartTags,
+              operator: FilterOperator.ChartTags,
               unfilteredLabel: t('All'),
               fetchSelects: loadTags,
             },
@@ -636,7 +636,7 @@ function ChartList(props: ChartListProps) {
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'chart',
@@ -658,7 +658,7 @@ function ChartList(props: ChartListProps) {
         key: 'dashboards',
         id: 'dashboards',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: fetchDashboards,
         paginate: true,
@@ -670,7 +670,7 @@ function ChartList(props: ChartListProps) {
         id: 'id',
         urlDisplay: 'certified',
         input: 'select',
-        operator: FilterOperator.chartIsCertified,
+        operator: FilterOperator.ChartIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Yes'), value: true },
@@ -682,7 +682,7 @@ function ChartList(props: ChartListProps) {
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'chart',
@@ -729,7 +729,7 @@ function ChartList(props: ChartListProps) {
         showThumbnails={
           userSettings
             ? userSettings.thumbnails
-            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+            : isFeatureEnabled(FeatureFlag.Thumbnails)
         }
         hasPerm={hasPerm}
         openChartEditModal={openChartEditModal}
@@ -849,10 +849,10 @@ function ChartList(props: ChartListProps) {
               showThumbnails={
                 userSettings
                   ? userSettings.thumbnails
-                  : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+                  : isFeatureEnabled(FeatureFlag.Thumbnails)
               }
               defaultViewMode={
-                isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)
+                isFeatureEnabled(FeatureFlag.ListviewsDefaultCardView)
                   ? 'card'
                   : 'table'
               }
diff --git a/superset-frontend/src/pages/CssTemplateList/index.tsx b/superset-frontend/src/pages/CssTemplateList/index.tsx
index b77217b22..c54a61df2 100644
--- a/superset-frontend/src/pages/CssTemplateList/index.tsx
+++ b/superset-frontend/src/pages/CssTemplateList/index.tsx
@@ -179,7 +179,7 @@ function CssTemplatesList({
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -224,14 +224,14 @@ function CssTemplatesList({
         key: 'search',
         id: 'template_name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Modified by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'css_template',
diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx
index 76b34c665..23261aff8 100644
--- a/superset-frontend/src/pages/DashboardList/index.tsx
+++ b/superset-frontend/src/pages/DashboardList/index.tsx
@@ -346,7 +346,7 @@ function DashboardList(props: DashboardListProps) {
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
-        hidden: !isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM),
+        hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
       },
       {
         Cell: ({
@@ -456,7 +456,7 @@ function DashboardList(props: DashboardListProps) {
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -480,7 +480,7 @@ function DashboardList(props: DashboardListProps) {
       id: 'id',
       urlDisplay: 'favorite',
       input: 'select',
-      operator: FilterOperator.dashboardIsFav,
+      operator: FilterOperator.DashboardIsFav,
       unfilteredLabel: t('Any'),
       selects: [
         { label: t('Yes'), value: true },
@@ -497,28 +497,28 @@ function DashboardList(props: DashboardListProps) {
         key: 'search',
         id: 'dashboard_title',
         input: 'search',
-        operator: FilterOperator.titleOrSlug,
+        operator: FilterOperator.TitleOrSlug,
       },
       {
         Header: t('Status'),
         key: 'published',
         id: 'published',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Published'), value: true },
           { label: t('Draft'), value: false },
         ],
       },
-      ...(isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && canReadTag
+      ...(isFeatureEnabled(FeatureFlag.TaggingSystem) && canReadTag
         ? [
             {
               Header: t('Tag'),
               key: 'tags',
               id: 'tags',
               input: 'select',
-              operator: FilterOperator.dashboardTags,
+              operator: FilterOperator.DashboardTags,
               unfilteredLabel: t('All'),
               fetchSelects: loadTags,
             },
@@ -529,7 +529,7 @@ function DashboardList(props: DashboardListProps) {
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'dashboard',
@@ -553,7 +553,7 @@ function DashboardList(props: DashboardListProps) {
         id: 'id',
         urlDisplay: 'certified',
         input: 'select',
-        operator: FilterOperator.dashboardIsCertified,
+        operator: FilterOperator.DashboardIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Yes'), value: true },
@@ -565,7 +565,7 @@ function DashboardList(props: DashboardListProps) {
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'dashboard',
@@ -614,7 +614,7 @@ function DashboardList(props: DashboardListProps) {
         showThumbnails={
           userKey
             ? userKey.thumbnails
-            : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+            : isFeatureEnabled(FeatureFlag.Thumbnails)
         }
         userId={user?.userId}
         loading={loading}
@@ -754,11 +754,11 @@ function DashboardList(props: DashboardListProps) {
                 showThumbnails={
                   userKey
                     ? userKey.thumbnails
-                    : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+                    : isFeatureEnabled(FeatureFlag.Thumbnails)
                 }
                 renderCard={renderCard}
                 defaultViewMode={
-                  isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)
+                  isFeatureEnabled(FeatureFlag.ListviewsDefaultCardView)
                     ? 'card'
                     : 'table'
                 }
diff --git a/superset-frontend/src/pages/DatabaseList/index.tsx b/superset-frontend/src/pages/DatabaseList/index.tsx
index b30786941..b5854c9a9 100644
--- a/superset-frontend/src/pages/DatabaseList/index.tsx
+++ b/superset-frontend/src/pages/DatabaseList/index.tsx
@@ -191,7 +191,7 @@ function DatabaseList({
         }
 
         // Delete user-selected db from local storage
-        setItem(LocalStorageKeys.db, null);
+        setItem(LocalStorageKeys.Database, null);
 
         // Close delete modal
         setDatabaseCurrentlyDeleting(null);
@@ -474,7 +474,7 @@ function DatabaseList({
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -488,14 +488,14 @@ function DatabaseList({
         key: 'search',
         id: 'database_name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Expose in SQL Lab'),
         key: 'expose_in_sql_lab',
         id: 'expose_in_sqllab',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         selects: [
           { label: t('Yes'), value: true },
@@ -515,7 +515,7 @@ function DatabaseList({
         key: 'allow_run_async',
         id: 'allow_run_async',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('All'),
         selects: [
           { label: t('Yes'), value: true },
@@ -527,7 +527,7 @@ function DatabaseList({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'database',
diff --git a/superset-frontend/src/pages/DatasetCreation/index.tsx b/superset-frontend/src/pages/DatasetCreation/index.tsx
index baeaa01e3..66acc4fa2 100644
--- a/superset-frontend/src/pages/DatasetCreation/index.tsx
+++ b/superset-frontend/src/pages/DatasetCreation/index.tsx
@@ -44,25 +44,25 @@ export function datasetReducer(
   };
 
   switch (action.type) {
-    case DatasetActionType.selectDatabase:
+    case DatasetActionType.SelectDatabase:
       return {
         ...trimmedState,
         ...action.payload,
         schema: null,
         table_name: null,
       };
-    case DatasetActionType.selectSchema:
+    case DatasetActionType.SelectSchema:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
         table_name: null,
       };
-    case DatasetActionType.selectTable:
+    case DatasetActionType.SelectTable:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
       };
-    case DatasetActionType.changeDataset:
+    case DatasetActionType.ChangeDataset:
       return {
         ...trimmedState,
         [action.payload.name]: action.payload.value,
diff --git a/superset-frontend/src/pages/DatasetList/index.tsx b/superset-frontend/src/pages/DatasetList/index.tsx
index 2ec521ad4..3b457f263 100644
--- a/superset-frontend/src/pages/DatasetList/index.tsx
+++ b/superset-frontend/src/pages/DatasetList/index.tsx
@@ -506,7 +506,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -520,14 +520,14 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'search',
         id: 'table_name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Type'),
         key: 'sql',
         id: 'sql',
         input: 'select',
-        operator: FilterOperator.datasetIsNullOrEmpty,
+        operator: FilterOperator.DatasetIsNullOrEmpty,
         unfilteredLabel: 'All',
         selects: [
           { label: t('Virtual'), value: false },
@@ -539,7 +539,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'database',
         id: 'database',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: 'All',
         fetchSelects: createFetchRelated(
           'dataset',
@@ -555,7 +555,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'schema',
         id: 'schema',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'All',
         fetchSelects: createFetchDistinct(
           'dataset',
@@ -571,7 +571,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'owner',
         id: 'owners',
         input: 'select',
-        operator: FilterOperator.relationManyMany,
+        operator: FilterOperator.RelationManyMany,
         unfilteredLabel: 'All',
         fetchSelects: createFetchRelated(
           'dataset',
@@ -592,7 +592,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         id: 'id',
         urlDisplay: 'certified',
         input: 'select',
-        operator: FilterOperator.datasetIsCertified,
+        operator: FilterOperator.DatasetIsCertified,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Yes'), value: true },
@@ -604,7 +604,7 @@ const DatasetList: FunctionComponent<DatasetListProps> = ({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'dataset',
diff --git a/superset-frontend/src/pages/Home/index.tsx b/superset-frontend/src/pages/Home/index.tsx
index c61d15e2a..231411117 100644
--- a/superset-frontend/src/pages/Home/index.tsx
+++ b/superset-frontend/src/pages/Home/index.tsx
@@ -164,7 +164,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
   const [activeChild, setActiveChild] = useState('Loading');
   const userKey = dangerouslyGetItemDoNotUse(id, null);
   let defaultChecked = false;
-  const isThumbnailsEnabled = isFeatureEnabled(FeatureFlag.THUMBNAILS);
+  const isThumbnailsEnabled = isFeatureEnabled(FeatureFlag.Thumbnails);
   if (isThumbnailsEnabled) {
     defaultChecked =
       userKey?.thumbnails === undefined ? true : userKey?.thumbnails;
@@ -178,12 +178,12 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
   );
   const [isFetchingActivityData, setIsFetchingActivityData] = useState(true);
 
-  const collapseState = getItem(LocalStorageKeys.homepage_collapse_state, []);
+  const collapseState = getItem(LocalStorageKeys.HomepageCollapseState, []);
   const [activeState, setActiveState] = useState<Array<string>>(collapseState);
 
   const handleCollapse = (state: Array<string>) => {
     setActiveState(state);
-    setItem(LocalStorageKeys.homepage_collapse_state, state);
+    setItem(LocalStorageKeys.HomepageCollapseState, state);
   };
 
   const WelcomeMessageExtension = extensionsRegistry.get('welcome.message');
@@ -220,7 +220,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
     if (!otherTabFilters) {
       return;
     }
-    const activeTab = getItem(LocalStorageKeys.homepage_activity_filter, null);
+    const activeTab = getItem(LocalStorageKeys.HomepageActivityFilter, null);
     setActiveState(collapseState.length > 0 ? collapseState : DEFAULT_TAB_ARR);
     getRecentActivityObjs(user.userId!, recent, addDangerToast, otherTabFilters)
       .then(res => {
diff --git a/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx b/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx
index e39c279a5..35d084c48 100644
--- a/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/QueryHistoryList.test.tsx
@@ -55,7 +55,7 @@ const mockQueries: QueryObject[] = [...new Array(3)].map((_, i) => ({
     { schema: 'foo', table: 'table' },
     { schema: 'bar', table: 'table_2' },
   ],
-  status: QueryState.SUCCESS,
+  status: QueryState.Success,
   tab_name: 'Main Tab',
   user: {
     first_name: 'cool',
diff --git a/superset-frontend/src/pages/QueryHistoryList/index.tsx b/superset-frontend/src/pages/QueryHistoryList/index.tsx
index 94b646d9e..f2d72af9d 100644
--- a/superset-frontend/src/pages/QueryHistoryList/index.tsx
+++ b/superset-frontend/src/pages/QueryHistoryList/index.tsx
@@ -135,7 +135,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
     ...commonMenuData,
   };
 
-  const initialSort = [{ id: QueryObjectColumns.start_time, desc: true }];
+  const initialSort = [{ id: QueryObjectColumns.StartTime, desc: true }];
   const columns = useMemo(
     () => [
       {
@@ -157,38 +157,38 @@ function QueryList({ addDangerToast }: QueryListProps) {
             name: null,
             label: '',
           };
-          if (status === QueryState.SUCCESS) {
+          if (status === QueryState.Success) {
             statusConfig.name = (
               <Icons.Check iconColor={theme.colors.success.base} />
             );
             statusConfig.label = t('Success');
           } else if (
-            status === QueryState.FAILED ||
-            status === QueryState.STOPPED
+            status === QueryState.Failed ||
+            status === QueryState.Stopped
           ) {
             statusConfig.name = (
               <Icons.XSmall
                 iconColor={
-                  status === QueryState.FAILED
+                  status === QueryState.Failed
                     ? theme.colors.error.base
                     : theme.colors.grayscale.base
                 }
               />
             );
             statusConfig.label = t('Failed');
-          } else if (status === QueryState.RUNNING) {
+          } else if (status === QueryState.Running) {
             statusConfig.name = (
               <Icons.Running iconColor={theme.colors.primary.base} />
             );
             statusConfig.label = t('Running');
-          } else if (status === QueryState.TIMED_OUT) {
+          } else if (status === QueryState.TimedOut) {
             statusConfig.name = (
               <Icons.Offline iconColor={theme.colors.grayscale.light1} />
             );
             statusConfig.label = t('Offline');
           } else if (
-            status === QueryState.SCHEDULED ||
-            status === QueryState.PENDING
+            status === QueryState.Scheduled ||
+            status === QueryState.Pending
           ) {
             statusConfig.name = (
               <Icons.Queued iconColor={theme.colors.grayscale.base} />
@@ -201,12 +201,12 @@ function QueryList({ addDangerToast }: QueryListProps) {
             </Tooltip>
           );
         },
-        accessor: QueryObjectColumns.status,
+        accessor: QueryObjectColumns.Status,
         size: 'xs',
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.start_time,
+        accessor: QueryObjectColumns.StartTime,
         Header: t('Time'),
         size: 'xl',
         Cell: ({
@@ -236,7 +236,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
             original: { status, start_time, end_time },
           },
         }: any) => {
-          const timerType = status === QueryState.FAILED ? 'danger' : status;
+          const timerType = status === QueryState.Failed ? 'danger' : status;
           const timerTime = end_time
             ? moment(moment.utc(end_time - start_time)).format(TIME_WITH_MS)
             : '00:00:00.000';
@@ -248,21 +248,21 @@ function QueryList({ addDangerToast }: QueryListProps) {
         },
       },
       {
-        accessor: QueryObjectColumns.tab_name,
+        accessor: QueryObjectColumns.TabName,
         Header: t('Tab name'),
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.database_name,
+        accessor: QueryObjectColumns.DatabaseName,
         Header: t('Database'),
         size: 'xl',
       },
       {
-        accessor: QueryObjectColumns.database,
+        accessor: QueryObjectColumns.Database,
         hidden: true,
       },
       {
-        accessor: QueryObjectColumns.schema,
+        accessor: QueryObjectColumns.Schema,
         Header: t('Schema'),
         size: 'xl',
       },
@@ -299,13 +299,13 @@ function QueryList({ addDangerToast }: QueryListProps) {
 
           return main;
         },
-        accessor: QueryObjectColumns.sql_tables,
+        accessor: QueryObjectColumns.SqlTables,
         Header: t('Tables'),
         size: 'xl',
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.user_first_name,
+        accessor: QueryObjectColumns.UserFirstName,
         Header: t('User'),
         size: 'xl',
         Cell: ({
@@ -315,16 +315,16 @@ function QueryList({ addDangerToast }: QueryListProps) {
         }: any) => getOwnerName(user),
       },
       {
-        accessor: QueryObjectColumns.user,
+        accessor: QueryObjectColumns.User,
         hidden: true,
       },
       {
-        accessor: QueryObjectColumns.rows,
+        accessor: QueryObjectColumns.Rows,
         Header: t('Rows'),
         size: 'md',
       },
       {
-        accessor: QueryObjectColumns.sql,
+        accessor: QueryObjectColumns.Sql,
         Header: t('SQL'),
         Cell: ({ row: { original, id } }: any) => (
           <div
@@ -366,7 +366,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'database',
         id: 'database',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'query',
@@ -384,7 +384,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'state',
         id: 'status',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'All',
         fetchSelects: createFetchDistinct(
           'query',
@@ -402,7 +402,7 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'user',
         id: 'user',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: 'All',
         fetchSelects: createFetchRelated(
           'query',
@@ -420,14 +420,14 @@ function QueryList({ addDangerToast }: QueryListProps) {
         key: 'start_time',
         id: 'start_time',
         input: 'datetime_range',
-        operator: FilterOperator.between,
+        operator: FilterOperator.Between,
       },
       {
         Header: t('Search by query text'),
         key: 'sql',
         id: 'sql',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
     ],
     [addDangerToast],
diff --git a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
index bef42284d..4c1fa85ff 100644
--- a/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
+++ b/superset-frontend/src/pages/RowLevelSecurityList/index.tsx
@@ -224,7 +224,7 @@ function RowLevelSecurityList(props: RLSProps) {
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -258,14 +258,14 @@ function RowLevelSecurityList(props: RLSProps) {
         key: 'search',
         id: 'name',
         input: 'search',
-        operator: FilterOperator.startsWith,
+        operator: FilterOperator.StartsWith,
       },
       {
         Header: t('Filter Type'),
         key: 'filter_type',
         id: 'filter_type',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: t('Any'),
         selects: [
           { label: t('Regular'), value: 'Regular' },
@@ -277,14 +277,14 @@ function RowLevelSecurityList(props: RLSProps) {
         key: 'search',
         id: 'group_key',
         input: 'search',
-        operator: FilterOperator.startsWith,
+        operator: FilterOperator.StartsWith,
       },
       {
         Header: t('Modified by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'rowlevelsecurity',
diff --git a/superset-frontend/src/pages/SavedQueryList/index.tsx b/superset-frontend/src/pages/SavedQueryList/index.tsx
index 958107aa5..bbad3c89f 100644
--- a/superset-frontend/src/pages/SavedQueryList/index.tsx
+++ b/superset-frontend/src/pages/SavedQueryList/index.tsx
@@ -362,7 +362,7 @@ function SavedQueryList({
         Header: t('Tags'),
         accessor: 'tags',
         disableSortBy: true,
-        hidden: !isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM),
+        hidden: !isFeatureEnabled(FeatureFlag.TaggingSystem),
       },
       {
         Cell: ({
@@ -433,7 +433,7 @@ function SavedQueryList({
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -447,14 +447,14 @@ function SavedQueryList({
         id: 'label',
         key: 'search',
         input: 'search',
-        operator: FilterOperator.allText,
+        operator: FilterOperator.AllText,
       },
       {
         Header: t('Database'),
         key: 'database',
         id: 'database',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'saved_query',
@@ -475,7 +475,7 @@ function SavedQueryList({
         id: 'schema',
         key: 'schema',
         input: 'select',
-        operator: FilterOperator.equals,
+        operator: FilterOperator.Equals,
         unfilteredLabel: 'All',
         fetchSelects: createFetchDistinct(
           'saved_query',
@@ -488,14 +488,14 @@ function SavedQueryList({
         ),
         paginate: true,
       },
-      ...((isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM) && canReadTag
+      ...((isFeatureEnabled(FeatureFlag.TaggingSystem) && canReadTag
         ? [
             {
               Header: t('Tag'),
               id: 'tags',
               key: 'tags',
               input: 'select',
-              operator: FilterOperator.savedQueryTags,
+              operator: FilterOperator.SavedQueryTags,
               fetchSelects: loadTags,
             },
           ]
@@ -505,7 +505,7 @@ function SavedQueryList({
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'saved_query',
diff --git a/superset-frontend/src/pages/SqlLab/index.tsx b/superset-frontend/src/pages/SqlLab/index.tsx
index 3f19b54c2..06e34e266 100644
--- a/superset-frontend/src/pages/SqlLab/index.tsx
+++ b/superset-frontend/src/pages/SqlLab/index.tsx
@@ -73,7 +73,7 @@ export default function SqlLab() {
       >
         <SqlLabGlobalStyles />
         <App />
-        {isFeatureEnabled(FeatureFlag.SQLLAB_BACKEND_PERSISTENCE) && (
+        {isFeatureEnabled(FeatureFlag.SqllabBackendPersistence) && (
           <EditorAutoSync />
         )}
       </div>
diff --git a/superset-frontend/src/pages/Tags/index.tsx b/superset-frontend/src/pages/Tags/index.tsx
index 30bdc9934..a6fe13ef4 100644
--- a/superset-frontend/src/pages/Tags/index.tsx
+++ b/superset-frontend/src/pages/Tags/index.tsx
@@ -246,7 +246,7 @@ function TagList(props: TagListProps) {
         disableSortBy: true,
       },
       {
-        accessor: QueryObjectColumns.changed_by,
+        accessor: QueryObjectColumns.ChangedBy,
         hidden: true,
       },
     ],
@@ -259,14 +259,14 @@ function TagList(props: TagListProps) {
         Header: t('Name'),
         id: 'name',
         input: 'search',
-        operator: FilterOperator.contains,
+        operator: FilterOperator.Contains,
       },
       {
         Header: t('Modified by'),
         key: 'changed_by',
         id: 'changed_by',
         input: 'select',
-        operator: FilterOperator.relationOneMany,
+        operator: FilterOperator.RelationOneMany,
         unfilteredLabel: t('All'),
         fetchSelects: createFetchRelated(
           'tag',
@@ -385,10 +385,10 @@ function TagList(props: TagListProps) {
                 showThumbnails={
                   userKey
                     ? userKey.thumbnails
-                    : isFeatureEnabled(FeatureFlag.THUMBNAILS)
+                    : isFeatureEnabled(FeatureFlag.Thumbnails)
                 }
                 defaultViewMode={
-                  isFeatureEnabled(FeatureFlag.LISTVIEWS_DEFAULT_CARD_VIEW)
+                  isFeatureEnabled(FeatureFlag.ListviewsDefaultCardView)
                     ? 'card'
                     : 'table'
                 }
diff --git a/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts b/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts
index f27b8c849..f82f9d89e 100644
--- a/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts
+++ b/superset-frontend/src/utils/isDashboardVirtualizationEnabled.ts
@@ -17,14 +17,14 @@
  * under the License.
  */
 
-export enum DASHBOARD_VIRTUALIZATION_MODE {
-  NONE = 'NONE',
-  VIEWPORT = 'VIEWPORT',
-  PAGINATED = 'PAGINATED',
+export enum DashboardVirtualizationMode {
+  None = 'NONE',
+  Viewport = 'VIEWPORT',
+  Paginated = 'PAGINATED',
 }
 
 export const isDashboardVirtualizationEnabled = (
-  virtualizationMode: DASHBOARD_VIRTUALIZATION_MODE,
+  virtualizationMode: DashboardVirtualizationMode,
 ) =>
-  virtualizationMode === DASHBOARD_VIRTUALIZATION_MODE.VIEWPORT ||
-  virtualizationMode === DASHBOARD_VIRTUALIZATION_MODE.PAGINATED;
+  virtualizationMode === DashboardVirtualizationMode.Viewport ||
+  virtualizationMode === DashboardVirtualizationMode.Paginated;
diff --git a/superset-frontend/src/utils/localStorageHelpers.test.ts b/superset-frontend/src/utils/localStorageHelpers.test.ts
index 8392ee529..d969e3f27 100644
--- a/superset-frontend/src/utils/localStorageHelpers.test.ts
+++ b/superset-frontend/src/utils/localStorageHelpers.test.ts
@@ -32,12 +32,12 @@ describe('localStorageHelpers', () => {
   });
 
   it('gets a value that was set', () => {
-    setItem(LocalStorageKeys.is_datapanel_open, false);
+    setItem(LocalStorageKeys.IsDatapanelOpen, false);
 
-    expect(getItem(LocalStorageKeys.is_datapanel_open, true)).toBe(false);
+    expect(getItem(LocalStorageKeys.IsDatapanelOpen, true)).toBe(false);
   });
 
   it('returns the default value for an unset value', () => {
-    expect(getItem(LocalStorageKeys.is_datapanel_open, true)).toBe(true);
+    expect(getItem(LocalStorageKeys.IsDatapanelOpen, true)).toBe(true);
   });
 });
diff --git a/superset-frontend/src/utils/localStorageHelpers.ts b/superset-frontend/src/utils/localStorageHelpers.ts
index 12fba5b94..4d8d35a49 100644
--- a/superset-frontend/src/utils/localStorageHelpers.ts
+++ b/superset-frontend/src/utils/localStorageHelpers.ts
@@ -30,16 +30,16 @@ export enum LocalStorageKeys {
    * TODO: Update all local storage keys to follow the new pattern. This is a breaking change,
    * and therefore should be done in a major release.
    */
-  db = 'db',
-  chart_split_sizes = 'chart_split_sizes',
-  controls_width = 'controls_width',
-  datasource_width = 'datasource_width',
-  is_datapanel_open = 'is_datapanel_open',
-  homepage_chart_filter = 'homepage_chart_filter',
-  homepage_dashboard_filter = 'homepage_dashboard_filter',
-  homepage_collapse_state = 'homepage_collapse_state',
-  homepage_activity_filter = 'homepage_activity_filter',
-  datasetname_set_successful = 'datasetname_set_successful',
+  Database = 'db',
+  ChartSplitSizes = 'chart_split_sizes',
+  ControlsWidth = 'controls_width',
+  DatasourceWidth = 'datasource_width',
+  IsDatapanelOpen = 'is_datapanel_open',
+  HomepageChartFilter = 'homepage_chart_filter',
+  HomepageDashboardFilter = 'homepage_dashboard_filter',
+  HomepageCollapseState = 'homepage_collapse_state',
+  HomepageActivityFilter = 'homepage_activity_filter',
+  DatasetnameSetSuccessful = 'datasetname_set_successful',
   /** END LEGACY LOCAL STORAGE KEYS */
 
   /**
@@ -49,12 +49,12 @@ export enum LocalStorageKeys {
    * Example:
    * sqllab__is_autocomplete_enabled
    */
-  sqllab__is_autocomplete_enabled = 'sqllab__is_autocomplete_enabled',
-  explore__data_table_original_formatted_time_columns = 'explore__data_table_original_formatted_time_columns',
-  dashboard__custom_filter_bar_widths = 'dashboard__custom_filter_bar_widths',
-  dashboard__explore_context = 'dashboard__explore_context',
-  dashboard__editor_show_only_my_charts = 'dashboard__editor_show_only_my_charts',
-  common__resizable_sidebar_widths = 'common__resizable_sidebar_widths',
+  SqllabIsAutocompleteEnabled = 'sqllab__is_autocomplete_enabled',
+  ExploreDataTableOriginalFormattedTimeColumns = 'explore__data_table_original_formatted_time_columns',
+  DashboardCustomFilterBarWidths = 'dashboard__custom_filter_bar_widths',
+  DashboardExploreContext = 'dashboard__explore_context',
+  DashboardEditorShowOnlyMyCharts = 'dashboard__editor_show_only_my_charts',
+  CommonResizableSidebarWidths = 'common__resizable_sidebar_widths',
 }
 
 export type LocalStorageValues = {
diff --git a/superset-frontend/src/utils/simpleFilterToAdhoc.ts b/superset-frontend/src/utils/simpleFilterToAdhoc.ts
index c3ce6c95e..a3db14c07 100644
--- a/superset-frontend/src/utils/simpleFilterToAdhoc.ts
+++ b/superset-frontend/src/utils/simpleFilterToAdhoc.ts
@@ -23,15 +23,15 @@ import {
   SimpleAdhocFilter,
 } from '@superset-ui/core';
 import {
-  CLAUSES,
-  EXPRESSION_TYPES,
+  Clauses,
+  ExpressionTypes,
 } from '../explore/components/controls/FilterControl/types';
 import { OPERATOR_ENUM_TO_OPERATOR_TYPE } from '../explore/constants';
 import { translateToSql } from '../explore/components/controls/FilterControl/utils/translateToSQL';
 
 export const simpleFilterToAdhoc = (
   filterClause: QueryObjectFilterClause,
-  clause: CLAUSES = CLAUSES.WHERE,
+  clause: Clauses = Clauses.Where,
 ) => {
   let result: AdhocFilter;
   if (isAdhocColumn(filterClause.col)) {
@@ -39,7 +39,7 @@ export const simpleFilterToAdhoc = (
       expressionType: 'SQL',
       clause,
       sqlExpression: translateToSql({
-        expressionType: EXPRESSION_TYPES.SIMPLE,
+        expressionType: ExpressionTypes.Simple,
         subject: `(${filterClause.col.sqlExpression})`,
         operator: filterClause.op,
         comparator: 'val' in filterClause ? filterClause.val : undefined,
diff --git a/superset-frontend/src/views/CRUD/types.ts b/superset-frontend/src/views/CRUD/types.ts
index 2fff111b4..fd9371355 100644
--- a/superset-frontend/src/views/CRUD/types.ts
+++ b/superset-frontend/src/views/CRUD/types.ts
@@ -110,24 +110,24 @@ export interface QueryObject {
 }
 
 export enum QueryObjectColumns {
-  id = 'id',
-  changed_on = 'changed_on',
-  changed_by = 'changed_by',
-  database = 'database',
-  database_name = 'database.database_name',
-  schema = 'schema',
-  sql = 'sql',
-  executed_sql = 'executed_sql',
-  sql_tables = 'sql_tables',
-  status = 'status',
-  tab_name = 'tab_name',
-  user = 'user',
-  user_first_name = 'user.first_name',
-  start_time = 'start_time',
-  end_time = 'end_time',
-  rows = 'rows',
-  tmp_table_name = 'tmp_table_name',
-  tracking_url = 'tracking_url',
+  Id = 'id',
+  ChangedOn = 'changed_on',
+  ChangedBy = 'changed_by',
+  Database = 'database',
+  DatabaseName = 'database.database_name',
+  Schema = 'schema',
+  Sql = 'sql',
+  ExecutedSql = 'executed_sql',
+  SqlTables = 'sql_tables',
+  Status = 'status',
+  TabName = 'tab_name',
+  User = 'user',
+  UserFirstName = 'user.first_name',
+  StartTime = 'start_time',
+  EndTime = 'end_time',
+  Rows = 'rows',
+  TmpTableName = 'tmp_table_name',
+  TrackingUrl = 'tracking_url',
 }
 
 export type ImportResourceName =
diff --git a/superset-frontend/src/views/routes.tsx b/superset-frontend/src/views/routes.tsx
index 63d502fed..f1d6ccc9b 100644
--- a/superset-frontend/src/views/routes.tsx
+++ b/superset-frontend/src/views/routes.tsx
@@ -227,7 +227,7 @@ export const routes: Routes = [
   },
 ];
 
-if (isFeatureEnabled(FeatureFlag.TAGGING_SYSTEM)) {
+if (isFeatureEnabled(FeatureFlag.TaggingSystem)) {
   routes.push({
     path: '/superset/all_entities/',
     Component: AllEntities,
diff --git a/superset-frontend/src/views/store.ts b/superset-frontend/src/views/store.ts
index a9c3a9eb1..e096dc40e 100644
--- a/superset-frontend/src/views/store.ts
+++ b/superset-frontend/src/views/store.ts
@@ -108,7 +108,7 @@ const CombinedDatasourceReducers = (
   datasources: DatasourcesState | undefined | { [key: string]: Dataset },
   action: DatasourcesActionPayload | AnyDatasourcesAction | HydrateExplore,
 ) => {
-  if (action.type === DatasourcesAction.SET_DATASOURCES) {
+  if (action.type === DatasourcesAction.SetDatasources) {
     return dashboardDatasources(
       datasources as DatasourcesState | undefined,
       action as DatasourcesActionPayload,
diff --git a/superset-frontend/src/visualizations/presets/MainPreset.js b/superset-frontend/src/visualizations/presets/MainPreset.js
index 98ee67a5d..7e39f3b50 100644
--- a/superset-frontend/src/visualizations/presets/MainPreset.js
+++ b/superset-frontend/src/visualizations/presets/MainPreset.js
@@ -82,7 +82,7 @@ import TimeTableChartPlugin from '../TimeTable';
 export default class MainPreset extends Preset {
   constructor() {
     const experimentalPlugins = isFeatureEnabled(
-      FeatureFlag.CHART_PLUGINS_EXPERIMENTAL,
+      FeatureFlag.ChartPluginsExperimental,
     )
       ? [new PopKPIPlugin().configure({ key: 'pop_kpi' })]
       : [];