feat(de form): make fields with values from api dynamic

.ls-lint.yml

@@ -8,7 +8,7 @@ ls:
         .spec.tsx: PascalCase | camelCase
         .spec.ts: PascalCase | camelCase
         .tsx: PascalCase | camelCase
-        .module.css: PascalCase
+        .module.css: PascalCase | camelCase
         .d.ts: kebab-case
 
     cypress:

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-09-05T13:18:37.488Z\n"
-"PO-Revision-Date: 2023-09-05T13:18:37.488Z\n"
+"POT-Creation-Date: 2023-09-07T15:17:39.440Z\n"
+"PO-Revision-Date: 2023-09-07T15:17:39.440Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -54,18 +54,30 @@ msgstr "Retry"
 msgid "All"
 msgstr "All"
 
-msgid "Category combo"
-msgstr "Category combo"
+msgid "Filter options"
+msgstr "Filter options"
 
 msgid "Failed to load {{label}}"
 msgstr "Failed to load {{label}}"
 
 msgid "Failed to load"
 msgstr "Failed to load"
 
+msgid "Aggregation level(s)"
+msgstr "Aggregation level(s)"
+
+msgid "Category combo"
+msgstr "Category combo"
+
 msgid "None"
 msgstr "None"
 
+msgid "Filter legend sets"
+msgstr "Filter legend sets"
+
+msgid "Option set"
+msgstr "Option set"
+
 msgid "Actions"
 msgstr "Actions"
 
@@ -303,9 +315,6 @@ msgstr "Attribute"
 msgid "Attributes"
 msgstr "Attributes"
 
-msgid "Option set"
-msgstr "Option set"
-
 msgid "Option sets"
 msgstr "Option sets"
 
@@ -609,21 +618,6 @@ msgstr "Disaggregation and Option sets"
 msgid "Set up disaggregation and predefined options."
 msgstr "Set up disaggregation and predefined options."
 
-msgid "Category combination (required)"
-msgstr "Category combination (required)"
-
-msgid "Choose how this data element is disaggregated"
-msgstr "Choose how this data element is disaggregated"
-
-msgid "Choose a set of predefined options for data entry"
-msgstr "Choose a set of predefined options for data entry"
-
-msgid "Option set comment"
-msgstr "Option set comment"
-
-msgid "Choose a set of predefined comment for data entry"
-msgstr "Choose a set of predefined comment for data entry"
-
 msgid "LegendSet"
 msgstr "LegendSet"
 
@@ -637,27 +631,12 @@ msgstr ""
 msgid "Aggregation levels"
 msgstr "Aggregation levels"
 
-msgid "Aggregation level(s)"
-msgstr "Aggregation level(s)"
-
 msgid "Custom attributes"
 msgstr "Custom attributes"
 
 msgid "Custom fields for your DHIS2 instance"
 msgstr "Custom fields for your DHIS2 instance"
 
-msgid "Selected legends"
-msgstr "Selected legends"
-
-msgid "Refresh list"
-msgstr "Refresh list"
-
-msgid "Add new"
-msgstr "Add new"
-
-msgid "Filter available legends"
-msgstr "Filter available legends"
-
 msgid "Color and icon"
 msgstr "Color and icon"
 
@@ -674,6 +653,15 @@ msgstr "Domain (required)"
 msgid "A data element can either be aggregated or tracked data."
 msgstr "A data element can either be aggregated or tracked data."
 
+msgid "Selected legends"
+msgstr "Selected legends"
+
+msgid "Refresh list"
+msgstr "Refresh list"
+
+msgid "Add new"
+msgstr "Add new"
+
 msgid "Value type (required)"
 msgstr "Value type (required)"
 
@@ -686,6 +674,21 @@ msgstr "Aggretation type (required)"
 msgid "The default way to aggregate this data element in analytics."
 msgstr "The default way to aggregate this data element in analytics."
 
+msgid "Category combination (required)"
+msgstr "Category combination (required)"
+
+msgid "Choose how this data element is disaggregated"
+msgstr "Choose how this data element is disaggregated"
+
+msgid "Choose a set of predefined options for data entry"
+msgstr "Choose a set of predefined options for data entry"
+
+msgid "Option set comment"
+msgstr "Option set comment"
+
+msgid "Choose a set of predefined comment for data entry"
+msgstr "Choose a set of predefined comment for data entry"
+
 msgid "Metadata management"
 msgstr "Metadata management"
 

src/App.tsx

@@ -1,6 +1,20 @@
 import React from 'react'
 import { AppWrapper, ConfiguredRouter } from './app/'
 
+// @TODO: Find a solution for these!
+const consoleWarnOrig = console.warn
+console.warn = (...args) => {
+    const msg = args[0]
+
+    if (
+        !msg.startsWith('The query should be static') &&
+        !msg.startsWith('Data queries with paging=false are deprecated') &&
+        !msg.startsWith('StyleSheet: illegal rule:')
+    ) {
+        consoleWarnOrig(...args)
+    }
+}
+
 const MyApp = () => (
     <AppWrapper>
         <ConfiguredRouter />

src/components/SearchableSingleSelect/SearchableSingleSelect.module.css

@@ -43,7 +43,7 @@
     position: sticky;
     top: 0;
     padding: var(--spacers-dp16);
-    boxShadow: 0 0 4px rgba(0,0,0,0.4);
+    box-shadow: 0 0 4px rgba(0,0,0,0.4);
     background: var(--colors-white);
 }
 

src/components/SearchableSingleSelect/SearchableSingleSelect.tsx

@@ -5,8 +5,9 @@ import {
     SingleSelect,
     SingleSelectOption,
 } from '@dhis2/ui'
-import React, { forwardRef, useCallback, useEffect, useState } from 'react'
-import { useDebouncedCallback } from 'use-debounce'
+import React, { forwardRef, useEffect, useState } from 'react'
+// import { useDebouncedCallback } from 'use-debounce'
+import { useDebouncedState } from '../../lib'
 import classes from './SearchableSingleSelect.module.css'
 
 interface Option {
@@ -53,41 +54,38 @@ interface SearchableSingleSelectPropTypes {
     onEndReached: () => void
     onRetryClick: () => void
     options: Option[]
+    placeholder: string
     showEndLoader: boolean
     loading: boolean
     selected?: string
     error?: string
     showAllOption?: boolean
+    onBlur?: () => void
+    onFocus?: () => void
 }
 
 export const SearchableSingleSelect = ({
-    showAllOption,
     error,
     loading,
+    placeholder,
+    onBlur,
     onChange,
-    onFilterChange,
     onEndReached,
+    onFilterChange,
+    onFocus,
+    onRetryClick,
     options,
     selected,
+    showAllOption,
     showEndLoader,
-    onRetryClick,
 }: SearchableSingleSelectPropTypes) => {
     const [loadingSpinnerRef, setLoadingSpinnerRef] = useState<HTMLElement>()
-    const debouncedOnFilterChange = useDebouncedCallback<OnFilterChange>(
-        (args) => onFilterChange(args),
-        200
-    )
 
-    // We want to defer the actual filter value so we don't send a request with
-    // every key stroke
-    const [filterValue, _setFilterValue] = useState('')
-    const setFilterValue = useCallback(
-        (nextFilterValue: string) => {
-            _setFilterValue(nextFilterValue)
-            debouncedOnFilterChange({ value: nextFilterValue })
-        },
-        [debouncedOnFilterChange]
-    )
+    const { liveValue: filter, setValue: setFilterValue } =
+        useDebouncedState<string>({
+            initialValue: '',
+            onSetDebouncedValue: (value: string) => onFilterChange({ value }),
+        })
 
     useEffect(() => {
         // We don't want to wait for intersections when loading as that can
@@ -124,22 +122,25 @@ export const SearchableSingleSelect = ({
             // any value to the "selected" prop, as otherwise an error will be thrown
             selected={hasSelectedInOptionList ? selected : ''}
             onChange={onChange}
-            placeholder={i18n.t('Category combo')}
+            placeholder={placeholder}
+            onBlur={onBlur}
+            onFocus={onFocus}
         >
             <div className={classes.searchField}>
                 <div className={classes.searchInput}>
                     <Input
                         dense
-                        value={filterValue}
+                        value={filter}
                         onChange={({ value }: { value: string }) =>
                             setFilterValue(value)
                         }
+                        placeholder={i18n.t('Filter options')}
                     />
                 </div>
 
                 <button
                     className={classes.clearButton}
-                    disabled={!filterValue}
+                    disabled={!filter}
                     onClick={() => setFilterValue('')}
                 >
                     clear

src/components/index.tsx

@@ -1,7 +1,7 @@
 export * from './ColorAndIconPicker'
 export { Loader } from './loading'
 export { HidePreventUnmount } from './HidePreventUnmount'
-export * from './metadataSelects'
+export * from './metadataFormControls'
 export * from './SearchableSingleSelect'
 export * from './sectionList'
 export * from './standardForm'

src/components/metadataFormControls/AggregationLevelMultiSelect/AggregationLevelMultiSelect.module.css

@@ -0,0 +1,32 @@
+.error {
+    display: block;
+    font-size: 14px;
+    padding: var(--spacers-dp8);
+    color: var(--theme-error);
+}
+
+.error {
+    display: flex;
+    justify-content: center;
+    font-size: 14px;
+    padding: var(--spacers-dp12) 16px;
+}
+
+.errorInnerWrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.loadingErrorLabel {
+    color: var(--theme-error);
+}
+
+.errorRetryButton {
+    background: none;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: underline;
+    cursor: pointer;
+}