ad-m opened a new issue #18100: URL: https://github.com/apache/superset/issues/18100
**Is your feature request related to a problem? Please describe.** Since [SIP-9](https://github.com/apache/superset/pull/6120) in 2018, TypeScript has been a part of the Superset repo. Since [SIP-36](https://github.com/apache/superset/issues/9101) 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](https://apache-superset.slack.com/archives/C014LS99C1K/p1642635140009100?thread_ts=1642634818.008700&cid=C014LS99C1K) about migration components without functional changes: > that would most certainly be appreciated -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For queries about this service, please contact Infrastructure at: us...@infra.apache.org --------------------------------------------------------------------- To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org For additional commands, e-mail: notifications-h...@superset.apache.org
