[TRACKER] Migrate JavaScript files to TypeScript

[etr2460]

This issue tracks Superset's migration from JavaScript to TypeScript (as started in SIP-36). If you'd like to help with the migration, feel free to take an unchecked directory and convert the files within the immediate directory from JavaScript/JSX to TypeScript/TSX. #9162 and #9180 provide some tips for performing the migration. Once completed and PR'ed out, feel free to tag myself (@etr2460) or anyone else in the file's git-blame for review.

We really appreciate any work done here, and are happy to help resolve any issues you may come across!

To update the tracker, go to the superset-frontend directory, run node ../scripts/generate_frontend_ts_tasklist.js, and copy and paste the output below

Tracker

• packages/generator-superset
  • packages/generator-superset/generators/app
  • packages/generator-superset/generators/plugin-chart
    - [ ] packages/generator-superset/generators/plugin-chart/templates/test/__mocks__
    • packages/generator-superset/generators/plugin-chart/templates/types
  • packages/generator-superset/test
  • packages/superset-ui-chart-controls/src
    • packages/superset-ui-chart-controls/src/components
      • packages/superset-ui-chart-controls/src/components/ControlForm
    • packages/superset-ui-chart-controls/src/operators
      • packages/superset-ui-chart-controls/src/operators/utils
    • packages/superset-ui-chart-controls/src/sections
    • packages/superset-ui-chart-controls/src/shared-controls
      • packages/superset-ui-chart-controls/src/shared-controls/components
        • packages/superset-ui-chart-controls/src/shared-controls/components/ColumnConfigControl
    • packages/superset-ui-chart-controls/src/utils
  • packages/superset-ui-chart-controls/test
    • packages/superset-ui-chart-controls/test/components
    • packages/superset-ui-chart-controls/test/shared-controls
    • packages/superset-ui-chart-controls/test/utils
      • packages/superset-ui-chart-controls/test/utils/operators
  • packages/superset-ui-core/src
    • packages/superset-ui-core/src/chart
      • packages/superset-ui-core/src/chart/clients
      • packages/superset-ui-core/src/chart/components
      • packages/superset-ui-core/src/chart/models
      • packages/superset-ui-core/src/chart/registries
      • packages/superset-ui-core/src/chart/types
    • packages/superset-ui-core/src/chart-composition
      • packages/superset-ui-core/src/chart-composition/legend
      • packages/superset-ui-core/src/chart-composition/tooltip
    • packages/superset-ui-core/src/color
      • packages/superset-ui-core/src/color/colorSchemes
        • packages/superset-ui-core/src/color/colorSchemes/categorical
        • packages/superset-ui-core/src/color/colorSchemes/sequential
    • packages/superset-ui-core/src/components
    • packages/superset-ui-core/src/connection
      • packages/superset-ui-core/src/connection/callApi
    • packages/superset-ui-core/src/dimension
      • packages/superset-ui-core/src/dimension/svg
    • packages/superset-ui-core/src/dynamic-plugins
    • packages/superset-ui-core/src/math-expression
    • packages/superset-ui-core/src/models
    • packages/superset-ui-core/src/number-format
      • packages/superset-ui-core/src/number-format/factories
    • packages/superset-ui-core/src/query
      • packages/superset-ui-core/src/query/api
        • packages/superset-ui-core/src/query/api/legacy
        • packages/superset-ui-core/src/query/api/v1
      • packages/superset-ui-core/src/query/types
    • packages/superset-ui-core/src/style
    • packages/superset-ui-core/src/time-format
      • packages/superset-ui-core/src/time-format/factories
      • packages/superset-ui-core/src/time-format/formatters
      • packages/superset-ui-core/src/time-format/utils
    • packages/superset-ui-core/src/translation
      • packages/superset-ui-core/src/translation/types
    • packages/superset-ui-core/src/types
    • packages/superset-ui-core/src/utils
    • packages/superset-ui-core/src/validator
  • packages/superset-ui-core/test
    • packages/superset-ui-core/test/__mocks__
    • packages/superset-ui-core/test/chart
      • packages/superset-ui-core/test/chart/clients
      • packages/superset-ui-core/test/chart/components
      • packages/superset-ui-core/test/chart/fixtures
      • packages/superset-ui-core/test/chart/models
    • packages/superset-ui-core/test/chart-composition
      • packages/superset-ui-core/test/chart-composition/legend
      • packages/superset-ui-core/test/chart-composition/tooltip
    • packages/superset-ui-core/test/color
    • packages/superset-ui-core/test/connection
      • packages/superset-ui-core/test/connection/callApi
      • packages/superset-ui-core/test/connection/fixtures
    • packages/superset-ui-core/test/dimension
      • packages/superset-ui-core/test/dimension/svg
    • packages/superset-ui-core/test/dynamic-plugins
    • packages/superset-ui-core/test/math-expression
    • packages/superset-ui-core/test/models
    • packages/superset-ui-core/test/number-format
      • packages/superset-ui-core/test/number-format/factories
    • packages/superset-ui-core/test/query
      • packages/superset-ui-core/test/query/api
        • packages/superset-ui-core/test/query/api/legacy
        • packages/superset-ui-core/test/query/api/v1
      • packages/superset-ui-core/test/query/types
    • packages/superset-ui-core/test/style
    • packages/superset-ui-core/test/time-format
      • packages/superset-ui-core/test/time-format/factories
      • packages/superset-ui-core/test/time-format/formatters
      • packages/superset-ui-core/test/time-format/utils
    • packages/superset-ui-core/test/translation
      • packages/superset-ui-core/test/translation/languagePacks
    • packages/superset-ui-core/test/utils
    • packages/superset-ui-core/test/validator
  • packages/superset-ui-core/types
  • packages/superset-ui-demo/.storybook
    • packages/superset-ui-demo/storybook/shared
      • packages/superset-ui-demo/storybook/shared/components
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-calendar
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-chord
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-country-map
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-event-flow
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-force-directed
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-heatmap
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-histogram
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-horizon
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-map-box
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-paired-t-test
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-parallel-coordinates
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-partition
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-pivot-table
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-rose
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sankey-loop
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-sunburst
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-treemap
        • packages/superset-ui-demo/storybook/stories/plugins/legacy-plugin-chart-world-map
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumber
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-big-number/BigNumberTotal
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Arc
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Grid
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Hex
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Path
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Polygon
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Scatter
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-deckgl/Screengrid
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Area/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bar/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/BoxPlot
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/BoxPlot/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bubble/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Bullet/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Compare/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DistBar/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DualLine
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/DualLine/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Line/stories
          • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie
            • packages/superset-ui-demo/storybook/stories/plugins/legacy-preset-chart-nvd3/Pie/stories
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/BoxPlot
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Funnel
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Gauge
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Graph
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/MixedTimeseries
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Pie
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Radar
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Timeseries
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Tree
          • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-echarts/Treemap
        • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-table
        • packages/superset-ui-demo/storybook/stories/plugins/plugin-chart-word-cloud
          • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/BoxPlot
            • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/BoxPlot/stories
          • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line
            • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/data
            • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/Line/stories
          • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/ScatterPlot
            • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/ScatterPlot/data
            • packages/superset-ui-demo/storybook/stories/plugins/preset-chart-xy/ScatterPlot/stories
      • packages/superset-ui-demo/storybook/stories/superset-ui-chart
      • packages/superset-ui-demo/storybook/stories/superset-ui-color
      • packages/superset-ui-demo/storybook/stories/superset-ui-connection
      • packages/superset-ui-demo/storybook/stories/superset-ui-number-format
      • packages/superset-ui-demo/storybook/stories/superset-ui-style
      • packages/superset-ui-demo/storybook/stories/superset-ui-time-format
• src
  • src/CRUD
  • src/SqlLab
    • src/SqlLab/actions
      • src/SqlLab/components/AceEditorWrapper
      • src/SqlLab/components/App
      • src/SqlLab/components/ColumnElement
      • src/SqlLab/components/EstimateQueryCostButton
      • src/SqlLab/components/ExploreCtasResultsButton
      • src/SqlLab/components/ExploreResultsButton
      • src/SqlLab/components/HighlightedSql
      • src/SqlLab/components/QueryAutoRefresh
      • src/SqlLab/components/QueryHistory
      • src/SqlLab/components/QuerySearch
      • src/SqlLab/components/QueryStateLabel
      • src/SqlLab/components/QueryTable
      • src/SqlLab/components/ResultSet
      • src/SqlLab/components/RunQueryActionButton
      • src/SqlLab/components/SaveDatasetModal
      • src/SqlLab/components/SaveQuery
      • src/SqlLab/components/ScheduleQueryButton
      • src/SqlLab/components/ShareSqlLabQuery
      • src/SqlLab/components/ShowSQL
      • src/SqlLab/components/SouthPane
      • src/SqlLab/components/SqlEditor
      • src/SqlLab/components/SqlEditorLeftBar
      • src/SqlLab/components/TabStatusIcon
      • src/SqlLab/components/TabbedSqlEditors
      • src/SqlLab/components/TableElement
      • src/SqlLab/components/TemplateParamsEditor
    • src/SqlLab/reducers
    • src/SqlLab/utils
  • src/addSlice
    - [ ] src/assets/stylesheets/less/cosmo
  • src/chart
    • src/common/components
  • src/components
    • src/components/Alert
    • src/components/AlteredSliceTag
    • src/components/AnchorLink
    • src/components/AsyncAceEditor
    • src/components/AsyncEsmComponent
    • src/components/AsyncSelect
    • src/components/Badge
    • src/components/Button
    • src/components/ButtonGroup
    • src/components/CachedLabel
    • src/components/Card
    • src/components/CertifiedBadge
    • src/components/Checkbox
    • src/components/Collapse
    • src/components/ConfirmStatusChange
    • src/components/CopyToClipboard
    • src/components/CronPicker
    • src/components/DatabaseSelector
    • src/components/Datasource
    • src/components/DatePicker
    • src/components/DeleteModal
    • src/components/Dropdown
    • src/components/DropdownButton
    • src/components/DynamicPlugins
    • src/components/EditableTitle
    • src/components/ErrorBoundary
    • src/components/ErrorMessage
    • src/components/FacePile
    • src/components/FaveStar
    • src/components/FilterableTable
    • src/components/FlashProvider
    • src/components/Form
    • src/components/FormRow
    • src/components/IconButton
    • src/components/IconTooltip
    • src/components/Icons
    • src/components/ImportModal
    • src/components/IndeterminateCheckbox
    • src/components/InfoTooltip
    • src/components/Label
    • src/components/LastUpdated
    • src/components/ListView
      • src/components/ListView/Filters
    • src/components/ListViewCard
    • src/components/Loading
    • src/components/MessageToasts
    • src/components/Modal
    • src/components/ModalTrigger
    • src/components/OmniContainer
    • src/components/Pagination
    • src/components/Popover
    • src/components/PopoverDropdown
    • src/components/PopoverSection
    • src/components/ProgressBar
    • src/components/Radio
    • src/components/RefreshLabel
    • src/components/ReportModal
      • src/components/ReportModal/HeaderReportActionsDropdown
    • src/components/Select
      • src/components/Select/WindowedSelect
    • src/components/Slider
    • src/components/Switch
    • src/components/TableCollection
    • src/components/TableLoader
    • src/components/TableSelector
    • src/components/TableView
    • src/components/Tabs
    • src/components/Timer
    • src/components/TimezoneSelector
    • src/components/Tooltip
    • src/components/URLShortLinkButton
    • src/components/WarningIconWithTooltip
  • src/dashboard
    • src/dashboard/actions
    • src/dashboard/components
      • src/dashboard/components/CrossFilterScopingModal
        • src/dashboard/components/CrossFilterScopingModal/CrossFilterScopingForm
        • src/dashboard/components/CrossFilterScopingModal/utils
      • src/dashboard/components/CssEditor
      • src/dashboard/components/DashboardBuilder
      • src/dashboard/components/FiltersBadge
        • src/dashboard/components/FiltersBadge/DetailsPanel
        • src/dashboard/components/FiltersBadge/FilterIndicator
      • src/dashboard/components/Header
        • src/dashboard/components/Header/HeaderActionsDropdown
      • src/dashboard/components/PropertiesModal
      • src/dashboard/components/PublishedStatus
      • src/dashboard/components/SliceHeader
      • src/dashboard/components/SliceHeaderControls
      • src/dashboard/components/UndoRedoKeyListeners
      • src/dashboard/components/dnd
        • src/dashboard/components/dnd/handleScroll
      • src/dashboard/components/filterscope
      • src/dashboard/components/gridComponents
        • src/dashboard/components/gridComponents/new
      • src/dashboard/components/menu
        • src/dashboard/components/menu/ShareMenuItems
      • src/dashboard/components/nativeFilters
        • src/dashboard/components/nativeFilters/FilterBar
          • src/dashboard/components/nativeFilters/FilterBar/CascadeFilters
            • src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadeFilterControl
            • src/dashboard/components/nativeFilters/FilterBar/CascadeFilters/CascadePopover
          • src/dashboard/components/nativeFilters/FilterBar/FilterConfigurationLink
          • src/dashboard/components/nativeFilters/FilterBar/FilterControls
          • src/dashboard/components/nativeFilters/FilterBar/FilterSets
            • src/dashboard/components/nativeFilters/FilterBar/FilterSets/utils
          • src/dashboard/components/nativeFilters/FilterBar/Header
        • src/dashboard/components/nativeFilters/FiltersConfigModal
          • src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm
            • src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FilterScope
          • src/dashboard/components/nativeFilters/FiltersConfigModal/Footer
      • src/dashboard/components/resizable
    • src/dashboard/containers
    • src/dashboard/fixtures
    • src/dashboard/reducers
    • src/dashboard/util
      • src/dashboard/util/charts
      • src/dashboard/util/logging
  • src/dataMask
  • src/explore
    • src/explore/actions
    • src/explore/components
      • src/explore/components/DataTableControl
      • src/explore/components/DataTablesPane
      • src/explore/components/DatasourcePanel
        • src/explore/components/DatasourcePanel/DatasourcePanelDragOption
      • src/explore/components/ExploreAdditionalActionsMenu
      • src/explore/components/ExploreChartHeader
      • src/explore/components/ExportToCSVDropdown
      • src/explore/components/PropertiesModal
      • src/explore/components/controls
        • src/explore/components/controls/AnnotationLayerControl
        • src/explore/components/controls/CollectionControl
        • src/explore/components/controls/ColorSchemeControl
        • src/explore/components/controls/ConditionalFormattingControl
        • src/explore/components/controls/CustomListItem
        • src/explore/components/controls/DatasourceControl
        • src/explore/components/controls/DateFilterControl
          • src/explore/components/controls/DateFilterControl/components
          • src/explore/components/controls/DateFilterControl/utils
        • src/explore/components/controls/DndColumnSelectControl
          • src/explore/components/controls/DndColumnSelectControl/utils
        • src/explore/components/controls/FilterBoxItemControl
        • src/explore/components/controls/FilterControl
          • src/explore/components/controls/FilterControl/AdhocFilter
          • src/explore/components/controls/FilterControl/AdhocFilterControl
          • src/explore/components/controls/FilterControl/AdhocFilterEditPopover
          • src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSimpleTabContent
          • src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent
          • src/explore/components/controls/FilterControl/AdhocFilterOption
          • src/explore/components/controls/FilterControl/AdhocFilterPopoverTrigger
        • src/explore/components/controls/FixedOrMetricControl
        • src/explore/components/controls/MetricControl
          • src/explore/components/controls/MetricControl/AdhocMetricEditPopover
        • src/explore/components/controls/OptionControls
        • src/explore/components/controls/SelectAsyncControl
        • src/explore/components/controls/TextControl
        • src/explore/components/controls/TimeSeriesColumnControl
        • src/explore/components/controls/VizTypeControl
    • src/explore/controlPanels
    • src/explore/controlUtils
    • src/explore/exploreUtils
    • src/explore/reducers
  • src/filters
    • src/filters/components
      • src/filters/components/GroupBy
      • src/filters/components/Range
      • src/filters/components/Select
      • src/filters/components/Time
      • src/filters/components/TimeColumn
      • src/filters/components/TimeGrain
  • src/hooks
    • src/hooks/apiResources
    • src/hooks/useChangeEffect
    • src/hooks/useComponentDidMount
    • src/hooks/useComponentDidUpdate
    • src/hooks/useElementOnScreen
    • src/hooks/usePrevious
  • src/logger
    • src/logger/actions
  • src/middleware
  • src/modules
  • src/profile
    • src/profile/components
    • src/reports/actions
    • src/reports/reducers
  • src/setup
  • src/showSavedQuery
  • src/types
  • src/utils
  • src/views
    • src/views/CRUD
      • src/views/CRUD/alert
        • src/views/CRUD/alert/components
      • src/views/CRUD/annotation
      • src/views/CRUD/annotationlayers
      • src/views/CRUD/chart
      • src/views/CRUD/csstemplates
      • src/views/CRUD/dashboard
      • src/views/CRUD/data
        • src/views/CRUD/data/components/SyntaxHighlighterCopy
        • src/views/CRUD/data/database
          • src/views/CRUD/data/database/DatabaseModal
            • src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm
        • src/views/CRUD/data/dataset
        • src/views/CRUD/data/query
        • src/views/CRUD/data/savedquery
      • src/views/CRUD/welcome
    • src/views/components
    • src/visualizations/FilterBox
    • src/visualizations/TimeTable
    • src/visualizations/presets
  • spec/__mocks__
  • spec/fixtures
  • spec/helpers

[issue-label-bot]

Issue-Label Bot is automatically applying the label #enhancement to this issue, with a confidence of 0.87. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[tanmaylaud]

@etr2460 I noticed issues in src/components/ListView/Filters.tsx (introduced by tsx migration) in PaginatedSelectComponent. Can you please confirm if it requires a fix?

[tanmaylaud]

@etr2460 I propose adding one more requirement here: Changing the class components to functional components and using react hooks.

[etr2460]

I noticed issues in src/components/ListView/Filters.tsx (introduced by tsx migration) in PaginatedSelectComponent.

@nytai is this related to the issues you were seeing? If so, were you still planning on addressing it?

I propose adding one more requirement here: Changing the class components to functional components and using react hooks.

In general, I agree. However we have some class components that are extremely complex and difficult to migrate to functional components. Additionally, some of our class components might simply be better off remaining as classes because of their complexity. I'd like to scope this to only requiring TypeScript migration, but with the option of also moving towards functional components with hooks. At the very least, migrating to TypeScript will make it safer and easier to go from class based to functional react components in the future, and we can do that in future work

[tanmaylaud]

I noticed issues in src/components/ListView/Filters.tsx (introduced by tsx migration) in PaginatedSelectComponent.

@nytai is this related to the issues you were seeing? If so, were you still planning on addressing it?

I propose adding one more requirement here: Changing the class components to functional components and using react hooks.

In general, I agree. However we have some class components that are extremely complex and difficult to migrate to functional components. Additionally, some of our class components might simply be better off remaining as classes because of their complexity. I'd like to scope this to only requiring TypeScript migration, but with the option of also moving towards functional components with hooks. At the very least, migrating to TypeScript will make it safer and easier to go from class based to functional react components in the future, and we can do that in future work

@etr2460 Agreed! Let's encourage people to go for functional components with hooks. Beginners will also get to learn something new in the process 👍

[bera5186]

@etr2460 I would also like to work on this issue !! Can you guide me on where to start !!!

[etr2460]

Hi @bera5186! Sorry I didn't see this earlier. If you're still interested in helping out, all you need to do is find a file in the superset-frontend repo that's still in javascript and convert it to typescript. Some of the PRs linked in the issue description might help you get started

[john-bodley]

• @etr2460 to check whether there is a pre-commit hook to prevent new *.js and *.jsx filles.
• @etr2460 add instructions to the task regarding how to update the process tracker.

[lyndsiWilliams]

Hello! These files are currently in progress of conversion, with links to the PRs. I will update when they are complete:

• src/SqlLab/components/SqlEditorLeftBar
• src/SqlLab/components/QueryTable