@fluxo-dev/shell 0.0.8

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

@@ -0,0 +1,304 @@
+import {
+  ActionIcon,
+  Badge,
+  Button,
+  Center,
+  Divider,
+  Grid,
+  Group,
+  Loader,
+  Modal,
+  Select,
+  Stack,
+  Table,
+  Text
+} from "@mantine/core";
+import React, {useEffect, useState} from "react";
+import {UpdatePermission} from "./update-permission";
+import {FluxoClientSys, Permission, PermissionScope} from "@fluxo-dev/api-client-base";
+import {IconArrowDown, IconCloudOff, IconPlus, IconRefresh, IconTrash} from '@tabler/icons-react';
+import {DataCard, WaitData} from "@fluxo-dev/ui-components";
+import {CreateScopeForm} from "./create-scope-form";
+import {CreateCustomPermissionForm} from "./create-custom-permission-form";
+import {showNotification} from "@mantine/notifications";
+
+export function PermissionGrid() {
+
+  const [permissions, setPermissions] = useState<Permission[]>([]);
+  const [updatePermissionModal, setUpdatePermissionModal] = useState<boolean>(false);
+
+  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 [currentNamespace, setCurrentNamespace] = useState<string | null>(null);
+  const [permissionLoading, setPermissionLoading] = useState<boolean>(false);
+
+  const [createPermissionScopeModalOpened, setCreatePermissionScopeModalOpened] = useState<boolean>(false);
+  const [createCustomPermissionModalOpened, setCreateCustomPermissionModalOpened] = useState<boolean>(false);
+
+  useEffect(() => {
+    loadPermissionScopes();
+  }, [])
+
+  const loadPermissionScopes = () => {
+    FluxoClientSys.Instance.security.permission.getPermissionScopes()
+      .then((res) => {
+        setPermissionScopes(res);
+        setPermissionScopesLoaded(true);
+      })
+  }
+
+  useEffect(() => {
+    if(currentScope && currentPackageName && currentNamespace)
+      getPermissionInScope();
+    else
+      setPermissions([]);
+  }, [currentScope, currentPackageName, currentNamespace]);
+
+  const getPermissionInScope = () => {
+
+    if(!currentScope || !currentPackageName || !currentNamespace) {
+      return;
+    }
+
+    setPermissionLoading(true);
+
+    FluxoClientSys.Instance.security.permission.getPermissionsInScope(currentScope, currentPackageName, currentNamespace)
+      .then((res) => {
+        setPermissions(res);
+        setPermissionLoading(false);
+      })
+  }
+
+  const deleteCustomPermission = (permissionId: number) => {
+    FluxoClientSys.Instance.security.permission.deleteCustomPermission(permissionId)
+      .then(() => {
+        showNotification({
+          title: 'Operazione completata',
+          message: 'Il permesso è stato eliminato con successo',
+          color: 'green',
+        })
+        getPermissionInScope();
+      })
+      .catch(() => {
+        showNotification({
+          title: 'Operazione fallita',
+          message: 'Non è stato possibile eliminare il permesso',
+          color: 'red',
+        })
+      });
+  }
+
+  const deletePermissionScope = () => {
+
+    if(!currentScope || !currentPackageName || !currentNamespace) {
+      return;
+    }
+
+    FluxoClientSys.Instance.security.permission.deletePermissionScope(currentScope, currentPackageName, currentNamespace)
+      .then(() => {
+        showNotification({
+          title: 'Operazione completata',
+          message: 'Lo scope è stato eliminato con successo',
+          color: 'green',
+        })
+        setCurrentScope(null);
+        setCurrentPackageName(null);
+        setCurrentNamespace(null);
+        setPermissions([]);
+        loadPermissionScopes();
+      })
+      .catch(() => {
+        showNotification({
+          title: 'Operazione fallita',
+          message: 'Non è stato possibile eliminare lo scope',
+          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))];
+  }
+
+  const getNamespaces = (scope: string | null, packageName: string | null) => {
+    if(permissionScopes === undefined || !scope || !packageName) return [];
+    return [...new Set(permissionScopes.filter(a => a.scope === scope && a.packageName === packageName).map(a => a.namespace))];
+  }
+
+  return (
+    <DataCard title={'Permessi'}
+              actions={[
+                {
+                  icon: <IconArrowDown size={18}/>,
+                  label: 'Installa permessi',
+                  onClick: () => {
+                    setUpdatePermissionModal(true)
+                  }
+                },
+                {
+                  icon: <IconPlus size={18}/>,
+                  label: 'Crea nuovo scope',
+                  onClick: () => {
+                    setCreatePermissionScopeModalOpened(true)
+                  }
+                }]}>
+
+      <Stack>
+        <Grid>
+          <Grid.Col span={4}>
+            <Select
+              data={getScopes()}
+              searchable
+              placeholder={'Seleziona uno scope'}
+              value={currentScope}
+              label={'Scope'}
+              onChange={(v) => {
+                setCurrentScope(v)
+                setCurrentPackageName(null);
+                setCurrentNamespace(null);
+              }} />
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <Select
+              disabled={!currentScope}
+              searchable
+              placeholder={'Seleziona un package name'}
+              data={getPackageNames(currentScope)}
+              value={currentPackageName}
+              label={'Package name'}
+                onChange={(v) => {
+                setCurrentPackageName(v)
+                setCurrentNamespace(null);
+              }} />
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <Select
+              disabled={!currentPackageName}
+              searchable
+              placeholder={'Seleziona un namespace'}
+              data={getNamespaces(currentScope, currentPackageName)}
+              value={currentNamespace}
+              label={'Namespace'}
+              onChange={(v) => {
+                setCurrentNamespace(v)
+              }} />
+          </Grid.Col>
+        </Grid>
+
+        <Divider />
+
+        {permissionLoading &&
+          <Loader />
+        }
+
+        {(currentScope && currentPackageName && currentNamespace && !permissionLoading && permissions.length) === 0 &&
+          <Stack>
+            <Group justify={'right'} align={'center'}>
+              <Button color={'red'} disabled={permissions.length > 0} onClick={deletePermissionScope} leftSection={<IconTrash size={18}/>}>Elimina scope</Button>
+              <Button leftSection={<IconPlus size={18}/>} onClick={() => setCreateCustomPermissionModalOpened(true)}>Crea permesso custom</Button>
+            </Group>
+            <Center>
+              <Text size={'md'}>Nessun permesso esistente.</Text>
+            </Center>
+          </Stack>
+        }
+
+        {(!currentScope || !currentPackageName || !currentNamespace) &&
+          <Stack align={'center'} mt={32} mb={32}>
+            <IconCloudOff color={'gray'} size={64} />
+            <Center>
+              <Text size={'md'}>Seleziona uno scope, un package name e un namespace per visualizzare i permessi associati.</Text>
+            </Center>
+          </Stack>
+        }
+
+        {!permissionLoading && permissions.length > 0 &&
+          <Stack>
+            <Group justify={'right'} align={'center'}>
+              <Button disabled={permissions.length > 0} leftSection={<IconTrash size={18}/>}>Elimina scope</Button>
+              <Button leftSection={<IconPlus size={18}/>} onClick={() => setCreateCustomPermissionModalOpened(true)}>Crea permesso custom</Button>
+            </Group>
+            <Table highlightOnHover>
+              <Table.Thead>
+              <Table.Tr>
+                <Table.Th>Id</Table.Th>
+                <Table.Th>Scope</Table.Th>
+                <Table.Th>Identificatore</Table.Th>
+                <Table.Th>Descrizione</Table.Th>
+                <Table.Th style={{maxWidth: 130, width: 130}}>Personalizzato</Table.Th>
+                <Table.Th style={{maxWidth: 80, width: 80}}>Azioni</Table.Th>
+              </Table.Tr>
+              </Table.Thead>
+              <tbody>
+              {permissions.map((element, i) => {
+                return (
+                  <Table.Tr key={i}>
+                    <Table.Td>{element.id}</Table.Td>
+                    <Table.Td>{`${element.scope}.${element.packageName}.${element.namespace}`}</Table.Td>
+                    <Table.Td>{element.identifier}</Table.Td>
+                    <Table.Td>{element.description}</Table.Td>
+                    <Table.Td style={{maxWidth: 130, width: 130}}>
+                      {element.isCustom ?
+                        <Badge w={'100%'} color={'green'}>Si</Badge> :
+                        <Badge w={'100%'} color={'red'}>No</Badge>
+                      }
+                    </Table.Td>
+                    <Table.Td style={{maxWidth: 130, width: 130}}>
+                      <ActionIcon
+                        onClick={() => deleteCustomPermission(element.id)}
+                        disabled={!element.isCustom}>
+                        <IconTrash size={18} />
+                      </ActionIcon>
+                    </Table.Td>
+                  </Table.Tr>
+                )
+              })}
+              </tbody>
+            </Table>
+          </Stack>
+        }
+
+
+
+        <Modal centered opened={updatePermissionModal} onClose={() => {
+          setUpdatePermissionModal(false);
+        }} title="Aggiorna permessi">
+          <UpdatePermission onUpdated={() => {
+            setUpdatePermissionModal(false)
+          }} onCanceled={() => setUpdatePermissionModal(false)} />
+        </Modal>
+
+        <Modal centered opened={createPermissionScopeModalOpened} onClose={() => {
+          setCreatePermissionScopeModalOpened(false);
+        }} title="Crea nuovo scope">
+          <CreateScopeForm
+            permissionScopes={permissionScopes}
+            onCreated={() => {  setCreatePermissionScopeModalOpened(false); loadPermissionScopes() }}
+            onCanceled={() => {setCreatePermissionScopeModalOpened(false)}}
+            />
+        </Modal>
+
+        <Modal centered opened={createCustomPermissionModalOpened} onClose={() => {
+          setCreatePermissionScopeModalOpened(false);
+        }} title="Crea nuovo permesso custom">
+          <CreateCustomPermissionForm
+            permissionScope={permissionScopes.filter(a => a.scope === currentScope && a.packageName === currentPackageName && a.namespace === currentNamespace)[0]}
+            onCreated={() => {setCreateCustomPermissionModalOpened(false); getPermissionInScope()}}
+            onCanceled={() => {setCreateCustomPermissionModalOpened(false)}}
+          />
+        </Modal>
+
+      </Stack>
+
+    </DataCard>
+  )
+}

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

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

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