Skip to content

Commit

Permalink
[frontend] Fix group member edition (#4930)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kedae
Kedae committed Nov 29, 2023
1 parent 806dab4 commit 7a85352
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 67 deletions.
102 changes: 60 additions & 42 deletions ...i-platform/opencti-front/src/private/components/settings/groups/GroupEditionContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import { graphql, PreloadedQuery, useFragment, usePreloadedQuery } from 'react-relay';
import Drawer, { DrawerVariant } from '@components/common/drawer/Drawer';
import { GroupUsersLinesQuery$variables } from '@components/settings/users/__generated__/GroupUsersLinesQuery.graphql';
import GroupEditionOverview from './GroupEditionOverview';
import Loader, { LoaderVariant } from '../../../../components/Loader';
import GroupEditionRoles, { groupEditionRolesLinesSearchQuery } from './GroupEditionRoles';
Expand All @@ -13,8 +14,9 @@ import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
import { GroupEditionRolesLinesSearchQuery } from './__generated__/GroupEditionRolesLinesSearchQuery.graphql';
import { GroupEditionContainerQuery } from './__generated__/GroupEditionContainerQuery.graphql';
import { GroupEditionContainer_group$key } from './__generated__/GroupEditionContainer_group.graphql';
import ErrorNotFound from '../../../../components/ErrorNotFound';
import GroupEditionMarkings from './GroupEditionMarkings';
import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
import ErrorNotFound from '../../../../components/ErrorNotFound';

export const groupEditionContainerQuery = graphql`
query GroupEditionContainerQuery($id: String!) {
Expand All @@ -31,9 +33,16 @@ const GroupEditionContainerFragment = graphql`
rolesOrderMode: { type: "OrderingMode", defaultValue: asc }
) {
id
members {
edges {
node {
id
name
}
}
}
...GroupEditionOverview_group
...GroupEditionMarkings_group
...GroupEditionUsers_group
...GroupEditionRoles_group
@arguments(
orderBy: $rolesOrderBy
Expand All @@ -52,51 +61,60 @@ interface GroupEditionContainerProps {
open?: boolean
}

const GroupEditionContainer: FunctionComponent<GroupEditionContainerProps> = ({ groupQueryRef, handleClose = () => {}, open }) => {
const GroupEditionContainer: FunctionComponent<GroupEditionContainerProps> = ({
groupQueryRef, handleClose = () => {
}, open,
}) => {
const { t } = useFormatter();

const [currentTab, setTab] = useState(0);

const groupData = usePreloadedQuery<GroupEditionContainerQuery>(groupEditionContainerQuery, groupQueryRef);
const roleQueryRef = useQueryLoading<GroupEditionRolesLinesSearchQuery>(groupEditionRolesLinesSearchQuery);
if (groupData.group) {
const group = useFragment<GroupEditionContainer_group$key>(
GroupEditionContainerFragment,
groupData.group,
);
const { editContext } = group;
return (
<Drawer
title={t('Update a group')}
variant={open == null ? DrawerVariant.updateWithPanel : undefined}
context={editContext}
onClose={handleClose}
open={open}
>
<>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={currentTab} onChange={(event, value) => setTab(value)}>
<Tab label={t('Overview')} />
<Tab label={t('Roles')} />
<Tab label={t('Markings')} />
<Tab label={t('Members')} />
</Tabs>
</Box>
{currentTab === 0 && (
<GroupEditionOverview group={group} context={editContext} />
)}
{currentTab === 1 && roleQueryRef && (
<React.Suspense
fallback={<Loader variant={LoaderVariant.inElement} />}
>
<GroupEditionRoles group={group} queryRef={roleQueryRef} />
</React.Suspense>
)}
{currentTab === 2 && <GroupEditionMarkings group={group} />}
{currentTab === 3 && <GroupEditionUsers group={group} />}
</>
</Drawer>
);
const group = useFragment<GroupEditionContainer_group$key>(
GroupEditionContainerFragment,
groupData.group,
);

const { paginationOptions } = usePaginationLocalStorage<GroupUsersLinesQuery$variables>(`group-${group?.id}-users`, {});

if (!group) {
return <ErrorNotFound />;
}
return <ErrorNotFound />;

const { editContext } = group;
return (
<Drawer
title={t('Update a group')}
variant={open == null ? DrawerVariant.updateWithPanel : undefined}
context={editContext}
onClose={handleClose}
open={open}
>
<>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={currentTab} onChange={(event, value) => setTab(value)}>
<Tab label={t('Overview')} />
<Tab label={t('Roles')} />
<Tab label={t('Markings')} />
<Tab label={t('Members')} />
</Tabs>
</Box>
{currentTab === 0 && (
<GroupEditionOverview group={group} context={editContext} />
)}
{currentTab === 1 && roleQueryRef && (
<React.Suspense
fallback={<Loader variant={LoaderVariant.inElement} />}
>
<GroupEditionRoles group={group} queryRef={roleQueryRef} />
</React.Suspense>
)}
{currentTab === 2 && <GroupEditionMarkings group={group} />}
{currentTab === 3 && <GroupEditionUsers group={group} paginationOptions={paginationOptions} />}
</>
</Drawer>
);
};

export default GroupEditionContainer;
57 changes: 32 additions & 25 deletions opencti-platform/opencti-front/src/private/components/settings/groups/GroupEditionUsers.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
import * as PropTypes from 'prop-types';
import { graphql, createFragmentContainer } from 'react-relay';
import { graphql } from 'react-relay';
import { compose, map, pathOr, pipe } from 'ramda';
import withStyles from '@mui/styles/withStyles';
import List from '@mui/material/List';
Expand All @@ -13,6 +13,7 @@ import { PersonOutlined } from '@mui/icons-material';
import { commitMutation, QueryRenderer } from '../../../../relay/environment';
import inject18n from '../../../../components/i18n';
import { usersLinesSearchQuery } from '../users/UsersLines';
import { deleteNodeFromId, insertNode } from '../../../../utils/store';

const styles = (theme) => ({
list: {
Expand All @@ -33,7 +34,10 @@ const userMutationRelationAdd = graphql`
groupEdit(id: $id) {
relationAdd(input: $input) {
to {
...GroupEditionUsers_group
...GroupEditionContainer_group
}
from {
...UserLine_node
}
}
}
Expand All @@ -48,23 +52,39 @@ const userMutationRelationDelete = graphql`
) {
groupEdit(id: $id) {
relationDelete(fromId: $fromId, relationship_type: $relationship_type) {
...GroupEditionUsers_group
id
...GroupEditionContainer_group
}
}
}
`;

class GroupEditionUsersComponent extends Component {
class GroupEditionUsers extends Component {
handleToggle(userId, groupUser, event) {
const options = { ...this.props.paginationOptions };
Object.keys(options).forEach((key) => options[key] === undefined && delete options[key]);
if (event.target.checked) {
const input = {
fromId: userId,
relationship_type: 'member-of',
};
commitMutation({
mutation: userMutationRelationAdd,
variables: {
id: this.props.group.id,
input: {
fromId: userId,
relationship_type: 'member-of',
},
input,
},
updater: (store) => {
insertNode(
store,
'Pagination_group_members',
options,
'groupEdit',
this.props.group.id,
'relationAdd',
input,
'from',
);
},
});
} else if (groupUser !== undefined) {
Expand All @@ -75,6 +95,9 @@ class GroupEditionUsersComponent extends Component {
fromId: groupUser.id,
relationship_type: 'member-of',
},
updater: (store) => {
deleteNodeFromId(store, this.props.group.id, 'Pagination_group_members', options, groupUser.id);
},
});
}
}
Expand Down Expand Up @@ -134,7 +157,7 @@ class GroupEditionUsersComponent extends Component {
}
}

GroupEditionUsersComponent.propTypes = {
GroupEditionUsers.propTypes = {
classes: PropTypes.object,
theme: PropTypes.object,
t: PropTypes.func,
Expand All @@ -143,20 +166,4 @@ GroupEditionUsersComponent.propTypes = {
me: PropTypes.object,
};

const GroupEditionUsers = createFragmentContainer(GroupEditionUsersComponent, {
group: graphql`
fragment GroupEditionUsers_group on Group {
id
members {
edges {
node {
id
name
}
}
}
}
`,
});

export default compose(inject18n, withStyles(styles))(GroupEditionUsers);

0 comments on commit 7a85352

Please sign in to comment.