feat(detailsPanel): add detailsPanel in list-view

global.d.ts

@@ -6,9 +6,6 @@ declare module '@dhis2/d2-i18n' {
     export function exists(key: string): boolean
 }
 
-declare module '@dhis2/ui'
-declare module '@dhis2/ui-icons'
-
 declare module '*.bmp' {
     const src: string
     export default src

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: 2023-11-16T09:17:45.955Z\n"
-"PO-Revision-Date: 2023-11-16T09:17:45.955Z\n"
+"POT-Creation-Date: 2023-11-22T13:05:25.319Z\n"
+"PO-Revision-Date: 2023-11-22T13:05:25.319Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -93,6 +93,15 @@ msgstr "Option set"
 msgid "Actions"
 msgstr "Actions"
 
+msgid "New"
+msgstr "New"
+
+msgid "Download"
+msgstr "Download"
+
+msgid "Manage Columns"
+msgstr "Manage Columns"
+
 msgid "There aren't any items that match your filter."
 msgstr "There aren't any items that match your filter."
 
@@ -105,14 +114,44 @@ msgstr "An error occurred while loading the items."
 msgid "{{modelName}} management"
 msgstr "{{modelName}} management"
 
-msgid "New"
-msgstr "New"
+msgid "Short name"
+msgstr "Short name"
 
-msgid "Download"
-msgstr "Download"
+msgid "Code"
+msgstr "Code"
 
-msgid "Manage Columns"
-msgstr "Manage Columns"
+msgid "Created by"
+msgstr "Created by"
+
+msgid "Created"
+msgstr "Created"
+
+msgid "Last updated by"
+msgstr "Last updated by"
+
+msgid "Last updated"
+msgstr "Last updated"
+
+msgid "Id"
+msgstr "Id"
+
+msgid "API URL"
+msgstr "API URL"
+
+msgid "API URL link"
+msgstr "API URL link"
+
+msgid "Copy"
+msgstr "Copy"
+
+msgid "Edit"
+msgstr "Edit"
+
+msgid "Details"
+msgstr "Details"
+
+msgid "Failed to load details"
+msgstr "Failed to load details"
 
 msgid "Type to filter options"
 msgstr "Type to filter options"
@@ -561,42 +600,18 @@ msgstr "Image"
 msgid "GeoJSON"
 msgstr "GeoJSON"
 
-msgid "Code"
-msgstr "Code"
-
-msgid "Created by"
-msgstr "Created by"
-
 msgid "Favorite"
 msgstr "Favorite"
 
-msgid "Href"
-msgstr "Href"
-
-msgid "Id"
-msgstr "Id"
-
-msgid "Last updated by"
-msgstr "Last updated by"
-
-msgid "Created"
-msgstr "Created"
-
 msgid "Domain type"
 msgstr "Domain type"
 
-msgid "Last updated"
-msgstr "Last updated"
-
 msgid "Name"
 msgstr "Name"
 
 msgid "Sharing"
 msgstr "Sharing"
 
-msgid "Short name"
-msgstr "Short name"
-
 msgid "Value type"
 msgstr "Value type"
 

package.json

@@ -37,7 +37,7 @@
     },
     "dependencies": {
         "@dhis2/app-runtime": "^3.9.3",
-        "@dhis2/ui": "^8.14.7",
+        "@dhis2/ui": "^8.15.0-alpha.3",
         "@types/lodash": "^4.14.198",
         "lodash": "^4.17.21",
         "react-color": "^2.19.3",
@@ -48,5 +48,8 @@
         "use-query-params": "^2.2.1",
         "zod": "^3.22.2",
         "zustand": "^4.4.0"
+    },
+    "resolutions": {
+        "@dhis2/ui": "8.15.0-alpha.3"
     }
 }

src/app/sidebar/Sidebar.tsx

@@ -1,4 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
+import { InputEventPayload } from '@dhis2/ui'
 import React, { useEffect, useState, PropsWithChildren } from 'react'
 import { NavLink, useLocation, matchPath } from 'react-router-dom'
 import { HidePreventUnmount } from '../../components'
@@ -10,7 +11,6 @@ import {
     SidenavParent,
     SidenavLink,
     SidenavFilter,
-    OnChangeInput,
 } from './sidenav'
 
 interface SidebarNavLinkProps {
@@ -86,8 +86,8 @@ export const Sidebar = ({ className }: { className?: string }) => {
     const sidebarLinks = useSidebarLinks()
     const [filterValue, setFilterValue] = useState('')
 
-    const handleFilterChange = (input: OnChangeInput) => {
-        setFilterValue(input.value)
+    const handleFilterChange = (input: InputEventPayload) => {
+        setFilterValue(input.value ?? '')
     }
 
     const isFiltered = filterValue !== ''

src/app/sidebar/sidenav/Sidenav.module.css

@@ -60,10 +60,9 @@ html {
     margin-left: auto;
     width: 16px;
     height: 16px;
-    transition: transform .1s linear;   
+    transition: transform 0.1s linear;
 }
 .parent-is-open .sidenav-parent-chevron {
-
     transform: rotate(180deg);
 }
 
@@ -82,22 +81,27 @@ html {
     display: flex;
     align-items: center;
 }
-.sidenav-link:hover,.sidenav-link a:hover {
+.sidenav-link:hover,
+.sidenav-link a:hover {
     background: var(--sidenav-dark-bg-hover);
 }
-.sidenav-link:focus,.sidenav-link a:focus {
+.sidenav-link:focus,
+.sidenav-link a:focus {
     outline: 2px solid white;
     background: var(--sidenav-dark-bg-hover);
     outline-offset: -2px;
 }
-.sidenav-link-disabled, .sidenav-link-disabled a {
+.sidenav-link-disabled,
+.sidenav-link-disabled a {
     cursor: not-allowed;
     color: var(--colors-grey500);
 }
-.sidenav-link-disabled:hover,.sidenav-link-disabled:hover > a {
+.sidenav-link-disabled:hover,
+.sidenav-link-disabled:hover > a {
     background: var(--colors-grey900);
 }
-.sidenav-link a.active, .sidenav-link :global(.active) {
+.sidenav-link a.active,
+.sidenav-link :global(.active) {
     font-weight: 600;
     background: var(--sidenav-dark-bg-selected);
     box-shadow: inset 6px 0px 0px 0px var(--colors-teal500);
@@ -155,4 +159,4 @@ html {
     background: #131a22;
     border-color: var(--colors-grey700);
     box-shadow: var(--colors-grey400) 0px 0px 0px 2px inset;
-}
+}

src/app/sidebar/sidenav/SidenavFilter.tsx

@@ -1,29 +1,20 @@
 import i18n from '@dhis2/d2-i18n'
-import { Input } from '@dhis2/ui'
+import { Input, InputEventPayload, InputChangeHandler } from '@dhis2/ui'
 import React, { useState } from 'react'
 import styles from './Sidenav.module.css'
 
-export type OnChangeInput = {
-    name?: string
-    value: string
-}
-export type OnChangeCallback = (
-    input: OnChangeInput,
-    e: React.ChangeEvent<HTMLInputElement>
-) => void
-
 interface SidenavParentProps {
-    onChange?: OnChangeCallback
+    onChange?: InputChangeHandler
 }
 
 export const SidenavFilter = ({ onChange }: SidenavParentProps) => {
     const [value, setValue] = useState('')
 
     const handleChange = (
-        input: OnChangeInput,
+        input: InputEventPayload,
         e: React.ChangeEvent<HTMLInputElement>
     ) => {
-        setValue(input.value)
+        setValue(input.value ?? '')
         if (onChange) {
             onChange(input, e)
         }

src/app/sidebar/sidenav/index.tsx

@@ -1,3 +1,2 @@
 export * from './Sidenav'
 export { SidenavFilter } from './SidenavFilter'
-export type { OnChangeInput, OnChangeCallback } from './SidenavFilter'

src/components/ColorAndIconPicker/ColorPicker.tsx

@@ -35,7 +35,7 @@ export function ColorPicker({
             </div>
 
             {showPicker && (
-                <Layer onBackdropClick={() => setShowPicker(false)} transparent>
+                <Layer onBackdropClick={() => setShowPicker(false)} translucent>
                     <Popper placement="bottom-start" reference={ref}>
                         <div className={classes.colors}>
                             <SwatchesPicker

src/components/ColorAndIconPicker/IconPickerModal.tsx

@@ -76,8 +76,8 @@ export function IconPickerModal({
                             dense
                             placeholder={i18n.t('Search icons')}
                             value={searchValue}
-                            onChange={({ value }: { value: string }) =>
-                                setSearchValue(value)
+                            onChange={({ value }) =>
+                                setSearchValue(value || '')
                             }
                         />
                     </div>

src/components/SearchableSingleSelect/SearchableSingleSelect.tsx

@@ -134,9 +134,7 @@ export const SearchableSingleSelect = ({
                     <Input
                         dense
                         value={filter}
-                        onChange={({ value }: { value: string }) =>
-                            setFilterValue(value)
-                        }
+                        onChange={({ value }) => setFilterValue(value ?? '')}
                         placeholder={i18n.t('Filter options')}
                     />
                 </div>
@@ -154,7 +152,7 @@ export const SearchableSingleSelect = ({
                 <SingleSelectOption key={value} value={value} label={label} />
             ))}
 
-            {hasSelectedInOptionList && (
+            {hasSelectedInOptionList && selected && (
                 <SingleSelectOption
                     className={classes.invisibleOption}
                     value={selected}

src/components/date/ClientDateTime.tsx

@@ -0,0 +1,38 @@
+import { useTimeZoneConversion } from '@dhis2/app-runtime'
+import React, { useState } from 'react'
+import { selectedLocale } from '../../lib'
+
+type DateTimeFormatOptions = Intl.DateTimeFormatOptions
+
+const defaultDateTimeFormatter = new Intl.DateTimeFormat(selectedLocale, {
+    dateStyle: 'medium',
+    timeStyle: 'medium',
+})
+
+type ClientDateTimeProps = {
+    value?: string
+    options?: DateTimeFormatOptions
+}
+
+export const ClientDateTime = ({ value, options }: ClientDateTimeProps) => {
+    // NOTE: options cannot change after initial render
+    // this is to prevent having to memo the options object in the consuming component
+    const [dateTimeFormatter] = useState<Intl.DateTimeFormat>(() =>
+        options
+            ? new Intl.DateTimeFormat(selectedLocale, options)
+            : defaultDateTimeFormatter
+    )
+    const { fromServerDate } = useTimeZoneConversion()
+
+    if (!value) {
+        return null
+    }
+
+    const clientDate = fromServerDate(value)
+
+    return (
+        <span title={clientDate.getClientZonedISOString()}>
+            {dateTimeFormatter.format(clientDate)}
+        </span>
+    )
+}

src/components/date/index.ts

@@ -0,0 +1 @@
+export * from './ClientDateTime'

src/components/metadataFormControls/AggregationLevelMultiSelect/AggregationLevelMultiSelect.tsx

@@ -1,5 +1,5 @@
 import i18n from '@dhis2/d2-i18n'
-import { MultiSelect, MultiSelectOption } from '@dhis2/ui'
+import { MultiSelect, MultiSelectField, MultiSelectOption } from '@dhis2/ui'
 import React, { forwardRef, useImperativeHandle } from 'react'
 import classes from './AggregationLevelMultiSelect.module.css'
 import { useOptionsQuery } from './useOptionsQuery'
@@ -43,7 +43,7 @@
     function AggregationLevelMultiSelect(
         {
             onChange,
             inputWidth,
             invalid,
             selected,
             showAllOption,
@@ -64,7 +64,6 @@
 
         return (
             <MultiSelect
-                inputWidth={inputWidth}
                 placeholder={placeholder}
                 onChange={({ selected }: { selected: string[] }) => {
                     onChange({ selected })

src/components/metadataFormControls/LegendSetTransfer/LegendSetTransfer.tsx

@@ -82,7 +82,7 @@
         optionsQuery.fetching ||
         optionsQuery.loading ||
         initialOptionQuery.loading
     const error =
         optionsQuery.error || initialOptionQuery.error
             ? // @TODO: Ask Joe what do do here!
               'An error has occurred. Please try again'
@@ -100,7 +100,8 @@
     )
 
     const adjustQueryParamsWithChangedFilter = useCallback(
-        ({ value }: { value: string }) => {
+        ({ value }: { value: string | undefined }) => {
+            value = value ?? ''
             setSearchTerm(value)
             pageRef.current = 1
             refetch({ page: pageRef.current, filter: value })
@@ -131,7 +132,6 @@
             options={displayOptions}
             selected={selected}
             loading={loading}
-            error={error}
             onChange={({ selected }: { selected: string[] }) => {
                 const nextSelectedOptions = displayOptions.filter(({ value }) =>
                     selected.includes(value)