Merge branch 'main' into tests/expendableGroup

.eslintrc.json

@@ -24,6 +24,7 @@
         "no-console": "off",
         "react/jsx-props-no-spreading": "off",
         "react/require-default-props": "off",
-        "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }]
+        "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
+        "import/prefer-default-export":"off"
     }
 }

.github/workflows/release.yml

@@ -0,0 +1,30 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      versionType:
+        description: version type increment
+        required: true
+        type: choice
+        options:
+          - major
+          - minor
+          - patch
+      nodeAuthToken:
+        description: NPM automation access token
+        required: true
+        type: string
+
+permissions:
+  contents: write
+
+jobs:
+  run-release:
+    uses: powsybl/github-ci/.github/workflows/release-frontend-lib-generic.yml@859a4effdaa9c5e79684378f39778fd8d06df3c5
+    with:
+      versionType: ${{ github.event.inputs.versionType }}
+      nodeAuthToken: ${{ github.event.inputs.nodeAuthToken }}
+      githubappId: ${{ vars.GRIDSUITE_ACTIONS_APPID }}
+    secrets:
+      githubappPrivateKey: ${{ secrets.GRIDSUITE_ACTIONS_SECRET }}

.sonarlint/connectedMode.json

@@ -0,0 +1,4 @@
+{
+    "sonarCloudOrganization": "gridsuite",
+    "projectKey": "gridsuite_commons-ui"
+}

README.md

@@ -30,15 +30,11 @@ To fix this, run this command from the app **after** running "npm install"
 If you want to deploy a new version of commons-ui in the [NPM package registry](https://www.npmjs.com/package/@gridsuite/commons-ui),
 you need to follow the steps below:
 
--   Update to the new version in [package.json](https://github.com/gridsuite/commons-ui/blob/main/package.json) (example `0.6.0`)
--   Build it: `npm install`
--   Commit the package.json and package-lock.json files, push to a branch, make a PR, have it reviewed and merged to main.
--   [Make a release](https://github.com/gridsuite/commons-ui/releases/new) on GitHub by creating a new tag on the last commit. On the release creation page:
-    - In "Choose a tag": type the tag you want to create (ex.: v0.6.0) and select "create new tag"
-    - In "Target": click on "recent commit" tab and select your release commit
-    - Click on "Generate release note"
-    - Click on "Publish release"
--   It will trigger a job that will publish the release on NPM
+-   [Make a release action](https://github.com/gridsuite/commons-ui/actions/workflows/release.yml)
+  - In the 'run workflow' combobox select, let the branch on main
+  - Enter the type of evolution (major | minor | patch)
+  - Enter your NPM access token (it must be an **automation** access token to bypass 2FA, see the [access token documentation](https://docs.npmjs.com/creating-and-viewing-access-tokens) for details)
+  - Click 'run workflow'
 
 #### License Headers and dependencies checking
 

demo/src/InputsTab.jsx

@@ -10,19 +10,21 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import { Box, Grid } from '@mui/material';
 import { useState } from 'react';
-import AutocompleteInput from '../../src/components/inputs/reactHookForm/autocompleteInputs/AutocompleteInput';
-import TextInput from '../../src/components/inputs/reactHookForm/text/TextInput';
-import RadioInput from '../../src/components/inputs/reactHookForm/booleans/RadioInput';
-import SliderInput from '../../src/components/inputs/reactHookForm/numbers/SliderInput';
-import FloatInput from '../../src/components/inputs/reactHookForm/numbers/FloatInput';
-import IntegerInput from '../../src/components/inputs/reactHookForm/numbers/IntegerInput';
-import SelectInput from '../../src/components/inputs/reactHookForm/selectInputs/SelectInput';
-import CheckboxInput from '../../src/components/inputs/reactHookForm/booleans/CheckboxInput';
-import SwitchInput from '../../src/components/inputs/reactHookForm/booleans/SwitchInput';
-import SubmitButton from '../../src/components/inputs/reactHookForm/utils/SubmitButton';
-import ExpandingTextField from '../../src/components/inputs/reactHookForm/text/ExpandingTextField';
-import CustomFormProvider from '../../src/components/inputs/reactHookForm/provider/CustomFormProvider';
-import SelectClearable from '../../src/components/inputs/SelectClearable';
+import {
+    AutocompleteInput,
+    TextInput,
+    RadioInput,
+    SliderInput,
+    FloatInput,
+    IntegerInput,
+    SelectInput,
+    CheckboxInput,
+    SwitchInput,
+    SubmitButton,
+    ExpandingTextField,
+    CustomFormProvider,
+    SelectClearable,
+} from '../../src';
 
 const AUTOCOMPLETE_INPUT = 'autocomplete';
 const TEXT_INPUT = 'text';

demo/src/app.jsx

@@ -29,62 +29,12 @@ import { useMatch } from 'react-router';
 import { IntlProvider, useIntl } from 'react-intl';
 import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
 import { useCallback, useEffect, useRef, useState } from 'react';
-import SnackbarProvider from '../../src/components/snackbarProvider';
-import { AuthenticationRouter } from '../../src/components/authentication';
-import CardErrorBoundary from '../../src/components/cardErrorBoundary';
-import {
-    card_error_boundary_en,
-    card_error_boundary_fr,
-    element_search_en,
-    element_search_fr,
-    ElementType,
-    equipment_search_en,
-    equipment_search_fr,
-    EQUIPMENT_TYPE,
-    EquipmentItem,
-    equipmentStyles,
-    filter_en,
-    filter_fr,
-    filter_expert_en,
-    filter_expert_fr,
-    description_en,
-    description_fr,
-    equipments_en,
-    equipments_fr,
-    csv_en,
-    csv_fr,
-    flat_parameters_en,
-    flat_parameters_fr,
-    getFileIcon,
-    initializeAuthenticationDev,
-    LANG_ENGLISH,
-    LANG_FRENCH,
-    LANG_SYSTEM,
-    LIGHT_THEME,
-    login_en,
-    login_fr,
-    logout,
-    multiple_selection_dialog_en,
-    multiple_selection_dialog_fr,
-    report_viewer_en,
-    report_viewer_fr,
-    table_en,
-    table_fr,
-    top_bar_en,
-    top_bar_fr,
-    TopBar,
-    treeview_finder_en,
-    treeview_finder_fr,
-    useSnackMessage,
-} from '../../src';
-
 import translations from './demo_intl';
 
 // eslint-disable-next-line import/no-unresolved
 import PowsyblLogo from '../images/powsybl_logo.svg?react';
 import AppPackage from '../../package.json';
 
-import { generateTreeViewFinderClass, TreeViewFinder } from '../../src/components/treeViewFinder';
 import TreeViewFinderConfig from './TreeViewFinderConfig';
 
 import {
@@ -97,57 +47,111 @@ import {
 import LOGS_JSON from '../data/ReportViewer';
 
 import searchEquipments from '../data/EquipmentSearchBar';
-import OverflowableText from '../../src/components/overflowableText';
 
-import { setShowAuthenticationRouterLogin } from '../../src/redux/actions/authActions';
 import TableTab from './TableTab';
 import FlatParametersTab from './FlatParametersTab';
 
-import { toNestedGlobalSelectors } from '../../src/utils/styles';
 import InputsTab from './InputsTab';
-import inputs_en from '../../src/translations/en/inputsEn';
-import inputs_fr from '../../src/translations/fr/inputsFr';
 import { EquipmentSearchDialog } from './equipment-search';
 import { InlineSearch } from './inline-search';
-import MultipleSelectionDialog from '../../src/components/multipleSelectionDialog';
+import {
+    MultipleSelectionDialog,
+    OverflowableText,
+    SnackbarProvider,
+    TopBar,
+    TreeViewFinder,
+    CardErrorBoundary,
+    EquipmentItem,
+    AuthenticationRouter,
+    reportViewerEn,
+    loginEn,
+    topBarEn,
+    tableEn,
+    treeviewFinderEn,
+    elementSearchEn,
+    equipmentSearchEn,
+    filterEn,
+    filterExpertEn,
+    descriptionEn,
+    equipmentsEn,
+    csvEn,
+    cardErrorBoundaryEn,
+    flatParametersEn,
+    multipleSelectionDialogEn,
+    inputsEn,
+    inputsFr,
+    multipleSelectionDialogFr,
+    flatParametersFr,
+    cardErrorBoundaryFr,
+    filterExpertFr,
+    csvFr,
+    equipmentsFr,
+    descriptionFr,
+    filterFr,
+    equipmentSearchFr,
+    elementSearchFr,
+    treeviewFinderFr,
+    tableFr,
+    topBarFr,
+    loginFr,
+    reportViewerFr,
+    LIGHT_THEME,
+    LANG_ENGLISH,
+    LANG_SYSTEM,
+    LANG_FRENCH,
+    ElementType,
+    getFileIcon,
+    initializeAuthenticationDev,
+    toNestedGlobalSelectors,
+    generateTreeViewFinderClass,
+    useSnackMessage,
+    commonButtonEn,
+    commonButtonFr,
+    networkModificationsEn,
+    networkModificationsFr,
+} from '../../src';
 
 const messages = {
     en: {
-        ...report_viewer_en,
-        ...login_en,
-        ...top_bar_en,
-        ...table_en,
-        ...treeview_finder_en,
-        ...element_search_en,
-        ...equipment_search_en,
-        ...filter_en,
-        ...filter_expert_en,
-        ...description_en,
-        ...equipments_en,
-        ...csv_en,
-        ...card_error_boundary_en,
-        ...flat_parameters_en,
-        ...multiple_selection_dialog_en,
-        ...inputs_en,
+        ...reportViewerEn,
+        ...loginEn,
+        ...topBarEn,
+        ...tableEn,
+        ...treeviewFinderEn,
+        ...elementSearchEn,
+        ...equipmentSearchEn,
+        ...filterEn,
+        ...filterExpertEn,
+        ...descriptionEn,
+        ...equipmentsEn,
+        ...csvEn,
+        ...cardErrorBoundaryEn,
+        ...flatParametersEn,
+        ...multipleSelectionDialogEn,
+        ...commonButtonEn,
+        ...networkModificationsEn,
+        ...inputsEn,
         ...translations.en,
     },
     fr: {
-        ...report_viewer_fr,
-        ...login_fr,
-        ...top_bar_fr,
-        ...table_fr,
-        ...treeview_finder_fr,
-        ...element_search_fr,
-        ...equipment_search_fr,
-        ...filter_fr,
-        ...description_fr,
-        ...equipments_fr,
-        ...csv_fr,
-        ...filter_expert_fr,
-        ...card_error_boundary_fr,
-        ...flat_parameters_fr,
-        ...multiple_selection_dialog_fr,
-        ...inputs_fr,
+        ...reportViewerFr,
+        ...loginFr,
+        ...topBarFr,
+        ...tableFr,
+        ...treeviewFinderFr,
+        ...elementSearchFr,
+        ...equipmentSearchFr,
+        ...filterFr,
+        ...descriptionFr,
+        ...equipmentsFr,
+        ...csvFr,
+        ...filterExpertFr,
+        ...cardErrorBoundaryFr,
+        ...flatParametersFr,
+        ...commonButtonFr,
+        ...networkModificationsFr,
+        ...multipleSelectionDialogFr,
+        ...inputsFr,
         ...translations.fr,
     },
 };

demo/src/equipment-search.tsx

@@ -8,7 +8,14 @@ import { useState } from 'react';
 import { Button, TextField } from '@mui/material';
 import { Search } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
-import { ElementSearchDialog, EquipmentItem, equipmentStyles, EquipmentType, useElementSearch } from '../../src/index';
+import {
+    ElementSearchDialog,
+    EquipmentItem,
+    EquipmentItemProps,
+    equipmentStyles,
+    EquipmentType,
+    useElementSearch,
+} from '../../src/index';
 
 interface AnyElementInterface {
     id: string;
@@ -56,11 +63,11 @@ export function EquipmentSearchDialog() {
                 open={isSearchOpen}
                 onClose={() => setIsSearchOpen(false)}
                 onSearchTermChange={updateSearchTerm}
-                onSelectionChange={(element: any) => {
+                onSelectionChange={(element: unknown) => {
                     console.log(element);
                 }}
                 elementsFound={elementsFound}
-                renderElement={(props: any) => (
+                renderElement={(props: EquipmentItemProps) => (
                     <EquipmentItem styles={equipmentStyles} {...props} key={props.element.key} />
                 )}
                 searchTerm={searchTerm}

demo/src/inline-search.tsx

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import { TextField } from '@mui/material';
 import { Search } from '@mui/icons-material';
 import { useIntl } from 'react-intl';
-import { ElementSearchInput, EquipmentItem, EquipmentType, equipmentStyles } from '../../src';
+import { ElementSearchInput, EquipmentItem, EquipmentItemProps, EquipmentType, equipmentStyles } from '../../src';
 
 export function InlineSearch() {
     const [searchTerm, setSearchTerm] = useState('');
@@ -25,7 +25,7 @@ export function InlineSearch() {
     return (
         <ElementSearchInput
             onSearchTermChange={updateSearchTerm}
-            onSelectionChange={(element: any) => {
+            onSelectionChange={(element: unknown) => {
                 console.log(element);
             }}
             elementsFound={
@@ -46,7 +46,7 @@ export function InlineSearch() {
                       ]
                     : []
             }
-            renderElement={(props: any) => (
+            renderElement={(props: EquipmentItemProps) => (
                 <EquipmentItem styles={equipmentStyles} {...props} key={props.element.key} />
             )}
             searchTerm={searchTerm}