Migrate components to TypeScript #18100
Description
Is your feature request related to a problem? Please describe.
Since SIP-9 in 2018, TypeScript has been a part of the Superset repo. Since SIP-36 in 2020 all new frontend code should be written in TypeScript. When modifying old functions/components, migrating to TypeScript is appreciated, but not required.
We have still a bit non-TypeScript components on frontend:
$ find superset-frontend/ -name '*.jsx' ! -ipath '*/node_modules/*' -a ! -ipath '*legacy*' | wc -l
227
Describe the solution you'd like
We should rewrite frontend components to use JSX. I listed all of them to track progress.
-
superset-frontend/src/visualizations/TimeTable/TimeTable.jsx -
superset-frontend/src/visualizations/FilterBox/controlPanel.jsx -
superset-frontend/src/visualizations/FilterBox/FilterBox.test.jsx -
superset-frontend/src/visualizations/FilterBox/FilterBox.jsx -
superset-frontend/src/modules/utils.test.jsx -
superset-frontend/src/explore/exploreUtils/exploreUtils.test.jsx -
superset-frontend/src/explore/index.jsx -
superset-frontend/src/explore/store.test.jsx -
superset-frontend/src/explore/controls.jsx -
superset-frontend/src/explore/App.jsx -
superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/index.jsx -
superset-frontend/src/explore/components/ExploreAdditionalActionsMenu/ExploreAdditionalActionsMenu.test.jsx -
superset-frontend/src/explore/components/ExploreActionButtons.test.jsx -
superset-frontend/src/explore/components/ExploreViewContainer.test.jsx -
superset-frontend/src/explore/components/ExploreViewContainer.jsx -
superset-frontend/src/explore/components/ExploreChartPanel.test.jsx -
superset-frontend/src/explore/components/QueryAndSaveBtns.test.jsx -
superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx -
superset-frontend/src/explore/components/controls/SliderControl.jsx -
superset-frontend/src/explore/components/controls/SelectControl.test.jsx -
superset-frontend/src/explore/components/controls/SelectControl.jsx -
superset-frontend/src/explore/components/controls/FixedOrMetricControl/index.jsx -
superset-frontend/src/explore/components/controls/BoundsControl.jsx -
superset-frontend/src/explore/components/controls/TextAreaControl.jsx -
superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.test.jsx -
superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.jsx -
superset-frontend/src/explore/components/controls/MetricControl/FilterDefinitionOption.test.jsx -
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.test.jsx -
superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx -
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.test.jsx -
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/AdhocMetricEditPopover.test.jsx -
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopover/index.jsx -
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx -
superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricEditPopoverTitle.jsx -
superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionOption.jsx -
superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.test.jsx -
superset-frontend/src/explore/components/controls/MetricControl/AggregateOption.jsx -
superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionOption.test.jsx -
superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx -
superset-frontend/src/explore/components/controls/SpatialControl.jsx -
superset-frontend/src/explore/components/controls/VizTypeControl/VizTypeControl.test.jsx -
superset-frontend/src/explore/components/controls/ColorPickerControl.jsx -
superset-frontend/src/explore/components/controls/ViewportControl.test.jsx -
superset-frontend/src/explore/components/controls/ViewportControl.jsx -
superset-frontend/src/explore/components/controls/DatasourceControl/index.jsx -
superset-frontend/src/explore/components/controls/DatasourceControl/DatasourceControl.test.jsx -
superset-frontend/src/explore/components/controls/FilterBoxItemControl/FilterBoxItemControl.test.jsx -
superset-frontend/src/explore/components/controls/FilterBoxItemControl/index.jsx -
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/index.jsx -
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopover/AdhocFilterEditPopover.test.jsx -
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/index.jsx -
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterControl/AdhocFilterControl.test.jsx -
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterOption/index.jsx -
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.jsx -
superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.jsx -
superset-frontend/src/explore/components/controls/BoundsControl.test.jsx -
superset-frontend/src/explore/components/controls/CollectionControl/index.jsx -
superset-frontend/src/explore/components/controls/TextAreaControl.test.jsx -
superset-frontend/src/explore/components/controls/ColorSchemeControl/index.jsx -
superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorScheme.test.jsx -
superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelectPopoverTitle.jsx -
superset-frontend/src/explore/components/controls/CheckboxControl.jsx -
superset-frontend/src/explore/components/controls/AnnotationLayerControl/index.jsx -
superset-frontend/src/explore/components/controls/AnnotationLayerControl/AnnotationLayer.jsx -
superset-frontend/src/explore/components/EmbedCodeButton.jsx -
superset-frontend/src/explore/components/RowCountLabel.test.jsx -
superset-frontend/src/explore/components/ExploreChartPanel.jsx -
superset-frontend/src/explore/components/RowCountLabel.jsx -
superset-frontend/src/explore/components/QueryAndSaveBtns.jsx -
superset-frontend/src/explore/components/ExploreChartHeader/index.jsx -
superset-frontend/src/explore/components/ControlHeader.jsx -
superset-frontend/src/explore/components/SaveModal.test.jsx -
superset-frontend/src/explore/components/EmbedCodeButton.test.jsx -
superset-frontend/src/CRUD/CollectionTable.test.jsx -
superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayerModal.test.jsx -
superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayersList.test.jsx -
superset-frontend/src/views/CRUD/alert/ExecutionLog.test.jsx -
superset-frontend/src/views/CRUD/alert/AlertList.test.jsx -
superset-frontend/src/views/CRUD/alert/AlertReportModal.test.jsx -
superset-frontend/src/views/CRUD/data/dataset/DatasetList.test.jsx -
superset-frontend/src/views/CRUD/data/savedquery/SavedQueryList.test.jsx -
superset-frontend/src/views/CRUD/data/savedquery/SavedQueryPreviewModal.test.jsx -
superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.test.jsx -
superset-frontend/src/views/CRUD/data/database/DatabaseList.test.jsx -
superset-frontend/src/views/CRUD/chart/ChartList.test.jsx -
superset-frontend/src/views/CRUD/dashboard/DashboardList.test.jsx -
superset-frontend/src/views/CRUD/annotation/AnnotationList.test.jsx -
superset-frontend/src/views/CRUD/annotation/AnnotationModal.test.jsx -
superset-frontend/src/views/CRUD/csstemplates/CssTemplatesList.test.jsx -
superset-frontend/src/views/CRUD/csstemplates/CssTemplateModal.test.jsx -
superset-frontend/src/chart/ChartRenderer.jsx -
superset-frontend/src/chart/ChartRenderer.test.jsx -
superset-frontend/src/chart/Chart.jsx -
superset-frontend/src/chart/ChartContainer.jsx -
superset-frontend/src/utils/common.test.jsx -
superset-frontend/src/dashboard/containers/DashboardComponent.jsx -
superset-frontend/src/dashboard/containers/FilterScope.jsx -
superset-frontend/src/dashboard/containers/SliceAdder.jsx -
superset-frontend/src/dashboard/containers/Chart.jsx -
superset-frontend/src/dashboard/containers/DashboardHeader.jsx -
superset-frontend/src/dashboard/containers/DashboardGrid.jsx -
superset-frontend/src/dashboard/util/propShapes.jsx -
superset-frontend/src/dashboard/components/ColorSchemeControlWrapper.jsx -
superset-frontend/src/dashboard/components/filterscope/FilterScopeTree.jsx -
superset-frontend/src/dashboard/components/filterscope/renderFilterScopeTreeNodes.jsx -
superset-frontend/src/dashboard/components/filterscope/renderFilterFieldTreeNodes.jsx -
superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx -
superset-frontend/src/dashboard/components/filterscope/FilterFieldItem.jsx -
superset-frontend/src/dashboard/components/filterscope/treeIcons.jsx -
superset-frontend/src/dashboard/components/filterscope/FilterFieldTree.jsx -
superset-frontend/src/dashboard/components/gridComponents/Row.jsx -
superset-frontend/src/dashboard/components/gridComponents/Markdown.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/Tab.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/ChartHolder.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/Tabs.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewColumn.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewColumn.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewMarkdown.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewTabs.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/DraggableNewComponent.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewHeader.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewRow.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewTabs.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewRow.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewHeader.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewDivider.jsx -
superset-frontend/src/dashboard/components/gridComponents/new/NewDivider.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/Markdown.jsx -
superset-frontend/src/dashboard/components/gridComponents/Column.jsx -
superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx -
superset-frontend/src/dashboard/components/gridComponents/Chart.jsx -
superset-frontend/src/dashboard/components/gridComponents/Row.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/Tab.jsx -
superset-frontend/src/dashboard/components/gridComponents/Column.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/Divider.jsx -
superset-frontend/src/dashboard/components/gridComponents/Header.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/Header.jsx -
superset-frontend/src/dashboard/components/gridComponents/Divider.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/Chart.test.jsx -
superset-frontend/src/dashboard/components/gridComponents/ChartHolder.jsx -
superset-frontend/src/dashboard/components/AddSliceCard.jsx -
superset-frontend/src/dashboard/components/DeleteComponentButton.jsx -
superset-frontend/src/dashboard/components/UndoRedoKeyListeners/index.jsx -
superset-frontend/src/dashboard/components/Header/index.jsx -
superset-frontend/src/dashboard/components/Header/HeaderActionsDropdown/index.jsx -
superset-frontend/src/dashboard/components/SliceAdder.jsx -
superset-frontend/src/dashboard/components/CssEditor/index.jsx -
superset-frontend/src/dashboard/components/SliceAdder.test.jsx -
superset-frontend/src/dashboard/components/DashboardGrid.test.jsx -
superset-frontend/src/dashboard/components/resizable/ResizableContainer.jsx -
superset-frontend/src/dashboard/components/resizable/ResizableHandle.jsx -
superset-frontend/src/dashboard/components/PublishedStatus/index.jsx -
superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx -
superset-frontend/src/dashboard/components/dnd/DragDroppable.test.jsx -
superset-frontend/src/dashboard/components/dnd/AddSliceDragPreview.jsx -
superset-frontend/src/dashboard/components/menu/WithPopoverMenu.test.jsx -
superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.jsx -
superset-frontend/src/dashboard/components/Dashboard.jsx -
superset-frontend/src/dashboard/components/Dashboard.test.jsx -
superset-frontend/src/dashboard/components/PropertiesModal/PropertiesModal.test.jsx -
superset-frontend/src/dashboard/components/DashboardGrid.jsx -
superset-frontend/src/dashboard/components/MissingChart.jsx -
superset-frontend/src/showSavedQuery/utils.test.jsx -
superset-frontend/src/showSavedQuery/index.jsx -
superset-frontend/src/components/URLShortLinkButton/index.jsx -
superset-frontend/src/components/Select/OnPasteSelect.test.jsx -
superset-frontend/src/components/Select/OnPasteSelect.jsx -
superset-frontend/src/components/IconButton/IconButton.test.jsx -
superset-frontend/src/components/ModalTrigger/index.jsx -
superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx -
superset-frontend/src/components/AnchorLink/AnchorLink.test.jsx -
superset-frontend/src/components/AnchorLink/index.jsx -
superset-frontend/src/components/MessageToasts/ToastContainer.jsx -
superset-frontend/src/components/MessageToasts/ToastPresenter.test.jsx -
superset-frontend/src/components/MessageToasts/Toast.test.jsx -
superset-frontend/src/components/FormRow/index.jsx -
superset-frontend/src/components/FormRow/FormRow.test.jsx -
superset-frontend/src/components/AlteredSliceTag/index.jsx -
superset-frontend/src/components/AlteredSliceTag/AlteredSliceTag.test.jsx -
superset-frontend/src/components/ConfirmStatusChange/ConfirmStatusChange.test.jsx -
superset-frontend/src/components/AsyncSelect/AsyncSelect.test.jsx -
superset-frontend/src/components/AsyncSelect/index.jsx -
superset-frontend/src/components/ListViewCard/ImageLoader.test.jsx -
superset-frontend/src/components/ListViewCard/ListViewCard.test.jsx -
superset-frontend/src/components/ListView/ListView.test.jsx -
superset-frontend/src/components/CopyToClipboard/index.jsx -
superset-frontend/src/components/IconTooltip/IconTooltip.test.jsx -
superset-frontend/src/components/ErrorBoundary/index.jsx -
superset-frontend/src/components/Datasource/ChangeDatasourceModal.test.jsx -
superset-frontend/src/components/Datasource/DatasourceEditor.jsx -
superset-frontend/src/components/Datasource/DatasourceEditor.test.jsx -
superset-frontend/src/components/Datasource/DatasourceModal.test.jsx -
superset-frontend/src/SqlLab/App.jsx -
superset-frontend/src/SqlLab/components/ExploreResultsButton/index.jsx -
superset-frontend/src/SqlLab/components/ExploreResultsButton/ExploreResultsButton.test.jsx -
superset-frontend/src/SqlLab/components/SaveQuery/SaveQuery.test.jsx -
superset-frontend/src/SqlLab/components/ResultSet/ResultSet.test.jsx -
superset-frontend/src/SqlLab/components/TabStatusIcon/TabStatusIcon.test.jsx -
superset-frontend/src/SqlLab/components/SouthPane/SouthPane.test.jsx -
superset-frontend/src/SqlLab/components/QuerySearch/QuerySearch.test.jsx -
superset-frontend/src/SqlLab/components/QueryTable/QueryTable.test.jsx -
superset-frontend/src/SqlLab/components/QueryTable/index.jsx -
superset-frontend/src/SqlLab/components/SqlEditor/index.jsx -
superset-frontend/src/SqlLab/components/SqlEditor/SqlEditor.test.jsx -
superset-frontend/src/SqlLab/components/SqlEditorLeftBar/index.jsx -
superset-frontend/src/SqlLab/components/SqlEditorLeftBar/SqlEditorLeftBar.test.jsx -
superset-frontend/src/SqlLab/components/QueryStateLabel/QueryStateLabel.test.jsx -
superset-frontend/src/SqlLab/components/HighlightedSql/HighlightedSql.test.jsx -
superset-frontend/src/SqlLab/components/App/index.jsx -
superset-frontend/src/SqlLab/components/App/App.test.jsx -
superset-frontend/src/SqlLab/components/TableElement/TableElement.test.jsx -
superset-frontend/src/SqlLab/components/ExploreCtasResultsButton/index.jsx -
superset-frontend/src/SqlLab/components/QueryAutoRefresh/index.jsx -
superset-frontend/src/SqlLab/components/QueryAutoRefresh/QueryAutoRefresh.test.jsx -
superset-frontend/src/SqlLab/components/TabbedSqlEditors/index.jsx -
superset-frontend/src/SqlLab/components/TabbedSqlEditors/TabbedSqlEditors.test.jsx -
superset-frontend/src/SqlLab/components/ShareSqlLabQuery/ShareSqlLabQuery.test.jsx -
superset-frontend/src/SqlLab/components/RunQueryActionButton/RunQueryActionButton.test.jsx -
superset-frontend/.storybook/preview.jsx -
superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx -
superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/PivotTable.jsx -
superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-style/ThemeStories.jsx -
superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-time-format/TimeFormatStories.jsx -
superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/RenderPalettes.jsx -
superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-color/ColorPallettesStories.jsx -
superset-frontend/packages/superset-ui-demo/storybook/stories/superset-ui-number-format/BigNumberStories.jsx
Describe alternatives you've considered
We can still migrate the component when we touch it. However, there is no guarantee of an endless time that the full benefits of TypeScript and code consistency will be achieved.
We will also lose potential new contributors who start there and then move on to more complex issues.
Additional context
At Slack @nytai commented about migration components without functional changes:
that would most certainly be appreciated