@fluxo-dev/shell 0.0.8 → 0.0.9

package/src/lib/pages/login/login-page.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux'
-import { FluxoClientSys } from "@fluxo-dev/api-client-base";
-import { useForm } from '@mantine/form';
-import { TextInput, Button, PasswordInput, Grid, Stack } from "@mantine/core";
-import { useNavigate } from 'react-router-dom';
-
-function LoginPage() {
-
-  const { loading, error } = useSelector((state: any) => state.user)
-  const navigateTo = useNavigate();
-
-  const form = useForm({
-    initialValues: {
-      username: '',
-      password: '',
-    },
-
-    validate: {
-      username: (value) => (value?.length < 1 ? 'Username obbligatorio' : null),
-      password: (value) => (value?.length < 1 ? 'Password obbligatoria' : null),
-    },
-  });
-
-  const loginHandler = (values: any) => {
-    FluxoClientSys.Instance.auth.login(values.username, values.password);
-  }
-
-  return (
-    <Grid justify="center">
-      <Grid.Col span={3}>
-        <h1>Login Page</h1>
-        <form onSubmit={form.onSubmit(
-          (values, event) => {
-            loginHandler(values);
-          }
-        )}>
-          <TextInput
-            withAsterisk
-            label="Nome utente"
-            placeholder="utente@azienda.com"
-            {...form.getInputProps('username')}
-          />
-          <PasswordInput
-            withAsterisk
-            label="Password"
-            placeholder="Inserisci la password..."
-            {...form.getInputProps('password')}
-          />
-
-          <Stack gap={5} mt="md">
-            <Stack align="flex-end">
-              <Button size="compact-XXX" variant="subtle" onClick={() => navigateTo('/auth/forgot-password')}>
-                Password Dimenticata?
-              </Button>
-            </Stack>
-            <Button loading={loading} type="submit">Accedi</Button>
-          </Stack>
-
-        </form>
-        {error &&
-          <p>Errore</p>
-        }
-
-      </Grid.Col>
-    </Grid>
-  )
-}
-
-export default LoginPage;

package/src/lib/pages/login/reset-password.tsx

@@ -1,91 +0,0 @@
-import { Button, Grid, Stack, Text, TextInput } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
-import {UserService} from "@fluxo-dev/api-client-base";
-
-export function ResetPassword() {
-
-    const [email, setEmail] = useState<string>();
-    const [token, setToken] = useState<string>();
-    const [linkIsValid, setLinkIsValid] = useState<boolean>(true);
-
-    const [newPassword, setNewPassword] = useState<string>();
-    const [confirmNewPassword, setConfirmNewPassword] = useState<string>();
-
-    const [recoveryResult, setRecoveryResult] = useState<{ success: boolean, errors: { code: string, description: string }[] } | undefined>();
-
-    const userService = new UserService();
-    let [searchParams] = useSearchParams();
-
-    useEffect(() => {
-        if (searchParams) {
-            const currentEmail = searchParams.get('email');
-            const currentToken = searchParams.get('token');
-
-            if (!currentEmail || !currentToken) {
-                setLinkIsValid(false)
-            } else {
-                setEmail(currentEmail)
-                setToken(currentToken)
-            }
-        } else {
-            setLinkIsValid(false)
-        }
-    }, [searchParams])
-
-    const onFormSubmitClickHandler = () => {
-        if (email && token && newPassword) {
-            userService.forgotPasswordConfirm({ email: email, token: token, password: newPassword })
-                .then((res) => {
-                    setRecoveryResult(res);
-                })
-                .catch(_err => setRecoveryResult({ success: false, errors: [{ code: 'unkown', description: 'Errore sconosciuto' }] }));
-        }
-    }
-
-    return (
-        <Grid justify="center">
-            <Grid.Col span={3}>
-                {linkIsValid &&
-                    <Stack gap={16}>
-                        {(!recoveryResult || !recoveryResult.success) &&
-                            <Stack gap={16}>
-                                <h2>Reset password</h2>
-                                <Text>{email}</Text>
-                                <TextInput type={'password'} label={'Nuova password'} onChange={(e) => setNewPassword(e.target.value)} />
-                                <TextInput type={'password'} label={'Conferma nuova password'} onChange={(e) => setConfirmNewPassword(e.target.value)} />
-
-                                {recoveryResult?.errors.map((err) => {
-                                    return <Text>{err.description}</Text>
-                                })}
-
-                                <Button onClick={onFormSubmitClickHandler} disabled={!(newPassword && (newPassword === confirmNewPassword))}>Effettua il reset</Button>
-                                <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Non vuoi effettuare il reset? Effettua il login</Link>
-                            </Stack>
-                        }
-
-                        {recoveryResult?.success &&
-                            <div style={{ marginTop: 32 }}>
-                                <Stack gap={16}>
-                                    <Text style={{ textAlign: 'center', width: '100%', display: 'block' }}>{'Reset effettuato con successo'}</Text>
-                                    <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
-                                </Stack>
-                            </div>
-                        }
-
-                    </Stack>
-                }
-
-                {!linkIsValid &&
-                    <Stack gap={16}>
-                        <Text>Link non valido</Text>
-                        <Link to={'/auth/login'} style={{ textAlign: 'center' }}>Effettua il login</Link>
-                    </Stack>
-                }
-
-            </Grid.Col>
-        </Grid>
-    )
-}
-
-export default ResetPassword;

package/src/lib/pages/settings/apps/add-jit-app.tsx

@@ -1,79 +0,0 @@
-import {Button, Group, Stack, TextInput} from "@mantine/core";
-import React from "react";
-import {AppJitManager} from "../../../services/app-jit-manager";
-import {FluxoFrontendAppConfiguration} from "@fluxo-dev/api-client-base";
-
-export interface AddJitAppProps {
-  onCanceled: () => void;
-  onAdded: () => void;
-}
-export function AddJitApp(props: AddJitAppProps) {
-
-  const [url, setUrl] = React.useState<string>('');
-  const [rootRoute, setRootRoute] = React.useState<string>('');
-
-  const [fluxoAppConfiguration, setFluxoAppConfiguration] = React.useState<FluxoFrontendAppConfiguration | undefined>(undefined);
-
-  const [verifyStatus, setVerifyStatus] = React.useState<'idle' | 'verified' | 'error'>('idle');
-
-  const verifyUrl = () => {
-
-    setVerifyStatus('idle');
-
-    fetch(`${url}/fluxo-fe-app-configuration.json`)
-      .then((response) => {
-        response.json()
-          .then((json) => {
-            setFluxoAppConfiguration(json);
-            setVerifyStatus('verified');
-          });
-      })
-      .catch((error) => {
-        setVerifyStatus('error');
-      });
-  }
-
-  const addApp = () => {
-    const manager = new AppJitManager();
-
-    if(!fluxoAppConfiguration) {
-      return;
-    }
-
-    manager.addAppConfiguration(fluxoAppConfiguration, url, rootRoute);
-    props.onAdded();
-  }
-
-  return (
-    <Stack>
-      <form>
-        <Stack>
-          <TextInput
-            label={'Root route'}
-            placeholder={'root-route'}
-            value={rootRoute}
-            onChange={(e) => setRootRoute(e.currentTarget.value)}
-          />
-          <TextInput
-            label={'Url'}
-            placeholder={'http://localhost:1234'}
-            value={url}
-            onChange={(e) => setUrl(e.currentTarget.value)}
-          />
-          {fluxoAppConfiguration &&
-            <>
-              <p>{fluxoAppConfiguration.name}</p>
-            </>
-          }
-        </Stack>
-      </form>
-      <Group align={'end'} justify={'right'}>
-        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
-        {verifyStatus === 'idle' || verifyStatus === 'error' ?
-          <Button disabled={!rootRoute || !url} onClick={verifyUrl} type={'submit'}>Verifica</Button> :
-          <Button onClick={addApp} type={'submit'}>Aggiungi</Button>
-        }
-      </Group>
-    </Stack>
-  )
-}

package/src/lib/pages/settings/apps/app-item.tsx

@@ -1,157 +0,0 @@
-import {AppState, AppType, FluxoApp, FluxoClientSys} from "@fluxo-dev/api-client-base";
-import {ActionIcon, Badge, Button, Group, Image, Menu, Modal, Stack, Text} from "@mantine/core";
-import React from "react";
-import {IconArrowUp, IconCircleOff, IconDotsVertical, IconTrash} from '@tabler/icons-react';
-import moment from "moment";
-import {ConfirmModal} from "@fluxo-dev/ui-components";
-import {showNotification} from "@mantine/notifications";
-import {InstallOrUpgradeApp} from "./install-or-upgrade-app";
-
-export interface AppItemProps {
-  app: FluxoApp;
-  onUninstall?: (app: FluxoApp) => void;
-  onDeactivate?: (app: FluxoApp) => void;
-  onActivate?: (app: FluxoApp) => void;
-  onUpgrade?: (app: FluxoApp) => void;
-  pluginEndpoint: string;
-}
-export function AppItem(props: AppItemProps) {
-
-  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
-  const [showDeactivateModal, setShowDeactivateModale] = React.useState(false);
-  const [showActivateModal, setShowActivateModal] = React.useState(false);
-  const [showUpgradeAppModal, setShowUpgradeAppModal] = React.useState(false);
-
-  const disable = () => {
-    FluxoClientSys.Instance.apps.deactivateApp(props.app.id).then(() => {
-      showNotification({
-        title: 'Operazione completata',
-        message: `L'applicazione (${props.app.name} - ${props.app.version}) è stata disattivata con successo`,
-        color: 'green',
-      })
-      props.onDeactivate?.(props.app);
-    }).catch((err) => {
-      showNotification({
-        title: 'Operazione fallita',
-        message: `L'applicazione (${props.app.name} - ${props.app.version}) non è stata disattivata: ${err.message}`,
-        color: 'red',
-      })
-    })
-  }
-
-  const enable = () => {
-    FluxoClientSys.Instance.apps.activateApp(props.app.id).then(() => {
-      showNotification({
-        title: 'Operazione completata',
-        message: `L'applicazione (${props.app.name} - ${props.app.version}) è stata attivata con successo`,
-        color: 'green',
-      })
-      props.onActivate?.(props.app);
-    }).catch((err) => {
-      showNotification({
-        title: 'Operazione fallita',
-        message: `L'applicazione (${props.app.name} - ${props.app.version}) non è stata attivata: ${err.message}`,
-        color: 'red',
-      })
-    })
-  }
-
-  const uninstall = () => {
-    FluxoClientSys.Instance.apps.uninstallApp(props.app.id).then(() => {
-      showNotification({
-        title: 'Operazione completata',
-        message: `L'applicazione (${props.app.name} - ${props.app.version}) è stata disinstallata con successo`,
-        color: 'green',
-      })
-      props.onUninstall?.(props.app);
-    }).catch((err) => {
-      showNotification({
-        title: 'Operazione fallita',
-        message: `L'applicazione (${props.app.name} - ${props.app.version}) non è stata disinstallata: ${err.message}`,
-        color: 'red',
-      })
-    })
-  }
-
-  return (
-    <Group justify='space-between' style={{ border: '1px solid #dedede', padding: 15 }}>
-      <Group>
-        <Image src={`${props.pluginEndpoint}/${props.app.scope}/${props.app.name}/favicon.ico`} width={48} height={48} />
-        <Stack gap={0}>
-          <span>{props.app.description} <small>({props.app.version})</small></span>
-          <small>{props.app.name} - <b>{props.app.author}</b></small>
-        </Stack>
-      </Group>
-      <Group>
-
-        {props.app.state === AppState.Active ? <Badge color="green">Attivo</Badge> : <Badge color="red">Disattivo</Badge>}
-        <Badge color={props.app.type === AppType.Frontend ? 'orange' : 'violet'}>{props.app.type === AppType.Frontend ? 'Frontend' : 'Backend'}</Badge>
-        <Badge color={'gray'}>{moment(props.app.installationDate).format("DD/MM/yyyy")}</Badge>
-
-        <Menu shadow="md" width={200}>
-          <Menu.Target>
-            <ActionIcon><IconDotsVertical size={18} /></ActionIcon>
-          </Menu.Target>
-
-          <Menu.Dropdown>
-            <Menu.Item leftSection={<IconCircleOff size={14} />} onClick={props.app.state == AppState.Active ? disable : enable}>
-              {props.app.state == AppState.Active ? 'Disattiva' : 'Attiva'}
-            </Menu.Item>
-            <Menu.Item onClick={() => setShowUpgradeAppModal(true)} leftSection={<IconArrowUp color={'green'} size={14} />}>Aggiorna</Menu.Item>
-            <Menu.Divider />
-            <Menu.Item color={'red'} onClick={() => setShowDeleteModal(true)} leftSection={<IconTrash color={'red'} size={14} />}>Disinstalla</Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-      </Group>
-
-      <ConfirmModal
-        title={'Disinstalla app'}
-        open={showDeleteModal}
-        onButtonCancelClick={() => setShowDeleteModal(false)}
-        onButtonConfirmClick={() => {
-          setShowDeleteModal(false);
-          uninstall();
-        }}
-        messageText={'Sei sicuro di voler disinstallare l\'applicazione?'}
-      />
-
-      <ConfirmModal
-        title={'Attiva app'}
-        open={showActivateModal}
-        onButtonCancelClick={() => setShowActivateModal(false)}
-        onButtonConfirmClick={() => {
-          setShowActivateModal(false);
-          enable();
-        }}
-        messageText={'Sei sicuro di voler attivare l\'applicazione?'}
-      />
-
-      <ConfirmModal
-        title={'Attiva app'}
-        open={showDeactivateModal}
-        onButtonCancelClick={() => setShowDeactivateModale(false)}
-        onButtonConfirmClick={() => {
-          setShowDeactivateModale(false);
-          disable();
-        }}
-        messageText={'Sei sicuro di voler attivare l\'applicazione?'}
-      />
-
-      {
-        <Modal centered title={'Aggiornamento app'} opened={showUpgradeAppModal} onClose={() => setShowUpgradeAppModal(false)}>
-          <Stack>
-            <Text>Procedura di aggiornamento dell'app {props.app.name}</Text>
-            <InstallOrUpgradeApp mode={'upgrade'} appIdToUpgrade={props.app.id} onInstall={() => {
-              setShowUpgradeAppModal(false);
-              props.onUpgrade?.(props.app);
-            }} />
-            <Group justify={'right'}>
-              <Button onClick={() => setShowUpgradeAppModal(false)}>Annulla</Button>
-            </Group>
-          </Stack>
-        </Modal>
-      }
-
-    </Group>
-  )
-}

package/src/lib/pages/settings/apps/app-jit-item.tsx

@@ -1,105 +0,0 @@
-import {AppState, AppType} from "@fluxo-dev/api-client-base";
-import {ActionIcon, Badge, Group, Image, Menu, Stack} from "@mantine/core";
-import React from "react";
-import {IconBug, IconCircleOff, IconDotsVertical, IconTrash} from '@tabler/icons-react';
-import moment from "moment";
-import {ConfirmModal} from "@fluxo-dev/ui-components";
-import {AppJitManager} from "../../../services/app-jit-manager";
-import {AppJit} from "../../../models/app-jit";
-
-export interface AppItemProps {
-  app: AppJit;
-  onDeactivate?: (app: AppJit) => void;
-  onActivate?: (app: AppJit) => void;
-
-  onRemove?: (app: AppJit) => void;
-}
-export function AppJitItem(props: AppItemProps) {
-
-  const [showDeleteModal, setShowDeleteModal] = React.useState(false);
-  const [showDeactivateModal, setShowDeactivateModale] = React.useState(false);
-  const [showActivateModal, setShowActivateModal] = React.useState(false);
-
-  const appJitManager = new AppJitManager();
-
-  const disable = () => {
-    appJitManager.setAppEnabled(props.app.scope, props.app.name, false);
-    props.onDeactivate?.(props.app);
-  }
-
-  const enable = () => {
-    appJitManager.setAppEnabled(props.app.scope, props.app.name, true);
-    props.onActivate?.(props.app);
-  }
-
-  const uninstall = () => {
-    appJitManager.removeAppConfiguration(props.app.scope, props.app.name);
-    props.onRemove?.(props.app);
-  }
-
-  return (
-    <Group justify='space-between' style={{ border: '1px solid #dedede', padding: 15 }}>
-      <Group>
-        <IconBug size={48} color={'gray'} />
-        <Stack gap={0}>
-          <span>{props.app.description} <small>({props.app.version})</small></span>
-          <small>{props.app.name} - <b>{props.app.author}</b></small>
-        </Stack>
-      </Group>
-      <Group>
-        {props.app.state == AppState.Active ? <Badge color="green">Attivo</Badge> : <Badge color="red">Disattivo</Badge>}
-        <Badge color={'gray'}>Route: {props.app.developmentRoute}</Badge>
-        <Badge color={props.app.type === AppType.Frontend ? 'orange' : 'violet'}>{props.app.type === AppType.Frontend ? 'Frontend' : 'Backend'}</Badge>
-        <Badge color={'gray'}>{moment(props.app.installationDate).format("DD/MM/yyyy")}</Badge>
-        <Menu shadow="md" width={200}>
-          <Menu.Target>
-            <ActionIcon><IconDotsVertical size={18} /></ActionIcon>
-          </Menu.Target>
-
-          <Menu.Dropdown>
-            {/*<Menu.Label>Application</Menu.Label>*/}
-            <Menu.Item leftSection={<IconCircleOff size={14} />} onClick={props.app.state == AppState.Active ? disable : enable}>
-              {props.app.state == AppState.Active ? 'Disattiva' : 'Attiva'}
-            </Menu.Item>
-            <Menu.Divider />
-            <Menu.Item color={'red'} onClick={() => setShowDeleteModal(true)} leftSection={<IconTrash color={'red'} size={14} />}>Disinstalla</Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-      </Group>
-
-      <ConfirmModal
-        title={'Elimina JIT App'}
-        open={showDeleteModal}
-        onButtonCancelClick={() => setShowDeleteModal(false)}
-        onButtonConfirmClick={() => {
-          setShowDeleteModal(false);
-          uninstall();
-        }}
-        messageText={'Sei sicuro di voler disinstallare l\'applicazione?'}
-      />
-
-      <ConfirmModal
-        title={'Attiva App'}
-        open={showActivateModal}
-        onButtonCancelClick={() => setShowActivateModal(false)}
-        onButtonConfirmClick={() => {
-          setShowActivateModal(false);
-          enable();
-        }}
-        messageText={'Sei sicuro di voler attivare l\'applicazione?'}
-      />
-
-      <ConfirmModal
-        title={'Disablita App'}
-        open={showDeactivateModal}
-        onButtonCancelClick={() => setShowDeactivateModale(false)}
-        onButtonConfirmClick={() => {
-          setShowDeactivateModale(false);
-          disable();
-        }}
-        messageText={'Sei sicuro di voler attivare l\'applicazione?'}
-      />
-
-    </Group>
-  )
-}

package/src/lib/pages/settings/apps/apps-list.tsx

@@ -1,171 +0,0 @@
-import {IconPlus} from '@tabler/icons-react';
-import {Loader, Modal, Stack} from "@mantine/core";
-import {DataCard, NoData} from "@fluxo-dev/ui-components";
-import React, {useEffect, useState} from "react";
-import {EmbeddedModule, FluxoApp, FluxoClientSys} from "@fluxo-dev/api-client-base";
-import {AppItem} from "./app-item";
-import {InstallOrUpgradeApp} from "./install-or-upgrade-app";
-import {AddJitApp} from "./add-jit-app";
-import {AppJitManager} from "../../../services/app-jit-manager";
-import {AppJit} from "../../../models/app-jit";
-import {AppJitItem} from "./app-jit-item";
-import {EmbeddedModuleItem} from "./embedded-module-item";
-import {reportsModule} from "@fluxo-fe/shell/reporting";
-import {workflowModule} from "@fluxo-fe/shell/workflow";
-import {ShellHub} from "@fluxo-fe/shell/hub";
-
-export interface AppsListProps {
-  pluginEndpoint: string;
-  modules: EmbeddedModule[],
-}
-
-export function AppsList(props: AppsListProps) {
-
-  const [apps, setApps] = useState<FluxoApp[]>([]);
-  const [showInstallComponent, setShowInstallComponent] = useState(false);
-  const [showHubModal, setShowHubModal] = useState(false);
-  const [showAddJitApp, setShowAddJitApp] = useState(false);
-  const [jitApps, setJitApps] = useState<AppJit[]>([]);
-
-  const [loading, setLoading] = useState(true);
-
-  const [embeddedModules] = useState([...props.modules, reportsModule, workflowModule]);
-
-  useEffect(() => {
-    refreshApps();
-    refreshJitApps();
-  }, [])
-
-  const checkIfEmbeddedModuleIsUpgradable = (scope: string, name: string, currentVersion: string): {state: 'uptodate' | 'upgradable' | 'installable', version: string} => {
-    const appFound = apps.find(m => m.scope === scope && m.name === name);
-
-    if (!appFound) {
-      return {state: 'installable', version: currentVersion};
-    }
-
-    if(appFound && appFound.version === currentVersion) {
-      return {state: 'uptodate', version: currentVersion};
-    }
-
-    return {state: 'upgradable', version: currentVersion};
-  }
-
-  const refreshApps = () => {
-    setLoading(true);
-    FluxoClientSys.Instance.apps.getApps(false).then((apps) => {
-      setApps(apps);
-      setLoading(false);
-    });
-  }
-
-  const refreshJitApps = () => {
-    const manager = new AppJitManager();
-    setJitApps(manager.loadAppConfigurations());
-  }
-
-  return (
-    <Stack>
-      <DataCard
-        title={'Apps installate'}
-        actions={[
-          { icon: <IconPlus size={18} />, label: 'Installa app', onClick: () => setShowInstallComponent(true) },
-          { icon: <IconPlus size={18} />, label: 'Aggiungi app', onClick: () => setShowHubModal(true) },
-        ]}>
-        {showInstallComponent &&
-          <InstallOrUpgradeApp
-            mode={'install'}
-            onInstall={() => {
-              refreshApps();
-              setShowInstallComponent(false);
-            }} />
-        }
-        <Stack gap={16}>
-          {(!loading && (!apps || apps.filter(a => !a.isEmbedded).length === 0)) &&
-            <NoData message={'Nessuna applicazione installata'} />
-          }
-
-          {loading &&
-            <Loader />
-          }
-
-          {!loading && apps.filter(a => !a.isEmbedded).map((app) => (
-            <AppItem
-              key={app.id}
-              app={app}
-              onActivate={refreshApps}
-              onDeactivate={refreshApps}
-              onUninstall={refreshApps}
-              onUpgrade={refreshApps}
-              pluginEndpoint={props.pluginEndpoint}
-            />
-          ))}
-        </Stack>
-      </DataCard>
-
-      <DataCard
-        title={'Apps di sistema'}>
-        <Stack gap={16}>
-          {embeddedModules.length === 0 &&
-            <NoData message={'Nessun modulo di sistema trovato'} />
-          }
-          {!loading ?
-            <>
-              {embeddedModules.map((app, i) => (
-                <EmbeddedModuleItem
-                  key={i}
-                  app={app}
-                  onUpgrade={refreshApps}
-                  upgradable={checkIfEmbeddedModuleIsUpgradable(app.scope, app.name, app.version)}
-                />
-              ))}
-            </> :
-            <Loader />
-          }
-
-        </Stack>
-      </DataCard>
-
-      <DataCard
-        title={'Apps JIT (Sviluppo)'}
-        actions={[
-          { icon: <IconPlus size={18} />, label: 'Aggiungi applicazione', onClick: () => setShowAddJitApp(true) },
-        ]}>
-        {!jitApps || jitApps.length === 0 &&
-          <NoData message={'Nessuna applicazione JIT'} />
-        }
-        {!loading && jitApps.map((app) => (
-          <AppJitItem key={app.id} onDeactivate={refreshJitApps} onActivate={refreshJitApps} onRemove={refreshJitApps} app={app} />
-        ))}
-      </DataCard>
-
-      <Modal centered title={'Aggiungi App JIT'} opened={showAddJitApp} onClose={() => setShowAddJitApp(false)}>
-        <AddJitApp
-          onAdded={() => {
-            setShowAddJitApp(false);
-            refreshJitApps();
-          }}
-          onCanceled={() => setShowAddJitApp(false)}
-        />
-      </Modal>
-
-      <Modal
-        title={'Fluxo Apps'}
-        opened={showHubModal}
-        styles={{
-          close: {color: 'black'},
-          header: {
-            background: '#f6f7f9',
-            padding: 8,
-            marginBottom: 16,
-            color: 'black',
-            boxShadow: '0px 0px 16px -4px #888'
-          },
-          content: {background: '#f6f7f9'}
-        }}
-        fullScreen
-        onClose={() => setShowHubModal(false)} size={'xl'} padding={'none'}>
-        <ShellHub />
-      </Modal>
-    </Stack>
-  )
-}