STRLCPY/opencti

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/components/Theme.d.ts

1		-	import { PaletteColorOptions, PaletteOptions, TypeBackground } from '@mui/material/styles/createPalette';
	1	+	import { ColorPartial, PaletteColorOptions, PaletteOptions, TypeBackground } from '@mui/material/styles/createPalette';
2	2		import { Theme as MuiTheme, ThemeOptions } from '@mui/material/styles/createTheme';
3	3
4	4		interface ExtendedColor extends PaletteColorOptions {
		skipped 9 lines
14	14		interface ExtendedPaletteOptions extends PaletteOptions {
15	15		background: Partial<ExtendedBackground>
16	16		primary: Partial<ExtendedColor>
	17	+	grey: Partial<ColorPartial>
17	18		error: Partial<ExtendedColor>
18	19		}
19	20
		skipped 9 lines

■ ■ ■ ■ ■ ■

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

		skipped 14 lines
15	15		import StixCoreObjectOrStixCoreRelationshipNotes from '../../analysis/notes/StixCoreObjectOrStixCoreRelationshipNotes';
16	16		import { DataComponent_dataComponent$key } from './__generated__/DataComponent_dataComponent.graphql';
17	17
	18	+	// TODO: alias not updated direclty
	19	+
18	20		const useStyles = makeStyles(() => ({
19		-	container: {
20		-	margin: 0,
21		-	},
22	21		gridContainer: {
23	22		marginBottom: 20,
24	23		},
		skipped 57 lines
82	81
83	82		interface DataComponentComponentProps {
84	83		data: DataComponent_dataComponent$key
85		-	enableReferences: boolean
86	84		}
87	85
88		-	const DataComponentComponent: FunctionComponent<DataComponentComponentProps> = ({ data, enableReferences }) => {
	86	+	const DataComponentComponent: FunctionComponent<DataComponentComponentProps> = ({ data }) => {
89	87		const classes = useStyles();
90	88
91	89		const dataComponent = useFragment(DataComponentFragment, data);
92	90
93	91		return (
94		-	<div className={classes.container}>
	92	+	<div>
95	93		<StixDomainObjectHeader
96	94		stixDomainObject={dataComponent}
97	95		PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id}/>}
		skipped 56 lines

■ ■ ■ ■ ■ ■

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

1	1		import React, { FunctionComponent, useState } from 'react';
2		-	import * as R from 'ramda';
3	2		import { Field, Form, Formik } from 'formik';
4	3		import Drawer from '@mui/material/Drawer';
5	4		import Typography from '@mui/material/Typography';
		skipped 105 lines
111	110		paginationOptions: PaginationOptions
112	111		}
113	112
114		-	interface DataComponentFormProps { // TODO: handle this type
	113	+	interface DataComponentFormProps {
115	114		name: string,
116	115		description: string,
117	116		createdBy: CreatedBy,
		skipped 9 lines
127	126		const classes = styles();
128	127
129	128		const [open, setOpen] = useState(false);
130		-	const initialValues: DataComponentFormProps = { name: '',
	129	+	const initialValues: DataComponentFormProps = {
	130	+	name: '',
131	131		description: '',
132	132		createdBy: {} as CreatedBy,
133	133		objectMarking: [],
		skipped 186 lines

■ ■ ■ ■ ■ ■

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

		skipped 11 lines
12	12
13	13		const styles = makeStyles<Theme>((theme) => ({
14	14		header: {
15		-	backgroundColor: `${theme.palette.background.nav}`,
	15	+	backgroundColor: theme.palette.background.nav,
16	16		padding: '20px 20px 20px 60px',
17	17		},
18	18		closeButton: {
		skipped 82 lines

■ ■ ■ ■ ■ ■

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

1	1		import React, { FunctionComponent } from 'react';
2	2		import { graphql, useFragment } from 'react-relay';
3	3		import { Field, Form, Formik } from 'formik';
4		-	import { assoc, pick, pipe } from 'ramda';
5	4		import * as Yup from 'yup';
6	5		import TextField from '../../../../components/TextField';
7	6		import { SubscriptionFocus } from '../../../../components/Subscription';
		skipped 77 lines
85	84		readonly name: string;
86	85		} \| null> \| null
87	86		enableReferences?: boolean,
	87	+	}
	88	+
	89	+	interface DataComponentFormProps {
	90	+	name: string,
	91	+	description: string \| null,
	92	+	createdBy: string \| { label: string, value: string },
	93	+	objectMarking: Array<ObjectMarking>,
	94	+	x_opencti_workflow_id: string \| { label: any, color: any, value: any, order: any }
88	95		}
89	96
90	97		const DataComponentEditionOverviewComponent: FunctionComponent<DataComponentEditionOverviewComponentProps> = ({
		skipped 121 lines
212	219		const createdBy = convertCreatedBy(dataComponent);
213	220		const objectMarking = convertMarkings(dataComponent);
214	221		const status = convertStatus(t, dataComponent);
215		-	const initialValues = pipe(
216		-	assoc('createdBy', createdBy),
217		-	assoc('objectMarking', objectMarking),
218		-	assoc('x_opencti_workflow_id', status),
219		-	pick([
220		-	'name',
221		-	'description',
222		-	'createdBy',
223		-	'objectMarking',
224		-	'x_opencti_workflow_id',
225		-	]),
226		-	)(dataComponent);
	222	+	const initialValues: DataComponentFormProps = {
	223	+	name: dataComponent.name,
	224	+	description: dataComponent.description,
	225	+	createdBy,
	226	+	objectMarking,
	227	+	x_opencti_workflow_id: status,
	228	+	};
227	229		return (
228	230		<Formik
229	231		enableReinitialize={true}
		skipped 131 lines

■ ■ ■ ■ ■ ■

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

		skipped 5 lines
6	6		import ListItemText from '@mui/material/ListItemText';
7	7		import { LockPattern } from 'mdi-material-ui';
8	8		import { KeyboardArrowRightOutlined } from '@mui/icons-material';
9		-	import { Theme } from '@mui/material/styles/createTheme';
10	9		import Skeleton from '@mui/material/Skeleton';
11	10		import { createFragmentContainer, graphql } from 'react-relay';
	11	+	import { ListItemButton } from '@mui/material';
12	12		import { useFormatter } from '../../../../components/i18n';
13	13		import { DataComponentLine_node$data } from './__generated__/DataComponentLine_node.graphql';
	14	+	import { Theme } from '../../../../components/Theme';
14	15
15		-	const useStyles = makeStyles((theme: Theme) => ({
	16	+	const useStyles = makeStyles<Theme>((theme) => ({
16	17		item: {},
17	18		itemIcon: {
18	19		color: theme.palette.primary.main,
		skipped 43 lines
62	63		<div>
63	64		<ListItem
64	65		divider={true}
65		-	button={true}
66	66		component={Link}
67	67		to={`/dashboard/techniques/data_component/${node.id}`}
68	68		>
69		-	<ListItemIcon classes={{ root: classes.itemIcon }}>
70		-	<LockPattern />
71		-	</ListItemIcon>
72		-	<ListItemText
73		-	primary={
74		-	<div>
75		-	<div className={classes.name}>
76		-	{node.name}
	69	+	<ListItemButton>
	70	+	<ListItemIcon classes={{ root: classes.itemIcon }}>
	71	+	<LockPattern />
	72	+	</ListItemIcon>
	73	+	<ListItemText
	74	+	primary={
	75	+	<div>
	76	+	<div className={classes.name}>
	77	+	{node.name}
	78	+	</div>
	79	+	<div className={classes.description}>
	80	+	{node.description && node.description.length > 0
	81	+	? node.description
	82	+	: t('This data component does not have any description.')}
	83	+	</div>
77	84		</div>
78		-	<div className={classes.description}>
79		-	{node.description && node.description.length > 0
80		-	? node.description
81		-	: t('This data component does not have any description.')}
82		-	</div>
83		-	</div>
84		-	}
85		-	/>
86		-	<ListItemIcon classes={{ root: classes.goIcon }}>
87		-	<KeyboardArrowRightOutlined />
88		-	</ListItemIcon>
	85	+	}
	86	+	/>
	87	+	<ListItemIcon classes={{ root: classes.goIcon }}>
	88	+	<KeyboardArrowRightOutlined />
	89	+	</ListItemIcon>
	90	+	</ListItemButton>
89	91		</ListItem>
90	92		</div>
91	93		);
		skipped 54 lines

■ ■ ■ ■ ■ ■

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

1	-	import React, { FunctionComponent } from 'react';
2	-	import { propOr } from 'ramda';
3	-	import { graphql, useFragment } from 'react-relay';
4	-	import Paper from '@mui/material/Paper';
5	-	import makeStyles from '@mui/styles/makeStyles';
6	-	import Typography from '@mui/material/Typography';
7	-	import { useFormatter } from '../../../../components/i18n';
8	-	import ItemAuthor from '../../../../components/ItemAuthor';
9	-	import ItemMarking from '../../../../components/ItemMarking';
10	-	import ExpandableMarkdown from '../../../../components/ExpandableMarkdown';
11	-	import { DataComponentOverview_dataComponent$key } from './__generated__/DataComponentOverview_dataComponent.graphql';
12	-
13	-	const styles = makeStyles(() => ({
14	-	paper: {
15	-	height: '100%',
16	-	minHeight: '100%',
17	-	margin: '10px 0 0 0',
18	-	padding: '15px',
19	-	borderRadius: 6,
20	-	},
21	-	}));
22	-
23	-	const DataComponentOverviewFragment = graphql`
24	-	fragment DataComponentOverview_dataComponent on DataComponent {
25	-	id
26	-	name
27	-	description
28	-	created
29	-	modified
30	-	objectMarking {
31	-	edges {
32	-	node {
33	-	id
34	-	definition
35	-	}
36	-	}
37	-	}
38	-	createdBy {
39	-	... on Identity {
40	-	id
41	-	name
42	-	entity_type
43	-	}
44	-	}
45	-	}
46	-	`;
47	-
48	-	interface DataComponentOverviewComponentProps {
49	-	data: DataComponentOverview_dataComponent$key
50	-	}
51	-
52	-	const DataComponentOverviewComponent: FunctionComponent<DataComponentOverviewComponentProps> = ({ data }) => {
53	-	const {
54	-	t,
55	-	fldt,
56	-	} = useFormatter();
57	-	const classes = styles();
58	-
59	-	const dataComponent = useFragment(DataComponentOverviewFragment, data);
60	-
61	-	const objectMarkings = dataComponent?.objectMarking?.edges \|\| [];
62	-
63	-	return (
64	-	<div style={{ height: '100%' }} className="break">
65	-	<Typography variant="h4" gutterBottom={true}>
66	-	{t('Information')}
67	-	</Typography>
68	-	<Paper classes={{ root: classes.paper }} variant="outlined">
69	-	<Typography variant="h3" gutterBottom={true}>
70	-	{t('Marking')}
71	-	</Typography>
72	-	{objectMarkings.length > 0 ? (
73	-	objectMarkings.map(
74	-	(markingDefinition) => (
75	-	<ItemMarking
76	-	key={markingDefinition?.node?.id}
77	-	label={markingDefinition?.node?.definition}
78	-	/>
79	-	),
80	-	)
81	-	) : (
82	-	<ItemMarking label="TLP:CLEAR" />
83	-	)}
84	-	<Typography
85	-	variant="h3"
86	-	gutterBottom={true}
87	-	style={{ marginTop: 20 }}
88	-	>
89	-	{t('Creation date')}
90	-	</Typography>
91	-	{fldt(dataComponent.created)}
92	-	<Typography
93	-	variant="h3"
94	-	gutterBottom={true}
95	-	style={{ marginTop: 20 }}
96	-	>
97	-	{t('Modification date')}
98	-	</Typography>
99	-	{fldt(dataComponent.modified)}
100	-	<Typography
101	-	variant="h3"
102	-	gutterBottom={true}
103	-	style={{ marginTop: 20 }}
104	-	>
105	-	{t('Author')}
106	-	</Typography>
107	-	<ItemAuthor createdBy={propOr(null, 'createdBy', dataComponent)} />
108	-	<Typography
109	-	variant="h3"
110	-	gutterBottom={true}
111	-	style={{ marginTop: 20 }}
112	-	>
113	-	{t('Description')}
114	-	</Typography>
115	-	<ExpandableMarkdown
116	-	className="markdown"
117	-	source={dataComponent.description}
118	-	limit={250}
119	-	/>
120	-	</Paper>
121	-	</div>
122	-	);
123	-	};
124	-
125	-	export default DataComponentOverviewComponent;
126	-

■ ■ ■ ■ ■ ■

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

		skipped 11 lines
12	12		import MoreVert from '@mui/icons-material/MoreVert';
13	13		import makeStyles from '@mui/styles/makeStyles';
14	14		import { graphql } from 'react-relay';
15		-	import { Theme } from '@mui/material/styles/createTheme';
16	15		import { useFormatter } from '../../../../components/i18n';
17	16		import { commitMutation, QueryRenderer } from '../../../../relay/environment';
18	17		import Loader, { LoaderVariant } from '../../../../components/Loader';
19	18		import Security, { KNOWLEDGE_KNUPDATE_KNDELETE } from '../../../../utils/Security';
20	19		import { dataComponentEditionQuery } from './DataComponentEdition';
21	20		import DataComponentEditionContainer from './DataComponentEditionContainer';
	21	+	import { Theme } from '../../../../components/Theme';
22	22
23	23		const styles = makeStyles<Theme>((theme) => ({
24	24		container: {
		skipped 165 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		-	import makeStyles from '@mui/styles/makeStyles';
4	3		import { DataComponentLine, DataComponentLineDummyComponent } from './DataComponentLine';
5	4		import { DataComponentsLines_data$data } from './__generated__/DataComponentsLines_data.graphql';
6	5		import { DataColumns, PaginationOptions } from '../../../../components/list_lines';
7	6		import ListLinesContent from '../../../../components/list_lines/ListLinesContent';
8	7
9		-	const useStyles = makeStyles(() => ({
10		-	root: {
11		-	margin: 0,
12		-	},
13		-	}));
14		-
15	8		interface DataComponentsLinesProps {
16	9		data?: DataComponentsLines_data$data,
17	10		dataColumns: DataColumns,
		skipped 3 lines
21	14		}
22	15
23	16		const DataComponentsLines: FunctionComponent<DataComponentsLinesProps> = ({ relay, data, dataColumns, paginationOptions, initialLoading }) => {
24		-	const dataComponents = data?.dataComponents?.edges ?? [];
25		-	const classes = useStyles();
26	17		return (
27	18		<ListLinesContent
28		-	className={classes.root}
29	19		initialLoading={initialLoading}
30	20		isLoading={relay.isLoading}
31	21		loadMore={relay.loadMore}
32	22		hasMore={relay.hasMore}
33		-	dataList={dataComponents}
	23	+	dataList={data?.dataComponents?.edges ?? []}
34	24		LineComponent={ DataComponentLine }
35	25		DummyLineComponent={ <DataComponentLineDummyComponent /> }
36	26		dataColumns={dataColumns}
		skipped 3 lines
40	30		};
41	31
42	32		export const dataComponentsLinesQuery = graphql`
43		-	query DataComponentsLinesPaginationQuery($count: Int!, $cursor: ID) {
44		-	...DataComponentsLines_data @arguments(count: $count, cursor: $cursor)
	33	+	query DataComponentsLinesPaginationQuery(
	34	+	$search: String
	35	+	$count: Int!
	36	+	$cursor: ID
	37	+	$orderBy: DataComponentsOrdering
	38	+	$orderMode: OrderingMode
	39	+	) {
	40	+	...DataComponentsLines_data @arguments(
	41	+	search: $search
	42	+	count: $count
	43	+	cursor: $cursor
	44	+	orderBy: $orderBy
	45	+	orderMode: $orderMode
	46	+	)
45	47		}
46	48		`;
47	49
		skipped 3 lines
51	53		data: graphql`
52	54		fragment DataComponentsLines_data on Query
53	55		@argumentDefinitions(
	56	+	search: { type: "String" }
54	57		count: { type: "Int", defaultValue: 25 }
55	58		cursor: { type: "ID" }
	59	+	orderBy: { type: "DataComponentsOrdering", defaultValue: name }
	60	+	orderMode: { type: "OrderingMode", defaultValue: asc }
56	61		) {
57		-	dataComponents(first: $count, after: $cursor)
	62	+	dataComponents(
	63	+	search: $search
	64	+	first: $count
	65	+	after: $cursor
	66	+	orderBy: $orderBy
	67	+	orderMode: $orderMode
	68	+	)
58	69		@connection(key: "Pagination_dataComponents") {
59	70		edges {
60	71		node {
61		-	id
62		-	name
63		-	description
64	72		...DataComponentLine_node
65	73		}
66	74		}
		skipped 17 lines
84	92		count: totalCount,
85	93		};
86	94		},
87		-	getVariables(props, { count, cursor }) {
	95	+	getVariables(props, { count, cursor }, fragmentVariables) {
88	96		return {
	97	+	search: fragmentVariables.search,
89	98		count,
90	99		cursor,
	100	+	orderBy: fragmentVariables.orderBy,
	101	+	orderMode: fragmentVariables.orderMode,
91	102		};
92	103		},
93	104		query: dataComponentsLinesQuery,
		skipped 3 lines

■ ■ ■ ■ ■ ■

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

1		-	import React, { FunctionComponent, ReactElement, useContext } from 'react';
	1	+	import React, { FunctionComponent, ReactElement } from 'react';
2	2		import { filter, includes } from 'ramda';
3	3		import { RootPrivateQuery$data } from '../private/__generated__/RootPrivateQuery.graphql';
4	4		import { ModuleHelper } from './platformModulesHelper';
		skipped 96 lines

[frontend] Migrate data component to TSX