STRLCPY/opencti

[frontend] Migrate data component to TSX
Romuald Lemesle committed 1 year ago

995d0c58

1 parent 7def64d8

Revision indexing in progress... (symbol navigation in revisions will be accurate after indexed)

■ ■ ■ ■ ■ ■

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

		skipped 2 lines
3	3		import DataComponentLines, { dataComponentsLinesQuery } from './data_components/DataComponentsLines';
4	4		import Security, { KNOWLEDGE_KNUPDATE } from '../../../utils/Security';
5	5		import DataComponentCreation from './data_components/DataComponentCreation';
6		-	import useLocalStorage, { localStorageToPaginationOptions } from '../../../utils/hooks/useLocalStorage';
	6	+	import useLocalStorage from '../../../utils/hooks/useLocalStorage';
7	7		import ListLines from '../../../components/list_lines/ListLines';
8		-	import { PaginationOptions } from '../../../components/list_lines';
	8	+	import { OrderMode, PaginationOptions } from '../../../components/list_lines';
9	9
10	10		const LOCAL_STORAGE_KEY = 'view-data-component';
11	11
		skipped 10 lines
22	22		});
23	23
24	24		const { sortBy, orderAsc, searchTerm } = viewStorage;
25		-	const queryProps = localStorageToPaginationOptions(viewStorage);
	25	+	const queryProps: PaginationOptions = { search: searchTerm, orderMode: orderAsc ? OrderMode.asc : OrderMode.desc, orderBy: sortBy };
26	26
27	27		const handleSearch = (value: string) => setViewStorage((c) => ({ ...c, searchTerm: value }));
28	28		const handleSort = (field: string, order: boolean) => setViewStorage((c) => ({
		skipped 52 lines

■ ■ ■ ■ ■ ■

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

1	1		import React, { FunctionComponent, useState } from 'react';
2		-	import { Field, Form, Formik } from 'formik';
	2	+	import { Field, Formik } from 'formik';
3	3		import Drawer from '@mui/material/Drawer';
4	4		import Typography from '@mui/material/Typography';
5	5		import Button from '@mui/material/Button';
		skipped 4 lines
10	10		import * as Yup from 'yup';
11	11		import { graphql } from 'react-relay';
12	12		import { FormikHelpers } from 'formik/dist/types';
13		-	import { ConnectionHandler, RecordProxy, RecordSourceSelectorProxy } from 'relay-runtime';
	13	+	import { Store } from 'relay-runtime';
14	14		import { useFormatter } from '../../../../components/i18n';
15	15		import { commitMutation, handleErrorInForm } from '../../../../relay/environment';
16	16		import TextField from '../../../../components/TextField';
		skipped 4 lines
21	21		import { Theme } from '../../../../components/Theme';
22	22		import { PaginationOptions } from '../../../../components/list_lines';
23	23		import ExternalReferencesField, { ExternalReference } from '../../common/form/ExternalReferencesField';
	24	+	import { insertNode } from '../../../../utils/Store';
24	25
25	26		const styles = makeStyles<Theme>((theme) => ({
26	27		drawerPaper: {
		skipped 65 lines
92	93		.required(t('This field is required')),
93	94		});
94	95
95		-	const sharedUpdater = (store: RecordSourceSelectorProxy, userId: string, paginationOptions: PaginationOptions, newEdge: RecordProxy) => {
96		-	const userProxy = store.get(userId);
97		-	if (userProxy) {
98		-	const conn: RecordProxy \| null \| undefined = ConnectionHandler.getConnection(
99		-	userProxy,
100		-	'Pagination_dataComponents',
101		-	paginationOptions,
102		-	);
103		-	if (conn) {
104		-	ConnectionHandler.insertEdgeBefore(conn, newEdge);
105		-	}
106		-	}
107		-	};
108		-
109	96		interface DataComponentCreationProps {
110	97		paginationOptions: PaginationOptions
111	98		}
		skipped 17 lines
129	116		const initialValues: DataComponentFormProps = {
130	117		name: '',
131	118		description: '',
132		-	createdBy: {} as CreatedBy,
	119	+	createdBy: '' as unknown as CreatedBy,
133	120		objectMarking: [],
134	121		objectLabel: [],
135	122		externalReferences: [],
		skipped 24 lines
160	147		variables: {
161	148		input: finalValues,
162	149		},
163		-	updater: (store: RecordSourceSelectorProxy) => {
164		-	const payload: RecordProxy \| null = store.getRootField('dataComponentAdd');
165		-	if (payload) {
166		-	const newEdge: RecordProxy = payload.setLinkedRecord(payload, 'node');
167		-	const container: RecordProxy = store.getRoot();
168		-	sharedUpdater(
169		-	store,
170		-	container.getDataID(),
171		-	paginationOptions,
172		-	newEdge,
173		-	);
174		-	}
	150	+	updater: (store: Store) => {
	151	+	insertNode(
	152	+	store,
	153	+	'Pagination_dataComponents',
	154	+	paginationOptions,
	155	+	'dataComponentAdd',
	156	+	);
175	157		},
176	158		onError: (error: Error) => {
177	159		handleErrorInForm(error, setErrors);
		skipped 58 lines
236	218		setFieldValue,
237	219		values,
238	220		}) => (
239		-	<Form style={{ margin: '20px 0 20px 0' }}>
	221	+	<div style={{ margin: '20px 0 20px 0' }}>
240	222		<Field
241	223		component={TextField}
242	224		variant="standard"
243	225		name="name"
244	226		label={t('Name')}
245	227		fullWidth={true}
246		-	detectDuplicate={['Data Component']}
	228	+	detectduplicate={['Data Component']}
247	229		/>
248	230		<Field
249	231		component={MarkDownField}
		skipped 56 lines
306	288		{t('Create')}
307	289		</Button>
308	290		</div>
309		-	</Form>
	291	+	</div>
310	292		)}
311	293		</Formik>
312	294		</div>
		skipped 7 lines

■ ■ ■ ■ ■ ■

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

		skipped 90 lines
91	91		description: string \| null,
92	92		createdBy: string \| { label: string, value: string },
93	93		objectMarking: Array<ObjectMarking>,
94		-	x_opencti_workflow_id: string \| { label: any, color: any, value: any, order: any }
	94	+	x_opencti_workflow_id: string \| { label: string, color: string, value: string, order: string }
95	95		}
	96	+
	97	+	const DataComponentEditionOverviewFragment = graphql`
	98	+	fragment DataComponentEditionOverview_dataComponent on DataComponent {
	99	+	id
	100	+	name
	101	+	description
	102	+	createdBy {
	103	+	... on Identity {
	104	+	id
	105	+	name
	106	+	entity_type
	107	+	}
	108	+	}
	109	+	objectMarking {
	110	+	edges {
	111	+	node {
	112	+	id
	113	+	definition
	114	+	definition_type
	115	+	}
	116	+	}
	117	+	}
	118	+	status {
	119	+	id
	120	+	order
	121	+	template {
	122	+	name
	123	+	color
	124	+	}
	125	+	}
	126	+	workflowEnabled
	127	+	}
	128	+	`;
96	129
97	130		const DataComponentEditionOverviewComponent: FunctionComponent<DataComponentEditionOverviewComponentProps> = ({
98	131		data,
		skipped 77 lines
176	209		entity: null,
177	210		})) \|\| [];
178	211
179		-	const added = values.filter((x) => currentMarkingDefinitions.includes(x));
180		-	const removed = currentMarkingDefinitions.filter((x) => values.includes(x));
	212	+	const added = values.filter((v) => !currentMarkingDefinitions.map((c) => c.value).includes(v.value));
	213	+	const removed = currentMarkingDefinitions.filter((c) => !values.map((v) => v.value).includes(c.value));
181	214
182	215		if (added.length > 0) {
183	216		commitMutation({
		skipped 140 lines
324	357		</Formik>
325	358		);
326	359		};
327		-
328		-	const DataComponentEditionOverviewFragment = graphql`
329		-	fragment DataComponentEditionOverview_dataComponent on DataComponent {
330		-	id
331		-	name
332		-	description
333		-	createdBy {
334		-	... on Identity {
335		-	id
336		-	name
337		-	entity_type
338		-	}
339		-	}
340		-	objectMarking {
341		-	edges {
342		-	node {
343		-	id
344		-	definition
345		-	definition_type
346		-	}
347		-	}
348		-	}
349		-	status {
350		-	id
351		-	order
352		-	template {
353		-	name
354		-	color
355		-	}
356		-	}
357		-	workflowEnabled
358		-	}
359		-	`;
360	360
361	361		export default DataComponentEditionOverviewComponent;
362	362

■ ■ ■ ■ ■ ■

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

		skipped 20 lines
21	21		import { Theme } from '../../../../components/Theme';
22	22
23	23		const styles = makeStyles<Theme>((theme) => ({
24		-	container: {
25		-	margin: 0,
26		-	},
27	24		drawerPaper: {
28	25		minHeight: '100vh',
29	26		width: '50%',
		skipped 160 lines

[frontend] Migrate data component to TSX