feat: [DHIS2-19144] working lists performance options (#3989)

For event programs, enable optional configuration in the datastore for the working lists.

BREAKING CHANGE: Bump version to 102.0.0 to facilitate potential fixes for the bundled app in the 2.42 release

Author: JoakimSM

src/core_modules/capture-core/components/FiltersForTypes/index.js

@@ -17,6 +17,6 @@ export type { NumericFilterData } from './Numeric/types';
 export type { OptionSetFilterData } from './OptionSet/types';
 export type { TextFilterData } from './Text/types';
 export type { TrueOnlyFilterData } from './TrueOnly/types';
-export type { UpdatableFilterContent, FilterData } from './types';
+export type { UpdatableFilterContent, FilterData, FilterDataInput } from './types';
 
 export type { Options } from '../FormFields/Options/SelectBoxes';

src/core_modules/capture-core/components/FiltersForTypes/types/index.js

@@ -16,3 +16,5 @@ export type FilterData =
     OptionSetFilterData |
     TextFilterData |
     TrueOnlyFilterData;
+
+export type FilterDataInput = FilterData & { locked?: boolean };

src/core_modules/capture-core/components/ListView/Filters/FilterButton/FilterButtonMain.component.js

@@ -7,7 +7,8 @@ import { ChevronDown, ChevronUp } from 'capture-ui/Icons';
 import { ActiveFilterButton } from './ActiveFilterButton.component';
 import { FilterSelectorContents } from '../Contents';
 import type { UpdateFilter, ClearFilter, RemoveFilter } from '../../types';
-import type { FilterData, Options } from '../../../FiltersForTypes';
+import type { FilterData, Options, FilterDataInput } from '../../../FiltersForTypes';
+import { LockedFilterButton } from './LockedFilterButton.component';
 
 const getStyles = (theme: Theme) => ({
     icon: {
@@ -40,7 +41,7 @@ type Props = {
     isRemovable?: boolean,
     onSetVisibleSelector: Function,
     selectorVisible: boolean,
-    filterValue?: FilterData,
+    filterValue?: FilterDataInput,
     buttonText?: string,
     disabled?: boolean,
     tooltipContent?: string,
@@ -118,6 +119,7 @@ class FilterButtonMainPlain extends Component<Props, State> {
                 id={id}
                 onUpdate={this.handleFilterUpdate}
                 onClose={this.onClose}
+                // $FlowFixMe
                 filterValue={filterValue}
                 onRemove={this.onRemove}
                 isRemovable={isRemovable}
@@ -129,7 +131,7 @@ class FilterButtonMainPlain extends Component<Props, State> {
         this.activeFilterButtonInstance = activeFilterButtonInstance;
     }
 
-    renderWithAppliedFilter() {
+    renderActiveFilterButton() {
         const { selectorVisible, classes, title, buttonText } = this.props;
 
         const arrowIconElement = selectorVisible ? (
@@ -155,6 +157,21 @@ class FilterButtonMainPlain extends Component<Props, State> {
         );
     }
 
+    renderWithAppliedFilter() {
+        const { filterValue, title, buttonText } = this.props;
+
+        if (filterValue?.locked) {
+            return (
+                <LockedFilterButton
+                    title={title}
+                    buttonText={buttonText}
+                />
+            );
+        }
+
+        return this.renderActiveFilterButton();
+    }
+
     renderWithoutAppliedFilter() {
         const { selectorVisible, classes, title, disabled, tooltipContent } = this.props;
 

src/core_modules/capture-core/components/ListView/Filters/FilterButton/LockedFilterButton.component.js

@@ -0,0 +1,52 @@
+// @flow
+import React, { useCallback, useMemo } from 'react';
+import i18n from '@dhis2/d2-i18n';
+import { withStyles } from '@material-ui/core/styles';
+import { Tooltip, Button } from '@dhis2/ui';
+
+
+const getStyles = () => ({
+    button: {
+        cursor: 'not-allowed !important',
+    },
+});
+
+type Props = {
+    classes: {
+        button: string,
+    },
+    title: string,
+    buttonText?: string,
+};
+
+const MAX_LENGTH_OF_VALUE = 10;
+
+const LockedFilterButtonPlain = ({ classes, title, buttonText = '' }: Props) => {
+    const getCappedValue = useCallback((value: string) => {
+        const cappedValue = value.substring(0, MAX_LENGTH_OF_VALUE - 3).trimRight();
+        return `${cappedValue}...`;
+    }, []);
+
+    const viewValueForFiter = useMemo(() => {
+        const calculatedValue = buttonText.length > MAX_LENGTH_OF_VALUE ? getCappedValue(buttonText) : buttonText;
+        return `: ${calculatedValue}`;
+    }, [buttonText, getCappedValue]);
+
+    return (
+        <Tooltip
+            content={`${i18n.t('Locked to:')} ${buttonText}`}
+            placement={'bottom'}
+            openDelay={300}
+        >
+            <Button
+                className={classes.button}
+                disabled
+            >
+                {title}
+                {viewValueForFiter}
+            </Button>
+        </Tooltip>
+    );
+};
+
+export const LockedFilterButton = withStyles(getStyles)(LockedFilterButtonPlain);

src/core_modules/capture-core/components/ListView/Filters/FilterButton/buttonTextBuilder/converters/dateConverter.js

@@ -63,7 +63,7 @@ export function convertDate(filter: DateFilterData): string {
         return translatedPeriods[filter.period];
     }
     if (areRelativeRangeValuesSupported(filter.startBuffer, filter.endBuffer)) {
-        return translatedPeriods[periods.RELATIVE_RANGE];
+        return `${translatedPeriods[periods.RELATIVE_RANGE]} (${filter.startBuffer ?? ''} -> ${filter.endBuffer ?? ''})`;
     }
     return '';
 }

src/core_modules/capture-core/components/Pages/MainPage/EventWorkingListsInit/ConnectionStatusResolver/EventWorkingListsInitConnectionStatusResolver.component.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import { EventWorkingListsInitHeader } from '../Header';
 import { EventWorkingListsOffline } from '../../../../WorkingLists/EventWorkingListsOffline';
-import { EventWorkingListsInitRunningMutationsHandler } from '../RunningMutationsHandler';
+import { EventWorkingListsInitOnline } from '../InitOnline';
 import type { Props } from './eventWorkingListsInitConnectionStatusResolver.types';
 
 export const EventWorkingListsInitConnectionStatusResolver = ({ isOnline, storeId, ...passOnProps }: Props) => (
@@ -13,7 +13,7 @@ export const EventWorkingListsInitConnectionStatusResolver = ({ isOnline, storeI
                     storeId={storeId}
                 />
                 :
-                <EventWorkingListsInitRunningMutationsHandler
+                <EventWorkingListsInitOnline
                     {...passOnProps}
                     storeId={storeId}
                 />

src/core_modules/capture-core/components/Pages/MainPage/EventWorkingListsInit/InitOnline/EventWorkingListsInitOnline.component.js

@@ -0,0 +1,25 @@
+// @flow
+import React from 'react';
+import { withLoadingIndicator } from '../../../../../HOC';
+import { EventWorkingLists } from '../../../../WorkingLists/EventWorkingLists';
+import { useMainViewConfig } from './useMainViewConfig';
+import type { Props } from './eventWorkingListsInitOnline.types';
+
+const EventWorkingListsWithLoadingIndicator = withLoadingIndicator()(EventWorkingLists);
+
+export const EventWorkingListsInitOnline = ({
+    mutationInProgress,
+    ...passOnProps
+}: Props) => {
+    // Retrieving the viewConfig this high up in the component tree because this is capture app specific config
+    // The EventWorkingLists can potentially be included a standalone Widget library in the future
+    const { mainViewConfig, mainViewConfigReady } = useMainViewConfig();
+
+    return (
+        <EventWorkingListsWithLoadingIndicator
+            {...passOnProps}
+            ready={!mutationInProgress && mainViewConfigReady}
+            mainViewConfig={mainViewConfig}
+        />
+    );
+};

…istsInitRunningMutationsHandler.types.js …ine/eventWorkingListsInitOnline.types.jssrc/core_modules/capture-core/components/Pages/MainPage/EventWorkingListsInit/RunningMutationsHandler/eventWorkingListsInitRunningMutationsHandler.types.js renamed to src/core_modules/capture-core/components/Pages/MainPage/EventWorkingListsInit/InitOnline/eventWorkingListsInitOnline.types.js src/core_modules/capture-core/components/Pages/MainPage/EventWorkingListsInit/RunningMutationsHandler/eventWorkingListsInitRunningMutationsHandler.types.js renamed to src/core_modules/capture-core/components/Pages/MainPage/EventWorkingListsInit/InitOnline/eventWorkingListsInitOnline.types.js

@@ -0,0 +1,2 @@
+// @flow
+export { EventWorkingListsInitOnline } from './EventWorkingListsInitOnline.component';

src/core_modules/capture-core/components/Pages/MainPage/EventWorkingListsInit/InitOnline/index.js

@@ -0,0 +1,99 @@
+// @flow
+/* eslint-disable complexity */
+import { isNumber, isObject } from 'lodash';
+import log from 'loglevel';
+import { errorCreator } from 'capture-core-utils';
+import { useEffect } from 'react';
+import { useApiMetadataQuery } from '../../../../../utils/reactQueryHelpers';
+import type { DataStoreWorkingLists, UseMainViewConfig } from './useMainViewConfig.types';
+
+export const useMainViewConfig: UseMainViewConfig = () => {
+    const {
+        data: configExists,
+        isLoading: namespaceIsLoading,
+        isError: namespaceIsError,
+        error: namespaceError,
+    } = useApiMetadataQuery<any>(
+        ['dataStore', 'capture'], {
+            resource: 'dataStore/capture',
+        }, {
+            select: (captureKeys: ?Array<string>) => captureKeys?.includes('workingLists'),
+        });
+
+    const { data: mainViewConfig, isLoading, isError, error } = useApiMetadataQuery<any>(
+        ['dataStore', 'workingListsEvents'], {
+            resource: 'dataStore/capture/workingLists',
+        }, {
+            enabled: !!configExists,
+            select: (workingLists: DataStoreWorkingLists) => {
+                // only adding support for relative event date as of now
+                // we should use Zod here long-term to properly validate the structure of the object
+                // and give error messages to the user
+                if (workingLists?.version !== 1) {
+                    return undefined;
+                }
+                const occurredAt = workingLists?.global?.event?.mainView?.occurredAt;
+                if (
+                    !occurredAt ||
+                    !isObject(occurredAt) ||
+                    occurredAt.type !== 'RELATIVE'
+                ) {
+                    return undefined;
+                }
+
+                // The general idea is that the return value here should have the same data structure
+                // as the response from the working lists api
+                if (occurredAt.period) {
+                    if (['TODAY', 'THIS_WEEK', 'THIS_MONTH', 'THIS_YEAR', 'LAST_WEEK', 'LAST_MONTH', 'LAST_3_MONTHS']
+                        .includes(occurredAt.period)
+                    ) {
+                        return {
+                            eventDate: {
+                                type: occurredAt.type,
+                                period: occurredAt.period,
+                                startBuffer: 0,
+                                endBuffer: 0,
+                                lockedAll: !!occurredAt.lockedInAllViews,
+                            },
+                        };
+                    }
+                } else {
+                    if ((occurredAt.startBuffer && !isNumber(occurredAt.startBuffer)) ||
+                        (occurredAt.endBuffer && !isNumber(occurredAt.endBuffer)) ||
+                        (!occurredAt.startBuffer && !occurredAt.endBuffer)) {
+                        return undefined;
+                    }
+                    return {
+                        eventDate: {
+                            type: occurredAt.type,
+                            startBuffer: occurredAt.startBuffer,
+                            endBuffer: occurredAt.endBuffer,
+                            lockedAll: !!occurredAt.lockedInAllViews,
+                        },
+                    };
+                }
+                return undefined;
+            },
+        },
+    );
+
+    useEffect(() => {
+        if (namespaceIsError) {
+            log.error(
+                errorCreator(
+                    'capture namespace could not be fetched from the datastore')({ error }),
+            );
+        }
+        if (isError) {
+            log.error(
+                errorCreator(
+                    'workingLists key could not be fetched from the datastore')({ error }),
+            );
+        }
+    }, [isError, error, namespaceIsError, namespaceError]);
+
+    return {
+        mainViewConfig,
+        mainViewConfigReady: !namespaceIsLoading && !isLoading,
+    };
+};