@fluxo-dev/shell 25.3.9 → 25.4.0

package/index.esm.js

@@ -2,8 +2,8 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useEffect, Suspense, useRef, useCallback as useCallback$1, forwardRef, createElement as createElement$2, useContext, useMemo as useMemo$1, createContext, useLayoutEffect, memo, isValidElement, cloneElement, useImperativeHandle, lazy } from 'react';
 import { useSelector, connect, Provider } from 'react-redux';
-import { Navigate, Outlet, useNavigate, useLocation, Link, useOutlet, matchPath, Route, useSearchParams, createBrowserRouter, RouterProvider } from 'react-router-dom';
-import { useFlxNavigate, DataCard, SessionIdContext, TabActiveContext, IconFactory, ShellConfigProvider, useShellLayout, ShellPage, NoData, ConfirmModal, CronGenerator, Datagrid, RichTextEditorInput, ErrorPage as ErrorPage$1, FlxRoutes, WaitData } from '@fluxo-dev/ui-components';
+import { Navigate, Outlet, useNavigate, useLocation, Link, useOutlet, matchPath, useSearchParams, createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { useFlxNavigate, DataCard, SessionIdContext, TabActiveContext, IconFactory, ShellConfigProvider, useShellLayout, ShellPage, NoData, ConfirmModal, CronGenerator, Datagrid, RichTextEditorInput, ErrorPage as ErrorPage$1, WaitData } from '@fluxo-dev/ui-components';
 import { ModuleLoader } from '@fluxo-dev/shell-mfe';
 import { Text, Box, TextInput, Popover, Stack, UnstyledButton, Group, Highlight, ActionIcon, useMantineTheme, AppShell, Burger, Badge, Drawer, NavLink, Avatar, Center, Button, Divider, Modal, FocusTrap, Tabs, ScrollArea, ThemeIcon, Tooltip, Anchor, Space, useMantineColorScheme, Collapse, Menu, rem, Loader, Overlay, Grid, PasswordInput, Paper, Alert, Title, Card, ColorSwatch, FileButton, NumberInput, ColorInput, Checkbox, Switch, Select, Radio, LoadingOverlay, Chip, Image as Image$1, Table, SegmentedControl, MultiSelect, Code, Portal, useDirection, px as px$1, parseThemeColor, rgba as rgba$1, Breadcrumbs, TagsInput, Textarea, Accordion, useCombobox, Combobox, InputBase, Slider, MantineProvider } from '@mantine/core';
 import { MinimalStateViewer, RavifyProvider, JobsViewer } from '@fluxo-dev/shell-ravify';
@@ -13847,6 +13847,7 @@ function AppContent(props) {
     children: [props.withMultipleSessions ? jsxs(Tabs, {
       variant: 'none',
       value: currentSessionId,
+      keepMounted: true,
       onChange: value => value && sessionContext.setCurrentSession(value),
       children: [jsx(Box, {
         style: {
@@ -60931,10 +60932,14 @@ function ConnectedUsers() {
   // Confirm modal state for force logout
   const [showForceLogoutModal, setShowForceLogoutModal] = useState(false);
   const [deviceToDisconnect, setDeviceToDisconnect] = useState(null);
+  // Debounce timer per evitare troppi refresh consecutivi
+  const [updateDebounceTimer, setUpdateDebounceTimer] = useState(null);
   // Memoizza la funzione di caricamento per poterla usare nell'event handler
-  const loadConnectedUsers = useCallback$1(() => __awaiter(this, void 0, void 0, function* () {
+  const loadConnectedUsers = useCallback$1((...args_1) => __awaiter(this, [...args_1], void 0, function* (showLoader = true) {
     try {
-      setLoading(true);
+      if (showLoader) {
+        setLoading(true);
+      }
       const users = yield FluxoClientSys.Instance.sessionHub.getConnectedUsers();
       setConnectedUsers(users);
       // Ottieni il connection ID corrente
@@ -60955,7 +60960,9 @@ function ConnectedUsers() {
         color: 'red'
       });
     } finally {
-      setLoading(false);
+      if (showLoader) {
+        setLoading(false);
+      }
     }
   }), []);
   // Carica gli utenti connessi all'avvio
@@ -60985,8 +60992,17 @@ function ConnectedUsers() {
   // Ascolta l'evento OnConnectedUsersChanged e ricarica automaticamente la lista
   useEffect(() => {
     const handleConnectedUsersChanged = () => {
-      console.info('👥 Connected users changed, reloading list...');
-      loadConnectedUsers();
+      console.info('👥 Connected users changed, scheduling reload...');
+      // Cancella il timer precedente se esiste
+      if (updateDebounceTimer) {
+        clearTimeout(updateDebounceTimer);
+      }
+      // Imposta un nuovo timer con debounce di 500ms
+      const timer = setTimeout(() => {
+        console.info('👥 Executing debounced reload...');
+        loadConnectedUsers(false); // false = non mostrare il loader
+      }, 500);
+      setUpdateDebounceTimer(timer);
     };
     // Registra l'event handler
     FluxoClientSys.Instance.sessionHub.on('OnConnectedUsersChanged', handleConnectedUsersChanged);
@@ -60995,8 +61011,12 @@ function ConnectedUsers() {
     return () => {
       FluxoClientSys.Instance.sessionHub.off('OnConnectedUsersChanged', handleConnectedUsersChanged);
       console.info('🧹 Stopped listening for OnConnectedUsersChanged events');
+      // Pulisci il timer se esiste
+      if (updateDebounceTimer) {
+        clearTimeout(updateDebounceTimer);
+      }
     };
-  }, [loadConnectedUsers]);
+  }, [loadConnectedUsers, updateDebounceTimer]);
   const toggleUserExpand = userId => {
     const newExpanded = new Set(expandedUsers);
     if (newExpanded.has(userId)) {
@@ -61110,7 +61130,6 @@ function ConnectedUsers() {
       children: [jsx(Card, {
         withBorder: true,
         padding: "lg",
-        radius: "md",
         children: jsxs(Stack, {
           gap: "xs",
           children: [jsxs(Group, {
@@ -61145,7 +61164,6 @@ function ConnectedUsers() {
       }), jsx(Card, {
         withBorder: true,
         padding: "lg",
-        radius: "md",
         children: jsxs(Stack, {
           gap: "xs",
           children: [jsxs(Group, {
@@ -61180,7 +61198,6 @@ function ConnectedUsers() {
       }), jsx(Card, {
         withBorder: true,
         padding: "lg",
-        radius: "md",
         children: jsxs(Stack, {
           gap: "xs",
           children: [jsxs(Group, {
@@ -65042,7 +65059,7 @@ function McpServerManagement() {
 function Settings(props) {
   const [currentTab, setCurrentTab] = useState('ui');
   const [apiRestDoc, setApiRestDoc] = useState();
-  const navigate = useNavigate();
+  const navigate = useFlxNavigate();
   const {
     hasAdminAccess,
     hasDeveloperAccess,
@@ -65054,6 +65071,9 @@ function Settings(props) {
   } = useAppSelector(state => state.layout.systemSettings);
   const [showBiEditorModal, setShowBiEditorModal] = useState(false);
   const isClosingRef = useRef(false);
+  const {
+    headerHeight
+  } = useShellLayout();
   //useDocumentTitle('Amministrazione');
   // Intercetta il refresh e il cambio tab del browser
   useEffect(() => {
@@ -65277,7 +65297,7 @@ function Settings(props) {
       items: [{
         key: 'bi',
         title: jsx(Text, {
-          children: "BI Editor"
+          children: "BI Designer"
         }),
         onClick: () => {
           //window.location.hash = 'bi';
@@ -65465,7 +65485,11 @@ function Settings(props) {
             children: "KOREBI"
           })]
         }),
-        onClick: () => navigate('/korebi-ide'),
+        onClick: () => navigate('/korebi-ide', {
+          state: {
+            title: "Korebi IDE"
+          }
+        }),
         disabled: false,
         icon: jsx(IconCode, {
           size: 18
@@ -65540,32 +65564,27 @@ function Settings(props) {
           children: jsx(EmailTemplate, {})
         }) : jsx(ErrorPage$1, {});
       case 'apidoc':
-        return hasAdminAccess || hasDeveloperAccess ? jsx(ScrollArea, {
-          style: {
-            height: 'calc(100vh - 132px)'
-          },
-          children: jsx(ApiReferenceReact, {
-            configuration: {
-              darkMode: false,
-              customCss: '.darklight-reference {display: none !important} .references-navigation-list  { height: calc(100vh - 132px) !important; }',
-              hideDarkModeToggle: true,
-              forceDarkModeState: 'light',
-              authentication: {
-                http: {
-                  basic: {
-                    username: "",
-                    password: ""
-                  },
-                  bearer: {
-                    token: localStorage.getItem('access-token')
-                  }
+        return hasAdminAccess || hasDeveloperAccess ? jsx(ApiReferenceReact, {
+          configuration: {
+            showDeveloperTools: 'never',
+            darkMode: false,
+            customCss: `.darklight-reference {display: none !important} aside {height: calc(100vh - 178px) !important; top: ${headerHeight + 40}px !important; } .open-api-client-button {display: none !important}`,
+            hideDarkModeToggle: true,
+            forceDarkModeState: 'light',
+            authentication: {
+              http: {
+                bearer: {
+                  token: localStorage.getItem('access-token')
                 }
-              },
-              spec: {
-                url: FluxoClientSys.Instance.clientConfig.fluxoInstanceUrl.replace('/api', '') + '/openapi/v1.json'
               }
-            }
-          })
+            },
+            sources: [{
+              url: FluxoClientSys.Instance.clientConfig.fluxoInstanceUrl.replace('/api', '') + '/openapi/v1.json',
+              agent: {
+                disabled: true
+              }
+            }]
+          }
         }) : jsx(ErrorPage$1, {});
       /*return apiRestDoc ? (
         <DataCard title={'Documentazione API REST'}>
@@ -65672,42 +65691,47 @@ function Settings(props) {
   });
 }
 
-function MainRoutes(props) {
-  const {
-    hasAdminAccess,
-    hasDeveloperAccess,
-    hasDataAnalystAccess
-  } = useSelector(state => state.layout);
-  const KIde = /*#__PURE__*/lazy(() => import('@fluxo-dev/shell-korebi').then(({
-    KorebiIde
-  }) => ({
-    default: KorebiIde
-  })));
-  return jsxs(FlxRoutes, {
-    children: [props.isAdminFrontend && (hasDeveloperAccess || hasDataAnalystAccess || hasAdminAccess) && jsxs(Fragment, {
-      children: [jsx(Route, {
-        path: 'settings',
-        element: jsx(Settings, {
-          slots: props.fluxoShellProps.slots,
-          pluginEndpoint: props.pluginEndpoint,
-          frontends: props.frontends
-        })
-      }), jsx(Route, {
-        path: 'korebi-ide',
-        element: jsx(Suspense, {
-          children: jsx(KIde, {})
-        })
-      }), jsx(Route, {
-        path: 'ravify/jobs-viewer',
-        element: jsx(JobsViewer, {})
-      })]
-    }), props.fluxoShellProps.ui.security.showMyProfile && jsx(Route, {
+const KIde = /*#__PURE__*/lazy(() => import('@fluxo-dev/shell-korebi').then(({
+  KorebiIde
+}) => ({
+  default: KorebiIde
+})));
+/**
+ * Genera le routes principali come RouteObject[] invece di componente wrapper
+ * Questo evita il remount dei componenti quando si switcha tra sessioni
+ */
+function generateMainRoutes(props, hasAdminAccess, hasDeveloperAccess, hasDataAnalystAccess) {
+  const routes = [];
+  if (props.isAdminFrontend && (hasDeveloperAccess || hasDataAnalystAccess || hasAdminAccess)) {
+    routes.push({
+      path: 'settings',
+      element: jsx(Settings, {
+        slots: props.fluxoShellProps.slots,
+        pluginEndpoint: props.pluginEndpoint,
+        frontends: props.frontends
+      })
+    }, {
+      path: 'korebi-ide',
+      element: jsx(Suspense, {
+        fallback: jsx("div", {
+          children: "Loading..."
+        }),
+        children: jsx(KIde, {})
+      })
+    }, {
+      path: 'ravify/jobs-viewer',
+      element: jsx(JobsViewer, {})
+    });
+  }
+  if (props.fluxoShellProps.ui.security.showMyProfile) {
+    routes.push({
       path: 'me',
       element: jsx(UserProfile, {
         slots: props.fluxoShellProps.slots
       })
-    })]
-  });
+    });
+  }
+  return routes;
 }
 
 function ForgotPassword(props) {
@@ -78163,15 +78187,14 @@ function FluxoShell(props) {
           children: [{
             index: true,
             element: flxFrontend.dashboardComponent
-          }, {
-            path: '/*',
-            element: jsx(MainRoutes, {
-              fluxoShellProps: props,
-              isAdminFrontend: flxFrontend.id === 'admin',
-              pluginEndpoint: props.pluginEndpoint,
-              frontends: props.frontends
-            })
-          }, ...generateRoutesFromEmbeddedModules(flxFrontend, 'protected'), ...generateRoutesFromDeployedApps(flxFrontend, res.apps), ...generateRoutesFromJitApps(flxFrontend)]
+          },
+          // Espande le routes di MainRoutes direttamente qui per evitare il wrapper
+          ...generateMainRoutes({
+            fluxoShellProps: props,
+            isAdminFrontend: flxFrontend.id === 'admin',
+            pluginEndpoint: props.pluginEndpoint,
+            frontends: props.frontends
+          }, res.hasAdminAccess || false, res.hasDeveloperAccess || false, res.hasDataAnalystAccess || false), ...generateRoutesFromEmbeddedModules(flxFrontend, 'protected'), ...generateRoutesFromDeployedApps(flxFrontend, res.apps), ...generateRoutesFromJitApps(flxFrontend)]
         }, {
           path: '*',
           element: jsx(ErrorPage, {})

package/package.json

@@ -1,23 +1,23 @@
 {
   "name": "@fluxo-dev/shell",
-  "version": "25.3.9",
+  "version": "25.4.0",
   "peerDependencies": {
     "react": "^18.3.1",
     "@mantine/core": "^7.12.2",
     "react-router-dom": "^6.11.2",
     "react-redux": "^8.0.5",
     "@reduxjs/toolkit": "^1.9.1",
-    "@fluxo-dev/api-client-base": "^25.3.9",
-    "@fluxo-dev/shell-bi": "^25.3.9",
-    "@fluxo-dev/shell-hub": "^25.3.9",
-    "@fluxo-dev/shell-korebi": "^25.3.9",
-    "@fluxo-dev/shell-mfe": "^25.3.9",
-    "@fluxo-dev/shell-printing": "^25.3.9",
-    "@fluxo-dev/shell-reporting": "^25.3.9",
-    "@fluxo-dev/shell-workflow": "^25.3.9",
-    "@fluxo-dev/shell-ravify": "^25.3.9",
-    "@fluxo-dev/state": "^25.3.9",
-    "@fluxo-dev/ui-components": "^25.3.9",
+    "@fluxo-dev/api-client-base": "^25.4.0",
+    "@fluxo-dev/shell-bi": "^25.4.0",
+    "@fluxo-dev/shell-hub": "^25.4.0",
+    "@fluxo-dev/shell-korebi": "^25.4.0",
+    "@fluxo-dev/shell-mfe": "^25.4.0",
+    "@fluxo-dev/shell-printing": "^25.4.0",
+    "@fluxo-dev/shell-reporting": "^25.4.0",
+    "@fluxo-dev/shell-workflow": "^25.4.0",
+    "@fluxo-dev/shell-ravify": "^25.4.0",
+    "@fluxo-dev/state": "^25.4.0",
+    "@fluxo-dev/ui-components": "^25.4.0",
     "@scalar/api-reference-react": "^0.3.142",
     "@devexpress/analytics-core": "23.1.3",
     "devexpress-dashboard": "23.1.3",

package/src/lib/components/routes/main-routes.d.ts

@@ -1,3 +1,4 @@
+import { RouteObject } from "react-router-dom";
 import { FluxoShellProps, ShellFrontend } from '../../app';
 export interface MainRoutesProps {
     pluginEndpoint: string;
@@ -5,4 +6,8 @@ export interface MainRoutesProps {
     isAdminFrontend: boolean;
     fluxoShellProps: FluxoShellProps;
 }
-export declare function MainRoutes(props: MainRoutesProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Genera le routes principali come RouteObject[] invece di componente wrapper
+ * Questo evita il remount dei componenti quando si switcha tra sessioni
+ */
+export declare function generateMainRoutes(props: MainRoutesProps, hasAdminAccess: boolean, hasDeveloperAccess: boolean, hasDataAnalystAccess: boolean): RouteObject[];