Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate components to TypeScript #18100

Closed
4 of 227 tasks
ad-m opened this issue Jan 20, 2022 · 4 comments
Closed
4 of 227 tasks

Migrate components to TypeScript #18100

ad-m opened this issue Jan 20, 2022 · 4 comments
Labels
enhancement:request Enhancement request submitted by anyone from the community good first issue Good first issues for new contributors

Comments

@ad-m
Copy link
Contributor

ad-m commented Jan 20, 2022 •
edited

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
ad-m added a commit to ad-m/superset that referenced this issue Jan 20, 2022
@ad-m
Migrate Checkbox story to tsx - see apache#18100
12f3b86
This was referenced Jan 20, 2022
Merged
Merged
ad-m added a commit to ad-m/superset that referenced this issue Jan 20, 2022
@ad-m
Migrate Checkbox story to tsx - see apache#18100
8975cc4
kgabryje pushed a commit that referenced this issue Jan 20, 2022
@ad-m
Migrate Checkbox story to tsx - see #18100 (#18101)
c3a17a7 
Looks good!
@asadUllah58
Copy link

Working on following components:

  • 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

@ad-m ad-m mentioned this issue Jan 20, 2022
Merged
9 tasks
@mik-laj
Copy link
Member

mik-laj commented Jan 20, 2022

@kgabryje @michael-s-molina Can I ask for "good first issue" label?

@ad-m ad-m mentioned this issue Jan 20, 2022
Merged
9 tasks
@nytai nytai added the good first issue Good first issues for new contributors label Jan 20, 2022
@ad-m ad-m mentioned this issue Jan 20, 2022
Closed
9 tasks
jayakrishnankk pushed a commit to jayakrishnankk/superset that referenced this issue Jan 21, 2022
@jayakrishnankarolilnlsn
Migrating storybook jsx to typescript apache#18100
78183da
jayakrishnankk pushed a commit to jayakrishnankk/superset that referenced this issue Jan 21, 2022
@jayakrishnankarolilnlsn
Migrating storybook jsx to typescript apache#18100
5e35ce3
jayakrishnankk pushed a commit to jayakrishnankk/superset that referenced this issue Jan 21, 2022
@jayakrishnankarolilnlsn
Migrating storybook jsx to typescript apache#18100
2027a22
@jayakrishnankk jayakrishnankk mentioned this issue Jan 21, 2022
Merged
9 tasks
@Scrip7 Scrip7 mentioned this issue Jan 22, 2022
Merged
9 tasks
This was referenced Jan 23, 2022
Closed