Merge branch 'main' into ayolab/fix-shortcircuit-parameters-layout

package.json

@@ -7,7 +7,7 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.72.3",
+        "@gridsuite/commons-ui": "0.75.0",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",

src/components/app-wrapper.jsx

@@ -43,6 +43,7 @@ import {
     importParamsFr,
     exportParamsEn,
     exportParamsFr,
+    NotificationsProvider,
 } from '@gridsuite/commons-ui';
 import { IntlProvider } from 'react-intl';
 import { BrowserRouter } from 'react-router-dom';
@@ -79,6 +80,7 @@ import {
     MAP_BASEMAP_CARTO,
     MAP_BASEMAP_CARTO_NOLABEL,
 } from '../utils/config-params';
+import useNotificationsUrlGenerator from 'hooks/use-notifications-url-generator';
 
 let lightTheme = createTheme({
     components: {
@@ -327,6 +329,8 @@ const AppWrapperWithRedux = () => {
 
     const theme = useSelector((state) => state[PARAM_THEME]);
 
+    const urlMapper = useNotificationsUrlGenerator();
+
     return (
         <IntlProvider locale={computedLanguage} messages={messages[computedLanguage]}>
             <BrowserRouter basename={basename}>
@@ -335,7 +339,9 @@ const AppWrapperWithRedux = () => {
                         <SnackbarProvider hideIconVariant={false}>
                             <CssBaseline />
                             <CardErrorBoundary>
-                                <App />
+                                <NotificationsProvider urls={urlMapper}>
+                                    <App />
+                                </NotificationsProvider>
                             </CardErrorBoundary>
                         </SnackbarProvider>
                     </ThemeProvider>

src/components/app.jsx

@@ -20,29 +20,18 @@ import {
     getPreLoginPath,
     initializeAuthenticationProd,
     useSnackMessage,
+    useNotificationsListener,
 } from '@gridsuite/commons-ui';
 import PageNotFound from './page-not-found';
 import { FormattedMessage } from 'react-intl';
 import {
     APP_NAME,
     COMMON_APP_NAME,
-    PARAM_CENTER_LABEL,
-    PARAM_COMPONENT_LIBRARY,
     PARAM_DEVELOPER_MODE,
-    PARAM_DIAGONAL_LABEL,
     PARAM_FAVORITE_CONTINGENCY_LISTS,
     PARAM_FLUX_CONVENTION,
-    PARAM_INIT_NAD_WITH_GEO_DATA,
     PARAM_LANGUAGE,
     PARAM_LIMIT_REDUCTION,
-    PARAM_LINE_FLOW_ALERT_THRESHOLD,
-    PARAM_LINE_FLOW_COLOR_MODE,
-    PARAM_LINE_FLOW_MODE,
-    PARAM_LINE_FULL_PATH,
-    PARAM_LINE_PARALLEL_PATH,
-    PARAM_MAP_BASEMAP,
-    PARAM_MAP_MANUAL_REFRESH,
-    PARAM_SUBSTATION_LAYOUT,
     PARAM_THEME,
     PARAM_USE_NAME,
 } from '../utils/config-params';
@@ -55,7 +44,6 @@ import { getComputedLanguage } from '../utils/language';
 import AppTopBar from './app-top-bar';
 import { StudyContainer } from './study-container';
 import { fetchValidateUser } from '../services/user-admin';
-import { connectNotificationsWsUpdateConfig } from '../services/config-notification';
 import { fetchConfigParameter, fetchConfigParameters } from '../services/config';
 import { fetchDefaultParametersValues, fetchIdpSettings } from '../services/utils';
 import { getOptionalServices } from '../services/study';
@@ -64,29 +52,20 @@ import {
     changeLockedColumns,
     changeReorderedColumns,
     limitReductionModified,
-    selectCenterLabelState,
-    selectComponentLibrary,
     selectComputedLanguage,
-    selectDiagonalLabelState,
     selectEnableDeveloperMode,
     selectFavoriteContingencyLists,
     selectFluxConvention,
-    selectInitNadWithGeoData,
     selectLanguage,
     selectLimitReduction,
-    selectLineFlowAlertThreshold,
-    selectLineFlowColorMode,
-    selectLineFlowMode,
-    selectLineFullPathState,
-    selectLineParallelPathState,
-    selectMapBaseMap,
-    selectMapManualRefresh,
-    selectSubstationLayout,
     selectTheme,
     selectUseName,
     setOptionalServices,
     setParamsLoaded,
+    setUpdateNetworkVisualizationParameters,
 } from '../redux/actions';
+import { NOTIFICATIONS_URL_KEYS } from './utils/notificationsProvider-utils';
+import { getNetworkVisualizationParameters } from '../services/study/study-config.ts';
 
 const noUserManager = { instance: null, error: null };
 
@@ -96,6 +75,7 @@ const App = () => {
     const { snackError } = useSnackMessage();
 
     const user = useSelector((state) => state.user);
+    const studyUuid = useSelector((state) => state.studyUuid);
     const tablesNamesIndexes = useSelector((state) => state.tables.namesIndexes);
     const tablesDefinitionIndexes = useSelector((state) => state.tables.definitionIndexes);
 
@@ -113,6 +93,14 @@ const App = () => {
 
     const [tabIndex, setTabIndex] = useState(0);
 
+    const updateNetworkVisualizationsParams = useCallback(
+        (params) => {
+            console.debug('received network visualizations parameters : ', params);
+            dispatch(setUpdateNetworkVisualizationParameters(params));
+        },
+        [dispatch]
+    );
+
     const updateParams = useCallback(
         (params) => {
             console.debug('received UI parameters : ', params);
@@ -132,51 +120,15 @@ const App = () => {
                         dispatch(selectLanguage(param.value));
                         dispatch(selectComputedLanguage(getComputedLanguage(param.value)));
                         break;
-                    case PARAM_CENTER_LABEL:
-                        dispatch(selectCenterLabelState(param.value === 'true'));
-                        break;
-                    case PARAM_DIAGONAL_LABEL:
-                        dispatch(selectDiagonalLabelState(param.value === 'true'));
-                        break;
                     case PARAM_LIMIT_REDUCTION:
                         dispatch(selectLimitReduction(param.value));
                         break;
-                    case PARAM_LINE_FLOW_ALERT_THRESHOLD:
-                        dispatch(selectLineFlowAlertThreshold(param.value));
-                        break;
-                    case PARAM_LINE_FLOW_COLOR_MODE:
-                        dispatch(selectLineFlowColorMode(param.value));
-                        break;
-                    case PARAM_LINE_FLOW_MODE:
-                        dispatch(selectLineFlowMode(param.value));
-                        break;
                     case PARAM_FLUX_CONVENTION:
                         dispatch(selectFluxConvention(param.value));
                         break;
                     case PARAM_DEVELOPER_MODE:
                         dispatch(selectEnableDeveloperMode(param.value === 'true'));
                         break;
-                    case PARAM_INIT_NAD_WITH_GEO_DATA:
-                        dispatch(selectInitNadWithGeoData(param.value === 'true'));
-                        break;
-                    case PARAM_LINE_FULL_PATH:
-                        dispatch(selectLineFullPathState(param.value === 'true'));
-                        break;
-                    case PARAM_LINE_PARALLEL_PATH:
-                        dispatch(selectLineParallelPathState(param.value === 'true'));
-                        break;
-                    case PARAM_SUBSTATION_LAYOUT:
-                        dispatch(selectSubstationLayout(param.value));
-                        break;
-                    case PARAM_COMPONENT_LIBRARY:
-                        dispatch(selectComponentLibrary(param.value));
-                        break;
-                    case PARAM_MAP_MANUAL_REFRESH:
-                        dispatch(selectMapManualRefresh(param.value === 'true'));
-                        break;
-                    case PARAM_MAP_BASEMAP:
-                        dispatch(selectMapBaseMap(param.value));
-                        break;
                     case PARAM_USE_NAME:
                         dispatch(selectUseName(param.value === 'true'));
                         break;
@@ -270,10 +222,8 @@ const App = () => {
         [dispatch, tablesNamesIndexes, tablesDefinitionIndexes]
     );
 
-    const connectNotificationsUpdateConfig = useCallback(() => {
-        const ws = connectNotificationsWsUpdateConfig();
-
-        ws.onmessage = function (event) {
+    const updateConfig = useCallback(
+        (event) => {
             let eventData = JSON.parse(event.data);
             if (eventData.headers && eventData.headers['parameterName']) {
                 fetchConfigParameter(eventData.headers['parameterName'])
@@ -290,12 +240,13 @@ const App = () => {
                         })
                     );
             }
-        };
-        ws.onerror = function (event) {
-            console.error('Unexpected Notification WebSocket error', event);
-        };
-        return ws;
-    }, [updateParams, snackError, dispatch]);
+        },
+        [dispatch, snackError, updateParams]
+    );
+
+    useNotificationsListener(NOTIFICATIONS_URL_KEYS.CONFIG, {
+        listenerCallbackMessage: updateConfig,
+    });
 
     // Can't use lazy initializer because useRouteMatch is a hook
     const [initialMatchSilentRenewCallbackUrl] = useState(
@@ -343,7 +294,11 @@ const App = () => {
     }, [initialMatchSilentRenewCallbackUrl, dispatch, initialMatchSigninCallbackUrl]);
 
     useEffect(() => {
-        if (user !== null) {
+        if (user !== null && studyUuid !== null) {
+            const fetchNetworkVisualizationParametersPromise = getNetworkVisualizationParameters(studyUuid).then(
+                (params) => updateNetworkVisualizationsParams(params)
+            );
+
             const fetchCommonConfigPromise = fetchConfigParameters(COMMON_APP_NAME).then((params) =>
                 updateParams(params)
             );
@@ -409,7 +364,12 @@ const App = () => {
             // This might not be necessary but allows to gradually migrate parts
             // of the code that don't subscribe to exactly the parameters they need.
             // Code that depends on this could be rewritten to depend on what it acually needs.
-            Promise.all([fetchCommonConfigPromise, fetchAppConfigPromise, fetchOptionalServices])
+            Promise.all([
+                fetchNetworkVisualizationParametersPromise,
+                fetchCommonConfigPromise,
+                fetchAppConfigPromise,
+                fetchOptionalServices,
+            ])
                 .then(() => {
                     dispatch(setParamsLoaded());
                 })
@@ -419,13 +379,8 @@ const App = () => {
                         headerId: 'paramsRetrievingError',
                     })
                 );
-
-            const ws = connectNotificationsUpdateConfig();
-            return function () {
-                ws.close();
-            };
         }
-    }, [user, dispatch, updateParams, connectNotificationsUpdateConfig, snackError]);
+    }, [user, studyUuid, dispatch, updateParams, snackError, updateNetworkVisualizationsParams]);
 
     const onChangeTab = useCallback((newTabIndex) => {
         setTabIndex(newTabIndex);

src/components/custom-aggrid/custom-aggrid-filters/custom-aggrid-autocomplete-filter.tsx

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import React, { FunctionComponent, SyntheticEvent, useMemo } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { useIntl } from 'react-intl';
+import { useCustomAggridFilter } from '../hooks/use-custom-aggrid-filter';
+import { isStringOrNonEmptyArray } from '../custom-aggrid-header-utils';
+import { CustomAggridFilterParams, FILTER_TEXT_COMPARATORS, FilterEnumsType } from '../custom-aggrid-header.type';
+
+export interface CustomAggridAutocompleteFilterParams extends CustomAggridFilterParams {
+    filterEnums?: FilterEnumsType;
+    getEnumLabel?: (value: string) => string; // Used for translation of enum values in the filter
+}
+
+export const CustomAggridAutocompleteFilter: FunctionComponent<CustomAggridAutocompleteFilterParams> = ({
+    field,
+    filterParams,
+    filterEnums,
+    getEnumLabel,
+}) => {
+    const intl = useIntl();
+    const { selectedFilterData, handleChangeFilterValue } = useCustomAggridFilter(field, filterParams);
+
+    const handleFilterAutoCompleteChange = (_: SyntheticEvent, data: string[]) => {
+        handleChangeFilterValue({ value: data, type: FILTER_TEXT_COMPARATORS.EQUALS });
+    };
+
+    const filterOption = useMemo(() => filterEnums?.[field] ?? [], [field, filterEnums]);
+
+    return (
+        <Autocomplete
+            multiple
+            value={Array.isArray(selectedFilterData) ? selectedFilterData : []}
+            options={filterOption}
+            getOptionLabel={getEnumLabel}
+            onChange={handleFilterAutoCompleteChange}
+            size="small"
+            disableCloseOnSelect
+            renderInput={(params) => (
+                <TextField
+                    {...params}
+                    placeholder={
+                        !isStringOrNonEmptyArray(selectedFilterData)
+                            ? intl.formatMessage({
+                                  id: 'filter.filterOoo',
+                              })
+                            : ''
+                    }
+                />
+            )}
+            fullWidth
+        />
+    );
+};