diff --git a/d2.config.js b/d2.config.js
index ccdfa0fec..0185028f7 100644
--- a/d2.config.js
+++ b/d2.config.js
@@ -28,7 +28,7 @@ const config = {
     },
 
     entryPoints: {
-        app: './src/AppWrapper.js',
+        app: './src/AppWrapper.jsx',
     },
 }
 
diff --git a/src/AppWrapper.js b/src/AppWrapper.jsx
similarity index 97%
rename from src/AppWrapper.js
rename to src/AppWrapper.jsx
index a0258eeaf..120e49850 100644
--- a/src/AppWrapper.js
+++ b/src/AppWrapper.jsx
@@ -3,10 +3,10 @@ import { useDataEngine } from '@dhis2/app-runtime'
 import { D2Shim } from '@dhis2/app-runtime-adapter-d2'
 import React from 'react'
 import { Provider as ReduxProvider } from 'react-redux'
-import App from './components/App.js'
-import SystemSettingsProvider from './components/SystemSettingsProvider.js'
-import UserSettingsProvider from './components/UserSettingsProvider.js'
-import WindowDimensionsProvider from './components/WindowDimensionsProvider.js'
+import App from './components/App.jsx'
+import SystemSettingsProvider from './components/SystemSettingsProvider.jsx'
+import UserSettingsProvider from './components/UserSettingsProvider.jsx'
+import WindowDimensionsProvider from './components/WindowDimensionsProvider.jsx'
 import configureStore from './configureStore.js'
 
 import './locales/index.js'
diff --git a/src/__tests__/AppWrapper.spec.js b/src/__tests__/AppWrapper.spec.jsx
similarity index 95%
rename from src/__tests__/AppWrapper.spec.js
rename to src/__tests__/AppWrapper.spec.jsx
index 23c91c005..65f5cc9ea 100644
--- a/src/__tests__/AppWrapper.spec.js
+++ b/src/__tests__/AppWrapper.spec.jsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import AppWrapper from '../AppWrapper.js'
+import AppWrapper from '../AppWrapper.jsx'
 
 jest.mock('@dhis2/analytics', () => ({
     ...jest.requireActual('@dhis2/analytics'),
diff --git a/src/components/App.js b/src/components/App.jsx
similarity index 98%
rename from src/components/App.js
rename to src/components/App.jsx
index 28820c851..3eed11005 100644
--- a/src/components/App.js
+++ b/src/components/App.jsx
@@ -19,7 +19,7 @@ import { NewDashboard, EditDashboard } from '../pages/edit/index.js'
 import { PrintDashboard, PrintLayoutDashboard } from '../pages/print/index.js'
 import { LandingPage, ROUTE_START_PATH } from '../pages/start/index.js'
 import { ViewDashboard } from '../pages/view/index.js'
-import { useSystemSettings } from './SystemSettingsProvider.js'
+import { useSystemSettings } from './SystemSettingsProvider.jsx'
 import './styles/App.css'
 import 'react-grid-layout/css/styles.css'
 import 'react-resizable/css/styles.css'
diff --git a/src/components/ConfirmActionDialog.js b/src/components/ConfirmActionDialog.jsx
similarity index 100%
rename from src/components/ConfirmActionDialog.js
rename to src/components/ConfirmActionDialog.jsx
diff --git a/src/components/DashboardContainer.js b/src/components/DashboardContainer.jsx
similarity index 100%
rename from src/components/DashboardContainer.js
rename to src/components/DashboardContainer.jsx
diff --git a/src/components/DashboardsBar/Chip.js b/src/components/DashboardsBar/Chip.jsx
similarity index 97%
rename from src/components/DashboardsBar/Chip.js
rename to src/components/DashboardsBar/Chip.jsx
index 0e9cbd010..17fbdfdaf 100644
--- a/src/components/DashboardsBar/Chip.js
+++ b/src/components/DashboardsBar/Chip.jsx
@@ -7,7 +7,7 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { apiPostDataStatistics } from '../../api/dataStatistics.js'
 import { useCacheableSection } from '../../modules/useCacheableSection.js'
-import { OfflineSaved } from './assets/icons.js'
+import { OfflineSaved } from './assets/icons.jsx'
 import classes from './styles/Chip.module.css'
 
 const Chip = ({ starred, selected, label, dashboardId, onClick }) => {
diff --git a/src/components/DashboardsBar/ClearButton.js b/src/components/DashboardsBar/ClearButton.jsx
similarity index 90%
rename from src/components/DashboardsBar/ClearButton.js
rename to src/components/DashboardsBar/ClearButton.jsx
index 05214033e..cc58becf1 100644
--- a/src/components/DashboardsBar/ClearButton.js
+++ b/src/components/DashboardsBar/ClearButton.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import ClearIcon from './assets/Clear.js'
+import ClearIcon from './assets/Clear.jsx'
 import classes from './styles/ClearButton.module.css'
 
 const ClearButton = ({ onClear }) => (
diff --git a/src/components/DashboardsBar/Content.js b/src/components/DashboardsBar/Content.jsx
similarity index 98%
rename from src/components/DashboardsBar/Content.js
rename to src/components/DashboardsBar/Content.jsx
index e95f1a44a..19ea70a88 100644
--- a/src/components/DashboardsBar/Content.js
+++ b/src/components/DashboardsBar/Content.jsx
@@ -9,8 +9,8 @@ import { Redirect, withRouter } from 'react-router-dom'
 import { sGetAllDashboards } from '../../reducers/dashboards.js'
 import { sGetDashboardsFilter } from '../../reducers/dashboardsFilter.js'
 import { sGetSelectedId } from '../../reducers/selected.js'
-import Chip from './Chip.js'
-import Filter from './Filter.js'
+import Chip from './Chip.jsx'
+import Filter from './Filter.jsx'
 import { getFilteredDashboards } from './getFilteredDashboards.js'
 import classes from './styles/Content.module.css'
 
diff --git a/src/components/DashboardsBar/DashboardsBar.js b/src/components/DashboardsBar/DashboardsBar.jsx
similarity index 96%
rename from src/components/DashboardsBar/DashboardsBar.js
rename to src/components/DashboardsBar/DashboardsBar.jsx
index e42cbc753..e690abf53 100644
--- a/src/components/DashboardsBar/DashboardsBar.js
+++ b/src/components/DashboardsBar/DashboardsBar.jsx
@@ -10,12 +10,12 @@ import React, {
 import { connect } from 'react-redux'
 import { acSetControlBarUserRows } from '../../actions/controlBar.js'
 import { apiPostControlBarRows } from '../../api/controlBar.js'
-import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js'
+import { useWindowDimensions } from '../../components/WindowDimensionsProvider.jsx'
 import { sGetControlBarUserRows } from '../../reducers/controlBar.js'
-import Content from './Content.js'
-import DragHandle from './DragHandle.js'
+import Content from './Content.jsx'
+import DragHandle from './DragHandle.jsx'
 import { getRowsFromHeight } from './getRowsFromHeight.js'
-import ShowMoreButton from './ShowMoreButton.js'
+import ShowMoreButton from './ShowMoreButton.jsx'
 import classes from './styles/DashboardsBar.module.css'
 
 export const MIN_ROW_COUNT = 1
diff --git a/src/components/DashboardsBar/DragHandle.js b/src/components/DashboardsBar/DragHandle.jsx
similarity index 100%
rename from src/components/DashboardsBar/DragHandle.js
rename to src/components/DashboardsBar/DragHandle.jsx
diff --git a/src/components/DashboardsBar/Filter.js b/src/components/DashboardsBar/Filter.jsx
similarity index 98%
rename from src/components/DashboardsBar/Filter.js
rename to src/components/DashboardsBar/Filter.jsx
index 0cf2ce7c7..3752b2eb5 100644
--- a/src/components/DashboardsBar/Filter.js
+++ b/src/components/DashboardsBar/Filter.jsx
@@ -10,8 +10,8 @@ import {
 } from '../../actions/dashboardsFilter.js'
 import { isSmallScreen } from '../../modules/smallScreen.js'
 import { sGetDashboardsFilter } from '../../reducers/dashboardsFilter.js'
-import { useWindowDimensions } from '../WindowDimensionsProvider.js'
-import ClearButton from './ClearButton.js'
+import { useWindowDimensions } from '../WindowDimensionsProvider.jsx'
+import ClearButton from './ClearButton.jsx'
 import classes from './styles/Filter.module.css'
 
 export const KEYCODE_ENTER = 13
diff --git a/src/components/DashboardsBar/ShowMoreButton.js b/src/components/DashboardsBar/ShowMoreButton.jsx
similarity index 97%
rename from src/components/DashboardsBar/ShowMoreButton.js
rename to src/components/DashboardsBar/ShowMoreButton.jsx
index b62bd5307..bbc463c60 100644
--- a/src/components/DashboardsBar/ShowMoreButton.js
+++ b/src/components/DashboardsBar/ShowMoreButton.jsx
@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { Tooltip } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
-import { ChevronDown, ChevronUp } from './assets/icons.js'
+import { ChevronDown, ChevronUp } from './assets/icons.jsx'
 import classes from './styles/ShowMoreButton.module.css'
 
 const ShowMoreButton = ({ onClick, dashboardBarIsExpanded, disabled }) => {
diff --git a/src/components/DashboardsBar/__tests__/Chip.spec.js b/src/components/DashboardsBar/__tests__/Chip.spec.jsx
similarity index 99%
rename from src/components/DashboardsBar/__tests__/Chip.spec.js
rename to src/components/DashboardsBar/__tests__/Chip.spec.jsx
index 6215f9c4c..3f49a89be 100644
--- a/src/components/DashboardsBar/__tests__/Chip.spec.js
+++ b/src/components/DashboardsBar/__tests__/Chip.spec.jsx
@@ -3,7 +3,7 @@ import { render } from '@testing-library/react'
 import { createMemoryHistory } from 'history'
 import React from 'react'
 import { Router } from 'react-router-dom'
-import Chip from '../Chip.js'
+import Chip from '../Chip.jsx'
 
 /* eslint-disable react/prop-types */
 jest.mock('@dhis2/ui', () => {
diff --git a/src/components/DashboardsBar/__tests__/ClearButton.spec.js b/src/components/DashboardsBar/__tests__/ClearButton.spec.jsx
similarity index 83%
rename from src/components/DashboardsBar/__tests__/ClearButton.spec.js
rename to src/components/DashboardsBar/__tests__/ClearButton.spec.jsx
index 6f184b9bc..f673c0e78 100644
--- a/src/components/DashboardsBar/__tests__/ClearButton.spec.js
+++ b/src/components/DashboardsBar/__tests__/ClearButton.spec.jsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import React from 'react'
-import ClearButton from '../ClearButton.js'
+import ClearButton from '../ClearButton.jsx'
 
 test('ClearButton renders a button', () => {
     const { container } = render(<ClearButton onClear={jest.fn()} />)
diff --git a/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js b/src/components/DashboardsBar/__tests__/DashboardsBar.spec.jsx
similarity index 98%
rename from src/components/DashboardsBar/__tests__/DashboardsBar.spec.js
rename to src/components/DashboardsBar/__tests__/DashboardsBar.spec.jsx
index 2abd414ce..05ea32fb7 100644
--- a/src/components/DashboardsBar/__tests__/DashboardsBar.spec.js
+++ b/src/components/DashboardsBar/__tests__/DashboardsBar.spec.jsx
@@ -5,11 +5,11 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import { Router } from 'react-router-dom'
 import configureMockStore from 'redux-mock-store'
-import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.js'
+import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.jsx'
 import DashboardsBar, {
     MIN_ROW_COUNT,
     MAX_ROW_COUNT,
-} from '../DashboardsBar.js'
+} from '../DashboardsBar.jsx'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({
diff --git a/src/components/DashboardsBar/__tests__/Filter.spec.js b/src/components/DashboardsBar/__tests__/Filter.spec.jsx
similarity index 94%
rename from src/components/DashboardsBar/__tests__/Filter.spec.js
rename to src/components/DashboardsBar/__tests__/Filter.spec.jsx
index d7e2332ff..9657991d5 100644
--- a/src/components/DashboardsBar/__tests__/Filter.spec.js
+++ b/src/components/DashboardsBar/__tests__/Filter.spec.jsx
@@ -2,8 +2,8 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.js'
-import Filter from '../Filter.js'
+import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.jsx'
+import Filter from '../Filter.jsx'
 
 const mockStore = configureMockStore()
 
diff --git a/src/components/DashboardsBar/__tests__/ShowMoreButton.spec.js b/src/components/DashboardsBar/__tests__/ShowMoreButton.spec.jsx
similarity index 95%
rename from src/components/DashboardsBar/__tests__/ShowMoreButton.spec.js
rename to src/components/DashboardsBar/__tests__/ShowMoreButton.spec.jsx
index 5907609ed..a666551ca 100644
--- a/src/components/DashboardsBar/__tests__/ShowMoreButton.spec.js
+++ b/src/components/DashboardsBar/__tests__/ShowMoreButton.spec.jsx
@@ -1,7 +1,7 @@
 import { fireEvent } from '@testing-library/dom'
 import { render } from '@testing-library/react'
 import React from 'react'
-import ShowMoreButton from '../ShowMoreButton.js'
+import ShowMoreButton from '../ShowMoreButton.jsx'
 
 describe('ShowMoreButton', () => {
     it('renders correctly when at maxHeight', () => {
diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.jsx.snap
similarity index 100%
rename from src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.js.snap
rename to src/components/DashboardsBar/__tests__/__snapshots__/Chip.spec.jsx.snap
diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/ClearButton.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/ClearButton.spec.jsx.snap
similarity index 100%
rename from src/components/DashboardsBar/__tests__/__snapshots__/ClearButton.spec.js.snap
rename to src/components/DashboardsBar/__tests__/__snapshots__/ClearButton.spec.jsx.snap
diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/Filter.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/Filter.spec.jsx.snap
similarity index 100%
rename from src/components/DashboardsBar/__tests__/__snapshots__/Filter.spec.js.snap
rename to src/components/DashboardsBar/__tests__/__snapshots__/Filter.spec.jsx.snap
diff --git a/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap b/src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.jsx.snap
similarity index 100%
rename from src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.js.snap
rename to src/components/DashboardsBar/__tests__/__snapshots__/ShowMoreButton.spec.jsx.snap
diff --git a/src/components/DashboardsBar/assets/AddCircle.js b/src/components/DashboardsBar/assets/AddCircle.jsx
similarity index 100%
rename from src/components/DashboardsBar/assets/AddCircle.js
rename to src/components/DashboardsBar/assets/AddCircle.jsx
diff --git a/src/components/DashboardsBar/assets/Clear.js b/src/components/DashboardsBar/assets/Clear.jsx
similarity index 100%
rename from src/components/DashboardsBar/assets/Clear.js
rename to src/components/DashboardsBar/assets/Clear.jsx
diff --git a/src/components/DashboardsBar/assets/Search.js b/src/components/DashboardsBar/assets/Search.jsx
similarity index 100%
rename from src/components/DashboardsBar/assets/Search.js
rename to src/components/DashboardsBar/assets/Search.jsx
diff --git a/src/components/DashboardsBar/assets/icons.js b/src/components/DashboardsBar/assets/icons.jsx
similarity index 100%
rename from src/components/DashboardsBar/assets/icons.js
rename to src/components/DashboardsBar/assets/icons.jsx
diff --git a/src/components/DropdownButton/DropdownButton.js b/src/components/DropdownButton/DropdownButton.jsx
similarity index 95%
rename from src/components/DropdownButton/DropdownButton.js
rename to src/components/DropdownButton/DropdownButton.jsx
index ea4162c37..b8c344750 100644
--- a/src/components/DropdownButton/DropdownButton.js
+++ b/src/components/DropdownButton/DropdownButton.jsx
@@ -2,7 +2,7 @@ import { OfflineTooltip } from '@dhis2/analytics'
 import { Button, Layer, Popper } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
-import { ArrowDown, ArrowUp } from './assets/Arrow.js'
+import { ArrowDown, ArrowUp } from './assets/Arrow.jsx'
 import styles from './DropdownButton.module.css'
 
 const DropdownButton = ({
diff --git a/src/components/DropdownButton/assets/Arrow.js b/src/components/DropdownButton/assets/Arrow.jsx
similarity index 100%
rename from src/components/DropdownButton/assets/Arrow.js
rename to src/components/DropdownButton/assets/Arrow.jsx
diff --git a/src/components/Item/AppItem/Item.js b/src/components/Item/AppItem/Item.jsx
similarity index 97%
rename from src/components/Item/AppItem/Item.js
rename to src/components/Item/AppItem/Item.jsx
index 442b38368..459c9e553 100644
--- a/src/components/Item/AppItem/Item.js
+++ b/src/components/Item/AppItem/Item.jsx
@@ -7,7 +7,7 @@ import {
     sGetItemFiltersRoot,
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 import { getIframeSrc } from './getIframeSrc.js'
 
 const AppItem = ({ dashboardMode, item, itemFilters, apps }) => {
diff --git a/src/components/Item/AppItem/__tests__/Item.spec.js b/src/components/Item/AppItem/__tests__/Item.spec.jsx
similarity index 99%
rename from src/components/Item/AppItem/__tests__/Item.spec.js
rename to src/components/Item/AppItem/__tests__/Item.spec.jsx
index 9beff4a6f..0b63f324a 100644
--- a/src/components/Item/AppItem/__tests__/Item.spec.js
+++ b/src/components/Item/AppItem/__tests__/Item.spec.jsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import Item from '../Item.js'
+import Item from '../Item.jsx'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({
diff --git a/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.jsx.snap
similarity index 100%
rename from src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.js.snap
rename to src/components/Item/AppItem/__tests__/__snapshots__/Item.spec.jsx.snap
diff --git a/src/components/Item/Item.js b/src/components/Item/Item.jsx
similarity index 76%
rename from src/components/Item/Item.js
rename to src/components/Item/Item.jsx
index 7bc9fa06c..01f7261af 100644
--- a/src/components/Item/Item.js
+++ b/src/components/Item/Item.jsx
@@ -20,15 +20,15 @@ import {
     PAGEBREAK,
     PRINT_TITLE_PAGE,
 } from '../../modules/itemTypes.js'
-import AppItem from './AppItem/Item.js'
-import ListItem from './ListItem/Item.js'
-import MessagesItem from './MessagesItem/Item.js'
-import NotSupportedItem from './NotSupportedItem/Item.js'
-import PageBreakItem from './PageBreakItem/Item.js'
-import PrintTitlePageItem from './PrintTitlePageItem/Item.js'
-import SpacerItem from './SpacerItem/Item.js'
-import TextItem from './TextItem/Item.js'
-import VisualizationItem from './VisualizationItem/Item.js'
+import AppItem from './AppItem/Item.jsx'
+import ListItem from './ListItem/Item.jsx'
+import MessagesItem from './MessagesItem/Item.jsx'
+import NotSupportedItem from './NotSupportedItem/Item.jsx'
+import PageBreakItem from './PageBreakItem/Item.jsx'
+import PrintTitlePageItem from './PrintTitlePageItem/Item.jsx'
+import SpacerItem from './SpacerItem/Item.jsx'
+import TextItem from './TextItem/Item.jsx'
+import VisualizationItem from './VisualizationItem/Item.jsx'
 
 const getGridItem = (type) => {
     switch (type) {
diff --git a/src/components/Item/ItemHeader/DeleteItemButton.js b/src/components/Item/ItemHeader/DeleteItemButton.jsx
similarity index 100%
rename from src/components/Item/ItemHeader/DeleteItemButton.js
rename to src/components/Item/ItemHeader/DeleteItemButton.jsx
diff --git a/src/components/Item/ItemHeader/EditItemActions.js b/src/components/Item/ItemHeader/EditItemActions.jsx
similarity index 95%
rename from src/components/Item/ItemHeader/EditItemActions.js
rename to src/components/Item/ItemHeader/EditItemActions.jsx
index 3a8e71a1b..16fbd5287 100644
--- a/src/components/Item/ItemHeader/EditItemActions.js
+++ b/src/components/Item/ItemHeader/EditItemActions.jsx
@@ -9,7 +9,7 @@ import {
     sGetEditDashboardItems,
     sGetLayoutColumns,
 } from '../../../reducers/editDashboard.js'
-import DeleteItemButton from './DeleteItemButton.js'
+import DeleteItemButton from './DeleteItemButton.jsx'
 import classes from './styles/ItemHeader.module.css'
 
 const EditItemActions = ({ itemId, onDeleteItem }) => {
diff --git a/src/components/Item/ItemHeader/ItemHeader.js b/src/components/Item/ItemHeader/ItemHeader.jsx
similarity index 86%
rename from src/components/Item/ItemHeader/ItemHeader.js
rename to src/components/Item/ItemHeader/ItemHeader.jsx
index 76e27201d..f505bd868 100644
--- a/src/components/Item/ItemHeader/ItemHeader.js
+++ b/src/components/Item/ItemHeader/ItemHeader.jsx
@@ -2,11 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
 import { VIEW, EDIT, PRINT_LAYOUT } from '../../../modules/dashboardModes.js'
-import EditItemActions from './EditItemActions.js'
-import PrintItemInfo from './PrintItemInfo.js'
+import EditItemActions from './EditItemActions.jsx'
+import PrintItemInfo from './PrintItemInfo.jsx'
 import classes from './styles/ItemHeader.module.css'
-import ViewItemActions from './ViewItemActions.js'
-import ViewItemTags from './ViewItemTags.js'
+import ViewItemActions from './ViewItemActions.jsx'
+import ViewItemTags from './ViewItemTags.jsx'
 
 const getItemActionsMap = (isShortened) => {
     return {
diff --git a/src/components/Item/ItemHeader/PrintItemInfo.js b/src/components/Item/ItemHeader/PrintItemInfo.jsx
similarity index 100%
rename from src/components/Item/ItemHeader/PrintItemInfo.js
rename to src/components/Item/ItemHeader/PrintItemInfo.jsx
diff --git a/src/components/Item/ItemHeader/ViewItemActions.js b/src/components/Item/ItemHeader/ViewItemActions.jsx
similarity index 100%
rename from src/components/Item/ItemHeader/ViewItemActions.js
rename to src/components/Item/ItemHeader/ViewItemActions.jsx
diff --git a/src/components/Item/ItemHeader/ViewItemTags.js b/src/components/Item/ItemHeader/ViewItemTags.jsx
similarity index 100%
rename from src/components/Item/ItemHeader/ViewItemTags.js
rename to src/components/Item/ItemHeader/ViewItemTags.jsx
diff --git a/src/components/Item/ListItem/Item.js b/src/components/Item/ListItem/Item.jsx
similarity index 98%
rename from src/components/Item/ListItem/Item.js
rename to src/components/Item/ListItem/Item.jsx
index 498f85fd9..8debac372 100644
--- a/src/components/Item/ListItem/Item.js
+++ b/src/components/Item/ListItem/Item.jsx
@@ -11,7 +11,7 @@ import {
 import { isEditMode } from '../../../modules/dashboardModes.js'
 import { itemTypeMap, getItemUrl } from '../../../modules/itemTypes.js'
 import { orArray } from '../../../modules/util.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 import classes from './Item.module.css'
 
 const getItemTitle = (item) => itemTypeMap[item.type].pluralTitle
diff --git a/src/components/Item/MessagesItem/Item.js b/src/components/Item/MessagesItem/Item.jsx
similarity index 96%
rename from src/components/Item/MessagesItem/Item.js
rename to src/components/Item/MessagesItem/Item.jsx
index ed2bbd298..5d897c959 100644
--- a/src/components/Item/MessagesItem/Item.js
+++ b/src/components/Item/MessagesItem/Item.jsx
@@ -6,8 +6,8 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { isViewMode } from '../../../modules/dashboardModes.js'
 import { sGetMessagesRoot } from '../../../reducers/messages.js'
-import { useUserSettings } from '../../UserSettingsProvider.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import { useUserSettings } from '../../UserSettingsProvider.jsx'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 import { getFormattedDate } from './getFormattedDate.js'
 import classes from './styles/Item.module.css'
 import './MessagesItem.css'
diff --git a/src/components/Item/NotSupportedItem/Item.js b/src/components/Item/NotSupportedItem/Item.jsx
similarity index 95%
rename from src/components/Item/NotSupportedItem/Item.js
rename to src/components/Item/NotSupportedItem/Item.jsx
index 239695813..2353dff8e 100644
--- a/src/components/Item/NotSupportedItem/Item.js
+++ b/src/components/Item/NotSupportedItem/Item.jsx
@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { colors, IconQuestion24 } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 
 const NotSupportedItem = ({ item, dashboardMode }) => {
     const message = item.type
diff --git a/src/components/Item/PageBreakItem/Item.js b/src/components/Item/PageBreakItem/Item.jsx
similarity index 100%
rename from src/components/Item/PageBreakItem/Item.js
rename to src/components/Item/PageBreakItem/Item.jsx
diff --git a/src/components/Item/PrintTitlePageItem/Item.js b/src/components/Item/PrintTitlePageItem/Item.jsx
similarity index 100%
rename from src/components/Item/PrintTitlePageItem/Item.js
rename to src/components/Item/PrintTitlePageItem/Item.jsx
diff --git a/src/components/Item/SpacerItem/Item.js b/src/components/Item/SpacerItem/Item.jsx
similarity index 94%
rename from src/components/Item/SpacerItem/Item.js
rename to src/components/Item/SpacerItem/Item.jsx
index 456c05448..4e1fc135f 100644
--- a/src/components/Item/SpacerItem/Item.js
+++ b/src/components/Item/SpacerItem/Item.jsx
@@ -2,7 +2,7 @@ import i18n from '@dhis2/d2-i18n'
 import { colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
 
 const style = {
     margin: '21px 28px',
diff --git a/src/components/Item/TextItem/Item.js b/src/components/Item/TextItem/Item.jsx
similarity index 96%
rename from src/components/Item/TextItem/Item.js
rename to src/components/Item/TextItem/Item.jsx
index 1668c274f..360e2ebd1 100644
--- a/src/components/Item/TextItem/Item.js
+++ b/src/components/Item/TextItem/Item.jsx
@@ -12,8 +12,8 @@ import {
     sGetPrintDashboardItems,
 } from '../../../reducers/printDashboard.js'
 import { sGetSelectedDashboardItems } from '../../../reducers/selected.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
-import PrintItemInfo from '../ItemHeader/PrintItemInfo.js'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
+import PrintItemInfo from '../ItemHeader/PrintItemInfo.jsx'
 
 const style = {
     textDiv: {
diff --git a/src/components/Item/VisualizationItem/FatalErrorBoundary.js b/src/components/Item/VisualizationItem/FatalErrorBoundary.jsx
similarity index 96%
rename from src/components/Item/VisualizationItem/FatalErrorBoundary.js
rename to src/components/Item/VisualizationItem/FatalErrorBoundary.jsx
index 463a336ee..4f49ffaa7 100644
--- a/src/components/Item/VisualizationItem/FatalErrorBoundary.js
+++ b/src/components/Item/VisualizationItem/FatalErrorBoundary.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
-import { Warning } from './assets/icons.js'
+import { Warning } from './assets/icons.jsx'
 import classes from './styles/FatalErrorBoundary.module.css'
 
 class FatalErrorBoundary extends React.Component {
diff --git a/src/components/Item/VisualizationItem/InterpretationReplyForm.js b/src/components/Item/VisualizationItem/InterpretationReplyForm.jsx
similarity index 100%
rename from src/components/Item/VisualizationItem/InterpretationReplyForm.js
rename to src/components/Item/VisualizationItem/InterpretationReplyForm.jsx
diff --git a/src/components/Item/VisualizationItem/Item.js b/src/components/Item/VisualizationItem/Item.jsx
similarity index 98%
rename from src/components/Item/VisualizationItem/Item.js
rename to src/components/Item/VisualizationItem/Item.jsx
index 93b09b14b..70e462b75 100644
--- a/src/components/Item/VisualizationItem/Item.js
+++ b/src/components/Item/VisualizationItem/Item.jsx
@@ -36,17 +36,17 @@ import {
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters.js'
 import { sGetVisualization } from '../../../reducers/visualizations.js'
-import { SystemSettingsCtx } from '../../SystemSettingsProvider.js'
-import { WindowDimensionsCtx } from '../../WindowDimensionsProvider.js'
-import ItemHeader from '../ItemHeader/ItemHeader.js'
-import FatalErrorBoundary from './FatalErrorBoundary.js'
+import { SystemSettingsCtx } from '../../SystemSettingsProvider.jsx'
+import { WindowDimensionsCtx } from '../../WindowDimensionsProvider.jsx'
+import ItemHeader from '../ItemHeader/ItemHeader.jsx'
+import FatalErrorBoundary from './FatalErrorBoundary.jsx'
 import { getGridItemElement } from './getGridItemElement.js'
 import { isElementFullscreen } from './isElementFullscreen.js'
-import ItemContextMenu from './ItemContextMenu/ItemContextMenu.js'
-import ItemFooter from './ItemFooter.js'
+import ItemContextMenu from './ItemContextMenu/ItemContextMenu.jsx'
+import ItemFooter from './ItemFooter.jsx'
 import memoizeOne from './memoizeOne.js'
 import { pluginIsAvailable } from './Visualization/plugin.js'
-import Visualization from './Visualization/Visualization.js'
+import Visualization from './Visualization/Visualization.jsx'
 
 class Item extends Component {
     state = {
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.jsx
similarity index 98%
rename from src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js
rename to src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.jsx
index 44372943f..c225617ab 100644
--- a/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js
+++ b/src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.jsx
@@ -28,11 +28,11 @@ import {
     EVENT_VISUALIZATION,
 } from '../../../../modules/itemTypes.js'
 import { isSmallScreen } from '../../../../modules/smallScreen.js'
-import MenuItem from '../../../MenuItemWithTooltip.js'
-import { useSystemSettings } from '../../../SystemSettingsProvider.js'
-import { useWindowDimensions } from '../../../WindowDimensionsProvider.js'
+import MenuItem from '../../../MenuItemWithTooltip.jsx'
+import { useSystemSettings } from '../../../SystemSettingsProvider.jsx'
+import { useWindowDimensions } from '../../../WindowDimensionsProvider.jsx'
 import { isElementFullscreen } from '../isElementFullscreen.js'
-import ViewAsMenuItems from './ViewAsMenuItems.js'
+import ViewAsMenuItems from './ViewAsMenuItems.jsx'
 
 const ItemContextMenu = (props) => {
     const [menuIsOpen, setMenuIsOpen] = useState(false)
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js b/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.jsx
similarity index 98%
rename from src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js
rename to src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.jsx
index 79c582ff4..37059ddff 100644
--- a/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.js
+++ b/src/components/Item/VisualizationItem/ItemContextMenu/ViewAsMenuItems.jsx
@@ -13,7 +13,7 @@ import {
     isTrackerDomainType,
     hasMapView,
 } from '../../../../modules/itemTypes.js'
-import MenuItem from '../../../MenuItemWithTooltip.js'
+import MenuItem from '../../../MenuItemWithTooltip.jsx'
 import getThematicMapViews from '../getThematicMapViews.js'
 
 const ViewAsMenuItems = ({
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.jsx
similarity index 99%
rename from src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js
rename to src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.jsx
index e1891d484..8623f317d 100644
--- a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js
+++ b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.jsx
@@ -2,9 +2,9 @@ import { fireEvent } from '@testing-library/dom'
 import { render, waitFor, screen } from '@testing-library/react'
 import React from 'react'
 import { getGridItemDomElementClassName } from '../../../../../modules/getGridItemDomElementClassName.js'
-import { useSystemSettings } from '../../../../SystemSettingsProvider.js'
-import WindowDimensionsProvider from '../../../../WindowDimensionsProvider.js'
-import ItemContextMenu from '../ItemContextMenu.js'
+import { useSystemSettings } from '../../../../SystemSettingsProvider.jsx'
+import WindowDimensionsProvider from '../../../../WindowDimensionsProvider.jsx'
+import ItemContextMenu from '../ItemContextMenu.jsx'
 
 jest.mock('../../../../SystemSettingsProvider', () => {
     return {
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.jsx
similarity index 99%
rename from src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js
rename to src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.jsx
index 185b54be8..5796e8400 100644
--- a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js
+++ b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.jsx
@@ -2,9 +2,9 @@ import { fireEvent } from '@testing-library/dom'
 import { render, waitFor, screen } from '@testing-library/react'
 import React from 'react'
 import { getGridItemDomElementClassName } from '../../../../../modules/getGridItemDomElementClassName.js'
-import { useSystemSettings } from '../../../../SystemSettingsProvider.js'
-import WindowDimensionsProvider from '../../../../WindowDimensionsProvider.js'
-import ItemContextMenu from '../ItemContextMenu.js'
+import { useSystemSettings } from '../../../../SystemSettingsProvider.jsx'
+import WindowDimensionsProvider from '../../../../WindowDimensionsProvider.jsx'
+import ItemContextMenu from '../ItemContextMenu.jsx'
 
 jest.mock('../../../../SystemSettingsProvider', () => {
     return {
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.jsx
similarity index 99%
rename from src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js
rename to src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.jsx
index 65ba5da27..70e5e9c37 100644
--- a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.js
+++ b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ViewAsMenuItems.spec.jsx
@@ -8,7 +8,7 @@ import {
     EVENT_REPORT,
     EVENT_CHART,
 } from '../../../../../modules/itemTypes.js'
-import ViewAsMenuItems from '../ViewAsMenuItems.js'
+import ViewAsMenuItems from '../ViewAsMenuItems.jsx'
 
 jest.mock('@dhis2/app-runtime', () => ({
     useDhis2ConnectionStatus: jest.fn(() => ({
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.offline.spec.js.snap b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.offline.spec.jsx.snap
similarity index 100%
rename from src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.offline.spec.js.snap
rename to src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.offline.spec.jsx.snap
diff --git a/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.spec.js.snap b/src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.spec.jsx.snap
similarity index 100%
rename from src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.spec.js.snap
rename to src/components/Item/VisualizationItem/ItemContextMenu/__tests__/__snapshots__/ItemContextMenu.spec.jsx.snap
diff --git a/src/components/Item/VisualizationItem/ItemFooter.js b/src/components/Item/VisualizationItem/ItemFooter.jsx
similarity index 97%
rename from src/components/Item/VisualizationItem/ItemFooter.js
rename to src/components/Item/VisualizationItem/ItemFooter.jsx
index 2699884a9..b913a9f24 100644
--- a/src/components/Item/VisualizationItem/ItemFooter.js
+++ b/src/components/Item/VisualizationItem/ItemFooter.jsx
@@ -9,8 +9,8 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { getVisualizationId } from '../../../modules/item.js'
 import { getItemUrl, itemTypeMap } from '../../../modules/itemTypes.js'
-import FatalErrorBoundary from './FatalErrorBoundary.js'
-import { InterpretationReplyForm } from './InterpretationReplyForm.js'
+import FatalErrorBoundary from './FatalErrorBoundary.jsx'
+import { InterpretationReplyForm } from './InterpretationReplyForm.jsx'
 import classes from './styles/ItemFooter.module.css'
 
 const ItemFooter = ({ item }) => {
diff --git a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js b/src/components/Item/VisualizationItem/Visualization/IframePlugin.jsx
similarity index 99%
rename from src/components/Item/VisualizationItem/Visualization/IframePlugin.js
rename to src/components/Item/VisualizationItem/Visualization/IframePlugin.jsx
index f32d90767..7d2ad1ae7 100644
--- a/src/components/Item/VisualizationItem/Visualization/IframePlugin.js
+++ b/src/components/Item/VisualizationItem/Visualization/IframePlugin.jsx
@@ -20,11 +20,11 @@ import {
     INSTALLATION_STATUS_WILL_NOT_INSTALL,
     sGetIframePluginStatus,
 } from '../../../../reducers/iframePluginStatus.js'
-import { useUserSettings } from '../../../UserSettingsProvider.js'
-import MissingPluginMessage from './MissingPluginMessage.js'
+import { useUserSettings } from '../../../UserSettingsProvider.jsx'
+import MissingPluginMessage from './MissingPluginMessage.jsx'
 import { getPluginLaunchUrl } from './plugin.js'
 import classes from './styles/IframePlugin.module.css'
-import VisualizationErrorMessage from './VisualizationErrorMessage.js'
+import VisualizationErrorMessage from './VisualizationErrorMessage.jsx'
 
 const IframePlugin = ({
     activeType,
diff --git a/src/components/Item/VisualizationItem/Visualization/LegacyPlugin.js b/src/components/Item/VisualizationItem/Visualization/LegacyPlugin.jsx
similarity index 100%
rename from src/components/Item/VisualizationItem/Visualization/LegacyPlugin.js
rename to src/components/Item/VisualizationItem/Visualization/LegacyPlugin.jsx
diff --git a/src/components/Item/VisualizationItem/Visualization/LoadingMask.js b/src/components/Item/VisualizationItem/Visualization/LoadingMask.jsx
similarity index 100%
rename from src/components/Item/VisualizationItem/Visualization/LoadingMask.js
rename to src/components/Item/VisualizationItem/Visualization/LoadingMask.jsx
diff --git a/src/components/Item/VisualizationItem/Visualization/MissingPluginMessage.js b/src/components/Item/VisualizationItem/Visualization/MissingPluginMessage.jsx
similarity index 100%
rename from src/components/Item/VisualizationItem/Visualization/MissingPluginMessage.js
rename to src/components/Item/VisualizationItem/Visualization/MissingPluginMessage.jsx
diff --git a/src/components/Item/VisualizationItem/Visualization/Visualization.js b/src/components/Item/VisualizationItem/Visualization/Visualization.jsx
similarity index 98%
rename from src/components/Item/VisualizationItem/Visualization/Visualization.js
rename to src/components/Item/VisualizationItem/Visualization/Visualization.jsx
index 33e5a6fb7..aa251acfe 100644
--- a/src/components/Item/VisualizationItem/Visualization/Visualization.js
+++ b/src/components/Item/VisualizationItem/Visualization/Visualization.jsx
@@ -20,8 +20,8 @@ import {
 import { sGetSelectedId } from '../../../../reducers/selected.js'
 import getFilteredVisualization from './getFilteredVisualization.js'
 import getVisualizationConfig from './getVisualizationConfig.js'
-import IframePlugin from './IframePlugin.js'
-import LegacyPlugin from './LegacyPlugin.js'
+import IframePlugin from './IframePlugin.jsx'
+import LegacyPlugin from './LegacyPlugin.jsx'
 import { pluginIsAvailable } from './plugin.js'
 import classes from './styles/Visualization.module.css'
 
diff --git a/src/components/Item/VisualizationItem/Visualization/VisualizationErrorMessage.js b/src/components/Item/VisualizationItem/Visualization/VisualizationErrorMessage.jsx
similarity index 100%
rename from src/components/Item/VisualizationItem/Visualization/VisualizationErrorMessage.js
rename to src/components/Item/VisualizationItem/Visualization/VisualizationErrorMessage.jsx
diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js b/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.jsx
similarity index 98%
rename from src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
rename to src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.jsx
index 9bf07295a..819308986 100644
--- a/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.js
+++ b/src/components/Item/VisualizationItem/Visualization/__tests__/Visualization.spec.jsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import Visualization from '../Visualization.js'
+import Visualization from '../Visualization.jsx'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({
diff --git a/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap b/src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.jsx.snap
similarity index 100%
rename from src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.js.snap
rename to src/components/Item/VisualizationItem/Visualization/__tests__/__snapshots__/Visualization.spec.jsx.snap
diff --git a/src/components/Item/VisualizationItem/__tests__/Item.spec.js b/src/components/Item/VisualizationItem/__tests__/Item.spec.jsx
similarity index 98%
rename from src/components/Item/VisualizationItem/__tests__/Item.spec.js
rename to src/components/Item/VisualizationItem/__tests__/Item.spec.jsx
index c5f22f4ce..05e17e9aa 100644
--- a/src/components/Item/VisualizationItem/__tests__/Item.spec.js
+++ b/src/components/Item/VisualizationItem/__tests__/Item.spec.jsx
@@ -4,9 +4,9 @@ import { act } from 'react-dom/test-utils.js'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
 import { apiFetchVisualization } from '../../../../api/fetchVisualization.js'
-import SystemSettingsProvider from '../../../SystemSettingsProvider.js'
-import WindowDimensionsProvider from '../../../WindowDimensionsProvider.js'
-import Item from '../Item.js'
+import SystemSettingsProvider from '../../../SystemSettingsProvider.jsx'
+import WindowDimensionsProvider from '../../../WindowDimensionsProvider.jsx'
+import Item from '../Item.jsx'
 
 jest.mock('../../../../api/fetchVisualization')
 jest.mock('../../../SystemSettingsProvider')
diff --git a/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap b/src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.jsx.snap
similarity index 100%
rename from src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.js.snap
rename to src/components/Item/VisualizationItem/__tests__/__snapshots__/Item.spec.jsx.snap
diff --git a/src/components/Item/VisualizationItem/assets/icons.js b/src/components/Item/VisualizationItem/assets/icons.jsx
similarity index 100%
rename from src/components/Item/VisualizationItem/assets/icons.js
rename to src/components/Item/VisualizationItem/assets/icons.jsx
diff --git a/src/components/LoadingMask.js b/src/components/LoadingMask.jsx
similarity index 100%
rename from src/components/LoadingMask.js
rename to src/components/LoadingMask.jsx
diff --git a/src/components/MenuItemWithTooltip.js b/src/components/MenuItemWithTooltip.jsx
similarity index 100%
rename from src/components/MenuItemWithTooltip.js
rename to src/components/MenuItemWithTooltip.jsx
diff --git a/src/components/NoContentMessage.js b/src/components/NoContentMessage.jsx
similarity index 100%
rename from src/components/NoContentMessage.js
rename to src/components/NoContentMessage.jsx
diff --git a/src/components/Notice.js b/src/components/Notice.jsx
similarity index 100%
rename from src/components/Notice.js
rename to src/components/Notice.jsx
diff --git a/src/components/ProgressiveLoadingContainer.js b/src/components/ProgressiveLoadingContainer.jsx
similarity index 100%
rename from src/components/ProgressiveLoadingContainer.js
rename to src/components/ProgressiveLoadingContainer.jsx
diff --git a/src/components/SystemSettingsProvider.js b/src/components/SystemSettingsProvider.jsx
similarity index 100%
rename from src/components/SystemSettingsProvider.js
rename to src/components/SystemSettingsProvider.jsx
diff --git a/src/components/UserSettingsProvider.js b/src/components/UserSettingsProvider.jsx
similarity index 100%
rename from src/components/UserSettingsProvider.js
rename to src/components/UserSettingsProvider.jsx
diff --git a/src/components/WindowDimensionsProvider.js b/src/components/WindowDimensionsProvider.jsx
similarity index 100%
rename from src/components/WindowDimensionsProvider.js
rename to src/components/WindowDimensionsProvider.jsx
diff --git a/src/components/__mocks__/SystemSettingsProvider.js b/src/components/__mocks__/SystemSettingsProvider.jsx
similarity index 100%
rename from src/components/__mocks__/SystemSettingsProvider.js
rename to src/components/__mocks__/SystemSettingsProvider.jsx
diff --git a/src/components/__tests__/App.spec.js b/src/components/__tests__/App.spec.jsx
similarity index 97%
rename from src/components/__tests__/App.spec.js
rename to src/components/__tests__/App.spec.jsx
index 2850169f8..9124505fb 100644
--- a/src/components/__tests__/App.spec.js
+++ b/src/components/__tests__/App.spec.jsx
@@ -5,8 +5,8 @@ import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 import { apiFetchDashboards } from '../../api/fetchAllDashboards.js'
-import App from '../App.js'
-import { useSystemSettings } from '../SystemSettingsProvider.js'
+import App from '../App.jsx'
+import { useSystemSettings } from '../SystemSettingsProvider.jsx'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({
diff --git a/src/components/__tests__/ConfirmActionDialog.spec.js b/src/components/__tests__/ConfirmActionDialog.spec.jsx
similarity index 97%
rename from src/components/__tests__/ConfirmActionDialog.spec.js
rename to src/components/__tests__/ConfirmActionDialog.spec.jsx
index b8d197aba..6cc1032a3 100644
--- a/src/components/__tests__/ConfirmActionDialog.spec.js
+++ b/src/components/__tests__/ConfirmActionDialog.spec.jsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import React from 'react'
-import ConfirmActionDialog from '../ConfirmActionDialog.js'
+import ConfirmActionDialog from '../ConfirmActionDialog.jsx'
 
 /* eslint-disable react/prop-types */
 jest.mock('@dhis2/ui', () => {
diff --git a/src/components/__tests__/__snapshots__/App.spec.js.snap b/src/components/__tests__/__snapshots__/App.spec.jsx.snap
similarity index 100%
rename from src/components/__tests__/__snapshots__/App.spec.js.snap
rename to src/components/__tests__/__snapshots__/App.spec.jsx.snap
diff --git a/src/components/__tests__/__snapshots__/ConfirmActionDialog.spec.js.snap b/src/components/__tests__/__snapshots__/ConfirmActionDialog.spec.jsx.snap
similarity index 100%
rename from src/components/__tests__/__snapshots__/ConfirmActionDialog.spec.js.snap
rename to src/components/__tests__/__snapshots__/ConfirmActionDialog.spec.jsx.snap
diff --git a/src/modules/useDimensions.js b/src/modules/useDimensions.js
index 53de07779..481121be3 100644
--- a/src/modules/useDimensions.js
+++ b/src/modules/useDimensions.js
@@ -3,7 +3,7 @@ import { useDataEngine } from '@dhis2/app-runtime'
 import { useEffect } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { acSetDimensions } from '../actions/dimensions.js'
-import { useUserSettings } from '../components/UserSettingsProvider.js'
+import { useUserSettings } from '../components/UserSettingsProvider.jsx'
 import getFilteredDimensions from './getFilteredDimensions.js'
 
 const useDimensions = (doFetch) => {
diff --git a/src/pages/edit/ActionsBar.js b/src/pages/edit/ActionsBar.jsx
similarity index 99%
rename from src/pages/edit/ActionsBar.js
rename to src/pages/edit/ActionsBar.jsx
index 2bb24d3b6..5be15dd81 100644
--- a/src/pages/edit/ActionsBar.js
+++ b/src/pages/edit/ActionsBar.jsx
@@ -20,7 +20,7 @@ import {
 } from '../../actions/editDashboard.js'
 import { acClearPrintDashboard } from '../../actions/printDashboard.js'
 import { acClearSelected } from '../../actions/selected.js'
-import ConfirmActionDialog from '../../components/ConfirmActionDialog.js'
+import ConfirmActionDialog from '../../components/ConfirmActionDialog.jsx'
 import {
     sGetEditDashboardRoot,
     sGetIsPrintPreviewView,
@@ -28,7 +28,7 @@ import {
     sGetLayoutColumns,
 } from '../../reducers/editDashboard.js'
 import { deleteDashboardMutation } from './deleteDashboardMutation.js'
-import FilterSettingsDialog from './FilterSettingsDialog.js'
+import FilterSettingsDialog from './FilterSettingsDialog.jsx'
 import classes from './styles/ActionsBar.module.css'
 
 const saveFailedMessage = i18n.t(
diff --git a/src/pages/edit/EditDashboard.js b/src/pages/edit/EditDashboard.jsx
similarity index 95%
rename from src/pages/edit/EditDashboard.js
rename to src/pages/edit/EditDashboard.jsx
index 7fbc39c3e..f75d56700 100644
--- a/src/pages/edit/EditDashboard.js
+++ b/src/pages/edit/EditDashboard.jsx
@@ -8,19 +8,19 @@ import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 import { acSetEditDashboard } from '../../actions/editDashboard.js'
 import { apiFetchDashboard } from '../../api/fetchDashboard.js'
-import DashboardContainer from '../../components/DashboardContainer.js'
-import NoContentMessage from '../../components/NoContentMessage.js'
-import Notice from '../../components/Notice.js'
-import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js'
+import DashboardContainer from '../../components/DashboardContainer.jsx'
+import NoContentMessage from '../../components/NoContentMessage.jsx'
+import Notice from '../../components/Notice.jsx'
+import { useWindowDimensions } from '../../components/WindowDimensionsProvider.jsx'
 import { EDIT } from '../../modules/dashboardModes.js'
 import { setHeaderbarVisible } from '../../modules/setHeaderbarVisible.js'
 import { isSmallScreen } from '../../modules/smallScreen.js'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard.js'
-import LayoutPrintPreview from '../print/PrintLayoutDashboard.js'
-import ActionsBar from './ActionsBar.js'
-import ItemGrid from './ItemGrid.js'
+import LayoutPrintPreview from '../print/PrintLayoutDashboard.jsx'
+import ActionsBar from './ActionsBar.jsx'
+import ItemGrid from './ItemGrid.jsx'
 import classes from './styles/EditDashboard.module.css'
-import TitleBar from './TitleBar.js'
+import TitleBar from './TitleBar.jsx'
 
 const EditDashboard = (props) => {
     const dataEngine = useDataEngine()
diff --git a/src/pages/edit/FilterSettingsDialog.js b/src/pages/edit/FilterSettingsDialog.jsx
similarity index 100%
rename from src/pages/edit/FilterSettingsDialog.js
rename to src/pages/edit/FilterSettingsDialog.jsx
diff --git a/src/pages/edit/ItemGrid.js b/src/pages/edit/ItemGrid.jsx
similarity index 97%
rename from src/pages/edit/ItemGrid.js
rename to src/pages/edit/ItemGrid.jsx
index 2e503d04a..d1af99085 100644
--- a/src/pages/edit/ItemGrid.js
+++ b/src/pages/edit/ItemGrid.jsx
@@ -5,10 +5,10 @@ import React, { useState } from 'react'
 import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 import { connect } from 'react-redux'
 import { acUpdateDashboardItemShapes } from '../../actions/editDashboard.js'
-import { Item } from '../../components/Item/Item.js'
-import NoContentMessage from '../../components/NoContentMessage.js'
-import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.js'
-import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js'
+import { Item } from '../../components/Item/Item.jsx'
+import NoContentMessage from '../../components/NoContentMessage.jsx'
+import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.jsx'
+import { useWindowDimensions } from '../../components/WindowDimensionsProvider.jsx'
 import { EDIT } from '../../modules/dashboardModes.js'
 import { getFirstOfTypes } from '../../modules/getFirstOfType.js'
 import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
diff --git a/src/pages/edit/ItemSelector/CategorizedMenuGroup.js b/src/pages/edit/ItemSelector/CategorizedMenuGroup.jsx
similarity index 96%
rename from src/pages/edit/ItemSelector/CategorizedMenuGroup.js
rename to src/pages/edit/ItemSelector/CategorizedMenuGroup.jsx
index cedd085f6..89e9836dd 100644
--- a/src/pages/edit/ItemSelector/CategorizedMenuGroup.js
+++ b/src/pages/edit/ItemSelector/CategorizedMenuGroup.jsx
@@ -7,8 +7,8 @@ import { connect } from 'react-redux'
 import { tSetDashboardItems } from '../../../actions/editDashboard.js'
 import { getItemUrl, APP, VISUALIZATION } from '../../../modules/itemTypes.js'
 import { tAddListItemContent } from './actions.js'
-import ContentMenuItem from './ContentMenuItem.js'
-import HeaderMenuItem from './HeaderMenuItem.js'
+import ContentMenuItem from './ContentMenuItem.jsx'
+import HeaderMenuItem from './HeaderMenuItem.jsx'
 import { categorizedItems, listItemTypes } from './selectableItems.js'
 import classes from './styles/CategorizedMenuGroup.module.css'
 
diff --git a/src/pages/edit/ItemSelector/ContentMenuItem.js b/src/pages/edit/ItemSelector/ContentMenuItem.jsx
similarity index 100%
rename from src/pages/edit/ItemSelector/ContentMenuItem.js
rename to src/pages/edit/ItemSelector/ContentMenuItem.jsx
diff --git a/src/pages/edit/ItemSelector/HeaderMenuItem.js b/src/pages/edit/ItemSelector/HeaderMenuItem.jsx
similarity index 100%
rename from src/pages/edit/ItemSelector/HeaderMenuItem.js
rename to src/pages/edit/ItemSelector/HeaderMenuItem.jsx
diff --git a/src/pages/edit/ItemSelector/ItemSearchField.js b/src/pages/edit/ItemSelector/ItemSearchField.jsx
similarity index 100%
rename from src/pages/edit/ItemSelector/ItemSearchField.js
rename to src/pages/edit/ItemSelector/ItemSearchField.jsx
diff --git a/src/pages/edit/ItemSelector/ItemSelector.js b/src/pages/edit/ItemSelector/ItemSelector.jsx
similarity index 96%
rename from src/pages/edit/ItemSelector/ItemSelector.js
rename to src/pages/edit/ItemSelector/ItemSelector.jsx
index 5b104b887..489155e85 100644
--- a/src/pages/edit/ItemSelector/ItemSelector.js
+++ b/src/pages/edit/ItemSelector/ItemSelector.jsx
@@ -3,10 +3,10 @@ import { Layer, Popper, FlyoutMenu } from '@dhis2/ui'
 import React, { useState, useEffect, createRef } from 'react'
 import { itemTypeMap, getDefaultItemCount } from '../../../modules/itemTypes.js'
 import useDebounce from '../../../modules/useDebounce.js'
-import CategorizedMenuGroup from './CategorizedMenuGroup.js'
-import ItemSearchField from './ItemSearchField.js'
+import CategorizedMenuGroup from './CategorizedMenuGroup.jsx'
+import ItemSearchField from './ItemSearchField.jsx'
 import { singleItems, categorizedItems } from './selectableItems.js'
-import SinglesMenuGroup from './SinglesMenuGroup.js'
+import SinglesMenuGroup from './SinglesMenuGroup.jsx'
 import classes from './styles/ItemSelector.module.css'
 
 const dashboardSearchQuery = {
diff --git a/src/pages/edit/ItemSelector/SinglesMenuGroup.js b/src/pages/edit/ItemSelector/SinglesMenuGroup.jsx
similarity index 90%
rename from src/pages/edit/ItemSelector/SinglesMenuGroup.js
rename to src/pages/edit/ItemSelector/SinglesMenuGroup.jsx
index 3286557f9..a658962cf 100644
--- a/src/pages/edit/ItemSelector/SinglesMenuGroup.js
+++ b/src/pages/edit/ItemSelector/SinglesMenuGroup.jsx
@@ -2,8 +2,8 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
 import { tSetDashboardItems } from '../../../actions/editDashboard.js'
-import ContentMenuItem from './ContentMenuItem.js'
-import HeaderMenuItem from './HeaderMenuItem.js'
+import ContentMenuItem from './ContentMenuItem.jsx'
+import HeaderMenuItem from './HeaderMenuItem.jsx'
 
 const SinglesMenuGroup = ({ onAddItem, category }) => {
     const addToDashboard =
diff --git a/src/pages/edit/ItemSelector/__tests__/ContentMenuItem.spec.js b/src/pages/edit/ItemSelector/__tests__/ContentMenuItem.spec.jsx
similarity index 94%
rename from src/pages/edit/ItemSelector/__tests__/ContentMenuItem.spec.js
rename to src/pages/edit/ItemSelector/__tests__/ContentMenuItem.spec.jsx
index 0e393b5c2..28e6e4d57 100644
--- a/src/pages/edit/ItemSelector/__tests__/ContentMenuItem.spec.js
+++ b/src/pages/edit/ItemSelector/__tests__/ContentMenuItem.spec.jsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import React from 'react'
-import ContentMenuItem from '../ContentMenuItem.js'
+import ContentMenuItem from '../ContentMenuItem.jsx'
 
 test('ContentMenuItem has a LaunchLink when url is provided', () => {
     const props = {
diff --git a/src/pages/edit/ItemSelector/__tests__/SinglesMenuGroup.spec.js b/src/pages/edit/ItemSelector/__tests__/SinglesMenuGroup.spec.jsx
similarity index 95%
rename from src/pages/edit/ItemSelector/__tests__/SinglesMenuGroup.spec.js
rename to src/pages/edit/ItemSelector/__tests__/SinglesMenuGroup.spec.jsx
index 887bcc490..a6848b291 100644
--- a/src/pages/edit/ItemSelector/__tests__/SinglesMenuGroup.spec.js
+++ b/src/pages/edit/ItemSelector/__tests__/SinglesMenuGroup.spec.jsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import SinglesMenuGroup from '../SinglesMenuGroup.js'
+import SinglesMenuGroup from '../SinglesMenuGroup.jsx'
 
 const mockStore = configureMockStore()
 
diff --git a/src/pages/edit/LayoutModal.js b/src/pages/edit/LayoutModal.jsx
similarity index 98%
rename from src/pages/edit/LayoutModal.js
rename to src/pages/edit/LayoutModal.jsx
index 435eca9c3..d928c393e 100644
--- a/src/pages/edit/LayoutModal.js
+++ b/src/pages/edit/LayoutModal.jsx
@@ -15,8 +15,8 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import { GRID_COLUMNS } from '../../modules/gridUtil.js'
-import { LayoutFixedIcon } from './assets/LayoutFixed.js'
-import { LayoutFreeflowIcon } from './assets/LayoutFreeflow.js'
+import { LayoutFixedIcon } from './assets/LayoutFixed.jsx'
+import { LayoutFreeflowIcon } from './assets/LayoutFreeflow.jsx'
 import classes from './styles/LayoutModal.module.css'
 
 const DEFAULT_COLUMNS = 3
diff --git a/src/pages/edit/NewDashboard.js b/src/pages/edit/NewDashboard.jsx
similarity index 92%
rename from src/pages/edit/NewDashboard.js
rename to src/pages/edit/NewDashboard.jsx
index b3f2eff0e..2990c665e 100644
--- a/src/pages/edit/NewDashboard.js
+++ b/src/pages/edit/NewDashboard.jsx
@@ -6,17 +6,17 @@ import { connect, useDispatch } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 import { acSetEditNewDashboard } from '../../actions/editDashboard.js'
 import { acClearSelected } from '../../actions/selected.js'
-import DashboardContainer from '../../components/DashboardContainer.js'
-import Notice from '../../components/Notice.js'
-import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js'
+import DashboardContainer from '../../components/DashboardContainer.jsx'
+import Notice from '../../components/Notice.jsx'
+import { useWindowDimensions } from '../../components/WindowDimensionsProvider.jsx'
 import { setHeaderbarVisible } from '../../modules/setHeaderbarVisible.js'
 import { isSmallScreen } from '../../modules/smallScreen.js'
 import { sGetIsPrintPreviewView } from '../../reducers/editDashboard.js'
-import LayoutPrintPreview from '../print/PrintLayoutDashboard.js'
-import ActionsBar from './ActionsBar.js'
-import ItemGrid from './ItemGrid.js'
+import LayoutPrintPreview from '../print/PrintLayoutDashboard.jsx'
+import ActionsBar from './ActionsBar.jsx'
+import ItemGrid from './ItemGrid.jsx'
 import classes from './styles/NewDashboard.module.css'
-import TitleBar from './TitleBar.js'
+import TitleBar from './TitleBar.jsx'
 
 const NewDashboard = (props) => {
     const dispatch = useDispatch()
diff --git a/src/pages/edit/TitleBar.js b/src/pages/edit/TitleBar.jsx
similarity index 97%
rename from src/pages/edit/TitleBar.js
rename to src/pages/edit/TitleBar.jsx
index bb9df0a4a..27bbb96a1 100644
--- a/src/pages/edit/TitleBar.js
+++ b/src/pages/edit/TitleBar.jsx
@@ -19,10 +19,10 @@ import {
     sGetItemConfigInsertPosition,
     sGetLayoutColumns,
 } from '../../reducers/editDashboard.js'
-import { LayoutFixedIcon } from './assets/LayoutFixed.js'
-import { LayoutFreeflowIcon } from './assets/LayoutFreeflow.js'
-import ItemSelector from './ItemSelector/ItemSelector.js'
-import { LayoutModal } from './LayoutModal.js'
+import { LayoutFixedIcon } from './assets/LayoutFixed.jsx'
+import { LayoutFreeflowIcon } from './assets/LayoutFreeflow.jsx'
+import ItemSelector from './ItemSelector/ItemSelector.jsx'
+import { LayoutModal } from './LayoutModal.jsx'
 import classes from './styles/TitleBar.module.css'
 
 const EditTitleBar = ({
diff --git a/src/pages/edit/__tests__/ActionsBar.spec.js b/src/pages/edit/__tests__/ActionsBar.spec.jsx
similarity index 98%
rename from src/pages/edit/__tests__/ActionsBar.spec.js
rename to src/pages/edit/__tests__/ActionsBar.spec.jsx
index b3332f910..da9ee930f 100644
--- a/src/pages/edit/__tests__/ActionsBar.spec.js
+++ b/src/pages/edit/__tests__/ActionsBar.spec.jsx
@@ -3,7 +3,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
 import { DEFAULT_STATE_EDIT_DASHBOARD } from '../../../reducers/editDashboard.js'
-import ActionsBar from '../ActionsBar.js'
+import ActionsBar from '../ActionsBar.jsx'
 
 const mockStore = configureMockStore()
 
diff --git a/src/pages/edit/__tests__/EditDashboard.spec.js b/src/pages/edit/__tests__/EditDashboard.spec.jsx
similarity index 98%
rename from src/pages/edit/__tests__/EditDashboard.spec.js
rename to src/pages/edit/__tests__/EditDashboard.spec.jsx
index c46822bb0..9613488e4 100644
--- a/src/pages/edit/__tests__/EditDashboard.spec.js
+++ b/src/pages/edit/__tests__/EditDashboard.spec.jsx
@@ -6,8 +6,8 @@ import { Provider } from 'react-redux'
 import { Router, Route } from 'react-router-dom'
 import configureMockStore from 'redux-mock-store'
 import { apiFetchDashboard } from '../../../api/fetchDashboard.js'
-import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.js'
-import EditDashboard from '../EditDashboard.js'
+import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.jsx'
+import EditDashboard from '../EditDashboard.jsx'
 
 jest.mock('../../../api/fetchDashboard')
 
diff --git a/src/pages/edit/__tests__/FilterSettingsDialog.spec.js b/src/pages/edit/__tests__/FilterSettingsDialog.spec.jsx
similarity index 97%
rename from src/pages/edit/__tests__/FilterSettingsDialog.spec.js
rename to src/pages/edit/__tests__/FilterSettingsDialog.spec.jsx
index bceed96fd..1ce7fabb5 100644
--- a/src/pages/edit/__tests__/FilterSettingsDialog.spec.js
+++ b/src/pages/edit/__tests__/FilterSettingsDialog.spec.jsx
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 import React from 'react'
-import FilterSettingsDialog from '../FilterSettingsDialog.js'
+import FilterSettingsDialog from '../FilterSettingsDialog.jsx'
 
 jest.mock('@dhis2/app-runtime', () => ({
     useDhis2ConnectionStatus: () => ({ isConnected: true }),
diff --git a/src/pages/edit/__tests__/NewDashboard.spec.js b/src/pages/edit/__tests__/NewDashboard.spec.jsx
similarity index 97%
rename from src/pages/edit/__tests__/NewDashboard.spec.js
rename to src/pages/edit/__tests__/NewDashboard.spec.jsx
index 56f3b8f3c..0afdda30b 100644
--- a/src/pages/edit/__tests__/NewDashboard.spec.js
+++ b/src/pages/edit/__tests__/NewDashboard.spec.jsx
@@ -2,8 +2,8 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.js'
-import NewDashboard from '../NewDashboard.js'
+import WindowDimensionsProvider from '../../../components/WindowDimensionsProvider.jsx'
+import NewDashboard from '../NewDashboard.jsx'
 
 /* eslint-disable react/prop-types */
 jest.mock('@dhis2/ui', () => {
diff --git a/src/pages/edit/__tests__/TitleBar.spec.js b/src/pages/edit/__tests__/TitleBar.spec.jsx
similarity index 98%
rename from src/pages/edit/__tests__/TitleBar.spec.js
rename to src/pages/edit/__tests__/TitleBar.spec.jsx
index 88d2d0bbd..441e6b9fc 100644
--- a/src/pages/edit/__tests__/TitleBar.spec.js
+++ b/src/pages/edit/__tests__/TitleBar.spec.jsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import TitleBar from '../TitleBar.js'
+import TitleBar from '../TitleBar.jsx'
 
 const mockStore = configureMockStore()
 
diff --git a/src/pages/edit/__tests__/__snapshots__/ActionsBar.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/ActionsBar.spec.jsx.snap
similarity index 100%
rename from src/pages/edit/__tests__/__snapshots__/ActionsBar.spec.js.snap
rename to src/pages/edit/__tests__/__snapshots__/ActionsBar.spec.jsx.snap
diff --git a/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.jsx.snap
similarity index 100%
rename from src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.js.snap
rename to src/pages/edit/__tests__/__snapshots__/EditDashboard.spec.jsx.snap
diff --git a/src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.jsx.snap
similarity index 100%
rename from src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.js.snap
rename to src/pages/edit/__tests__/__snapshots__/FilterSettingsDialog.spec.jsx.snap
diff --git a/src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.jsx.snap
similarity index 100%
rename from src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.js.snap
rename to src/pages/edit/__tests__/__snapshots__/NewDashboard.spec.jsx.snap
diff --git a/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap b/src/pages/edit/__tests__/__snapshots__/TitleBar.spec.jsx.snap
similarity index 100%
rename from src/pages/edit/__tests__/__snapshots__/TitleBar.spec.js.snap
rename to src/pages/edit/__tests__/__snapshots__/TitleBar.spec.jsx.snap
diff --git a/src/pages/edit/assets/LayoutFixed.js b/src/pages/edit/assets/LayoutFixed.jsx
similarity index 100%
rename from src/pages/edit/assets/LayoutFixed.js
rename to src/pages/edit/assets/LayoutFixed.jsx
diff --git a/src/pages/edit/assets/LayoutFreeflow.js b/src/pages/edit/assets/LayoutFreeflow.jsx
similarity index 100%
rename from src/pages/edit/assets/LayoutFreeflow.js
rename to src/pages/edit/assets/LayoutFreeflow.jsx
diff --git a/src/pages/edit/index.js b/src/pages/edit/index.js
index f37979326..c727f0bc4 100644
--- a/src/pages/edit/index.js
+++ b/src/pages/edit/index.js
@@ -1,4 +1,4 @@
-import EditDashboard from './EditDashboard.js'
-import NewDashboard from './NewDashboard.js'
+import EditDashboard from './EditDashboard.jsx'
+import NewDashboard from './NewDashboard.jsx'
 
 export { EditDashboard, NewDashboard }
diff --git a/src/pages/print/ActionsBar.js b/src/pages/print/ActionsBar.jsx
similarity index 100%
rename from src/pages/print/ActionsBar.js
rename to src/pages/print/ActionsBar.jsx
diff --git a/src/pages/print/Info.js b/src/pages/print/Info.jsx
similarity index 100%
rename from src/pages/print/Info.js
rename to src/pages/print/Info.jsx
diff --git a/src/pages/print/PrintDashboard.js b/src/pages/print/PrintDashboard.jsx
similarity index 97%
rename from src/pages/print/PrintDashboard.js
rename to src/pages/print/PrintDashboard.jsx
index 73dabab96..f15ecdd69 100644
--- a/src/pages/print/PrintDashboard.js
+++ b/src/pages/print/PrintDashboard.jsx
@@ -19,9 +19,9 @@ import {
 } from '../../modules/gridUtil.js'
 import { PAGEBREAK, PRINT_TITLE_PAGE, SPACER } from '../../modules/itemTypes.js'
 import { setHeaderbarVisible } from '../../modules/setHeaderbarVisible.js'
-import PrintActionsBar from './ActionsBar.js'
-import PrintInfo from './PrintInfo.js'
-import PrintItemGrid from './PrintItemGrid.js'
+import PrintActionsBar from './ActionsBar.jsx'
+import PrintInfo from './PrintInfo.jsx'
+import PrintItemGrid from './PrintItemGrid.jsx'
 import classes from './styles/PrintDashboard.module.css'
 
 import './styles/print.css'
diff --git a/src/pages/print/PrintInfo.js b/src/pages/print/PrintInfo.jsx
similarity index 100%
rename from src/pages/print/PrintInfo.js
rename to src/pages/print/PrintInfo.jsx
diff --git a/src/pages/print/PrintItemGrid.js b/src/pages/print/PrintItemGrid.jsx
similarity index 94%
rename from src/pages/print/PrintItemGrid.js
rename to src/pages/print/PrintItemGrid.jsx
index e60974d8a..4206c814b 100644
--- a/src/pages/print/PrintItemGrid.js
+++ b/src/pages/print/PrintItemGrid.jsx
@@ -2,14 +2,14 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { connect } from 'react-redux'
-import { Item } from '../../components/Item/Item.js'
+import { Item } from '../../components/Item/Item.jsx'
 import { PRINT } from '../../modules/dashboardModes.js'
 import { getFirstOfTypes } from '../../modules/getFirstOfType.js'
 import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
 import { hasShape } from '../../modules/gridUtil.js'
 import { orArray } from '../../modules/util.js'
 import { sGetPrintDashboardItems } from '../../reducers/printDashboard.js'
-import StaticGrid from './StaticGrid.js'
+import StaticGrid from './StaticGrid.jsx'
 
 const PrintItemGrid = ({ dashboardItems }) => {
     const firstOfTypes = getFirstOfTypes(dashboardItems)
diff --git a/src/pages/print/PrintLayoutDashboard.js b/src/pages/print/PrintLayoutDashboard.jsx
similarity index 96%
rename from src/pages/print/PrintLayoutDashboard.js
rename to src/pages/print/PrintLayoutDashboard.jsx
index 7624bd5e5..b55932c9a 100644
--- a/src/pages/print/PrintLayoutDashboard.js
+++ b/src/pages/print/PrintLayoutDashboard.jsx
@@ -16,9 +16,9 @@ import { MAX_ITEM_GRID_HEIGHT } from '../../modules/gridUtil.js'
 import { PAGEBREAK, PRINT_TITLE_PAGE } from '../../modules/itemTypes.js'
 import { setHeaderbarVisible } from '../../modules/setHeaderbarVisible.js'
 import { sGetEditDashboardRoot } from '../../reducers/editDashboard.js'
-import PrintActionsBar from './ActionsBar.js'
-import PrintInfo from './PrintInfo.js'
-import PrintLayoutItemGrid from './PrintLayoutItemGrid.js'
+import PrintActionsBar from './ActionsBar.jsx'
+import PrintInfo from './PrintInfo.jsx'
+import PrintLayoutItemGrid from './PrintLayoutItemGrid.jsx'
 import { getPageBreakPositions } from './printUtils.js'
 import classes from './styles/PrintLayoutDashboard.module.css'
 
diff --git a/src/pages/print/PrintLayoutItemGrid.js b/src/pages/print/PrintLayoutItemGrid.jsx
similarity index 98%
rename from src/pages/print/PrintLayoutItemGrid.js
rename to src/pages/print/PrintLayoutItemGrid.jsx
index 5f77af860..0fdaace95 100644
--- a/src/pages/print/PrintLayoutItemGrid.js
+++ b/src/pages/print/PrintLayoutItemGrid.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { acUpdatePrintDashboardLayout } from '../../actions/printDashboard.js'
-import { Item } from '../../components/Item/Item.js'
+import { Item } from '../../components/Item/Item.jsx'
 import { PRINT_LAYOUT } from '../../modules/dashboardModes.js'
 import { getFirstOfTypes } from '../../modules/getFirstOfType.js'
 import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
@@ -13,7 +13,7 @@ import { PAGEBREAK } from '../../modules/itemTypes.js'
 import { sGetIsEditing } from '../../reducers/editDashboard.js'
 import { sGetPrintDashboardItems } from '../../reducers/printDashboard.js'
 import { getDomGridItemsSortedByYPos, getTransformYPx } from './printUtils.js'
-import StaticGrid from './StaticGrid.js'
+import StaticGrid from './StaticGrid.jsx'
 
 class PrintLayoutItemGrid extends Component {
     onLayoutChange = (newLayout) => {
diff --git a/src/pages/print/StaticGrid.js b/src/pages/print/StaticGrid.jsx
similarity index 99%
rename from src/pages/print/StaticGrid.js
rename to src/pages/print/StaticGrid.jsx
index f7114d8ff..b23156b93 100644
--- a/src/pages/print/StaticGrid.js
+++ b/src/pages/print/StaticGrid.jsx
@@ -3,7 +3,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 import ReactGridLayout from 'react-grid-layout'
-import NoContentMessage from '../../components/NoContentMessage.js'
+import NoContentMessage from '../../components/NoContentMessage.jsx'
 import {
     GRID_ROW_HEIGHT_PX,
     GRID_COMPACT_TYPE,
diff --git a/src/pages/print/index.js b/src/pages/print/index.js
index db1f3bca7..355405dd0 100644
--- a/src/pages/print/index.js
+++ b/src/pages/print/index.js
@@ -1,4 +1,4 @@
-import PrintDashboard from './PrintDashboard.js'
-import PrintLayoutDashboard from './PrintLayoutDashboard.js'
+import PrintDashboard from './PrintDashboard.jsx'
+import PrintLayoutDashboard from './PrintLayoutDashboard.jsx'
 
 export { PrintDashboard, PrintLayoutDashboard }
diff --git a/src/pages/start/DashboardLink.js b/src/pages/start/DashboardLink.jsx
similarity index 98%
rename from src/pages/start/DashboardLink.js
rename to src/pages/start/DashboardLink.jsx
index 5414fa985..1772f2b41 100644
--- a/src/pages/start/DashboardLink.js
+++ b/src/pages/start/DashboardLink.jsx
@@ -2,7 +2,7 @@ import { IconDashboardWindow16, colors } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { Link } from 'react-router-dom'
-import { OfflineSaved } from '../../components/DashboardsBar/assets/icons.js'
+import { OfflineSaved } from '../../components/DashboardsBar/assets/icons.jsx'
 import { useCacheableSection } from '../../modules/useCacheableSection.js'
 import styles from './styles/DashboardLink.module.css'
 
diff --git a/src/pages/start/LandingPage.js b/src/pages/start/LandingPage.jsx
similarity index 92%
rename from src/pages/start/LandingPage.js
rename to src/pages/start/LandingPage.jsx
index 9a6d61463..a2ac2df46 100644
--- a/src/pages/start/LandingPage.js
+++ b/src/pages/start/LandingPage.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
-import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.js'
-import StartScreen from './StartScreen.js'
+import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.jsx'
+import StartScreen from './StartScreen.jsx'
 
 const LandingPage = ({ username, onMount }) => {
     const [controlbarExpanded, setControlbarExpanded] = useState(false)
diff --git a/src/pages/start/StartScreen.js b/src/pages/start/StartScreen.jsx
similarity index 98%
rename from src/pages/start/StartScreen.js
rename to src/pages/start/StartScreen.jsx
index 7f3a39e9f..83f0dbdbe 100644
--- a/src/pages/start/StartScreen.js
+++ b/src/pages/start/StartScreen.jsx
@@ -3,7 +3,7 @@ import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React, { useEffect, useState } from 'react'
 import { apiGetDataStatistics } from '../../api/dataStatistics.js'
-import DashboardLink from './DashboardLink.js'
+import DashboardLink from './DashboardLink.jsx'
 import styles from './styles/StartScreen.module.css'
 
 const StartScreen = ({ username }) => {
diff --git a/src/pages/start/index.js b/src/pages/start/index.js
index 80826e4f4..db27c5d6c 100644
--- a/src/pages/start/index.js
+++ b/src/pages/start/index.js
@@ -1,4 +1,4 @@
-import LandingPage from './LandingPage.js'
+import LandingPage from './LandingPage.jsx'
 
 const ROUTE_START_PATH = '/start'
 
diff --git a/src/pages/view/CacheableViewDashboard.js b/src/pages/view/CacheableViewDashboard.jsx
similarity index 96%
rename from src/pages/view/CacheableViewDashboard.js
rename to src/pages/view/CacheableViewDashboard.jsx
index 27e43f322..b70a118a8 100644
--- a/src/pages/view/CacheableViewDashboard.js
+++ b/src/pages/view/CacheableViewDashboard.jsx
@@ -5,9 +5,9 @@ import isEmpty from 'lodash/isEmpty.js'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 import { connect } from 'react-redux'
-import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.js'
-import LoadingMask from '../../components/LoadingMask.js'
-import NoContentMessage from '../../components/NoContentMessage.js'
+import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.jsx'
+import LoadingMask from '../../components/LoadingMask.jsx'
+import NoContentMessage from '../../components/NoContentMessage.jsx'
 import getCacheableSectionId from '../../modules/getCacheableSectionId.js'
 import { getPreferredDashboardId } from '../../modules/localStorage.js'
 import {
@@ -15,7 +15,7 @@ import {
     sGetDashboardById,
     sGetDashboardsSortedByStarred,
 } from '../../reducers/dashboards.js'
-import ViewDashboard from './ViewDashboard.js'
+import ViewDashboard from './ViewDashboard.jsx'
 
 const CacheableViewDashboard = ({
     id,
diff --git a/src/pages/view/FilterBar/FilterBadge.js b/src/pages/view/FilterBar/FilterBadge.jsx
similarity index 100%
rename from src/pages/view/FilterBar/FilterBadge.js
rename to src/pages/view/FilterBar/FilterBadge.jsx
diff --git a/src/pages/view/FilterBar/FilterBar.js b/src/pages/view/FilterBar/FilterBar.jsx
similarity index 97%
rename from src/pages/view/FilterBar/FilterBar.js
rename to src/pages/view/FilterBar/FilterBar.jsx
index 526918240..81796d2f2 100644
--- a/src/pages/view/FilterBar/FilterBar.js
+++ b/src/pages/view/FilterBar/FilterBar.jsx
@@ -7,9 +7,9 @@ import {
     acRemoveItemFilter,
     acClearItemFilters,
 } from '../../../actions/itemFilters.js'
-import ConfirmActionDialog from '../../../components/ConfirmActionDialog.js'
+import ConfirmActionDialog from '../../../components/ConfirmActionDialog.jsx'
 import { sGetNamedItemFilters } from '../../../reducers/itemFilters.js'
-import FilterBadge from './FilterBadge.js'
+import FilterBadge from './FilterBadge.jsx'
 import classes from './styles/FilterBar.module.css'
 
 const FilterBar = ({ filters, removeFilter, removeAllFilters }) => {
diff --git a/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js b/src/pages/view/FilterBar/__tests__/FilterBadge.spec.jsx
similarity index 97%
rename from src/pages/view/FilterBar/__tests__/FilterBadge.spec.js
rename to src/pages/view/FilterBar/__tests__/FilterBadge.spec.jsx
index 1164dca2d..283afc4fa 100644
--- a/src/pages/view/FilterBar/__tests__/FilterBadge.spec.js
+++ b/src/pages/view/FilterBar/__tests__/FilterBadge.spec.jsx
@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
-import FilterBadge from '../FilterBadge.js'
+import FilterBadge from '../FilterBadge.jsx'
 
 const mockStore = configureMockStore()
 
diff --git a/src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap b/src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.jsx.snap
similarity index 100%
rename from src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.js.snap
rename to src/pages/view/FilterBar/__tests__/__snapshots__/FilterBadge.spec.jsx.snap
diff --git a/src/pages/view/ItemGrid.js b/src/pages/view/ItemGrid.jsx
similarity index 98%
rename from src/pages/view/ItemGrid.js
rename to src/pages/view/ItemGrid.jsx
index 0a112be77..5f624d8c7 100644
--- a/src/pages/view/ItemGrid.js
+++ b/src/pages/view/ItemGrid.jsx
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types'
 import React, { useState, useEffect } from 'react'
 import { Responsive as ResponsiveReactGridLayout } from 'react-grid-layout'
 import { connect } from 'react-redux'
-import { Item } from '../../components/Item/Item.js'
-import NoContentMessage from '../../components/NoContentMessage.js'
-import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.js'
-import { useWindowDimensions } from '../../components/WindowDimensionsProvider.js'
+import { Item } from '../../components/Item/Item.jsx'
+import NoContentMessage from '../../components/NoContentMessage.jsx'
+import ProgressiveLoadingContainer from '../../components/ProgressiveLoadingContainer.jsx'
+import { useWindowDimensions } from '../../components/WindowDimensionsProvider.jsx'
 import { VIEW } from '../../modules/dashboardModes.js'
 import { getFirstOfTypes } from '../../modules/getFirstOfType.js'
 import { getGridItemDomElementClassName } from '../../modules/getGridItemDomElementClassName.js'
diff --git a/src/pages/view/TitleBar/ActionsBar.js b/src/pages/view/TitleBar/ActionsBar.jsx
similarity index 98%
rename from src/pages/view/TitleBar/ActionsBar.js
rename to src/pages/view/TitleBar/ActionsBar.jsx
index 24da7ec8b..4d4944ac2 100644
--- a/src/pages/view/TitleBar/ActionsBar.js
+++ b/src/pages/view/TitleBar/ActionsBar.jsx
@@ -20,9 +20,9 @@ import { acSetDashboardStarred } from '../../../actions/dashboards.js'
 import { acClearItemFilters } from '../../../actions/itemFilters.js'
 import { acSetShowDescription } from '../../../actions/showDescription.js'
 import { apiPostShowDescription } from '../../../api/description.js'
-import ConfirmActionDialog from '../../../components/ConfirmActionDialog.js'
-import DropdownButton from '../../../components/DropdownButton/DropdownButton.js'
-import MenuItem from '../../../components/MenuItemWithTooltip.js'
+import ConfirmActionDialog from '../../../components/ConfirmActionDialog.jsx'
+import DropdownButton from '../../../components/DropdownButton/DropdownButton.jsx'
+import MenuItem from '../../../components/MenuItemWithTooltip.jsx'
 import { useCacheableSection } from '../../../modules/useCacheableSection.js'
 import { orObject } from '../../../modules/util.js'
 import { sGetDashboardStarred } from '../../../reducers/dashboards.js'
@@ -31,8 +31,8 @@ import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
 import { ROUTE_START_PATH } from '../../start/index.js'
 import { apiStarDashboard } from './apiStarDashboard.js'
-import FilterSelector from './FilterSelector.js'
-import StarDashboardButton from './StarDashboardButton.js'
+import FilterSelector from './FilterSelector.jsx'
+import StarDashboardButton from './StarDashboardButton.jsx'
 import classes from './styles/ActionsBar.module.css'
 
 const ViewActions = ({
diff --git a/src/pages/view/TitleBar/Description.js b/src/pages/view/TitleBar/Description.jsx
similarity index 100%
rename from src/pages/view/TitleBar/Description.js
rename to src/pages/view/TitleBar/Description.jsx
diff --git a/src/pages/view/TitleBar/FilterDialog.js b/src/pages/view/TitleBar/FilterDialog.jsx
similarity index 99%
rename from src/pages/view/TitleBar/FilterDialog.js
rename to src/pages/view/TitleBar/FilterDialog.jsx
index f1586e612..092f89203 100644
--- a/src/pages/view/TitleBar/FilterDialog.js
+++ b/src/pages/view/TitleBar/FilterDialog.jsx
@@ -31,8 +31,8 @@ import {
     acAddItemFilter,
     acRemoveItemFilter,
 } from '../../../actions/itemFilters.js'
-import { useSystemSettings } from '../../../components/SystemSettingsProvider.js'
-import { useUserSettings } from '../../../components/UserSettingsProvider.js'
+import { useSystemSettings } from '../../../components/SystemSettingsProvider.jsx'
+import { useUserSettings } from '../../../components/UserSettingsProvider.jsx'
 import { sGetItemFiltersRoot } from '../../../reducers/itemFilters.js'
 
 const FilterDialog = ({
diff --git a/src/pages/view/TitleBar/FilterSelector.js b/src/pages/view/TitleBar/FilterSelector.jsx
similarity index 98%
rename from src/pages/view/TitleBar/FilterSelector.js
rename to src/pages/view/TitleBar/FilterSelector.jsx
index cf32d25aa..0dff5e2b3 100644
--- a/src/pages/view/TitleBar/FilterSelector.js
+++ b/src/pages/view/TitleBar/FilterSelector.jsx
@@ -10,11 +10,11 @@ import {
     acClearActiveModalDimension,
     acSetActiveModalDimension,
 } from '../../../actions/activeModalDimension.js'
-import DropdownButton from '../../../components/DropdownButton/DropdownButton.js'
+import DropdownButton from '../../../components/DropdownButton/DropdownButton.jsx'
 import useDimensions from '../../../modules/useDimensions.js'
 import { sGetActiveModalDimension } from '../../../reducers/activeModalDimension.js'
 import { sGetItemFiltersRoot } from '../../../reducers/itemFilters.js'
-import FilterDialog from './FilterDialog.js'
+import FilterDialog from './FilterDialog.jsx'
 import classes from './styles/FilterSelector.module.css'
 
 const FilterSelector = (props) => {
diff --git a/src/pages/view/TitleBar/LastUpdatedTag.js b/src/pages/view/TitleBar/LastUpdatedTag.jsx
similarity index 100%
rename from src/pages/view/TitleBar/LastUpdatedTag.js
rename to src/pages/view/TitleBar/LastUpdatedTag.jsx
diff --git a/src/pages/view/TitleBar/StarDashboardButton.js b/src/pages/view/TitleBar/StarDashboardButton.jsx
similarity index 100%
rename from src/pages/view/TitleBar/StarDashboardButton.js
rename to src/pages/view/TitleBar/StarDashboardButton.jsx
diff --git a/src/pages/view/TitleBar/TitleBar.js b/src/pages/view/TitleBar/TitleBar.jsx
similarity index 90%
rename from src/pages/view/TitleBar/TitleBar.js
rename to src/pages/view/TitleBar/TitleBar.jsx
index 04d90b7cf..62050bd1e 100644
--- a/src/pages/view/TitleBar/TitleBar.js
+++ b/src/pages/view/TitleBar/TitleBar.jsx
@@ -3,9 +3,9 @@ import React from 'react'
 import { connect } from 'react-redux'
 import { sGetSelected } from '../../../reducers/selected.js'
 import { sGetShowDescription } from '../../../reducers/showDescription.js'
-import ActionsBar from './ActionsBar.js'
-import Description from './Description.js'
-import LastUpdatedTag from './LastUpdatedTag.js'
+import ActionsBar from './ActionsBar.jsx'
+import Description from './Description.jsx'
+import LastUpdatedTag from './LastUpdatedTag.jsx'
 import classes from './styles/TitleBar.module.css'
 
 const ViewTitleBar = ({
diff --git a/src/pages/view/TitleBar/__tests__/FilterSelector.spec.js b/src/pages/view/TitleBar/__tests__/FilterSelector.spec.jsx
similarity index 98%
rename from src/pages/view/TitleBar/__tests__/FilterSelector.spec.js
rename to src/pages/view/TitleBar/__tests__/FilterSelector.spec.jsx
index ded375771..e521ff5b5 100644
--- a/src/pages/view/TitleBar/__tests__/FilterSelector.spec.js
+++ b/src/pages/view/TitleBar/__tests__/FilterSelector.spec.jsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { Provider } from 'react-redux'
 import configureMockStore from 'redux-mock-store'
 import useDimensions from '../../../../modules/useDimensions.js'
-import FilterSelector from '../FilterSelector.js'
+import FilterSelector from '../FilterSelector.jsx'
 
 const mockStore = configureMockStore()
 
diff --git a/src/pages/view/TitleBar/__tests__/__snapshots__/FilterSelector.spec.js.snap b/src/pages/view/TitleBar/__tests__/__snapshots__/FilterSelector.spec.jsx.snap
similarity index 100%
rename from src/pages/view/TitleBar/__tests__/__snapshots__/FilterSelector.spec.js.snap
rename to src/pages/view/TitleBar/__tests__/__snapshots__/FilterSelector.spec.jsx.snap
diff --git a/src/pages/view/ViewDashboard.js b/src/pages/view/ViewDashboard.jsx
similarity index 96%
rename from src/pages/view/ViewDashboard.js
rename to src/pages/view/ViewDashboard.jsx
index 62baa8438..7fc808bda 100644
--- a/src/pages/view/ViewDashboard.js
+++ b/src/pages/view/ViewDashboard.jsx
@@ -14,20 +14,20 @@ import {
     tSetSelectedDashboardByIdOffline,
 } from '../../actions/selected.js'
 import { apiPostDataStatistics } from '../../api/dataStatistics.js'
-import DashboardContainer from '../../components/DashboardContainer.js'
-import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.js'
-import LoadingMask from '../../components/LoadingMask.js'
-import Notice from '../../components/Notice.js'
+import DashboardContainer from '../../components/DashboardContainer.jsx'
+import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.jsx'
+import LoadingMask from '../../components/LoadingMask.jsx'
+import Notice from '../../components/Notice.jsx'
 import { setHeaderbarVisible } from '../../modules/setHeaderbarVisible.js'
 import { useCacheableSection } from '../../modules/useCacheableSection.js'
 import { sGetDashboardById } from '../../reducers/dashboards.js'
 import { sGetPassiveViewRegistered } from '../../reducers/passiveViewRegistered.js'
 import { sGetSelectedId } from '../../reducers/selected.js'
 import { ROUTE_START_PATH } from '../start/index.js'
-import FilterBar from './FilterBar/FilterBar.js'
-import ItemGrid from './ItemGrid.js'
+import FilterBar from './FilterBar/FilterBar.jsx'
+import ItemGrid from './ItemGrid.jsx'
 import classes from './styles/ViewDashboard.module.css'
-import TitleBar from './TitleBar/TitleBar.js'
+import TitleBar from './TitleBar/TitleBar.jsx'
 
 const ViewDashboard = (props) => {
     const [controlbarExpanded, setControlbarExpanded] = useState(false)
diff --git a/src/pages/view/__tests__/ViewDashboard.spec.js b/src/pages/view/__tests__/ViewDashboard.spec.jsx
similarity index 98%
rename from src/pages/view/__tests__/ViewDashboard.spec.js
rename to src/pages/view/__tests__/ViewDashboard.spec.jsx
index 7821ec83b..c4596173d 100644
--- a/src/pages/view/__tests__/ViewDashboard.spec.js
+++ b/src/pages/view/__tests__/ViewDashboard.spec.jsx
@@ -6,7 +6,7 @@ import configureMockStore from 'redux-mock-store'
 import thunk from 'redux-thunk'
 import { apiPostDataStatistics } from '../../../api/dataStatistics.js'
 import { apiFetchDashboard } from '../../../api/fetchDashboard.js'
-import ViewDashboard from '../ViewDashboard.js'
+import ViewDashboard from '../ViewDashboard.jsx'
 
 jest.mock('@dhis2/analytics', () => ({
     useCachedDataQuery: () => ({
diff --git a/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap b/src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.jsx.snap
similarity index 100%
rename from src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.js.snap
rename to src/pages/view/__tests__/__snapshots__/ViewDashboard.spec.jsx.snap
diff --git a/src/pages/view/index.js b/src/pages/view/index.js
index e597dc30b..d60c2af32 100644
--- a/src/pages/view/index.js
+++ b/src/pages/view/index.js
@@ -1,4 +1,4 @@
-import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.js'
-import ViewDashboard from './CacheableViewDashboard.js'
+import DashboardsBar from '../../components/DashboardsBar/DashboardsBar.jsx'
+import ViewDashboard from './CacheableViewDashboard.jsx'
 
 export { ViewDashboard, DashboardsBar }