Port the remaining components of the ERD Tool to React. Fixes #7343

1. Make use of MUI styles and remove SCSS.
2. Use the new common components for buttons and tooltips, so that they are consistent.
3. UI design should be aligned with the query tool.
4. Remove tippyjs and Alertify dependencies.

web/pgadmin/static/img/magic.svg

@@ -0,0 +1 @@
+<svg width="18" height="18" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z"></path></svg>

web/pgadmin/static/img/sql_file.svg

@@ -0,0 +1,54 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18" height="18" viewBox="0 0 548.29 548.291" style="enable-background:new 0 0 548.29 548.291;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M276.043,244.216c-24.575,0-38.741,24.087-38.741,53.862c-0.241,30.228,14.407,53.382,38.5,53.382
+			c24.323,0,38.512-22.92,38.512-54.091C314.313,268.303,300.604,244.216,276.043,244.216z"></path>
+		<path d="M486.2,196.116h-13.164V132.59c0-0.399-0.064-0.795-0.116-1.2c-0.021-2.52-0.824-4.997-2.551-6.96L364.656,3.677
+			c-0.031-0.031-0.064-0.044-0.085-0.075c-0.629-0.704-1.364-1.29-2.141-1.796c-0.231-0.154-0.462-0.283-0.704-0.419
+			c-0.672-0.365-1.386-0.672-2.121-0.893c-0.199-0.052-0.377-0.134-0.576-0.186C358.229,0.118,357.4,0,356.562,0H96.757
+			C84.893,0,75.256,9.649,75.256,21.502v174.613H62.093c-16.967,0-30.733,13.756-30.733,30.733v159.812
+			c0,16.961,13.766,30.731,30.733,30.731h13.163V526.79c0,11.854,9.637,21.501,21.501,21.501h354.777
+			c11.853,0,21.502-9.647,21.502-21.501V417.392H486.2c16.977,0,30.729-13.771,30.729-30.731V226.849
+			C516.93,209.872,503.177,196.116,486.2,196.116z M96.757,21.502h249.053v110.006c0,5.943,4.818,10.751,10.751,10.751h94.973
+			v53.861H96.757V21.502z M353.033,376.96l-10.394,27.884c-22.666-6.619-41.565-13.479-62.828-22.445
+			c-3.527-1.418-7.317-2.132-11.094-2.362c-35.909-2.352-69.449-28.819-69.449-80.778c0-47.711,30.236-83.623,77.71-83.623
+			c48.675,0,75.351,36.854,75.351,80.317c0,36.142-16.766,61.638-37.785,71.091v0.945
+			C326.828,371.528,340.519,374.367,353.033,376.96z M72.912,370.116l7.328-29.764c9.69,4.96,24.554,9.915,39.917,9.915
+			c16.525,0,25.271-6.84,25.271-17.228c0-9.928-7.56-15.597-26.691-22.442c-26.457-9.217-43.696-23.858-43.696-47.014
+			c0-27.163,22.68-47.948,60.231-47.948c17.954,0,31.184,3.791,40.623,8.03l-8.021,29.061c-6.375-3.076-17.711-7.564-33.3-7.564
+			c-15.599,0-23.163,7.079-23.163,15.357c0,10.15,8.977,14.646,29.533,22.447c28.108,10.394,41.332,25.023,41.332,47.464
+			c0,26.699-20.557,49.365-64.253,49.365C99.844,379.785,81.899,375.06,72.912,370.116z M451.534,520.962H96.757v-103.57h354.777
+			V520.962z M475.387,377.428h-99.455V218.231h36.158v128.97h63.297V377.428z"></path>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useModalStyles } from '../helpers/ModalProvider';
+import gettext from 'sources/gettext';
+import { Box } from '@material-ui/core';
+import { DefaultButton, PrimaryButton } from '../components/Buttons';
+import CloseIcon from '@material-ui/icons/CloseRounded';
+import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import HTMLReactParser from 'html-react-parser';
+import PropTypes from 'prop-types';
+
+export default function ConfirmSaveContent({closeModal, text, onDontSave, onSave}) {
+  const classes = useModalStyles();
+  return (
+    <Box display="flex" flexDirection="column" height="100%">
+      <Box flexGrow="1" p={2}>{typeof(text) == 'string' ? HTMLReactParser(text) : text}</Box>
+      <Box className={classes.footer}>
+        <DefaultButton data-test="close" startIcon={<CloseIcon />} onClick={()=>{
+          closeModal();
+        }} >{gettext('Cancel')}</DefaultButton>
+        <DefaultButton data-test="dont-save" className={classes.margin} startIcon={<DeleteRoundedIcon />} onClick={()=>{
+          onDontSave?.();
+          closeModal();
+        }} >{gettext('Don\'t save')}</DefaultButton>
+        <PrimaryButton data-test="save" className={classes.margin} startIcon={<CheckRoundedIcon />} onClick={()=>{
+          onSave?.();
+          closeModal();
+        }} autoFocus={true} >{gettext('Save')}</PrimaryButton>
+      </Box>
+    </Box>
+  );
+}
+
+ConfirmSaveContent.propTypes = {
+  closeModal: PropTypes.func,
+  text: PropTypes.string,
+  onDontSave: PropTypes.func,
+  onSave: PropTypes.func
+};

web/pgadmin/static/js/SchemaView/DataGridView.jsx

@@ -508,7 +508,7 @@ export default function DataGridView({
             setGlobalFilter(value || undefined);
           }}
         />}
-        <div {...getTableProps()} className={classes.table}>
+        <div {...getTableProps(()=>({style: {minWidth: 'unset'}}))} className={classes.table}>
           <DataTableHeader headerGroups={headerGroups} />
           <div {...getTableBodyProps()} className={classes.tableContentWidth}>
             {rows.map((row, i) => {

web/pgadmin/static/js/Theme/dark.js

@@ -100,7 +100,9 @@ export default function(basicSettings) {
       cardHeaderBg: '#424242',
       colorFg: '#FFFFFF',
       emptySpaceBg: '#212121',
-      textMuted: '#8A8A8A'
+      textMuted: '#8A8A8A',
+      erdCanvasBg: '#303030',
+      erdGridColor: '#444952',
     }
   });
 }

web/pgadmin/static/js/Theme/high_contrast.js

@@ -98,7 +98,9 @@ export default function(basicSettings) {
       cardHeaderBg: '#062F57',
       colorFg: '#FFFFFF',
       emptySpaceBg: '#010B15',
-      textMuted: '#8b9cad'
+      textMuted: '#8b9cad',
+      erdCanvasBg: '#010B15',
+      erdGridColor: '#1F2932',
     }
   });
 }

web/pgadmin/static/js/Theme/standard.js

@@ -106,6 +106,8 @@ export default function(basicSettings) {
       cardHeaderBg: '#fff',
       emptySpaceBg: '#ebeef3',
       textMuted: '#646B82',
+      erdCanvasBg: '#fff',
+      erdGridColor: '#bac1cd',
       explain: {
         sev2: {
           color: '#222222',

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

@@ -17,6 +17,8 @@ import Collapse from '../../img/fonticon/close_fullscreen.svg?svgr';
 import AWS from '../../img/aws.svg?svgr';
 import BigAnimal from '../../img/biganimal.svg?svgr';
 import Azure from '../../img/azure.svg?svgr';
+import SQLFileSvg from '../../img/sql_file.svg?svgr';
+import MagicSvg from '../../img/magic.svg?svgr';
 
 export default function ExternalIcon({Icon, ...props}) {
   return <Icon className={'MuiSvgIcon-root'} {...props} />;
@@ -75,4 +77,10 @@ export const BigAnimalIcon = ({style})=><ExternalIcon Icon={BigAnimal} style={{h
 BigAnimalIcon.propTypes = {style: PropTypes.object};
 
 export const AzureIcon = ({style})=><ExternalIcon Icon={Azure} style={{height: '1.4rem', ...style}} data-label="AzureIcon" />;
-AzureIcon.propTypes = {style: PropTypes.object};
+AzureIcon.propTypes = {style: PropTypes.object};
+
+export const SQLFileIcon = ({style})=><ExternalIcon Icon={SQLFileSvg} style={{height: '1rem', ...style}} data-label="SQLFileIcon" />;
+SQLFileIcon.propTypes = {style: PropTypes.object};
+
+export const MagicIcon = ({style})=><ExternalIcon Icon={MagicSvg} style={{height: '1rem', ...style}} data-label="MagicIcon" />;
+MagicIcon.propTypes = {style: PropTypes.object};

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

@@ -40,7 +40,7 @@ const useStyles = makeStyles((theme)=>({
   }
 }));
 
-export default function Loader({message, style, ...props}) {
+export default function Loader({message, style, autoEllipsis=false, ...props}) {
   const classes = useStyles();
   if(!message) {
     return <></>;
@@ -49,7 +49,7 @@ export default function Loader({message, style, ...props}) {
     <Box className={classes.root} style={style} data-label="loader" {...props}>
       <Box className={classes.loaderRoot}>
         <CircularProgress className={classes.loader} />
-        <Typography className={classes.message}>{message}</Typography>
+        <Typography className={classes.message}>{message}{autoEllipsis ? '...':''}</Typography>
       </Box>
     </Box>
   );
@@ -58,4 +58,5 @@ export default function Loader({message, style, ...props}) {
 Loader.propTypes = {
   message: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  autoEllipsis: PropTypes.bool,
 };

web/pgadmin/static/js/helpers/ModalProvider.jsx

@@ -98,7 +98,7 @@ export default function ModalProvider({ children }) {
   const [modals, setModals] = React.useState([]);
 
   const showModal = (title, content, modalOptions) => {
-    let id = getEpoch().toString() + crypto.getRandomValues(new Uint8Array(1));
+    let id = getEpoch().toString() + crypto.getRandomValues(new Uint8Array(4));
     setModals((prev) => [...prev, {
       id: id,
       title: title,

web/pgadmin/static/scss/_tippy.overrides.scss

@@ -1,9 +0,0 @@
-@import "node_modules/tippy.js/dist/tippy.css";
-
-.tippy-box {
-  background-color: $popover-bg;
-  color: $popover-body-color;
-  .tippy-arrow {
-    color: $popover-bg;
-  }
-}

web/pgadmin/static/scss/pgadmin.scss

@@ -31,7 +31,6 @@ $theme-colors: (
 @import 'pgadmin.style';
 @import 'bootstrap4-toggle.overrides';
 @import 'pickr.overrides';
-@import 'tippy.overrides';
 @import 'jsoneditor.overrides';
 @import 'pgadmin4-tree.overrides';
 @import 'pgadmin4-tree/src/css/styles';