Remove old authentication flag and update fn call (#34) & Update commons-ui ts (#39)

Co-authored-by: Joris Mancini <[email protected]>

Author: Tristan-WorkGH

jest.config.ts

@@ -13,9 +13,8 @@ const config: Config = {
         '^.+\\.svg\\?react$': 'jest-svg-transformer',
         '^.+\\.(css|less|scss)$': 'identity-obj-proxy',
     },
-    // if need to test with AG Grid, see https://www.ag-grid.com/react-data-grid/testing/
-    transformIgnorePatterns: ['node_modules/(?!@gridsuite/commons-ui)'], // transform from ESM
-    moduleDirectories: ['node_modules', 'src'], // to allow absolute path from ./src
+    // see https://github.com/react-dnd/react-dnd/issues/3443
+    transformIgnorePatterns: ['node_modules/(?!react-dnd)/'],
     setupFiles: ['<rootDir>/jest.setup.ts'],
 };
 

jest.setup.ts

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { TextEncoder, TextDecoder } from 'util';
+import { TextEncoder, TextDecoder } from 'node:util';
 
 // fix for ReferenceError: TextDecoder / TextEncoder is not defined
 Object.assign(global, { TextDecoder, TextEncoder });

package-lock.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.53.0",
+        "@gridsuite/commons-ui": "0.63.0",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
@@ -85,8 +85,8 @@
         "jest-environment-jsdom": "^29.7.0",
         "jest-svg-transformer": "^1.0.0",
         "prettier": "^2.8.8",
-        "typescript": "5.1.6",
         "ts-node": "^10.9.2",
+        "typescript": "5.1.6",
         "vite": "^5.2.7",
         "vite-plugin-eslint": "^1.8.1",
         "vite-plugin-svgr": "^4.2.0",

package.json

@@ -31,6 +31,7 @@ import GridAdminLogoDark from '../../images/GridAdmin_logo_dark.svg?react';
 import AppPackage from '../../../package.json';
 import { AppState } from '../../redux/reducer';
 import { MainPaths } from '../../routes';
+import { AppDispatch } from '../../redux/store';
 
 const tabs = new Map<MainPaths, ReactElement>([
     [
@@ -65,7 +66,7 @@ const tabs = new Map<MainPaths, ReactElement>([
 
 const AppTopBar: FunctionComponent = () => {
     const theme = useTheme();
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
     const user = useSelector((state: AppState) => state.user);
     const userManagerInstance = useSelector(
         (state: AppState) => state.userManager?.instance
@@ -110,10 +111,12 @@ const AppTopBar: FunctionComponent = () => {
             appLicense={AppPackage.license}
             onLogoutClick={() => logout(dispatch, userManagerInstance)}
             onLogoClick={() => navigate('/', { replace: true })}
-            user={user}
+            user={user ?? undefined}
             appsAndUrls={appsAndUrls}
             globalVersionPromise={() =>
-                AppsMetadataSrv.fetchVersion().then((res) => res?.deployVersion)
+                AppsMetadataSrv.fetchVersion().then(
+                    (res) => res?.deployVersion ?? 'unknown'
+                )
             }
             additionalModulesPromise={StudySrv.getServersInfos}
             onThemeClick={handleChangeTheme}

src/components/App/app-top-bar.tsx

@@ -19,6 +19,8 @@ import {
     card_error_boundary_en,
     card_error_boundary_fr,
     CardErrorBoundary,
+    GsLangUser,
+    GsTheme,
     LANG_ENGLISH,
     LANG_FRENCH,
     LIGHT_THEME,
@@ -28,14 +30,12 @@ import {
     top_bar_en,
     top_bar_fr,
 } from '@gridsuite/commons-ui';
-import { IntlProvider } from 'react-intl';
+import { IntlConfig, IntlProvider } from 'react-intl';
 import { Provider, useSelector } from 'react-redux';
-import { SupportedLanguages } from '../../utils/language';
 import messages_en from '../../translations/en.json';
 import messages_fr from '../../translations/fr.json';
 import { store } from '../../redux/store';
 import { PARAM_THEME } from '../../utils/config-params';
-import { IntlConfig } from 'react-intl/src/types';
 import { AppState } from '../../redux/reducer';
 import { AppWithAuthRouter } from '../../routes';
 
@@ -91,7 +91,7 @@ const darkTheme: ThemeOptions = {
     agGridTheme: 'ag-theme-alpine-dark',
 };
 
-const getMuiTheme = (theme: unknown, locale: SupportedLanguages): Theme => {
+const getMuiTheme = (theme: GsTheme, locale: GsLangUser): Theme => {
     return responsiveFontSizes(
         createTheme(
             theme === LIGHT_THEME ? lightTheme : darkTheme,
@@ -100,7 +100,7 @@ const getMuiTheme = (theme: unknown, locale: SupportedLanguages): Theme => {
     );
 };
 
-const messages: Record<SupportedLanguages, IntlConfig['messages']> = {
+const messages: Record<GsLangUser, IntlConfig['messages']> = {
     en: {
         ...messages_en,
         ...login_en,

src/components/App/app-wrapper.tsx

@@ -31,11 +31,12 @@ import { getComputedLanguage } from '../../utils/language';
 import AppTopBar from './app-top-bar';
 import ReconnectingWebSocket from 'reconnecting-websocket';
 import { useDebugRender } from '../../utils/hooks';
+import { AppDispatch } from '../../redux/store';
 
 const App: FunctionComponent<PropsWithChildren<{}>> = (props, context) => {
     useDebugRender('app');
     const { snackError } = useSnackMessage();
-    const dispatch = useDispatch();
+    const dispatch = useDispatch<AppDispatch>();
     const user = useSelector((state: AppState) => state.user);
 
     const updateParams = useCallback(

src/components/App/app.tsx

@@ -24,3 +24,9 @@ declare module '@mui/material/styles/createTheme' {
         extends MuiThemeOptions,
             Partial<ThemeExtension> {}
 }
+
+declare module '@mui/utils/capitalize' {
+    export default function capitalize<S extends string>(
+        string: S
+    ): Capitalize<S>;
+}

src/module-mui.d.ts

@@ -12,12 +12,7 @@ import { Grid, IconButton, Tooltip } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { DirectoryItemSelector, ElementType } from '@gridsuite/commons-ui';
 import { useController, useWatch } from 'react-hook-form';
-import {
-    fetchDirectoryContent,
-    fetchPath,
-    fetchRootFolders,
-} from 'services/directory';
-import { fetchElementsInfos } from 'services/explore';
+import { DirectorySrv } from '../../../services';
 import LinkedPathDisplay from './linked-path-display';
 
 export interface ParameterSelectionProps {
@@ -50,7 +45,7 @@ const ParameterSelection: FunctionComponent<ParameterSelectionProps> = (
             setSelectedElementName(undefined);
             setParameterLinkValid(undefined);
         } else {
-            fetchPath(watchParamId)
+            DirectorySrv.fetchPath(watchParamId)
                 .then((res: any) => {
                     setParameterLinkValid(true);
                     setSelectedElementName(
@@ -140,9 +135,6 @@ const ParameterSelection: FunctionComponent<ParameterSelectionProps> = (
                 contentText={intl.formatMessage({
                     id: 'profiles.form.modification.parameterSelection.dialog.message',
                 })}
-                fetchDirectoryContent={fetchDirectoryContent}
-                fetchRootFolders={fetchRootFolders}
-                fetchElementsInfos={fetchElementsInfos}
             />
         </Grid>
     );

src/pages/profiles/modification/custom-mui-dialog.tsx

@@ -10,7 +10,7 @@ import ProfileModificationForm, {
     PROFILE_NAME,
     USER_QUOTAS,
 } from './profile-modification-form';
-import yup from 'utils/yup-config';
+import yup from '../../../utils/yup-config';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { useForm } from 'react-hook-form';
 import {
@@ -20,18 +20,17 @@ import {
     useMemo,
     useState,
 } from 'react';
-import { useSnackMessage } from '@gridsuite/commons-ui';
-import { getProfile, modifyProfile, UserProfile } from 'services/user-admin';
-import CustomMuiDialog from './custom-mui-dialog';
+import { CustomMuiDialog, useSnackMessage } from '@gridsuite/commons-ui';
+import { UserAdminSrv, UserProfile } from '../../../services';
 import { UUID } from 'crypto';
 
-// TODO remove FetchStatus when available in commons-ui (available soon)
-export const FetchStatus = {
-    IDLE: 'IDLE',
-    FETCHING: 'FETCHING',
-    FETCH_SUCCESS: 'FETCH_SUCCESS',
-    FETCH_ERROR: 'FETCH_ERROR',
-};
+// TODO remove FetchStatus when exported in commons-ui (available soon)
+export enum FetchStatus {
+    IDLE = 'IDLE',
+    FETCHING = 'FETCHING',
+    FETCH_SUCCESS = 'FETCH_SUCCESS',
+    FETCH_ERROR = 'FETCH_ERROR',
+}
 
 export interface ProfileModificationDialogProps {
     profileId: UUID | undefined;
@@ -44,7 +43,9 @@ const ProfileModificationDialog: FunctionComponent<
     ProfileModificationDialogProps
 > = ({ profileId, open, onClose, onUpdate }) => {
     const { snackError } = useSnackMessage();
-    const [dataFetchStatus, setDataFetchStatus] = useState(FetchStatus.IDLE);
+    const [dataFetchStatus, setDataFetchStatus] = useState<FetchStatus>(
+        FetchStatus.IDLE
+    );
 
     const formSchema = yup
         .object()
@@ -73,7 +74,7 @@ const ProfileModificationDialog: FunctionComponent<
                     loadFlowParameterId: profileFormData[LF_PARAM_ID],
                     maxAllowedCases: profileFormData[USER_QUOTAS],
                 };
-                modifyProfile(profileData)
+                UserAdminSrv.modifyProfile(profileData)
                     .catch((error) => {
                         snackError({
                             messageTxt: error.message,
@@ -96,7 +97,7 @@ const ProfileModificationDialog: FunctionComponent<
     useEffect(() => {
         if (profileId && open) {
             setDataFetchStatus(FetchStatus.FETCHING);
-            getProfile(profileId)
+            UserAdminSrv.getProfile(profileId)
                 .then((response) => {
                     setDataFetchStatus(FetchStatus.FETCH_SUCCESS);
                     reset({