feat: support new dashboard plugin architecture

src/components/Dialogs/PeriodDimension/PeriodDimension.js

@@ -17,6 +17,7 @@ import PropTypes from 'prop-types'
 import React, { useState, useMemo } from 'react'
 import { useDispatch, useSelector, useStore } from 'react-redux'
 import { acSetUiItems } from '../../../actions/ui.js'
+import { getStartEndDate, isStartEndDate } from '../../../modules/dates.js'
 import {
     extractDimensionIdParts,
     formatDimensionId,
@@ -28,7 +29,6 @@ import {
     SYSTEM_SETTINGS_HIDE_MONTHLY_PERIODS,
     SYSTEM_SETTINGS_HIDE_BIMONTHLY_PERIODS,
 } from '../../../modules/systemSettings.js'
-import { USER_SETTINGS_UI_LOCALE } from '../../../modules/userSettings.js'
 import {
     sGetDimensionIdsFromLayout,
     sGetUiItemsByDimension,
@@ -41,18 +41,6 @@ import { StartEndDate } from './StartEndDate.js'
 export const OPTION_PRESETS = 'PRESETS'
 export const OPTION_START_END_DATES = 'START_END_DATES'
 
-const getStartEndDate = (id) => {
-    const { dimensionId: periodId } = extractDimensionIdParts(id)
-    const parts = periodId.split('_')
-    return parts.length === 2 &&
-        !isNaN(Date.parse(parts[0])) &&
-        !isNaN(Date.parse(parts[1]))
-        ? parts
-        : []
-}
-
-const isStartEndDate = (id) => getStartEndDate(id).length === 2
-
 const useIsInLayout = (dimensionId) => {
     const allDimensionIds = useSelector(sGetDimensionIdsFromLayout)
     return useMemo(
@@ -61,25 +49,6 @@ const useIsInLayout = (dimensionId) => {
     )
 }
 
-const useLocalizedStartEndDateFormatter = () => {
-    const { currentUser } = useCachedDataQuery()
-    const formatter = new Intl.DateTimeFormat(
-        currentUser.settings[USER_SETTINGS_UI_LOCALE],
-        {
-            dateStyle: 'long',
-        }
-    )
-    return (startEndDate) => {
-        if (isStartEndDate(startEndDate)) {
-            return getStartEndDate(startEndDate)
-                .map((dateStr) => formatter.format(new Date(dateStr)))
-                .join(' - ')
-        } else {
-            return ''
-        }
-    }
-}
-
 const useMetadataNameGetter = () => {
     const store = useStore()
 
@@ -111,7 +80,6 @@ const useExcludedPeriods = () => {
 }
 
 export const PeriodDimension = ({ dimension, onClose }) => {
-    const formatStartEndDate = useLocalizedStartEndDateFormatter()
     const getNameFromMetadata = useMetadataNameGetter()
     const dispatch = useDispatch()
     const isInLayout = useIsInLayout(dimension?.id)
@@ -145,7 +113,7 @@ export const PeriodDimension = ({ dimension, onClose }) => {
                 if (isStartEndDate(item.id)) {
                     acc.metadata[item.id] = {
                         id: item.id,
-                        name: formatStartEndDate(item.id),
+                        name: item.id.replace('_', ' - '),
                     }
                 } else {
                     acc.metadata[item.id] = item

src/components/Layout/TooltipContent.js

@@ -12,6 +12,10 @@ import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
 import React from 'react'
 import { useSelector } from 'react-redux'
+import {
+    isStartEndDate,
+    useLocalizedStartEndDateFormatter,
+} from '../../modules/dates.js'
 import { DIMENSION_TYPE_STATUS } from '../../modules/dimensionConstants.js'
 import { extractDimensionIdParts } from '../../modules/dimensionId.js'
 import { sGetMetadata } from '../../reducers/metadata.js'
@@ -26,6 +30,8 @@ export const TooltipContent = ({ dimension, conditionsTexts, axisId }) => {
     const itemIds = useSelector((state) =>
         sGetUiItemsByDimension(state, dimension.id)
     )
+    const formatStartEndDate = useLocalizedStartEndDateFormatter()
+
     const { programStageId, programId } = extractDimensionIdParts(
         dimension.id,
         inputType
@@ -56,7 +62,9 @@ export const TooltipContent = ({ dimension, conditionsTexts, axisId }) => {
             } else {
                 const { dimensionId } = extractDimensionIdParts(id, inputType)
                 itemDisplayNames.push(
-                    metadata[dimensionId] ? metadata[dimensionId].name : id
+                    isStartEndDate(dimensionId)
+                        ? formatStartEndDate(dimensionId)
+                        : metadata[dimensionId]?.name ?? id
                 )
             }
         })

src/components/Layout/__tests__/TooltipContent.spec.js

@@ -7,6 +7,17 @@ import { TooltipContent } from '../TooltipContent.js'
 
 const mockStore = configureMockStore()
 
+jest.mock('@dhis2/analytics', () => ({
+    ...jest.requireActual('@dhis2/analytics'),
+    useCachedDataQuery: () => ({
+        currentUser: {
+            settings: {
+                keyUiLocale: 'en',
+            },
+        },
+    }),
+}))
+
 const inputTypeEvent = {
     input: {
         type: OUTPUT_TYPE_EVENT,

src/modules/dates.js

@@ -0,0 +1,29 @@
+import { useCachedDataQuery } from '@dhis2/analytics'
+import { USER_SETTINGS_UI_LOCALE } from './userSettings.js'
+
+export const getStartEndDate = (dimensionId) => {
+    const parts = dimensionId.split('_')
+    return parts.length === 2 &&
+        !isNaN(Date.parse(parts[0])) &&
+        !isNaN(Date.parse(parts[1]))
+        ? parts
+        : []
+}
+
+export const isStartEndDate = (id) => getStartEndDate(id).length === 2
+
+export const useLocalizedStartEndDateFormatter = () => {
+    const { currentUser } = useCachedDataQuery()
+
+    const formatter = new Intl.DateTimeFormat(
+        currentUser.settings[USER_SETTINGS_UI_LOCALE],
+        {
+            dateStyle: 'long',
+        }
+    )
+
+    return (startEndDate) =>
+        getStartEndDate(startEndDate)
+            .map((dateStr) => formatter.format(new Date(dateStr)))
+            .join(' - ')
+}