@fluxo-dev/shell 0.0.8 → 0.0.9

package/src/lib/pages/settings/security/components/domani-role/domain-role-grid.tsx

@@ -1,139 +0,0 @@
-import {IconDotsVertical, IconEdit, IconLock, IconPlus, IconTrash} from "@tabler/icons-react";
-import {ActionIcon, Menu, Modal, Table} from "@mantine/core";
-import {DataCard} from "@fluxo-dev/ui-components";
-import React, {useEffect, useState} from "react";
-import {DomainRole, FluxoClientSys} from "@fluxo-dev/api-client-base";
-import {showNotification} from "@mantine/notifications";
-import {DomainRoleForm} from "./domain-role-form";
-import {PermissionNavigator} from "../permission/permission-navigator";
-
-export function DomainRoleGrid() {
-
-  const [domainRoles, setDomainRoles] = useState<DomainRole[]>([]);
-  const [currentDomainRole, setCurrentDomainRole] = useState<DomainRole>();
-  const [domainRoleModalOpen, setDomainRoleModalOpen] = useState<boolean>(false);
-  const [updateDomainRolePermissionsModal, setUpdateDomainRolePermissionsModal] = useState<boolean>(false);
-
-  useEffect(() => {
-    getAllDomainRoles();
-  }, [])
-
-  const getAllDomainRoles = () => {
-    FluxoClientSys.Instance.security.domainRole.find(9999,0, undefined, "DomainRolePermissions,DomainRolePermissions.Permission")
-      .then((res) => {
-        setDomainRoles(res.results);
-      });
-  }
-
-  const deleteDomainRole = (id: number | undefined) => {
-
-    if(!id)
-      return;
-
-    FluxoClientSys.Instance.security.domainRole.delete(id.toString())
-      .then((res) => {
-
-        showNotification({
-          title: 'Cancellazione completata',
-          message: `Il ruolo è stato cancellato con successo`,
-          color: 'green',
-        });
-
-        getAllDomainRoles();
-
-      })
-      .catch((err) => {
-        showNotification({
-          title: 'Errore',
-          message: `Errore durante la cancellazione`,
-          color: 'red',
-        });
-      });
-  }
-
-  return (
-    <DataCard title={'Ruoli utente'}
-              actions={[{icon: <IconPlus size={18}/>, label: 'Nuovo ruolo', onClick: () => {
-                  setCurrentDomainRole(undefined);
-                  setDomainRoleModalOpen(true);
-                }}]}>
-      <Table highlightOnHover>
-        <Table.Thead>
-        <Table.Tr>
-          <Table.Th>Id</Table.Th>
-          <Table.Th>Identificatore</Table.Th>
-          <Table.Th>Nome</Table.Th>
-          <Table.Th>Descrizione</Table.Th>
-          <Table.Th>Permessi</Table.Th>
-          <Table.Th></Table.Th>
-        </Table.Tr>
-        </Table.Thead>
-        <tbody>
-        {
-          domainRoles.map((element, i) =>
-            <Table.Tr key={i}>
-              <td>{element.id}</td>
-              <td>{element.identifier}</td>
-              <td>{element.name}</td>
-              <td>{element.description}</td>
-              <td>{element.permissionCount}</td>
-              <Table.Td align="right">
-                <Menu shadow="md" width={200}>
-                  <Menu.Target>
-                    <ActionIcon><IconDotsVertical size={18} /></ActionIcon>
-                  </Menu.Target>
-
-                  <Menu.Dropdown>
-                    <Menu.Item leftSection={<IconLock size={14} />} onClick={() => {
-                      setCurrentDomainRole(element);
-                      setUpdateDomainRolePermissionsModal(true)
-                    }}>
-                      Permessi
-                    </Menu.Item>
-                    <Menu.Item onClick={() => {
-                      setCurrentDomainRole(element);
-                      setDomainRoleModalOpen(true);
-                    }} leftSection={<IconEdit size={14} />}>Modifica</Menu.Item>
-                    <Menu.Divider />
-                    <Menu.Item color={'red'} onClick={() => deleteDomainRole(element.id)} leftSection={<IconTrash color={'red'} size={14} />}>Elimina</Menu.Item>
-                  </Menu.Dropdown>
-                </Menu>
-              </Table.Td>
-            </Table.Tr>
-          )
-        }
-        </tbody>
-      </Table>
-
-      <Modal centered opened={domainRoleModalOpen} onClose={() => {
-        setDomainRoleModalOpen(false);
-        setCurrentDomainRole(undefined);
-      }} title={`${currentDomainRole ? 'Modifica ruolo' : 'Crea ruolo'}`}>
-        <DomainRoleForm onCreate={() => {
-          setDomainRoleModalOpen(false);
-          getAllDomainRoles();
-          setCurrentDomainRole(undefined);
-        }} domainRole={currentDomainRole}/>
-      </Modal>
-
-      {currentDomainRole &&
-        <Modal
-          size={'60%'}
-          centered
-          opened={updateDomainRolePermissionsModal}
-          onClose={() => {
-            setUpdateDomainRolePermissionsModal(false);
-            setCurrentDomainRole(undefined);
-            getAllDomainRoles();
-          }}
-          title={`Gestione permessi ${currentDomainRole.name}`}>
-          <PermissionNavigator
-            context={{type: 'domainRole', id: currentDomainRole.id!.toString()}}
-            onUpdate={() => {}}
-          />
-        </Modal>
-      }
-
-    </DataCard>
-  )
-}

package/src/lib/pages/settings/security/components/permission/create-custom-permission-form.tsx

@@ -1,64 +0,0 @@
-import {Alert, Button, Divider, Group, Stack, TextInput} from "@mantine/core";
-import {CreateCustomPermissionCommand, FluxoClientSys, PermissionScope} from "@fluxo-dev/api-client-base";
-import React, {useState} from "react";
-import {showNotification} from "@mantine/notifications";
-import {IconInfoCircle} from "@tabler/icons-react";
-
-export interface CreateCustomPermissionFormProps {
-  permissionScope: PermissionScope;
-  onCanceled: () => void;
-  onCreated: () => void;
-}
-export function CreateCustomPermissionForm(props: CreateCustomPermissionFormProps) {
-
-  const [identifier, setIdentifier] = useState<string>('');
-  const [description, setDescription] = useState<string>('');
-
-  const createCustomPermission = () => {
-    if(!identifier || !description) return;
-
-    const command: CreateCustomPermissionCommand = {
-      scope: props.permissionScope.scope,
-      packageName: props.permissionScope.packageName,
-      namespace: props.permissionScope.namespace,
-      identifier: identifier,
-      description: description
-    }
-    FluxoClientSys.Instance.security.permission.createCustomPermission(command)
-      .then(() => {
-        showNotification({
-          title: 'Permesso creato',
-          message: `Il permesso ${props.permissionScope.scope}.${props.permissionScope.packageName}.${props.permissionScope.namespace}.${identifier} è stato creato con successo.`,
-          color: 'green'
-        })
-        props.onCreated();
-      })
-      .catch(() => {
-        showNotification({
-          title: 'Errore',
-          message: `Si è verificato un errore durante la creazione del permesso ${props.permissionScope.scope}.${props.permissionScope.packageName}.${props.permissionScope.namespace}.${identifier}.`,
-          color: 'red'
-        })
-      });
-  }
-
-  return (
-    <Stack>
-      <Alert color={'yellow'} icon={<IconInfoCircle />}>
-        <b>Informazioni: </b> crea nuovi permessi personalizzati da utilizzare nei servizi dinamici, nei menu e nelle pagine DynamicUI.
-      </Alert>
-      <TextInput label={"Identificatore"} placeholder={'Es: create'} required onChange={(v) => setIdentifier(v.target.value)} />
-      <TextInput label={"Descrizione"} placeholder={'Es: Crea'} required onChange={(v) => setDescription(v.target.value)} />
-
-      <Divider />
-      <Group justify={'right'}>
-        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
-        <Button
-          disabled={!identifier || !description}
-          onClick={createCustomPermission}>
-          Salva
-        </Button>
-      </Group>
-    </Stack>
-  )
-}

package/src/lib/pages/settings/security/components/permission/create-scope-form.tsx

@@ -1,158 +0,0 @@
-import React, {useState} from "react";
-import {Button, Divider, Group, Select, Stack, TextInput} from "@mantine/core";
-import {CreatePermissionScopeCommand, FluxoClientSys, PermissionScope} from "@fluxo-dev/api-client-base";
-import {showNotification} from "@mantine/notifications";
-
-export interface CreateScopeFormProps {
-  permissionScopes: PermissionScope[],
-  onCreated: () => void;
-  onCanceled: () => void;
-}
-
-export function CreateScopeForm(props: CreateScopeFormProps) {
-
-  const [permissionScopes] = useState<PermissionScope[]>(props.permissionScopes);
-  const [createdScopes, setCreatedScopes] = useState<string[]>([]);
-  const [createdPackageNames, setCreatedPackageNames] = useState<string[]>([]);
-  const [createdNamespaces, setCreatedNamespaces] = useState<string[]>([]);
-
-  const [currentScope, setCurrentScope] = useState<string | null>(null);
-  const [currentPackageName, setCurrentPackageName] = useState<string | null>(null);
-  const [currentNamespace, setCurrentNamespace] = useState<string | undefined>(undefined);
-  const [namespaceDescription, setNamespaceDescription] = useState<string>('');
-  const [namespaceIdentifierError, setNamespaceIdentifierError] = useState<string | null>(null);
-  const createPermissionScope = () => {
-    if(!currentScope || !currentPackageName || !currentNamespace) {
-      return;
-    }
-
-    const command: CreatePermissionScopeCommand = {
-      scope: currentScope,
-      packageName: currentPackageName,
-      namespace: currentNamespace,
-      namespaceDescription: namespaceDescription
-    }
-
-    FluxoClientSys.Instance.security.permission.createPermissionScope(command)
-      .then((res) => {
-        showNotification({
-          title: 'Scope creato',
-          message: `Lo scope ${currentScope}.${currentPackageName}.${currentNamespace} è stato creato con successo.`,
-          color: 'green'
-        });
-        props.onCreated();
-      })
-      .catch(() => {
-        showNotification({
-          title: 'Errore',
-          message: `Si è verificato un errore durante la creazione dello scope ${currentScope}.${currentPackageName}.${currentNamespace}.`,
-          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 (
-    <Stack>
-      {/*<Select
-        label="Scope"
-        description={'Seleziona uno scope esistente oppure crea un nuovo scope.'}
-        data={[...getScopes(), ...createdScopes]}
-        nothingFoundMessage="Nessuno scope trovato"
-        searchable
-        onChange={(v) => setCurrentScope(v)}
-        creatable
-        getCreateLabel={(query) => `+ Crea ${query}`}
-        onCreate={(query) => {
-          setCreatedScopes([query]);
-          return query;
-        }}
-      />
-
-      <Select
-        label="Package Name"
-        description={'Seleziona un package name esistente oppure crea un nuovo package name.'}
-        data={[...getPackageNames(currentScope), ...createdPackageNames]}
-        disabled={!currentScope}
-        nothingFoundMessage="Nessuno package name trovato"
-        searchable
-        creatable
-        onChange={(v) => setCurrentPackageName(v)}
-        getCreateLabel={(query) => `+ Crea ${query}`}
-        onCreate={(query) => {
-          setCreatedPackageNames([query]);
-          return query;
-        }}
-      />*/}
-
-      <Select
-        label="Scope"
-        description={'Seleziona uno scope esistente oppure crea un nuovo scope.'}
-        data={[...getScopes(), ...createdScopes]}
-        nothingFoundMessage="Nessuno scope trovato"
-        searchable
-        onChange={(v) => setCurrentScope(v)}
-      />
-
-      <Select
-        label="Package Name"
-        description={'Seleziona un package name esistente oppure crea un nuovo package name.'}
-        data={[...getPackageNames(currentScope), ...createdPackageNames]}
-        disabled={!currentScope}
-        nothingFoundMessage="Nessuno package name trovato"
-        searchable
-      />
-
-      <TextInput
-        disabled={!currentPackageName}
-        description={'Identificatore del nuovo namespace. Non è possibile selezionare un namespace già esistente.'}
-        label={'Identificatore del namespace'}
-        value={currentNamespace}
-        error={namespaceIdentifierError}
-        onChange={(e) => {
-          if(getNamespaces(currentScope, currentPackageName).includes(e.currentTarget.value)) {
-            setNamespaceIdentifierError(`Il namespace inserito è già presente nel percorso ${currentScope}.${currentPackageName}.`);
-          } else {
-            setNamespaceIdentifierError(null);
-          }
-
-          setCurrentNamespace(e.currentTarget.value)
-        }}
-      />
-
-      <TextInput
-        disabled={!currentNamespace}
-        label={'Descrizione del namespace'}
-        placeholder={'Descrizione del namespace'}
-        value={namespaceDescription}
-        onChange={(e) => {
-          setNamespaceDescription(e.currentTarget.value)
-        }}
-      />
-
-      <Divider />
-      <Group justify={'right'}>
-        <Button variant={'subtle'} onClick={props.onCanceled}>Annulla</Button>
-        <Button
-          disabled={!currentScope || !currentPackageName || !currentNamespace || !namespaceDescription || namespaceIdentifierError !== null}
-          onClick={createPermissionScope}>
-          Salva
-        </Button>
-      </Group>
-    </Stack>
-  )
-}

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

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