Merge branch 'master' into add_country_flags

# Conflicts:
#	modern/package-lock.json

1 files changed, 34 insertions, 0 deletions

diff --git a/modern/src/reports/components/ColumnSelect.jsx b/modern/src/reports/components/ColumnSelect.jsx
new file mode 100644
index 00000000..d08394ea
--- /dev/null
+++ b/modern/src/reports/components/ColumnSelect.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import {
+  FormControl, InputLabel, MenuItem, Select,
+} from '@mui/material';
+import { useTranslation } from '../../common/components/LocalizationProvider';
+import useReportStyles from '../common/useReportStyles';
+
+const ColumnSelect = ({
+  columns, setColumns, columnsArray, rawValues, disabled,
+}) => {
+  const classes = useReportStyles();
+  const t = useTranslation();
+
+  return (
+    <div className={classes.filterItem}>
+      <FormControl fullWidth>
+        <InputLabel>{t('sharedColumns')}</InputLabel>
+        <Select
+          label={t('sharedColumns')}
+          value={columns}
+          onChange={(e) => setColumns(e.target.value)}
+          multiple
+          disabled={disabled}
+        >
+          {columnsArray.map(([key, string]) => (
+            <MenuItem key={key} value={key}>{rawValues ? string : t(string)}</MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+};
+
+export default ColumnSelect;