STRLCPY/opencti

■ ■ ■ ■ ■ ■

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

1	1		import React, { FunctionComponent } from 'react';
2	2		import { createFragmentContainer, graphql } from 'react-relay';
3	3		import makeStyles from '@mui/styles/makeStyles';
4		-	import { useFormatter } from '../../../../components/i18n';
	4	+	import Grid from '@mui/material/Grid';
5	5		import StixDomainObjectHeader from '../../common/stix_domain_objects/StixDomainObjectHeader';
6	6		import DataComponentPopover from './DataComponentPopover';
7	7		import Security, { KNOWLEDGE_KNUPDATE } from '../../../../utils/Security';
8	8		import DataComponentEdition from './DataComponentEdition';
9		-	import Grid from '@mui/material/Grid';
10	9		import StixDomainObjectOverview from '../../common/stix_domain_objects/StixDomainObjectOverview';
11	10		import DataComponentDetails from './DataComponentDetails';
12	11		import SimpleStixObjectOrStixRelationshipStixCoreRelationships from '../../common/stix_core_relationships/SimpleStixObjectOrStixRelationshipStixCoreRelationships';
		skipped 2 lines
15	14		import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
16	15		import StixCoreObjectOrStixCoreRelationshipNotes from '../../analysis/notes/StixCoreObjectOrStixCoreRelationshipNotes';
17	16		import { DataComponent_dataComponent$data } from './__generated__/DataComponent_dataComponent.graphql';
18		-	import ChannelPopover from '../../arsenal/channels/ChannelPopover';
19	17
20	18		const useStyles = makeStyles(() => ({
21	19		container: {
		skipped 16 lines
38	36		<div className={classes.container}>
39	37		<StixDomainObjectHeader
40	38		stixDomainObject={dataComponent}
41		-	PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id}/>}
42		-	enableReferences={enableReferences}
	39	+	PopoverComponent={<DataComponentPopover
	40	+	dataComponentId={dataComponent.id}
	41	+	enableReferences={enableReferences}/>}
43	42		/>
44	43		<Grid
45	44		container={true}
		skipped 111 lines

■ ■ ■ ■ ■ ■

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

		skipped 4 lines
5	5		import Typography from '@mui/material/Typography';
6	6		import Button from '@mui/material/Button';
7	7		import IconButton from '@mui/material/IconButton';
	8	+	import makeStyles from '@mui/styles/makeStyles';
8	9		import Fab from '@mui/material/Fab';
9	10		import { Add, Close } from '@mui/icons-material';
10	11		import * as Yup from 'yup';
11	12		import { graphql } from 'react-relay';
	13	+	import { FormikHelpers } from 'formik/dist/types';
12	14		import { ConnectionHandler, RecordProxy, RecordSourceSelectorProxy } from 'relay-runtime';
13	15		import { useFormatter } from '../../../../components/i18n';
14		-	import { commitMutation, handleErrorInForm, } from '../../../../relay/environment';
	16	+	import { commitMutation, handleErrorInForm } from '../../../../relay/environment';
15	17		import TextField from '../../../../components/TextField';
16	18		import CreatedByField, { CreatedBy } from '../../common/form/CreatedByField';
17	19		import ObjectLabelField, { ObjectLabel } from '../../common/form/ObjectLabelField';
18	20		import ObjectMarkingField, { ObjectMarking } from '../../common/form/ObjectMarkingField';
19	21		import MarkDownField from '../../../../components/MarkDownField';
20		-	import makeStyles from '@mui/styles/makeStyles';
21	22		import { Theme } from '../../../../components/Theme';
22	23		import { PaginationOptions } from '../../../../components/list_lines';
23		-	import { FormikHelpers } from 'formik/dist/types';
24	24		import ExternalReferencesField, { ExternalReference } from '../../common/form/ExternalReferencesField';
25	25
26	26		const styles = makeStyles<Theme>((theme) => ({
		skipped 94 lines
121	121		}
122	122
123	123		const DataComponentCreation: FunctionComponent<DataComponentCreationProps> = ({
124		-	paginationOptions
	124	+	paginationOptions,
125	125		}) => {
126	126		const { t } = useFormatter();
127	127		const classes = styles();
		skipped 4 lines
132	132		createdBy: {} as CreatedBy,
133	133		objectMarking: [],
134	134		objectLabel: [],
135		-	externalReferences: []
	135	+	externalReferences: [],
136	136		};
137	137
138	138		const handleOpen = () => {
139	139		setOpen(true);
140		-	}
	140	+	};
141	141
142	142		const handleClose = () => {
143	143		setOpen(false);
144		-	}
	144	+	};
145	145
146	146		const onSubmit = (
147	147		values: DataComponentFormProps,
148		-	{ setSubmitting, setErrors, resetForm }: FormikHelpers<DataComponentFormProps>
	148	+	{ setSubmitting, setErrors, resetForm }: FormikHelpers<DataComponentFormProps>,
149	149		) => {
150	150		const finalValues = {
151	151		name: values.name,
152	152		description: values.description,
153	153		createdBy: values.createdBy?.value,
154		-	objectMarking: values.objectMarking.map(v => v.value),
155		-	objectLabel: values.objectLabel.map(v => v.value),
156		-	externalReferences: values.objectLabel.map(v => v.value)
	154	+	objectMarking: values.objectMarking.map((v) => v.value),
	155	+	objectLabel: values.objectLabel.map((v) => v.value),
	156	+	externalReferences: values.objectLabel.map((v) => v.value),
157	157		};
158	158		commitMutation({
159	159		mutation: dataComponentMutation,
		skipped 26 lines
186	186		optimisticUpdater: undefined,
187	187		optimisticResponse: undefined,
188	188		});
189		-	}
	189	+	};
190	190
191	191		const onReset = () => {
192	192		handleClose();
193		-	}
	193	+	};
194	194
195	195		return (
196	196		<div>
		skipped 61 lines
258	258		name="createdBy"
259	259		style={{
260	260		marginTop: 20,
261		-	width: '100%'
	261	+	width: '100%',
262	262		}}
263	263		setFieldValue={setFieldValue}
264	264		/>
		skipped 1 lines
266	266		name="objectLabel"
267	267		style={{
268	268		marginTop: 20,
269		-	width: '100%'
	269	+	width: '100%',
270	270		}}
271	271		setFieldValue={setFieldValue}
272	272		values={values.objectLabel}
		skipped 2 lines
275	275		name="objectMarking"
276	276		style={{
277	277		marginTop: 20,
278		-	width: '100%'
	278	+	width: '100%',
279	279		}}
280	280		/>
281	281		<ExternalReferencesField
		skipped 30 lines
312	312		</div>
313	313		</Drawer>
314	314		</div>
315		-	)
316		-	}
	315	+	);
	316	+	};
317	317
318	318		export default DataComponentCreation;
319	319

■ ■ ■ ■ ■ ■

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

		skipped 2 lines
3	3		import Paper from '@mui/material/Paper';
4	4		import Typography from '@mui/material/Typography';
5	5		import Grid from '@mui/material/Grid';
	6	+	import makeStyles from '@mui/styles/makeStyles';
6	7		import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
7	8		import { useFormatter } from '../../../../components/i18n';
8		-	import makeStyles from '@mui/styles/makeStyles';
9	9		import { DataComponentDetails_dataComponent$key } from './__generated__/DataComponentDetails_dataComponent.graphql';
10	10
11	11		const styles = makeStyles(() => ({
		skipped 10 lines
22	22		dataComponent: DataComponentDetails_dataComponent$key
23	23		}
24	24
25		-	const DataComponentDetailsComponent: FunctionComponent<DataComponentDetailsProps> = ({dataComponent}) => {
	25	+	const DataComponentDetailsComponent: FunctionComponent<DataComponentDetailsProps> = ({ dataComponent }) => {
26	26		const { t } = useFormatter();
27	27		const classes = styles();
28	28
29	29		const data = useFragment(DataComponentDetailsFragment, dataComponent);
30	30
31		-	return (
	31	+	return (
32	32		<div style={{ height: '100%' }}>
33	33		<Typography variant="h4" gutterBottom={true}>
34	34		{t('Details')}
		skipped 12 lines
47	47		</Grid>
48	48		</Paper>
49	49		</div>
50		-	);
51		-	}
	50	+	);
	51	+	};
52	52
53	53		const DataComponentDetailsFragment = graphql`
54	54		fragment DataComponentDetails_dataComponent on DataComponent {
		skipped 22 lines

■ ■ ■ ■ ■ ■

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

		skipped 2 lines
3	3		import Fab from '@mui/material/Fab';
4	4		import { Edit } from '@mui/icons-material';
5	5		import { graphql } from 'react-relay';
	6	+	import makeStyles from '@mui/styles/makeStyles';
6	7		import { commitMutation, QueryRenderer } from '../../../../relay/environment';
7	8		import Loader, { LoaderVariant } from '../../../../components/Loader';
8	9		import DataComponentEditionContainer from './DataComponentEditionContainer';
9	10		import { dataComponentEditionOverviewFocus } from './DataComponentEditionOverview';
10		-	import makeStyles from '@mui/styles/makeStyles';
11	11		import { Theme } from '../../../../components/Theme';
12	12
13	13		const styles = makeStyles<Theme>((theme) => ({
		skipped 30 lines
44	44		dataComponentId: string
45	45		}
46	46
47		-	const DataComponentEdition: FunctionComponent<DataComponentEditionProps> = ({dataComponentId}) => {
	47	+	const DataComponentEdition: FunctionComponent<DataComponentEditionProps> = ({ dataComponentId }) => {
48	48		const classes = styles();
49	49		const [open, setOpen] = useState(false);
50	50
51	51		const handleOpen = () => {
52		-	setOpen(true)
53		-	}
	52	+	setOpen(true);
	53	+	};
54	54
55	55		const handleClose = () => {
56	56		commitMutation({
		skipped 9 lines
66	66		onError: undefined,
67	67		setSubmitting: undefined,
68	68		});
69		-	setOpen(false)
70		-	}
	69	+	setOpen(false);
	70	+	};
71	71
72		-	return (
	72	+	return (
73	73		<div>
74	74		<Fab
75	75		onClick={handleOpen}
		skipped 31 lines
107	107		/>
108	108		</Drawer>
109	109		</div>
110		-	);
111		-	}
	110	+	);
	111	+	};
112	112
113	113		export default DataComponentEdition;
114	114

■ ■ ■ ■ ■ ■

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

		skipped 40 lines
41	41
42	42		interface DataComponentEditionContainerProps {
43	43		dataComponent: DataComponentEditionContainer_dataComponent$data
44		-	enableReferences?: boolean
	44	+	enableReferences: boolean
45	45		handleClose: () => void,
46	46		}
47	47
		skipped 53 lines

■ ■ ■ ■ ■ ■

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

1	1		import React, { FunctionComponent } from 'react';
2	2		import { createFragmentContainer, graphql } from 'react-relay';
3	3		import { Field, Form, Formik } from 'formik';
4		-	import { assoc, pick, pipe, } from 'ramda';
	4	+	import { assoc, pick, pipe } from 'ramda';
5	5		import * as Yup from 'yup';
6	6		import TextField from '../../../../components/TextField';
7	7		import { SubscriptionFocus } from '../../../../components/Subscription';
		skipped 1 lines
9	9		import CreatedByField, { CreatedBy } from '../../common/form/CreatedByField';
10	10		import ObjectMarkingField, { ObjectMarking } from '../../common/form/ObjectMarkingField';
11	11		import MarkDownField from '../../../../components/MarkDownField';
12		-	import { convertCreatedBy, convertMarkings, convertStatus, } from '../../../../utils/Edition';
	12	+	import { convertCreatedBy, convertMarkings, convertStatus } from '../../../../utils/Edition';
13	13		import { useFormatter } from '../../../../components/i18n';
14	14		import { DataComponentEditionOverview_dataComponent$data } from './__generated__/DataComponentEditionOverview_dataComponent.graphql';
15	15		import StatusField from '../../common/form/StatusField';
		skipped 74 lines
90	90		const DataComponentEditionOverviewComponent: FunctionComponent<DataComponentEditionOverviewComponentProps> = ({
91	91		dataComponent,
92	92		context,
93		-	enableReferences
	93	+	enableReferences,
94	94		}) => {
95	95		const { t } = useFormatter();
96	96
		skipped 13 lines
110	110		onError: undefined,
111	111		setSubmitting: undefined,
112	112		});
113		-	}
	113	+	};
114	114
115	115		const handleSubmitField = (name: string, value: any) => { // TODO: find valid type
116	116		let finalValue = value;
		skipped 9 lines
126	126		id: dataComponent.id,
127	127		input: {
128	128		key: name,
129		-	value: finalValue ?? ''
	129	+	value: finalValue ?? '',
130	130		},
131	131		},
132	132		updater: undefined,
		skipped 5 lines
138	138		});
139	139		})
140	140		.catch(() => false);
141		-	}
	141	+	};
142	142
143	143		const handleChangeCreatedBy = (name: string, value: CreatedBy) => {
144	144		commitMutation({
		skipped 2 lines
147	147		id: dataComponent.id,
148	148		input: {
149	149		key: 'createdBy',
150		-	value: value.value \|\| ''
	150	+	value: value.value \|\| '',
151	151		},
152	152		},
153	153		updater: undefined,
		skipped 3 lines
157	157		onError: undefined,
158	158		setSubmitting: undefined,
159	159		});
160		-	}
	160	+	};
161	161
162	162		const handleChangeObjectMarking = (name: string, values: ObjectMarking[]) => {
163	163		const currentMarkingDefinitions: ObjectMarking[] = dataComponent?.objectMarking?.edges?.map((n) => ({
164		-	label: n?.node.definition,
165		-	value: n?.node.id,
166		-	color: null,
167		-	entity: null,
168		-	})) \|\| [];
	164	+	label: n?.node.definition,
	165	+	value: n?.node.id,
	166	+	color: null,
	167	+	entity: null,
	168	+	})) \|\| [];
169	169
170		-	const added = values.filter(x => currentMarkingDefinitions.includes(x));
171		-	const removed = currentMarkingDefinitions.filter(x => values.includes(x));
	170	+	const added = values.filter((x) => currentMarkingDefinitions.includes(x));
	171	+	const removed = currentMarkingDefinitions.filter((x) => values.includes(x));
172	172
173	173		if (added.length > 0) {
174	174		commitMutation({
		skipped 30 lines
205	205		setSubmitting: undefined,
206	206		});
207	207		}
208		-	}
	208	+	};
209	209
210	210		const createdBy = convertCreatedBy(dataComponent);
211	211		const objectMarking = convertMarkings(dataComponent);
		skipped 71 lines
283	283		name="createdBy"
284	284		style={{
285	285		marginTop: 20,
286		-	width: '100%'
	286	+	width: '100%',
287	287		}}
288	288		setFieldValue={setFieldValue}
289	289		helpertext={
		skipped 5 lines
295	295		name="objectMarking"
296	296		style={{
297	297		marginTop: 20,
298		-	width: '100%'
	298	+	width: '100%',
299	299		}}
300	300		helpertext={
301	301		<SubscriptionFocus
		skipped 17 lines
319	319		)}
320	320		</Formik>
321	321		);
322		-	}
	322	+	};
323	323
324	324		const DataComponentEditionOverview = createFragmentContainer(
325	325		DataComponentEditionOverviewComponent,
		skipped 38 lines

■ ■ ■ ■ ■ ■

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	3		import { createFragmentContainer, graphql } from 'react-relay';
	4	+	import makeStyles from '@mui/styles/makeStyles';
4	5		import StixCoreRelationship from '../../common/stix_core_relationships/StixCoreRelationship';
5	6		import StixDomainObjectHeader from '../../common/stix_domain_objects/StixDomainObjectHeader';
6	7		import DataComponentPopover from './DataComponentPopover';
7		-	import makeStyles from '@mui/styles/makeStyles';
8	8		import { DataComponentKnowledge_dataComponent$data } from './__generated__/DataComponentKnowledge_dataComponent.graphql';
9	9
10	10		const styles = makeStyles(() => ({
		skipped 7 lines
18	18		enableReferences: boolean
19	19		}
20	20
21		-	const DataComponentKnowledgeComponent: FunctionComponent<DataComponentKnowledgeComponentProps> = ({dataComponent, enableReferences}) => {
	21	+	const DataComponentKnowledgeComponent: FunctionComponent<DataComponentKnowledgeComponentProps> = ({ dataComponent, enableReferences }) => {
22	22		const classes = styles();
23	23
24	24		return (
25	25		<div className={classes.container}>
26	26		<StixDomainObjectHeader
27	27		stixDomainObject={dataComponent}
28		-	PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id}/>}
29		-	enableReferences={enableReferences}
	28	+	PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id} enableReferences={enableReferences}/>}
30	29		// isOpenctiAlias={true} // TODO: ask to Samuel
31	30		/>
32	31		<Switch>
		skipped 11 lines
44	43		{/* TODO: ask Samuel ? */}
45	44		</Switch>
46	45		</div>
47		-	);
48		-	}
	46	+	);
	47	+	};
49	48
50	49		const DataComponentKnowledge = createFragmentContainer(
51	50		DataComponentKnowledgeComponent,
		skipped 13 lines

■ ■ ■ ■ ■ ■

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

		skipped 1 lines
2	2		import { map, propOr } from 'ramda';
3	3		import { createFragmentContainer, graphql } from 'react-relay';
4	4		import Paper from '@mui/material/Paper';
	5	+	import makeStyles from '@mui/styles/makeStyles';
5	6		import Typography from '@mui/material/Typography';
6	7		import { useFormatter } from '../../../../components/i18n';
7	8		import ItemAuthor from '../../../../components/ItemAuthor';
8	9		import ItemMarking from '../../../../components/ItemMarking';
9	10		import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
10		-	import makeStyles from '@mui/styles/makeStyles';
11	11
12	12		const styles = makeStyles(() => ({
13	13		paper: {
		skipped 111 lines

■ ■ ■ ■ ■ ■

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

		skipped 12 lines
13	13		import makeStyles from '@mui/styles/makeStyles';
14	14		import { graphql } from 'react-relay';
15	15		import { Theme } from '@mui/material/styles/createTheme';
16		-	import Slide from '@mui/material/Slide';
17	16		import { useFormatter } from '../../../../components/i18n';
18	17		import { commitMutation, QueryRenderer } from '../../../../relay/environment';
19	18		import Loader, { LoaderVariant } from '../../../../components/Loader';
20	19		import Security, { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/Security';
21	20		import { dataComponentEditionQuery } from './DataComponentEdition';
22	21		import DataComponentEditionContainer from './DataComponentEditionContainer';
23		-	import { deleteNode } from '../../../../utils/Store';
24		-	import { PaginationOptions } from '../../../../components/list_lines';
25	22
26	23		const styles = makeStyles<Theme>((theme) => ({
27	24		container: {
		skipped 20 lines
48	45
49	46		interface DataComponentPopoverProps {
50	47		dataComponentId: string
	48	+	enableReferences: boolean
51	49		}
52	50
53		-	const DataComponentPopover: FunctionComponent<DataComponentPopoverProps> = ({ dataComponentId }) => {
	51	+	const DataComponentPopover: FunctionComponent<DataComponentPopoverProps> = ({ dataComponentId, enableReferences }) => {
54	52		const { t } = useFormatter();
55	53		const classes = styles();
56	54		const history = useHistory();
		skipped 12 lines
69	67		};
70	68
71	69		const handleOpenDelete = () => {
72		-	setDisplayEdit(true);
	70	+	setDisplayDelete(true);
73	71		handleClose();
74	72		};
75	73
		skipped 98 lines
174	172		<DataComponentEditionContainer
175	173		dataComponent={result.props.dataComponent}
176	174		handleClose={handleCloseEdit}
	175	+	enableReferences={enableReferences}
177	176		/>
178	177		);
179	178		}
		skipped 10 lines

■ ■ ■ ■ ■ ■

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

1	-	import React, { Component } from 'react';
2	-	import * as PropTypes from 'prop-types';
3	-	import { Route, Switch, withRouter } from 'react-router-dom';
4	-	import { graphql } from 'react-relay';
5	-	import {
6	-	QueryRenderer,
7	-	requestSubscription,
8	-	} from '../../../../relay/environment';
9	-	import TopBar from '../../nav/TopBar';
10	-	import Loader from '../../../../components/Loader';
11	-	import ErrorNotFound from '../../../../components/ErrorNotFound';
12	-	import DataComponent from "./DataComponent";
13	-	import DataComponentKnowledge from "./DataComponentKnowledge";
14	-	import DataComponentPopover from "./DataComponentPopover";
15	-	import FileManager from "../../common/files/FileManager";
16	-	import StixDomainObjectHeader from "../../common/stix_domain_objects/StixDomainObjectHeader";
17	-	import StixCoreObjectHistory from "../../common/stix_core_objects/StixCoreObjectHistory";
18	-
19	-	const subscription = graphql`
20	-	subscription RootDataComponentSubscription($id: ID!) {
21	-	stixDomainObject(id: $id) {
22	-	... on DataComponent {
23	-	...DataComponent_dataComponent
24	-	...DataComponentEditionContainer_dataComponent
25	-	}
26	-	...FileImportViewer_entity
27	-	...FileExportViewer_entity
28	-	...FileExternalReferencesViewer_entity
29	-	...WorkbenchFileViewer_entity
30	-	}
31	-	}
32	-	`;
33	-
34	-	const dataComponentQuery = graphql`
35	-	query RootDataComponentQuery($id: String!) {
36	-	dataComponent(id: $id) {
37	-	id
38	-	name
39	-	...DataComponent_dataComponent
40	-	...FileImportViewer_entity
41	-	...FileExportViewer_entity
42	-	...FileExternalReferencesViewer_entity
43	-	...WorkbenchFileViewer_entity
44	-	}
45	-	connectorsForExport {
46	-	...FileManager_connectorsExport
47	-	}
48	-	settings {
49	-	platform_enable_reference
50	-	}
51	-	}
52	-	`;
53	-
54	-	class RootDataComponent extends Component {
55	-	constructor(props) {
56	-	super(props);
57	-	const {
58	-	match: {
59	-	params: { dataComponentId },
60	-	},
61	-	} = props;
62	-	this.sub = requestSubscription({
63	-	subscription,
64	-	variables: { id: dataComponentId },
65	-	});
66	-	}
67	-
68	-	componentWillUnmount() {
69	-	this.sub.dispose();
70	-	}
71	-
72	-	render() {
73	-	const {
74	-	me,
75	-	match: {
76	-	params: { dataComponentId },
77	-	},
78	-	} = this.props;
79	-	return (
80	-	<div>
81	-	<TopBar me={me \|\| null} />
82	-	<QueryRenderer
83	-	query={dataComponentQuery}
84	-	variables={{ id: dataComponentId }}
85	-	render={({ props }) => {
86	-	if (props) {
87	-	if (props.dataComponent) {
88	-	return (
89	-	<Switch>
90	-	<Route
91	-	exact
92	-	path="/dashboard/techniques/data_component/:dataComponentId"
93	-	render={(routeProps) => (
94	-	<DataComponent
95	-	{...routeProps}
96	-	dataComponent={props.dataComponent}
97	-	/>
98	-	)}
99	-	/>
100	-	<Route
101	-	path="/dashboard/techniques/data_component/:dataComponentId/knowledge"
102	-	render={(routeProps) => (
103	-	<DataComponentKnowledge
104	-	{...routeProps}
105	-	dataComponent={props.dataComponent}
106	-	/>
107	-	)}
108	-	/>
109	-	<Route
110	-	exact
111	-	path="/dashboard/techniques/data_component/:dataComponentId/files"
112	-	render={(routeProps) => (
113	-	<React.Fragment>
114	-	<StixDomainObjectHeader
115	-	stixDomainObject={props.dataComponent}
116	-	PopoverComponent={<DataComponentPopover />}
117	-	/>
118	-	<FileManager
119	-	{...routeProps}
120	-	id={dataComponentId}
121	-	connectorsImport={[]}
122	-	connectorsExport={props.connectorsForExport}
123	-	entity={props.dataComponent}
124	-	/>
125	-	</React.Fragment>
126	-	)}
127	-	/>
128	-	<Route
129	-	exact
130	-	path="/dashboard/techniques/data_component/:dataComponentId/history"
131	-	render={(routeProps) => (
132	-	<React.Fragment>
133	-	<StixDomainObjectHeader
134	-	stixDomainObject={props.dataComponent}
135	-	PopoverComponent={<DataCOmponentPopover />}
136	-	/>
137	-	<StixCoreObjectHistory
138	-	{...routeProps}
139	-	stixCoreObjectId={dataComponentId}
140	-	/>
141	-	</React.Fragment>
142	-	)}
143	-	/>
144	-	</Switch>
145	-	);
146	-	}
147	-	return <ErrorNotFound />;
148	-	}
149	-	return <Loader />;
150	-	}}
151	-	/>
152	-	</div>
153	-	);
154	-	}
155	-	}
156	-
157	-	RootDataComponent.propTypes = {
158	-	children: PropTypes.node,
159	-	match: PropTypes.object,
160	-	me: PropTypes.object,
161	-	};
162	-
163	-	export default withRouter(RootDataComponent);
164	-

■ ■ ■ ■ ■ ■

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

1	+	import React, { FunctionComponent } from 'react';
2	+	import { Route, Switch, useParams } from 'react-router-dom';
3	+	import { graphql } from 'react-relay';
4	+	import {
5	+	QueryRenderer,
6	+	requestSubscription,
7	+	} from '../../../../relay/environment';
8	+	import TopBar from '../../nav/TopBar';
9	+	import Loader from '../../../../components/Loader';
10	+	import ErrorNotFound from '../../../../components/ErrorNotFound';
11	+	import DataComponent from './DataComponent';
12	+	import DataComponentKnowledge from './DataComponentKnowledge';
13	+	import DataComponentPopover from './DataComponentPopover';
14	+	import FileManager from '../../common/files/FileManager';
15	+	import StixDomainObjectHeader from '../../common/stix_domain_objects/StixDomainObjectHeader';
16	+	import StixCoreObjectHistory from '../../common/stix_core_objects/StixCoreObjectHistory';
17	+	import { RootPrivateQuery$data } from '../../../__generated__/RootPrivateQuery.graphql';
18	+	import useAuth from '../../../../utils/hooks/useAuth';
19	+
20	+	const subscription = graphql`
21	+	subscription RootDataComponentSubscription($id: ID!) {
22	+	stixDomainObject(id: $id) {
23	+	... on DataComponent {
24	+	...DataComponent_dataComponent
25	+	...DataComponentEditionContainer_dataComponent
26	+	}
27	+	...FileImportViewer_entity
28	+	...FileExportViewer_entity
29	+	...FileExternalReferencesViewer_entity
30	+	...WorkbenchFileViewer_entity
31	+	}
32	+	}
33	+	`;
34	+
35	+	const dataComponentQuery = graphql`
36	+	query RootDataComponentQuery($id: String!) {
37	+	dataComponent(id: $id) {
38	+	id
39	+	name
40	+	...DataComponent_dataComponent
41	+	...FileImportViewer_entity
42	+	...FileExportViewer_entity
43	+	...FileExternalReferencesViewer_entity
44	+	...WorkbenchFileViewer_entity
45	+	}
46	+	connectorsForExport {
47	+	...FileManager_connectorsExport
48	+	}
49	+	settings {
50	+	platform_enable_reference
51	+	}
52	+	}
53	+	`;
54	+
55	+	interface RootDataComponentProps {
56	+	me: RootPrivateQuery$data['me'] \| undefined;
57	+	children: React.ReactNode
58	+	}
59	+
60	+	const RootDataComponent: FunctionComponent<RootDataComponentProps> = () => {
61	+	const { dataComponentId } = useParams() as { dataComponentId: string };
62	+	const { me } = useAuth();
63	+	const sub = requestSubscription({
64	+	subscription,
65	+	variables: { id: dataComponentId },
66	+	});
67	+	const componentWillUnmount = () => {
68	+	sub.dispose();
69	+	};
70	+
71	+	return (
72	+	<div>
73	+	<TopBar me={me \|\| null} />
74	+	<QueryRenderer
75	+	query={dataComponentQuery}
76	+	variables={{ id: dataComponentId }}
77	+	render={({ props }: any) => {
78	+	if (props) {
79	+	if (props.dataComponent) {
80	+	return (
81	+	<Switch>
82	+	<Route
83	+	// @ts-ignore
84	+	// TODO: required migration to V6
85	+	exact
86	+	path="/dashboard/techniques/data_component/:dataComponentId"
87	+	// @ts-ignore
88	+	// TODO: required migration to V6
89	+	render={(routeProps) => (
90	+	<DataComponent
91	+	{...routeProps}
92	+	dataComponent={props.dataComponent}
93	+	/>
94	+	)}
95	+	/>
96	+	<Route
97	+	path="/dashboard/techniques/data_component/:dataComponentId/knowledge"
98	+	// @ts-ignore
99	+	// TODO: required migration to V6
100	+	render={(routeProps) => (
101	+	<DataComponentKnowledge
102	+	{...routeProps}
103	+	dataComponent={props.dataComponent}
104	+	/>
105	+	)}
106	+	/>
107	+	<Route
108	+	// @ts-ignore
109	+	// TODO: required migration to V6
110	+	exact
111	+	path="/dashboard/techniques/data_component/:dataComponentId/files"
112	+	// @ts-ignore
113	+	// TODO: required migration to V6
114	+	render={(routeProps) => (
115	+	<React.Fragment>
116	+	<StixDomainObjectHeader
117	+	stixDomainObject={props.dataComponent}
118	+	PopoverComponent={<DataComponentPopover
119	+	dataComponentId={dataComponentId}
120	+	enableReferences={props.settings.platform_enable_reference?.includes(
121	+	'Data-Component',
122	+	)}/>}
123	+	/>
124	+	<FileManager
125	+	{...routeProps}
126	+	id={dataComponentId}
127	+	connectorsImport={[]}
128	+	connectorsExport={props.connectorsForExport}
129	+	entity={props.dataComponent}
130	+	/>
131	+	</React.Fragment>
132	+	)}
133	+	/>
134	+	<Route
135	+	// @ts-ignore
136	+	// TODO: required migration to V6
137	+	exact
138	+	path="/dashboard/techniques/data_component/:dataComponentId/history"
139	+	// @ts-ignore
140	+	// TODO: required migration to V6
141	+	render={(routeProps) => (
142	+	<React.Fragment>
143	+	<StixDomainObjectHeader
144	+	stixDomainObject={props.dataComponent}
145	+	PopoverComponent={<DataComponentPopover
146	+	dataComponentId={dataComponentId}
147	+	enableReferences={props.settings.platform_enable_reference?.includes(
148	+	'Data-Component',
149	+	)}
150	+	/>}
151	+	/>
152	+	<StixCoreObjectHistory
153	+	{...routeProps}
154	+	stixCoreObjectId={dataComponentId}
155	+	/>
156	+	</React.Fragment>
157	+	)}
158	+	/>
159	+	</Switch>
160	+	);
161	+	}
162	+	return <ErrorNotFound />;
163	+	}
164	+	return <Loader />;
165	+	}}
166	+	/>
167	+	</div>
168	+	);
169	+	};
170	+
171	+	export default RootDataComponent;
172	+

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/utils/Security.tsx

		skipped 1 lines
2	2		import { filter, includes } from 'ramda';
3	3		import { RootPrivateQuery$data } from '../private/__generated__/RootPrivateQuery.graphql';
4	4		import { ModuleHelper } from './platformModulesHelper';
	5	+	import useAuth from './hooks/useAuth';
5	6
6	7		export interface UserContextType {
7	8		me: RootPrivateQuery$data['me'] \| undefined;
		skipped 59 lines
67	68		};
68	69
69	70		const Security: FunctionComponent<SecurityProps> = ({ needs, matchAll = false, children, placeholder = <span /> }) => {
70		-	const { me } = useContext<UserContextType>(UserContext);
	71	+	const { me } = useAuth();
71	72		if (me && granted(me, needs, matchAll)) {
72	73		return children;
73	74		}
		skipped 7 lines
81	82		children,
82	83		placeholder = <span />,
83	84		}) => {
84		-	const { me } = useContext<UserContextType>(UserContext);
	85	+	const { me } = useAuth();
85	86		const haveCapability = granted(me, needs, matchAll);
86	87		if (haveCapability) {
87	88		return children;
		skipped 11 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/utils/hooks/useAuth.ts

1	+	import { useContext } from 'react';
2	+	import { UserContext } from '../Security';
3	+
4	+	const useAuth = () => {
5	+	return useContext(UserContext);
6	+	};
7	+
8	+	export default useAuth;
9	+

[Front] Converting js files into tsx (#680)