Closed etr2460 closed 2 years ago
Issue-Label Bot is automatically applying the label #enhancement
to this issue, with a confidence of 0.87. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!
Links: app homepage, dashboard and code for this bot.
@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?
@etr2460 I propose adding one more requirement here: Changing the class components to functional components and using react hooks.
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
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 👍
@etr2460 I would also like to work on this issue !! Can you guide me on where to start !!!
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
pre-commit
hook to prevent new *.js
and *.jsx
filles.Hello! These files are currently in progress of conversion, with links to the PRs. I will update when they are complete:
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, runnode ../scripts/generate_frontend_ts_tasklist.js
, and copy and paste the output belowTracker
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