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 #6133pull/5349/head
parent
eb60b3892d
commit
ab5d53f3b1
|
@ -108,7 +108,8 @@ export default function(basicSettings) {
|
|||
sourceRowColor: '#402025',
|
||||
targetRowColor: '#6b5438',
|
||||
diffColorFg: '#d4d4d4',
|
||||
diffSelectFG: '#d4d4d4'
|
||||
diffSelectFG: '#d4d4d4',
|
||||
diffSelCheckbox: '#323E43'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -106,7 +106,8 @@ export default function(basicSettings) {
|
|||
sourceRowColor: '#EE97A5',
|
||||
targetRowColor: '#FFAD65',
|
||||
diffColorFg: '#FFFFFF',
|
||||
diffSelectFG: '#010B15'
|
||||
diffSelectFG: '#010B15',
|
||||
diffSelCheckbox: '#010b15',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -127,7 +127,8 @@ export default function(basicSettings) {
|
|||
sourceRowColor: '#ffebee',
|
||||
targetRowColor: '#fbe3bf',
|
||||
diffColorFg: '#222',
|
||||
diffSelectFG: '#222'
|
||||
diffSelectFG: '#222',
|
||||
diffSelCheckbox: '#d6effc'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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,
|
||||
};
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -120,6 +120,11 @@ export function Results() {
|
|||
}}
|
||||
readonly={true}
|
||||
width='100%'
|
||||
controlProps={
|
||||
{
|
||||
showCopyBtn: true
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
|
|
@ -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] = {
|
||||
|
|
Loading…
Reference in New Issue