Merge remote-tracking branch 'origin/main' into refactor/ts-ignore

demo/src/app.jsx

@@ -331,6 +331,8 @@ function AppContent({ language, onLanguageClick }) {
     const [openTreeViewFinderDialog, setOpenTreeViewFinderDialog] = useState(false);
     const [openTreeViewFinderDialogCustomDialog, setOpenTreeViewFinderDialogCustomDialog] = useState(false);
 
+    const [developerMode, setDeveloperMode] = useState(false);
+
     // Can't use lazy initializer because useMatch is a hook
     const [initialMatchSilentRenewCallbackUrl] = useState(useMatch('/silent-renew-callback'));
 
@@ -812,6 +814,7 @@ function AppContent({ language, onLanguageClick }) {
             </div>
             <hr />
             <Crasher />
+            <Button onClick={() => setDeveloperMode(!developerMode)}>Toggle developer mode</Button>
         </div>
     );
 
@@ -825,7 +828,8 @@ function AppContent({ language, onLanguageClick }) {
                             appName="Demo"
                             appColor="#808080"
                             appLogo={<PowsyblLogo />}
-                            onParametersClick={() => console.log('settings')}
+                            onUserSettingsClick={() => console.log('user settings')}
+                            developerMode={developerMode}
                             onLogoutClick={() => logout(dispatch, userManager.instance)}
                             onLogoClick={() => console.log('logo')}
                             onThemeClick={handleThemeClick}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.78.0",
+    "version": "0.81.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": ">=9",
@@ -53,8 +53,8 @@
         "@mui/material": "^5.15.14",
         "@mui/system": "^5.15.15",
         "@mui/x-tree-view": "^6.17.0",
-        "ag-grid-community": "^31.0.0",
-        "ag-grid-react": "^31.2.0",
+        "ag-grid-community": "^33.0.3",
+        "ag-grid-react": "^33.0.3",
         "notistack": "^3.0.1",
         "papaparse": "^5.4.1",
         "react": "^18.2.0",
@@ -100,8 +100,8 @@
         "@typescript-eslint/eslint-plugin": "^7.0.0",
         "@typescript-eslint/parser": "^7.0.0",
         "@vitejs/plugin-react": "^4.2.1",
-        "ag-grid-community": "^31.0.0",
-        "ag-grid-react": "^31.2.0",
+        "ag-grid-community": "^33.0.3",
+        "ag-grid-react": "^33.0.3",
         "babel-eslint": "^10.1.0",
         "babel-preset-airbnb": "^5.0.0",
         "babel-preset-vite": "^1.1.3",

src/components/customAGGrid/customAggrid.tsx

@@ -31,7 +31,7 @@ const onColumnResized = (params: ColumnResizedEvent) => {
     if (column && colDefinedMinWidth && finished) {
         const newWidth = column?.getActualWidth();
         if (newWidth < colDefinedMinWidth) {
-            column?.setActualWidth(colDefinedMinWidth, params.source);
+            params.api.setColumnWidths([{ key: column, newWidth: colDefinedMinWidth }], finished, params.source);
         }
     }
 };
@@ -66,9 +66,9 @@ export const CustomAGGrid = React.forwardRef<AgGridReact, CustomAGGridProps>((pr
             <AgGridReact
                 ref={ref}
                 getLocaleText={getLocaleText}
-                suppressPropertyNamesCheck
                 onColumnResized={onColumnResized}
                 enableCellTextSelection
+                theme="legacy"
                 {...agGridReactProps}
             />
         </Box>

src/components/directoryItemSelector/DirectoryItemSelector.tsx

@@ -65,7 +65,7 @@ function refreshedUpNodes(
     const parent = nodeMap[newElement.parentUuid];
     const nextChildren = parent.children.map((c) => (c.elementUuid === newElement.elementUuid ? newElement : c));
     const nextParent = { ...parent, children: nextChildren };
-    return [newElement, ...refreshedUpNodes(nodeMap, nextParent)];
+    return [newElement, ...refreshedUpNodes(nodeMap, nextParent as ElementAttributesBase)];
 }
 
 /**
@@ -148,19 +148,9 @@ function updatedTree(
 }
 
 export interface DirectoryItemSelectorProps extends TreeViewFinderProps {
-    open: boolean;
     types: string[];
     equipmentTypes?: string[];
-    itemFilter?: any;
-    classes?: any;
-    contentText?: string;
-    defaultExpanded?: string[];
-    defaultSelected?: string[];
-    validationButtonText?: string;
-    className?: string;
-    cancelButtonProps?: any;
-    onlyLeaves?: boolean;
-    multiselect?: boolean;
+    itemFilter?: (val: ElementAttributes) => boolean;
     expanded?: UUID[];
     selected?: UUID[];
 }
@@ -196,7 +186,7 @@ export function DirectoryItemSelector({
     const { snackError } = useSnackMessage();
     const contentFilter = useCallback(() => new Set([ElementType.DIRECTORY, ...types]), [types]);
 
-    const convertChildren = useCallback((children: any[]): any[] => {
+    const convertChildren = useCallback((children: ElementAttributes[]): TreeViewFinderNodeProps[] => {
         return children.map((e) => {
             return {
                 id: e.elementUuid,
@@ -210,7 +200,7 @@ export function DirectoryItemSelector({
     }, []);
 
     const convertRoots = useCallback(
-        (newRoots: ElementAttributes[]) => {
+        (newRoots: ElementAttributes[]): TreeViewFinderNodeProps[] => {
             return newRoots.map((e) => {
                 return {
                     id: e.elementUuid,
@@ -258,16 +248,18 @@ export function DirectoryItemSelector({
             const typeList = types.includes(ElementType.DIRECTORY) ? [] : types;
             fetchDirectoryContent(nodeId, typeList)
                 .then((children) => {
-                    const childrenMatchedTypes = children.filter((item: any) => contentFilter().has(item.type));
+                    const childrenMatchedTypes = children.filter((item: ElementAttributes) =>
+                        contentFilter().has(item.type)
+                    );
 
                     if (childrenMatchedTypes.length > 0 && equipmentTypes && equipmentTypes.length > 0) {
                         fetchElementsInfos(
-                            childrenMatchedTypes.map((e: any) => e.elementUuid),
+                            childrenMatchedTypes.map((e: ElementAttributes) => e.elementUuid),
                             types,
                             equipmentTypes
-                        ).then((childrenWithMetadata) => {
+                        ).then((childrenWithMetadata: ElementAttributes[]) => {
                             const filtredChildren = itemFilter
-                                ? childrenWithMetadata.filter((val: any) => {
+                                ? childrenWithMetadata.filter((val: ElementAttributes) => {
                                       // Accept every directory
                                       if (val.type === ElementType.DIRECTORY) {
                                           return true;

src/components/filter/FilterCreationDialog.tsx

@@ -14,16 +14,17 @@ import { useSnackMessage } from '../../hooks/useSnackMessage';
 import { CustomMuiDialog } from '../dialogs/customMuiDialog/CustomMuiDialog';
 import {
     explicitNamingFilterSchema,
-    FILTER_EQUIPMENTS_ATTRIBUTES,
     getExplicitNamingFilterEmptyFormData,
 } from './explicitNaming/ExplicitNamingFilterForm';
 import { FieldConstants } from '../../utils/constants/fieldConstants';
 import yup from '../../utils/yupConfig';
 import { FilterForm } from './FilterForm';
-import { EXPERT_FILTER_QUERY, expertFilterSchema, getExpertFilterEmptyFormData } from './expert/ExpertFilterForm';
+import { expertFilterSchema, getExpertFilterEmptyFormData } from './expert/ExpertFilterForm';
 import { FilterType } from './constants/FilterConstants';
 import { ElementExistsType } from '../../utils/types/elementType';
 import { MAX_CHAR_DESCRIPTION } from '../../utils/constants/uiConstants';
+import { EXPERT_FILTER_QUERY } from './expert/expertFilterConstants';
+import { FILTER_EQUIPMENTS_ATTRIBUTES } from './explicitNaming/ExplicitNamingFilterConstants';
 
 const emptyFormData = {
     [FieldConstants.NAME]: '',

src/components/filter/expert/ExpertFilterEditionDialog.tsx

@@ -17,9 +17,11 @@ import { FilterType, NO_ITEM_SELECTION_FOR_COPY } from '../constants/FilterConst
 import { FilterEditionProps } from '../filter.type';
 import { FilterForm } from '../FilterForm';
 import { saveExpertFilter } from '../utils/filterApi';
-import { EXPERT_FILTER_QUERY, expertFilterSchema } from './ExpertFilterForm';
+import { expertFilterSchema } from './ExpertFilterForm';
 import { importExpertRules } from './expertFilterUtils';
 import { HeaderFilterSchema } from '../HeaderFilterForm';
+import { catchErrorHandler } from '../../../services';
+import { EXPERT_FILTER_QUERY } from './expertFilterConstants';
 
 const formSchema = yup
     .object()
@@ -65,21 +67,23 @@ export function ExpertFilterEditionDialog({
         if (id && open) {
             setDataFetchStatus(FetchStatus.FETCHING);
             getFilterById(id)
-                .then((response: { [prop: string]: any }) => {
+                .then((response) => {
                     setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
                     reset({
                         [FieldConstants.NAME]: name,
                         [FieldConstants.DESCRIPTION]: description,
                         [FieldConstants.FILTER_TYPE]: FilterType.EXPERT.id,
                         [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
-                        [EXPERT_FILTER_QUERY]: importExpertRules(response[EXPERT_FILTER_QUERY]),
+                        [EXPERT_FILTER_QUERY]: importExpertRules(response[EXPERT_FILTER_QUERY]!),
                     });
                 })
-                .catch((error: { message: any }) => {
-                    setDataFetchStatus(FetchStatus.FETCH_ERROR);
-                    snackError({
-                        messageTxt: error.message,
-                        headerId: 'cannotRetrieveFilter',
+                .catch((error: unknown) => {
+                    catchErrorHandler(error, (message: string) => {
+                        setDataFetchStatus(FetchStatus.FETCH_ERROR);
+                        snackError({
+                            messageTxt: message,
+                            headerId: 'cannotRetrieveFilter',
+                        });
                     });
                 });
         }

src/components/filter/expert/ExpertFilterForm.tsx

@@ -19,6 +19,7 @@ import {
     COMBINATOR_OPTIONS,
     EXPERT_FILTER_EQUIPMENTS,
     EXPERT_FILTER_FIELDS,
+    EXPERT_FILTER_QUERY,
     OPERATOR_OPTIONS,
     RULES,
 } from './expertFilterConstants';
@@ -44,8 +45,6 @@ yup.setLocale({
     },
 });
 
-export const EXPERT_FILTER_QUERY = 'rules';
-
 function isSupportedEquipmentType(equipmentType: string): boolean {
     return Object.values(EXPERT_FILTER_EQUIPMENTS)
         .map((equipments) => equipments.id)

src/components/filter/expert/expertFilterConstants.ts

@@ -26,6 +26,8 @@ export enum RULES {
     BETWEEN_RULE = 'betweenRule',
 }
 
+export const EXPERT_FILTER_QUERY = 'rules';
+
 export const EXPERT_FILTER_EQUIPMENTS = {
     SUBSTATION: {
         id: 'SUBSTATION',
@@ -192,12 +194,12 @@ export const OPERATOR_OPTIONS = {
     IS_PART_OF: {
         name: OperatorType.IS_PART_OF,
         customName: OperatorType.IS_PART_OF,
-        label: 'isPartOf',
+        label: 'inFilter',
     },
     IS_NOT_PART_OF: {
         name: OperatorType.IS_NOT_PART_OF,
         customName: OperatorType.IS_NOT_PART_OF,
-        label: 'isNotPartOf',
+        label: 'notInFilter',
     },
 };
 

src/components/filter/expert/stylesExpertFilter.css

@@ -95,6 +95,14 @@
     display: none;
 }
 
+.queryBuilder-branches .rule:hover .rule-remove {
+    visibility: visible;
+}
+
+.queryBuilder-branches .rule .rule-remove {
+    visibility: hidden;
+}
+
 .queryBuilder-branches .ruleGroup .ruleGroup::before,
 .queryBuilder-branches .ruleGroup .ruleGroup::after {
     left: calc(calc(-0.5rem - 1px) - 1px);
@@ -110,7 +118,6 @@
 }
 
 /* Justify layout */
-.queryBuilder .ruleGroup-remove,
 .queryBuilder .rule-remove {
     margin-left: auto;
 }

src/components/filter/explicitNaming/ExplicitNamingFilterConstants.ts

@@ -0,0 +1,8 @@
+/**
+ * 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/.
+ */
+
+export const FILTER_EQUIPMENTS_ATTRIBUTES = 'filterEquipmentsAttributes';

src/components/filter/explicitNaming/ExplicitNamingFilterEditionDialog.tsx

@@ -15,13 +15,14 @@ import { FieldConstants } from '../../../utils/constants/fieldConstants';
 import yup from '../../../utils/yupConfig';
 import { CustomMuiDialog } from '../../dialogs/customMuiDialog/CustomMuiDialog';
 import { saveExplicitNamingFilter } from '../utils/filterApi';
-import { explicitNamingFilterSchema, FILTER_EQUIPMENTS_ATTRIBUTES } from './ExplicitNamingFilterForm';
+import { explicitNamingFilterSchema } from './ExplicitNamingFilterForm';
 
 import { FetchStatus } from '../../../utils/constants/fetchStatus';
 import { FilterForm } from '../FilterForm';
 import { FilterType, NO_ITEM_SELECTION_FOR_COPY } from '../constants/FilterConstants';
 import { FilterEditionProps } from '../filter.type';
 import { HeaderFilterSchema } from '../HeaderFilterForm';
+import { FILTER_EQUIPMENTS_ATTRIBUTES } from './ExplicitNamingFilterConstants';
 
 const formSchema = yup
     .object()
@@ -75,7 +76,7 @@ export function ExplicitNamingFilterEditionDialog({
                         [FieldConstants.DESCRIPTION]: description,
                         [FieldConstants.FILTER_TYPE]: FilterType.EXPLICIT_NAMING.id,
                         [FieldConstants.EQUIPMENT_TYPE]: response[FieldConstants.EQUIPMENT_TYPE],
-                        [FILTER_EQUIPMENTS_ATTRIBUTES]: response[FILTER_EQUIPMENTS_ATTRIBUTES].map((row: any) => ({
+                        [FILTER_EQUIPMENTS_ATTRIBUTES]: response[FILTER_EQUIPMENTS_ATTRIBUTES]?.map((row: any) => ({
                             [FieldConstants.AG_GRID_ROW_UUID]: uuid4(),
                             ...row,
                         })),