Fixed following issues for Schema Diff:

1) When some option from filter is selected, that particular type should be completely removed from top level result instead of showing identical:0
 2) Copy button is missing for Difference SQL
 3) Throw error when source & target server versions selected are different
 4) In High contrast - Font color for identical turns same as background.
 5) In High contrast - Checkbox box column turns same color of row resulting unable to distingiush about selection of item.

refs #6133

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

@@ -108,7 +108,8 @@ export default function(basicSettings) {
         sourceRowColor: '#402025',
         targetRowColor: '#6b5438',
         diffColorFg: '#d4d4d4',
-        diffSelectFG: '#d4d4d4'
+        diffSelectFG: '#d4d4d4',
+        diffSelCheckbox: '#323E43'
       }
     }
   });

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

@@ -106,7 +106,8 @@ export default function(basicSettings) {
         sourceRowColor: '#EE97A5',
         targetRowColor: '#FFAD65',
         diffColorFg: '#FFFFFF',
-        diffSelectFG: '#010B15'
+        diffSelectFG: '#010B15',
+        diffSelCheckbox: '#010b15',
       }
     }
   });

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

@@ -127,7 +127,8 @@ export default function(basicSettings) {
         sourceRowColor: '#ffebee',
         targetRowColor: '#fbe3bf',
         diffColorFg: '#222',
-        diffSelectFG: '#222'
+        diffSelectFG: '#222',
+        diffSelCheckbox: '#d6effc'
       }
     }
   });

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

@@ -17,7 +17,7 @@ import gettext from 'sources/gettext';
 import { Box, InputAdornment, makeStyles } from '@material-ui/core';
 import clsx from 'clsx';
 import { InputText } from './FormComponents';
-import { PgIconButton } from './Buttons';
+import { DefaultButton, PgIconButton } from './Buttons';
 import CloseIcon from '@material-ui/icons/CloseRounded';
 import ArrowDownwardRoundedIcon from '@material-ui/icons/ArrowDownwardRounded';
 import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
@@ -27,6 +27,8 @@ import _ from 'lodash';
 import { RegexIcon, FormatCaseIcon } from './ExternalIcon';
 import { isMac } from '../keyboard_shortcuts';
 import { checkTrojanSource } from '../utils';
+import { copyToClipboard } from '../clipboard';
+import { useDelayedCaller } from '../../../static/js/custom_hooks';
 
 const useStyles = makeStyles((theme)=>({
   root: {
@@ -49,6 +51,12 @@ const useStyles = makeStyles((theme)=>({
   },
   marginTop: {
     marginTop: '0.25rem',
+  },
+  copyButton: {
+    position: 'absolute',
+    zIndex: 99,
+    right: '4px',
+    width: '66px',
   }
 }));
 
@@ -280,6 +288,29 @@ FindDialog.propTypes = {
   onClose: PropTypes.func,
 };
 
+export function CopyButton({show, copyText}) {
+  const classes = useStyles();
+  const [copyBtnLabel, setCopyBtnLabel] = useState(gettext('Copy'));
+  const revertCopiedText = useDelayedCaller(()=>{
+    setCopyBtnLabel(gettext('Copy'));
+  });
+
+  return (
+    <Box className={classes.copyButton} visibility={show ? 'visible' : 'hidden'}>
+      <DefaultButton onClick={() => {
+        copyToClipboard(copyText);
+        setCopyBtnLabel(gettext('Copied!'));
+        revertCopiedText(1500);
+      }}>{copyBtnLabel}</DefaultButton>
+    </Box>
+  );
+}
+
+CopyButton.propTypes = {
+  show: PropTypes.bool,
+  copyText: PropTypes.string
+};
+
 function handleDrop(editor, e) {
   let dropDetails = null;
   try {
@@ -330,13 +361,14 @@ function handlePaste(_editor, e) {
 }
 
 /* React wrapper for CodeMirror */
-export default function CodeMirror({currEditor, name, value, options, events, readonly, disabled, className, autocomplete=false, gutters=['CodeMirror-linenumbers', 'CodeMirror-foldgutter']}) {
+export default function CodeMirror({currEditor, name, value, options, events, readonly, disabled, className, autocomplete=false, gutters=['CodeMirror-linenumbers', 'CodeMirror-foldgutter'], showCopyBtn=false}) {
   const taRef = useRef();
   const editor = useRef();
   const cmWrapper = useRef();
   const isVisibleTrack = useRef();
   const classes = useStyles();
   const [[showFind, isReplace], setShowFind] = useState([false, false]);
+  const [showCopy, setShowCopy] = useState(false);
   const defaultOptions = useMemo(()=>{
     let goLeftKey = 'Ctrl-Alt-Left',
       goRightKey = 'Ctrl-Alt-Right',
@@ -437,6 +469,8 @@ export default function CodeMirror({currEditor, name, value, options, events, re
     };
   }, []);
 
+
+
   const initPreferences = ()=>{
     reflectPreferences();
     pgWindow?.pgAdmin?.Browser?.onPreferencesChange('sqleditor', function() {
@@ -509,8 +543,12 @@ export default function CodeMirror({currEditor, name, value, options, events, re
   };
 
   return (
-    <div className={clsx(className, classes.root)}>
+    <div className={clsx(className, classes.root)}
+      onMouseEnter={() => { showCopyBtn && value.length > 0 && setShowCopy(true);}}
+      onMouseLeave={() => {showCopyBtn && setShowCopy(false);}}
+    >
       <FindDialog editor={editor.current} show={showFind} replace={isReplace} onClose={closeFind}/>
+      <CopyButton editor={editor.current} show={showCopy} copyText={value}></CopyButton>
       <textarea ref={taRef} name={name} />
     </div>
   );
@@ -527,5 +565,6 @@ CodeMirror.propTypes = {
   disabled: PropTypes.bool,
   className: CustomPropTypes.className,
   autocomplete: PropTypes.bool,
-  gutters: PropTypes.array
+  gutters: PropTypes.array,
+  showCopyBtn: PropTypes.bool,
 };

web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx

@@ -107,7 +107,6 @@ const useStyles = makeStyles((theme) => ({
     width: '1.3rem'
   },
   cellExpand: {
-    float: 'inline-end',
     display: 'table',
     blockSize: '100%',
 
@@ -137,7 +136,7 @@ const useStyles = makeStyles((theme) => ({
   },
   identical: {
     paddingLeft: '0.5rem',
-    color: theme.otherVars.schemaDiff.diffSelectFG,
+    color: theme.otherVars.schemaDiff.diffColorFg,
   },
   selectCell: {
     padding: '0 0.3rem'
@@ -162,7 +161,7 @@ const useStyles = makeStyles((theme) => ({
   },
   selectedRowCheckBox: {
     paddingLeft: '0.5rem',
-    backgroundColor: theme.palette.primary.light,
+    backgroundColor: theme.otherVars.schemaDiff.diffSelCheckbox,
   },
   selChBox: {
     paddingLeft: 0,
@@ -237,10 +236,18 @@ function CellExpanderFormatter({
           {
             'identicalCount' in row ?
               <span className={clsx(classes.count)}>
-                <span className={classes.countLabel}>{FILTER_NAME.IDENTICAL}:</span> <span className={classes.countStyle}>{row.identicalCount} </span>
+                {
-                <span className={classes.countLabel}>{FILTER_NAME.DIFFERENT}:</span> <span className={classes.countStyle}>{row.differentCount}  </span>
+                  filterParams.includes(FILTER_NAME.IDENTICAL) && <><span className={classes.countLabel}>{FILTER_NAME.IDENTICAL}:</span> <span className={classes.countStyle}>{row.identicalCount} </span></>
-                <span className={classes.countLabel}>{FILTER_NAME.SOURCE_ONLY}:</span> <span className={classes.countStyle}>{row.sourceOnlyCount}  </span>
+                }
-                <span className={classes.countLabel}>{FILTER_NAME.TARGET_ONLY}: </span><span className={classes.countStyle}>{row.targetOnlyCount}</span>
+                {
+                  filterParams.includes(FILTER_NAME.DIFFERENT) && <><span className={classes.countLabel}>{FILTER_NAME.DIFFERENT}:</span> <span className={classes.countStyle}>{row.differentCount}  </span></>
+                }
+                {
+                  filterParams.includes(FILTER_NAME.SOURCE_ONLY) && <><span className={classes.countLabel}>{FILTER_NAME.SOURCE_ONLY}:</span> <span className={classes.countStyle}>{row.sourceOnlyCount}  </span></>
+                }
+                {
+                  filterParams.includes(FILTER_NAME.TARGET_ONLY) && <><span className={classes.countLabel}>{FILTER_NAME.TARGET_ONLY}: </span><span className={classes.countStyle}>{row.targetOnlyCount}</span></>
+                }
               </span>
               : null
 

web/pgadmin/tools/schema_diff/static/js/components/Results.jsx

@@ -120,6 +120,11 @@ export function Results() {
               }}
               readonly={true}
               width='100%'
+              controlProps={
+                {
+                  showCopyBtn: true
+                }
+              }
             />
           </Box>
         </Box>

web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx

@@ -303,9 +303,10 @@ export function SchemaDiffCompare({ params }) {
         setFilterOptions(filterParams);
         getResultGridData(res.data.data, filterParams);
       }).catch((err) => {
+        clearInterval(schemaDiffPollInterval);
         setLoaderText(null);
         setShowResultGrid(false);
-        Notifier.error(gettext(err.message));
+        Notifier.alert(gettext('Schema compare error'), gettext(err.response.data.errormsg));
       });
 
     }
@@ -405,7 +406,7 @@ export function SchemaDiffCompare({ params }) {
       });
 
     } else if (record.group_name in tempData) {
-      let chidId = Math.floor(Math.random() * 1000000);
+      let chidId = crypto.getRandomValues(new Uint16Array(1));
       allRowIds.push(`${chidId}`);
 
       let subChildId = record.id;
@@ -448,8 +449,8 @@ export function SchemaDiffCompare({ params }) {
       };
     } else {
       let label = record.label;
-      let _id = Math.floor(Math.random() * 100000);
+      let _id = crypto.getRandomValues(new Uint16Array(1));
-      let _subChildId = Math.floor(Math.random() * 100000);
+      let _subChildId = crypto.getRandomValues(new Uint16Array(1));
       allRowIds.push(`${_id}`);
       allRowIds.push(`${_subChildId}`);
       tempData[record.group_name] = {