@fluxo-dev/shell 0.0.8 → 0.0.12

package/src/lib/app.tsx

@@ -1,374 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {Provider} from "react-redux";
-import {createBrowserRouter, RouteObject, RouterProvider} from "react-router-dom";
-import ErrorPage from "./components/error-page/404";
-import ProtectedRoute from "./utils/security/protected-route";
-
-import FluxoPluginLoader from "./pages/general/fluxo-plugin-loader";
-import OnlyNotLoggedRoute from "./utils/security/only-not-logged-route";
-import BlankLayout from "./layouts/blank/blank-layout";
-import AppLayout from "./layouts/main/app-layout";
-import LoginPage from "./pages/login/login-page";
-
-import {store} from "@fluxo-dev/state";
-import {MantineProvider} from "@mantine/core";
-import {Notifications} from "@mantine/notifications";
-import {MainRoutes} from "./components/routes/main-routes";
-import {
-  AppState,
-  EmbeddedModule,
-  FeatureList,
-  FluxoApp,
-  FluxoClientSys,
-  FluxoStateDispatcher
-} from "@fluxo-dev/api-client-base";
-import {WaitData} from "@fluxo-dev/ui-components";
-import ForgotPassword from "./pages/login/forgot-password";
-import ResetPassword from "./pages/login/reset-password";
-import AccountConfirmation from "./pages/login/account-confirmation";
-import {AppJitManager} from "./services/app-jit-manager";
-import {DatesProvider} from "@mantine/dates";
-import {reportsModule} from "@fluxo-fe/shell/reporting";
-import {workflowModule} from "@fluxo-fe/shell/workflow";
-import './app.module.css';
-import 'dayjs/locale/it';
-
-export interface FluxoShellProps {
-  pluginEndpoint: string,
-  appVersion: string,
-  dashboardComponent: React.ReactNode,
-  modules: EmbeddedModule[]
-}
-
-export function FluxoShell(props: FluxoShellProps) {
-
-
-  const [initialOperationsFinished, setInitialOperationsFinished] = useState<boolean>(false);
-  const [router, setRouter] = useState<any>();
-  const [brandColors, setBrandColors] = useState<any>(["#e9f4ff","#c2d8ef","#9bbae1","#749ad6","#4d7aca","#355db2","#29458a","#1d2e63","#101b3d","#030a18"]);
-
-  const generateRoutesFromEmbeddedModules = (): RouteObject[] => {
-    const embeddedModules: EmbeddedModule[] = [
-      ...props.modules,
-      reportsModule,
-      workflowModule
-    ];
-
-    const rObjs: RouteObject[] = [];
-
-    embeddedModules.forEach((eModule) => {
-      rObjs.push({
-        path: `/${eModule.scope}/${eModule.name}/*`,
-        children: eModule.getRouteObject()
-      });
-    })
-
-    return rObjs;
-  }
-
-  const generateRoutesFromJitApps = (): RouteObject[] => {
-    const jitAppManager = new AppJitManager();
-
-    const jitApps = jitAppManager.loadAppConfigurations();
-
-    const rObjs: RouteObject[] = [];
-
-    jitApps.filter(a => a.state == AppState.Active).map((app) => {
-      rObjs.push({
-        path: `/${app.developmentRoute}`,
-        children: [
-          {
-            path: `*`,
-            element: <FluxoPluginLoader module={`./${app.scope}`} scope={app.name} url={`${app.developmentUrl}/remoteEntry.js`} />
-          }
-        ]
-      });
-    });
-
-    const jitAppsFeatures: FeatureList = {
-      features: [],
-      modules: []
-    };
-
-    jitApps.filter(a => a.state == AppState.Active).map((app) => {
-
-      jitAppsFeatures.modules.push(
-        {key: app.scope, name: app.name, description: app.description}
-      );
-
-      app.menu.map((f) => {
-
-        f.items?.map((ff) => {
-          jitAppsFeatures.features.push({
-            name: ff.name,
-            description: ff.name,
-            routerLink: `${app.developmentRoute}/${ff.route}`,
-            identifier: app.scope + '.' + f.name + '.' + ff.name,
-            groupName: f.name,
-            groupKey: f.name,
-            moduleKey: app.scope,
-            moduleName: app.name
-          });
-        });
-
-      });
-    });
-
-    FluxoStateDispatcher.dispatchSetJitAppsFeatures(jitAppsFeatures);
-
-    return rObjs;
-  }
-
-  const generateRoutesFromDeployedApps = (apps: FluxoApp[]): RouteObject[] => {
-
-    const rObjs: RouteObject[] = [];
-
-    apps.map((app) => {
-      rObjs.push({
-        path: `/${app.scope}/${app.name}`,
-        children: [
-          {
-            path: `*`,
-            element: <FluxoPluginLoader module={`./${app.scope}`} scope={app.name} url={`${props.pluginEndpoint}/${app.scope}/${app.name}/remoteEntry.js`} />
-          }
-        ]
-      });
-    });
-
-    return rObjs;
-  }
-
-  const generateAuthRoutes = (): RouteObject => {
-    return {
-      path: "/auth",
-      element: <OnlyNotLoggedRoute><BlankLayout/></OnlyNotLoggedRoute>,
-      children: [
-        {
-          path: "login",
-          element: <LoginPage/>
-        },
-        {
-          path: "forgot-password",
-          element: <ForgotPassword/>
-        },
-        {
-          path: "reset-password",
-          element: <ResetPassword/>
-        },
-        {
-          path: "account-confirmation",
-          element: <AccountConfirmation/>
-        }
-      ]
-    };
-  }
-
-  useEffect(() => {
-    FluxoClientSys.Instance.configuration.getInitialConfiguration()
-      .then((res) => {
-
-        FluxoStateDispatcher.dispatchSetConfiguration(res.ui);
-        FluxoStateDispatcher.dispatchSetAppMenu(res.menu);
-        FluxoStateDispatcher.dispatchSetSysFeatures(res.features);
-        FluxoStateDispatcher.dispatchSetUserPermissions(res.permissions.map(a => a.fullIdentifier))
-        FluxoStateDispatcher.dispatchSetRouteRules(res.routeRules);
-
-        const rObjs: RouteObject[] = [
-          generateAuthRoutes(),
-          {
-            element: <ProtectedRoute><AppLayout appVersion={props.appVersion} /></ProtectedRoute>,
-            errorElement: <ErrorPage />,
-            children: [
-              {
-                index: true,
-                element: props.dashboardComponent
-              },
-              {
-                path: '/*',
-                element: <MainRoutes pluginEndpoint={props.pluginEndpoint} modules={props.modules} />,
-              },
-              ...generateRoutesFromEmbeddedModules(),
-              ...generateRoutesFromDeployedApps(res.apps),
-              ...generateRoutesFromJitApps(),
-            ],
-          },
-          {
-            path: '*',
-            element: <ErrorPage />,
-          }
-        ];
-
-        const router1 = createBrowserRouter(rObjs, { basename: '/' });
-
-        setRouter(router1);
-        setBrandColors(res.ui.colors);
-      })
-      .finally(() => {
-        setInitialOperationsFinished(true);
-      });
-  }, [])
-
-  return (
-      <MantineProvider theme={{
-        defaultRadius: 0,
-        components: {
-          ActionIcon: {
-            defaultProps: {
-              variant: 'transparent'
-            }
-          },
-          Text: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            },
-          },
-          Button: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            },
-          },
-          NumberInput: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            },
-          },
-          DateInput: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            },
-          },
-          Select: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            },
-          },
-          Switch: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            },
-          },
-          DatePickerInput: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt',
-              popoverProps: {withinPortal: true}
-            },
-          },
-          TextInput: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            }
-          },
-          Textarea: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            }
-          },
-          MultiSelect: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            }
-          },
-          Pill: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            }
-          },
-          PillsInput: {
-            defaultProps: {
-              size: 'xs',
-              fontSize: '10.5pt'
-            }
-          },
-          Modal: {
-            defaultProps: {
-              shadow: '0 0 200px rgba(16,16,16,.4)',
-              styles: {
-                close: {color: 'black'},
-                header: {
-                  background: '#fff',
-                  padding: 8,
-                  marginBottom: 16,
-                  color: 'black',
-                  boxShadow: 'rgba(33, 33, 33, 0.1) 2px 1px 1px'
-                }
-              },
-              overlayProps: {
-                color: 'rgba(153,153,153)',
-                opacity: 0.44,
-                blur: 0,
-              }
-            }
-          },
-          Pagination: {
-            styles: {
-              root: {
-                borderRadius: 0,
-              }
-            }
-          },
-          Loader: {
-            defaultProps: {
-              type: 'bars'
-            }
-          }
-        },
-        colors: {
-          darkGreen: ['#dcf6ff','#b3e8fc','#86ddf8','#5ad5f4','#37d1f2','#26bfd8','#1799a8','#077179','#004049','#00151a'],
-          darkBlue: [
-            '#e9f4ff',
-            '#c2d8ef',
-            '#9bbae1',
-            '#749ad6',
-            '#4d7aca',
-            '#355db2',
-            '#29458a',
-            '#1d2e63',
-            '#101b3d',
-            '#030a18',
-          ],
-          //brand: ['#000','#111','#222','#333','#444','#555','#666','#777'],
-          // DIA brand: ['#dcf6ff','#b3e8fc','#86ddf8','#5ad5f4','#37d1f2','#26bfd8','#1799a8','#077179','#004049','#00151a'],
-          brand: brandColors,
-        },
-        fontFamily: 'Roboto', primaryColor: 'brand'
-      }}>
-        <React.Fragment>
-          {initialOperationsFinished && (((router && brandColors))) ?
-            <React.Fragment>
-              <DatesProvider settings={{ locale: 'it', firstDayOfWeek: 1, weekendDays: [0,6] }}>
-                <Provider store={store}>
-                  <Notifications />
-                  <AppInner router={router} />
-                </Provider>
-              </DatesProvider>
-            </React.Fragment> : <WaitData />
-          }
-        </React.Fragment>
-      </MantineProvider>
-  );
-}
-
-export default FluxoShell;
-
-export interface AppInnerProps {
-  router: any;
-}
-export function AppInner(props: AppInnerProps) {
-
-  return (
-    <React.Suspense fallback={<>...</>}>
-      <RouterProvider router={props.router} />
-    </React.Suspense>
-  )
-}

package/src/lib/components/error-page/404.tsx

@@ -1,16 +0,0 @@
-import { useRouteError } from "react-router-dom";
-
-export default function ErrorPage() {
-    //const error: any = useRouteError();
-    //console.error(error);
-
-    return (
-        <div id="error-page">
-            <h1>Oops!</h1>
-            <p>Sorry, an unexpected error has occurred.</p>
-          {/*<p>
-                <i>{error.statusText || error.message}</i>
-            </p>*/}
-        </div>
-    );
-}

package/src/lib/components/routes/main-routes.tsx

@@ -1,26 +0,0 @@
-import { FlxRoutes } from "@fluxo-dev/ui-components";
-import { Route } from "react-router-dom";
-import ChangePassword from "../../pages/login/change-password";
-import { Settings } from "../../pages/settings/settings";
-import React, {lazy, Suspense} from "react";
-import {EmbeddedModule, UserService} from "@fluxo-dev/api-client-base";
-
-export interface MainRoutesProps {
-  pluginEndpoint: string;
-  modules: EmbeddedModule[];
-}
-export function MainRoutes(props: MainRoutesProps) {
-
-  const KIde = lazy(() => import('@fluxo-fe/shell/korebi').then(({KorebiIde}) => ({default: KorebiIde})));
-  const user = new UserService();
-
-
-
-  return (
-    <FlxRoutes>
-      <Route path={'settings'} element={<Settings pluginEndpoint={props.pluginEndpoint} modules={props.modules} />} />
-      <Route path={'change-password'} element={<ChangePassword />} />
-      <Route path={'korebi-ide'} element={<Suspense><KIde /></Suspense>} />
-    </FlxRoutes>
-  )
-}

package/src/lib/layouts/blank/blank-layout.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import {Outlet} from "react-router-dom";
-
-function BlankLayout() {
-    return (
-        <Outlet />
-    )
-}
-
-export default BlankLayout;

package/src/lib/layouts/main/app-bar.tsx

@@ -1,192 +0,0 @@
-import React, {useEffect} from 'react';
-import {useSelector} from "react-redux";
-import {Link, useLocation, useNavigate} from "react-router-dom";
-import SearchBar from "./search-bar";
-import {FluxoClientSys, FluxoStateDispatcher} from "@fluxo-dev/api-client-base";
-import {
-  Group,
-  Avatar,
-  Stack,
-  Burger,
-  ActionIcon, Drawer, NavLink, Badge, AppShell
-} from "@mantine/core";
-import {
-  IconApps,
-  IconChevronRight,
-  IconLink,
-  IconRefresh
-} from '@tabler/icons-react';
-import { useMantineTheme } from '@mantine/core';
-import {IFluxoRootState} from "@fluxo-dev/state";
-import {AppJit} from "../../models/app-jit";
-import {AppJitManager} from "../../services/app-jit-manager";
-import {showNotification} from "@mantine/notifications";
-import {DataCard} from "@fluxo-dev/ui-components";
-import {useHotkeys} from "@mantine/hooks";
-
-export interface AppBarProps {
-  previewMode?: {
-    logo?: string,
-    logoHeight: number,
-    headerColor: string,
-  }
-}
-function AppBar(props: AppBarProps) {
-
-  const {userInfo} = useSelector((state: any) => state.user)
-  const {navbarOpened, configuration} = useSelector((state: IFluxoRootState) => state.layout);
-
-  const [jitApps, setJitApps] = React.useState<AppJit[]>([]);
-  const [jitAppsLoaded, setJitAppsLoaded] = React.useState<boolean>(false);
-  const [jitAppsDrawerOpened, setJitAppsDrawerOpened] = React.useState<boolean>(false);
-
-  const fluxoTheme = useMantineTheme();
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const [developmentMode, setDevelopmentMode] = React.useState<boolean | undefined>(undefined);
-  const [lastLocation, setLastLocation] = React.useState<string | undefined>(undefined);
-
-  useHotkeys([
-    ['mod + o', () => {
-      if(navbarOpened)
-            FluxoStateDispatcher.dispatchCloseNavbar()
-        else
-            FluxoStateDispatcher.dispatchOpenNavbar()
-    }]
-  ]);
-
-  useEffect(() => {
-
-    if(!jitAppsLoaded)
-      return;
-
-    const splittedLocation = location.pathname.split('/');
-
-    if(splittedLocation.length < 2) {
-      setDevelopmentMode(false);
-      return;
-    }
-
-    const found = jitApps.filter(a => a.developmentRoute === splittedLocation[1]);
-    if(found.length > 0) {
-      setDevelopmentMode(true);
-    } else {
-      setDevelopmentMode(false);
-    }
-
-    if(lastLocation) {
-      const splittedLastLocation = lastLocation.split('/');
-      const foundInLastLocation = jitApps.filter(a => a.developmentRoute === splittedLastLocation[1]);
-      if((foundInLastLocation.length > 0 && found.length === 0) || (foundInLastLocation.length === 0 && found.length > 0)) {
-        navigate(0);
-      }
-    }
-
-    setLastLocation(location.pathname);
-
-  }, [location, jitApps])
-
-
-  const appJitManager = new AppJitManager();
-
-  useEffect(() => {
-    setJitApps(appJitManager.loadAppConfigurations());
-    setJitAppsLoaded(true);
-  }, [])
-
-  const logout = () => {
-    FluxoClientSys.Instance.auth.logout();
-  }
-
-  const refreshJitApps = (app: AppJit) => {
-    appJitManager.refreshApp(app)
-      .then((result: boolean) => {
-        if(result) {
-          setJitApps(appJitManager.loadAppConfigurations());
-          showNotification({
-            title: 'Applicazione aggiornata',
-            message: `L'applicazione ${app.name} è stata aggiornata correttamente`,
-            color: 'green',
-            icon: <IconRefresh />,
-          })
-        } else {
-          showNotification({
-            title: 'Errore',
-            message: `L'applicazione ${app.name} non è stata aggiornata. Verifica che la JIT App sia attiva e raggiungibile e che il file di configurazione sia corretto.`,
-            color: 'red',
-            icon: <IconRefresh />,
-          })
-        }
-      })
-  }
-
-  return (
-    <AppShell.Header
-      id={'fluxo-app-bar'}
-      style={{
-        borderBlockEnd: 'none',
-        position: props.previewMode ? 'relative' : 'fixed',
-        zIndex: props.previewMode ? 1 : 200,
-      }}
-    >
-      <Stack gap={0}>
-        <Group px={16} justify={'space-between'} wrap="nowrap" style={{height: '48px', backgroundColor: props.previewMode?.headerColor ?? fluxoTheme.colors['brand'][7],}}>
-          <Group>
-            <Burger
-              disabled={props.previewMode !== undefined}
-              color={'#fff'}
-              opened={navbarOpened}
-              title={'Menu'}
-              onClick={() => {
-                if(navbarOpened)
-                  FluxoStateDispatcher.dispatchCloseNavbar()
-                else
-                  FluxoStateDispatcher.dispatchOpenNavbar()
-              }}
-            />
-            <Link to={props.previewMode ? '' : '/'} style={{maxHeight: props.previewMode?.logoHeight ?? configuration.logoHeight}} >
-              <img src={props.previewMode?.logo ? props.previewMode.logo : configuration.logo} style={{maxHeight: props.previewMode?.logoHeight ?? configuration.logoHeight}} />
-            </Link>
-          </Group>
-          <Group wrap="nowrap">
-            {developmentMode &&
-              <Badge color={'red'}>Development mode</Badge>
-            }
-            {jitApps && jitApps.length > 0 &&
-              <>
-                <ActionIcon variant={'transparent'} onClick={() => setJitAppsDrawerOpened(true)}><IconApps color={'white'} size={32}/></ActionIcon>
-
-                <Drawer title={'Navigazione (App JIT)'} position={'right'} opened={jitAppsDrawerOpened} onClose={() => setJitAppsDrawerOpened(false)}>
-                  <div>
-                    {jitApps.map((app, index) => {
-                      return (
-                        <DataCard padded={false} key={index} title={app.name} actions={[{icon: <IconRefresh size={18} />, onClick: () => refreshJitApps(app),}]}>
-                          {app.menu.map((group, index) => {
-                            return (
-                              <React.Fragment key={`${group.name}_${index}`}>
-                                <NavLink leftSection={<Badge size="xs" variant="filled" color={fluxoTheme.colors['brand'][7]} w={16} h={16} p={0}>{group.items ? group.items?.length : 0}</Badge>} rightSection={<IconChevronRight size={16} />} label={group.name}>
-                                  {group.items?.map((feature, index) => {
-                                    return (
-                                      <NavLink key={`${feature.name}_${index}`} onClick={() => navigate(`${app.developmentRoute}/${feature.route}`)} label={feature.name} leftSection={<IconLink size={16} />} />
-                                    )})}
-                                </NavLink>
-                              </React.Fragment>
-                            )})}
-                        </DataCard>
-                      )
-                    })}
-                  </div>
-                </Drawer>
-              </>
-            }
-            <SearchBar disabled={props.previewMode !== undefined}/>
-            <Avatar onClick={() => props.previewMode ? undefined : logout()} color="cyan" radius="xl" size={32}>{userInfo.FirstName.substr(0, 1)}{userInfo.LastName.substr(0, 1)}</Avatar>
-          </Group>
-        </Group>
-      </Stack>
-    </AppShell.Header>
-  )
-}
-
-export default AppBar;

package/src/lib/layouts/main/app-layout.tsx

@@ -1,52 +0,0 @@
-import React, {Suspense} from 'react';
-import AppBar from "./app-bar";
-import AppContent from "./content";
-import FooterBar from "./footer-bar";
-import {AppShell, Loader, ScrollArea} from '@mantine/core';
-import {Navbar} from "./navbar";
-import {useSelector} from "react-redux";
-import {IFluxoRootState} from "@fluxo-dev/state";
-import ShellSpotlight from './shell-spotlight';
-
-export interface AppLayoutProps {
-    appVersion: string;
-}
-
-function AppLayout(props: AppLayoutProps) {
-
-    const {navbarOpened} = useSelector((state: IFluxoRootState) => state.layout);
-
-    return (
-        <>
-            <AppShell
-                padding={0}
-                styles={{main: {backgroundColor: (1 == 1) ? '#edeff3' : '#f9f9f9'}}}
-                navbar={{width: 248, breakpoint: 'sm', collapsed: {mobile: !navbarOpened, desktop: !navbarOpened}}}
-                header={{height: 48}}
-                footer={{height: 40}}
-                transitionDuration={0}
-                layout={'default'}
-            >
-                <AppBar/>
-
-              <Navbar/>
-
-
-              <AppShell.Main>
-                    <Suspense fallback={<Loader/>}>
-                        <AppContent/>
-                    </Suspense>
-                </AppShell.Main>
-
-                <AppShell.Footer>
-                    <FooterBar appVersion={props.appVersion} />
-                </AppShell.Footer>
-
-            </AppShell>
-
-            <ShellSpotlight/>
-        </>
-    )
-}
-
-export default AppLayout;

package/src/lib/layouts/main/content.tsx

@@ -1,10 +0,0 @@
-import React from 'react'
-import {Outlet} from "react-router-dom";
-
-function AppContent() {
-    return (
-      <Outlet />
-    )
-}
-
-export default AppContent;