@fluxo-dev/shell 0.0.8

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

@@ -0,0 +1,105 @@
+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

@@ -0,0 +1,171 @@
+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>
+  )
+}

package/src/lib/pages/settings/apps/embedded-module-item.tsx

@@ -0,0 +1,66 @@
+import {
+  EmbeddedModule, FluxoClientSys
+} from "@fluxo-dev/api-client-base";
+import {Badge, Button, Group, Stack} from "@mantine/core";
+import React from "react";
+import {IconRefresh} from '@tabler/icons-react';
+import {showNotification} from "@mantine/notifications";
+
+export interface EmbeddedModuleItemProps {
+  app: EmbeddedModule;
+  onUpgrade?: (app: EmbeddedModule) => void;
+  upgradable: {state: 'uptodate' | 'upgradable' | 'installable', version: string};
+}
+export function EmbeddedModuleItem(props: EmbeddedModuleItemProps) {
+
+  const [updateInProgress, setUpdateInProgress] = React.useState(false);
+
+  const installOrUpgrade = () => {
+
+    setUpdateInProgress(true);
+
+    FluxoClientSys.Instance.apps.installEmbeddedModule(props.app.getEmbeddedModule())
+      .then(() => {
+        showNotification({
+          title: 'Operazione completata',
+          message: `Il modulo (${props.app.name} - ${props.app.version}) è stata installata con successo`,
+          color: 'green',
+        })
+        props.onUpgrade?.(props.app);
+        setUpdateInProgress(false);
+      })
+      .catch(() => {
+        showNotification({
+          title: 'Operazione fallita',
+          message: `Il modulo (${props.app.name} - ${props.app.version}) non è stata installata`,
+          color: 'red',
+        })
+        setUpdateInProgress(false);
+      })
+  }
+
+  return (
+    <Group justify='space-between' style={{ border: '1px solid #dedede', padding: 15 }}>
+      <Group>
+        <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.upgradable?.state === 'upgradable' &&
+          <Button loading={updateInProgress} leftSection={<IconRefresh size={18} />} onClick={installOrUpgrade} color="yellow">Aggiorna → {props.upgradable.version}</Button>
+        }
+        {props.upgradable?.state === 'uptodate' &&
+          <>
+            <Badge color="gray">Ultima versione</Badge>
+            <Button onClick={installOrUpgrade}>Aggiorna menu</Button>
+          </>
+        }
+        {props.upgradable?.state === 'installable' &&
+          <Button loading={updateInProgress} leftSection={<IconRefresh size={18} />} onClick={installOrUpgrade} color="green">Installa → {props.upgradable.version}</Button>
+        }
+      </Group>
+    </Group>
+  )
+}

package/src/lib/pages/settings/apps/install-or-upgrade-app.tsx

@@ -0,0 +1,105 @@
+import {Group, Text, useMantineTheme, rem, useMantineColorScheme} from '@mantine/core';
+import React from "react";
+import {IconApps, IconUpload, IconX} from '@tabler/icons-react';
+import {Dropzone, FileWithPath} from "@mantine/dropzone";
+import {FluxoClientSys} from "@fluxo-dev/api-client-base";
+import {showNotification} from "@mantine/notifications";
+
+export interface InstallOrUpgradeAppProps {
+  onInstall?: () => void;
+  mode: 'install' | 'upgrade';
+  appIdToUpgrade?: number;
+}
+
+export function InstallOrUpgradeApp(props: InstallOrUpgradeAppProps) {
+  const theme = useMantineTheme();
+  const colorScheme = useMantineColorScheme();
+
+  const installApp = (files: FileWithPath[]) => {
+
+    const formData = new FormData();
+    formData.append('file', files[0]);
+
+    if(props.mode === 'install') {
+      FluxoClientSys.Instance.apps.installApp(formData).then(() => {
+        showNotification({
+          title: 'Operazione completata',
+          message: `L'applicazione è stata installata con successo`,
+          color: 'green',
+        })
+        props.onInstall?.();
+      }).catch((err) => {
+        showNotification({
+          title: 'Operazione fallita',
+          message: `L'applicazione non è stata installata: ${err.message}`,
+          color: 'red',
+        })
+      })
+    } else {
+
+      if(!props.appIdToUpgrade)
+        return;
+
+      FluxoClientSys.Instance.apps.upgradeApp(props.appIdToUpgrade, formData).then(() => {
+        showNotification({
+          title: 'Operazione completata',
+          message: `L'applicazione è stata aggiornata con successo`,
+          color: 'green',
+        })
+        props.onInstall?.();
+      }).catch((err) => {
+        showNotification({
+          title: 'Operazione fallita',
+          message: `L'applicazione non è stata aggiornata: ${err.message}`,
+          color: 'red',
+        })
+      })
+    }
+  }
+
+  return (
+    <Dropzone
+      onDrop={installApp}
+      onReject={(files) => {
+        showNotification({
+          title: 'Operazione fallita',
+          message: `L'applicazione non è stata installata: ${files[0].file.name} non è un file zip o la dimensione supera i 30mb`,
+          color: 'red',
+        })
+      }}
+      maxSize={1024 * 3 * 10000}
+      multiple={false}
+      accept={['zip']}
+      {...props}
+    >
+      <Group justify="center" gap="xl" style={{ minHeight: rem(220), pointerEvents: 'none' }}>
+        <Dropzone.Accept>
+          <IconUpload
+            size="3.2rem"
+            stroke={1.5}
+            color={theme.colors[theme.primaryColor][colorScheme.colorScheme === 'dark' ? 4 : 6]}
+          />
+        </Dropzone.Accept>
+        <Dropzone.Reject>
+          <IconX
+            size="3.2rem"
+            stroke={1.5}
+            color={theme.colors.red[colorScheme.colorScheme === 'dark' ? 4 : 6]}
+          />
+        </Dropzone.Reject>
+        <Dropzone.Idle>
+          <IconApps size="3.2rem" stroke={1.5} />
+        </Dropzone.Idle>
+
+        <div>
+          <Text size="xl" inline>
+            Trascina il bundle dell'applicazione qui.
+          </Text>
+          <Text size="sm" color="dimmed" inline mt={7}>
+            Il bundle deve essere in formato .zip e non deve superare i 30mb.
+          </Text>
+        </div>
+      </Group>
+    </Dropzone>
+  );
+}

package/src/lib/pages/settings/menu-designer/custom-node.module.css

@@ -0,0 +1,34 @@
+.root {
+  align-items: center;
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  height: 32px;
+  padding-inline-end: 8px;
+  cursor: pointer;
+  /*border-bottom: solid 1px #eee;*/
+}
+
+.root:hover {
+  background: #e9ecef54;
+}
+
+.expandIconWrapper {
+  align-items: center;
+  font-size: 0;
+  cursor: pointer;
+  display: flex;
+  height: 24px;
+  justify-content: center;
+  width: 32px;
+  transition: transform linear 0.1s;
+  transform: rotate(0deg);
+  margin-left: 8px;
+}
+
+.expandIconWrapper.isOpen {
+  transform: rotate(90deg);
+}
+
+.labelGridItem {
+  padding-inline-start: 8px;
+}

package/src/lib/pages/settings/menu-designer/custom-node.tsx

@@ -0,0 +1,160 @@
+import React, {useState} from "react";
+import { NodeModel } from "@minoru/react-dnd-treeview";
+import styles from "./custom-node.module.css";
+import {
+  IconBoxMultiple,
+  IconChevronRight, IconEdit,
+  IconExternalLink, IconEye,
+  IconLock, IconPlus, IconSearch,
+  IconTrash
+} from '@tabler/icons-react';
+import {ActionIcon, Badge, Group, Modal, Text, ThemeIcon, Tooltip} from "@mantine/core";
+import {AppMenuItem} from "@fluxo-dev/api-client-base";
+import {IconFactory} from "../../../utils/icon-factory";
+import {PermissionNavigator} from "../security/components/permission/permission-navigator";
+
+type Props = {
+  nodes: NodeModel<AppMenuItem>[];
+  node: NodeModel<AppMenuItem>;
+  depth: number;
+  isOpen: boolean;
+  onToggle: (id: NodeModel["id"]) => void;
+  onEditButtonClick: (item: AppMenuItem) => void;
+  onDeleteButtonClick: (nodeId: string | number) => void;
+};
+
+export const CustomNode: React.FC<Props> = (props) => {
+  const { droppable, data } = props.node;
+  const indent = props.depth * 24;
+
+  const [mouseHover, setMouseHover] = useState<boolean>(false);
+  const [updatePermissionModalOpen, setUpdatePermissionModalOpen] = useState<boolean>(false);
+  const [hasPermission, setHasPermission] = useState<boolean>(props.node!.data!.hasPermissions ?? false);
+
+  const handleToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    props.onToggle(props.node.id);
+  };
+
+  const isLeaf = (): boolean => {
+    const res = props.nodes.find(a => a.parent === props.node.id);
+
+    return res !== undefined;
+  }
+
+  const updatePermissionButton = () => {
+    return <ActionIcon color={!props.node.data!.id ? 'red' : hasPermission ? 'green' : undefined} onClick={() => {
+      if(!props.node.data!.id) return;
+      setUpdatePermissionModalOpen(true);
+    }}><IconEye size={16} /></ActionIcon>;
+  }
+
+  return (
+    <div
+      id={props.node.id.toString()}
+      className={`tree-node ${styles["root"]}`}
+      style={{
+        marginLeft: indent,
+        marginBottom: 16,
+        height: 48,
+        border: '1px solid #e9ecef'
+      }}
+    >
+      <div className={styles["expandIconWrapper"]}>
+        <ThemeIcon variant="light" size={30}>
+          {IconFactory.getIcon(props.node.data!.icon!)}
+        </ThemeIcon>
+      </div>
+
+      <div className={styles["labelGridItem"]}
+           onClick={handleToggle}>
+        <Text variant="text" size={'xs'}>{`${props.node.text}`}</Text>
+      </div>
+
+      <div
+        onClick={handleToggle}
+        style={{width: isLeaf() ? 24 : 8}}
+        className={`${styles["expandIconWrapper"]} ${
+          props.isOpen ? styles["isOpen"] : ""
+        }`}
+      >
+        {isLeaf() && (
+          <div onClick={handleToggle}>
+            <IconChevronRight size={16} />
+          </div>
+        )}
+      </div>
+
+      <div>
+        <Group gap={8}>
+
+          {props.node.data?.isProtectedByRule &&
+            <Badge leftSection={
+              <ActionIcon size="xs" radius="xl" variant="transparent">
+                <IconLock size={12} />
+              </ActionIcon>
+            }>Regola attiva</Badge>
+          }
+
+          {!props.node.data!.id &&
+            <Badge color={'green'} leftSection={
+              <ActionIcon size="xs" radius="xl" variant="transparent">
+                <IconPlus color={'green'} size={12} />
+              </ActionIcon>
+            }>Nuovo</Badge>
+          }
+
+          {props.node.data?.isGroup &&
+            <Badge color={'red'} leftSection={
+              <ActionIcon size="xs" radius="xl" variant="transparent">
+                <IconBoxMultiple color={'red'} size={12} />
+              </ActionIcon>
+            }>Gruppo</Badge>
+          }
+
+          {!props.node.data?.isGroup && props.node.data?.hasIndex &&
+            <Badge color={'yellow'} leftSection={
+              <ActionIcon size="xs" radius="xl" variant="transparent">
+                <IconSearch color={'orange'} size={12} />
+              </ActionIcon>
+            }>Indicizzato</Badge>
+          }
+
+          {props.node.data?.featureIdentifier === 'webclient.routing.externallink' &&
+            <Badge color={'green'} leftSection={
+              <ActionIcon size="xs" radius="xl" variant="transparent">
+                <IconExternalLink color={'green'} size={12} />
+              </ActionIcon>
+            }>Esterno</Badge>
+          }
+
+          {!props.node.data?.id ?
+            <Tooltip label={"Devi salvare il menu prima di impostare i permessi"}>
+              {updatePermissionButton()}
+            </Tooltip> :
+            <>{updatePermissionButton()}</>
+          }
+          <ActionIcon onClick={() => props.onEditButtonClick(props.node.data!)}><IconEdit size={16} /></ActionIcon>
+          <ActionIcon onClick={() => props.onDeleteButtonClick(props.node.id)}><IconTrash size={16} /></ActionIcon>
+        </Group>
+      </div>
+
+      {props.node!.data!.id &&
+        <Modal
+          size={'60%'}
+          centered
+          opened={updatePermissionModalOpen}
+          onClose={() => {
+            setUpdatePermissionModalOpen(false);
+          }}
+          title={`Gestione permessi ${props.node!.data!.label}`}>
+          <PermissionNavigator
+            context={{type: 'menu', id: props.node!.data!.id!.toString()}}
+            onUpdate={(pc) => setHasPermission(pc > 0)}
+          />
+        </Modal>
+      }
+
+    </div>
+  );
+};