Added support to import/export server groups and servers from GUI. Fixes #4803

web/pgadmin/static/js/components/CheckBoxTree.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import CheckboxTree from 'react-checkbox-tree';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles((theme) =>
+  ({
+    treeRoot: {
+      '& .rct-collapse, .rct-checkbox': {
+        padding: 0
+      },
+      '& .rct-node-leaf':{
+        padding: '0 0 0 10px'
+      },
+      '& .react-checkbox-tree': {
+        height: '97%',
+        fontSize: '0.815rem',
+        overflow: 'auto',
+        ...theme.mixins.panelBorder
+      },
+      height: '100%'
+    },
+    unchecked: {
+      fill: theme.otherVars.borderColor
+    },
+    checked: {
+      fill: theme.palette.primary.main
+    }
+  })
+);
+export default function CheckBoxTree({treeData, ...props}) {
+  const [checked, setChecked] = React.useState([]);
+  const [expanded, setExpanded] = React.useState([]);
+
+  const classes = useStyles();
+
+  React.useEffect(() => {
+    if (props.getSelectedServers) {
+      props.getSelectedServers(checked);
+    }
+  }, [checked]);
+
+  return (
+    <div className={classes.treeRoot}>
+      <CheckboxTree
+        nodes={treeData}
+        checked={checked}
+        expanded={expanded}
+        onCheck={checked => setChecked(checked)}
+        onExpand={expanded => setExpanded(expanded)}
+        showNodeIcon={false}
+        icons={{
+          check: <CheckBoxIcon className={classes.checked}/>,
+          uncheck: <CheckBoxOutlineBlankIcon className={classes.unchecked}/>,
+          halfCheck: <IndeterminateCheckBoxIcon className={classes.checked}/>,
+          expandClose: <ChevronRightIcon />,
+          expandOpen: <ExpandMoreIcon />,
+          leaf: <ChevronRightIcon />
+        }}
+      />
+    </div>
+  );
+}
+
+CheckBoxTree.propTypes = {
+  treeData: PropTypes.array,
+  getSelectedServers: PropTypes.func
+};