STRLCPY/opencti

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/common/form/ExternalReferencesField.js

		skipped 45 lines
46	46		ConnectionHandler.insertEdgeBefore(conn, newEdge);
47	47		};
48	48
	49	+	export class ExternalReference {
	50	+	constructor(label,
	51	+	value,
	52	+	entity) {
	53	+	this.label = label;
	54	+	this.value = value;
	55	+	this.entity = entity;
	56	+	}
	57	+	}
	58	+
49	59		class ExternalReferencesField extends Component {
50	60		constructor(props) {
51	61		super(props);
		skipped 164 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/common/form/ObjectLabelField.js

		skipped 23 lines
24	24		},
25	25		});
26	26
	27	+	export class ObjectLabel {
	28	+	constructor(label,
	29	+	value,
	30	+	color) {
	31	+	this.label = label;
	32	+	this.value = value;
	33	+	this.color = color;
	34	+	}
	35	+	}
	36	+
27	37		class ObjectLabelField extends Component {
28	38		constructor(props) {
29	39		super(props);
		skipped 98 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/DataComponents.tsx

		skipped 9 lines
10	10		import ListLines from '../../../components/list_lines/ListLines';
11	11		import { PaginationOptions } from '../../../components/list_lines';
12	12
13		-	const useStyles = makeStyles(() => ({
14		-	parameters: {
15		-	float: 'left',
16		-	marginTop: -10,
17		-	},
18		-	}));
19		-
20		-	export const dataComponentsSearchQuery = graphql`
21		-	query DataComponentsSearchQuery($search: String) {
22		-	dataComponents(search: $search) {
23		-	edges {
24		-	node {
25		-	id
26		-	name
27		-	}
28		-	}
29		-	}
30		-	}
31		-	`;
32		-
33	13		const LOCAL_STORAGE_KEY = 'view-data-component';
34	14
35	15		interface DataComponentProps {
		skipped 1 lines
37	17		}
38	18
39	19		const DataComponents:React.FC<DataComponentProps> = () => {
40		-	const classes = useStyles();
41		-	const { t } = useFormatter();
42		-
43	20		const [viewStorage, setViewStorage] = useLocalStorage(LOCAL_STORAGE_KEY, {
44	21		searchTerm: '',
45	22		openExports: false,
		skipped 50 lines
96	73		<div>
97	74		{renderLines(queryProps)}
98	75		<Security needs={[KNOWLEDGE_KNUPDATE]}>
99		-	<DataComponentCreation />
	76	+	<DataComponentCreation paginationOptions={queryProps}/>
100	77		</Security>
101	78		</div>
102	79		);
		skipped 4 lines

■ ■ ■ ■ ■ ■

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

		skipped 32 lines
33	33
34	34		const DataComponentComponent: FunctionComponent<DataComponentComponentProps> = ({ dataComponent, enableReferences }) => {
35	35		const classes = useStyles();
36		-	const { t } = useFormatter();
	36	+
37	37		return (
38	38		<div className={classes.container}>
39	39		<StixDomainObjectHeader
		skipped 112 lines
152	152		`,
153	153		});
154	154
155		-	export default DataComponentComponent;
	155	+	export default DataComponent;
156	156

■ ■ ■ ■ ■ ■

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

		skipped 13 lines
14	14		import { commitMutation, handleErrorInForm, } from '../../../../relay/environment';
15	15		import TextField from '../../../../components/TextField';
16	16		import CreatedByField, { CreatedBy } from '../../common/form/CreatedByField';
17		-	import ObjectLabelField from '../../common/form/ObjectLabelField';
18		-	import ObjectMarkingField from '../../common/form/ObjectMarkingField';
	17	+	import ObjectLabelField, { ObjectLabel } from '../../common/form/ObjectLabelField';
	18	+	import ObjectMarkingField, { ObjectMarking } from '../../common/form/ObjectMarkingField';
19	19		import MarkDownField from '../../../../components/MarkDownField';
20	20		import makeStyles from '@mui/styles/makeStyles';
21	21		import { Theme } from '../../../../components/Theme';
22	22		import { PaginationOptions } from '../../../../components/list_lines';
23	23		import { FormikHelpers } from 'formik/dist/types';
	24	+	import ExternalReferencesField, { ExternalReference } from '../../common/form/ExternalReferencesField';
24	25
25	26		const styles = makeStyles<Theme>((theme) => ({
26	27		drawerPaper: {
		skipped 50 lines
77	78		const dataComponentMutation = graphql`
78	79		mutation DataComponentCreationMutation($input: DataComponentAddInput!) {
79	80		dataComponentAdd(input: $input) {
80		-	id
81		-	name
82		-	description
	81	+	...DataComponentLine_node
83	82		}
84	83		}
85	84		`;
		skipped 26 lines
112	111		paginationOptions: PaginationOptions
113	112		}
114	113
115		-	interface DataComponentForm { // TODO: handle this type
	114	+	interface DataComponentFormProps { // TODO: handle this type
116	115		name: string,
117	116		description: string,
118	117		createdBy: CreatedBy,
119		-	objectMarking: Array<any>,
120		-	objectLabel: Array<any>,
	118	+	objectMarking: Array<ObjectMarking>,
	119	+	objectLabel: Array<ObjectLabel>,
	120	+	externalReferences: Array<ExternalReference>
121	121		}
122	122
123	123		const DataComponentCreation: FunctionComponent<DataComponentCreationProps> = ({
		skipped 3 lines
127	127		const classes = styles();
128	128
129	129		const [open, setOpen] = useState(false);
	130	+	const initialValues: DataComponentFormProps = { name: '',
	131	+	description: '',
	132	+	createdBy: {} as CreatedBy,
	133	+	objectMarking: [],
	134	+	objectLabel: [],
	135	+	externalReferences: []
	136	+	};
130	137
131	138		const handleOpen = () => {
132	139		setOpen(true);
		skipped 3 lines
136	143		setOpen(false);
137	144		}
138	145
139		-	const onSubmit = (values: DataComponentForm, { setSubmitting, setErrors, resetForm }: FormikHelpers<DataComponentForm>) => {
140		-	const finalValues = R.pipe(
141		-	R.assoc('createdBy', values.createdBy?.value),
142		-	R.assoc('objectMarking', R.pluck('value', values.objectMarking)),
143		-	R.assoc('objectLabel', R.pluck('value', values.objectLabel)),
144		-	// TODO: externalReferences
145		-	)(values);
	146	+	const onSubmit = (
	147	+	values: DataComponentFormProps,
	148	+	{ setSubmitting, setErrors, resetForm }: FormikHelpers<DataComponentFormProps>
	149	+	) => {
	150	+	const finalValues = {
	151	+	name: values.name,
	152	+	description: values.description,
	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)
	157	+	};
146	158		commitMutation({
147	159		mutation: dataComponentMutation,
148	160		variables: {
		skipped 2 lines
151	163		updater: (store: RecordSourceSelectorProxy) => {
152	164		const payload: RecordProxy \| null = store.getRootField('dataComponentAdd');
153	165		if (payload) {
154		-	const newEdge: RecordProxy = payload.setLinkedRecord(payload, 'node'); // Creation of the pagination container.
	166	+	const newEdge: RecordProxy = payload.setLinkedRecord(payload, 'node');
155	167		const container: RecordProxy = store.getRoot();
156	168		sharedUpdater(
157	169		store,
		skipped 54 lines
212	224		</div>
213	225		<div className={classes.container}>
214	226		<Formik
215		-	initialValues={{
216		-	name: '',
217		-	description: '',
218		-	createdBy: {} as CreatedBy,
219		-	objectMarking: [],
220		-	objectLabel: [],
221		-	}}
	227	+	initialValues={initialValues}
222	228		validationSchema={dataComponentValidation(t)}
223	229		onSubmit={onSubmit}
224	230		onReset={onReset}
		skipped 46 lines
271	277		marginTop: 20,
272	278		width: '100%'
273	279		}}
	280	+	/>
	281	+	<ExternalReferencesField
	282	+	name="externalReferences"
	283	+	style={{
	284	+	marginTop: 20,
	285	+	width: '100%',
	286	+	}}
	287	+	setFieldValue={setFieldValue}
	288	+	values={values.externalReferences}
274	289		/>
275	290		<div className={classes.buttons}>
276	291		<Button
		skipped 28 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/techniques/data_components/DataComponentDetails.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 Paper from '@mui/material/Paper';
4	4		import Typography from '@mui/material/Typography';
5	5		import Grid from '@mui/material/Grid';
6	6		import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
7	7		import { useFormatter } from '../../../../components/i18n';
8	8		import makeStyles from '@mui/styles/makeStyles';
	9	+	import { DataComponentDetails_dataComponent$key } from './__generated__/DataComponentDetails_dataComponent.graphql';
9	10
10	11		const styles = makeStyles(() => ({
11	12		paper: {
		skipped 6 lines
18	19		}));
19	20
20	21		interface DataComponentDetailsProps {
21		-	dataComponent: any // TODO: fix this type
	22	+	dataComponent: DataComponentDetails_dataComponent$key
22	23		}
23	24
24	25		const DataComponentDetailsComponent: FunctionComponent<DataComponentDetailsProps> = ({dataComponent}) => {
25	26		const { t } = useFormatter();
26	27		const classes = styles();
27	28
	29	+	const data = useFragment(DataComponentDetailsFragment, dataComponent);
	30	+
28	31		return (
29	32		<div style={{ height: '100%' }}>
30	33		<Typography variant="h4" gutterBottom={true}>
		skipped 6 lines
37	40		{t('Description')}
38	41		</Typography>
39	42		<ExpandableMarkdown
40		-	source={dataComponent.description}
	43	+	source={data.description}
41	44		limit={300}
42	45		/>
43	46		</Grid>
		skipped 3 lines
47	50		);
48	51		}
49	52
50		-	const DataComponentDetails = createFragmentContainer(
51		-	DataComponentDetailsComponent,
52		-	{
53		-	dataComponent: graphql`
54		-	fragment DataComponentDetails_dataComponent on DataComponent {
55		-	id
56		-	description
57		-	}
58		-	`,
59		-	},
60		-	);
	53	+	const DataComponentDetailsFragment = graphql`
	54	+	fragment DataComponentDetails_dataComponent on DataComponent {
	55	+	id
	56	+	description
	57	+	creator {
	58	+	id
	59	+	name
	60	+	}
	61	+	objectLabel {
	62	+	edges {
	63	+	node {
	64	+	id
	65	+	value
	66	+	color
	67	+	}
	68	+	}
	69	+	}
	70	+	}
	71	+	`;
	72	+
	73	+	// TODO: refacto with this mechanism
61	74
62		-	export default DataComponentDetails;
	75	+	export default DataComponentDetailsComponent;
63	76

■ ■ ■ ■ ■ ■

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		-	// TODO: what is references ?
99	98		enableReferences={result.props.settings.platform_enable_reference?.includes(
100	99		'Data-Component',
101	100		)}
		skipped 14 lines

■ ■ ■ ■ ■ ■

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	45		handleClose: () => void,
45	46		}
46	47
47		-	const DataComponentEditionContainer: FunctionComponent<DataComponentEditionContainerProps> = ({ dataComponent, handleClose }) => {
	48	+	const DataComponentEditionContainer: FunctionComponent<DataComponentEditionContainerProps> = ({ dataComponent, enableReferences, handleClose }) => {
48	49		const { t } = useFormatter();
49	50		const classes = styles();
50	51
		skipped 20 lines
71	72		<div className={classes.container}>
72	73		<DataComponentEditionOverview
73	74		dataComponent={dataComponent}
	75	+	enableReferences={enableReferences}
74	76		context={editContext}
75		-	handleClose={handleClose}
76	77		/>
77	78		</div>
78	79		</div>
		skipped 21 lines

■ ■ ■ ■ ■ ■

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

		skipped 226 lines
227	227		enableReinitialize={true}
228	228		initialValues={initialValues}
229	229		validationSchema={dataComponentValidation(t)}
230		-	onSubmit={() => true} // TODO: fix it
	230	+	onSubmit={() => undefined}
231	231		>
232	232		{({
233	233		submitForm,
		skipped 130 lines

■ ■ ■ ■ ■ ■

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

		skipped 20 lines
21	21		const DataComponentKnowledgeComponent: FunctionComponent<DataComponentKnowledgeComponentProps> = ({dataComponent, enableReferences}) => {
22	22		const classes = styles();
23	23
24		-	return (
	24	+	return (
25	25		<div className={classes.container}>
26	26		<StixDomainObjectHeader
27	27		stixDomainObject={dataComponent}
		skipped 4 lines
32	32		<Switch>
33	33		<Route
34	34		path="/dashboard/techniques/data_component/:dataComponentId/knowledge/relations/:relationId"
35		-	render={(routeProps) => ( // TODO: fix it
	35	+	// @ts-ignore: incompatibility type
	36	+	// TODO: required migration to V6
	37	+	render={(routeProps) => (
36	38		<StixCoreRelationship
37	39		entityId={dataComponent.id}
38	40		{...routeProps}
39	41		/>
40	42		)}
41	43		/>
42		-	{/* TODO: other route ? */}
	44	+	{/* TODO: ask Samuel ? */}
43	45		</Switch>
44	46		</div>
45	47		);
		skipped 17 lines

■ ■ ■ ■ ■ ■

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

1		-	import React from 'react';
	1	+	import React, { FunctionComponent } from 'react';
2	2		import { Link } from 'react-router-dom';
3	3		import makeStyles from '@mui/styles/makeStyles';
4	4		import ListItem from '@mui/material/ListItem';
		skipped 5 lines
10	10		import Skeleton from '@mui/material/Skeleton';
11	11		import { useFormatter } from '../../../../components/i18n';
12	12		import { DataColumns, PaginationOptions } from '../../../../components/list_lines';
	13	+	import { createFragmentContainer, graphql } from 'react-relay';
13	14
14	15		const useStyles = makeStyles((theme: Theme) => ({
15	16		item: {},
16		-	itemNested: {
17		-	paddingLeft: theme.spacing(4),
18		-	},
19	17		itemIcon: {
20	18		color: theme.palette.primary.main,
21	19		},
		skipped 40 lines
62	60		paginationOptions: PaginationOptions
63	61		}
64	62
65		-	const DataComponentLineComponent: React.FC<DataComponentLineProps> = ({ node, dataColumns, paginationOptions }) => {
	63	+	const DataComponentLineComponent: FunctionComponent<DataComponentLineProps> = ({ node, dataColumns, paginationOptions }) => {
66	64		const classes = useStyles();
67	65		const { t } = useFormatter();
68	66
		skipped 29 lines
98	96		</div>
99	97		);
100	98		};
	99	+
	100	+	export const DataComponentLine = createFragmentContainer(DataComponentLineComponent, {
	101	+	node: graphql`
	102	+	fragment DataComponentLine_node on DataComponent {
	103	+	id
	104	+	name
	105	+	created
	106	+	modified
	107	+	objectLabel {
	108	+	edges {
	109	+	node {
	110	+	id
	111	+	value
	112	+	color
	113	+	}
	114	+	}
	115	+	}
	116	+	}
	117	+	`,
	118	+	});
101	119
102	120		const DataComponentLineDummyComponent = () => {
103	121		const classes = useStyles();
		skipped 29 lines

■ ■ ■ ■ ■ ■

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

		skipped 46 lines
47	47		`;
48	48
49	49		interface DataComponentPopoverProps {
50		-	dataComponentId: string,
51		-	paginationOptions: PaginationOptions,
	50	+	dataComponentId: string
52	51		}
53	52
54		-	const DataComponentPopover: FunctionComponent<DataComponentPopoverProps> = ({ dataComponentId, paginationOptions }) => {
	53	+	const DataComponentPopover: FunctionComponent<DataComponentPopoverProps> = ({ dataComponentId }) => {
55	54		const { t } = useFormatter();
56	55		const classes = styles();
57	56		const history = useHistory();
		skipped 32 lines
90	89		handleClose();
91	90		history.push('/dashboard/techniques/data_component');
92	91		},
93		-	updater: (store: any) => deleteNode(store, 'Pagination_dataComponents', paginationOptions, dataComponentId),
	92	+	updater: undefined,
94	93		optimisticUpdater: undefined,
95	94		optimisticResponse: undefined,
96	95		onError: undefined,
		skipped 94 lines

■ ■ ■ ■ ■ ■

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

1	1		import React, { FunctionComponent } from 'react';
2	2		import { createPaginationContainer, graphql, RelayPaginationProp } from 'react-relay';
3	3		import makeStyles from '@mui/styles/makeStyles';
4		-	import { DataComponentLineComponent, DataComponentLineDummyComponent } from './DataComponentLine';
	4	+	import { DataComponentLine, DataComponentLineDummyComponent } from './DataComponentLine';
5	5		import { DataComponentsLines_data$data } from './__generated__/DataComponentsLines_data.graphql';
6	6		import { DataColumns, PaginationOptions } from '../../../../components/list_lines';
7	7		import ListLinesContent from '../../../../components/list_lines/ListLinesContent';
8		-	import { LocalStorage } from '../../../../utils/hooks/useLocalStorage';
9	8
10	9		const useStyles = makeStyles(() => ({
11	10		root: {
		skipped 20 lines
32	31		loadMore={relay.loadMore}
33	32		hasMore={relay.hasMore}
34	33		dataList={dataComponents}
35		-	LineComponent={ DataComponentLineComponent }
	34	+	LineComponent={ DataComponentLine }
36	35		DummyLineComponent={ DataComponentLineDummyComponent }
37	36		dataColumns={dataColumns}
38	37		paginationOptions={paginationOptions}
		skipped 23 lines
62	61		id
63	62		name
64	63		description
	64	+	...DataComponentLine_node
65	65		}
66	66		}
67	67		pageInfo {
		skipped 29 lines

[frontend] Migrate data component to TSX