dev review

libs/ui/src/components/RecordEdition/EditRecordContent/_types.ts

@@ -140,10 +140,10 @@ export enum VersionFieldScope {
     CURRENT = 'CURRENT' // values of "current" version, eg. the version selected in the form
 }
 
-export interface ICommonFieldsReducerState<ValuesType> {
+export interface ICommonFieldsReducerState<ValuesType, RecordFormAttributeFragmentType = RecordFormAttributeFragment> {
     record: IRecordIdentityWhoAmI;
     formElement: FormElement<IRequiredFieldsSettings>;
-    attribute: RecordFormAttributeFragment;
+    attribute: RecordFormAttributeFragmentType;
     isReadOnly: boolean;
     activeScope: VersionFieldScope;
     values: {

libs/ui/src/components/RecordEdition/EditRecordContent/reducers/standardFieldReducer/standardFieldReducer.ts

@@ -12,7 +12,12 @@ import {
 import {RecordFormElementsValueStandardValue} from '_ui/hooks/useGetRecordForm/useGetRecordForm';
 import {IRecordIdentityWhoAmI} from '_ui/types/records';
 import {IValueVersion} from '_ui/types/values';
-import {AttributeFormat, RecordFormAttributeFragment, ValueDetailsValueFragment} from '_ui/_gqlTypes';
+import {
+    AttributeFormat,
+    RecordFormAttributeFragment,
+    RecordFormAttributeStandardAttributeFragment,
+    ValueDetailsValueFragment
+} from '_ui/_gqlTypes';
 import {IRecordPropertyStandard} from '_ui/_queries/records/getRecordPropertiesQuery';
 import {arrayValueVersionToObject} from '_ui/_utils';
 
@@ -85,7 +90,10 @@ interface INotCalculated {
 
 export type CalculatedFlags = INotCalculated | ICalculatedOverride | ICalculatedNotOverride;
 
-export type IStandardFieldReducerState = ICommonFieldsReducerState<StandardFieldReducerValues> & {
+export type IStandardFieldReducerState = ICommonFieldsReducerState<
+    StandardFieldReducerValues,
+    RecordFormAttributeStandardAttributeFragment
+> & {
     metadataEdit: boolean;
 } & InheritedFlags &
     CalculatedFlags;

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSBooleanWrapper.tsx

@@ -35,6 +35,10 @@ const FontAwesomeIconStyled = styled(FontAwesomeIcon)`
 const _getBooleanValueAsStringForTranslation = (value: boolean): string => (value ? 'global.yes' : 'global.no');
 
 export const DSBooleanWrapper: FunctionComponent<IDSBooleanWrapperProps> = ({value, onChange, state, handleSubmit}) => {
+    if (!onChange) {
+        throw Error('DSBooleanWrapper should be used inside a antd Form.Item');
+    }
+
     const {t} = useSharedTranslation();
     const {errors} = Form.Item.useStatus();
     const {lang: availableLang} = useLang();

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSColorPickerWrapper.tsx

@@ -46,6 +46,10 @@ export const DSColorPickerWrapper: FunctionComponent<IDSColorPickerWrapperProps>
     handleBlur,
     shouldShowValueDetailsButton = false
 }) => {
+    if (!onChange) {
+        throw Error('DSColorPickerWrapper should be used inside a antd Form.Item');
+    }
+
     const {t} = useSharedTranslation();
     const {lang: availableLang} = useLang();
     const [hasChanged, setHasChanged] = useState(false);

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSDatePickerWrapper.tsx

@@ -41,6 +41,10 @@ export const DSDatePickerWrapper: FunctionComponent<IDSDatePickerWrapperProps> =
     handleSubmit,
     shouldShowValueDetailsButton = false
 }) => {
+    if (!onChange) {
+        throw Error('DSDatePickerWrapper should be used inside a antd Form.Item');
+    }
+
     const {t} = useSharedTranslation();
     const {lang: availableLangs} = useLang();
     const {errors} = Form.Item.useStatus();

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSInputEncryptedWrapper.tsx

@@ -45,6 +45,10 @@ export const DSInputEncryptedWrapper: FunctionComponent<IDSInputEncryptedWrapper
     handleBlur,
     shouldShowValueDetailsButton = false
 }) => {
+    if (!onChange) {
+        throw Error('DSInputEncryptedWrapper should be used inside a antd Form.Item');
+    }
+
     const {t} = useSharedTranslation();
     const {errors} = Form.Item.useStatus();
     const {onValueDetailsButtonClick} = useValueDetailsButton({

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSInputWrapper.tsx

@@ -39,6 +39,10 @@ export const DSInputWrapper: FunctionComponent<IDSInputWrapperProps> = ({
     handleBlur,
     shouldShowValueDetailsButton = false
 }) => {
+    if (!onChange) {
+        throw Error('DSInputWrapper should be used inside a antd Form.Item');
+    }
+
     const {t} = useSharedTranslation();
     const {errors} = Form.Item.useStatus();
     const {onValueDetailsButtonClick} = useValueDetailsButton({

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRangePickerWrapper.tsx

@@ -42,6 +42,10 @@ export const DSRangePickerWrapper: FunctionComponent<IDSRangePickerWrapperProps>
     handleBlur,
     shouldShowValueDetailsButton = false
 }) => {
+    if (!onChange) {
+        throw Error('DSRangePickerWrapper should be used inside a antd Form.Item');
+    }
+
     const {t} = useSharedTranslation();
     const {lang: availableLangs} = useLang();
     const {errors} = Form.Item.useStatus();

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/DSRichTextWrapper.tsx

@@ -41,6 +41,10 @@ export const DSRichTextWrapper: FunctionComponent<IDSRichTextWrapperProps> = ({
     handleBlur,
     shouldShowValueDetailsButton = false
 }) => {
+    if (!onChange) {
+        throw Error('DSRichTextWrapper should be used inside a antd Form.Item');
+    }
+
     const {t} = useSharedTranslation();
     const {errors} = Form.Item.useStatus();
     const {onValueDetailsButtonClick} = useValueDetailsButton({

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/StandardFieldValueDisplayHandler/StandardFieldValueDisplayHandler.tsx

@@ -1,4 +1,4 @@
-// Copyright LEAV Solutions 2017
+// Copyright LEAV Solutions 2017 until 2023/11/05, Copyright Aristid from 2023/11/06
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import {AttributeFormat, RecordFormAttributeStandardAttributeFragment} from '_ui/_gqlTypes';

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/ValuesList/MonoValueSelect.test.tsx

@@ -11,6 +11,8 @@ import userEvent from '@testing-library/user-event';
 import {RecordFormAttributeStandardAttributeFragment, SortOrder} from '_ui/_gqlTypes';
 import {VersionFieldScope} from '_ui/components/RecordEdition/EditRecordContent/_types';
 import {
+    CalculatedFlags,
+    InheritedFlags,
     IStandardFieldReducerState,
     IStandardFieldValue
 } from '_ui/components/RecordEdition/EditRecordContent/reducers/standardFieldReducer/standardFieldReducer';
@@ -145,6 +147,128 @@ describe('<MonoValueSelect />', () => {
         expect(handleSubmitMock).toHaveBeenCalledWith('', attribute.id);
     });
 
+    it.each`
+        calculatedValue | inheritedValue | displayedValue
+        ${'calculated'} | ${null}        | ${'calculated'}
+        ${null}         | ${'inherited'} | ${'inherited'}
+        ${'calculated'} | ${'inherited'} | ${'inherited'}
+    `(
+        'should display calculated / inherited value in helper',
+        ({
+            calculatedValue,
+            inheritedValue,
+            displayedValue
+        }: {
+            calculatedValue: string | null;
+            inheritedValue: string | null;
+            displayedValue: string;
+        }) => {
+            const stateWithInheritedValue: InheritedFlags = {
+                inheritedValue: {raw_value: inheritedValue},
+                isInheritedValue: true,
+                isInheritedNotOverrideValue: false,
+                isInheritedOverrideValue: true
+            };
+            const stateWithCalculatedValue: CalculatedFlags = {
+                calculatedValue: {raw_value: calculatedValue},
+                isCalculatedValue: true,
+                isCalculatedNotOverrideValue: false,
+                isCalculatedOverrideValue: true
+            };
+
+            let newState = state;
+            if (inheritedValue) {
+                newState = {...newState, ...stateWithInheritedValue} as any;
+            }
+
+            if (calculatedValue) {
+                newState = {...newState, ...stateWithCalculatedValue} as any;
+            }
+
+            render(
+                <AntForm name="name">
+                    <AntForm.Item name="chartreuse">
+                        <MonoValueSelect
+                            attribute={attribute}
+                            state={newState}
+                            fieldValue={{...fieldValue, isEditing: true}}
+                            handleSubmit={handleSubmitMock}
+                            handleBlur={handleBlurMock}
+                        />
+                    </AntForm.Item>
+                </AntForm>
+            );
+
+            expect(screen.getByText(new RegExp(`${displayedValue}`))).toBeVisible();
+        }
+    );
+
+    it.each`
+        calculatedValue | inheritedValue | displayedValue
+        ${'calculated'} | ${null}        | ${'calculated'}
+        ${null}         | ${'inherited'} | ${'inherited'}
+        ${'calculated'} | ${'inherited'} | ${'inherited'}
+    `(
+        'should revert to calculated / inherited value on click on clear icon',
+        async ({
+            calculatedValue,
+            inheritedValue,
+            displayedValue
+        }: {
+            calculatedValue: string | null;
+            inheritedValue: string | null;
+            displayedValue: string;
+        }) => {
+            const stateWithInheritedValue: InheritedFlags = {
+                inheritedValue: {raw_value: inheritedValue},
+                isInheritedValue: true,
+                isInheritedNotOverrideValue: true,
+                isInheritedOverrideValue: false
+            };
+            const stateWithCalculatedValue: CalculatedFlags = {
+                calculatedValue: {raw_value: calculatedValue},
+                isCalculatedValue: true,
+                isCalculatedNotOverrideValue: true,
+                isCalculatedOverrideValue: false
+            };
+
+            let newState = state;
+            if (inheritedValue) {
+                newState = {...newState, ...stateWithInheritedValue} as any;
+            }
+
+            if (calculatedValue) {
+                newState = {...newState, ...stateWithCalculatedValue} as any;
+            }
+
+            render(
+                <AntForm name="name">
+                    <AntForm.Item name="chartreuse">
+                        <MonoValueSelect
+                            attribute={attribute}
+                            state={newState}
+                            fieldValue={{...fieldValue, isEditing: true}}
+                            handleSubmit={handleSubmitMock}
+                            handleBlur={handleBlurMock}
+                        />
+                    </AntForm.Item>
+                </AntForm>
+            );
+
+            expect(screen.queryByText(displayedValue)).not.toBeInTheDocument();
+            const select = screen.getByRole('combobox');
+            await userEvent.click(select);
+
+            const green = screen.getAllByText('green').pop();
+            await userEvent.click(green);
+
+            const clearIcon = screen.getByLabelText('clear');
+            await userEvent.click(clearIcon);
+
+            expect(screen.getByTitle(displayedValue)).toBeVisible();
+        }
+    );
+
     it('should display a specific text on search with results', async () => {
         render(
             <AntForm name="name">

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/ValuesList/MonoValueSelect.tsx

@@ -2,34 +2,16 @@
 // This file is released under LGPL V3
 // License text available at https://www.gnu.org/licenses/lgpl-3.0.txt
 import {FunctionComponent, useEffect, useMemo, useRef, useState} from 'react';
-import {KitSelect, KitTypography} from 'aristid-ds';
+import {AntForm, KitSelect, KitTypography} from 'aristid-ds';
 import useSharedTranslation from '_ui/hooks/useSharedTranslation/useSharedTranslation';
-import {
-    AttributeFormat,
-    RecordFormAttributeStandardAttributeFragment,
-    StandardValuesListFragmentStandardDateRangeValuesListConfFragment,
-    StandardValuesListFragmentStandardStringValuesListConfFragment
-} from '_ui/_gqlTypes';
-import {Form, GetRef, SelectProps} from 'antd';
-import {IProvidedByAntFormItem} from '_ui/components/RecordEdition/EditRecordContent/_types';
+import {AttributeFormat} from '_ui/_gqlTypes';
+import {Form, GetRef} from 'antd';
 import {useValueDetailsButton} from '_ui/components/RecordEdition/EditRecordContent/shared/ValueDetailsBtn/useValueDetailsButton';
-import {
-    IStandardFieldReducerState,
-    IStandardFieldValue
-} from '_ui/components/RecordEdition/EditRecordContent/reducers/standardFieldReducer/standardFieldReducer';
 import {useLang} from '_ui/hooks';
 import {localizedTranslation} from '@leav/utils';
 import moment from 'moment';
 import {stringifyDateRangeValue} from '_ui/_utils';
-
-interface IMonoValueSelectProps extends IProvidedByAntFormItem<SelectProps> {
-    state: IStandardFieldReducerState;
-    attribute: RecordFormAttributeStandardAttributeFragment;
-    fieldValue: IStandardFieldValue;
-    handleSubmit: (value: string, id?: string) => void;
-    handleBlur: () => void;
-    shouldShowValueDetailsButton?: boolean;
-}
+import {IDateRangeValuesListConf, IMonoValueSelectProps, IStringValuesListConf} from './_types';
 
 export const MonoValueSelect: FunctionComponent<IMonoValueSelectProps> = ({
     value,
@@ -67,9 +49,6 @@ export const MonoValueSelect: FunctionComponent<IMonoValueSelectProps> = ({
         }
     }, [fieldValue.isEditing]);
 
-    type IStringValuesListConf = StandardValuesListFragmentStandardStringValuesListConfFragment;
-    type IDateRangeValuesListConf = StandardValuesListFragmentStandardDateRangeValuesListConfFragment;
-
     const _getFilteredValuesList = () => {
         let values = [];
 
@@ -104,9 +83,9 @@ export const MonoValueSelect: FunctionComponent<IMonoValueSelectProps> = ({
 
     const _resetToInheritedOrCalculatedValue = () => {
         if (state.isInheritedValue) {
-            onChange(state.inheritedValue.raw_value, options);
+            setTimeout(() => onChange(state.inheritedValue.raw_value, options), 0);
         } else if (state.isCalculatedValue) {
-            onChange(state.calculatedValue.raw_value, options);
+            setTimeout(() => onChange(state.calculatedValue.raw_value, options), 0);
         }
         handleSubmit('', attribute.id);
     };
@@ -129,8 +108,8 @@ export const MonoValueSelect: FunctionComponent<IMonoValueSelectProps> = ({
     };
 
     const _handleOnClear = () => {
-        handleSubmit('', attribute.id);
-        _handleOnBlur();
+        _handleOnChange('');
+        handleBlur();
     };
 
     const helper = useMemo(() => {
@@ -170,14 +149,14 @@ export const MonoValueSelect: FunctionComponent<IMonoValueSelectProps> = ({
             dropdownRender={menu => (
                 <>
                     {searchedString !== '' && searchResultsCount > 0 && (
-                        <>
+                        <div style={{paddingBottom: 'calc(var(--general-spacing-xs) * 1px)'}}>
                             <KitTypography.Text size="fontSize7">
                                 {t('record_edition.press_enter_to')}
                             </KitTypography.Text>
                             <KitTypography.Text size="fontSize7" weight="medium">
                                 {t('record_edition.select_this_value')}
                             </KitTypography.Text>
-                        </>
+                        </div>
                     )}
                     {menu}
                 </>

libs/ui/src/components/RecordEdition/EditRecordContent/uiElements/StandardField/StandardFieldValue/ValuesList/_types.ts

@@ -0,0 +1,23 @@
+import {
+    RecordFormAttributeStandardAttributeFragment,
+    StandardValuesListFragmentStandardDateRangeValuesListConfFragment,
+    StandardValuesListFragmentStandardStringValuesListConfFragment
+} from '_ui/_gqlTypes';
+import {IProvidedByAntFormItem} from '_ui/components/RecordEdition/EditRecordContent/_types';
+import {
+    IStandardFieldReducerState,
+    IStandardFieldValue
+} from '_ui/components/RecordEdition/EditRecordContent/reducers/standardFieldReducer/standardFieldReducer';
+import {SelectProps} from 'antd';
+
+export interface IMonoValueSelectProps extends IProvidedByAntFormItem<SelectProps> {
+    state: IStandardFieldReducerState;
+    attribute: RecordFormAttributeStandardAttributeFragment;
+    fieldValue: IStandardFieldValue;
+    handleSubmit: (value: string, id?: string) => void;
+    handleBlur: () => void;
+    shouldShowValueDetailsButton?: boolean;
+}
+
+export type IStringValuesListConf = StandardValuesListFragmentStandardStringValuesListConfFragment;
+export type IDateRangeValuesListConf = StandardValuesListFragmentStandardDateRangeValuesListConfFragment;