1. Resolved resize window issue for DDL result panel.

2. Updated the Screenshots.
3. Updated server group title to bold.

refs #6133

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
 ================================

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) => ({

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

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

@@ -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}
               />
             )}
             <div className="rdg-cell-value">

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,10 +78,14 @@ export function Results() {
       <Box className={classes.header}>
         <span>{gettext('DDL Comparision')}</span>
       </Box>
-      <Box className={classes.sqlContainer}>
-        
-        <Box className={classes.sqldata}> 
+      <Box className={classes.labelContainer}>
         <Box className={classes.label}>{gettext('Source')}</Box>
+        <Box className={classes.label}>{gettext('Target')}</Box>
+        <Box className={classes.label}>{gettext('Difference')}</Box>
+      </Box>
+      <Box className={classes.sqlContainer}>
+        <Box className={classes.sqldata}> 
+          <Box className={classes.sqlInput}>
             <InputSQL
               onLable={true}
               value={sourceSQL}
@@ -106,10 +93,12 @@ export function Results() {
                 readOnly: true,
               }}
               readonly={true}
+              width='100%'
             />
           </Box>
+        </Box>
         <Box className={classes.sqldata}>
-          <Box className={classes.label}>{gettext('Target')}</Box>
+          <Box className={classes.sqlInput}>
             <InputSQL
               onLable={true}
               value={targetSQL}
@@ -117,10 +106,12 @@ export function Results() {
                 readOnly: true,
               }}
               readonly={true}
+              width='100%'
             />
           </Box>
+        </Box>
         <Box className={classes.sqldata}>
-          <Box className={classes.label}>{gettext('Difference')}</Box>
+          <Box className={classes.sqlInput}>
             <InputSQL
               onLable={true}
               value={sqlDiff}
@@ -128,9 +119,11 @@ export function Results() {
                 readOnly: true,
               }}
               readonly={true}
+              width='100%'
             />
           </Box>
         </Box>
+      </Box>
     </>
   );
 }

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

@@ -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);

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

@@ -26,23 +26,6 @@ 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,
@@ -50,8 +33,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
-    height: '50%', 
-    minHeight: 150,
+    height: 0,
     overflow: 'hidden',
   },
   comparePanel:{
@@ -60,8 +42,7 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     flexGrow: 1,
-    minHeight: 150,
-    height: '50%',
+    height: 0,
   }
 }));
 
@@ -106,7 +87,7 @@ export default function SchemaDiffComponent({params}) {
   return (
     <SchemaDiffContext.Provider value={schemaDiffContextValue}>
       <SchemaDiffEventsContext.Provider value={eventBus.current}>
-        <Box display="flex" flexDirection="column" flexGrow="1" tabIndex="0" style={{overflowY: 'auto', minHeight: 80}}>
+        <Box display="flex" flexDirection="column" flexGrow="1" height="100%" tabIndex="0" style={{minHeight: 80}}>
           <DividerBox mode='vertical' style={{flexGrow: 1}}>
             <div className={classes.comparePanel} id="schema-diff-compare-container" ref={containerRef}><SchemaDiffCompare params={params} /></div>
             <div className={classes.resultPanle} id="schema-diff-result-container">

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', {