feat(merge): indicator types merge

src/app/layout/Layout.module.css

@@ -39,6 +39,7 @@
 .sidebar.hide {
     width: 0px;
     height: 0px;
+    visibility: hidden;
 }
 
 .pageTitle {

src/app/routes/Router.tsx

@@ -22,6 +22,7 @@ import {
     isValidUid,
     routePaths,
     getOverviewPath,
+    isMergableSection,
 } from '../../lib'
 import { OverviewSection } from '../../types'
 import { Layout, Breadcrumbs, BreadcrumbItem } from '../layout'
@@ -69,7 +70,7 @@ function createOverviewLazyRouteFunction(
 
 function createSectionLazyRouteFunction(
     section: Section,
-    componentFileName: string
+    componentFileName: 'New' | 'Edit' | 'List' | 'Merge'
 ) {
     return async () => {
         try {
@@ -166,6 +167,24 @@ const schemaSectionRoutes = Object.values(SCHEMA_SECTIONS).map((section) => (
                     }
                 />
             )}
+            {isMergableSection(section) && (
+                <Route
+                    path={routePaths.merge}
+                    lazy={createSectionLazyRouteFunction(section, 'Merge')}
+                    handle={
+                        {
+                            crumb: (matchInfo) => (
+                                <BreadcrumbItem
+                                    label={i18n.t('Merge {{modelName}}', {
+                                        modelName: section.titlePlural,
+                                    })}
+                                    to={matchInfo.pathname}
+                                />
+                            ),
+                        } satisfies RouteHandle
+                    }
+                />
+            )}
             <Route path=":id" element={<VerifyModelId />}>
                 <Route
                     index

src/components/SearchableMultiSelect/SearchableMultiSelect.module.css

@@ -0,0 +1,71 @@
+.invisibleOption {
+    display: none;
+}
+
+.loader {
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-top: 20px;
+    overflow: hidden;
+}
+
+.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;
+}
+
+.multiSelect {
+    min-width: 150px;
+}
+.searchField {
+    display: flex;
+    gap: var(--spacers-dp8);
+    position: sticky;
+    top: 0;
+    padding: var(--spacers-dp16);
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
+    background: var(--colors-white);
+}
+
+.searchInput {
+    flex-grow: 1;
+}
+
+.clearButton {
+    font-size: 14px;
+    flex-grow: 0;
+    background: none;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.clearButton:hover {
+    color: var(--theme-valid);
+    text-decoration: none;
+}

src/components/SearchableMultiSelect/SearchableMultiSelect.tsx

@@ -0,0 +1,154 @@
+import i18n from '@dhis2/d2-i18n'
+import {
+    CircularLoader,
+    Input,
+    MultiSelect,
+    MultiSelectOption,
+    MultiSelectProps,
+} from '@dhis2/ui'
+import React, { forwardRef, useEffect, useState } from 'react'
+import { useDebouncedState } from '../../lib'
+import classes from './SearchableMultiSelect.module.css'
+
+export interface Option {
+    value: string
+    label: string
+}
+
+type OwnProps = {
+    onEndReached?: () => void
+    onFilterChange: ({ value }: { value: string }) => void
+    onRetryClick: () => void
+    options: Option[]
+    showEndLoader?: boolean
+    error?: string
+}
+
+export type SearchableMultiSelectPropTypes = Omit<
+    MultiSelectProps,
+    keyof OwnProps
+> &
+    OwnProps
+export const SearchableMultiSelect = ({
+    disabled,
+    error,
+    dense,
+    loading,
+    placeholder,
+    prefix,
+    onBlur,
+    onChange,
+    onEndReached,
+    onFilterChange,
+    onFocus,
+    onRetryClick,
+    options,
+    selected,
+    showEndLoader,
+}: SearchableMultiSelectPropTypes) => {
+    const [loadingSpinnerRef, setLoadingSpinnerRef] = useState<HTMLElement>()
+
+    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
+        // cause buggy behavior
+        if (loadingSpinnerRef && !loading) {
+            const observer = new IntersectionObserver(
+                (entries) => {
+                    const [{ isIntersecting }] = entries
+
+                    if (isIntersecting) {
+                        onEndReached?.()
+                    }
+                },
+                { threshold: 0.8 }
+            )
+
+            observer.observe(loadingSpinnerRef)
+            return () => observer.disconnect()
+        }
+    }, [loadingSpinnerRef, loading, onEndReached])
+
+    return (
+        <MultiSelect
+            className={classes.multiSelect}
+            selected={selected}
+            disabled={disabled}
+            error={!!error}
+            onChange={onChange}
+            placeholder={placeholder}
+            prefix={prefix}
+            onBlur={onBlur}
+            onFocus={onFocus}
+            dense={dense}
+            clearable={selected && selected.length > 1}
+        >
+            <div className={classes.searchField}>
+                <div className={classes.searchInput}>
+                    <Input
+                        dense
+                        initialFocus
+                        value={filter}
+                        onChange={({ value }) => setFilterValue(value ?? '')}
+                        placeholder={i18n.t('Filter options')}
+                        type="search"
+                    />
+                </div>
+            </div>
+
+            {options.map(({ value, label }) => (
+                <MultiSelectOption key={value} value={value} label={label} />
+            ))}
+
+            {!error && !loading && showEndLoader && (
+                <Loader
+                    ref={(ref) => {
+                        if (!!ref && ref !== loadingSpinnerRef) {
+                            setLoadingSpinnerRef(ref)
+                        }
+                    }}
+                />
+            )}
+
+            {!error && loading && <Loader />}
+
+            {error && <Error msg={error} onRetryClick={onRetryClick} />}
+        </MultiSelect>
+    )
+}
+
+const Loader = forwardRef<HTMLDivElement, object>(function Loader(_, ref) {
+    return (
+        <div ref={ref} className={classes.loader}>
+            <CircularLoader />
+        </div>
+    )
+})
+
+function Error({
+    msg,
+    onRetryClick,
+}: {
+    msg: string
+    onRetryClick: () => void
+}) {
+    return (
+        <div className={classes.error}>
+            <div className={classes.errorInnerWrapper}>
+                <span className={classes.loadingErrorLabel}>{msg}</span>
+                <button
+                    className={classes.errorRetryButton}
+                    type="button"
+                    onClick={onRetryClick}
+                >
+                    {i18n.t('Retry')}
+                </button>
+            </div>
+        </div>
+    )
+}

src/components/SearchableMultiSelect/index.ts

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

src/components/SearchableSingleSelect/SearchableSingleSelect.tsx

@@ -145,16 +145,9 @@ export const SearchableSingleSelect = ({
                         value={filter}
                         onChange={({ value }) => setFilterValue(value ?? '')}
                         placeholder={i18n.t('Filter options')}
+                        type="search"
                     />
                 </div>
-
-                <button
-                    className={classes.clearButton}
-                    disabled={!filter}
-                    onClick={() => setFilterValue('')}
-                >
-                    clear
-                </button>
             </div>
 
             {withAllOptions.map(({ value, label }) => (

src/components/merge/DefaultMergeFormContents.tsx

@@ -0,0 +1,62 @@
+import i18n from '@dhis2/d2-i18n'
+import { Button, ButtonStrip, CircularLoader } from '@dhis2/ui'
+import React from 'react'
+import { useFormState } from 'react-final-form'
+import { DefaultFormErrorNotice } from '../form/DefaultFormErrorNotice'
+import { LinkButton } from '../LinkButton'
+
+export const DefaultMergeFormContents = ({
+    children,
+}: React.PropsWithChildren) => {
+    const { submitting, submitSucceeded } = useFormState({
+        subscription: { submitting: true, submitSucceeded: true },
+    })
+
+    if (submitSucceeded) {
+        return <MergeComplete />
+    }
+
+    return (
+        <div>
+            {submitting && <MergeInProgress />}
+            {!submitting && !submitSucceeded && (
+                <>
+                    {children}
+                    <DefaultFormErrorNotice />
+                    <MergeActions />
+                </>
+            )}
+        </div>
+    )
+}
+
+export const MergeActions = () => {
+    return (
+        <ButtonStrip>
+            <Button primary type="submit">
+                {i18n.t('Merge')}
+            </Button>
+            <LinkButton to={'../'} secondary>
+                {i18n.t('Cancel')}
+            </LinkButton>
+        </ButtonStrip>
+    )
+}
+
+export const MergeInProgress = () => {
+    return (
+        <div>
+            <CircularLoader small />
+            Merging...
+        </div>
+    )
+}
+
+export const MergeComplete = () => {
+    return (
+        <div>
+            <h2>Merge complete</h2>
+            <LinkButton to="../">{i18n.t('Back to list')}</LinkButton>
+        </div>
+    )
+}