STRLCPY/opencti

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponent.tsx

1	1		import React, { FunctionComponent } from 'react';
2		-	import { createFragmentContainer, graphql } from 'react-relay';
	2	+	import { graphql, useFragment } from 'react-relay';
3	3		import makeStyles from '@mui/styles/makeStyles';
4	4		import Grid from '@mui/material/Grid';
5	5		import StixDomainObjectHeader from '../../common/stix_domain_objects/StixDomainObjectHeader';
		skipped 7 lines
13	13		import StixCoreObjectExternalReferences from '../../analysis/external_references/StixCoreObjectExternalReferences';
14	14		import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
15	15		import StixCoreObjectOrStixCoreRelationshipNotes from '../../analysis/notes/StixCoreObjectOrStixCoreRelationshipNotes';
16		-	import { DataComponent_dataComponent$data } from './__generated__/DataComponent_dataComponent.graphql';
	16	+	import { DataComponent_dataComponent$key } from './__generated__/DataComponent_dataComponent.graphql';
17	17
18	18		const useStyles = makeStyles(() => ({
19	19		container: {
		skipped 5 lines
25	25		}));
26	26
27	27		interface DataComponentComponentProps {
28		-	dataComponent: DataComponent_dataComponent$data
	28	+	data: DataComponent_dataComponent$key
29	29		enableReferences: boolean
30	30		}
31	31
32		-	const DataComponentComponent: FunctionComponent<DataComponentComponentProps> = ({ dataComponent, enableReferences }) => {
	32	+	const DataComponentComponent: FunctionComponent<DataComponentComponentProps> = ({ data, enableReferences }) => {
33	33		const classes = useStyles();
	34	+
	35	+	const dataComponent = useFragment(DataComponentFragment, data);
34	36
35	37		return (
36	38		<div className={classes.container}>
37	39		<StixDomainObjectHeader
38	40		stixDomainObject={dataComponent}
39		-	PopoverComponent={<DataComponentPopover
40		-	dataComponentId={dataComponent.id}
41		-	enableReferences={enableReferences}/>}
	41	+	PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id}/>}
42	42		/>
43	43		<Grid
44	44		container={true}
		skipped 48 lines
93	93		);
94	94		};
95	95
96		-	const DataComponent = createFragmentContainer(DataComponentComponent, {
97		-	dataComponent: graphql`
98		-	fragment DataComponent_dataComponent on DataComponent {
99		-	id
100		-	standard_id
101		-	x_opencti_stix_ids
102		-	spec_version
103		-	revoked
104		-	confidence
105		-	created
106		-	modified
107		-	created_at
108		-	updated_at
109		-	createdBy {
110		-	... on Identity {
111		-	id
112		-	name
113		-	entity_type
114		-	}
115		-	}
116		-	creator {
	96	+	const DataComponentFragment = graphql`
	97	+	fragment DataComponent_dataComponent on DataComponent {
	98	+	id
	99	+	standard_id
	100	+	x_opencti_stix_ids
	101	+	spec_version
	102	+	revoked
	103	+	confidence
	104	+	created
	105	+	modified
	106	+	created_at
	107	+	updated_at
	108	+	createdBy {
	109	+	... on Identity {
117	110		id
118	111		name
119		-	}
120		-	objectMarking {
121		-	edges {
122		-	node {
123		-	id
124		-	definition
125		-	x_opencti_color
126		-	}
127		-	}
	112	+	entity_type
128	113		}
129		-	objectLabel {
130		-	edges {
131		-	node {
132		-	id
133		-	value
134		-	color
135		-	}
	114	+	}
	115	+	creator {
	116	+	id
	117	+	name
	118	+	}
	119	+	objectMarking {
	120	+	edges {
	121	+	node {
	122	+	id
	123	+	definition
	124	+	x_opencti_color
136	125		}
137	126		}
138		-	name
139		-	aliases
140		-	status {
141		-	id
142		-	order
143		-	template {
144		-	name
	127	+	}
	128	+	objectLabel {
	129	+	edges {
	130	+	node {
	131	+	id
	132	+	value
145	133		color
146	134		}
147	135		}
148		-	workflowEnabled
149		-	...DataComponentDetails_dataComponent
	136	+	}
	137	+	name
	138	+	aliases
	139	+	status {
	140	+	id
	141	+	order
	142	+	template {
	143	+	name
	144	+	color
	145	+	}
150	146		}
151		-	`,
152		-	});
	147	+	workflowEnabled
	148	+	...DataComponentDetails_dataComponent
	149	+	}
	150	+	`;
153	151
154		-	export default DataComponent;
	152	+	export default DataComponentComponent;
155	153

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentEdition.tsx

		skipped 94 lines
95	95		return (
96	96		<DataComponentEditionContainer
97	97		dataComponent={result.props.dataComponent}
	98	+	handleClose={handleClose}
98	99		enableReferences={result.props.settings.platform_enable_reference?.includes(
99	100		'Data-Component',
100	101		)}
101		-	handleClose={handleClose}
102	102		/>
103	103		);
104	104		}
		skipped 10 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentEditionContainer.tsx

		skipped 70 lines
71	71		</div>
72	72		<div className={classes.container}>
73	73		<DataComponentEditionOverview
74		-	dataComponent={dataComponent}
	74	+	data={dataComponent}
75	75		enableReferences={enableReferences}
76	76		context={editContext}
77	77		/>
		skipped 23 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentEditionOverview.tsx

1	1		import React, { FunctionComponent } from 'react';
2		-	import { createFragmentContainer, graphql } from 'react-relay';
	2	+	import { graphql, useFragment } from 'react-relay';
3	3		import { Field, Form, Formik } from 'formik';
4	4		import { assoc, pick, pipe } from 'ramda';
5	5		import * as Yup from 'yup';
		skipped 5 lines
11	11		import MarkDownField from '../../../../components/MarkDownField';
12	12		import { convertCreatedBy, convertMarkings, convertStatus } from '../../../../utils/Edition';
13	13		import { useFormatter } from '../../../../components/i18n';
14		-	import { DataComponentEditionOverview_dataComponent$data } from './__generated__/DataComponentEditionOverview_dataComponent.graphql';
	14	+	import { DataComponentEditionOverview_dataComponent$key } from './__generated__/DataComponentEditionOverview_dataComponent.graphql';
15	15		import StatusField from '../../common/form/StatusField';
16	16		import CommitMessage from '../../common/form/CommitMessage';
17	17
		skipped 61 lines
79	79		});
80	80
81	81		interface DataComponentEditionOverviewComponentProps {
82		-	dataComponent: DataComponentEditionOverview_dataComponent$data
	82	+	data: DataComponentEditionOverview_dataComponent$key
83	83		context: ReadonlyArray<{ // TODO: extract
84	84		readonly focusOn: string \| null;
85	85		readonly name: string;
86	86		} \| null> \| null
87		-	enableReferences: boolean,
	87	+	enableReferences?: boolean,
88	88		}
89	89
90	90		const DataComponentEditionOverviewComponent: FunctionComponent<DataComponentEditionOverviewComponentProps> = ({
91		-	dataComponent,
	91	+	data,
92	92		context,
93	93		enableReferences,
94	94		}) => {
95	95		const { t } = useFormatter();
	96	+
	97	+	const dataComponent = useFragment(DataComponentEditionOverviewFragment, data);
96	98
97	99		const handleChangeFocus = (name: string) => {
98	100		commitMutation({
		skipped 220 lines
319	321		)}
320	322		</Formik>
321	323		);
322		-	};
	324	+	}
323	325
324		-	const DataComponentEditionOverview = createFragmentContainer(
325		-	DataComponentEditionOverviewComponent,
326		-	{
327		-	dataComponent: graphql`
328		-	fragment DataComponentEditionOverview_dataComponent on DataComponent {
	326	+	const DataComponentEditionOverviewFragment = graphql`
	327	+	fragment DataComponentEditionOverview_dataComponent on DataComponent {
	328	+	id
	329	+	name
	330	+	description
	331	+	createdBy {
	332	+	... on Identity {
329	333		id
330	334		name
331		-	description
332		-	createdBy {
333		-	... on Identity {
334		-	id
335		-	name
336		-	entity_type
337		-	}
338		-	}
339		-	objectMarking {
340		-	edges {
341		-	node {
342		-	id
343		-	definition
344		-	definition_type
345		-	}
346		-	}
347		-	}
348		-	status {
	335	+	entity_type
	336	+	}
	337	+	}
	338	+	objectMarking {
	339	+	edges {
	340	+	node {
349	341		id
350		-	order
351		-	template {
352		-	name
353		-	color
354		-	}
	342	+	definition
	343	+	definition_type
355	344		}
356		-	workflowEnabled
	345	+	}
	346	+	}
	347	+	status {
	348	+	id
	349	+	order
	350	+	template {
	351	+	name
	352	+	color
357	353		}
358		-	`,
359		-	},
360		-	);
	354	+	}
	355	+	workflowEnabled
	356	+	}
	357	+	`;
361	358
362		-	export default DataComponentEditionOverview;
	359	+	export default DataComponentEditionOverviewComponent;
363	360

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentKnowledge.tsx

1	1		import React, { FunctionComponent } from 'react';
2	2		import { Route, Switch } from 'react-router-dom';
3		-	import { createFragmentContainer, graphql } from 'react-relay';
	3	+	import { graphql, useFragment } from 'react-relay';
4	4		import makeStyles from '@mui/styles/makeStyles';
5	5		import StixCoreRelationship from '../../common/stix_core_relationships/StixCoreRelationship';
6	6		import StixDomainObjectHeader from '../../common/stix_domain_objects/StixDomainObjectHeader';
7	7		import DataComponentPopover from './DataComponentPopover';
8		-	import { DataComponentKnowledge_dataComponent$data } from './__generated__/DataComponentKnowledge_dataComponent.graphql';
	8	+	import { DataComponentKnowledge_dataComponent$key } from './__generated__/DataComponentKnowledge_dataComponent.graphql';
9	9
10	10		const styles = makeStyles(() => ({
11	11		container: {
		skipped 2 lines
14	14		}));
15	15
16	16		interface DataComponentKnowledgeComponentProps {
17		-	dataComponent: DataComponentKnowledge_dataComponent$data
	17	+	data: DataComponentKnowledge_dataComponent$key
18	18		enableReferences: boolean
19	19		}
20	20
21		-	const DataComponentKnowledgeComponent: FunctionComponent<DataComponentKnowledgeComponentProps> = ({ dataComponent, enableReferences }) => {
	21	+	const DataComponentKnowledgeComponent: FunctionComponent<DataComponentKnowledgeComponentProps> = ({
	22	+	data,
	23	+	enableReferences
	24	+	}) => {
22	25		const classes = styles();
	26	+
	27	+	const dataComponent = useFragment(DataComponentKnowledgeFragment, data);
23	28
24	29		return (
25		-	<div className={classes.container}>
26		-	<StixDomainObjectHeader
27		-	stixDomainObject={dataComponent}
28		-	PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id} enableReferences={enableReferences}/>}
29		-	// isOpenctiAlias={true} // TODO: ask to Samuel
	30	+	<div className={classes.container}>
	31	+	<StixDomainObjectHeader
	32	+	stixDomainObject={dataComponent}
	33	+	PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id} />}
	34	+	enableReferences={enableReferences}
	35	+	// isOpenctiAlias={true} // TODO: ask to Samuel
	36	+	/>
	37	+	<Switch>
	38	+	<Route
	39	+	path="/dashboard/techniques/data_component/:dataComponentId/knowledge/relations/:relationId"
	40	+	// @ts-ignore: incompatibility type
	41	+	// TODO: required migration to V6
	42	+	render={(routeProps) => (
	43	+	<StixCoreRelationship
	44	+	entityId={dataComponent.id}
	45	+	{...routeProps}
	46	+	/>
	47	+	)}
30	48		/>
31		-	<Switch>
32		-	<Route
33		-	path="/dashboard/techniques/data_component/:dataComponentId/knowledge/relations/:relationId"
34		-	// @ts-ignore: incompatibility type
35		-	// TODO: required migration to V6
36		-	render={(routeProps) => (
37		-	<StixCoreRelationship
38		-	entityId={dataComponent.id}
39		-	{...routeProps}
40		-	/>
41		-	)}
42		-	/>
43		-	{/* TODO: ask Samuel ? */}
44		-	</Switch>
45		-	</div>
	49	+	{/* TODO: ask Samuel ? */}
	50	+	</Switch>
	51	+	</div>
46	52		);
47		-	};
	53	+	}
48	54
49		-	const DataComponentKnowledge = createFragmentContainer(
50		-	DataComponentKnowledgeComponent,
51		-	{
52		-	dataComponent: graphql`
53		-	fragment DataComponentKnowledge_dataComponent on DataComponent {
54		-	id
55		-	name
56		-	aliases
57		-	}
58		-	`,
59		-	},
60		-	);
	55	+	const DataComponentKnowledgeFragment = graphql`
	56	+	fragment DataComponentKnowledge_dataComponent on DataComponent {
	57	+	id
	58	+	name
	59	+	aliases
	60	+	}
	61	+	`;
61	62
62		-	export default DataComponentKnowledge;
	63	+	export default DataComponentKnowledgeComponent;
63	64

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentLine.tsx

		skipped 8 lines
9	9		import { Theme } from '@mui/material/styles/createTheme';
10	10		import Skeleton from '@mui/material/Skeleton';
11	11		import { useFormatter } from '../../../../components/i18n';
12		-	import { DataColumns, PaginationOptions } from '../../../../components/list_lines';
13	12		import { createFragmentContainer, graphql } from 'react-relay';
	13	+	import { DataComponentLine_node$data } from './__generated__/DataComponentLine_node.graphql';
14	14
15	15		const useStyles = makeStyles((theme: Theme) => ({
16	16		item: {},
		skipped 34 lines
51	51		}));
52	52
53	53		interface DataComponentLineProps {
54		-	node: {
55		-	id: string
56		-	name: string
57		-	description: string
58		-	}
59		-	dataColumns: DataColumns,
60		-	paginationOptions: PaginationOptions
	54	+	node: DataComponentLine_node$data
61	55		}
62	56
63		-	const DataComponentLineComponent: FunctionComponent<DataComponentLineProps> = ({ node, dataColumns, paginationOptions }) => {
	57	+	const DataComponentLineComponent: FunctionComponent<DataComponentLineProps> = ({ node}) => {
64	58		const classes = useStyles();
65	59		const { t } = useFormatter();
66	60
		skipped 35 lines
102	96		fragment DataComponentLine_node on DataComponent {
103	97		id
104	98		name
	99	+	description
105	100		created
106	101		modified
107	102		objectLabel {
		skipped 43 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentOverview.tsx

1	1		import React, { FunctionComponent } from 'react';
2		-	import { map, propOr } from 'ramda';
3		-	import { createFragmentContainer, graphql } from 'react-relay';
	2	+	import { propOr } from 'ramda';
	3	+	import { graphql, useFragment } from 'react-relay';
4	4		import Paper from '@mui/material/Paper';
5	5		import makeStyles from '@mui/styles/makeStyles';
6	6		import Typography from '@mui/material/Typography';
		skipped 1 lines
8	8		import ItemAuthor from '../../../../components/ItemAuthor';
9	9		import ItemMarking from '../../../../components/ItemMarking';
10	10		import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
	11	+	import { DataComponentOverview_dataComponent$key } from './__generated__/DataComponentOverview_dataComponent.graphql';
11	12
12	13		const styles = makeStyles(() => ({
13	14		paper: {
		skipped 6 lines
20	21		}));
21	22
22	23		interface DataComponentOverviewComponentProps {
23		-	dataComponent: any
	24	+	data: DataComponentOverview_dataComponent$key
24	25		}
25	26
26		-	const DataComponentOverviewComponent: FunctionComponent<DataComponentOverviewComponentProps> = ({ dataComponent }) => {
27		-	const { t, fldt } = useFormatter();
	27	+	const DataComponentOverviewComponent: FunctionComponent<DataComponentOverviewComponentProps> = ({ data }) => {
	28	+	const {
	29	+	t,
	30	+	fldt
	31	+	} = useFormatter();
28	32		const classes = styles();
29	33
	34	+	const dataComponent = useFragment(DataComponentOverviewFragment, data);
	35	+
	36	+	const objectMarkings = dataComponent?.objectMarking?.edges \|\| [];
	37	+
30	38		return (
31	39		<div style={{ height: '100%' }} className="break">
32	40		<Typography variant="h4" gutterBottom={true}>
		skipped 3 lines
36	44		<Typography variant="h3" gutterBottom={true}>
37	45		{t('Marking')}
38	46		</Typography>
39		-	{dataComponent.objectMarking.edges.length > 0 ? (
40		-	map(
	47	+	{objectMarkings.length > 0 ? (
	48	+	objectMarkings.map(
41	49		(markingDefinition) => (
42	50		<ItemMarking
43		-	key={markingDefinition.node.id}
44		-	label={markingDefinition.node.definition}
	51	+	key={markingDefinition?.node?.id}
	52	+	label={markingDefinition?.node?.definition}
45	53		/>
46		-	),
47		-	dataComponent.objectMarking.edges,
	54	+	)
48	55		)
49	56		) : (
50	57		<ItemMarking label="TLP:CLEAR" />
		skipped 39 lines
90	97		);
91	98		}
92	99
93		-	const DataComponentOverview = createFragmentContainer(
94		-	DataComponentOverviewComponent,
95		-	{
96		-	dataComponent: graphql`
97		-	fragment DataComponentOverview_dataComponent on DataComponent {
	100	+	const DataComponentOverviewFragment = graphql`
	101	+	fragment DataComponentOverview_dataComponent on DataComponent {
	102	+	id
	103	+	name
	104	+	description
	105	+	created
	106	+	modified
	107	+	objectMarking {
	108	+	edges {
	109	+	node {
	110	+	id
	111	+	definition
	112	+	}
	113	+	}
	114	+	}
	115	+	createdBy {
	116	+	... on Identity {
98	117		id
99	118		name
100		-	description
101		-	created
102		-	modified
103		-	objectMarking {
104		-	edges {
105		-	node {
106		-	id
107		-	definition
108		-	}
109		-	}
110		-	}
111		-	createdBy {
112		-	... on Identity {
113		-	id
114		-	name
115		-	entity_type
116		-	}
117		-	}
	119	+	entity_type
118	120		}
119		-	`,
120		-	},
121		-	);
	121	+	}
	122	+	}
	123	+	`;
122	124
123		-	export default DataComponentOverview;
	125	+	export default DataComponentOverviewComponent;
124	126

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentPopover.tsx

		skipped 44 lines
45	45
46	46		interface DataComponentPopoverProps {
47	47		dataComponentId: string
48		-	enableReferences: boolean
49	48		}
50	49
51		-	const DataComponentPopover: FunctionComponent<DataComponentPopoverProps> = ({ dataComponentId, enableReferences }) => {
	50	+	const DataComponentPopover: FunctionComponent<DataComponentPopoverProps> = ({ dataComponentId }) => {
52	51		const { t } = useFormatter();
53	52		const classes = styles();
54	53		const history = useHistory();
		skipped 117 lines
172	171		<DataComponentEditionContainer
173	172		dataComponent={result.props.dataComponent}
174	173		handleClose={handleCloseEdit}
175		-	enableReferences={enableReferences}
	174	+	enableReferences={result.props.settings.platform_enable_reference?.includes(
	175	+	'Data-Component',
	176	+	)}
176	177		/>
177	178		);
178	179		}
		skipped 10 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentsLines.tsx

		skipped 31 lines
32	32		hasMore={relay.hasMore}
33	33		dataList={dataComponents}
34	34		LineComponent={ DataComponentLine }
35		-	DummyLineComponent={ DataComponentLineDummyComponent }
	35	+	DummyLineComponent={ <DataComponentLineDummyComponent /> }
36	36		dataColumns={dataColumns}
37	37		paginationOptions={paginationOptions}
38	38		/>
		skipped 58 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/Root.tsx

		skipped 88 lines
89	89		render={(routeProps) => (
90	90		<DataComponent
91	91		{...routeProps}
92		-	dataComponent={props.dataComponent}
	92	+	data={props.dataComponent}
93	93		/>
94	94		)}
95	95		/>
		skipped 77 lines

[frontend] Migrate data component to TSX