Skip to content

Commit b23f9d9

Browse files
lndrtrbnlndrtrbn
committed
rollback datatables on case tasks lines
1 parent 6ac32a2 commit b23f9d9

File tree

5 files changed

+550
-180
lines changed

5 files changed

+550
-180
lines changed

‎opencti-platform/opencti-front/src/private/components/cases/case_incidents/CaseIncident.tsx

Lines changed: 99 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,88 @@
11
import Grid from '@mui/material/Grid';
2-
import React from 'react';
2+
import makeStyles from '@mui/styles/makeStyles';
3+
import React, { useRef } from 'react';
34
import { useFragment } from 'react-relay';
5+
import Typography from '@mui/material/Typography';
6+
import Paper from '@mui/material/Paper';
7+
import useHelper from 'src/utils/hooks/useHelper';
48
import { CaseUtils_case$key } from '@components/cases/__generated__/CaseUtils_case.graphql';
59
import { useFormatter } from '../../../../components/i18n';
610
import { convertMarkings } from '../../../../utils/edition';
711
import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
12+
import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
813
import Security from '../../../../utils/Security';
914
import StixCoreObjectExternalReferences from '../../analyses/external_references/StixCoreObjectExternalReferences';
1015
import StixCoreObjectOrStixCoreRelationshipNotes from '../../analyses/notes/StixCoreObjectOrStixCoreRelationshipNotes';
1116
import ContainerStixObjectsOrStixRelationships from '../../common/containers/ContainerStixObjectsOrStixRelationships';
1217
import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
1318
import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
14-
import CaseTasksLines from '../tasks/CaseTasksLines';
19+
import { CaseTasksLinesQuery, CaseTasksLinesQuery$variables } from '../tasks/__generated__/CaseTasksLinesQuery.graphql';
20+
import CaseTasksLines, { caseTasksLinesQuery } from '../tasks/CaseTasksLines';
1521
import { caseFragment } from '../CaseUtils';
1622
import CaseIncidentDetails from './CaseIncidentDetails';
1723
import CaseIncidentEdition from './CaseIncidentEdition';
18-
import useHelper from '../../../../utils/hooks/useHelper';
24+
import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
25+
import { tasksDataColumns } from '../tasks/TasksLine';
26+
import ListLines from '../../../../components/list_lines/ListLines';
27+
import { CaseTasksLineDummy } from '../tasks/CaseTasksLine';
28+
import { isFilterGroupNotEmpty, useRemoveIdAndIncorrectKeysFromFilterGroupObject } from '../../../../utils/filters/filtersUtils';
29+
import { FilterGroup } from '../../../../utils/filters/filtersHelpers-types';
1930
import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
2031
import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
2132

33+
// Deprecated - https://mui.com/system/styles/basics/
34+
// Do not use it for new code.
35+
const useStyles = makeStyles(() => ({
36+
paper: {
37+
margin: '10px 0 0 0',
38+
padding: 0,
39+
borderRadius: 4,
40+
},
41+
}));
42+
2243
interface CaseIncidentProps {
2344
caseIncidentData: CaseUtils_case$key;
2445
enableReferences: boolean;
2546
}
2647

2748
const CaseIncident: React.FC<CaseIncidentProps> = ({ caseIncidentData, enableReferences }) => {
49+
const classes = useStyles();
2850
const { t_i18n } = useFormatter();
51+
const ref = useRef(null);
2952
const caseIncident = useFragment(caseFragment, caseIncidentData);
3053
const { isFeatureEnable } = useHelper();
3154
const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
3255
const { canEdit } = useGetCurrentUserAccessRight(caseIncident.currentUserAccessRight);
3356

57+
const LOCAL_STORAGE_KEY_CASE_TASKS = `cases-${caseIncident.id}-caseTask`;
58+
59+
const { viewStorage, helpers, paginationOptions } = usePaginationLocalStorage<CaseTasksLinesQuery$variables>(
60+
LOCAL_STORAGE_KEY_CASE_TASKS,
61+
{
62+
searchTerm: '',
63+
sortBy: 'created',
64+
orderAsc: false,
65+
},
66+
);
67+
const { sortBy, orderAsc, filters } = viewStorage;
68+
const userFilters = useRemoveIdAndIncorrectKeysFromFilterGroupObject(filters, ['Case-Incident']);
69+
const contextTaskFilters: FilterGroup = {
70+
mode: 'and',
71+
filters: [
72+
{ key: 'entity_type', operator: 'eq', mode: 'or', values: ['Task'] },
73+
{ key: 'objects', operator: 'eq', mode: 'or', values: [caseIncident.id] },
74+
],
75+
filterGroups: userFilters && isFilterGroupNotEmpty(userFilters) ? [userFilters] : [],
76+
};
77+
const queryTaskPaginationOptions = {
78+
...paginationOptions,
79+
filters: contextTaskFilters,
80+
} as unknown as CaseTasksLinesQuery$variables;
81+
const queryRef = useQueryLoading<CaseTasksLinesQuery>(
82+
caseTasksLinesQuery,
83+
queryTaskPaginationOptions,
84+
);
85+
3486
const caseIncidentResponseOverviewLayoutCustomization = useOverviewLayoutCustomization(caseIncident.entity_type);
3587

3688
return (
@@ -61,12 +113,50 @@ const CaseIncident: React.FC<CaseIncidentProps> = ({ caseIncidentData, enableRef
61113
);
62114
case 'task':
63115
return (
64-
<Grid key={key} item xs={width}>
65-
<CaseTasksLines
66-
caseId={caseIncident.id}
67-
defaultMarkings={convertMarkings(caseIncident)}
68-
enableReferences={enableReferences}
69-
/>
116+
<Grid key={key} item xs={width} ref={ref}>
117+
{queryRef && (
118+
<React.Suspense
119+
fallback={
120+
<div style={{ height: '100%' }}>
121+
<Typography
122+
variant="h4"
123+
gutterBottom={true}
124+
style={{ marginBottom: 10 }}
125+
>
126+
{t_i18n('Tasks')}
127+
</Typography>
128+
<Paper classes={{ root: classes.paper }} variant="outlined">
129+
<ListLines
130+
sortBy={sortBy}
131+
orderAsc={orderAsc}
132+
handleSort={helpers.handleSort}
133+
dataColumns={tasksDataColumns}
134+
inline={true}
135+
secondaryAction={true}
136+
>
137+
{Array(20)
138+
.fill(0)
139+
.map((_, idx) => (
140+
<CaseTasksLineDummy key={idx} />
141+
))}
142+
</ListLines>
143+
</Paper>
144+
</div>
145+
}
146+
>
147+
<CaseTasksLines
148+
queryRef={queryRef}
149+
paginationOptions={queryTaskPaginationOptions}
150+
caseId={caseIncident.id}
151+
sortBy={sortBy}
152+
orderAsc={orderAsc}
153+
handleSort={helpers.handleSort}
154+
defaultMarkings={convertMarkings(caseIncident)}
155+
containerRef={ref}
156+
enableReferences={enableReferences}
157+
/>
158+
</React.Suspense>
159+
)}
70160
</Grid>
71161
);
72162
case 'originOfTheCase':

‎opencti-platform/opencti-front/src/private/components/cases/case_rfis/CaseRfi.tsx

Lines changed: 102 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,91 @@
11
import Grid from '@mui/material/Grid';
2-
import React from 'react';
2+
import makeStyles from '@mui/styles/makeStyles';
3+
import React, { useRef } from 'react';
34
import { useFragment } from 'react-relay';
5+
import Typography from '@mui/material/Typography';
6+
import Paper from '@mui/material/Paper';
7+
import useHelper from 'src/utils/hooks/useHelper';
48
import { convertMarkings } from '../../../../utils/edition';
59
import { KNOWLEDGE_KNUPDATE } from '../../../../utils/hooks/useGranted';
10+
import useQueryLoading from '../../../../utils/hooks/useQueryLoading';
611
import Security from '../../../../utils/Security';
712
import StixCoreObjectExternalReferences from '../../analyses/external_references/StixCoreObjectExternalReferences';
813
import StixCoreObjectOrStixCoreRelationshipNotes from '../../analyses/notes/StixCoreObjectOrStixCoreRelationshipNotes';
914
import ContainerStixObjectsOrStixRelationships from '../../common/containers/ContainerStixObjectsOrStixRelationships';
1015
import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
1116
import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
1217
import { CaseUtils_case$key } from '../__generated__/CaseUtils_case.graphql';
13-
import CaseTasksLines from '../tasks/CaseTasksLines';
18+
import CaseTasksLines, { caseTasksLinesQuery } from '../tasks/CaseTasksLines';
1419
import { caseFragment } from '../CaseUtils';
1520
import CaseRfiDetails from './CaseRfiDetails';
1621
import CaseRfiEdition from './CaseRfiEdition';
1722
import { useFormatter } from '../../../../components/i18n';
18-
import useHelper from '../../../../utils/hooks/useHelper';
23+
import { usePaginationLocalStorage } from '../../../../utils/hooks/useLocalStorage';
24+
import { CaseTasksLinesQuery, CaseTasksLinesQuery$variables } from '../tasks/__generated__/CaseTasksLinesQuery.graphql';
25+
import ListLines from '../../../../components/list_lines/ListLines';
26+
import { tasksDataColumns } from '../tasks/TasksLine';
27+
import { CaseTasksLineDummy } from '../tasks/CaseTasksLine';
28+
import { isFilterGroupNotEmpty, useRemoveIdAndIncorrectKeysFromFilterGroupObject } from '../../../../utils/filters/filtersUtils';
29+
import { FilterGroup } from '../../../../utils/filters/filtersHelpers-types';
1930
import useOverviewLayoutCustomization from '../../../../utils/hooks/useOverviewLayoutCustomization';
20-
import { useGetCurrentUserAccessRight } from '../../../../utils/authorizedMembers';
31+
32+
// Deprecated - https://mui.com/system/styles/basics/
33+
// Do not use it for new code.
34+
const useStyles = makeStyles(() => ({
35+
paper: {
36+
margin: '10px 0 0 0',
37+
padding: 0,
38+
borderRadius: 4,
39+
},
40+
}));
2141

2242
interface CaseRfiProps {
2343
caseRfiData: CaseUtils_case$key;
2444
enableReferences: boolean;
2545
}
2646

2747
const CaseRfi: React.FC<CaseRfiProps> = ({ caseRfiData, enableReferences }) => {
48+
const classes = useStyles();
2849
const { t_i18n } = useFormatter();
50+
const ref = useRef(null);
2951
const caseRfi = useFragment(caseFragment, caseRfiData);
3052
const { isFeatureEnable } = useHelper();
3153
const isFABReplaced = isFeatureEnable('FAB_REPLACEMENT');
32-
const { canEdit } = useGetCurrentUserAccessRight(caseRfi.currentUserAccessRight);
3354
const overviewLayoutCustomization = useOverviewLayoutCustomization(caseRfi.entity_type);
3455

56+
const LOCAL_STORAGE_KEY = `cases-${caseRfi.id}-caseTask`;
57+
const { viewStorage, helpers, paginationOptions } = usePaginationLocalStorage<CaseTasksLinesQuery$variables>(
58+
LOCAL_STORAGE_KEY,
59+
{
60+
searchTerm: '',
61+
sortBy: 'name',
62+
orderAsc: true,
63+
},
64+
);
65+
const { sortBy, orderAsc, filters } = viewStorage;
66+
67+
const userFilters = useRemoveIdAndIncorrectKeysFromFilterGroupObject(filters, ['Case-Rfi']);
68+
const contextTaskFilters: FilterGroup = {
69+
mode: 'and',
70+
filters: [
71+
{ key: 'entity_type', operator: 'eq', mode: 'or', values: ['Task'] },
72+
{ key: 'objects', operator: 'eq', mode: 'or', values: [caseRfi.id] },
73+
],
74+
filterGroups: userFilters && isFilterGroupNotEmpty(userFilters) ? [userFilters] : [],
75+
};
76+
77+
const queryTaskPaginationOptions = {
78+
...paginationOptions,
79+
filters: contextTaskFilters,
80+
} as unknown as CaseTasksLinesQuery$variables;
81+
const queryRef = useQueryLoading<CaseTasksLinesQuery>(
82+
caseTasksLinesQuery,
83+
queryTaskPaginationOptions,
84+
);
3585
return (
3686
<>
3787
<Grid
38-
container
88+
container={true}
3989
spacing={3}
4090
style={{ marginBottom: 20 }}
4191
>
@@ -60,12 +110,51 @@ const CaseRfi: React.FC<CaseRfiProps> = ({ caseRfiData, enableReferences }) => {
60110
);
61111
case 'task':
62112
return (
63-
<Grid key={key} item xs={width}>
64-
<CaseTasksLines
65-
caseId={caseRfi.id}
66-
defaultMarkings={convertMarkings(caseRfi)}
67-
enableReferences={enableReferences}
68-
/>
113+
<Grid key={key} item xs={width} ref={ref}>
114+
{queryRef && (
115+
<React.Suspense
116+
fallback={
117+
<div style={{ height: '100%' }}>
118+
<Typography
119+
variant="h4"
120+
gutterBottom={true}
121+
style={{ marginBottom: 10 }}
122+
>
123+
{t_i18n('Tasks')}
124+
</Typography>
125+
<Paper classes={{ root: classes.paper }} variant="outlined">
126+
<ListLines
127+
helpers={helpers}
128+
sortBy={sortBy}
129+
orderAsc={orderAsc}
130+
handleSort={helpers.handleSort}
131+
dataColumns={tasksDataColumns}
132+
inline={true}
133+
secondaryAction={true}
134+
>
135+
{Array(20)
136+
.fill(0)
137+
.map((_, idx) => (
138+
<CaseTasksLineDummy key={idx} />
139+
))}
140+
</ListLines>
141+
</Paper>
142+
</div>
143+
}
144+
>
145+
<CaseTasksLines
146+
queryRef={queryRef}
147+
paginationOptions={queryTaskPaginationOptions}
148+
caseId={caseRfi.id}
149+
sortBy={sortBy}
150+
orderAsc={orderAsc}
151+
handleSort={helpers.handleSort}
152+
defaultMarkings={convertMarkings(caseRfi)}
153+
containerRef={ref}
154+
enableReferences={enableReferences}
155+
/>
156+
</React.Suspense>
157+
)}
69158
</Grid>
70159
);
71160
case 'originOfTheCase':
@@ -134,7 +223,7 @@ const CaseRfi: React.FC<CaseRfiProps> = ({ caseRfiData, enableReferences }) => {
134223
}
135224
</Grid>
136225
{!isFABReplaced && (
137-
<Security needs={[KNOWLEDGE_KNUPDATE]} hasAccess={canEdit}>
226+
<Security needs={[KNOWLEDGE_KNUPDATE]}>
138227
<CaseRfiEdition caseId={caseRfi.id} />
139228
</Security>
140229
)}

0 commit comments

Comments
 (0)