Merge pull request #357 from dhis2/DHIS2-14656-small-improvements

* fix(edit de): allow removing nested values * fix(searchable single selects): add posibility to deselect * fix(color and icon picker): add remove icon btn & adjust styles according to specs * feat(de form): add aggregation level intro text * feat(de edit and new): handle loading and error states correctly * fix(searchable single selects): use old-app default labels * fix(form): fix render 0 when empty custom attributes * feat(custom attributes): add "No value" option to optionset attributes * fix(de form fields): make text translatable * fix(custom attributes optionsets): add no-value-option only when not required
dhis2 · Nov 15, 2023 · db58c2d · db58c2d
2 parents 9ecd37d + c10ec33
commit db58c2d
Show file tree

Hide file tree

Showing 19 changed files with 237 additions and 211 deletions.
diff --git a/i18n/en.pot b/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-10-11T10:29:42.492Z\n"
-"PO-Revision-Date: 2023-10-11T10:29:42.492Z\n"
+"POT-Creation-Date: 2023-10-25T11:43:32.223Z\n"
+"PO-Revision-Date: 2023-10-25T11:43:32.223Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -48,6 +48,15 @@ msgstr "Search for menu items"
 msgid "Search icons"
 msgstr "Search icons"
 
+msgid "Select"
+msgstr "Select"
+
+msgid "Remove icon"
+msgstr "Remove icon"
+
+msgid "Cancel"
+msgstr "Cancel"
+
 msgid "Retry"
 msgstr "Retry"
 
@@ -69,12 +78,15 @@ msgstr "Aggregation level(s)"
 msgid "Category combo"
 msgstr "Category combo"
 
-msgid "None"
-msgstr "None"
+msgid "Default (none)"
+msgstr "Default (none)"
 
 msgid "Filter legend sets"
 msgstr "Filter legend sets"
 
+msgid "None"
+msgstr "None"
+
 msgid "Option set"
 msgstr "Option set"
 
@@ -108,9 +120,6 @@ msgstr "Type to filter options"
 msgid "No matches"
 msgstr "No matches"
 
-msgid "Data set"
-msgstr "Data set"
-
 msgid "Clear all filters"
 msgstr "Clear all filters"
 
@@ -135,9 +144,6 @@ msgstr "Failed to save"
 msgid "Manage {{section}} table columns"
 msgstr "Manage {{section}} table columns"
 
-msgid "Cancel"
-msgstr "Cancel"
-
 msgid "Update table columns"
 msgstr "Update table columns"
 
@@ -213,6 +219,9 @@ msgstr "Data element group set"
 msgid "Data element group sets"
 msgstr "Data element group sets"
 
+msgid "Data set"
+msgstr "Data set"
+
 msgid "Data sets"
 msgstr "Data sets"
 
@@ -597,6 +606,9 @@ msgstr "Owner"
 msgid "Zero is significant"
 msgstr "Zero is significant"
 
+msgid "Custom attributes"
+msgstr "Custom attributes"
+
 msgid "Something went wrong when submitting the form"
 msgstr "Something went wrong when submitting the form"
 
@@ -621,9 +633,6 @@ msgstr "{{fieldLabel}} (required)"
 msgid "A data element name should be concise and easy to recognize."
 msgstr "A data element name should be concise and easy to recognize."
 
-msgid "Short name"
-msgstr "Short name"
-
 msgid "Often used in reports where space is limited"
 msgstr "Often used in reports where space is limited"
 
@@ -676,9 +685,6 @@ msgstr ""
 msgid "Aggregation levels"
 msgstr "Aggregation levels"
 
-msgid "Custom attributes"
-msgstr "Custom attributes"
-
 msgid "Custom fields for your DHIS2 instance"
 msgstr "Custom fields for your DHIS2 instance"
 
@@ -704,9 +710,6 @@ msgstr "Refresh list"
 msgid "Add new"
 msgstr "Add new"
 
-msgid "Value type"
-msgstr "Value type"
-
 msgid "The type of data that will be recorded."
 msgstr "The type of data that will be recorded."
 

diff --git a/src/components/ColorAndIconPicker/ColorAndIconPicker.tsx b/src/components/ColorAndIconPicker/ColorAndIconPicker.tsx
@@ -17,7 +17,6 @@ export function ColorAndIconPicker({
     return (
         <div className={classes.container}>
             <ColorPicker color={color} onColorPick={onColorPick} />
-
             <IconPicker icon={icon} onIconPick={onIconPick} />
         </div>
     )

diff --git a/src/components/ColorAndIconPicker/ColorPicker.module.css b/src/components/ColorAndIconPicker/ColorPicker.module.css
@@ -3,7 +3,7 @@
     gap: var(--spacers-dp8);
     padding: var(--spacers-dp8);
     border-radius: 3px;
-    border: 1px solid var(--colors-grey600);
+    border: 1px solid var(--colors-grey500);
     background: var(--colors-white);
     width: 68px;
     cursor: pointer;
@@ -15,7 +15,8 @@
     justify-content: center;
     height: 26px;
     width: 26px;
-    border: 1px solid var(--colors-black);
+    border: 1px dashed var(--colors-grey400);
+    border-radius: 2px;
 }
 
 .hasColor .chosenColor {

diff --git a/src/components/ColorAndIconPicker/ColorPicker.tsx b/src/components/ColorAndIconPicker/ColorPicker.tsx
@@ -1,57 +1,10 @@
-import {
-    IconChevronDown16,
-    IconChevronUp16,
-    IconEmptyFrame24,
-    Layer,
-    Popper,
-} from '@dhis2/ui'
+import { IconChevronDown16, IconChevronUp16, Layer, Popper } from '@dhis2/ui'
 import cx from 'classnames'
 import React, { useRef, useState } from 'react'
 import { SwatchesPicker } from 'react-color'
+import { AVAILABLE_COLORS } from './availableColors'
 import classes from './ColorPicker.module.css'
 
-const COLORS = [
-    [
-        '#ffcdd2',
-        '#e57373',
-        '#d32f2f',
-        '#f06292',
-        '#c2185b',
-        '#880e4f',
-        '#f50057',
-    ],
-    [
-        '#e1bee7',
-        '#ba68c8',
-        '#8e24aa',
-        '#aa00ff',
-        '#7e57c2',
-        '#4527a0',
-        '#7c4dff',
-        '#6200ea',
-    ],
-    ['#c5cae9', '#7986cb', '#3949ab', '#304ffe'],
-    ['#e3f2fd', '#64b5f6', '#1976d2', '#0288d1'],
-    ['#40c4ff', '#00b0ff', '#80deea'],
-    ['#00acc1', '#00838f', '#006064'],
-    ['#e0f2f1', '#80cbc4', '#00695c', '#64ffda'],
-    ['#c8e6c9', '#66bb6a', '#2e7d32', '#1b5e20'],
-    ['#00e676', '#aed581', '#689f38', '#33691e'],
-    ['#76ff03', '#64dd17', '#cddc39', '#9e9d24', '#827717'],
-    [
-        '#fff9c4',
-        '#fbc02d',
-        '#f57f17',
-        '#ffff00',
-        '#ffcc80',
-        '#ffccbc',
-        '#ffab91',
-    ],
-    ['#bcaaa4', '#8d6e63', '#4e342e'],
-    ['#fafafa', '#bdbdbd', '#757575', '#424242'],
-    ['#cfd8dc', '#b0bec5', '#607d8b', '#37474f'],
-]
-
 export function ColorPicker({
     onColorPick,
     color = '',
@@ -74,9 +27,7 @@ export function ColorPicker({
                 <div
                     className={classes.chosenColor}
                     style={{ background: color }}
-                >
-                    {!color && <IconEmptyFrame24 />}
-                </div>
+                />
 
                 <div className={classes.openCloseIconContainer}>
                     {showPicker ? <IconChevronUp16 /> : <IconChevronDown16 />}
@@ -88,7 +39,7 @@ export function ColorPicker({
                     <Popper placement="bottom-start" reference={ref}>
                         <div className={classes.colors}>
                             <SwatchesPicker
-                                presetColors={COLORS}
+                                presetColors={AVAILABLE_COLORS}
                                 color={color}
                                 onChangeComplete={({
                                     hex,

diff --git a/src/components/ColorAndIconPicker/IconPicker.module.css b/src/components/ColorAndIconPicker/IconPicker.module.css
@@ -3,7 +3,7 @@
     gap: var(--spacers-dp8);
     padding: var(--spacers-dp8);
     border-radius: 3px;
-    border: 1px solid var(--colors-grey600);
+    border: 1px solid var(--colors-grey500);
     background: var(--colors-white);
     width: 68px;
     cursor: pointer;
@@ -15,7 +15,13 @@
     justify-content: center;
     height: 26px;
     width: 26px;
-    border: 1px solid var(--colors-black);
+    border: 1px dashed var(--colors-grey400);
+    border-radius: 2px;
+}
+
+.hasIcon .chosenIcon {
+    border: 0;
+    border-radius: 0;
 }
 
 .iconImage {
@@ -24,10 +30,6 @@
     height: auto;
 }
 
-.hasIcon .chosenIcon {
-    border: 0;
-}
-
 .openCloseIconContainer {
     display: flex;
     align-items: center;

diff --git a/src/components/ColorAndIconPicker/IconPicker.tsx b/src/components/ColorAndIconPicker/IconPicker.tsx
@@ -1,4 +1,4 @@
-import { IconChevronDown16, IconChevronUp16, IconEmptyFrame24 } from '@dhis2/ui'
+import { IconChevronDown16, IconChevronUp16 } from '@dhis2/ui'
 import cx from 'classnames'
 import React, { useState } from 'react'
 import classes from './IconPicker.module.css'
@@ -25,7 +25,6 @@ export function IconPicker({
                 })}
             >
                 <div className={classes.chosenIcon}>
-                    {!icon && <IconEmptyFrame24 />}
                     {selectedIcon && (
                         <img
                             className={classes.iconImage}
@@ -42,6 +41,7 @@ export function IconPicker({
 
             {showPicker && (
                 <IconPickerModal
+                    selected={icon}
                     onCancel={() => setShowPicker(false)}
                     onChange={({ icon }) => {
                         onIconPick({ icon })

diff --git a/src/components/ColorAndIconPicker/IconPickerModal.tsx b/src/components/ColorAndIconPicker/IconPickerModal.tsx
@@ -19,15 +19,17 @@ import { useIconsQuery, Icon } from './useIconsQuery'
 type TabName = 'all' | 'positive' | 'negative' | 'outline'
 
 export function IconPickerModal({
+    selected,
     onChange,
     onCancel,
 }: {
+    selected: string
     onChange: ({ icon }: { icon: string }) => void
     onCancel: () => void
 }) {
     const [searchValue, setSearchValue] = useState('')
     const [activeTab, setActiveTab] = useState<TabName>('all')
-    const [icon, setIcon] = useState('')
+    const [icon, setIcon] = useState(selected)
     const icons = useIconsQuery()
     const displayIcons = searchValue
         ? filterIcons(icons.data[activeTab], searchValue)
@@ -107,11 +109,15 @@ export function IconPickerModal({
                         disabled={!icon}
                         onClick={() => onChange({ icon })}
                     >
-                        Select
+                        {i18n.t('Select')}
+                    </Button>
+
+                    <Button onClick={() => onChange({ icon: '' })}>
+                        {i18n.t('Remove icon')}
                     </Button>
 
                     <Button secondary onClick={onCancel}>
-                        Cancel
+                        {i18n.t('Cancel')}
                     </Button>
                 </ButtonStrip>
             </ModalActions>

diff --git a/src/components/ColorAndIconPicker/availableColors.ts b/src/components/ColorAndIconPicker/availableColors.ts
@@ -0,0 +1,41 @@
+export const AVAILABLE_COLORS = [
+    [
+        '#ffcdd2',
+        '#e57373',
+        '#d32f2f',
+        '#f06292',
+        '#c2185b',
+        '#880e4f',
+        '#f50057',
+    ],
+    [
+        '#e1bee7',
+        '#ba68c8',
+        '#8e24aa',
+        '#aa00ff',
+        '#7e57c2',
+        '#4527a0',
+        '#7c4dff',
+        '#6200ea',
+    ],
+    ['#c5cae9', '#7986cb', '#3949ab', '#304ffe'],
+    ['#e3f2fd', '#64b5f6', '#1976d2', '#0288d1'],
+    ['#40c4ff', '#00b0ff', '#80deea'],
+    ['#00acc1', '#00838f', '#006064'],
+    ['#e0f2f1', '#80cbc4', '#00695c', '#64ffda'],
+    ['#c8e6c9', '#66bb6a', '#2e7d32', '#1b5e20'],
+    ['#00e676', '#aed581', '#689f38', '#33691e'],
+    ['#76ff03', '#64dd17', '#cddc39', '#9e9d24', '#827717'],
+    [
+        '#fff9c4',
+        '#fbc02d',
+        '#f57f17',
+        '#ffff00',
+        '#ffcc80',
+        '#ffccbc',
+        '#ffab91',
+    ],
+    ['#bcaaa4', '#8d6e63', '#4e342e'],
+    ['#fafafa', '#bdbdbd', '#757575', '#424242'],
+    ['#cfd8dc', '#b0bec5', '#607d8b', '#37474f'],
+]
diff --git a/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx b/src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx
@@ -1,22 +1,20 @@
 import i18n from '@dhis2/d2-i18n'
 import React, { forwardRef } from 'react'
 import { ModelSingleSelect } from '../ModelSingleSelect'
+import type { ModelSingleSelectProps } from '../ModelSingleSelect'
 import { useInitialOptionQuery } from './useInitialOptionQuery'
 import { useOptionsQuery } from './useOptionsQuery'
 
-interface CategoryComboSelectProps {
-    onChange: ({ selected }: { selected: string }) => void
-    placeholder?: string
-    selected?: string
-    showAllOption?: boolean
-    onBlur?: () => void
-    onFocus?: () => void
-}
+type CategoryComboSelectProps = Omit<
+    ModelSingleSelectProps,
+    'useInitialOptionQuery' | 'useOptionsQuery'
+>
 
 export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
     {
         onChange,
         placeholder = i18n.t('Category combo'),
+        required,
         selected,
         showAllOption,
         onBlur,
@@ -27,6 +25,7 @@ export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
     return (
         <ModelSingleSelect
             ref={ref}
+            required={required}
             useInitialOptionQuery={useInitialOptionQuery}
             useOptionsQuery={useOptionsQuery}
             placeholder={placeholder}