STRLCPY/opencti

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

2ac34f9a

1 parent 29326b64

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

■ ■ ■ ■ ■ ■

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

1	-	import React, { Component } from 'react';
2	-	import PropTypes from 'prop-types';
3	-	import { graphql, createFragmentContainer } from 'react-relay';
4	-	import { compose } from 'ramda';
5	-	import withStyles from '@mui/styles/withStyles';
6	-	import Typography from '@mui/material/Typography';
7	-	import IconButton from '@mui/material/IconButton';
8	-	import { Close } from '@mui/icons-material';
9	-	import inject18n from '../../../../components/i18n';
10	-	import { SubscriptionAvatars } from '../../../../components/Subscription';
11	-	import DataComponentEditionOverview from "./DataComponentEditionOverview";
12	-
13	-	const styles = (theme) => ({
14	-	header: {
15	-	backgroundColor: theme.palette.background.nav,
16	-	padding: '20px 20px 20px 60px',
17	-	},
18	-	closeButton: {
19	-	position: 'absolute',
20	-	top: 12,
21	-	left: 5,
22	-	color: 'inherit',
23	-	},
24	-	importButton: {
25	-	position: 'absolute',
26	-	top: 15,
27	-	right: 20,
28	-	},
29	-	container: {
30	-	padding: '10px 20px 20px 20px',
31	-	},
32	-	appBar: {
33	-	width: '100%',
34	-	zIndex: theme.zIndex.drawer + 1,
35	-	borderBottom: '1px solid #5c5c5c',
36	-	},
37	-	title: {
38	-	float: 'left',
39	-	},
40	-	});
41	-
42	-	class DataComponentEditionContainer extends Component {
43	-	constructor(props) {
44	-	super(props);
45	-	this.state = { currentTab: 0 };
46	-	}
47	-
48	-	handleChangeTab(event, value) {
49	-	this.setState({ currentTab: value });
50	-	}
51	-
52	-	render() {
53	-	const { t, classes, handleClose, dataComponent } = this.props;
54	-	const { editContext } = dataComponent;
55	-	return (
56	-	<div>
57	-	<div className={classes.header}>
58	-	<IconButton
59	-	aria-label="Close"
60	-	className={classes.closeButton}
61	-	onClick={handleClose.bind(this)}
62	-	size="large"
63	-	color="primary"
64	-	>
65	-	<Close fontSize="small" color="primary" />
66	-	</IconButton>
67	-	<Typography variant="h6" classes={{ root: classes.title }}>
68	-	{t('Update a data component')}
69	-	</Typography>
70	-	<SubscriptionAvatars context={editContext} />
71	-	<div className="clearfix" />
72	-	</div>
73	-	<div className={classes.container}>
74	-	<DataComponentEditionOverview
75	-	dataComponent={dataComponent}
76	-	enableReferences={this.props.enableReferences}
77	-	context={editContext}
78	-	handleClose={handleClose.bind(this)}
79	-	/>
80	-	</div>
81	-	</div>
82	-	);
83	-	}
84	-	}
85	-
86	-	DataComponentEditionContainer.propTypes = {
87	-	handleClose: PropTypes.func,
88	-	classes: PropTypes.object,
89	-	dataComponent: PropTypes.object,
90	-	theme: PropTypes.object,
91	-	t: PropTypes.func,
92	-	};
93	-
94	-	const DataComponentEditionFragment = createFragmentContainer(
95	-	DataComponentEditionContainer,
96	-	{
97	-	dataComponent: graphql`
98	-	fragment DataComponentEditionContainer_dataComponent on DataComponent {
99	-	id
100	-	...DataComponentEditionOverview_dataComponent
101	-	editContext {
102	-	name
103	-	focusOn
104	-	}
105	-	}
106	-	`,
107	-	},
108	-	);
109	-
110	-	export default compose(
111	-	inject18n,
112	-	withStyles(styles, { withTheme: true }),
113	-	)(DataComponentEditionFragment);
114	-

■ ■ ■ ■ ■ ■

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

1	+	import React, { FunctionComponent } from 'react';
2	+	import { createFragmentContainer, graphql } from 'react-relay';
3	+	import { useFormatter } from '../../../../components/i18n';
4	+	import makeStyles from '@mui/styles/makeStyles';
5	+	import { DataComponentEditionContainer_dataComponent$data } from './__generated__/DataComponentEditionContainer_dataComponent.graphql';
6	+	import { Theme } from '../../../../components/Theme';
7	+	import IconButton from '@mui/material/IconButton';
8	+	import { Close } from '@mui/icons-material';
9	+	import Typography from '@mui/material/Typography';
10	+	import { SubscriptionAvatars } from '../../../../components/Subscription';
11	+	import DataComponentEditionOverview from './DataComponentEditionOverview';
12	+
13	+	const styles = makeStyles<Theme>((theme) => ({
14	+	header: {
15	+	backgroundColor: `${theme.palette.background.nav}`,
16	+	padding: '20px 20px 20px 60px',
17	+	},
18	+	closeButton: {
19	+	position: 'absolute',
20	+	top: 12,
21	+	left: 5,
22	+	color: 'inherit',
23	+	},
24	+	importButton: {
25	+	position: 'absolute',
26	+	top: 15,
27	+	right: 20,
28	+	},
29	+	container: {
30	+	padding: '10px 20px 20px 20px',
31	+	},
32	+	appBar: {
33	+	width: '100%',
34	+	zIndex: theme.zIndex.drawer + 1,
35	+	borderBottom: '1px solid #5c5c5c',
36	+	},
37	+	title: {
38	+	float: 'left',
39	+	},
40	+	}));
41	+
42	+	interface DataComponentEditionContainerProps {
43	+	dataComponent: DataComponentEditionContainer_dataComponent$data
44	+	handleClose: () => void,
45	+	}
46	+
47	+	const DataComponentEditionContainer: FunctionComponent<DataComponentEditionContainerProps> = ({ dataComponent, handleClose}) => {
48	+	const { t } = useFormatter();
49	+	const classes = styles();
50	+
51	+	const { editContext } = dataComponent;
52	+
53	+	return (
54	+	<div>
55	+	<div className={classes.header}>
56	+	<IconButton
57	+	aria-label="Close"
58	+	className={classes.closeButton}
59	+	onClick={handleClose}
60	+	size="large"
61	+	color="primary"
62	+	>
63	+	<Close fontSize="small" color="primary" />
64	+	</IconButton>
65	+	<Typography variant="h6" classes={{ root: classes.title }}>
66	+	{t('Update a data component')}
67	+	</Typography>
68	+	<SubscriptionAvatars context={editContext} />
69	+	<div className="clearfix" />
70	+	</div>
71	+	<div className={classes.container}>
72	+	<DataComponentEditionOverview
73	+	dataComponent={dataComponent}
74	+	context={editContext}
75	+	handleClose={handleClose}
76	+	/>
77	+	</div>
78	+	</div>
79	+	);
80	+	}
81	+
82	+	const DataComponentEditionFragment = createFragmentContainer(
83	+	DataComponentEditionContainer,
84	+	{
85	+	dataComponent: graphql`
86	+	fragment DataComponentEditionContainer_dataComponent on DataComponent {
87	+	id
88	+	...DataComponentEditionOverview_dataComponent
89	+	editContext {
90	+	name
91	+	focusOn
92	+	}
93	+	}
94	+	`,
95	+	},
96	+	);
97	+
98	+	export default DataComponentEditionFragment;
99	+

■ ■ ■ ■ ■ ■

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

		skipped 166 lines
167	167		<QueryRenderer
168	168		query={dataComponentEditionQuery}
169	169		variables={{ id: dataComponentId }}
170		-	render={(result: { props: any }) => {
171		-	{typeof result.props}
	170	+	render={(result: { props: any }) => { // TODO: fix this type
172	171		if (result.props) {
173	172		return (
174	173		<DataComponentEditionContainer
175		-	dataComponent={result.props}
	174	+	dataComponent={result.props.dataComponent}
176	175		handleClose={handleCloseEdit}
177	176		/>
178	177		);
		skipped 11 lines

[frontend] Migrate data component edition container to TSX