feat: dataitems identifiable token search + ui upgrade (DHIS2-6568) (DHIS2-20698)

.gitignore

@@ -31,3 +31,4 @@ bundle.stats.json
 # DHIS2 Platform
 .d2
 src/locales
+CLAUDE.md

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2025-09-09T09:32:04.677Z\n"
-"PO-Revision-Date: 2025-09-09T09:32:04.678Z\n"
+"POT-Creation-Date: 2026-01-29T11:57:17.738Z\n"
+"PO-Revision-Date: 2026-01-29T11:57:17.738Z\n"
 
 msgid "view only"
 msgstr "view only"
@@ -822,6 +822,16 @@ msgstr "Period"
 msgid "Selected Periods"
 msgstr "Selected Periods"
 
+msgid "No period types available"
+msgstr "No period types available"
+
+msgid ""
+"No period types are enabled in the system. Please contact your system "
+"administrator."
+msgstr ""
+"No period types are enabled in the system. Please contact your system "
+"administrator."
+
 msgid "Relative periods"
 msgstr "Relative periods"
 
@@ -870,18 +880,42 @@ msgstr "Six-monthly April"
 msgid "Yearly"
 msgstr "Yearly"
 
-msgid "Financial year (Start November)"
-msgstr "Financial year (Start November)"
+msgid "Financial year (Start January)"
+msgstr "Financial year (Start January)"
 
-msgid "Financial year (Start October)"
-msgstr "Financial year (Start October)"
+msgid "Financial year (Start February)"
+msgstr "Financial year (Start February)"
 
-msgid "Financial year (Start July)"
-msgstr "Financial year (Start July)"
+msgid "Financial year (Start March)"
+msgstr "Financial year (Start March)"
 
 msgid "Financial year (Start April)"
 msgstr "Financial year (Start April)"
 
+msgid "Financial year (Start May)"
+msgstr "Financial year (Start May)"
+
+msgid "Financial year (Start June)"
+msgstr "Financial year (Start June)"
+
+msgid "Financial year (Start July)"
+msgstr "Financial year (Start July)"
+
+msgid "Financial year (Start August)"
+msgstr "Financial year (Start August)"
+
+msgid "Financial year (Start September)"
+msgstr "Financial year (Start September)"
+
+msgid "Financial year (Start October)"
+msgstr "Financial year (Start October)"
+
+msgid "Financial year (Start November)"
+msgstr "Financial year (Start November)"
+
+msgid "Financial year (Start December)"
+msgstr "Financial year (Start December)"
+
 msgid "Today"
 msgstr "Today"
 

package.json

@@ -34,7 +34,7 @@
         "@dhis2/cli-app-scripts": "^12.6.4",
         "@dhis2/cli-style": "^10.7.9",
         "@dhis2/d2-i18n": "^1.1.0",
-        "@dhis2/ui": "^10.7.7",
+        "@dhis2/ui": "^10.12.7",
         "@mihkeleidast/storybook-addon-source": "^1.0.1",
         "@storybook/preset-create-react-app": "^8.3.6",
         "@storybook/react": "^8.3.6",

src/api/dimensions.js

@@ -86,7 +86,7 @@ export const dataItemsQuery = {
         }
 
         if (searchTerm) {
-            filters.push(`${nameProp}:ilike:${searchTerm}`)
+            filters.push(`identifiable:token:${searchTerm}`)
         }
 
         return objectClean({
@@ -109,7 +109,7 @@ export const indicatorsQuery = {
         }
 
         if (searchTerm) {
-            filters.push(`${nameProp}:ilike:${searchTerm}`)
+            filters.push(`identifiable:token:${searchTerm}`)
         }
 
         return {
@@ -145,7 +145,7 @@ export const dataElementsQuery = {
         }
 
         if (searchTerm) {
-            filters.push(`${nameProp}:ilike:${searchTerm}`)
+            filters.push(`identifiable:token:${searchTerm}`)
         }
 
         return {
@@ -174,7 +174,7 @@ export const itemsByDimensionQuery = {
         const filters = []
 
         if (searchTerm) {
-            filters.push(`${nameProp}:ilike:${searchTerm}`)
+            filters.push(`identifiable:token:${searchTerm}`)
         }
 
         return {
@@ -202,7 +202,7 @@ export const dataElementOperandsQuery = {
         }
 
         if (searchTerm) {
-            filters.push(`${nameProp}:ilike:${searchTerm}`)
+            filters.push(`identifiable:token:${searchTerm}`)
         }
 
         return {
@@ -221,7 +221,7 @@ export const dataSetsQuery = {
         const filters = []
 
         if (searchTerm) {
-            filters.push(`${nameProp}:ilike:${searchTerm}`)
+            filters.push(`identifiable:token:${searchTerm}`)
         }
 
         if (filter?.group && filter.group !== DIMENSION_TYPE_ALL) {

src/components/PeriodDimension/FixedPeriodFilter.js

@@ -3,24 +3,18 @@ import PropTypes from 'prop-types'
 import React from 'react'
 import i18n from '../../locales/index.js'
 import styles from './styles/PeriodFilter.style.js'
-import { getFixedPeriodsOptions } from './utils/fixedPeriods.js'
-import { filterPeriodTypesById } from './utils/index.js'
-
-const EXCLUDED_PERIOD_TYPES_PROP_DEFAULT = []
 
 const FixedPeriodFilter = ({
-    allowedPeriodTypes,
-    excludedPeriodTypes = EXCLUDED_PERIOD_TYPES_PROP_DEFAULT,
+    availableOptions,
     currentPeriodType,
     currentYear,
     onSelectPeriodType,
     onSelectYear,
     dataTest,
 }) => {
     const onlyAllowedTypeIsSelected =
-        Array.isArray(allowedPeriodTypes) &&
-        allowedPeriodTypes.length === 1 &&
-        allowedPeriodTypes[0] === currentPeriodType
+        availableOptions.length === 1 &&
+        availableOptions[0].id === currentPeriodType
 
     return (
         <>
@@ -34,17 +28,7 @@ const FixedPeriodFilter = ({
                     className="filterElement"
                     dataTest={`${dataTest}-period-type`}
                 >
-                    {(allowedPeriodTypes
-                        ? getFixedPeriodsOptions().filter((option) =>
-                              allowedPeriodTypes.some(
-                                  (type) => type === option.id
-                              )
-                          )
-                        : filterPeriodTypesById(
-                              getFixedPeriodsOptions(),
-                              excludedPeriodTypes
-                          )
-                    ).map((option) => (
+                    {availableOptions.map((option) => (
                         <SingleSelectOption
                             key={option.id}
                             value={option.id}
@@ -72,13 +56,12 @@ const FixedPeriodFilter = ({
 }
 
 FixedPeriodFilter.propTypes = {
+    availableOptions: PropTypes.array.isRequired,
     currentPeriodType: PropTypes.string.isRequired,
     currentYear: PropTypes.string.isRequired,
     onSelectPeriodType: PropTypes.func.isRequired,
     onSelectYear: PropTypes.func.isRequired,
-    allowedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
     dataTest: PropTypes.string,
-    excludedPeriodTypes: PropTypes.arrayOf(PropTypes.string),
 }
 
 export default FixedPeriodFilter

src/components/PeriodDimension/FixedPeriodSelect.js

@@ -7,6 +7,7 @@ import styles from './styles/FixedPeriodSelect.style.js'
 import {
     parsePeriodCode,
     getFixedPeriodsOptionsById as getPeriodById,
+    getFixedPeriodsOptions,
     getYearOffsetFromNow,
 } from './utils/fixedPeriods.js'
 
@@ -63,14 +64,21 @@ class FixedPeriodSelect extends Component {
     }
 
     render() {
+        const allOptions = getFixedPeriodsOptions()
+        const availableOptions = this.props.allowedPeriodTypes
+            ? allOptions.filter((option) =>
+                  this.props.allowedPeriodTypes.includes(option.id)
+              )
+            : allOptions
+
         return (
             <div
                 data-test={this.props.dataTest}
                 className={this.props.className}
             >
                 <div className="row">
                     <FixedPeriodFilter
-                        allowedPeriodTypes={this.props.allowedPeriodTypes}
+                        availableOptions={availableOptions}
                         currentPeriodType={this.state.periodType}
                         currentYear={this.state.year}
                         onSelectPeriodType={this.onSelectPeriodType}

src/components/PeriodDimension/PeriodDimension.js

@@ -1,6 +1,6 @@
 import { useConfig, useDataQuery } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useEffect, useMemo } from 'react'
 import { DIMENSION_ID_PERIOD } from '../../modules/predefinedDimensions.js'
 import PeriodTransfer from './PeriodTransfer.js'
 
@@ -13,6 +13,26 @@ const userSettingsQuery = {
     },
 }
 
+const v43Query = {
+    enabledPeriodTypes: {
+        resource: 'configuration/dataOutputPeriodTypes',
+    },
+    financialYearStart: {
+        resource: 'systemSettings/analyticsFinancialYearStart',
+    },
+    analysisRelativePeriod: {
+        resource: 'systemSettings/keyAnalysisRelativePeriod',
+    },
+}
+
+const FY_SETTING_TO_SERVER_PT = {
+    FINANCIAL_YEAR_APRIL: 'FinancialApril',
+    FINANCIAL_YEAR_JULY: 'FinancialJuly',
+    FINANCIAL_YEAR_SEPTEMBER: 'FinancialSep',
+    FINANCIAL_YEAR_OCTOBER: 'FinancialOct',
+    FINANCIAL_YEAR_NOVEMBER: 'FinancialNov',
+}
+
 const SELECTED_PERIODS_PROP_DEFAULT = []
 
 const PeriodDimension = ({
@@ -23,14 +43,75 @@ const PeriodDimension = ({
     infoBoxMessage,
     height,
 }) => {
-    const { systemInfo } = useConfig()
-    const result = useDataQuery(userSettingsQuery)
+    const config = useConfig()
+    const { systemInfo, serverVersion } = config
+    const userSettingsResult = useDataQuery(userSettingsQuery)
+
+    const supportsEnabledPeriodTypes = serverVersion.minor >= 43
+
+    const {
+        data: v43Data,
+        error: v43Error,
+        refetch: v43Refetch,
+    } = useDataQuery(v43Query, { lazy: true })
+
+    useEffect(() => {
+        if (supportsEnabledPeriodTypes) {
+            v43Refetch()
+        }
+    }, [supportsEnabledPeriodTypes, v43Refetch])
 
     const { calendar = 'gregory' } = systemInfo
-    const { data: { userSettings: { keyUiLocale: locale } = {} } = {} } = result
+    const { data: { userSettings: { keyUiLocale: locale } = {} } = {} } =
+        userSettingsResult
 
     const periodsSettings = { calendar, locale }
 
+    const enabledPeriodTypesData = useMemo(() => {
+        if (!supportsEnabledPeriodTypes) {
+            return null
+        }
+
+        if (v43Error || !v43Data?.enabledPeriodTypes) {
+            return null
+        }
+
+        const enabledTypes = v43Data.enabledPeriodTypes
+
+        if (!enabledTypes || enabledTypes.length === 0) {
+            return {
+                enabledTypes: [],
+                financialYearStart: null,
+                analysisRelativePeriod: null,
+                noEnabledTypes: true,
+            }
+        }
+
+        let financialYearStart = null
+        if (v43Data.financialYearStart?.analyticsFinancialYearStart) {
+            const fyStartValue =
+                v43Data.financialYearStart.analyticsFinancialYearStart
+
+            const mappedFyPt = FY_SETTING_TO_SERVER_PT[fyStartValue]
+            if (
+                mappedFyPt &&
+                enabledTypes.some((pt) => pt.name === mappedFyPt)
+            ) {
+                financialYearStart = fyStartValue
+            }
+        }
+
+        const analysisRelativePeriod =
+            v43Data.analysisRelativePeriod?.keyAnalysisRelativePeriod || null
+
+        return {
+            enabledTypes,
+            financialYearStart,
+            analysisRelativePeriod,
+            noEnabledTypes: false,
+        }
+    }, [supportsEnabledPeriodTypes, v43Data, v43Error])
+
     const selectPeriods = (periods) => {
         onSelect({
             dimensionId: DIMENSION_ID_PERIOD,
@@ -47,6 +128,8 @@ const PeriodDimension = ({
             excludedPeriodTypes={excludedPeriodTypes}
             periodsSettings={periodsSettings}
             height={height}
+            enabledPeriodTypesData={enabledPeriodTypesData}
+            supportsEnabledPeriodTypes={supportsEnabledPeriodTypes}
         />
     )
 }