-
-
-
Roles and Access
-
-
-
setShowmModal(true) }
- />
+ return (
+
+
+ {/* }
+ onClose={closeModal}
+ /> */}
+
+
+
+
Roles and Access
+
+
+ setShowmModal(true)} />
+
+
+
+
+
+
+
+
+
+ Title
+
+
+ Project Access
+
+
+ Feature Access
+
+
+
+ {roles.map((role) => (
+
+ ))}
+
-
-
-
-
-
Title
-
Project Access
-
Feature Access
-
-
- {roles.map(role => (
-
- ))}
-
-
-
-
- )
+
+
+ );
}
-export default connect(state => {
- const permissions = state.getIn(['roles', 'permissions'])
- const permissionsMap = {}
- permissions.forEach(p => {
- permissionsMap[p.value] = p.text
- });
- const projects = state.getIn([ 'site', 'list' ])
- return {
- instance: state.getIn(['roles', 'instance']) || null,
- permissionsMap: permissionsMap,
- roles: state.getIn(['roles', 'list']),
- removeErrors: state.getIn(['roles', 'removeRequest', 'errors']),
- loading: state.getIn(['roles', 'fetchRequest', 'loading']),
- account: state.getIn([ 'user', 'account' ]),
- projectsMap: projects.reduce((acc, p) => {
- acc[ p.get('id') ] = p.get('name')
- return acc
- }
- , {}),
- }
-}, { init, edit, fetchList, deleteRole, resetErrors })(withPageTitle('Roles & Access - OpenReplay Preferences')(Roles))
\ No newline at end of file
+export default connect(
+ (state: any) => {
+ const permissions = state.getIn(['roles', 'permissions']);
+ const permissionsMap = {};
+ permissions.forEach((p: any) => {
+ permissionsMap[p.value] = p.text;
+ });
+ const projects = state.getIn(['site', 'list']);
+ return {
+ instance: state.getIn(['roles', 'instance']) || null,
+ permissionsMap: permissionsMap,
+ roles: state.getIn(['roles', 'list']),
+ removeErrors: state.getIn(['roles', 'removeRequest', 'errors']),
+ loading: state.getIn(['roles', 'fetchRequest', 'loading']),
+ account: state.getIn(['user', 'account']),
+ projectsMap: projects.reduce((acc: any, p: any) => {
+ acc[p.get('id')] = p.get('name');
+ return acc;
+ }, {}),
+ };
+ },
+ { init, edit, fetchList, deleteRole, resetErrors }
+)(withPageTitle('Roles & Access - OpenReplay Preferences')(Roles));
diff --git a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
index 7aed70131..93a320d54 100644
--- a/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
+++ b/frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx
@@ -1,203 +1,195 @@
-import React, { useRef, useEffect } from 'react'
-import { connect } from 'react-redux'
-import stl from './roleForm.module.css'
-import { save, edit } from 'Duck/roles'
-import { Form, Input, Button, Checkbox, Icon } from 'UI'
+import React, { useRef, useEffect } from 'react';
+import { connect } from 'react-redux';
+import stl from './roleForm.module.css';
+import { save, edit } from 'Duck/roles';
+import { Form, Input, Button, Checkbox, Icon } from 'UI';
import Select from 'Shared/Select';
interface Permission {
- name: string,
- value: string
+ name: string;
+ value: string;
}
interface Props {
- role: any,
- edit: (role: any) => void,
- save: (role: any) => Promise
,
- closeModal: (toastMessage?: string) => void,
- saving: boolean,
- permissions: Array[]
- projectOptions: Array[],
- permissionsMap: any,
- projectsMap: any,
- deleteHandler: (id: any) => Promise,
+ role: any;
+ edit: (role: any) => void;
+ save: (role: any) => Promise;
+ closeModal: (toastMessage?: string) => void;
+ saving: boolean;
+ permissions: Array[];
+ projectOptions: Array[];
+ permissionsMap: any;
+ projectsMap: any;
+ deleteHandler: (id: any) => Promise;
}
const RoleForm = (props: Props) => {
- const { role, edit, save, closeModal, saving, permissions, projectOptions, permissionsMap, projectsMap } = props
- let focusElement = useRef(null)
- const _save = () => {
- save(role).then(() => {
- closeModal(role.exists() ? "Role updated" : "Role created");
- })
- }
+ const { role, edit, save, closeModal, saving, permissions, projectOptions, permissionsMap, projectsMap } = props;
+ let focusElement = useRef(null);
+ const _save = () => {
+ save(role).then(() => {
+ closeModal(role.exists() ? 'Role updated' : 'Role created');
+ });
+ };
- const write = ({ target: { value, name } }) => edit({ [ name ]: value })
+ const write = ({ target: { value, name } }) => edit({ [name]: value });
- const onChangePermissions = (e) => {
- const { permissions } = role
- const index = permissions.indexOf(e)
- const _perms = permissions.contains(e) ? permissions.remove(index) : permissions.push(e)
- edit({ permissions: _perms })
- }
+ const onChangePermissions = (e) => {
+ const { permissions } = role;
+ const index = permissions.indexOf(e);
+ const _perms = permissions.contains(e) ? permissions.remove(index) : permissions.push(e);
+ edit({ permissions: _perms });
+ };
- const onChangeProjects = (e) => {
- const { projects } = role
- const index = projects.indexOf(e)
- const _projects = index === -1 ? projects.push(e) : projects.remove(index)
- edit({ projects: _projects })
- }
+ const onChangeProjects = (e) => {
+ const { projects } = role;
+ const index = projects.indexOf(e);
+ const _projects = index === -1 ? projects.push(e) : projects.remove(index);
+ edit({ projects: _projects });
+ };
- const writeOption = ({ name, value }: any) => {
- if (name === 'permissions') {
- onChangePermissions(value)
- } else if (name === 'projects') {
- onChangeProjects(value)
- }
- }
+ const writeOption = ({ name, value }: any) => {
+ if (name === 'permissions') {
+ onChangePermissions(value);
+ } else if (name === 'projects') {
+ onChangeProjects(value);
+ }
+ };
- const toggleAllProjects = () => {
- const { allProjects } = role
- edit({ allProjects: !allProjects })
- }
+ const toggleAllProjects = () => {
+ const { allProjects } = role;
+ edit({ allProjects: !allProjects });
+ };
- useEffect(() => {
- focusElement && focusElement.current && focusElement.current.focus()
- }, [])
+ useEffect(() => {
+ focusElement && focusElement.current && focusElement.current.focus();
+ }, []);
- return (
-