STRLCPY/opencti

[Front] Migrate Country Files to TS (#680)
sarahBocognano committed 1 year ago

af9def59

1 parent ff2c330a

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

■ ■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/locations/Countries.tsx

		skipped 53 lines
54	54		const dataColumns = {
55	55		name: {
56	56		label: 'Name',
57		-	width: '100%',
	57	+	width: '60%',
	58	+	isSortable: true,
	59	+	},
	60	+	created: {
	61	+	label: 'Creation date',
	62	+	width: '15%',
	63	+	isSortable: true,
	64	+	},
	65	+	modified: {
	66	+	label: 'Modification date',
	67	+	width: '15%',
58	68		isSortable: true,
59	69		},
60	70		};
		skipped 38 lines

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/locations/countries/Country.js opencti-platform/opencti-front/src/private/components/locations/countries/Country.tsx

1		-	import React, { Component } from 'react';
	1	+	import React, { Component, FunctionComponent } from 'react';
2	2		import PropTypes from 'prop-types';
3	3		import { compose } from 'ramda';
4		-	import { graphql, createFragmentContainer } from 'react-relay';
	4	+	import { graphql, createFragmentContainer, useFragment } from 'react-relay';
5	5		import withStyles from '@mui/styles/withStyles';
6	6		import Grid from '@mui/material/Grid';
	7	+	import makeStyles from '@mui/styles/makeStyles';
7	8		import inject18n from '../../../../components/i18n';
8	9		import CountryEdition from './CountryEdition';
9	10		import CountryPopover from './CountryPopover';
		skipped 6 lines
16	17		import StixCoreObjectLatestHistory from '../../common/stix_core_objects/StixCoreObjectLatestHistory';
17	18		import SimpleStixObjectOrStixRelationshipStixCoreRelationships from '../../common/stix_core_relationships/SimpleStixObjectOrStixRelationshipStixCoreRelationships';
18	19		import LocationMiniMap from '../../common/location/LocationMiniMap';
	20	+	import { Country_country$data, Country_country$key } from './__generated__/Country_country.graphql';
19	21
20		-	const styles = () => ({
21		-	container: {
22		-	margin: 0,
23		-	},
	22	+	const useStyles = makeStyles(() => ({
24	23		gridContainer: {
25	24		marginBottom: 20,
26	25		},
27		-	});
	26	+	container: {
	27	+	margin: 0,
	28	+	},
	29	+	}));
28	30
29		-	class CountryComponent extends Component {
30		-	render() {
31		-	const { classes, country } = this.props;
32		-	return (
	31	+	const CountryFragment = graphql`
	32	+	fragment Country_country on Country {
	33	+	id
	34	+	standard_id
	35	+	x_opencti_stix_ids
	36	+	spec_version
	37	+	revoked
	38	+	confidence
	39	+	created
	40	+	modified
	41	+	created_at
	42	+	updated_at
	43	+	createdBy {
	44	+	... on Identity {
	45	+	id
	46	+	name
	47	+	entity_type
	48	+	}
	49	+	}
	50	+	creator {
	51	+	id
	52	+	name
	53	+	}
	54	+	objectMarking {
	55	+	edges {
	56	+	node {
	57	+	id
	58	+	definition
	59	+	x_opencti_color
	60	+	}
	61	+	}
	62	+	}
	63	+	objectLabel {
	64	+	edges {
	65	+	node {
	66	+	id
	67	+	value
	68	+	color
	69	+	}
	70	+	}
	71	+	}
	72	+	name
	73	+	latitude
	74	+	longitude
	75	+	x_opencti_aliases
	76	+	status {
	77	+	id
	78	+	order
	79	+	template {
	80	+	name
	81	+	color
	82	+	}
	83	+	}
	84	+	workflowEnabled
	85	+	}
	86	+	`;
	87	+
	88	+	const CountryComponent = ({ countryData }: { countryData: Country_country$key }) => {
	89	+	const classes = useStyles();
	90	+	const country = useFragment<Country_country$key>(CountryFragment, countryData);
	91	+	return (
33	92		<div className={classes.container}>
34	93		<StixDomainObjectHeader
35	94		disableSharing={true}
36	95		stixDomainObject={country}
37	96		isOpenctiAlias={true}
38		-	PopoverComponent={<CountryPopover />}
	97	+	PopoverComponent={CountryPopover}
39	98		/>
40	99		<Grid
41	100		container={true}
		skipped 10 lines
52	111		? [country.latitude, country.longitude]
53	112		: [48.8566969, 2.3514616]
54	113		}
55		-	countries={[country]}
	114	+	country={country}
56	115		zoom={4}
57	116		/>
58	117		</Grid>
		skipped 36 lines
95	154		<CountryEdition countryId={country.id} />
96	155		</Security>
97	156		</div>
98		-	);
99		-	}
100		-	}
101		-
102		-	CountryComponent.propTypes = {
103		-	country: PropTypes.object,
104		-	classes: PropTypes.object,
105		-	t: PropTypes.func,
	157	+	);
106	158		};
107	159
108		-	const Country = createFragmentContainer(CountryComponent, {
109		-	country: graphql`
110		-	fragment Country_country on Country {
111		-	id
112		-	standard_id
113		-	x_opencti_stix_ids
114		-	spec_version
115		-	revoked
116		-	confidence
117		-	created
118		-	modified
119		-	created_at
120		-	updated_at
121		-	createdBy {
122		-	... on Identity {
123		-	id
124		-	name
125		-	entity_type
126		-	}
127		-	}
128		-	creator {
129		-	id
130		-	name
131		-	}
132		-	objectMarking {
133		-	edges {
134		-	node {
135		-	id
136		-	definition
137		-	x_opencti_color
138		-	}
139		-	}
140		-	}
141		-	objectLabel {
142		-	edges {
143		-	node {
144		-	id
145		-	value
146		-	color
147		-	}
148		-	}
149		-	}
150		-	name
151		-	latitude
152		-	longitude
153		-	x_opencti_aliases
154		-	status {
155		-	id
156		-	order
157		-	template {
158		-	name
159		-	color
160		-	}
161		-	}
162		-	workflowEnabled
163		-	}
164		-	`,
165		-	});
166		-
167		-	export default compose(inject18n, withStyles(styles))(Country);
	160	+	export default CountryComponent;
168	161

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/locations/countries/CountryEdition.js

1	-	import React, { Component } from 'react';
2	-	import * as PropTypes from 'prop-types';
3	-	import { compose } from 'ramda';
4	-	import withStyles from '@mui/styles/withStyles';
5	-	import Drawer from '@mui/material/Drawer';
6	-	import Fab from '@mui/material/Fab';
7	-	import { Edit } from '@mui/icons-material';
8	-	import { graphql } from 'react-relay';
9	-	import { commitMutation, QueryRenderer } from '../../../../relay/environment';
10	-	import inject18n from '../../../../components/i18n';
11	-	import CountryEditionContainer from './CountryEditionContainer';
12	-	import { countryEditionOverviewFocus } from './CountryEditionOverview';
13	-	import Loader from '../../../../components/Loader';
14	-
15	-	const styles = (theme) => ({
16	-	editButton: {
17	-	position: 'fixed',
18	-	bottom: 30,
19	-	right: 30,
20	-	zIndex: 400,
21	-	},
22	-	drawerPaper: {
23	-	minHeight: '100vh',
24	-	width: '50%',
25	-	position: 'fixed',
26	-	overflow: 'auto',
27	-	transition: theme.transitions.create('width', {
28	-	easing: theme.transitions.easing.sharp,
29	-	duration: theme.transitions.duration.enteringScreen,
30	-	}),
31	-	padding: 0,
32	-	},
33	-	});
34	-
35	-	export const countryEditionQuery = graphql`
36	-	query CountryEditionContainerQuery($id: String!) {
37	-	country(id: $id) {
38	-	...CountryEditionContainer_country
39	-	}
40	-	settings {
41	-	platform_enable_reference
42	-	}
43	-	}
44	-	`;
45	-
46	-	class CountryEdition extends Component {
47	-	constructor(props) {
48	-	super(props);
49	-	this.state = { open: false };
50	-	}
51	-
52	-	handleOpen() {
53	-	this.setState({ open: true });
54	-	}
55	-
56	-	handleClose() {
57	-	commitMutation({
58	-	mutation: countryEditionOverviewFocus,
59	-	variables: {
60	-	id: this.props.countryId,
61	-	input: { focusOn: '' },
62	-	},
63	-	});
64	-	this.setState({ open: false });
65	-	}
66	-
67	-	render() {
68	-	const { classes, countryId } = this.props;
69	-	return (
70	-	<div>
71	-	<Fab
72	-	onClick={this.handleOpen.bind(this)}
73	-	color="secondary"
74	-	aria-label="Edit"
75	-	className={classes.editButton}
76	-	>
77	-	<Edit />
78	-	</Fab>
79	-	<Drawer
80	-	open={this.state.open}
81	-	anchor="right"
82	-	elevation={1}
83	-	sx={{ zIndex: 1202 }}
84	-	classes={{ paper: classes.drawerPaper }}
85	-	onClose={this.handleClose.bind(this)}
86	-	>
87	-	<QueryRenderer
88	-	query={countryEditionQuery}
89	-	variables={{ id: countryId }}
90	-	render={({ props }) => {
91	-	if (props) {
92	-	return (
93	-	<CountryEditionContainer
94	-	country={props.country}
95	-	enableReferences={props.settings.platform_enable_reference?.includes(
96	-	'Country',
97	-	)}
98	-	handleClose={this.handleClose.bind(this)}
99	-	/>
100	-	);
101	-	}
102	-	return <Loader variant="inElement" />;
103	-	}}
104	-	/>
105	-	</Drawer>
106	-	</div>
107	-	);
108	-	}
109	-	}
110	-
111	-	CountryEdition.propTypes = {
112	-	countryId: PropTypes.string,
113	-	classes: PropTypes.object,
114	-	theme: PropTypes.object,
115	-	t: PropTypes.func,
116	-	};
117	-
118	-	export default compose(
119	-	inject18n,
120	-	withStyles(styles, { withTheme: true }),
121	-	)(CountryEdition);
122	-

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/locations/countries/CountryEdition.tsx

1	+	import React, { FunctionComponent, useState } from 'react';
2	+	import Drawer from '@mui/material/Drawer';
3	+	import Fab from '@mui/material/Fab';
4	+	import { Edit } from '@mui/icons-material';
5	+	import { graphql } from 'react-relay';
6	+	import makeStyles from '@mui/styles/makeStyles';
7	+	import { commitMutation, QueryRenderer } from '../../../../relay/environment';
8	+	import { useFormatter } from '../../../../components/i18n';
9	+	import CountryEditionContainer from './CountryEditionContainer';
10	+	import Loader, { LoaderVariant } from '../../../../components/Loader';
11	+	import { Theme } from '../../../../components/Theme';
12	+	import { dataComponentEditionOverviewFocus } from '../../techniques/data_components/DataComponentEditionOverview';
13	+
14	+	const useStyles = makeStyles<Theme>((theme) => ({
15	+	editButton: {
16	+	position: 'fixed',
17	+	bottom: 30,
18	+	right: 30,
19	+	zIndex: 400,
20	+	},
21	+	drawerPaper: {
22	+	minHeight: '100vh',
23	+	width: '50%',
24	+	position: 'fixed',
25	+	overflow: 'auto',
26	+	transition: theme.transitions.create('width', {
27	+	easing: theme.transitions.easing.sharp,
28	+	duration: theme.transitions.duration.enteringScreen,
29	+	}),
30	+	padding: 0,
31	+	},
32	+	}));
33	+
34	+	export const countryEditionQuery = graphql`
35	+	query CountryEditionContainerQuery($id: String!) {
36	+	country(id: $id) {
37	+	...CountryEditionContainer_country
38	+	}
39	+	settings {
40	+	platform_enable_reference
41	+	}
42	+	}
43	+	`;
44	+
45	+	interface CountryEditionProps {
46	+	countryId: string
47	+	}
48	+
49	+	const CountryEdition: FunctionComponent<CountryEditionProps> = ({ countryId }) => {
50	+	const classes = useStyles();
51	+	const { t } = useFormatter();
52	+	const [open, setOpen] = useState(false);
53	+
54	+	const handleOpen = () => {
55	+	setOpen(true);
56	+	};
57	+
58	+	const handleClose = () => {
59	+	commitMutation({
60	+	mutation: dataComponentEditionOverviewFocus,
61	+	variables: {
62	+	id: countryId,
63	+	input: { focusOn: '' },
64	+	},
65	+	updater: undefined,
66	+	optimisticUpdater: undefined,
67	+	optimisticResponse: undefined,
68	+	onCompleted: undefined,
69	+	onError: undefined,
70	+	setSubmitting: undefined,
71	+	});
72	+	setOpen(false);
73	+	};
74	+
75	+	return (
76	+	<div>
77	+	<Fab
78	+	onClick={handleOpen}
79	+	color="secondary"
80	+	aria-label="Edit"
81	+	className={classes.editButton}
82	+	>
83	+	<Edit />
84	+	</Fab>
85	+	<Drawer
86	+	open={open}
87	+	anchor="right"
88	+	elevation={1}
89	+	sx={{ zIndex: 1202 }}
90	+	classes={{ paper: classes.drawerPaper }}
91	+	onClose={handleClose}
92	+	>
93	+	<QueryRenderer
94	+	query={countryEditionQuery}
95	+	variables={{ id: countryId }}
96	+	render={(result: { props: any }) => {
97	+	if (result.props) {
98	+	return (
99	+	<CountryEditionContainer
100	+	country={result.props.country}
101	+	enableReferences={result.props.settings.platform_enable_reference?.includes(
102	+	'Country',
103	+	)}
104	+	handleClose={handleClose}
105	+	/>
106	+	);
107	+	}
108	+	return <Loader variant={LoaderVariant.inElement} />;
109	+	}}
110	+	/>
111	+	</Drawer>
112	+	</div>
113	+	);
114	+	};
115	+
116	+	export default CountryEdition;
117	+

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/locations/countries/CountryEditionContainer.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 CountryEditionOverview from './CountryEditionOverview';
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 CountryEditionContainer extends Component {
43	-	render() {
44	-	const { t, classes, handleClose, country } = this.props;
45	-	const { editContext } = country;
46	-	return (
47	-	<div>
48	-	<div className={classes.header}>
49	-	<IconButton
50	-	aria-label="Close"
51	-	className={classes.closeButton}
52	-	onClick={handleClose.bind(this)}
53	-	size="large"
54	-	color="primary"
55	-	>
56	-	<Close fontSize="small" color="primary" />
57	-	</IconButton>
58	-	<Typography variant="h6" classes={{ root: classes.title }}>
59	-	{t('Update an country')}
60	-	</Typography>
61	-	<SubscriptionAvatars context={editContext} />
62	-	<div className="clearfix" />
63	-	</div>
64	-	<div className={classes.container}>
65	-	<CountryEditionOverview
66	-	country={this.props.country}
67	-	enableReferences={this.props.enableReferences}
68	-	context={editContext}
69	-	handleClose={handleClose.bind(this)}
70	-	/>
71	-	</div>
72	-	</div>
73	-	);
74	-	}
75	-	}
76	-
77	-	CountryEditionContainer.propTypes = {
78	-	handleClose: PropTypes.func,
79	-	classes: PropTypes.object,
80	-	country: PropTypes.object,
81	-	theme: PropTypes.object,
82	-	t: PropTypes.func,
83	-	};
84	-
85	-	const CountryEditionFragment = createFragmentContainer(
86	-	CountryEditionContainer,
87	-	{
88	-	country: graphql`
89	-	fragment CountryEditionContainer_country on Country {
90	-	id
91	-	...CountryEditionOverview_country
92	-	editContext {
93	-	name
94	-	focusOn
95	-	}
96	-	}
97	-	`,
98	-	},
99	-	);
100	-
101	-	export default compose(
102	-	inject18n,
103	-	withStyles(styles, { withTheme: true }),
104	-	)(CountryEditionFragment);
105	-

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/locations/countries/CountryEditionContainer.tsx

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

■ ■ ■ ■ ■ ■

opencti-platform/opencti-front/src/private/components/locations/countries/CountryLine.js opencti-platform/opencti-front/src/private/components/locations/countries/CountryLine.tsx

1		-	import React, { Component } from 'react';
2		-	import * as PropTypes from 'prop-types';
	1	+	import React, { FunctionComponent } from 'react';
3	2		import { Link } from 'react-router-dom';
4		-	import withStyles from '@mui/styles/withStyles';
5	3		import ListItem from '@mui/material/ListItem';
6	4		import ListItemIcon from '@mui/material/ListItemIcon';
7	5		import ListItemText from '@mui/material/ListItemText';
8	6		import { KeyboardArrowRightOutlined, FlagOutlined } from '@mui/icons-material';
9		-	import { compose } from 'ramda';
10	7		import Skeleton from '@mui/material/Skeleton';
11	8		import { createFragmentContainer, graphql } from 'react-relay';
12		-	import inject18n from '../../../../components/i18n';
	9	+	import makeStyles from '@mui/styles/makeStyles';
	10	+	import { Theme } from '@mui/material/styles/createTheme';
	11	+	import { useFormatter } from '../../../../components/i18n';
	12	+	import { CountryLine_node$data } from './__generated__/CountryLine_node.graphql';
	13	+	import { DataColumns } from '../../../../components/list_lines';
13	14
14		-	const styles = (theme) => ({
	15	+	const useStyles = makeStyles<Theme>((theme) => ({
15	16		item: {
16	17		paddingLeft: theme.spacing(8),
17	18		},
		skipped 15 lines
33	34		height: '1em',
34	35		backgroundColor: theme.palette.grey[700],
35	36		},
36		-	});
	37	+	}));
37	38
38		-	class CountryLineComponent extends Component {
39		-	render() {
40		-	const { classes, node } = this.props;
41		-	return (
42		-	<ListItem
43		-	classes={{ root: classes.item }}
44		-	divider={true}
45		-	button={true}
46		-	component={Link}
47		-	to={`/dashboard/locations/countries/${node.id}`}
48		-	>
49		-	<ListItemIcon classes={{ root: classes.itemIcon }}>
50		-	<FlagOutlined />
51		-	</ListItemIcon>
52		-	<ListItemText classes={{ primary: classes.text }} primary={node.name} />
53		-	<ListItemIcon classes={{ root: classes.goIcon }}>
54		-	<KeyboardArrowRightOutlined />
55		-	</ListItemIcon>
56		-	</ListItem>
57		-	);
58		-	}
	39	+	interface CountryLineProps {
	40	+	node: CountryLine_node$data
	41	+	dataColumns: DataColumns
59	42		}
	43	+	const classes = useStyles();
60	44
61		-	CountryLineComponent.propTypes = {
62		-	node: PropTypes.object,
63		-	classes: PropTypes.object,
64		-	fd: PropTypes.func,
	45	+	const CountryLineComponent: FunctionComponent<CountryLineProps> = ({ node }) => {
	46	+	const { fd } = useFormatter();
	47	+
	48	+	return (
	49	+	<ListItem
	50	+	classes={{ root: classes.item }}
	51	+	divider={true}
	52	+	button={true}
	53	+	component={Link}
	54	+	to={`/dashboard/locations/countries/${node.id}`}
	55	+	>
	56	+	<ListItemIcon classes={{ root: classes.itemIcon }}>
	57	+	<FlagOutlined />
	58	+	</ListItemIcon>
	59	+	<ListItemText classes={{ primary: classes.text }} primary={node.name} />
	60	+	<ListItemIcon classes={{ root: classes.goIcon }}>
	61	+	<KeyboardArrowRightOutlined />
	62	+	</ListItemIcon>
	63	+	</ListItem>
	64	+	);
65	65		};
66	66
67	67		const CountryLineFragment = createFragmentContainer(CountryLineComponent, {
		skipped 7 lines
75	75		`,
76	76		});
77	77
78		-	export const CountryLine = compose(
79		-	inject18n,
80		-	withStyles(styles),
81		-	)(CountryLineComponent);
82		-
83		-	class CountryLineDummyComponent extends Component {
84		-	render() {
85		-	const { classes, dataColumns } = this.props;
86		-	return (
	78	+	const CountryLineDummyComponent: FunctionComponent<CountryLineProps> = ({ dataColumns }) => {
	79	+	return (
87	80		<ListItem classes={{ root: classes.item }} divider={true}>
88	81		<ListItemIcon classes={{ root: classes.itemIcon }}>
89	82		<Skeleton
		skipped 7 lines
97	90		primary={
98	91		<div>
99	92		<div
100		-	className={classes.bodyItem}
	93	+	className={classes.item}
101	94		style={{ width: dataColumns.name.width }}
102	95		>
103	96		<Skeleton
		skipped 4 lines
108	101		/>
109	102		</div>
110	103		<div
111		-	className={classes.bodyItem}
	104	+	className={classes.item}
112	105		style={{ width: dataColumns.created.width }}
113	106		>
114	107		<Skeleton
		skipped 4 lines
119	112		/>
120	113		</div>
121	114		<div
122		-	className={classes.bodyItem}
	115	+	className={classes.item}
123	116		style={{ width: dataColumns.modified.width }}
124	117		>
125	118		<Skeleton
		skipped 10 lines
136	129		<KeyboardArrowRightOutlined />
137	130		</ListItemIcon>
138	131		</ListItem>
139		-	);
140		-	}
141		-	}
142		-
143		-	CountryLineDummyComponent.propTypes = {
144		-	dataColumns: PropTypes.object,
145		-	classes: PropTypes.object,
	132	+	);
146	133		};
147	134
148		-	export const CountryLineDummy = compose(
149		-	inject18n,
150		-	withStyles(styles),
151		-	)(CountryLineDummyComponent);
	135	+	export default { CountryLineComponent, CountryLineDummyComponent };
152	136

[Front] Migrate Country Files to TS (#680)