Merge branch 'DHIS2-14656-small-improvements' into demo

dhis2 · Oct 24, 2023 · 8f6786b · 8f6786b
2 parents d69f83c + f3c2b32
commit 8f6786b
Show file tree

Hide file tree

Showing 19 changed files with 225 additions and 191 deletions.
diff --git a/i18n/en.pot b/i18n/en.pot
@@ -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"
 

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}

diff --git a/src/components/metadataFormControls/CategoryComboSelect/useOptionsQuery.ts b/src/components/metadataFormControls/CategoryComboSelect/useOptionsQuery.ts
@@ -62,6 +62,8 @@ export function useOptionsQuery() {
                     const { id, displayName, isDefault } = catCombo
                     return {
                         value: id,
+                        // This should be distinguishable from other selects
+                        // where "none" means no selection
                         label: isDefault ? i18n.t('None') : displayName,
                     }
                 }) || []),

diff --git a/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx b/src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx
@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n'
 import React, {
     forwardRef,
     useCallback,
@@ -12,10 +13,12 @@ import { SearchableSingleSelect } from '../../SearchableSingleSelect'
 function computeDisplayOptions({
     selected,
     selectedOption,
+    required,
     options,
 }: {
     options: SelectOption[]
     selected?: string
+    required?: boolean
     selectedOption?: SelectOption
 }): SelectOption[] {
     // This happens only when we haven't fetched the lable for an initially
@@ -29,11 +32,20 @@ function computeDisplayOptions({
         ({ value }) => value === selected
     )
 
-    if (selectedOption && !optionsContainSelected) {
-        return [...options, selectedOption]
+    const withSelectedOption =
+        selectedOption && !optionsContainSelected
+            ? [...options, selectedOption]
+            : options
+
+    if (!required) {
+        // This default value has been copied from the old app
+        return [
+            { value: '', label: i18n.t('<No value>') },
+            ...withSelectedOption,
+        ]
     }
 
-    return options
+    return withSelectedOption
 }
 
 type UseInitialOptionQuery = ({
@@ -44,8 +56,9 @@ type UseInitialOptionQuery = ({
     selected?: string
 }) => QueryResponse
 
-interface ModelSingleSelectProps {
+export interface ModelSingleSelectProps {
     onChange: ({ selected }: { selected: string }) => void
+    required?: boolean
     placeholder?: string
     selected?: string
     showAllOption?: boolean
@@ -55,14 +68,11 @@ interface ModelSingleSelectProps {
     useOptionsQuery: () => QueryResponse
 }
 
-export interface ModelSingleSelectHandle {
-    refetch: () => void
-}
-
 export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
     {
         onChange,
         placeholder = '',
+        required,
         selected,
         showAllOption,
         onBlur,
@@ -134,6 +144,7 @@ export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
     const displayOptions = computeDisplayOptions({
         selected,
         selectedOption,
+        required,
         options: result,
     })