diff --git a/docs/en_US/images/schema_diff_DDL_comparison.png b/docs/en_US/images/schema_diff_DDL_comparison.png index 3ca8dba42..666a49aa7 100644 Binary files a/docs/en_US/images/schema_diff_DDL_comparison.png and b/docs/en_US/images/schema_diff_DDL_comparison.png differ diff --git a/docs/en_US/images/schema_diff_compare_button.png b/docs/en_US/images/schema_diff_compare_button.png index 56df49673..91aae33d5 100644 Binary files a/docs/en_US/images/schema_diff_compare_button.png and b/docs/en_US/images/schema_diff_compare_button.png differ diff --git a/docs/en_US/images/schema_diff_comparison_results.png b/docs/en_US/images/schema_diff_comparison_results.png index 7e1c05d10..bad1031f5 100644 Binary files a/docs/en_US/images/schema_diff_comparison_results.png and b/docs/en_US/images/schema_diff_comparison_results.png differ diff --git a/docs/en_US/images/schema_diff_dialog.png b/docs/en_US/images/schema_diff_dialog.png index c7cfa5a70..4790cc57b 100644 Binary files a/docs/en_US/images/schema_diff_dialog.png and b/docs/en_US/images/schema_diff_dialog.png differ diff --git a/docs/en_US/images/schema_diff_filter_option.png b/docs/en_US/images/schema_diff_filter_option.png index 78d8a5b84..80a8ed7ee 100644 Binary files a/docs/en_US/images/schema_diff_filter_option.png and b/docs/en_US/images/schema_diff_filter_option.png differ diff --git a/docs/en_US/schema_diff.rst b/docs/en_US/schema_diff.rst index e851ca4de..0c866c763 100644 --- a/docs/en_US/schema_diff.rst +++ b/docs/en_US/schema_diff.rst @@ -99,6 +99,8 @@ following comparison criteria: Click on any of the database objects in the object comparison panel to display the DDL Statements of that object in the DDL Comparison panel. +Click the *Help* icon to open Schema Diff documentation. + Schema Diff DDL Comparison Panel ================================ diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx index d5dd84a4c..71de75158 100644 --- a/web/pgadmin/static/js/components/FormComponents.jsx +++ b/web/pgadmin/static/js/components/FormComponents.jsx @@ -709,6 +709,7 @@ const customReactSelectStyles = (theme, readonly) => ({ ...provided, color: 'inherit', fontSize: '0.85em', + fontWeight: 'bold', textTransform: 'none', }), menu: (provided) => ({ diff --git a/web/pgadmin/static/js/components/PgReactDataGrid.jsx b/web/pgadmin/static/js/components/PgReactDataGrid.jsx index 7c2564c1c..2b7e1bdac 100644 --- a/web/pgadmin/static/js/components/PgReactDataGrid.jsx +++ b/web/pgadmin/static/js/components/PgReactDataGrid.jsx @@ -159,5 +159,5 @@ PgReactDataGrid.propTypes = { onItemSelect: PropTypes.func, onItemClick: PropTypes.func, noRowsText: PropTypes.string, - noRowsIcon: PropTypes.elementType + noRowsIcon: PropTypes.object }; diff --git a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx index 33ce57543..22426bcec 100644 --- a/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx +++ b/web/pgadmin/tools/schema_diff/static/js/components/ResultGridComponent.jsx @@ -31,7 +31,7 @@ import Notifier from '../../../../../static/js/helpers/Notifier'; const useStyles = makeStyles((theme) => ({ - root: { + root: { paddingTop: '0.5rem', display: 'flex', @@ -216,9 +216,9 @@ function CellExpanderFormatter({ isCellSelected, expanded, filterParams, - onCellExpand + onCellExpand, + classes }) { - const classes = useStyles(); const { ref, tabIndex } = useFocusRef(isCellSelected); 'identicalCount' in row && setRecordCount(row, filterParams); @@ -257,6 +257,7 @@ CellExpanderFormatter.propTypes = { expanded: PropTypes.bool, onCellExpand: PropTypes.func, filterParams: PropTypes.array, + classes: PropTypes.object }; @@ -328,7 +329,7 @@ function collapseRows(newRows, filterParams, rowIndex) { } }); let totalChCount = filteredChild.length; - for (let i = 0; i <= filteredChild.length; i++) { + for (let i = 0; i < filteredChild.length; i++) { let _index = i + 1; let indx = totalChild ? rowIndex + totalChild + _index : rowIndex + _index; if (newRows[indx]?.isExpanded) { @@ -417,26 +418,6 @@ function reducer(rows, { type, id, filterParams, gridData }) { } } -function getStyleClassName(row, selectedRowIds, isCellSelected, activeRowId, isCheckbox = false) { - const classes = useStyles(); - let clsName = null; - if (selectedRowIds.includes(`${row.id}`) || isCellSelected || row.id == activeRowId) { - clsName = isCheckbox ? classes.selectedRowCheckBox : classes.selectedRow; - } else { - if (row.status == FILTER_NAME.DIFFERENT) { - clsName = classes.different; - } else if (row.status == FILTER_NAME.SOURCE_ONLY) { - clsName = classes.source; - } else if (row.status == FILTER_NAME.TARGET_ONLY) { - clsName = classes.target; - } else if (row.status == FILTER_NAME.IDENTICAL) { - clsName = classes.identical; - } - } - - return clsName; -} - export function ResultGridComponent({ gridData, allRowIds, filterParams, selectedRowIds, transId, sourceData, targetData }) { const classes = useStyles(); const [rows, dispatch] = useReducer(reducer, [...gridData]); @@ -470,11 +451,10 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte let isChildAllInclude = checkAllChildInclude(row, tempSelectedRows); isChildAllInclude && tempSelectedRows.push(`${row.metadata.parentId}`); - for (let i = 0; i < rows.length; i++) { - if (rows[i].id == row.metadata.parentId) { - let isChildInclude = checkAllChildInclude(rows[i], tempSelectedRows); - isChildInclude && tempSelectedRows.push(`${rows[i].metadata.parentId}`); - break; + for(let rowData of rows) { + if (rowData.id == row.metadata.parentId) { + let isChildInclude = checkAllChildInclude(rowData, tempSelectedRows); + isChildInclude && tempSelectedRows.push(`${rowData.metadata.parentId}`); } } @@ -528,7 +508,6 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte let rootIndex = tempSelectedRows.indexOf(`${row.metadata.rootId}`); rootIndex != -1 && tempSelectedRows.splice(rootIndex, 1); - row.dependencieRowIds.map((id) => { let deptRowIndex = tempSelectedRows.indexOf(`${id}`); deptRowIndex != -1 && tempSelectedRows.splice(deptRowIndex, 1); @@ -536,6 +515,25 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte } } + function getStyleClassName(row, selectedRowIds, isCellSelected, activeRowId, isCheckbox = false) { + let clsName = null; + if (selectedRowIds.includes(`${row.id}`) || isCellSelected || row.id == activeRowId) { + clsName = isCheckbox ? classes.selectedRowCheckBox : classes.selectedRow; + } else { + if (row.status == FILTER_NAME.DIFFERENT) { + clsName = classes.different; + } else if (row.status == FILTER_NAME.SOURCE_ONLY) { + clsName = classes.source; + } else if (row.status == FILTER_NAME.TARGET_ONLY) { + clsName = classes.target; + } else if (row.status == FILTER_NAME.IDENTICAL) { + clsName = classes.identical; + } + } + + return clsName; + } + const columns = [ { key: 'id', @@ -617,6 +615,7 @@ export function ResultGridComponent({ gridData, allRowIds, filterParams, selecte expanded={row.isExpanded === true} filterParams={filterParams} onCellExpand={() => dispatch({ id: row.id, type: 'toggleSubRow', filterParams: filterParams, gridData: gridData, selectedRows: selectedRows })} + classes={classes} /> )}
diff --git a/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx b/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx index 2781e6564..3ffa00079 100644 --- a/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx +++ b/web/pgadmin/tools/schema_diff/static/js/components/Results.jsx @@ -18,34 +18,6 @@ import { SCHEMA_DIFF_EVENT } from '../SchemaDiffConstants'; const useStyles = makeStyles((theme) => ({ - root: { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - }, - table: { - minWidth: 650, - }, - summaryContainer: { - flexGrow: 1, - minHeight: 0, - overflow: 'auto', - }, - panelTitle: { - borderBottom: '1px solid ' + theme.otherVars.borderColor, - padding: '0.5rem', - - }, - editorStyle: { - height: '100%' - }, - editor: { - height: '100%', - padding: '0.5rem 0.2rem 2rem 0.5rem', - }, - editorLabel: { - padding: '0.3rem 0.6rem 0 0.6rem', - }, header: { padding: '0.5rem', borderBottom: '1px solid ' + theme.otherVars.borderColor, @@ -64,8 +36,19 @@ const useStyles = makeStyles((theme) => ({ padding: '0.2rem 0.5rem', width: '33.33%', }, + labelContainer: { + display: 'flex', + flexDirection: 'row', + }, label: { + padding: '0.2rem 0.5rem', + width: '33.33%' + }, + sqlInput: { + display: 'flex', + flexDirection: 'column', flexGrow: 1, + height: '100%', } })); @@ -95,40 +78,50 @@ export function Results() { {gettext('DDL Comparision')} + + {gettext('Source')} + {gettext('Target')} + {gettext('Difference')} + - - {gettext('Source')} - + + + - {gettext('Target')} - + + + - {gettext('Difference')} - + + + diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx index b70adcfbf..6a22035e1 100644 --- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx +++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffCompare.jsx @@ -198,7 +198,7 @@ export function SchemaDiffCompare({ params }) { setSelectedTargetScid(null); } } - + } function setSourceTargetSid(diff_type, selectedOption) { @@ -224,7 +224,7 @@ export function SchemaDiffCompare({ params }) { } } } - + setSourceGroupServerList(serverList); }; @@ -513,26 +513,27 @@ export function SchemaDiffCompare({ params }) { let keyList = Object.keys(tempData); let temp = []; let rowDependencies = {}; - for (let i = 0; i < keyList.length; i++) { - tempData[keyList[i]]['children'] = Object.values(tempData[keyList[i]]['children']); + for (let keyItem of keyList) { + tempData[keyItem]['children'] = Object.values(tempData[keyItem]['children']); let subChildList = []; - tempData[keyList[i]]['children'].map((ch) => ch.children.map(({ id }) => subChildList.push(`${id}`))); - tempData[keyList[i]]['metadata'] = { + + tempData[keyItem]['children'].map((ch) => ch.children.map(({ id }) => subChildList.push(`${id}`))); + tempData[keyItem]['metadata'] = { isRoot: true, - children: tempData[keyList[i]]['children'].map(({ id }) => `${id}`), + children: tempData[keyItem]['children'].map(({ id }) => `${id}`), subChildren: subChildList, }; - tempData[keyList[i]]['children'].map((child) => { + tempData[keyItem]['children'].map((child) => { child['metadata'] = { - parentId: tempData[keyList[i]].id, - children: tempData[keyList[i]]['children'].map(({ id }) => `${id}`), + parentId: tempData[keyItem].id, + children: tempData[keyItem]['children'].map(({ id }) => `${id}`), subChildren: child.children.map(({ id }) => `${id}`), dependencies: [], }; child.children.map((ch) => { if (ch.dependenciesOid.length > 0) { - tempData[keyList[i]]['children'].map((el) => { + tempData[keyItem]['children'].map((el) => { el.children.map((data) => { if (ch.dependenciesOid.includes(data.oid)) { ch.dependencieRowIds.push(`${data.id}`); @@ -543,16 +544,14 @@ export function SchemaDiffCompare({ params }) { } ch['metadata'] = { parentId: child.id, - rootId: tempData[keyList[i]].id, + rootId: tempData[keyItem].id, children: child.children.map(({ id }) => `${id}`), }; child['metadata']['dependencies'].push(...ch.dependencieRowIds); }); - - }); - temp.push(tempData[keyList[i]]); + temp.push(tempData[keyItem]); } setRowDep(rowDependencies); @@ -622,7 +621,7 @@ export function SchemaDiffCompare({ params }) { } } } - + if (diff_type == TYPE.SOURCE) { setSelectedSourceSid(sid); } else { @@ -697,7 +696,7 @@ export function SchemaDiffCompare({ params }) { if(isInit && filterOptions.length == 0) { opt = [FILTER_NAME.DIFFERENT, FILTER_NAME.SOURCE_ONLY, FILTER_NAME.TARGET_ONLY]; } else if(filterOptions.length > 0 ) { - opt = filterOptions; + opt = filterOptions; } return opt; } @@ -748,7 +747,7 @@ export function SchemaDiffCompare({ params }) { diff_type={TYPE.TARGET} > - + @@ -809,4 +808,4 @@ SchemaDiffCompare.propTypes = { params: PropTypes.object, 'params.transId': PropTypes.number, -}; \ No newline at end of file +}; diff --git a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx index fa3743335..af14a5f01 100644 --- a/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx +++ b/web/pgadmin/tools/schema_diff/static/js/components/SchemaDiffComponent.jsx @@ -26,42 +26,23 @@ export const SchemaDiffEventsContext = createContext(); export const SchemaDiffContext = createContext(); const useStyles = makeStyles((theme) => ({ - resetRoot: { - padding: '2px 4px', - display: 'flex', - alignItems: 'center', - gap: '4px', - backgroundColor: theme.otherVars.editorToolbarBg, - flexWrap: 'wrap', - ...theme.mixins.panelBorder.bottom, - - '& #id-schema-diff': { - overflow: 'auto' - }, - - '& #id-results': { - overflow: 'auto' - } - }, resultPanle: { backgroundColor: theme.palette.default.main, zIndex: 5, - border: '1px solid ' + theme.otherVars.borderColor, + border: '1px solid ' + theme.otherVars.borderColor, display: 'flex', flexDirection: 'column', flexGrow: 1, - height: '50%', - minHeight: 150, - overflow: 'hidden', + height: 0, + overflow: 'hidden', }, comparePanel:{ overflow: 'hidden', - border: '1px solid ' + theme.otherVars.borderColor, + border: '1px solid ' + theme.otherVars.borderColor, display: 'flex', flexDirection: 'column', flexGrow: 1, - minHeight: 150, - height: '50%', + height: 0, } })); @@ -102,11 +83,11 @@ export default function SchemaDiffComponent({params}) { })); }); } - + return ( - +
@@ -121,4 +102,4 @@ export default function SchemaDiffComponent({params}) { SchemaDiffComponent.propTypes = { params: PropTypes.object -}; \ No newline at end of file +}; diff --git a/web/regression/javascript/schema_diff/schema_diff_spec.js b/web/regression/javascript/schema_diff/schema_diff_spec.js index 6f822cc6c..5947e9174 100644 --- a/web/regression/javascript/schema_diff/schema_diff_spec.js +++ b/web/regression/javascript/schema_diff/schema_diff_spec.js @@ -19,7 +19,6 @@ import jasmineEnzyme from 'jasmine-enzyme'; import MockAdapter from 'axios-mock-adapter'; import axios from 'axios/index'; -// import pgAdmin from 'sources/pgadmin'; import pgWindow from 'sources/window'; import url_for from 'sources/url_for'; @@ -59,8 +58,6 @@ describe('Schema Diff Component', () => { schemaDiffInstance = new SchemaDiff(pgWindow.pgAdmin, pgWindow.pgAdmin.Browser); - // nodeInfo = { parent: {} }; - // eslint-disable-next-line let docker = new wcDocker( '.dockerContainer', {