@fluxo-dev/shell 0.0.8 → 0.0.12

package/src/lib/pages/settings/security/components/permission/permission-navigator.tsx

@@ -1,320 +0,0 @@
-import React, {useEffect, useState} from "react";
-import {
-  FluxoClientSys,
-  Permission, PermissionScope
-} from "@fluxo-dev/api-client-base";
-import {Badge, Checkbox, Grid, Group, Loader, NavLink, ScrollArea, Stack, Text, TextInput} from "@mantine/core";
-import {IconSearch} from '@tabler/icons-react';
-import {NoData} from "@fluxo-dev/ui-components";
-import {showNotification} from "@mantine/notifications";
-
-export interface PermissionNavigatorProps {
-  context: {type: 'domainRole' | 'menu' | 'route-rule', id: string};
-  onUpdate: (currentPermissionCount: number) => void;
-}
-
-export function PermissionNavigator(props: PermissionNavigatorProps) {
-
-  const [structuredPermissions, setStructuredPermissions] = useState<PermissionScope[]>();
-  const [domainRolePermissions, setDomainRolePermissions] = useState<Permission[]>([]);
-
-  const [structuredPermissionLoaded, setStructuredPermissionLoaded] = useState<boolean>(false);
-  const [domainRolePermissionLoaded, setDomainRolePermissionLoaded] = useState<boolean>(false);
-
-  //const [currentPackageName, setCurrentPackageName] = useState<StructuredPermissionsPackageName>();
-
-  const [selectedPermissionsIds, setSelectedPermissionsIds] = useState<number[]>([]);
-
-  const [currentScope, setCurrentScope] = useState<string>();
-  const [currentPackageName, setCurrentPackageName] = useState<string>();
-  const [currentNamespace, setCurrentNamespace] = useState<string>();
-
-  const [currentPermissions, setCurrentPermissions] = useState<Permission[]>([]);
-
-
-  useEffect(() => {
-    props.onUpdate(selectedPermissionsIds.length);
-  }, [selectedPermissionsIds])
-
-  useEffect(() => {
-    FluxoClientSys.Instance.security.permission.getPermissionScopes()
-      .then((res) => {
-        setStructuredPermissions(res);
-        setStructuredPermissionLoaded(true);
-      })
-
-    if(props.context.type === 'domainRole') {
-
-      FluxoClientSys.Instance.security.domainRole.getPermissions(props.context.id)
-        .then((res) => {
-          setDomainRolePermissions(res);
-          setDomainRolePermissionLoaded(true);
-        });
-
-    } else if(props.context.type === 'menu') {
-
-      FluxoClientSys.Instance.configuration.getMenuItemPermissions(props.context.id)
-        .then((res) => {
-          setDomainRolePermissions(res);
-          setDomainRolePermissionLoaded(true);
-        });
-    } else {
-
-      FluxoClientSys.Instance.security.routeRule.getPermissions(props.context.id)
-        .then((res) => {
-          setDomainRolePermissions(res);
-          setDomainRolePermissionLoaded(true);
-        });
-    }
-
-  }, [])
-
-  useEffect(() => {
-    if(structuredPermissionLoaded && domainRolePermissionLoaded) {
-      const initPermissions = [...domainRolePermissions.map((p) => p.id)];
-      setSelectedPermissionsIds(initPermissions);
-    }
-  }, [structuredPermissionLoaded, domainRolePermissionLoaded])
-
-  const addOrRemovePermission = (permissionId: number) => {
-    if(props.context.type === 'domainRole') {
-      addOrRemovePermissionForDomainRole(permissionId);
-    } else if(props.context.type === 'menu') {
-      addOrRemovePermissionForMenu(permissionId);
-    } else if(props.context.type === 'route-rule') {
-      addOrRemovePermissionForRouteRule(permissionId);
-    }
-  }
-
-  const addOrRemovePermissionForRouteRule = (menuItemId: number) => {
-    if(selectedPermissionsIds.includes(menuItemId)) {
-
-      FluxoClientSys.Instance.security.routeRule.removePermission(+props.context.id, menuItemId)
-        .then((res) => {
-          setSelectedPermissionsIds(selectedPermissionsIds.filter((p) => p !== menuItemId));
-          showNotification({
-            title: "Permesso rimosso",
-            message: "Il permesso è stato rimosso correttamente",
-            color: "green",
-          });
-        })
-        .catch((err) => {
-          showNotification({
-            title: "Errore",
-            message: "Si è verificato un errore durante la rimozione del permesso",
-            color: "red",
-          });
-        });
-
-    } else {
-
-      FluxoClientSys.Instance.security.routeRule.addPermission(+props.context.id, menuItemId)
-        .then((res) => {
-          setSelectedPermissionsIds([...selectedPermissionsIds, menuItemId]);
-          showNotification({
-            title: "Permesso aggiunto",
-            message: "Il permesso è stato aggiunto correttamente",
-            color: "green",
-          });
-        })
-        .catch((err) => {
-          showNotification({
-            title: "Errore",
-            message: "Si è verificato un errore durante l'aggiunta del permesso",
-            color: "red",
-          });
-        });
-    }
-  }
-  const addOrRemovePermissionForMenu = (menuItemId: number) => {
-    if(selectedPermissionsIds.includes(menuItemId)) {
-
-      FluxoClientSys.Instance.configuration.removeMenuItemPermission(+props.context.id, menuItemId)
-        .then((res) => {
-          setSelectedPermissionsIds(selectedPermissionsIds.filter((p) => p !== menuItemId));
-          showNotification({
-            title: "Permesso rimosso",
-            message: "Il permesso è stato rimosso correttamente",
-            color: "green",
-          });
-        })
-        .catch((err) => {
-          showNotification({
-            title: "Errore",
-            message: "Si è verificato un errore durante la rimozione del permesso",
-            color: "red",
-          });
-        });
-
-    } else {
-
-      FluxoClientSys.Instance.configuration.addMenuItemPermission(+props.context.id, menuItemId)
-        .then((res) => {
-          setSelectedPermissionsIds([...selectedPermissionsIds, menuItemId]);
-          showNotification({
-            title: "Permesso aggiunto",
-            message: "Il permesso è stato aggiunto correttamente",
-            color: "green",
-          });
-        })
-        .catch((err) => {
-          showNotification({
-            title: "Errore",
-            message: "Si è verificato un errore durante l'aggiunta del permesso",
-            color: "red",
-          });
-        });
-    }
-  }
-
-  const addOrRemovePermissionForDomainRole = (permissionId: number) => {
-    if(selectedPermissionsIds.includes(permissionId)) {
-
-      FluxoClientSys.Instance.security.domainRole.removePermission(+props.context.id, permissionId)
-        .then((res) => {
-          setSelectedPermissionsIds(selectedPermissionsIds.filter((p) => p !== permissionId));
-          showNotification({
-            title: "Permesso rimosso",
-            message: "Il permesso è stato rimosso correttamente",
-            color: "green",
-          });
-        })
-        .catch((err) => {
-          showNotification({
-            title: "Errore",
-            message: "Si è verificato un errore durante la rimozione del permesso",
-            color: "red",
-          });
-        });
-
-    } else {
-
-      FluxoClientSys.Instance.security.domainRole.addPermission(+props.context.id, permissionId)
-        .then((res) => {
-          setSelectedPermissionsIds([...selectedPermissionsIds, permissionId]);
-          showNotification({
-            title: "Permesso aggiunto",
-            message: "Il permesso è stato aggiunto correttamente",
-            color: "green",
-          });
-        })
-        .catch((err) => {
-          showNotification({
-            title: "Errore",
-            message: "Si è verificato un errore durante l'aggiunta del permesso",
-            color: "red",
-          });
-        });
-    }
-  }
-
-  const getScopes = () => {
-    if(structuredPermissions === undefined) return [];
-    return [...new Set(structuredPermissions.map(a => a.scope))];
-  }
-
-  const getPackageNames = (scope: string) => {
-    if(structuredPermissions === undefined) return [];
-    return [...new Set(structuredPermissions.filter(a => a.scope === scope).map(a => a.packageName))];
-  }
-
-  const getNamespaces = (scope: string, packageName: string) => {
-    if(structuredPermissions === undefined) return [];
-    return [...new Set(structuredPermissions.filter(a => a.scope === scope && a.packageName === packageName).map(a => a.namespace))];
-  }
-
-  const getPermissions = (scope: string, packageName: string, namespace: string) => {
-    FluxoClientSys.Instance.security.permission.getPermissionsInScope(scope, packageName, namespace)
-      .then((res) => {
-        setCurrentPermissions(res);
-      })
-      .catch((err) => {
-        showNotification({
-          title: "Errore",
-          message: "Si è verificato un errore durante il caricamento dei permessi",
-          color: "red",
-        })
-      })
-  }
-
-  return (
-    <>
-      {!(structuredPermissionLoaded && domainRolePermissionLoaded) ?
-        <Loader /> :
-
-        <Stack gap={8}>
-
-          <Grid h={480} m={0} mt={1}>
-            <Grid.Col span={4} p={0} style={{border: '1px solid #ececec', borderRight: 'none'}}>
-
-              <ScrollArea h={430}>
-              {getScopes().map((s) => {
-                return (
-                  <NavLink key={s} label={s} leftSection={<Badge size="xs" variant="filled" color="yellow" w={16} h={16} p={0}>{99}</Badge>}>
-                    <>
-                      {getPackageNames(s).map((n) => {
-                        return (
-                          <NavLink
-                            key={n}
-                            label={n}
-                            leftSection={<Badge size="xs" variant="filled" color="yellow" w={16} h={16} p={0}>{99}</Badge>}>
-
-                            {getNamespaces(s, n).map((ns) => {
-                              return (
-                                <NavLink
-                                  key={ns}
-                                  label={ns}
-                                  onClick={() => {
-                                    setCurrentScope(s);
-                                    setCurrentPackageName(n);
-                                    setCurrentNamespace(ns);
-                                    getPermissions(s, n, ns)
-                                  }}
-                                  leftSection={<Badge size="xs" variant="filled" color="yellow" w={16} h={16} p={0}>{99}</Badge>} />
-                              )
-                            })}
-
-                          </NavLink>
-                        )
-                      })}
-                    </>
-                  </NavLink>
-                )
-              })}
-              </ScrollArea>
-            </Grid.Col>
-            <Grid.Col h={480} span={8} p={0} style={{border: '1px solid #ececec'}}>
-
-              {(currentPackageName && currentScope && currentNamespace) ?
-                <>
-                  <Group justify={'space-between'} style={{background: '#ececec', marginBottom: 8}}>
-                    <Text size={'md'} p={8}>{`${currentScope}.${currentPackageName}.${currentNamespace}`}</Text>
-                    <TextInput pr={8} leftSection={<IconSearch size={16} />} placeholder={'Cerca'} />
-                  </Group>
-                  <ScrollArea h={430}>
-                    <Stack style={{width: '100%'}} p={8}>
-                      {currentPermissions?.map((p) => {
-                        return (
-                          <Checkbox
-                            key={p.id}
-                            description={p.identifier}
-                            label={!p.isCustom ? p.description : <>{p.description}<Badge ml={8}>Personalizzato</Badge></>}
-                            onChange={() => addOrRemovePermission(p.id)}
-                            checked={selectedPermissionsIds.includes(p.id)}
-                          />
-                        )
-                      })}
-                    </Stack>
-                  </ScrollArea>
-                </> :
-                <div style={{marginTop: 32}}>
-                  <NoData message={'Seleziona un package'} />
-                </div>
-              }
-            </Grid.Col>
-          </Grid>
-        </Stack>
-      }
-    </>
-  )
-}

package/src/lib/pages/settings/security/components/permission/update-permission.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import {Button, Group, Stack, Textarea} from "@mantine/core";
-import {FluxoClientSys, InstallPermissionCommand} from "@fluxo-dev/api-client-base";
-import {showNotification} from "@mantine/notifications";
-
-export interface UpdatePermissionProps {
-  onUpdated: () => void;
-  onCanceled: () => void;
-}
-
-export function UpdatePermission(props: UpdatePermissionProps) {
-
-  const [permissionsJson, setPermissionsJson] = React.useState<string>('');
-
-  const updatePermissions = () => {
-    try{
-      const data = JSON.parse(permissionsJson) as InstallPermissionCommand;
-
-      FluxoClientSys.Instance.security.permission.installPermissions(data)
-        .then(() => {
-
-          showNotification({
-            title: 'Operazione completata',
-            color: 'green',
-            message: `I permessi sono stati aggiornati con successo`,
-          })
-
-          props.onUpdated();
-        }, (err) => {
-          showNotification({
-            title: 'Operazione fallita',
-            color: 'red',
-            message: `Non è stato possibile aggiornare i permessi: ${err.message}`,
-          });
-        });
-    }catch (err) {
-      showNotification({
-        title: 'Operazione fallita',
-        color: 'red',
-        message: `Il file non è valido.`,
-      });
-    }
-  }
-
-  return (
-    <Stack>
-      <Textarea minRows={20} value={permissionsJson} onChange={(v) => setPermissionsJson(v.target.value)} />
-      <Group justify={'right'}>
-        <Button onClick={props.onCanceled}>Annulla</Button>
-        <Button onClick={updatePermissions} disabled={!permissionsJson}>Aggiorna</Button>
-      </Group>
-    </Stack>
-  )
-}

package/src/lib/pages/settings/security/components/route-rule/route-rule-create-form.tsx

@@ -1,59 +0,0 @@
-import React, {useState} from "react";
-import {FluxoClientSys, RouteRule} from "@fluxo-dev/api-client-base";
-import {showNotification} from "@mantine/notifications";
-import {Alert, Button, Divider, Group, Stack, TextInput} from "@mantine/core";
-import {IconInfoCircle} from "@tabler/icons-react";
-
-export interface RouteRuleCreateFormProps {
-  scope: string;
-  packageName: string;
-  onCanceled: () => void;
-  onCreated: () => void;
-}
-
-export function RouteRuleCreateForm(props: RouteRuleCreateFormProps) {
-  const [identifier, setIdentifier] = useState<string>('');
-
-  const createRouteRule = () => {
-    if(!identifier) return;
-
-    const command: RouteRule = {
-      scope: props.scope,
-      packageName: props.packageName,
-      route: identifier,
-    }
-    FluxoClientSys.Instance.security.routeRule.create(command)
-      .then(() => {
-        showNotification({
-          title: 'Regola creata',
-          message: `La regola ${props.scope}.${props.packageName}.${identifier} è stato creata con successo.`,
-          color: 'green'
-        })
-        props.onCreated();
-      })
-      .catch(() => {
-        showNotification({
-          title: 'Errore',
-          message: `Si è verificato un errore durante la creazione della regola ${props.scope}.${props.packageName}.${identifier}.`,
-          color: 'red'
-        })
-      });
-  }
-
-  return (
-    <Stack>
-      <TextInput label={"Identificatore"} placeholder={'Es: create'} required onChange={(v) => setIdentifier(v.target.value)} />
-
-      <p>Rotta: {`${props.scope}/${props.packageName}/${identifier}`}</p>
-      <Divider />
-      <Group justify={'right'}>
-        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
-        <Button
-          disabled={!identifier}
-          onClick={createRouteRule}>
-          Salva
-        </Button>
-      </Group>
-    </Stack>
-  )
-}

package/src/lib/pages/settings/security/components/route-rule/route-rule-grid.tsx

@@ -1,229 +0,0 @@
-import {ActionIcon, Button, Center, Divider, Grid, Group, Modal, Select, Stack, Table, Text} from "@mantine/core";
-import {DataCard} from "@fluxo-dev/ui-components";
-import React, {useEffect, useState} from "react";
-import {FluxoClientSys, PermissionScope, RouteRule} from "@fluxo-dev/api-client-base";
-import {IconCloudOff, IconLock, IconPlus, IconTrash} from "@tabler/icons-react";
-import {PermissionNavigator} from "../permission/permission-navigator";
-import {RouteRuleCreateForm} from "./route-rule-create-form";
-import {showNotification} from "@mantine/notifications";
-
-export function RouteRuleGrid() {
-
-  const [permissionScopes, setPermissionScopes] = useState<PermissionScope[]>([]);
-  const [permissionScopesLoaded, setPermissionScopesLoaded] = useState<boolean>(false);
-
-  const [currentScope, setCurrentScope] = useState<string | null>(null);
-  const [currentPackageName, setCurrentPackageName] = useState<string | null>(null);
-  const [routeRules, setRouteRules] = useState<RouteRule[]>([]);
-  const [permissionLoading, setPermissionLoading] = useState<boolean>(false);
-
-  const [currentRouteRule, setCurrentRouteRule] = useState<RouteRule | undefined>();
-  const [managePermissionModalOpened, setManagePermissionModalOpened] = useState<boolean>(false);
-
-  const [createRouteRuleModalOpened, setCreateRouteRuleModalOpened] = useState<boolean>(false);
-
-  useEffect(() => {
-    loadPermissionScopes();
-  }, [])
-
-  useEffect(() => {
-    if(currentScope && currentPackageName)
-      getRouteRulesForScope();
-    else
-      setRouteRules([]);
-  }, [currentScope, currentPackageName]);
-
-  const getRouteRulesForScope = () => {
-
-    if(!currentScope || !currentPackageName) {
-      return;
-    }
-
-    setPermissionLoading(true);
-
-    FluxoClientSys.Instance.security.routeRule.getRouteRulesForScope(currentScope, currentPackageName)
-      .then((res) => {
-        setRouteRules(res);
-        setPermissionLoading(false);
-      })
-  }
-
-  const loadPermissionScopes = () => {
-    FluxoClientSys.Instance.security.permission.getPermissionScopes()
-      .then((res) => {
-        setPermissionScopes(res);
-        setPermissionScopesLoaded(true);
-      })
-  }
-
-  const deleteRouteRule = (routeRule: RouteRule) => {
-    FluxoClientSys.Instance.security.routeRule.delete(routeRule.id!.toString())
-      .then(() => {
-        showNotification({
-          title: 'Regola eliminata',
-          message: `La regola ${routeRule.scope}.${routeRule.packageName}.${routeRule.route} è stato eliminata con successo.`,
-          color: 'green'
-        })
-        getRouteRulesForScope();
-      })
-      .catch(() => {
-        showNotification({
-          title: 'Errore',
-          message: `Si è verificato un errore durante l'eliminazione della regola ${routeRule.scope}.${routeRule.packageName}.${routeRule.route}.`,
-          color: 'red'
-        })
-      });
-  }
-
-  const getScopes = () => {
-    if(permissionScopes === undefined) return [];
-    return [...new Set(permissionScopes.map(a => a.scope))];
-  }
-
-  const getPackageNames = (scope: string | null) => {
-    if(permissionScopes === undefined || !scope) return [];
-    return [...new Set(permissionScopes.filter(a => a.scope === scope).map(a => a.packageName))];
-  }
-
-  return (
-    <DataCard title={'Regole sulle rotte'}>
-      <Stack>
-        <Grid>
-          <Grid.Col span={6}>
-            <Select
-              data={getScopes()}
-              searchable
-              placeholder={'Seleziona uno scope'}
-              value={currentScope}
-              label={'Scope'}
-              onChange={(v) => {
-                setCurrentScope(v)
-                setCurrentPackageName(null);
-              }} />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Select
-              disabled={!currentScope}
-              searchable
-              placeholder={'Seleziona un package name'}
-              data={getPackageNames(currentScope)}
-              value={currentPackageName}
-              label={'Package name'}
-              onChange={(v) => {
-                setCurrentPackageName(v)
-              }} />
-          </Grid.Col>
-        </Grid>
-
-        <Divider />
-
-        {(currentScope && currentPackageName && !permissionLoading && routeRules.length) === 0 &&
-          <Stack>
-            <Group justify={'right'} align={'center'}>
-              <Button leftSection={<IconPlus size={18}/>} onClick={() => setCreateRouteRuleModalOpened(true)}>Nuova regola</Button>
-            </Group>
-            <Center>
-              <Text size={'md'}>Nessuna regola esistente.</Text>
-            </Center>
-          </Stack>
-        }
-
-        {(!currentScope || !currentPackageName) &&
-          <Stack align={'center'} mt={32} mb={32}>
-            <IconCloudOff color={'gray'} size={64} />
-            <Center>
-              <Text size={'md'}>Seleziona uno scope e un package name per visualizzare i permessi associati.</Text>
-            </Center>
-          </Stack>
-        }
-
-        {!permissionLoading && routeRules.length > 0 &&
-          <Stack>
-            <Group justify={'right'} align={'center'}>
-              <Button leftSection={<IconPlus size={18}/>} onClick={() => setCreateRouteRuleModalOpened(true)}>Nuova regola</Button>
-            </Group>
-            <Table highlightOnHover>
-              <Table.Thead>
-              <Table.Tr>
-                <Table.Th>Id</Table.Th>
-                <Table.Th>Scope</Table.Th>
-                <Table.Th>Rotta</Table.Th>
-                <Table.Th>Permessi</Table.Th>
-                <Table.Th style={{maxWidth: 80, width: 80}}>Azioni</Table.Th>
-              </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
-              {routeRules.map((element, i) => {
-                return (
-                  <Table.Tr key={i}>
-                    <Table.Td>{element.id}</Table.Td>
-                    <Table.Td>{`${element.scope}.${element.packageName}`}</Table.Td>
-                    <Table.Td>{`/${element.scope}/${element.packageName}/${element.route}`}</Table.Td>
-                    <Table.Td>{element.permissionsCount}</Table.Td>
-                    <Table.Td style={{maxWidth: 130, width: 130}}>
-                      <Group>
-                        <ActionIcon onClick={() => {
-                          setCurrentRouteRule(element);
-                          setManagePermissionModalOpened(true);
-                        }}>
-                          <IconLock size={18} />
-                        </ActionIcon>
-                        <ActionIcon onClick={() => {
-                          deleteRouteRule(element);
-                        }}>
-                          <IconTrash size={18} />
-                        </ActionIcon>
-                      </Group>
-
-                    </Table.Td>
-                  </Table.Tr>
-                )
-              })}
-              </Table.Tbody>
-            </Table>
-          </Stack>
-        }
-
-      </Stack>
-
-      {currentRouteRule &&
-        <Modal
-          size={'60%'}
-          centered
-          opened={managePermissionModalOpened}
-          onClose={() => {
-            getRouteRulesForScope();
-            setManagePermissionModalOpened(false);
-            setCurrentRouteRule(undefined);
-          }}
-          title={`Gestione permessi ${currentRouteRule.route}`}>
-          <PermissionNavigator
-            context={{type: 'route-rule', id: currentRouteRule.id!.toString()}}
-            onUpdate={() => {}}
-          />
-        </Modal>
-      }
-
-      <Modal
-        size={'60%'}
-        centered
-        opened={createRouteRuleModalOpened}
-        onClose={() => {
-          getRouteRulesForScope();
-          setCreateRouteRuleModalOpened(false);
-        }}
-        title={`Crea nuova regola`}>
-        <RouteRuleCreateForm
-          scope={currentScope!}
-          packageName={currentPackageName!}
-          onCreated={() => {
-            getRouteRulesForScope();
-            setCreateRouteRuleModalOpened(false);
-          }}
-          onCanceled={() => {setCreateRouteRuleModalOpened(false)}}
-        />
-      </Modal>
-
-    </DataCard>
-  )
-}