Add mutualized api functions

README.md

@@ -2,30 +2,32 @@
 
 Library for sharing GridSuite apps commons components
 
-#### For developers
+## For developers
 
 The commons-ui library have a demo app in which you can call your components to test them.
 The `npm start` command install the library's dependencies then launches the demo app.
 
 If you want to test your library integration with a consumer application my-app you have first
-to build commons-ui via 
+to build commons-ui via
 - `npm install` (if not already done to get `tsc`)
 - `npm run build:pack`
 
 Then in the my-app project :
-- Change the commons-ui dependency in my-app's package.json from    
-`@gridsuite/commons-ui:"^x.x.x"`    
-to     
-`@gridsuite/commons-ui:"file:{PATH_TO_LIBRARY}/gridsuite-commons-ui-{LIBRARY_VERSION}.tgz"` 
+- Change the commons-ui dependency in my-app's package.json from `@gridsuite/commons-ui:"^x.x.x"`
+  to `@gridsuite/commons-ui:"file:{PATH_TO_LIBRARY}/gridsuite-commons-ui-{LIBRARY_VERSION}.tgz"`
 - `npm install`
 - `npm start`
 
 *Warning* : with Create React App, we realised the library was not updating correctly if you try to install the library multiple times.
 To fix this, run this command from the app **after** running "npm install"
 - rm -Rf node_modules/.cache
-
 
-#### For integrators
+### Imports
+Anything not exported at the root level of commons-ui is considered as internal and
+not safe to use.
+
+
+## For integrators
 
 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:
@@ -40,14 +42,16 @@ you need to follow the steps below:
     - Click on "Publish release"
 -   It will trigger a job that will publish the release on NPM
 
-#### License Headers and dependencies checking
+
+## License Headers and dependencies checking
 
 To check dependencies license compatibility with this project one locally, please run the following command :
 
 ```
 npm run licenses-check
 ```
 
-Notes : 
+Notes :
 * Check [license-checker-config.json](license-checker-config.json) for license white list and exclusion.
+
 If you need to update this list, please inform organization's owners.

demo/src/app.jsx

@@ -92,7 +92,7 @@ import searchEquipments from '../data/EquipmentSearchBar';
 import { EquipmentItem } from '../../src/components/ElementSearchDialog/equipment-item';
 import OverflowableText from '../../src/components/OverflowableText';
 
-import { setShowAuthenticationRouterLogin } from '../../src/redux/authActions';
+import { setShowAuthenticationRouterLogin } from '../../src/utils/AuthActions';
 import TableTab from './TableTab';
 import FlatParametersTab from './FlatParametersTab';
 

package.json

@@ -42,27 +42,29 @@
         "react-dnd-html5-backend": "^16.0.1",
         "react-querybuilder": "^7.2.0",
         "react-virtualized": "^9.22.5",
+        "type-fest": "^4.21.0",
         "uuid": "^9.0.1"
     },
     "peerDependencies": {
-        "@mui/system": "^5.15.15",
-        "@mui/x-tree-view": "^6.17.0",
-        "papaparse": "^5.4.1",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@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",
         "notistack": "^3.0.1",
+        "papaparse": "^5.4.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.51.2",
         "react-intl": "^6.6.4",
         "react-papaparse": "^4.1.0",
         "react-router-dom": "^6.22.3",
+        "reconnecting-websocket": "^4.4.0",
         "yup": "^1.4.0"
     },
     "devDependencies": {
@@ -129,7 +131,6 @@
         "react-resizable": "^3.0.5",
         "react-router-dom": "^6.22.3",
         "ts-node": "^10.9.2",
-        "type-fest": "^4.14.0",
         "typescript": "5.1.6",
         "utf-8-validate": "^6.0.3",
         "vite": "^5.2.7",

src/components/AuthenticationRouter/AuthenticationRouter.tsx

@@ -11,13 +11,12 @@ import { Alert, AlertTitle, Grid } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { UserManager } from 'oidc-client';
 import SignInCallbackHandler from '../SignInCallbackHandler';
+import { AuthenticationActions } from '../../utils/AuthActions';
 import { handleSigninCallback, handleSilentRenewCallback, login, logout } from '../../utils/AuthService';
 import SilentRenewCallbackHandler from '../SilentRenewCallbackHandler';
 import Login from '../Login';
 import Logout from '../Login/Logout';
 
-import { AuthenticationActions } from '../../redux/authActions';
-
 export type AuthenticationRouterErrorState = {
     userName?: string;
     userValidationError?: { error: Error };

src/components/DirectoryItemSelector/directory-item-selector.tsx

@@ -12,7 +12,7 @@ import getFileIcon from '../../utils/ElementIcon';
 import { ElementType } from '../../utils/ElementType';
 import TreeViewFinder, { TreeViewFinderNodeProps, TreeViewFinderProps } from '../TreeViewFinder/TreeViewFinder';
 import { useSnackMessage } from '../../hooks/useSnackMessage';
-import { fetchDirectoryContent, fetchElementsInfos, fetchRootFolders } from '../../services';
+import { directorySvc, exploreSvc } from '../../services/instances';
 
 const styles = {
     icon: (theme: Theme) => ({
@@ -219,7 +219,8 @@ function DirectoryItemSelector({
     );
 
     const updateRootDirectories = useCallback(() => {
-        fetchRootFolders(types)
+        directorySvc
+            .fetchRootFolders(types)
             .then((newData) => {
                 const [nrs, mdr] = updatedTree(rootsRef.current, nodeMap.current, null, newData);
                 setRootDirectories(nrs);
@@ -237,29 +238,32 @@ function DirectoryItemSelector({
     const fetchDirectory = useCallback(
         (nodeId: UUID): void => {
             const typeList = types.includes(ElementType.DIRECTORY) ? [] : types;
-            fetchDirectoryContent(nodeId, typeList)
+            directorySvc
+                .fetchDirectoryContent(nodeId, typeList)
                 .then((children) => {
                     const childrenMatchedTypes = children.filter((item: any) => contentFilter().has(item.type));
 
                     if (childrenMatchedTypes.length > 0 && equipmentTypes && equipmentTypes.length > 0) {
-                        fetchElementsInfos(
-                            childrenMatchedTypes.map((e: any) => e.elementUuid),
-                            types,
-                            equipmentTypes
-                        ).then((childrenWithMetadata) => {
-                            const filtredChildren = itemFilter
-                                ? childrenWithMetadata.filter((val: any) => {
-                                      // Accept every directory
-                                      if (val.type === ElementType.DIRECTORY) {
-                                          return true;
-                                      }
-                                      // otherwise filter with the custom itemFilter func
-                                      return itemFilter(val);
-                                  })
-                                : childrenWithMetadata;
-                            // update directory content
-                            addToDirectory(nodeId, filtredChildren);
-                        });
+                        exploreSvc
+                            .fetchElementsInfos(
+                                childrenMatchedTypes.map((e: any) => e.elementUuid),
+                                types,
+                                equipmentTypes
+                            )
+                            .then((childrenWithMetadata) => {
+                                const filtredChildren = itemFilter
+                                    ? childrenWithMetadata.filter((val: any) => {
+                                          // Accept every directory
+                                          if (val.type === ElementType.DIRECTORY) {
+                                              return true;
+                                          }
+                                          // otherwise filter with the custom itemFilter func
+                                          return itemFilter(val);
+                                      })
+                                    : childrenWithMetadata;
+                                // update directory content
+                                addToDirectory(nodeId, filtredChildren);
+                            });
                     } else {
                         // update directory content
                         addToDirectory(nodeId, childrenMatchedTypes);

src/components/TopBar/AboutDialog.tsx

@@ -34,6 +34,8 @@ import { LoadingButton } from '@mui/lab';
 import { Apps, DnsOutlined, ExpandMore, Gavel, QuestionMark, Refresh, WidgetsOutlined } from '@mui/icons-material';
 import { FormattedMessage } from 'react-intl';
 import { LogoText } from './GridLogo';
+import { studySvc } from '../../services/instances';
+import { GridSuiteModule, ModuleType, moduleTypeSort } from './modules';
 
 const styles = {
     general: {
@@ -104,14 +106,6 @@ function getGlobalVersion(
     return Promise.resolve(null);
 }
 
-const moduleTypeSort = {
-    app: 1,
-    server: 10,
-    other: 20,
-};
-
-type ModuleType = keyof typeof moduleTypeSort;
-
 type ModuleDefinition = { name: string; type: ModuleType };
 
 function compareModules(c1: ModuleDefinition, c2: ModuleDefinition) {
@@ -122,13 +116,7 @@ function compareModules(c1: ModuleDefinition, c2: ModuleDefinition) {
     );
 }
 
-export type GridSuiteModule = {
-    name: string;
-    type: ModuleType;
-    version?: string;
-    gitTag?: string;
-    // license?: string;
-};
+export type { GridSuiteModule } from './modules';
 
 export interface AboutDialogProps {
     open: boolean;
@@ -138,7 +126,7 @@ export interface AboutDialogProps {
     appVersion?: string;
     appGitTag?: string;
     appLicense?: string;
-    additionalModulesPromise?: () => Promise<GridSuiteModule[]>;
+    additionalModulesPromise?: string | (() => Promise<GridSuiteModule[]>);
     logo?: ReactNode;
 }
 
@@ -273,7 +261,7 @@ function Module({ type, name, version, gitTag }: GridSuiteModule) {
     );
 }
 
-function AboutDialog({
+export default function AboutDialog({
     open,
     onClose,
     globalVersionPromise,
@@ -283,7 +271,7 @@ function AboutDialog({
     appLicense,
     additionalModulesPromise,
     logo,
-}: AboutDialogProps) {
+}: Readonly<AboutDialogProps>) {
     const theme = useTheme();
     const [isRefreshing, setIsRefreshing] = useState(false);
     const [loadingGlobalVersion, setLoadingGlobalVersion] = useState(false);
@@ -319,7 +307,11 @@ function AboutDialog({
                 // license: appLicense,
             };
             (additionalModulesPromise
-                ? Promise.resolve(setLoadingAdditionalModules(true)).then(() => additionalModulesPromise())
+                ? Promise.resolve(setLoadingAdditionalModules(true)).then(() =>
+                      typeof additionalModulesPromise === 'string'
+                          ? studySvc.getServersInfos(additionalModulesPromise)
+                          : additionalModulesPromise()
+                  )
                 : Promise.reject(new Error('no getter'))
             )
                 .then(
@@ -482,5 +474,3 @@ function AboutDialog({
         </Dialog>
     );
 }
-
-export default AboutDialog;

src/components/TopBar/TopBar.test.tsx

@@ -7,16 +7,16 @@
 
 import { render } from '@testing-library/react';
 import { IntlProvider } from 'react-intl';
-
 import { red } from '@mui/material/colors';
 import { createTheme, ThemeProvider } from '@mui/material';
 import { expect, it } from '@jest/globals';
-import TopBar, { LANG_ENGLISH } from './TopBar';
-import { CommonMetadata, top_bar_en } from '../..';
-
+import TopBar from './TopBar';
+import { LANG_ENGLISH } from '../../utils/language';
+import top_bar_en from '../translations/top-bar-en';
+import { AppMetadataCommon } from '../../services';
 import PowsyblLogo from '../images/powsybl_logo.svg?react';
 
-const apps: CommonMetadata[] = [
+const apps: AppMetadataCommon[] = [
     {
         name: 'App1',
         url: '/app1',

src/components/TopBar/TopBar.tsx

@@ -47,7 +47,9 @@ import { User } from 'oidc-client';
 import GridLogo, { GridLogoProps } from './GridLogo';
 import AboutDialog, { AboutDialogProps } from './AboutDialog';
 import { LogoutProps } from '../Login/Logout';
-import { CommonMetadata } from '../../services';
+import { AppMetadataCommon } from '../../services';
+import { GsLang, LANG_ENGLISH, LANG_FRENCH, LANG_SYSTEM } from '../../utils/language';
+import { DARK_THEME, GsTheme, LIGHT_THEME } from '../../utils/theme';
 
 const styles = {
     grow: {
@@ -145,18 +147,9 @@ const CustomListItemIcon = styled(ListItemIcon)({
     borderRadius: '25px',
 });
 
-export const DARK_THEME = 'Dark';
-export const LIGHT_THEME = 'Light';
-export const LANG_SYSTEM = 'sys';
-export const LANG_ENGLISH = 'en';
-export const LANG_FRENCH = 'fr';
 const EN = 'EN';
 const FR = 'FR';
 
-export type GsLangUser = typeof LANG_ENGLISH | typeof LANG_FRENCH;
-export type GsLang = GsLangUser | typeof LANG_SYSTEM;
-export type GsTheme = typeof LIGHT_THEME | typeof DARK_THEME;
-
 export type TopBarProps = Omit<GridLogoProps, 'onClick'> &
     Omit<LogoutProps, 'disabled'> &
     Omit<AboutDialogProps, 'open' | 'onClose'> & {
@@ -165,7 +158,7 @@ export type TopBarProps = Omit<GridLogoProps, 'onClick'> &
         user?: User;
         onAboutClick?: () => void;
         logoAboutDialog?: ReactNode;
-        appsAndUrls: CommonMetadata[];
+        appsAndUrls: AppMetadataCommon[];
         onThemeClick?: (theme: GsTheme) => void;
         theme?: GsTheme;
         onEquipmentLabellingClick?: (toggle: boolean) => void;