fix: add suffix to program select options with dimension count

src/components/MainSidebar/ProgramDimensionsPanel/ProgramSelect.js

@@ -1,24 +1,28 @@
 import { useCachedDataQuery } from '@dhis2/analytics'
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
-import { NoticeBox, SingleSelect, SingleSelectOption } from '@dhis2/ui'
+import { NoticeBox, SingleSelect } from '@dhis2/ui'
 import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { tSetUiProgram } from '../../../actions/ui.js'
 import { PROGRAM_TYPE_WITH_REGISTRATION } from '../../../modules/programTypes.js'
 import { DERIVED_USER_SETTINGS_DISPLAY_NAME_PROPERTY } from '../../../modules/userSettings.js'
+import { extractDimensionIdParts } from '../../../modules/utils.js'
 import {
     OUTPUT_TYPE_ENROLLMENT,
     OUTPUT_TYPE_EVENT,
+    OUTPUT_TYPE_TRACKED_ENTITY,
 } from '../../../modules/visualization.js'
 import { sGetMetadataById } from '../../../reducers/metadata.js'
 import {
+    sGetDimensionIdsFromLayout,
     sGetUiEntityTypeId,
     sGetUiInputType,
     sGetUiProgramId,
 } from '../../../reducers/ui.js'
 import styles from './ProgramSelect.module.css'
+import { SingleSelectOptionWithSuffix } from './SingleSelectOptionWithSuffix.js'
 import { StageSelect } from './StageSelect.js'
 
 const query = {
@@ -58,10 +62,12 @@ const ProgramSelect = ({ prefix }) => {
     const selectedProgram = useSelector((state) =>
         sGetMetadataById(state, selectedProgramId)
     )
+    const allDimensionIds = useSelector(sGetDimensionIdsFromLayout)
     const inputType = useSelector(sGetUiInputType)
     const { fetching, error, data, refetch } = useDataQuery(query, {
         lazy: true,
     })
+    const [programDimensionsMap, setProgramDimensionsMap] = useState({})
 
     const programs = data?.programs.programs
     const programType = selectedProgram?.programType
@@ -82,6 +88,19 @@ const ProgramSelect = ({ prefix }) => {
         }
     }
 
+    useEffect(() => {
+        if (inputType === OUTPUT_TYPE_TRACKED_ENTITY && selectedEntityTypeId) {
+            const map = {}
+            allDimensionIds.forEach((id) => {
+                const { programId } = extractDimensionIdParts(id, inputType)
+                if (programId) {
+                    map[programId] = map[programId] ? map[programId] + 1 : 1
+                }
+            })
+            setProgramDimensionsMap(map)
+        }
+    }, [selectedEntityTypeId, allDimensionIds])
+
     useEffect(() => {
         refetch({
             nameProp:
@@ -125,18 +144,31 @@ const ProgramSelect = ({ prefix }) => {
                         loading={fetching}
                     >
                         {(fetching || !programs) && selectedProgram?.id && (
-                            <SingleSelectOption
+                            <SingleSelectOptionWithSuffix
                                 key={selectedProgram?.id}
                                 label={selectedProgram?.name}
+                                suffix={
+                                    (selectedEntityTypeId &&
+                                        selectedProgram?.id &&
+                                        programDimensionsMap[
+                                            selectedProgram.id
+                                        ]) ||
+                                    ''
+                                }
                                 value={selectedProgram?.id}
                             />
                         )}
                         {!fetching &&
                             programs?.map(({ id, name }) => (
-                                <SingleSelectOption
+                                <SingleSelectOptionWithSuffix
                                     key={id}
                                     label={name}
                                     value={id}
+                                    suffix={
+                                        (selectedEntityTypeId &&
+                                            programDimensionsMap[id]) ||
+                                        ''
+                                    }
                                 />
                             ))}
                     </SingleSelect>

src/components/MainSidebar/ProgramDimensionsPanel/SingleSelectOptionWithSuffix.js

@@ -0,0 +1,39 @@
+import { Tag } from '@dhis2/ui'
+import cx from 'classnames'
+import PropTypes from 'prop-types'
+import React from 'react'
+import styles from './SingleSelectOptionWithSuffix.module.css'
+
+export const SingleSelectOptionWithSuffix = ({
+    label,
+    active,
+    disabled,
+    onClick,
+    value,
+    dataTest,
+    suffix,
+}) => (
+    <div
+        className={cx(styles.option, {
+            [styles.disabled]: disabled,
+            [styles.active]: active,
+        })}
+        onClick={(e) => onClick({}, e)}
+        data-value={value}
+        data-label={label}
+        data-test={dataTest}
+    >
+        {label}
+        {suffix && <Tag className={styles.tag}>{suffix}</Tag>}
+    </div>
+)
+
+SingleSelectOptionWithSuffix.propTypes = {
+    label: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    active: PropTypes.bool,
+    dataTest: PropTypes.string,
+    disabled: PropTypes.bool,
+    suffix: PropTypes.string,
+    onClick: PropTypes.func,
+}

src/components/MainSidebar/ProgramDimensionsPanel/SingleSelectOptionWithSuffix.module.css

@@ -0,0 +1,36 @@
+.option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    font-size: 14px;
+    text-decoration: none;
+    color: var(--colors-grey900);
+    padding-block: var(--spacers-dp8);
+    padding-inline: var(--spacers-dp12);
+}
+
+.option:hover {
+    background-color: var(--colors-grey200);
+}
+
+.option:active,
+.option.active {
+    background-color: var(--colors-teal700);
+    color: var(--colors-white);
+    cursor: auto;
+}
+
+.option.disabled {
+    color: var(--colors-grey500);
+    cursor: not-allowed;
+    user-select: none;
+}
+
+.option.disabled:hover {
+    background-color: initial;
+}
+
+.tag {
+    margin-left: var(--spacers-dp12);
+}