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
pull/5349/head
Nikhil Mohite 2022-09-13 16:49:44 +05:30 committed by Akshay Joshi
parent eb60b3892d
commit ab5d53f3b1
7 changed files with 73 additions and 18 deletions

View File

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

View File

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

View File

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

View File

@ -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,
};

View File

@ -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>
<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.IDENTICAL) && <><span className={classes.countLabel}>{FILTER_NAME.IDENTICAL}:</span> <span className={classes.countStyle}>{row.identicalCount} </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

View File

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

View File

@ -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 _subChildId = Math.floor(Math.random() * 100000);
let _id = crypto.getRandomValues(new Uint16Array(1));
let _subChildId = crypto.getRandomValues(new Uint16Array(1));
allRowIds.push(`${_id}`);
allRowIds.push(`${_subChildId}`);
tempData[record.group_name] = {