groot/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(auth): add user and role management

Browse Source
This commit is contained in:
Ali BARIN
2023-07-18 21:00:10 +00:00
parent a7104c41a2
commit 0deaa03218
108 changed files with 2909 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/backend/bin/database/utils.ts
View File

@@ -3,36 +3,16 @@ import logger from '../../src/helpers/logger';
import client from './client';
import User from '../../src/models/user';
import Role from '../../src/models/role';
import Permission from '../../src/models/permission';
import '../../src/config/orm';
async function seedPermissionsIfNeeded() {
const existingPermissions = await Permission.query().limit(1).first();
if (!existingPermissions) return;
const getPermission = (subject: string, actions: string[]) => actions.map(action => ({ subject, action }));
await Permission.query().insert([
...getPermission('Connection', ['create', 'read', 'delete', 'update']),
...getPermission('Execution', ['read']),
...getPermission('Flow', ['create', 'delete', 'publish', 'read', 'update']),
...getPermission('Role', ['create', 'delete', 'read', 'update']),
...getPermission('User', ['create', 'delete', 'read', 'update']),
])
}
async function createOrFetchRole() {
const role = await Role.query().limit(1).first();
if (!role) {
const createdRole = await Role.query().insertAndFetch({
name: 'Admin',
key: 'admin',
});
return createdRole;
}
async function fetchAdminRole() {
const role = await Role
.query()
.where({
key: 'admin'
})
.limit(1)
.first();
return role;
}
@@ -43,9 +23,7 @@ export async function createUser(
) {
const UNIQUE_VIOLATION_CODE = '23505';
await seedPermissionsIfNeeded();
const role = await createOrFetchRole();
const role = await fetchAdminRole();
const userParams = {
email,
password,

2
packages/backend/package.json
View File

@@ -4,7 +4,7 @@
"license": "See LICENSE file",
"description": "The open source Zapier alternative. Build workflow automation without spending time and money.",
"scripts": {
"dev": "ts-node-dev --exit-child src/server.ts",
"dev": "ts-node-dev --watch 'src/graphql/schema.graphql' --exit-child src/server.ts",
"worker": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/worker.ts",
"build": "tsc && yarn copy-statics",
"build:watch": "nodemon --watch 'src/**/*.ts' --watch 'bin/**/*.ts' --exec yarn build --ext ts",

16
packages/backend/src/db/migrations/20230615200200_create_roles.ts
View File

@@ -16,13 +16,27 @@ export async function up(knex: Knex): Promise<void> {
.select('role')
.groupBy('role');
let shouldCreateAdminRole = true;
for (const { role } of uniqueUserRoles) {
// skip empty roles
if (!role) continue;
const lowerCaseRole = lowerCase(role);
if (lowerCaseRole === 'admin') {
shouldCreateAdminRole = false;
}
await knex('roles').insert({
name: capitalize(role),
key: lowerCase(role),
key: lowerCaseRole,
});
}
if (shouldCreateAdminRole) {
await knex('roles').insert({
name: 'Admin',
key: 'admin',
});
}
}

39
packages/backend/src/db/migrations/20230615205857_create_permissions.ts
View File

@@ -1,23 +1,46 @@
import { Knex } from 'knex';
const getPermission = (subject: string, actions: string[]) => actions.map(action => ({ subject, action }));
const getPermissionForRole = (roleId: string, subject: string, actions: string[], conditions: string[] = []) => actions
.map(action => ({
role_id: roleId,
subject,
action,
conditions,
}));
export async function up(knex: Knex): Promise<void> {
await knex.schema.createTable('permissions', (table) => {
table.uuid('id').primary().defaultTo(knex.raw('gen_random_uuid()'));
table.uuid('role_id').references('id').inTable('roles');
table.string('action').notNullable();
table.string('subject').notNullable();
table.jsonb('conditions').notNullable().defaultTo([]);
table.timestamps(true, true);
});
await knex('permissions').insert([
...getPermission('Connection', ['create', 'read', 'delete', 'update']),
...getPermission('Execution', ['read']),
...getPermission('Flow', ['create', 'delete', 'publish', 'read', 'update']),
...getPermission('Role', ['create', 'delete', 'read', 'update']),
...getPermission('User', ['create', 'delete', 'read', 'update']),
]);
const roles = await knex('roles').select(['id', 'key']) as { id: string, key: string }[];
for (const role of roles) {
// `admin` role should have no conditions unlike others by default
const isAdmin = role.key === 'admin';
const roleConditions = isAdmin ? [] : ['isCreator'];
// default permissions
await knex('permissions').insert([
...getPermissionForRole(role.id, 'Connection', ['create', 'read', 'delete', 'update'], roleConditions),
...getPermissionForRole(role.id, 'Execution', ['read'], roleConditions),
...getPermissionForRole(role.id, 'Flow', ['create', 'delete', 'publish', 'read', 'update'], roleConditions),
]);
// admin specific permission
if (isAdmin) {
await knex('permissions').insert([
...getPermissionForRole(role.id, 'User', ['create', 'read', 'delete', 'update']),
...getPermissionForRole(role.id, 'Role', ['create', 'read', 'delete', 'update']),
]);
}
}
}
export async function down(knex: Knex): Promise<void> {

25
packages/backend/src/db/migrations/20230615210510_create_roles_permissions.ts
View File

@@ -1,25 +0,0 @@
import { Knex } from 'knex';
export async function up(knex: Knex): Promise<void> {
await knex.schema.createTable('roles_permissions', (table) => {
table.uuid('id').primary().defaultTo(knex.raw('gen_random_uuid()'));
table.uuid('role_id').references('id').inTable('roles');
table.uuid('permission_id').references('id').inTable('permissions');
});
const roles = await knex('roles').select('id');
const permissions = await knex('permissions').select('id');
for (const role of roles) {
for (const permission of permissions) {
await knex('roles_permissions').insert({
role_id: role.id,
permission_id: permission.id,
});
}
}
}
export async function down(knex: Knex): Promise<void> {
return knex.schema.dropTable('roles_permissions');
}

1
packages/backend/src/db/migrations/20230702210636_create_saml_auth_providers.ts
View File

@@ -13,6 +13,7 @@ export async function up(knex: Knex): Promise<void> {
table.text('email_attribute_name').notNullable();
table.text('role_attribute_name').notNullable();
table.uuid('default_role_id').references('id').inTable('roles');
table.boolean('active').defaultTo(false);
table.timestamps(true, true);
});

7
packages/backend/src/db/migrations/20230715214424_make_user_password_nullable.ts
View File

@@ -6,9 +6,6 @@ export async function up(knex: Knex): Promise<void> {
});
}
export async function down(knex: Knex): Promise<void> {
return await knex.schema.alterTable('users', table => {
// what do we do? passwords cannot be left empty
// table.string('password').notNullable().alter();
});
export async function down(): Promise<void> {
// void
}

76
packages/backend/src/graphql/mutation-resolvers.ts
View File

@@ -1,47 +1,59 @@
import createConnection from './mutations/create-connection';
import generateAuthUrl from './mutations/generate-auth-url';
import updateConnection from './mutations/update-connection';
import resetConnection from './mutations/reset-connection';
import verifyConnection from './mutations/verify-connection';
import deleteConnection from './mutations/delete-connection';
import createFlow from './mutations/create-flow';
import createRole from './mutations/create-role.ee';
import createStep from './mutations/create-step';
import createUser from './mutations/create-user.ee';
import deleteConnection from './mutations/delete-connection';
import deleteCurrentUser from './mutations/delete-current-user.ee';
import deleteFlow from './mutations/delete-flow';
import deleteRole from './mutations/delete-role.ee';
import deleteStep from './mutations/delete-step';
import deleteUser from './mutations/delete-user.ee';
import duplicateFlow from './mutations/duplicate-flow';
import executeFlow from './mutations/execute-flow';
import forgotPassword from './mutations/forgot-password.ee';
import generateAuthUrl from './mutations/generate-auth-url';
import login from './mutations/login';
import registerUser from './mutations/register-user.ee';
import resetConnection from './mutations/reset-connection';
import resetPassword from './mutations/reset-password.ee';
import updateConnection from './mutations/update-connection';
import updateCurrentUser from './mutations/update-current-user';
import updateFlow from './mutations/update-flow';
import updateFlowStatus from './mutations/update-flow-status';
import executeFlow from './mutations/execute-flow';
import deleteFlow from './mutations/delete-flow';
import duplicateFlow from './mutations/duplicate-flow';
import createStep from './mutations/create-step';
import updateRole from './mutations/update-role.ee';
import updateStep from './mutations/update-step';
import deleteStep from './mutations/delete-step';
import createUser from './mutations/create-user.ee';
import deleteUser from './mutations/delete-user.ee';
import updateUser from './mutations/update-user';
import forgotPassword from './mutations/forgot-password.ee';
import resetPassword from './mutations/reset-password.ee';
import login from './mutations/login';
import updateUser from './mutations/update-user.ee';
import verifyConnection from './mutations/verify-connection';
const mutationResolvers = {
createConnection,
generateAuthUrl,
updateConnection,
resetConnection,
verifyConnection,
deleteConnection,
createFlow,
createRole,
createStep,
createUser,
deleteConnection,
deleteCurrentUser,
deleteFlow,
deleteRole,
deleteStep,
deleteUser,
duplicateFlow,
executeFlow,
forgotPassword,
generateAuthUrl,
login,
registerUser,
resetConnection,
resetPassword,
updateConnection,
updateCurrentUser,
updateUser,
updateFlow,
updateFlowStatus,
executeFlow,
deleteFlow,
duplicateFlow,
createStep,
updateRole,
updateStep,
deleteStep,
createUser,
deleteUser,
updateUser,
forgotPassword,
resetPassword,
login,
verifyConnection,
};
export default mutationResolvers;

34
packages/backend/src/graphql/mutations/create-role.ee.ts Normal file
View File

@@ -0,0 +1,34 @@
import kebabCase from 'lodash/kebabCase';
import Permission from '../../models/permission';
import Role from '../../models/role';
import Context from '../../types/express/context';
type Params = {
input: {
name: string;
description: string;
permissions: Permission[];
};
};
const createRole = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('create', 'Role');
const { name, description, permissions } = params.input;
const key = kebabCase(name);
const existingRole = await Role.query().findOne({ key });
if (existingRole) {
throw new Error('Role already exists!');
}
return await Role.query().insertGraph({
key,
name,
description,
permissions,
}, { relate: ['permissions'] }).returning('*');
};
export default createRole;

27
packages/backend/src/graphql/mutations/create-user.ee.ts
View File

@@ -1,15 +1,21 @@
import User from '../../models/user';
import Role from '../../models/role';
import Context from '../../types/express/context';
type Params = {
input: {
fullName: string;
email: string;
password: string;
role: {
id: string;
};
};
};
const createUser = async (_parent: unknown, params: Params) => {
const createUser = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('create', 'User');
const { fullName, email, password } = params.input;
const existingUser = await User.query().findOne({ email });
@@ -18,14 +24,23 @@ const createUser = async (_parent: unknown, params: Params) => {
throw new Error('User already exists!');
}
const role = await Role.query().findOne({ key: 'user' });
const user = await User.query().insert({
const userPayload: Partial<User> = {
fullName,
email,
password,
roleId: role.id,
});
};
try {
context.currentUser.can('update', 'Role');
userPayload.roleId = params.input.role.id;
} catch {
// void
const role = await Role.query().findOne({ key: 'user' });
userPayload.roleId = role.id;
}
const user = await User.query().insert(userPayload);
return user;
};

22
packages/backend/src/graphql/mutations/delete-current-user.ee.ts Normal file
View File

@@ -0,0 +1,22 @@
import { Duration } from 'luxon';
import Context from '../../types/express/context';
import deleteUserQueue from '../../queues/delete-user.ee';
const deleteCurrentUser = async (_parent: unknown, params: never, context: Context) => {
const id = context.currentUser.id;
await context.currentUser.$query().delete();
const jobName = `Delete user - ${id}`;
const jobPayload = { id };
const millisecondsFor30Days = Duration.fromObject({ days: 30 }).toMillis();
const jobOptions = {
delay: millisecondsFor30Days
};
await deleteUserQueue.add(jobName, jobPayload, jobOptions);
return true;
};
export default deleteCurrentUser;

41
packages/backend/src/graphql/mutations/delete-role.ee.ts Normal file
View File

@@ -0,0 +1,41 @@
import Role from '../../models/role';
import Context from '../../types/express/context';
type Params = {
input: {
id: string;
};
};
const deleteRole = async (
_parent: unknown,
params: Params,
context: Context
) => {
context.currentUser.can('delete', 'Role');
const role = await Role
.query()
.findById(params.input.id)
.throwIfNotFound();
const count = await role
.$relatedQuery('users')
.resultSize();
if (count > 0) {
throw new Error('All users must be migrated away from the role!');
}
if (role.isAdmin) {
throw new Error('Admin role cannot be deleted!');
}
// delete permissions first
await role.$relatedQuery('permissions').delete();
await role.$query().delete();
return true;
};
export default deleteRole;

23
packages/backend/src/graphql/mutations/delete-user.ee.ts
View File

@@ -1,11 +1,24 @@
import Context from '../../types/express/context';
import deleteUserQueue from '../../queues/delete-user.ee';
import { Duration } from 'luxon';
import Context from '../../types/express/context';
import User from '../../models/user';
import deleteUserQueue from '../../queues/delete-user.ee';
const deleteUser = async (_parent: unknown, params: never, context: Context) => {
const id = context.currentUser.id;
type Params = {
input: {
id: string;
};
};
await context.currentUser.$query().delete();
const deleteUser = async (
_parent: unknown,
params: Params,
context: Context
) => {
context.currentUser.can('delete', 'User');
const id = params.input.id;
await User.query().deleteById(id);
const jobName = `Delete user - ${id}`;
const jobPayload = { id };

33
packages/backend/src/graphql/mutations/register-user.ee.ts Normal file
View File

@@ -0,0 +1,33 @@
import User from '../../models/user';
import Role from '../../models/role';
type Params = {
input: {
fullName: string;
email: string;
password: string;
};
};
const registerUser = async (_parent: unknown, params: Params) => {
const { fullName, email, password } = params.input;
const existingUser = await User.query().findOne({ email });
if (existingUser) {
throw new Error('User already exists!');
}
const role = await Role.query().findOne({ key: 'user' });
const user = await User.query().insert({
fullName,
email,
password,
roleId: role.id,
});
return user;
};
export default registerUser;

4
packages/backend/src/graphql/mutations/update-user.ts → packages/backend/src/graphql/mutations/update-current-user.ts
View File

@@ -8,7 +8,7 @@ type Params = {
};
};
const updateUser = async (
const updateCurrentUser = async (
_parent: unknown,
params: Params,
context: Context
@@ -22,4 +22,4 @@ const updateUser = async (
return user;
};
export default updateUser;
export default updateCurrentUser;

91
packages/backend/src/graphql/mutations/update-role.ee.ts Normal file
View File

@@ -0,0 +1,91 @@
import Context from '../../types/express/context';
import Role from '../../models/role';
import Permission from '../../models/permission';
import permissionCatalog from '../../helpers/permission-catalog.ee';
type Params = {
input: {
id: string;
name: string;
description: string;
permissions: Permission[];
};
};
const updateRole = async (
_parent: unknown,
params: Params,
context: Context
) => {
context.currentUser.can('update', 'Role');
const {
id,
name,
description,
permissions,
} = params.input;
const role = await Role
.query()
.findById(id)
.throwIfNotFound();
try {
const updatedRole = await Role.transaction(async (trx) => {
await role.$relatedQuery('permissions', trx).delete();
if (permissions?.length) {
const sanitizedPermissions = permissions
.filter((permission) => {
const {
action,
subject,
conditions,
} = permission;
const relevantAction = permissionCatalog.actions.find(actionCatalogItem => actionCatalogItem.key === action);
const validSubject = relevantAction.subjects.includes(subject);
const validConditions = conditions.every(condition => {
return !!permissionCatalog
.conditions
.find((conditionCatalogItem) => conditionCatalogItem.key === condition);
})
return validSubject && validConditions;
})
.map((permission) => ({
...permission,
roleId: role.id,
}));
await Permission.query().insert(sanitizedPermissions);
}
await role
.$query(trx)
.patch(
{
name,
description,
}
);
return await Role
.query(trx)
.leftJoinRelated({
permissions: true
})
.withGraphFetched({
permissions: true
})
.findById(id);
});
return updatedRole;
} catch (err) {
throw new Error('The role could not be updated!');
}
};
export default updateRole;

44
packages/backend/src/graphql/mutations/update-user.ee.ts Normal file
View File

@@ -0,0 +1,44 @@
import Context from '../../types/express/context';
import User from '../../models/user';
type Params = {
input: {
id: string;
email: string;
fullName: string;
role: {
id: string;
};
};
};
const updateUser = async (
_parent: unknown,
params: Params,
context: Context
) => {
context.currentUser.can('update', 'User');
const userPayload: Partial<User> = {
email: params.input.email,
fullName: params.input.fullName,
};
try {
context.currentUser.can('update', 'Role');
userPayload.roleId = params.input.role.id;
} catch {
// void
}
const user = await User.query()
.patchAndFetchById(
params.input.id,
userPayload,
);
return user;
};
export default updateUser;

10
packages/backend/src/graphql/queries/get-app.ts
View File

@@ -1,4 +1,5 @@
import App from '../../models/app';
import Connection from '../../models/connection';
import Context from '../../types/express/context';
type Params = {
@@ -6,13 +7,16 @@ type Params = {
};
const getApp = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('read', 'Connection');
const conditions = context.currentUser.can('read', 'Connection');
const userConnections = context.currentUser.$relatedQuery('connections');
const allConnections = Connection.query();
const connectionBaseQuery = conditions.isCreator ? userConnections : allConnections;
const app = await App.findOneByKey(params.key);
if (context.currentUser) {
const connections = await context.currentUser
.$relatedQuery('connections')
const connections = await connectionBaseQuery
.select('connections.*')
.fullOuterJoinRelated('steps')
.where({

18
packages/backend/src/graphql/queries/get-connected-apps.ts
View File

@@ -1,6 +1,8 @@
import { IConnection } from '@automatisch/types';
import App from '../../models/app';
import Context from '../../types/express/context';
import Flow from '../../models/flow';
import Connection from '../../models/connection';
type Params = {
name: string;
@@ -11,19 +13,25 @@ const getConnectedApps = async (
params: Params,
context: Context
) => {
context.currentUser.can('read', 'Connection');
const conditions = context.currentUser.can('read', 'Connection');
const userConnections = context.currentUser.$relatedQuery('connections');
const allConnections = Connection.query();
const connectionBaseQuery = conditions.isCreator ? userConnections : allConnections;
const userFlows = context.currentUser.$relatedQuery('flows');
const allFlows = Flow.query();
const flowBaseQuery = conditions.isCreator ? userFlows : allFlows;
let apps = await App.findAll(params.name);
const connections = await context.currentUser
.$relatedQuery('connections')
const connections = await connectionBaseQuery
.select('connections.key')
.where({ draft: false })
.count('connections.id as count')
.groupBy('connections.key');
const flows = await context.currentUser
.$relatedQuery('flows')
const flows = await flowBaseQuery
.withGraphJoined('steps')
.orderBy('created_at', 'desc');

9
packages/backend/src/graphql/queries/get-dynamic-data.ts
View File

@@ -1,6 +1,7 @@
import { IDynamicData, IJSONObject } from '@automatisch/types';
import Context from '../../types/express/context';
import App from '../../models/app';
import Step from '../../models/step';
import ExecutionStep from '../../models/execution-step';
import globalVariable from '../../helpers/global-variable';
import computeParameters from '../../helpers/compute-parameters';
@@ -16,10 +17,12 @@ const getDynamicData = async (
params: Params,
context: Context
) => {
context.currentUser.can('update', 'Flow');
const conditions = context.currentUser.can('update', 'Flow');
const userSteps = context.currentUser.$relatedQuery('steps');
const allSteps = Step.query();
const stepBaseQuery = conditions.isCreator ? userSteps : allSteps;
const step = await context.currentUser
.$relatedQuery('steps')
const step = await stepBaseQuery
.withGraphFetched({
connection: true,
flow: true,

9
packages/backend/src/graphql/queries/get-dynamic-fields.ts
View File

@@ -1,6 +1,7 @@
import { IDynamicFields, IJSONObject } from '@automatisch/types';
import Context from '../../types/express/context';
import App from '../../models/app';
import Step from '../../models/step';
import globalVariable from '../../helpers/global-variable';
type Params = {
@@ -14,10 +15,12 @@ const getDynamicFields = async (
params: Params,
context: Context
) => {
context.currentUser.can('update', 'Flow');
const conditions = context.currentUser.can('update', 'Flow');
const userSteps = context.currentUser.$relatedQuery('steps');
const allSteps = Step.query();
const stepBaseQuery = conditions.isCreator ? userSteps : allSteps;
const step = await context.currentUser
.$relatedQuery('steps')
const step = await stepBaseQuery
.withGraphFetched({
connection: true,
flow: true,

9
packages/backend/src/graphql/queries/get-execution-steps.ts
View File

@@ -1,5 +1,6 @@
import Context from '../../types/express/context';
import paginate from '../../helpers/pagination';
import Execution from '../../models/execution';
type Params = {
executionId: string;
@@ -12,10 +13,12 @@ const getExecutionSteps = async (
params: Params,
context: Context
) => {
context.currentUser.can('read', 'Execution');
const conditions = context.currentUser.can('read', 'Execution');
const userExecutions = context.currentUser.$relatedQuery('executions');
const allExecutions = Execution.query();
const executionBaseQuery = conditions.isCreator ? userExecutions : allExecutions;
const execution = await context.currentUser
.$relatedQuery('executions')
const execution = await executionBaseQuery
.withSoftDeleted()
.findById(params.executionId)
.throwIfNotFound();

9
packages/backend/src/graphql/queries/get-execution.ts
View File

@@ -1,4 +1,5 @@
import Context from '../../types/express/context';
import Execution from '../../models/execution';
type Params = {
executionId: string;
@@ -9,10 +10,12 @@ const getExecution = async (
params: Params,
context: Context
) => {
context.currentUser.can('read', 'Execution');
const conditions = context.currentUser.can('read', 'Execution');
const userExecutions = context.currentUser.$relatedQuery('executions');
const allExecutions = Execution.query();
const executionBaseQuery = conditions.isCreator ? userExecutions : allExecutions;
const execution = await context.currentUser
.$relatedQuery('executions')
const execution = await executionBaseQuery
.withGraphFetched({
flow: {
steps: true,

10
packages/backend/src/graphql/queries/get-executions.ts
View File

@@ -1,5 +1,6 @@
import { raw } from 'objection';
import Context from '../../types/express/context';
import Execution from '../../models/execution';
import paginate from '../../helpers/pagination';
type Params = {
@@ -12,7 +13,11 @@ const getExecutions = async (
params: Params,
context: Context
) => {
context.currentUser.can('read', 'Execution');
const conditions = context.currentUser.can('read', 'Execution');
const userExecutions = context.currentUser.$relatedQuery('executions');
const allExecutions = Execution.query();
const executionBaseQuery = conditions.isCreator ? userExecutions : allExecutions;
const selectStatusStatement = `
case
@@ -23,8 +28,7 @@ const getExecutions = async (
as status
`;
const executions = context.currentUser
.$relatedQuery('executions')
const executions = executionBaseQuery
.joinRelated('executionSteps as execution_steps')
.select('executions.*', raw(selectStatusStatement))
.withSoftDeleted()

9
packages/backend/src/graphql/queries/get-flow.ts
View File

@@ -1,14 +1,17 @@
import Context from '../../types/express/context';
import Flow from '../../models/flow';
type Params = {
id: string;
};
const getFlow = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('read', 'Flow');
const conditions = context.currentUser.can('read', 'Flow');
const userFlows = context.currentUser.$relatedQuery('flows');
const allFlows = Flow.query();
const baseQuery = conditions.isCreator ? userFlows : allFlows;
const flow = await context.currentUser
.$relatedQuery('flows')
const flow = await baseQuery
.withGraphJoined('[steps.[connection]]')
.orderBy('steps.position', 'asc')
.findOne({ 'flows.id': params.id })

9
packages/backend/src/graphql/queries/get-flows.ts
View File

@@ -1,3 +1,4 @@
import Flow from '../../models/flow';
import Context from '../../types/express/context';
import paginate from '../../helpers/pagination';
@@ -10,10 +11,12 @@ type Params = {
};
const getFlows = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('read', 'Flow');
const conditions = context.currentUser.can('read', 'Flow');
const userFlows = context.currentUser.$relatedQuery('flows');
const allFlows = Flow.query();
const baseQuery = conditions.isCreator ? userFlows : allFlows;
const flowsQuery = context.currentUser
.$relatedQuery('flows')
const flowsQuery = baseQuery
.joinRelated({
steps: true,
})

7
packages/backend/src/graphql/queries/get-permission-catalog.ee.ts Normal file
View File

@@ -0,0 +1,7 @@
import permissionCatalog from '../../helpers/permission-catalog.ee';
const getPermissionCatalog = async () => {
return permissionCatalog;
};
export default getPermissionCatalog;

23
packages/backend/src/graphql/queries/get-role.ee.ts Normal file
View File

@@ -0,0 +1,23 @@
import Context from '../../types/express/context';
import Role from '../../models/role';
type Params = {
id: string
};
const getRole = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('read', 'Role');
return await Role
.query()
.leftJoinRelated({
permissions: true
})
.withGraphFetched({
permissions: true
})
.findById(params.id)
.throwIfNotFound();
};
export default getRole;

10
packages/backend/src/graphql/queries/get-roles.ee.ts Normal file
View File

@@ -0,0 +1,10 @@
import Context from '../../types/express/context';
import Role from '../../models/role';
const getRoles = async (_parent: unknown, params: unknown, context: Context) => {
context.currentUser.can('read', 'Role');
return await Role.query().orderBy('name');
};
export default getRoles;

2
packages/backend/src/graphql/queries/get-saml-auth-providers.ee.ts
View File

@@ -1,7 +1,7 @@
import SamlAuthProvider from '../../models/saml-auth-provider.ee';
const getSamlAuthProviders = async () => {
const providers = await SamlAuthProvider.query();
const providers = await SamlAuthProvider.query().where({ active: true });
return providers;
};

16
packages/backend/src/graphql/queries/get-step-with-test-executions.ts
View File

@@ -1,6 +1,7 @@
import Context from '../../types/express/context';
import ExecutionStep from '../../models/execution-step';
import { ref } from 'objection';
import ExecutionStep from '../../models/execution-step';
import Step from '../../models/step';
import Context from '../../types/express/context';
type Params = {
stepId: string;
@@ -11,15 +12,16 @@ const getStepWithTestExecutions = async (
params: Params,
context: Context
) => {
context.currentUser.can('update', 'Flow');
const conditions = context.currentUser.can('update', 'Flow');
const userSteps = context.currentUser.$relatedQuery('steps');
const allSteps = Step.query();
const stepBaseQuery = conditions.isCreator ? userSteps : allSteps;
const step = await context.currentUser
.$relatedQuery('steps')
const step = await stepBaseQuery
.findOne({ 'steps.id': params.stepId })
.throwIfNotFound();
const previousStepsWithCurrentStep = await context.currentUser
.$relatedQuery('steps')
const previousStepsWithCurrentStep = await stepBaseQuery
.withGraphJoined('executionSteps')
.where('flow_id', '=', step.flowId)
.andWhere('position', '<', step.position)

23
packages/backend/src/graphql/queries/get-user.ts Normal file
View File

@@ -0,0 +1,23 @@
import Context from '../../types/express/context';
import User from '../../models/user';
type Params = {
id: string
};
const getUser = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('read', 'User');
return await User
.query()
.leftJoinRelated({
role: true
})
.withGraphFetched({
role: true
})
.findById(params.id)
.throwIfNotFound();
};
export default getUser;

26
packages/backend/src/graphql/queries/get-users.ts Normal file
View File

@@ -0,0 +1,26 @@
import Context from '../../types/express/context';
import paginate from '../../helpers/pagination';
import User from '../../models/user';
type Params = {
limit: number;
offset: number;
};
const getUsers = async (_parent: unknown, params: Params, context: Context) => {
context.currentUser.can('read', 'User');
const usersQuery = User
.query()
.leftJoinRelated({
role: true
})
.withGraphFetched({
role: true
})
.orderBy('full_name', 'desc');
return paginate(usersQuery, params.limit, params.offset);
};
export default getUsers;

9
packages/backend/src/graphql/queries/test-connection.ts
View File

@@ -1,5 +1,6 @@
import Context from '../../types/express/context';
import App from '../../models/app';
import Connection from '../../models/connection';
import globalVariable from '../../helpers/global-variable';
type Params = {
@@ -12,10 +13,12 @@ const testConnection = async (
params: Params,
context: Context
) => {
context.currentUser.can('update', 'Connection');
const conditions = context.currentUser.can('update', 'Connection');
const userConnections = context.currentUser.$relatedQuery('connections');
const allConnections = Connection.query();
const connectionBaseQuery = conditions.isCreator ? userConnections : allConnections;
let connection = await context.currentUser
.$relatedQuery('connections')
let connection = await connectionBaseQuery
.findOne({
id: params.id,
})

68
packages/backend/src/graphql/query-resolvers.ts
View File

@@ -1,49 +1,59 @@
import getApps from './queries/get-apps';
import getApp from './queries/get-app';
import getApps from './queries/get-apps';
import getAutomatischInfo from './queries/get-automatisch-info';
import getBillingAndUsage from './queries/get-billing-and-usage.ee';
import getConnectedApps from './queries/get-connected-apps';
import testConnection from './queries/test-connection';
import getFlow from './queries/get-flow';
import getFlows from './queries/get-flows';
import getStepWithTestExecutions from './queries/get-step-with-test-executions';
import getExecution from './queries/get-execution';
import getExecutions from './queries/get-executions';
import getExecutionSteps from './queries/get-execution-steps';
import getCurrentUser from './queries/get-current-user';
import getDynamicData from './queries/get-dynamic-data';
import getDynamicFields from './queries/get-dynamic-fields';
import getCurrentUser from './queries/get-current-user';
import getPaymentPlans from './queries/get-payment-plans.ee';
import getPaddleInfo from './queries/get-paddle-info.ee';
import getBillingAndUsage from './queries/get-billing-and-usage.ee';
import getExecution from './queries/get-execution';
import getExecutionSteps from './queries/get-execution-steps';
import getExecutions from './queries/get-executions';
import getFlow from './queries/get-flow';
import getFlows from './queries/get-flows';
import getUser from './queries/get-user';
import getUsers from './queries/get-users';
import getInvoices from './queries/get-invoices.ee';
import getAutomatischInfo from './queries/get-automatisch-info';
import getTrialStatus from './queries/get-trial-status.ee';
import getSubscriptionStatus from './queries/get-subscription-status.ee';
import getPaddleInfo from './queries/get-paddle-info.ee';
import getPaymentPlans from './queries/get-payment-plans.ee';
import getPermissionCatalog from './queries/get-permission-catalog.ee';
import getRole from './queries/get-role.ee';
import getRoles from './queries/get-roles.ee';
import getSamlAuthProviders from './queries/get-saml-auth-providers.ee';
import getStepWithTestExecutions from './queries/get-step-with-test-executions';
import getSubscriptionStatus from './queries/get-subscription-status.ee';
import getTrialStatus from './queries/get-trial-status.ee';
import healthcheck from './queries/healthcheck';
import testConnection from './queries/test-connection';
const queryResolvers = {
getApps,
getApp,
getApps,
getAutomatischInfo,
getBillingAndUsage,
getConnectedApps,
testConnection,
getFlow,
getFlows,
getStepWithTestExecutions,
getCurrentUser,
getDynamicData,
getDynamicFields,
getExecution,
getExecutions,
getExecutionSteps,
getDynamicData,
getDynamicFields,
getCurrentUser,
getPaymentPlans,
getPaddleInfo,
getBillingAndUsage,
getFlow,
getFlows,
getInvoices,
getAutomatischInfo,
getTrialStatus,
getSubscriptionStatus,
getPaddleInfo,
getPaymentPlans,
getPermissionCatalog,
getRole,
getRoles,
getSamlAuthProviders,
getStepWithTestExecutions,
getSubscriptionStatus,
getTrialStatus,
getUser,
getUsers,
healthcheck,
testConnection,
};
export default queryResolvers;

139
packages/backend/src/graphql/schema.graphql
View File

@@ -42,31 +42,45 @@ type Query {
getTrialStatus: GetTrialStatus
getSubscriptionStatus: GetSubscriptionStatus
getSamlAuthProviders: [GetSamlAuthProviders]
getUsers(
limit: Int!
offset: Int!
): UserConnection
getUser(id: String!): User
getRoles: [Role]
getRole(id: String!): Role
getPermissionCatalog: PermissionCatalog
healthcheck: AppHealth
}
type Mutation {
createConnection(input: CreateConnectionInput): Connection
generateAuthUrl(input: GenerateAuthUrlInput): AuthLink
updateConnection(input: UpdateConnectionInput): Connection
resetConnection(input: ResetConnectionInput): Connection
verifyConnection(input: VerifyConnectionInput): Connection
deleteConnection(input: DeleteConnectionInput): Boolean
createFlow(input: CreateFlowInput): Flow
createRole(input: CreateRoleInput): Role
createStep(input: CreateStepInput): Step
createUser(input: CreateUserInput): User
deleteConnection(input: DeleteConnectionInput): Boolean
deleteCurrentUser: Boolean
deleteFlow(input: DeleteFlowInput): Boolean
deleteRole(input: DeleteRoleInput): Boolean
deleteStep(input: DeleteStepInput): Step
deleteUser(input: DeleteUserInput): Boolean
duplicateFlow(input: DuplicateFlowInput): Flow
executeFlow(input: ExecuteFlowInput): executeFlowType
forgotPassword(input: ForgotPasswordInput): Boolean
generateAuthUrl(input: GenerateAuthUrlInput): AuthLink
login(input: LoginInput): Auth
registerUser(input: RegisterUserInput): User
resetConnection(input: ResetConnectionInput): Connection
resetPassword(input: ResetPasswordInput): Boolean
updateConnection(input: UpdateConnectionInput): Connection
updateCurrentUser(input: UpdateCurrentUserInput): User
updateFlow(input: UpdateFlowInput): Flow
updateFlowStatus(input: UpdateFlowStatusInput): Flow
executeFlow(input: ExecuteFlowInput): executeFlowType
deleteFlow(input: DeleteFlowInput): Boolean
duplicateFlow(input: DuplicateFlowInput): Flow
createStep(input: CreateStepInput): Step
updateRole(input: UpdateRoleInput): Role
updateStep(input: UpdateStepInput): Step
deleteStep(input: DeleteStepInput): Step
createUser(input: CreateUserInput): User
deleteUser: Boolean
updateUser(input: UpdateUserInput): User
forgotPassword(input: ForgotPasswordInput): Boolean
resetPassword(input: ResetPasswordInput): Boolean
login(input: LoginInput): Auth
verifyConnection(input: VerifyConnectionInput): Connection
}
"""
@@ -278,6 +292,15 @@ type Execution {
flow: Flow
}
type UserConnection {
edges: [UserEdge]
pageInfo: PageInfo
}
type UserEdge {
node: User
}
input CreateConnectionInput {
key: String!
formattedData: JSONObject!
@@ -361,9 +384,31 @@ input CreateUserInput {
fullName: String!
email: String!
password: String!
role: UserRoleInput!
}
input UserRoleInput {
id: String
}
input UpdateUserInput {
id: String!
fullName: String
email: String
role: UserRoleInput
}
input DeleteUserInput {
id: String!
}
input RegisterUserInput {
fullName: String!
email: String!
password: String!
}
input UpdateCurrentUserInput {
email: String
password: String
fullName: String
@@ -383,6 +428,29 @@ input LoginInput {
password: String!
}
input PermissionInput {
action: String!
subject: String!
conditions: [String]
}
input CreateRoleInput {
name: String!
description: String
permissions: [PermissionInput]
}
input UpdateRoleInput {
id: String!
name: String!
description: String
permissions: [PermissionInput]
}
input DeleteRoleInput {
id: String!
}
"""
The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
"""
@@ -454,11 +522,21 @@ type User {
id: String
fullName: String
email: String
role: String
role: Role
permissions: [Permission]
createdAt: String
updatedAt: String
}
type Role {
id: String
name: String
key: String
description: String
isAdmin: Boolean
permissions: [Permission]
}
type PageInfo {
currentPage: Int!
totalPages: Int!
@@ -561,6 +639,35 @@ type GetSamlAuthProviders {
issuer: String
}
type Permission {
id: String
action: String
subject: String
conditions: [String]
}
type PermissionCatalog {
actions: [Action]
subjects: [Subject]
conditions: [Condition]
}
type Action {
label: String
key: String
subjects: [String]
}
type Condition {
key: String
label: String
}
type Subject {
label: String
key: String
}
schema {
query: Query
mutation: Mutation

8
packages/backend/src/helpers/authentication.ts
View File

@@ -15,10 +15,12 @@ const isAuthenticated = rule()(async (_parent, _args, req) => {
req.currentUser = await User
.query()
.findById(userId)
.joinRelated({
.leftJoinRelated({
role: true,
permissions: true,
})
.withGraphFetched({
role: true,
permissions: true,
});
@@ -38,9 +40,9 @@ const authentication = shield(
},
Mutation: {
'*': isAuthenticated,
login: allow,
createUser: allow,
registerUser: allow,
forgotPassword: allow,
login: allow,
resetPassword: allow,
},
},

4
packages/backend/src/helpers/find-or-create-user-by-saml-identity.ee.ts
View File

@@ -22,7 +22,7 @@ const findOrCreateUserBySamlIdentity = async (userIdentity: Record<string, unkno
return user;
}
const createdUser = await User.query().insertGraphAndFetch({
const createdUser = await User.query().insertGraph({
fullName: [
mappedUser.name,
mappedUser.surname
@@ -40,7 +40,7 @@ const findOrCreateUserBySamlIdentity = async (userIdentity: Record<string, unkno
]
}, {
relate: ['identities']
});
}).returning('*');
return createdUser;
};

72
packages/backend/src/helpers/permission-catalog.ee.ts Normal file
View File

@@ -0,0 +1,72 @@
const Connection = {
label: 'Connection',
key: 'Connection',
};
const Flow = {
label: 'Flow',
key: 'Flow',
};
const Execution = {
label: 'Execution',
key: 'Execution',
};
const permissionCatalog = {
conditions: [
{
key: 'isCreator',
label: 'Is creator'
}
],
actions: [
{
label: 'Create',
key: 'create',
subjects: [
Connection.key,
Flow.key,
]
},
{
label: 'Read',
key: 'read',
subjects: [
Connection.key,
Execution.key,
Flow.key,
]
},
{
label: 'Update',
key: 'update',
subjects: [
Connection.key,
Flow.key,
]
},
{
label: 'Delete',
key: 'delete',
subjects: [
Connection.key,
Flow.key,
]
},
{
label: 'Publish',
key: 'publish',
subjects: [
Flow.key,
]
}
],
subjects: [
Connection,
Flow,
Execution
]
};
export default permissionCatalog;

20
packages/backend/src/helpers/user-ability.ts Normal file
View File

@@ -0,0 +1,20 @@
import { PureAbility, fieldPatternMatcher, mongoQueryMatcher } from '@casl/ability';
import type User from '../models/user'
// Must be kept in sync with `packages/web/src/helpers/userAbility.ts`!
export default function userAbility(user: Partial<User>) {
const permissions = user?.permissions;
const role = user?.role;
// We're not using mongo, but our fields, conditions match
const options = {
conditionsMatcher: mongoQueryMatcher,
fieldMatcher: fieldPatternMatcher
};
if (!role || !permissions) {
return new PureAbility([], options);
}
return new PureAbility<[string, string], string[]>(permissions, options);
}

6
packages/backend/src/models/permission.ts
View File

@@ -2,19 +2,23 @@ import Base from './base';
class Permission extends Base {
id: string;
roleId: string;
action: string;
subject: string;
conditions: string[];
static tableName = 'permissions';
static jsonSchema = {
type: 'object',
required: ['action', 'subject'],
required: ['roleId', 'action', 'subject'],
properties: {
id: { type: 'string', format: 'uuid' },
roleId: { type: 'string', format: 'uuid' },
action: { type: 'string', minLength: 1 },
subject: { type: 'string', minLength: 1 },
conditions: { type: 'array', items: { type: 'string' } },
createdAt: { type: 'string' },
updatedAt: { type: 'string' },
},

17
packages/backend/src/models/query-builder.ts
View File

@@ -1,6 +1,7 @@
import {
Model,
Page,
ModelClass,
PartialModelObject,
ForClassMethod,
AnyQueryBuilder,
@@ -8,6 +9,10 @@ import {
const DELETED_COLUMN_NAME = 'deleted_at';
const supportsSoftDeletion = (modelClass: ModelClass<any>) => {
return modelClass.jsonSchema.properties.deletedAt;
}
const buildQueryBuidlerForClass = (): ForClassMethod => {
return (modelClass) => {
const qb: AnyQueryBuilder = Model.QueryBuilder.forClass.call(
@@ -15,7 +20,7 @@ const buildQueryBuidlerForClass = (): ForClassMethod => {
modelClass
);
qb.onBuild((builder) => {
if (!builder.context().withSoftDeleted && qb.modelClass().jsonSchema.properties.deletedAt) {
if (!builder.context().withSoftDeleted && supportsSoftDeletion(qb.modelClass())) {
builder.whereNull(
`${qb.modelClass().tableName}.${DELETED_COLUMN_NAME}`
);
@@ -38,9 +43,13 @@ class ExtendedQueryBuilder<M extends Model, R = M[]> extends Model.QueryBuilder<
static forClass: ForClassMethod = buildQueryBuidlerForClass();
delete() {
return this.patch({
[DELETED_COLUMN_NAME]: new Date().toISOString(),
} as unknown as PartialModelObject<M>);
if (supportsSoftDeletion(this.modelClass())) {
return this.patch({
[DELETED_COLUMN_NAME]: new Date().toISOString(),
} as unknown as PartialModelObject<M>);
}
return super.delete();
}
hardDelete() {

20
packages/backend/src/models/role.ts
View File

@@ -1,4 +1,5 @@
import Base from './base';
import Permission from './permission';
import User from './user';
class Role extends Base {
@@ -7,6 +8,7 @@ class Role extends Base {
key: string;
description: string;
users?: User[];
permissions?: Permission[];
static tableName = 'roles';
@@ -18,12 +20,16 @@ class Role extends Base {
id: { type: 'string', format: 'uuid' },
name: { type: 'string', minLength: 1 },
key: { type: 'string', minLength: 1 },
description: { type: ['string', 'null'], minLength: 1, maxLength: 255 },
description: { type: ['string', 'null'], maxLength: 255 },
createdAt: { type: 'string' },
updatedAt: { type: 'string' },
},
};
static get virtualAttributes() {
return ['isAdmin'];
}
static relationMappings = () => ({
users: {
relation: Base.HasManyRelation,
@@ -33,7 +39,19 @@ class Role extends Base {
to: 'users.role_id',
},
},
permissions: {
relation: Base.HasManyRelation,
modelClass: Permission,
join: {
from: 'roles.id',
to: 'permissions.role_id',
},
},
});
get isAdmin() {
return this.key === 'admin';
}
}
export default Role;

4
packages/backend/src/models/saml-auth-provider.ee.ts
View File

@@ -16,6 +16,7 @@ class SamlAuthProvider extends Base {
emailAttributeName: string;
roleAttributeName: string;
defaultRoleId: string;
active: boolean;
static tableName = 'saml_auth_providers';
@@ -45,7 +46,8 @@ class SamlAuthProvider extends Base {
surnameAttributeName: { type: 'string', minLength: 1 },
emailAttributeName: { type: 'string', minLength: 1 },
roleAttributeName: { type: 'string', minLength: 1 },
defaultRoleId: { type: 'string', format: 'uuid' }
defaultRoleId: { type: 'string', format: 'uuid' },
active: { type: 'boolean' },
},
};

65
packages/backend/src/models/user.ts
View File

@@ -1,22 +1,25 @@
import crypto from 'node:crypto';
import { QueryContext, ModelOptions } from 'objection';
import bcrypt from 'bcrypt';
import { DateTime } from 'luxon';
import { Ability } from '@casl/ability';
import type { Subject } from '@casl/ability';
import crypto from 'node:crypto';
import {
ModelOptions,
QueryContext
} from 'objection';
import appConfig from '../config/app';
import checkLicense from '../helpers/check-license.ee';
import userAbility from '../helpers/user-ability';
import Base from './base';
import ExtendedQueryBuilder from './query-builder';
import Connection from './connection';
import Flow from './flow';
import Step from './step';
import Role from './role';
import Permission from './permission';
import Execution from './execution';
import Flow from './flow';
import Identity from './identity.ee';
import UsageData from './usage-data.ee';
import Permission from './permission';
import ExtendedQueryBuilder from './query-builder';
import Role from './role';
import Step from './step';
import Subscription from './subscription.ee';
import UsageData from './usage-data.ee';
class User extends Base {
id!: string;
@@ -148,15 +151,11 @@ class User extends Base {
},
},
permissions: {
relation: Base.ManyToManyRelation,
relation: Base.HasManyRelation,
modelClass: Permission,
join: {
from: 'users.role_id',
through: {
from: 'roles_permissions.role_id',
to: 'roles_permissions.permission_id',
},
to: 'permissions.id',
to: 'permissions.role_id',
},
},
identities: {
@@ -292,23 +291,43 @@ class User extends Base {
}
}
get ability() {
if (!this.permissions) {
throw new Error('User.permissions must be fetched!');
async $afterFind(): Promise<any> {
const hasValidLicense = await checkLicense();
if (hasValidLicense) return this;
if (Array.isArray(this.permissions)) {
this.permissions = this.permissions.filter((permission) => {
const isRolePermission = permission.subject === 'Role';
return !isRolePermission;
});
}
return new Ability(this.permissions);
return this;
}
can(action: string, subject: Subject) {
get ability(): ReturnType<typeof userAbility> {
return userAbility(this);
}
can(action: string, subject: string) {
const can = this.ability.can(action, subject);
if (!can) throw new Error('Not authorized!');
return can;
const relevantRule = this.ability.relevantRuleFor(action, subject);
const conditions = relevantRule?.conditions as string[] || [];
const conditionMap: Record<string, true> = Object
.fromEntries(
conditions.map((condition) => [condition, true])
)
return conditionMap;
}
cannot(action: string, subject: Subject) {
cannot(action: string, subject: string) {
const cannot = this.ability.cannot(action, subject);
if (cannot) throw new Error('Not authorized!');

24
packages/types/index.d.ts vendored
View File

@@ -95,6 +95,30 @@ export interface IUser {
connections: IConnection[];
flows: IFlow[];
steps: IStep[];
role: IRole;
permissions: IPermission[];
}
export interface IRole {
id: string;
key: string;
name: string;
description: string;
isAdmin: boolean;
permissions: IPermission[];
}
export interface IPermission {
id: string;
action: string;
subject: string;
conditions: string[];
}
export interface IPermissionCatalog {
actions: { label: string; key: string; subjects: string[] }[];
subjects: { label: string; key: string; }[];
conditions: { label: string; key: string; }[];
}
export interface IFieldDropdown {

4
packages/web/package.json
View File

@@ -6,6 +6,8 @@
"dependencies": {
"@apollo/client": "^3.6.9",
"@automatisch/types": "^0.8.0",
"@casl/ability": "^6.5.0",
"@casl/react": "^3.1.0",
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@hookform/resolvers": "^2.8.8",
@@ -31,7 +33,7 @@
"notistack": "^2.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.43.9",
"react-hook-form": "^7.45.2",
"react-intl": "^5.20.12",
"react-json-tree": "^0.16.2",
"react-router-dom": "^6.0.2",

87
packages/web/src/adminSettingsRoutes.tsx Normal file
View File

@@ -0,0 +1,87 @@
import { Route, Navigate } from 'react-router-dom';
import AdminSettingsLayout from 'components/AdminSettingsLayout';
import Users from 'pages/Users';
import EditUser from 'pages/EditUser';
import CreateUser from 'pages/CreateUser';
import Roles from 'pages/Roles/index.ee';
import CreateRole from 'pages/CreateRole/index.ee';
import EditRole from 'pages/EditRole/index.ee';
import * as URLS from 'config/urls';
import Can from 'components/Can';
// TODO: consider introducing redirections to `/` as fallback
export default (
<>
<Route
path={URLS.USERS}
element={
<Can I="read" a="User">
<AdminSettingsLayout>
<Users />
</AdminSettingsLayout>
</Can>
}
/>
<Route
path={URLS.CREATE_USER}
element={
<Can I="create" a="User">
<AdminSettingsLayout>
<CreateUser />
</AdminSettingsLayout>
</Can>
}
/>
<Route
path={URLS.USER_PATTERN}
element={
<Can I="update" a="User">
<AdminSettingsLayout>
<EditUser />
</AdminSettingsLayout>
</Can>
}
/>
<Route
path={URLS.ROLES}
element={
<Can I="read" a="Role">
<AdminSettingsLayout>
<Roles />
</AdminSettingsLayout>
</Can>
}
/>
<Route
path={URLS.CREATE_ROLE}
element={
<Can I="create" a="Role">
<AdminSettingsLayout>
<CreateRole />
</AdminSettingsLayout>
</Can>
}
/>
<Route
path={URLS.ROLE_PATTERN}
element={
<Can I="update" a="Role">
<AdminSettingsLayout>
<EditRole />
</AdminSettingsLayout>
</Can>
}
/>
<Route
path={URLS.ADMIN_SETTINGS}
element={<Navigate to={URLS.USERS} replace />}
/>
</>
);

10
packages/web/src/components/AccountDropdownMenu/index.tsx
View File

@@ -4,6 +4,7 @@ import MenuItem from '@mui/material/MenuItem';
import Menu, { MenuProps } from '@mui/material/Menu';
import { Link } from 'react-router-dom';
import Can from 'components/Can';
import apolloClient from 'graphql/client';
import * as URLS from 'config/urls';
import useAuthentication from 'hooks/useAuthentication';
@@ -54,6 +55,15 @@ function AccountDropdownMenu(
{formatMessage('accountDropdownMenu.settings')}
</MenuItem>
<Can I="read" a="User">
<MenuItem
component={Link}
to={URLS.ADMIN_SETTINGS_DASHBOARD}
>
{formatMessage('accountDropdownMenu.adminSettings')}
</MenuItem>
</Can>
<MenuItem onClick={logout} data-test="logout-item">
{formatMessage('accountDropdownMenu.logout')}
</MenuItem>

2
packages/web/src/components/AddAppConnection/index.tsx
View File

@@ -12,7 +12,7 @@ import useFormatMessage from 'hooks/useFormatMessage';
import computeAuthStepVariables from 'helpers/computeAuthStepVariables';
import { processStep } from 'helpers/authenticationSteps';
import InputCreator from 'components/InputCreator';
import { generateExternalLink } from '../../helpers/translation-values';
import { generateExternalLink } from '../../helpers/translationValues';
import { Form } from './style';
type AddAppConnectionProps = {

92
packages/web/src/components/AdminSettingsLayout/index.tsx Normal file
View File

@@ -0,0 +1,92 @@
import ArrowBackIosNewIcon from '@mui/icons-material/ArrowBackIosNew';
import GroupIcon from '@mui/icons-material/Group';
import GroupsIcon from '@mui/icons-material/Groups';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import * as React from 'react';
import { SvgIconComponent } from '@mui/icons-material';
import AppBar from 'components/AppBar';
import Drawer from 'components/Drawer';
import * as URLS from 'config/urls';
import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
type SettingsLayoutProps = {
children: React.ReactNode;
};
type DrawerLink = {
Icon: SvgIconComponent,
primary: string,
to: string,
}
function createDrawerLinks({ canReadRole, canReadUser }: { canReadRole: boolean; canReadUser: boolean; }) {
const items = [
canReadUser ? {
Icon: GroupIcon,
primary: 'adminSettingsDrawer.users',
to: URLS.USERS,
} : null,
canReadRole ? {
Icon: GroupsIcon,
primary: 'adminSettingsDrawer.roles',
to: URLS.ROLES,
} : null
]
.filter(Boolean) as DrawerLink[];
return items;
}
const drawerBottomLinks = [
{
Icon: ArrowBackIosNewIcon,
primary: 'adminSettingsDrawer.goBack',
to: '/',
},
];
export default function SettingsLayout({
children,
}: SettingsLayoutProps): React.ReactElement {
const theme = useTheme();
const currentUserAbility = useCurrentUserAbility();
const matchSmallScreens = useMediaQuery(theme.breakpoints.down('lg'));
const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
const openDrawer = () => setDrawerOpen(true);
const closeDrawer = () => setDrawerOpen(false);
const drawerLinks = createDrawerLinks({
canReadUser: currentUserAbility.can('read', 'User'),
canReadRole: currentUserAbility.can('read', 'Role'),
});
return (
<>
<AppBar
drawerOpen={isDrawerOpen}
onDrawerOpen={openDrawer}
onDrawerClose={closeDrawer}
/>
<Box sx={{ display: 'flex' }}>
<Drawer
links={drawerLinks}
bottomLinks={drawerBottomLinks}
open={isDrawerOpen}
onOpen={openDrawer}
onClose={closeDrawer}
/>
<Box sx={{ flex: 1 }}>
<Toolbar />
{children}
</Box>
</Box>
</>
);
}

22
packages/web/src/components/Can/index.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Can as OriginalCan } from '@casl/react';
import * as React from 'react';
import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
type CanProps = {
I: string;
a: string;
passThrough?: boolean;
children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
} | {
I: string;
an: string;
passThrough?: boolean;
children: React.ReactNode | ((isAllowed: boolean) => React.ReactNode);
};
export default function Can(props: CanProps) {
const currentUserAbility = useCurrentUserAbility();
return (<OriginalCan ability={currentUserAbility} {...props} />);
};

2
packages/web/src/components/ConditionalIconButton/index.tsx
View File

@@ -19,6 +19,8 @@ export default function ConditionalIconButton(props: any): React.ReactElement {
type={buttonProps.type}
size={buttonProps.size}
component={buttonProps.component}
to={buttonProps.to}
disabled={buttonProps.disabled}
>
{icon}
</IconButton>

2
packages/web/src/components/ConditionalIconButton/style.ts
View File

@@ -2,7 +2,7 @@ import { styled } from '@mui/material/styles';
import MuiIconButton, { iconButtonClasses } from '@mui/material/IconButton';
export const IconButton = styled(MuiIconButton)`
&.${iconButtonClasses.colorPrimary} {
&.${iconButtonClasses.colorPrimary}:not(.${iconButtonClasses.disabled}) {
background: ${({ theme }) => theme.palette.primary.main};
color: ${({ theme }) => theme.palette.primary.contrastText};

58
packages/web/src/components/ConfirmationDialog/index.tsx Normal file
View File

@@ -0,0 +1,58 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
type ConfirmationDialogProps = {
onClose: () => void;
onConfirm: () => void;
title: React.ReactNode;
description: React.ReactNode;
cancelButtonChildren: React.ReactNode;
confirmButtionChildren: React.ReactNode;
open?: boolean;
}
export default function ConfirmationDialog(props: ConfirmationDialogProps) {
const {
onClose,
onConfirm,
title,
description,
cancelButtonChildren,
confirmButtionChildren,
open = true,
} = props;
return (
<Dialog open={open} onClose={onClose}>
{title && (
<DialogTitle>
{title}
</DialogTitle>
)}
{description && (
<DialogContent>
<DialogContentText>
{description}
</DialogContentText>
</DialogContent>
)}
<DialogActions>
{(cancelButtonChildren && onClose) && (
<Button onClick={onClose}>{cancelButtonChildren}</Button>
)}
{(confirmButtionChildren && onConfirm) && (
<Button onClick={onConfirm} color="error">
{confirmButtionChildren}
</Button>
)}
</DialogActions>
</Dialog>
);
}

57
packages/web/src/components/ControlledCheckbox/index.tsx Normal file
View File

@@ -0,0 +1,57 @@
import * as React from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
type ControlledCheckboxProps = {
name: string;
} & CheckboxProps;
export default function ControlledCheckbox(props: ControlledCheckboxProps): React.ReactElement {
const { control } = useFormContext();
const {
required,
name,
defaultValue = false,
disabled = false,
onBlur,
onChange,
...checkboxProps
} = props;
return (
<Controller
rules={{ required }}
name={name}
defaultValue={defaultValue}
control={control}
render={({
field: {
ref,
onChange: controllerOnChange,
onBlur: controllerOnBlur,
value,
name,
...field
},
}) => {
return (
<Checkbox
{...checkboxProps}
{...field}
checked={!!value}
name={name}
disabled={disabled}
onChange={(...args) => {
controllerOnChange(...args);
onChange?.(...args);
}}
onBlur={(...args) => {
controllerOnBlur();
onBlur?.(...args);
}}
inputRef={ref}
/>
)}}
/>
);
}

39
packages/web/src/components/DeleteAccountDialog/index.ee.tsx
View File

@@ -1,16 +1,11 @@
import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';
import * as URLS from 'config/urls';
import ConfirmationDialog from 'components/ConfirmationDialog';
import apolloClient from 'graphql/client';
import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
import { DELETE_CURRENT_USER } from 'graphql/mutations/delete-current-user.ee';
import useAuthentication from 'hooks/useAuthentication';
import useFormatMessage from 'hooks/useFormatMessage';
import useCurrentUser from 'hooks/useCurrentUser';
@@ -20,37 +15,29 @@ type DeleteAccountDialogProps = {
}
export default function DeleteAccountDialog(props: DeleteAccountDialogProps) {
const [deleteUser] = useMutation(DELETE_USER);
const [deleteCurrentUser] = useMutation(DELETE_CURRENT_USER);
const formatMessage = useFormatMessage();
const currentUser = useCurrentUser();
const authentication = useAuthentication();
const navigate = useNavigate();
const handleConfirm = React.useCallback(async () => {
await deleteUser();
await deleteCurrentUser();
authentication.updateToken('');
await apolloClient.clearStore();
navigate(URLS.LOGIN);
}, [deleteUser, currentUser]);
}, [deleteCurrentUser, currentUser]);
return (
<Dialog open onClose={props.onClose}>
<DialogTitle >
{formatMessage('deleteAccountDialog.title')}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{formatMessage('deleteAccountDialog.description')}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={props.onClose}>{formatMessage('deleteAccountDialog.cancel')}</Button>
<Button onClick={handleConfirm} color="error">
{formatMessage('deleteAccountDialog.confirm')}
</Button>
</DialogActions>
</Dialog>
<ConfirmationDialog
title={formatMessage('deleteAccountDialog.title')}
description={formatMessage('deleteAccountDialog.description')}
onClose={props.onClose}
onConfirm={handleConfirm}
cancelButtonChildren={formatMessage('deleteAccountDialog.cancel')}
confirmButtionChildren={formatMessage('deleteAccountDialog.confirm')}
/>
);
}

56
packages/web/src/components/DeleteRoleButton/index.ee.tsx Normal file
View File

@@ -0,0 +1,56 @@
import * as React from 'react';
import { useMutation } from '@apollo/client';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import Can from 'components/Can';
import ConfirmationDialog from 'components/ConfirmationDialog';
import { DELETE_ROLE } from 'graphql/mutations/delete-role.ee';
import useFormatMessage from 'hooks/useFormatMessage';
type DeleteRoleButtonProps = {
disabled?: boolean;
roleId: string;
}
export default function DeleteRoleButton(props: DeleteRoleButtonProps) {
const { disabled, roleId } = props;
const [showConfirmation, setShowConfirmation] = React.useState(false);
const [deleteRole] = useMutation(DELETE_ROLE, {
variables: { input: { id: roleId } },
refetchQueries: ['GetRoles'],
});
const formatMessage = useFormatMessage();
const handleConfirm = React.useCallback(async () => {
await deleteRole();
setShowConfirmation(false);
}, [deleteRole]);
return (
<>
<Can I="delete" a="Role" passThrough>
{allowed => (
<IconButton
disabled={!allowed || disabled}
onClick={() => setShowConfirmation(true)}
size="small"
>
<DeleteIcon />
</IconButton>
)}
</Can>
<ConfirmationDialog
open={showConfirmation}
title={formatMessage('deleteRoleButton.title')}
description={formatMessage('deleteRoleButton.description')}
onClose={() => setShowConfirmation(false)}
onConfirm={handleConfirm}
cancelButtonChildren={formatMessage('deleteRoleButton.cancel')}
confirmButtionChildren={formatMessage('deleteRoleButton.confirm')}
/>
</>
);
}

46
packages/web/src/components/DeleteUserButton/index.ee.tsx Normal file
View File

@@ -0,0 +1,46 @@
import * as React from 'react';
import { useMutation } from '@apollo/client';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
import ConfirmationDialog from 'components/ConfirmationDialog';
import { DELETE_USER } from 'graphql/mutations/delete-user.ee';
import useFormatMessage from 'hooks/useFormatMessage';
type DeleteUserButtonProps = {
userId: string;
}
export default function DeleteUserButton(props: DeleteUserButtonProps) {
const { userId } = props;
const [showConfirmation, setShowConfirmation] = React.useState(false);
const [deleteUser] = useMutation(DELETE_USER, {
variables: { input: { id: userId } },
refetchQueries: ['GetUsers'],
});
const formatMessage = useFormatMessage();
const handleConfirm = React.useCallback(async () => {
await deleteUser();
setShowConfirmation(false);
}, [deleteUser]);
return (
<>
<IconButton onClick={() => setShowConfirmation(true)} size="small">
<DeleteIcon />
</IconButton>
<ConfirmationDialog
open={showConfirmation}
title={formatMessage('deleteUserButton.title')}
description={formatMessage('deleteUserButton.description')}
onClose={() => setShowConfirmation(false)}
onConfirm={handleConfirm}
cancelButtonChildren={formatMessage('deleteUserButton.cancel')}
confirmButtionChildren={formatMessage('deleteUserButton.confirm')}
/>
</>
);
}

37
packages/web/src/components/FlowContextMenu/index.tsx
View File

@@ -6,6 +6,7 @@ import type { PopoverProps } from '@mui/material/Popover';
import MenuItem from '@mui/material/MenuItem';
import { useSnackbar } from 'notistack';
import Can from 'components/Can';
import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
import * as URLS from 'config/urls';
@@ -72,13 +73,39 @@ export default function ContextMenu(
hideBackdrop={false}
anchorEl={anchorEl}
>
<MenuItem component={Link} to={URLS.FLOW(flowId)}>
{formatMessage('flow.view')}
</MenuItem>
<Can I="read" a="Flow" passThrough>
{(allowed) => (
<MenuItem
disabled={!allowed}
component={Link}
to={URLS.FLOW(flowId)}
>
{formatMessage('flow.view')}
</MenuItem>
)}
</Can>
<MenuItem onClick={onFlowDuplicate}>{formatMessage('flow.duplicate')}</MenuItem>
<Can I="create" a="Flow" passThrough>
{(allowed) => (
<MenuItem
disabled={!allowed}
onClick={onFlowDuplicate}
>
{formatMessage('flow.duplicate')}
</MenuItem>
)}
</Can>
<MenuItem onClick={onFlowDelete}>{formatMessage('flow.delete')}</MenuItem>
<Can I="delete" a="Flow" passThrough>
{(allowed) => (
<MenuItem
disabled={!allowed}
onClick={onFlowDelete}
>
{formatMessage('flow.delete')}
</MenuItem>
)}
</Can>
</Menu>
);
}

142
packages/web/src/components/PermissionCatalogField/PermissionSettings.ee.tsx Normal file
View File

@@ -0,0 +1,142 @@
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogTitle from '@mui/material/DialogTitle';
import Paper from '@mui/material/Paper';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import * as React from 'react';
import { useFormContext } from 'react-hook-form';
import { IPermissionCatalog } from '@automatisch/types';
import ControlledCheckbox from 'components/ControlledCheckbox';
import useFormatMessage from 'hooks/useFormatMessage';
type PermissionSettingsProps = {
onClose: () => void;
fieldPrefix: string;
subject: string;
actions: IPermissionCatalog['actions'];
conditions: IPermissionCatalog['conditions'];
}
export default function PermissionSettings(props: PermissionSettingsProps) {
const {
onClose,
fieldPrefix,
subject,
actions,
conditions,
} = props;
const formatMessage = useFormatMessage();
const { getValues, resetField } = useFormContext();
const cancel = () => {
for (const action of actions) {
for (const condition of conditions) {
const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
resetField(fieldName);
}
}
onClose();
}
const apply = () => {
for (const action of actions) {
for (const condition of conditions) {
const fieldName = `${fieldPrefix}.${action.key}.conditions.${condition.key}`;
const value = getValues(fieldName);
resetField(fieldName, { defaultValue: value });
}
}
onClose();
}
return (
<Dialog open onClose={cancel}>
<DialogTitle>
{formatMessage('permissionSettings.title')}
</DialogTitle>
<DialogContent>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell component="th" />
{actions.map(action => (
<TableCell component="th" key={action.key}>
<Typography
variant="subtitle1"
align="center"
sx={{
color: 'text.secondary',
fontWeight: 700
}}
>
{action.label}
</Typography>
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{conditions.map((condition) => (
<TableRow
key={condition.key}
sx={{ '&:last-child td': { border: 0 } }}
>
<TableCell scope="row">
<Typography
variant="subtitle2"
>
{condition.label}
</Typography>
</TableCell>
{actions.map((action) => (
<TableCell
key={`${action.key}.${condition.key}`}
align="center"
>
<Typography
variant="subtitle2"
>
{action.subjects.includes(subject) && (
<ControlledCheckbox
name={`${fieldPrefix}.${action.key}.conditions.${condition.key}`}
disabled={getValues(`${fieldPrefix}.${action.key}.value`) !== true}
/>
)}
{!action.subjects.includes(subject) && '-'}
</Typography>
</TableCell>
))}
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</DialogContent>
<DialogActions>
<Button onClick={cancel}>{formatMessage('permissionSettings.cancel')}</Button>
<Button onClick={apply} color="error">
{formatMessage('permissionSettings.apply')}
</Button>
</DialogActions>
</Dialog>
)
}

122
packages/web/src/components/PermissionCatalogField/index.ee.tsx Normal file
View File

@@ -0,0 +1,122 @@
import SettingsIcon from '@mui/icons-material/Settings';
import IconButton from '@mui/material/IconButton';
import Paper from '@mui/material/Paper';
import Stack from '@mui/material/Stack';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import * as React from 'react';
import ControlledCheckbox from 'components/ControlledCheckbox';
import usePermissionCatalog from 'hooks/usePermissionCatalog.ee';
import PermissionSettings from './PermissionSettings.ee';
type PermissionCatalogFieldProps = {
name?: string;
disabled?: boolean;
};
const PermissionCatalogField = ({ name = 'permissions', disabled = false }: PermissionCatalogFieldProps) => {
const permissionCatalog = usePermissionCatalog();
const [dialogName, setDialogName] = React.useState<string>();
if (!permissionCatalog) return (<React.Fragment />);
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell component="th" />
{permissionCatalog.actions.map(action => (
<TableCell component="th" key={action.key}>
<Typography
variant="subtitle1"
align="center"
sx={{
color: 'text.secondary',
fontWeight: 700
}}
>
{action.label}
</Typography>
</TableCell>
))}
<TableCell component="th" />
</TableRow>
</TableHead>
<TableBody>
{permissionCatalog.subjects.map((subject) => (
<TableRow
key={subject.key}
sx={{ '&:last-child td': { border: 0 } }}
>
<TableCell scope="row">
<Typography
variant="subtitle2"
>
{subject.label}
</Typography>
</TableCell>
{permissionCatalog.actions.map((action) => (
<TableCell
key={`${subject.key}.${action.key}`}
align="center"
>
<Typography
variant="subtitle2"
>
{action.subjects.includes(subject.key) && (
<ControlledCheckbox
disabled={disabled}
name={`${name}.${subject.key}.${action.key}.value`}
/>
)}
{!action.subjects.includes(subject.key) && '-'}
</Typography>
</TableCell>
))}
<TableCell>
<Stack
direction="row"
gap={1}
justifyContent="right"
>
<IconButton
color="info"
size="small"
onClick={() => setDialogName(subject.key)}
disabled={disabled}
>
<SettingsIcon />
</IconButton>
{dialogName === subject.key && (
<PermissionSettings
onClose={() => setDialogName('')}
fieldPrefix={`${name}.${subject.key}`}
subject={subject.key}
actions={permissionCatalog.actions}
conditions={permissionCatalog.conditions}
/>
)}
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
)
};
export default PermissionCatalogField;

96
packages/web/src/components/RoleList/index.ee.tsx Normal file
View File

@@ -0,0 +1,96 @@
import * as React from 'react';
import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import DeleteRoleButton from 'components/DeleteRoleButton/index.ee';
import useFormatMessage from 'hooks/useFormatMessage';
import useRoles from 'hooks/useRoles.ee';
import * as URLS from 'config/urls';
// TODO: introduce interaction feedback upon deletion (successful + failure)
// TODO: introduce loading bar
export default function RoleList(): React.ReactElement {
const formatMessage = useFormatMessage();
const { roles } = useRoles();
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell component="th">
<Typography
variant="subtitle1"
sx={{ color: 'text.secondary', fontWeight: 700 }}
>
{formatMessage('roleList.name')}
</Typography>
</TableCell>
<TableCell component="th">
<Typography
variant="subtitle1"
sx={{ color: 'text.secondary', fontWeight: 700 }}
>
{formatMessage('roleList.description')}
</Typography>
</TableCell>
<TableCell component="th" />
</TableRow>
</TableHead>
<TableBody>
{roles.map((role) => (
<TableRow
key={role.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell scope="row">
<Typography
variant="subtitle2"
>
{role.name}
</Typography>
</TableCell>
<TableCell scope="row">
<Typography
variant="subtitle2"
>
{role.description}
</Typography>
</TableCell>
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton
size="small"
component={Link}
to={URLS.ROLE(role.id)}
>
<EditIcon />
</IconButton>
<DeleteRoleButton
disabled={role.isAdmin}
roleId={role.id}
/>
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

8
packages/web/src/components/SignUpForm/index.ee.tsx
View File

@@ -9,7 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
import useAuthentication from 'hooks/useAuthentication';
import * as URLS from 'config/urls';
import { CREATE_USER } from 'graphql/mutations/create-user.ee';
import { REGISTER_USER } from 'graphql/mutations/register-user.ee';
import Form from 'components/Form';
import TextField from 'components/TextField';
import { LOGIN } from 'graphql/mutations/login';
@@ -40,7 +40,7 @@ function SignUpForm() {
const navigate = useNavigate();
const authentication = useAuthentication();
const formatMessage = useFormatMessage();
const [createUser, { loading: createUserLoading }] = useMutation(CREATE_USER);
const [registerUser, { loading: registerUserLoading }] = useMutation(REGISTER_USER);
const [login, { loading: loginLoading }] = useMutation(LOGIN);
React.useEffect(() => {
@@ -51,7 +51,7 @@ function SignUpForm() {
const handleSubmit = async (values: any) => {
const { fullName, email, password } = values;
await createUser({
await registerUser({
variables: {
input: { fullName, email, password },
},
@@ -165,7 +165,7 @@ function SignUpForm() {
variant="contained"
color="primary"
sx={{ boxShadow: 2, mt: 3 }}
loading={createUserLoading || loginLoading}
loading={registerUserLoading || loginLoading}
fullWidth
data-test="signUp-button"
>

8
packages/web/src/components/SsoProviders/index.ee.tsx
View File

@@ -4,7 +4,7 @@ import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Divider from '@mui/material/Divider';
import appConfig from 'config/app';
import * as URLS from 'config/urls';
import useSamlAuthProviders from 'hooks/useSamlAuthProviders.ee';
import useFormatMessage from 'hooks/useFormatMessage';
@@ -24,10 +24,12 @@ function SsoProviders() {
<Button
key={provider.id}
component="a"
href={`${appConfig.apiUrl}/login/saml/${provider.issuer}`}
href={URLS.SSO_LOGIN(provider.issuer)}
variant="outlined"
>
{provider.name}
{formatMessage('ssoProviders.loginWithProvider', {
providerName: provider.name
})}
</Button>
))}
</Stack>

2
packages/web/src/components/TrialOverAlert/index.ee.tsx
View File

@@ -3,7 +3,7 @@ import Alert from '@mui/material/Alert';
import Typography from '@mui/material/Typography';
import * as URLS from 'config/urls';
import { generateInternalLink } from 'helpers/translation-values';
import { generateInternalLink } from 'helpers/translationValues';
import useTrialStatus from 'hooks/useTrialStatus.ee';
import useFormatMessage from 'hooks/useFormatMessage';

2
packages/web/src/components/UpgradeFreeTrial/index.ee.tsx
View File

@@ -58,7 +58,7 @@ export default function UpgradeFreeTrial() {
alignItems="stretch"
>
<TableContainer component={Paper}>
<Table aria-label="simple table">
<Table>
<TableHead
sx={{
backgroundColor: (theme) =>

93
packages/web/src/components/UserList/index.tsx Normal file
View File

@@ -0,0 +1,93 @@
import * as React from 'react';
import { Link } from 'react-router-dom';
import Stack from '@mui/material/Stack';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Paper from '@mui/material/Paper';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import EditIcon from '@mui/icons-material/Edit';
import DeleteUserButton from 'components/DeleteUserButton/index.ee';
import useUsers from 'hooks/useUsers';
import useFormatMessage from 'hooks/useFormatMessage';
import * as URLS from 'config/urls';
// TODO: introduce interaction feedback upon deletion (successful + failure)
// TODO: introduce loading bar
export default function UserList(): React.ReactElement {
const formatMessage = useFormatMessage();
const { users, loading } = useUsers();
return (
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow>
<TableCell component="th">
<Typography
variant="subtitle1"
sx={{ color: 'text.secondary', fontWeight: 700 }}
>
{formatMessage('userList.fullName')}
</Typography>
</TableCell>
<TableCell component="th">
<Typography
variant="subtitle1"
sx={{ color: 'text.secondary', fontWeight: 700 }}
>
{formatMessage('userList.email')}
</Typography>
</TableCell>
<TableCell component="th" />
</TableRow>
</TableHead>
<TableBody>
{users.map((user) => (
<TableRow
key={user.id}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell scope="row">
<Typography
variant="subtitle2"
>
{user.fullName}
</Typography>
</TableCell>
<TableCell>
<Typography
variant="subtitle2"
>
{user.email}
</Typography>
</TableCell>
<TableCell>
<Stack direction="row" gap={1} justifyContent="right">
<IconButton
size="small"
component={Link}
to={URLS.USER(user.id)}
>
<EditIcon />
</IconButton>
<DeleteUserButton userId={user.id} />
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}

2
packages/web/src/components/WebhookUrlInfo/index.tsx
View File

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl';
import Typography from '@mui/material/Typography';
import type { AlertProps } from '@mui/material/Alert';
import { generateExternalLink } from '../../helpers/translation-values';
import { generateExternalLink } from '../../helpers/translationValues';
import { WEBHOOK_DOCS } from '../../config/urls';
import TextField from '../TextField';
import { Alert } from './style';

2
packages/web/src/components/WebhookUrlInfo/style.ts
View File

@@ -1,7 +1,7 @@
import { styled } from '@mui/material/styles';
import MuiAlert, { alertClasses } from '@mui/material/Alert';
export const Alert = styled(MuiAlert)(({ theme }) => ({
export const Alert = styled(MuiAlert)(() => ({
[`&.${alertClasses.root}`]: {
fontWeight: 300,
width: '100%',

32
packages/web/src/config/urls.ts
View File

@@ -1,36 +1,39 @@
import appConfig from './app';
export const CONNECTIONS = '/connections';
export const EXECUTIONS = '/executions';
export const EXECUTION_PATTERN = '/executions/:executionId';
export const EXECUTION = (executionId: string): string =>
export const EXECUTION = (executionId: string) =>
`/executions/${executionId}`;
export const LOGIN = '/login';
export const LOGIN_CALLBACK = `${LOGIN}/callback`;
export const SSO_LOGIN = (issuer: string) => `${appConfig.apiUrl}/login/saml/${issuer}`;
export const SIGNUP = '/sign-up';
export const FORGOT_PASSWORD = '/forgot-password';
export const RESET_PASSWORD = '/reset-password';
export const APPS = '/apps';
export const NEW_APP_CONNECTION = '/apps/new';
export const APP = (appKey: string): string => `/app/${appKey}`;
export const APP = (appKey: string) => `/app/${appKey}`;
export const APP_PATTERN = '/app/:appKey';
export const APP_CONNECTIONS = (appKey: string): string =>
export const APP_CONNECTIONS = (appKey: string) =>
`/app/${appKey}/connections`;
export const APP_CONNECTIONS_PATTERN = '/app/:appKey/connections';
export const APP_ADD_CONNECTION = (appKey: string): string =>
export const APP_ADD_CONNECTION = (appKey: string) =>
`/app/${appKey}/connections/add`;
export const APP_ADD_CONNECTION_PATTERN = '/app/:appKey/connections/add';
export const APP_RECONNECT_CONNECTION = (
appKey: string,
connectionId: string
): string => `/app/${appKey}/connections/${connectionId}/reconnect`;
) => `/app/${appKey}/connections/${connectionId}/reconnect`;
export const APP_RECONNECT_CONNECTION_PATTERN =
'/app/:appKey/connections/:connectionId/reconnect';
export const APP_FLOWS = (appKey: string): string => `/app/${appKey}/flows`;
export const APP_FLOWS = (appKey: string) => `/app/${appKey}/flows`;
export const APP_FLOWS_FOR_CONNECTION = (
appKey: string,
connectionId: string
): string => `/app/${appKey}/flows?connectionId=${connectionId}`;
) => `/app/${appKey}/flows?connectionId=${connectionId}`;
export const APP_FLOWS_PATTERN = '/app/:appKey/flows';
export const EDITOR = '/editor';
@@ -55,11 +58,11 @@ export const CREATE_FLOW_WITH_APP_AND_CONNECTION = (
return `/editor/create?${searchParams}`;
};
export const FLOW_EDITOR = (flowId: string): string => `/editor/${flowId}`;
export const FLOW_EDITOR = (flowId: string) => `/editor/${flowId}`;
export const FLOWS = '/flows';
// TODO: revert this back to /flows/:flowId once we have a proper single flow page
export const FLOW = (flowId: string): string => `/editor/${flowId}`;
export const FLOW = (flowId: string) => `/editor/${flowId}`;
export const FLOW_PATTERN = '/flows/:flowId';
export const SETTINGS = '/settings';
@@ -72,6 +75,17 @@ export const SETTINGS_PROFILE = `${SETTINGS}/${PROFILE}`;
export const SETTINGS_BILLING_AND_USAGE = `${SETTINGS}/${BILLING_AND_USAGE}`;
export const SETTINGS_PLAN_UPGRADE = `${SETTINGS_BILLING_AND_USAGE}/${PLAN_UPGRADE}`;
export const ADMIN_SETTINGS = '/admin-settings';
export const ADMIN_SETTINGS_DASHBOARD = ADMIN_SETTINGS;
export const USERS = `${ADMIN_SETTINGS}/users`;
export const USER = (userId: string) => `${USERS}/${userId}`;
export const USER_PATTERN = `${USERS}/:userId`;
export const CREATE_USER = `${USERS}/create`;
export const ROLES = `${ADMIN_SETTINGS}/roles`;
export const ROLE = (roleId: string) => `${ROLES}/${roleId}`;
export const ROLE_PATTERN = `${ROLES}/:roleId`;
export const CREATE_ROLE = `${ROLES}/create`;
export const DASHBOARD = FLOWS;
// External links

12
packages/web/src/graphql/mutations/create-role.ee.ts Normal file
View File

@@ -0,0 +1,12 @@
import { gql } from '@apollo/client';
export const CREATE_ROLE = gql`
mutation CreateRole($input: CreateRoleInput) {
createRole(input: $input) {
id
key
name
description
}
}
`;

4
packages/web/src/graphql/mutations/create-user.ee.ts
View File

@@ -3,8 +3,12 @@ import { gql } from '@apollo/client';
export const CREATE_USER = gql`
mutation CreateUser($input: CreateUserInput) {
createUser(input: $input) {
id
email
fullName
role {
id
}
}
}
`;

7
packages/web/src/graphql/mutations/delete-current-user.ee.ts Normal file
View File

@@ -0,0 +1,7 @@
import { gql } from '@apollo/client';
export const DELETE_CURRENT_USER = gql`
mutation DeleteCurrentUser {
deleteCurrentUser
}
`;

7
packages/web/src/graphql/mutations/delete-role.ee.ts Normal file
View File

@@ -0,0 +1,7 @@
import { gql } from '@apollo/client';
export const DELETE_ROLE = gql`
mutation DeleteRole($input: DeleteRoleInput) {
deleteRole(input: $input)
}
`;

4
packages/web/src/graphql/mutations/delete-user.ee.ts
View File

@@ -1,7 +1,7 @@
import { gql } from '@apollo/client';
export const DELETE_USER = gql`
mutation DeleteUser {
deleteUser
mutation DeleteUser($input: DeleteUserInput) {
deleteUser(input: $input)
}
`;

11
packages/web/src/graphql/mutations/register-user.ee.ts Normal file
View File

@@ -0,0 +1,11 @@
import { gql } from '@apollo/client';
export const REGISTER_USER = gql`
mutation RegisterUser($input: RegisterUserInput) {
registerUser(input: $input) {
id
email
fullName
}
}
`;

11
packages/web/src/graphql/mutations/update-current-user.ts Normal file
View File

@@ -0,0 +1,11 @@
import { gql } from '@apollo/client';
export const UPDATE_CURRENT_USER = gql`
mutation UpdateCurrentUser($input: UpdateCurrentUserInput) {
updateCurrentUser(input: $input) {
id
fullName
email
}
}
`;

17
packages/web/src/graphql/mutations/update-role.ee.ts Normal file
View File

@@ -0,0 +1,17 @@
import { gql } from '@apollo/client';
export const UPDATE_ROLE = gql`
mutation UpdateRole($input: UpdateRoleInput) {
updateRole(input: $input) {
id
name
description
permissions {
id
action
subject
conditions
}
}
}
`;

2
packages/web/src/graphql/mutations/update-user.ts → packages/web/src/graphql/mutations/update-user.ee.ts
View File

@@ -4,8 +4,8 @@ export const UPDATE_USER = gql`
mutation UpdateUser($input: UpdateUserInput) {
updateUser(input: $input) {
id
fullName
email
fullName
}
}
`;

10
packages/web/src/graphql/queries/get-current-user.ts
View File

@@ -6,6 +6,16 @@ export const GET_CURRENT_USER = gql`
id
fullName
email
role {
id
isAdmin
}
permissions {
id
action
subject
conditions
}
}
}
`;

21
packages/web/src/graphql/queries/get-permission-catalog.ee.ts Normal file
View File

@@ -0,0 +1,21 @@
import { gql } from '@apollo/client';
export const GET_PERMISSION_CATALOG = gql`
query GetPermissionCatalog {
getPermissionCatalog {
subjects {
key
label
}
conditions {
key
label
}
actions {
label
key
subjects
}
}
}
`;

19
packages/web/src/graphql/queries/get-role.ee.ts Normal file
View File

@@ -0,0 +1,19 @@
import { gql } from '@apollo/client';
export const GET_ROLE = gql`
query GetRole($id: String!) {
getRole(id: $id) {
id
key
name
description
isAdmin
permissions {
id
action
subject
conditions
}
}
}
`;

13
packages/web/src/graphql/queries/get-roles.ee.ts Normal file
View File

@@ -0,0 +1,13 @@
import { gql } from '@apollo/client';
export const GET_ROLES = gql`
query GetRoles {
getRoles {
id
key
name
description
isAdmin
}
}
`;

19
packages/web/src/graphql/queries/get-user.ts Normal file
View File

@@ -0,0 +1,19 @@
import { gql } from '@apollo/client';
export const GET_USER = gql`
query GetUser($id: String!) {
getUser(id: $id) {
id
fullName
email
role {
id
key
name
isAdmin
}
createdAt
updatedAt
}
}
`;

29
packages/web/src/graphql/queries/get-users.ts Normal file
View File

@@ -0,0 +1,29 @@
import { gql } from '@apollo/client';
export const GET_USERS = gql`
query GetUsers(
$limit: Int!
$offset: Int!
) {
getUsers(
limit: $limit
offset: $offset
) {
pageInfo {
currentPage
totalPages
}
edges {
node {
id
fullName
email
role {
id
name
}
}
}
}
}
`;

59
packages/web/src/helpers/computePermissions.ee.ts Normal file
View File

@@ -0,0 +1,59 @@
import { IRole, IPermission } from '@automatisch/types';
type ComputeAction = {
conditions: Record<string, boolean>;
value: boolean;
}
type ComputedActions = Record<string, ComputeAction>;
type ComputedPermissions = Record<string, ComputedActions>;
export type RoleWithComputedPermissions = IRole & { computedPermissions: ComputedPermissions };
export function getRoleWithComputedPermissions(role: IRole): RoleWithComputedPermissions {
const computedPermissions = role.permissions.reduce((computedPermissions, permission) => ({
...computedPermissions,
[permission.subject]: {
...(computedPermissions[permission.subject] || {}),
[permission.action]: {
conditions: Object.fromEntries(permission
.conditions
.map(condition => [condition, true])),
value: true,
},
}
}), {} as ComputedPermissions);
return {
...role,
computedPermissions,
};
}
export function getPermissions(computedPermissions?: ComputedPermissions) {
if (!computedPermissions) return [];
return Object
.entries(computedPermissions)
.reduce((permissions, computedPermissionEntry) => {
const [subject, actionsWithConditions] = computedPermissionEntry;
for (const action in actionsWithConditions) {
const {
value: permitted,
conditions = {},
} = actionsWithConditions[action];
if (permitted) {
permissions.push({
action,
subject,
conditions: Object
.entries(conditions)
.filter(([, enabled]) => enabled)
.map(([condition]) => condition),
})
}
}
return permissions;
}, [] as Partial<IPermission>[]);
}

0
packages/web/src/helpers/translation-values.tsx → packages/web/src/helpers/translationValues.tsx
View File

20
packages/web/src/helpers/userAbility.ts Normal file
View File

@@ -0,0 +1,20 @@
import { PureAbility, fieldPatternMatcher, mongoQueryMatcher } from '@casl/ability';
import { IUser } from '@automatisch/types';
// Must be kept in sync with `packages/backend/src/helpers/user-ability.ts`!
export default function userAbility(user: IUser) {
const permissions = user?.permissions;
const role = user?.role;
// We're not using mongo, but our fields, conditions match
const options = {
conditionsMatcher: mongoQueryMatcher,
fieldMatcher: fieldPatternMatcher
};
if (!role || !permissions) {
return new PureAbility([], options);
}
return new PureAbility<[string, string], string[]>(permissions, options);
}

8
packages/web/src/hooks/useCurrentUserAbility.ts Normal file
View File

@@ -0,0 +1,8 @@
import userAbility from 'helpers/userAbility';
import useCurrentUser from 'hooks/useCurrentUser';
export default function useCurrentUserAbility() {
const currentUser = useCurrentUser();
return userAbility(currentUser);
}

10
packages/web/src/hooks/usePermissionCatalog.ee.ts Normal file
View File

@@ -0,0 +1,10 @@
import { useQuery } from '@apollo/client';
import { IPermissionCatalog } from '@automatisch/types';
import { GET_PERMISSION_CATALOG } from 'graphql/queries/get-permission-catalog.ee';
export default function usePermissionCatalog(): IPermissionCatalog {
const { data } = useQuery(GET_PERMISSION_CATALOG);
return data?.getPermissionCatalog;
}

28
packages/web/src/hooks/useRole.ee.ts Normal file
View File

@@ -0,0 +1,28 @@
import * as React from 'react';
import { useLazyQuery } from '@apollo/client';
import { IRole } from '@automatisch/types';
import { GET_ROLE } from 'graphql/queries/get-role.ee';
type QueryResponse = {
getRole: IRole;
}
export default function useRole(roleId?: string) {
const [getRole, { data, loading }] = useLazyQuery<QueryResponse>(GET_ROLE);
React.useEffect(() => {
if (roleId) {
getRole({
variables: {
id: roleId
}
});
}
}, [roleId]);
return {
role: data?.getRole,
loading
};
}

17
packages/web/src/hooks/useRoles.ee.ts Normal file
View File

@@ -0,0 +1,17 @@
import { useQuery } from '@apollo/client';
import { IRole } from '@automatisch/types';
import { GET_ROLES } from 'graphql/queries/get-roles.ee';
type QueryResponse = {
getRoles: IRole[];
}
export default function useRoles() {
const { data, loading } = useQuery<QueryResponse>(GET_ROLES, { context: { autoSnackbar: false } });
return {
roles: data?.getRoles || [],
loading
};
}

28
packages/web/src/hooks/useUser.ts Normal file
View File

@@ -0,0 +1,28 @@
import * as React from 'react';
import { useLazyQuery } from '@apollo/client';
import { IUser } from '@automatisch/types';
import { GET_USER } from 'graphql/queries/get-user';
type QueryResponse = {
getUser: IUser;
}
export default function useUser(userId?: string) {
const [getUser, { data, loading }] = useLazyQuery<QueryResponse>(GET_USER);
React.useEffect(() => {
if (userId) {
getUser({
variables: {
id: userId
}
});
}
}, [userId]);
return {
user: data?.getUser,
loading
};
}

33
packages/web/src/hooks/useUsers.ts Normal file
View File

@@ -0,0 +1,33 @@
import { useQuery } from '@apollo/client';
import { IUser } from '@automatisch/types';
import { GET_USERS } from 'graphql/queries/get-users';
type Edge = {
node: IUser
}
type QueryResponse = {
getUsers: {
pageInfo: {
currentPage: number;
totalPages: number;
}
edges: Edge[]
}
}
export default function useUsers() {
const { data, loading } = useQuery<QueryResponse>(GET_USERS, {
variables: {
limit: 100,
offset: 0
}
});
const users = data?.getUsers.edges.map(({ node }) => node) || [];
return {
users,
loading
};
}

40
packages/web/src/locales/en.json
View File

@@ -2,6 +2,7 @@
"brandText": "Automatisch",
"searchPlaceholder": "Search",
"accountDropdownMenu.settings": "Settings",
"accountDropdownMenu.adminSettings": "Admin",
"accountDropdownMenu.logout": "Logout",
"drawer.dashboard": "Dashboard",
"drawer.flows": "Flows",
@@ -12,6 +13,9 @@
"settingsDrawer.goBack": "Go to the dashboard",
"settingsDrawer.notifications": "Notifications",
"settingsDrawer.billingAndUsage": "Billing and usage",
"adminSettingsDrawer.users": "Users",
"adminSettingsDrawer.roles": "Roles",
"adminSettingsDrawer.goBack": "Go to the dashboard",
"app.connectionCount": "{count} connections",
"app.flowCount": "{count} flows",
"app.addConnection": "Add connection",
@@ -130,6 +134,7 @@
"loginForm.noAccount": "Don't have an Automatisch account yet?",
"loginForm.signUp": "Sign up",
"loginPage.divider": "OR",
"ssoProviders.loginWithProvider": "Login with {providerName}",
"forgotPasswordForm.title": "Forgot password",
"forgotPasswordForm.submit": "Send reset instructions",
"forgotPasswordForm.instructionsSent": "The instructions have been sent!",
@@ -165,5 +170,38 @@
"checkoutCompletedAlert.text": "Thank you for upgrading your subscription and supporting our self-funded business!",
"subscriptionCancelledAlert.text": "Your subscription is cancelled, but you can continue using Automatisch until {date}.",
"customAutocomplete.noOptions": "No options available.",
"powerInputSuggestions.noOptions": "No options available."
"powerInputSuggestions.noOptions": "No options available.",
"usersPage.title": "User management",
"usersPage.createUser": "Create user",
"deleteUserButton.title": "Delete user",
"deleteUserButton.description": "This will permanently delete the user and all the associated data with it.",
"deleteUserButton.cancel": "Cancel",
"deleteUserButton.confirm": "Delete",
"editUserPage.title": "Edit user",
"createUserPage.title": "Create user",
"userForm.fullName": "Full name",
"userForm.email": "Email",
"userForm.role": "Role",
"userForm.password": "Password",
"createUser.submit": "Create",
"editUser.submit": "Update",
"userList.fullName": "Full name",
"userList.email": "Email",
"rolesPage.title": "Role management",
"rolesPage.createRole": "Create role",
"deleteRoleButton.title": "Delete role",
"deleteRoleButton.description": "This will permanently delete the role.",
"deleteRoleButton.cancel": "Cancel",
"deleteRoleButton.confirm": "Delete",
"editRolePage.title": "Edit role",
"createRolePage.title": "Create role",
"roleForm.name": "Name",
"roleForm.description": "Description",
"createRole.submit": "Create",
"editRole.submit": "Update",
"roleList.name": "Name",
"roleList.description": "Description",
"permissionSettings.cancel": "Cancel",
"permissionSettings.apply": "Apply",
"permissionSettings.title": "Conditions"
}

45
packages/web/src/pages/Application/index.tsx
View File

@@ -10,7 +10,6 @@ import {
useMatch,
useNavigate,
} from 'react-router-dom';
import type { LinkProps } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import Box from '@mui/material/Box';
@@ -67,41 +66,6 @@ export default function Application(): React.ReactElement | null {
const goToApplicationPage = () => navigate('connections');
const app = data?.getApp || {};
const NewConnectionLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return (
<Link
ref={ref}
to={URLS.APP_ADD_CONNECTION(appKey)}
{...linkProps}
/>
);
}
),
[appKey]
);
const NewFlowLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return (
<Link
ref={ref}
to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
appKey,
connectionId
)}
{...linkProps}
/>
);
}
),
[appKey, connectionId]
);
if (loading) return null;
return (
@@ -131,7 +95,11 @@ export default function Application(): React.ReactElement | null {
variant="contained"
color="primary"
size="large"
component={NewFlowLink}
component={Link}
to={URLS.CREATE_FLOW_WITH_APP_AND_CONNECTION(
appKey,
connectionId
)}
fullWidth
icon={<AddIcon />}
>
@@ -148,7 +116,8 @@ export default function Application(): React.ReactElement | null {
variant="contained"
color="primary"
size="large"
component={NewConnectionLink}
component={Link}
to={URLS.APP_ADD_CONNECTION(appKey)}
fullWidth
icon={<AddIcon />}
data-test="add-connection-button"

42
packages/web/src/pages/Applications/index.tsx
View File

@@ -1,6 +1,5 @@
import * as React from 'react';
import { Link, Routes, Route, useNavigate } from 'react-router-dom';
import type { LinkProps } from 'react-router-dom';
import { useQuery } from '@apollo/client';
import Box from '@mui/material/Box';
import Grid from '@mui/material/Grid';
@@ -9,6 +8,7 @@ import CircularProgress from '@mui/material/CircularProgress';
import AddIcon from '@mui/icons-material/Add';
import type { IApp } from '@automatisch/types';
import Can from 'components/Can';
import NoResultFound from 'components/NoResultFound';
import ConditionalIconButton from 'components/ConditionalIconButton';
import Container from 'components/Container';
@@ -39,16 +39,6 @@ export default function Applications(): React.ReactElement {
navigate(URLS.APPS);
}, [navigate]);
const NewAppConnectionLink = React.useMemo(
() =>
React.forwardRef<HTMLAnchorElement, Omit<LinkProps, 'to'>>(
function InlineLink(linkProps, ref) {
return <Link ref={ref} to={URLS.NEW_APP_CONNECTION} {...linkProps} />;
}
),
[]
);
return (
<Box sx={{ py: 3 }}>
<Container>
@@ -69,18 +59,24 @@ export default function Applications(): React.ReactElement {
alignItems="center"
order={{ xs: 1, sm: 2 }}
>
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={NewAppConnectionLink}
fullWidth
icon={<AddIcon />}
data-test="add-connection-button"
>
{formatMessage('apps.addConnection')}
</ConditionalIconButton>
<Can I="create" a="Connection" passThrough>
{(allowed) => (
<ConditionalIconButton
type="submit"
variant="contained"
color="primary"
size="large"
component={Link}
to={URLS.NEW_APP_CONNECTION}
fullWidth
disabled={!allowed}
icon={<AddIcon />}
data-test="add-connection-button"
>
{formatMessage('apps.addConnection')}
</ConditionalIconButton>
)}
</Can>
</Grid>
</Grid>

82
packages/web/src/pages/CreateRole/index.ee.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { useMutation } from '@apollo/client';
import LoadingButton from '@mui/lab/LoadingButton';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import PermissionCatalogField from 'components/PermissionCatalogField/index.ee';
import Form from 'components/Form';
import PageTitle from 'components/PageTitle';
import TextField from 'components/TextField';
import * as URLS from 'config/urls';
import { CREATE_ROLE } from 'graphql/mutations/create-role.ee';
import {
RoleWithComputedPermissions,
getPermissions,
} from 'helpers/computePermissions.ee';
import useFormatMessage from 'hooks/useFormatMessage';
export default function CreateRole(): React.ReactElement {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [createRole, { loading }] = useMutation(CREATE_ROLE);
const handleRoleCreation = async (roleData: Partial<RoleWithComputedPermissions>) => {
const permissions = getPermissions(roleData.computedPermissions);
await createRole({
variables: {
input: {
name: roleData.name,
description: roleData.description,
permissions,
}
}
});
navigate(URLS.ROLES);
};
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle>{formatMessage('createRolePage.title')}</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleRoleCreation}>
<Stack direction="column" gap={2}>
<TextField
required={true}
name="name"
label={formatMessage('roleForm.name')}
fullWidth
/>
<TextField
name="description"
label={formatMessage('roleForm.description')}
fullWidth
/>
<PermissionCatalogField name='computedPermissions' />
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
>
{formatMessage('createRole.submit')}
</LoadingButton>
</Stack>
</Form>
</Grid>
</Grid>
</Container>
);
}

107
packages/web/src/pages/CreateUser/index.tsx Normal file
View File

@@ -0,0 +1,107 @@
import * as React from 'react';
import { useNavigate } from 'react-router-dom';
import { useMutation } from '@apollo/client';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import Stack from '@mui/material/Stack';
import MuiTextField from '@mui/material/TextField';
import LoadingButton from '@mui/lab/LoadingButton';
import { IUser, IRole } from '@automatisch/types';
import { CREATE_USER } from 'graphql/mutations/create-user.ee';
import * as URLS from 'config/urls';
import Can from 'components/Can';
import useRoles from 'hooks/useRoles.ee';
import PageTitle from 'components/PageTitle';
import Form from 'components/Form';
import ControlledAutocomplete from 'components/ControlledAutocomplete';
import TextField from 'components/TextField';
import useFormatMessage from 'hooks/useFormatMessage';
function generateRoleOptions(roles: IRole[]) {
return roles?.map(({ name: label, id: value }) => ({ label, value }));
}
export default function CreateUser(): React.ReactElement {
const navigate = useNavigate();
const formatMessage = useFormatMessage();
const [createUser, { loading }] = useMutation(CREATE_USER);
const { roles, loading: rolesLoading } = useRoles();
const handleUserCreation = async (userData: Partial<IUser>) => {
await createUser({
variables: {
input: {
fullName: userData.fullName,
password: userData.password,
email: userData.email,
role: {
id: userData.role?.id
}
}
}
});
navigate(URLS.USERS);
};
return (
<Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
<Grid container item xs={12} sm={9} md={8} lg={6}>
<Grid item xs={12} sx={{ mb: [2, 5] }}>
<PageTitle>{formatMessage('createUserPage.title')}</PageTitle>
</Grid>
<Grid item xs={12} justifyContent="flex-end" sx={{ pt: 5 }}>
<Form onSubmit={handleUserCreation}>
<Stack direction="column" gap={2}>
<TextField
required={true}
name="fullName"
label={formatMessage('userForm.fullName')}
fullWidth
/>
<TextField
required={true}
name="email"
label={formatMessage('userForm.email')}
fullWidth
/>
<TextField
required={true}
name="password"
label={formatMessage('userForm.password')}
type="password"
fullWidth
/>
<Can I='update' a='Role'>
<ControlledAutocomplete
name="role.id"
fullWidth
disablePortal
disableClearable={true}
options={generateRoleOptions(roles)}
renderInput={(params) => <MuiTextField {...params} label={formatMessage('userForm.role')} />}
loading={rolesLoading}
/>
</Can>
<LoadingButton
type="submit"
variant="contained"
color="primary"
sx={{ boxShadow: 2 }}
loading={loading}
>
{formatMessage('createUser.submit')}
</LoadingButton>
</Stack>
</Form>
</Grid>
</Grid>
</Container>
);
}

Some files were not shown because too many files have changed in this diff Show More