STRLCPY/opencti

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/nav/TopBar.js

		skipped 73 lines
74	74		import TopMenuEvent from './TopMenuEvent';
75	75		import TopMenuImport from './TopMenuImport';
76	76		import TopMenuLocation from './TopMenuLocation';
	77	+	import TopMenuDataComponent from './TopMenuDataComponent';
77	78
78	79		const styles = (theme) => ({
79	80		appBar: {
		skipped 225 lines
305	306		)}
306	307		{location.pathname.includes('/dashboard/techniques/courses_of_action/') && (
307	308		<TopMenuCourseOfAction />
	309	+	)}
	310	+	{location.pathname.includes('/dashboard/techniques/data_components/') && (
	311	+	<TopMenuDataComponent />
308	312		)}
309	313		{location.pathname.includes('/dashboard/data') ? <TopMenuData /> : ''}
310	314		{location.pathname.includes('/dashboard/settings') && (
		skipped 174 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/nav/TopMenuDataComponent.js

1	-	import React, { Component } from 'react';
2	-	import * as PropTypes from 'prop-types';
3	-	import { withRouter, Link } from 'react-router-dom';
4	-	import { compose } from 'ramda';
5	-	import withStyles from '@mui/styles/withStyles';
6	-	import Button from '@mui/material/Button';
7	-	import { ArrowForwardIosOutlined } from '@mui/icons-material';
8	-	import { ProgressWrench } from 'mdi-material-ui';
9	-	import inject18n from '../../../components/i18n';
10	-	import Security, {
11	-	KNOWLEDGE_KNGETEXPORT,
12	-	KNOWLEDGE_KNUPLOAD,
13	-	} from '../../../utils/Security';
14	-
15	-	const styles = (theme) => ({
16	-	buttonHome: {
17	-	marginRight: theme.spacing(2),
18	-	padding: '0 5px 0 5px',
19	-	minHeight: 20,
20	-	textTransform: 'none',
21	-	},
22	-	button: {
23	-	marginRight: theme.spacing(2),
24	-	padding: '0 5px 0 5px',
25	-	minHeight: 20,
26	-	minWidth: 20,
27	-	textTransform: 'none',
28	-	},
29	-	icon: {
30	-	marginRight: theme.spacing(1),
31	-	},
32	-	arrow: {
33	-	verticalAlign: 'middle',
34	-	marginRight: 10,
35	-	},
36	-	});
37	-
38	-	class TopMenuDataComponent extends Component {
39	-	render() {
40	-	const {
41	-	t,
42	-	location,
43	-	match: {
44	-	params: { courseOfActionId },
45	-	},
46	-	classes,
47	-	} = this.props;
48	-	return (
49	-	<div>
50	-	<Button
51	-	component={Link}
52	-	to="/dashboard/techniques/courses_of_action"
53	-	variant="contained"
54	-	size="small"
55	-	color="primary"
56	-	classes={{ root: classes.buttonHome }}
57	-	>
58	-	<ProgressWrench className={classes.icon} fontSize="small" />
59	-	{t('Courses of action')}
60	-	</Button>
61	-	<ArrowForwardIosOutlined
62	-	color="primary"
63	-	classes={{ root: classes.arrow }}
64	-	/>
65	-	<Button
66	-	component={Link}
67	-	to={`/dashboard/techniques/courses_of_action/${courseOfActionId}`}
68	-	variant={
69	-	location.pathname
70	-	=== `/dashboard/techniques/courses_of_action/${courseOfActionId}`
71	-	? 'contained'
72	-	: 'text'
73	-	}
74	-	size="small"
75	-	color={
76	-	location.pathname
77	-	=== `/dashboard/techniques/courses_of_action/${courseOfActionId}`
78	-	? 'secondary'
79	-	: 'primary'
80	-	}
81	-	classes={{ root: classes.button }}
82	-	>
83	-	{t('Overview')}
84	-	</Button>
85	-	<Security needs={[KNOWLEDGE_KNUPLOAD, KNOWLEDGE_KNGETEXPORT]}>
86	-	<Button
87	-	component={Link}
88	-	to={`/dashboard/techniques/courses_of_action/${courseOfActionId}/files`}
89	-	variant={
90	-	location.pathname
91	-	=== `/dashboard/techniques/courses_of_action/${courseOfActionId}/files`
92	-	? 'contained'
93	-	: 'text'
94	-	}
95	-	size="small"
96	-	color={
97	-	location.pathname
98	-	=== `/dashboard/techniques/courses_of_action/${courseOfActionId}/files`
99	-	? 'secondary'
100	-	: 'primary'
101	-	}
102	-	classes={{ root: classes.button }}
103	-	>
104	-	{t('Data')}
105	-	</Button>
106	-	</Security>
107	-	<Button
108	-	component={Link}
109	-	to={`/dashboard/techniques/courses_of_action/${courseOfActionId}/history`}
110	-	variant={
111	-	location.pathname
112	-	=== `/dashboard/techniques/courses_of_action/${courseOfActionId}/history`
113	-	? 'contained'
114	-	: 'text'
115	-	}
116	-	size="small"
117	-	color={
118	-	location.pathname
119	-	=== `/dashboard/techniques/courses_of_action/${courseOfActionId}/history`
120	-	? 'secondary'
121	-	: 'primary'
122	-	}
123	-	classes={{ root: classes.button }}
124	-	>
125	-	{t('History')}
126	-	</Button>
127	-	</div>
128	-	);
129	-	}
130	-	}
131	-
132	-	TopMenuDataComponent.propTypes = {
133	-	classes: PropTypes.object,
134	-	location: PropTypes.object,
135	-	match: PropTypes.object,
136	-	t: PropTypes.func,
137	-	history: PropTypes.object,
138	-	};
139	-
140	-	export default compose(
141	-	inject18n,
142	-	withRouter,
143	-	withStyles(styles),
144	-	)(TopMenuDataComponent);
145	-

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/nav/TopMenuDataComponent.tsx

1	+	import React, { FunctionComponent } from 'react';
2	+	import { Link, useLocation, useParams } from 'react-router-dom';
3	+	import Button from '@mui/material/Button';
4	+	import { ArrowForwardIosOutlined } from '@mui/icons-material';
5	+	import { ProgressWrench } from 'mdi-material-ui';
6	+	import makeStyles from '@mui/styles/makeStyles';
7	+	import { useFormatter } from '../../../components/i18n';
8	+	import Security, { KNOWLEDGE_KNGETEXPORT, KNOWLEDGE_KNUPLOAD } from '../../../utils/Security';
9	+	import { Theme } from '../../../components/Theme';
10	+
11	+	// TODO: configure file to be import with @
12	+
13	+	const styles = makeStyles<Theme>((theme) => ({
14	+	buttonHome: {
15	+	marginRight: theme.spacing(2),
16	+	padding: '0 5px 0 5px',
17	+	minHeight: 20,
18	+	textTransform: 'none',
19	+	},
20	+	button: {
21	+	marginRight: theme.spacing(2),
22	+	padding: '0 5px 0 5px',
23	+	minHeight: 20,
24	+	minWidth: 20,
25	+	textTransform: 'none',
26	+	},
27	+	icon: {
28	+	marginRight: theme.spacing(1),
29	+	},
30	+	arrow: {
31	+	verticalAlign: 'middle',
32	+	marginRight: 10,
33	+	},
34	+	}));
35	+
36	+	const TopMenuDataComponent: FunctionComponent<Record<string, never>> = () => {
37	+	const location = useLocation();
38	+	const { t } = useFormatter();
39	+	const classes = styles();
40	+	const { dataComponentId } = useParams() as { dataComponentId: string };
41	+
42	+	return (
43	+	<div>
44	+	<Button
45	+	component={Link}
46	+	to="/dashboard/techniques/data_components"
47	+	variant="contained"
48	+	size="small"
49	+	color="primary"
50	+	classes={{ root: classes.buttonHome }}
51	+	>
52	+	<ProgressWrench className={classes.icon} fontSize="small" />
53	+	{t('Data Components')}
54	+	</Button>
55	+	<ArrowForwardIosOutlined
56	+	color="primary"
57	+	classes={{ root: classes.arrow }}
58	+	/>
59	+	<Button
60	+	component={Link}
61	+	to={`/dashboard/techniques/data_components/${dataComponentId}`}
62	+	variant={
63	+	location.pathname
64	+	=== `/dashboard/techniques/data_components/${dataComponentId}`
65	+	? 'contained'
66	+	: 'text'
67	+	}
68	+	size="small"
69	+	color={
70	+	location.pathname
71	+	=== `/dashboard/techniques/data_components/${dataComponentId}`
72	+	? 'secondary'
73	+	: 'primary'
74	+	}
75	+	classes={{ root: classes.button }}
76	+	>
77	+	{t('Overview')}
78	+	</Button>
79	+	<Security needs={[KNOWLEDGE_KNUPLOAD, KNOWLEDGE_KNGETEXPORT]}>
80	+	<Button
81	+	component={Link}
82	+	to={`/dashboard/techniques/data_components/${dataComponentId}/files`}
83	+	variant={
84	+	location.pathname
85	+	=== `/dashboard/techniques/data_components/${dataComponentId}/files`
86	+	? 'contained'
87	+	: 'text'
88	+	}
89	+	size="small"
90	+	color={
91	+	location.pathname
92	+	=== `/dashboard/techniques/data_components/${dataComponentId}/files`
93	+	? 'secondary'
94	+	: 'primary'
95	+	}
96	+	classes={{ root: classes.button }}
97	+	>
98	+	{t('Data')}
99	+	</Button>
100	+	</Security>
101	+	<Button
102	+	component={Link}
103	+	to={`/dashboard/techniques/data_components/${dataComponentId}/history`}
104	+	variant={
105	+	location.pathname
106	+	=== `/dashboard/techniques/data_components/${dataComponentId}/history`
107	+	? 'contained'
108	+	: 'text'
109	+	}
110	+	size="small"
111	+	color={
112	+	location.pathname
113	+	=== `/dashboard/techniques/data_components/${dataComponentId}/history`
114	+	? 'secondary'
115	+	: 'primary'
116	+	}
117	+	classes={{ root: classes.button }}
118	+	>
119	+	{t('History')}
120	+	</Button>
121	+	</div>
122	+	);
123	+	};
124	+
125	+	export default TopMenuDataComponent;
126	+

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/nav/TopMenuTechniques.js

		skipped 3 lines
4	4		import { compose } from 'ramda';
5	5		import withStyles from '@mui/styles/withStyles';
6	6		import Button from '@mui/material/Button';
7		-	import {LockPattern, ProgressWrench} from 'mdi-material-ui';
	7	+	import { LockPattern, ProgressWrench } from 'mdi-material-ui';
	8	+	import { SpeakerNotesOutlined } from '@mui/icons-material';
8	9		import inject18n from '../../../components/i18n';
9	10		import { UserContext } from '../../../utils/Security';
10		-	import {SpeakerNotesOutlined} from "@mui/icons-material";
11	11
12	12		const styles = (theme) => ({
13	13		button: {
		skipped 88 lines
102	102		{!helper.isEntityTypeHidden('Data-Component') && (
103	103		<Button
104	104		component={Link}
105		-	to="/dashboard/techniques/data_component"
	105	+	to="/dashboard/techniques/data_components"
106	106		variant={
107		-	location.pathname === '/dashboard/techniques/data_component'
	107	+	location.pathname === '/dashboard/techniques/data_components'
108	108		? 'contained'
109	109		: 'text'
110	110		}
111	111		size="small"
112	112		color={
113		-	location.pathname === '/dashboard/techniques/data_component'
	113	+	location.pathname === '/dashboard/techniques/data_components'
114	114		? 'secondary'
115	115		: 'primary'
116	116		}
117	117		classes={{ root: classes.button }}
118	118		>
119	119		<ProgressWrench className={classes.icon} fontSize="small" />
120		-	{t('Data Component')}
	120	+	{t('Data Components')}
121	121		</Button>
122	122		)}
123	123		</div>
		skipped 19 lines

■ ■ ■ ■ ■ ■

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

		skipped 9 lines
10	10		import RootCourseOfAction from './courses_of_action/Root';
11	11		import DataComponents from './DataComponents';
12	12		import { UserContext } from '../../../utils/Security';
13		-	import RootDataComponent from "./data_components/Root";
	13	+	import RootDataComponent from './data_components/Root';
14	14
15	15		class Root extends Component {
16	16		render() {
		skipped 8 lines
25	25		redirect = 'narratives';
26	26		} else if (!helper.isEntityTypeHidden('Courses of Action')) {
27	27		redirect = 'courses_of_action';
28		-	} else if (!helper.isEntityTypeHidden('Data Component')) {
29		-	redirect = 'data_component';
	28	+	} else if (!helper.isEntityTypeHidden('Data Components')) {
	29	+	redirect = 'data_components';
30	30		}
31	31		return (
32	32		<Switch>
		skipped 39 lines
72	72		/>
73	73		<BoundaryRoute
74	74		exact
75		-	path="/dashboard/techniques/data_component"
	75	+	path="/dashboard/techniques/data_components"
76	76		component={DataComponents}
77	77		/>
78	78		<BoundaryRoute
79		-	path="/dashboard/techniques/data_component/:dataComponentId"
	79	+	path="/dashboard/techniques/data_components/:dataComponentId"
80	80		render={(routeProps) => (
81	81		<RootDataComponent {...routeProps} me={me} />
82	82		)}
		skipped 15 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		-
20	18		const useStyles = makeStyles(() => ({
21	19		gridContainer: {
22	20		marginBottom: 20,
		skipped 92 lines
115	113		<Grid item={true} xs={6}>
116	114		<SimpleStixObjectOrStixRelationshipStixCoreRelationships
117	115		stixObjectOrStixRelationshipId={dataComponent.id}
118		-	stixObjectOrStixRelationshipLink={`/dashboard/techniques/data_component/${dataComponent.id}/knowledge`}
	116	+	stixObjectOrStixRelationshipLink={`/dashboard/techniques/data_components/${dataComponent.id}/knowledge`}
119	117		/>
120	118		</Grid>
121	119		<Grid item={true} xs={6}>
		skipped 30 lines

■ ■ ■ ■ ■ ■

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

		skipped 37 lines
38	38		}
39	39		`;
40	40
41		-	// TODO: refacto with this mechanism
42		-
43	41		interface DataComponentDetailsProps {
44	42		dataComponent: DataComponentDetails_dataComponent$key
45	43		}
		skipped 31 lines

■ ■ ■ ■ ■ ■

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

		skipped 89 lines
90	90		<QueryRenderer
91	91		query={dataComponentEditionQuery}
92	92		variables={{ id: dataComponentId }}
93		-	render={(result: { props: any }) => { // TODO: fix this type
	93	+	render={(result: { props: any }) => {
94	94		if (result.props) {
95	95		return (
96	96		<DataComponentEditionContainer
		skipped 18 lines

■ ■ ■ ■ ■ ■

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

		skipped 78 lines
79	79
80	80		interface DataComponentEditionOverviewComponentProps {
81	81		data: DataComponentEditionOverview_dataComponent$key
82		-	context: ReadonlyArray<{ // TODO: extract
	82	+	context: ReadonlyArray<{
83	83		readonly focusOn: string \| null;
84	84		readonly name: string;
85	85		} \| null> \| null
		skipped 68 lines
154	154		});
155	155		};
156	156
157		-	const handleSubmitField = (name: string, value: any) => { // TODO: find valid type
	157	+	const handleSubmitField = (name: string, value: string \| { label: string, color: string, value: string, order: string }) => {
158	158		let finalValue = value;
159		-	if (name === 'x_opencti_workflow_id') {
	159	+	if (name === 'x_opencti_workflow_id' && typeof value !== 'string') {
160	160		finalValue = value.value;
161	161		}
162	162		dataComponentValidation(t)
		skipped 200 lines

■ ■ ■ ■ ■ ■

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

		skipped 39 lines
40	40		stixDomainObject={dataComponent}
41	41		PopoverComponent={<DataComponentPopover dataComponentId={dataComponent.id} />}
42	42		enableReferences={enableReferences}
43		-	// isOpenctiAlias={true} // TODO: ask to Samuel
	43	+	// isOpenctiAlias={true}
44	44		/>
45	45		<Switch>
46	46		<Route
47		-	path="/dashboard/techniques/data_component/:dataComponentId/knowledge/relations/:relationId"
	47	+	path="/dashboard/techniques/data_components/:dataComponentId/knowledge/relations/:relationId"
48	48		// @ts-ignore: incompatibility type
49	49		// TODO: required migration to V6
50	50		render={(routeProps) => (
		skipped 3 lines
54	54		/>
55	55		)}
56	56		/>
57		-	{/* TODO: ask Samuel ? */}
58	57		</Switch>
59	58		</div>
60	59		);
		skipped 4 lines

■ ■ ■ ■ ■ ■

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

		skipped 63 lines
64	64		<ListItem
65	65		divider={true}
66	66		component={Link}
67		-	to={`/dashboard/techniques/data_component/${node.id}`}
	67	+	to={`/dashboard/techniques/data_components/${node.id}`}
68	68		>
69	69		<ListItemButton>
70	70		<ListItemIcon classes={{ root: classes.itemIcon }}>
		skipped 77 lines

■ ■ ■ ■ ■ ■

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

		skipped 80 lines
81	81		onCompleted: () => {
82	82		setDeleting(false);
83	83		handleClose();
84		-	history.push('/dashboard/techniques/data_component');
	84	+	history.push('/dashboard/techniques/data_components');
85	85		},
86	86		updater: undefined,
87	87		optimisticUpdater: undefined,
		skipped 74 lines
162	162		<QueryRenderer
163	163		query={dataComponentEditionQuery}
164	164		variables={{ id: dataComponentId }}
165		-	render={(result: { props: any }) => { // TODO: fix this type
	165	+	render={(result: { props: any }) => {
166	166		if (result.props) {
167	167		return (
168	168		<DataComponentEditionContainer
		skipped 18 lines

■ ■ ■ ■ ■ ■

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

1		-	import React, { FunctionComponent } from 'react';
	1	+	import React, { FunctionComponent, useEffect } from 'react';
2	2		import { Route, Switch, useParams } from 'react-router-dom';
3	3		import { graphql } from 'react-relay';
4	4		import {
		skipped 55 lines
60	60		const RootDataComponent: FunctionComponent<RootDataComponentProps> = () => {
61	61		const { dataComponentId } = useParams() as { dataComponentId: string };
62	62		const { me } = useAuth();
63		-	const sub = requestSubscription({
64		-	subscription,
65		-	variables: { id: dataComponentId },
	63	+
	64	+	useEffect(() => {
	65	+	const sub = requestSubscription({
	66	+	subscription,
	67	+	variables: { id: dataComponentId },
	68	+	});
	69	+	return sub.dispose();
66	70		});
67		-	const componentWillUnmount = () => {
68		-	sub.dispose();
69		-	};
70	71
71	72		return (
72	73		<div>
		skipped 10 lines
83	84		// @ts-ignore
84	85		// TODO: required migration to V6
85	86		exact
86		-	path="/dashboard/techniques/data_component/:dataComponentId"
	87	+	path="/dashboard/techniques/data_components/:dataComponentId"
87	88		// @ts-ignore
88	89		// TODO: required migration to V6
89	90		render={(routeProps) => (
		skipped 4 lines
94	95		)}
95	96		/>
96	97		<Route
97		-	path="/dashboard/techniques/data_component/:dataComponentId/knowledge"
	98	+	path="/dashboard/techniques/data_components/:dataComponentId/knowledge"
98	99		// @ts-ignore
99	100		// TODO: required migration to V6
100	101		render={(routeProps) => (
		skipped 7 lines
108	109		// @ts-ignore
109	110		// TODO: required migration to V6
110	111		exact
111		-	path="/dashboard/techniques/data_component/:dataComponentId/files"
	112	+	path="/dashboard/techniques/data_components/:dataComponentId/files"
112	113		// @ts-ignore
113	114		// TODO: required migration to V6
114	115		render={(routeProps) => (
		skipped 18 lines
133	134		// @ts-ignore
134	135		// TODO: required migration to V6
135	136		exact
136		-	path="/dashboard/techniques/data_component/:dataComponentId/history"
	137	+	path="/dashboard/techniques/data_components/:dataComponentId/history"
137	138		// @ts-ignore
138	139		// TODO: required migration to V6
139	140		render={(routeProps) => (
		skipped 28 lines

[frontend] Add Top Menu Data Components