Added preference for max lenght and css related changes.

Author: pravesh-sharma

web/pgadmin/static/css/style.css

@@ -3,7 +3,6 @@
 
 @import 'node_modules/@xterm/xterm/css/xterm.css';
 
-@import 'node_modules/jsoneditor/dist/jsoneditor.min.css';
 @import 'node_modules/react-checkbox-tree/lib/react-checkbox-tree.css';
 
 @import 'node_modules/@simonwep/pickr/dist/themes/monolith.min.css';

web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js

@@ -88,15 +88,15 @@ export default function jsonEditorOverride(theme) {
       color: theme.palette.text.primary + ' !important',
       fontWeight: 'normal !important',
       cursor:'pointer',
-      border: '1px solid transparent !important',
-      margin: '0.5px !important',
       padding: '2px 4px !important',
+      margin: '1px !important',
     },
 
     '.jse-button.jse-group-button.jse-selected': {
       color: theme.palette.primary.contrastTextLight ?? theme.palette.primary.main + ' !important',
       backgroundColor: theme.palette.primary.light + ' !important',
       borderColor: theme.palette.primary.main + ' !important',
+      borderRight: '1px solid ' + theme.palette.primary.main + ' !important',
       '&:hover':{
         backgroundColor: theme.palette.primary.hoverLight + ' !important',
       }
@@ -117,6 +117,7 @@ export default function jsonEditorOverride(theme) {
     },
 
     '.jse-button.jse-group-button': {
+      margin: '0 !important',
       height: '32px !important',
       borderRadius: '0 !important',
     },

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Formatters.jsx

@@ -11,6 +11,7 @@ import { styled } from '@mui/material/styles';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import CustomPropTypes from '../../../../../../static/js/custom_prop_types';
+import usePreferences from '../../../../../../preferences/static/js/store';
 
 
 const StyledNullAndDefaultFormatter = styled(NullAndDefaultFormatter)(({theme}) => ({
@@ -41,11 +42,13 @@ const FormatterPropTypes = {
   column: PropTypes.object,
 };
 export function TextFormatter({row, column}) {
+  const maxColumnDataDisplayLength = usePreferences().getPreferences('sqleditor', 'max_column_data_display_length').value;
   let value = row[column.key];
   if(!_.isNull(value) && !_.isUndefined(value)) {
     value = value.toString();
-    if (value.length > 200) {
-      value = `${value.substring(0, 200).replace(/\n/g,' ')}...`;
+    // If the length of the value is very large then we do not render the entire value and truncate it.
+    if (value.length > maxColumnDataDisplayLength) {
+      value = `${value.substring(0, maxColumnDataDisplayLength).replace(/\n/g,' ')}...`;
     }
   }
   return (

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx

@@ -257,7 +257,7 @@ function cellClassGetter(col, isSelected, dataChangeStore, rowKeyGetter){
   };
 }
 
-function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
+function initialiseColumns(columns, rows, totalRowCount, columnWidthBy, maxColumnDataDisplayLength) {
   let retColumns = [
     ...columns,
   ];
@@ -266,7 +266,7 @@ function initialiseColumns(columns, rows, totalRowCount, columnWidthBy) {
   canvasContext.font = '12px Roboto';
 
   for(const col of retColumns) {
-    col.width = getColumnWidth(col, rows, canvasContext, columnWidthBy);
+    col.width = getColumnWidth(col, rows, canvasContext, columnWidthBy, maxColumnDataDisplayLength);
     col.resizable = true;
     col.editorOptions = {
       commitOnOutsideClick: false,
@@ -338,15 +338,16 @@ function formatColumns(columns, dataChangeStore, selectedColumns, onColumnSelect
   return retColumns;
 }
 
-function getColumnWidth(column, rows, canvas, columnWidthBy) {
+function getColumnWidth(column, rows, canvas, columnWidthBy, maxColumnDataDisplayLength) {
   const dataWidthReducer = (longest, nextRow) => {
     let value = nextRow[column.key];
     if(_.isNull(value) || _.isUndefined(value)) {
       value = '';
     }
     value = value.toString();
-    if (value.length > 200) {
-      value = `${value.substring(0, 200)}`;
+    // If the length of the value is very large then we do not use the entire value and truncate it.
+    if (value.length > maxColumnDataDisplayLength) {
+      value = `${value.substring(0, maxColumnDataDisplayLength)}`;
     }
     return longest.length > value.length ? longest : value;
   };
@@ -373,7 +374,7 @@ function getColumnWidth(column, rows, canvas, columnWidthBy) {
 }
 
 export default function QueryToolDataGrid({columns, rows, totalRowCount, dataChangeStore,
-  onSelectedCellChange, selectedColumns, onSelectedColumnsChange, columnWidthBy, startRowNum, ...props}) {
+  onSelectedCellChange, selectedColumns, onSelectedColumnsChange, columnWidthBy, startRowNum, maxColumnDataDisplayLength, ...props}) {
   const [readyColumns, setReadyColumns] = useState([]);
   const [lastSelectedColumn, setLastSelectedColumn] = useState(null);
   const eventBus = useContext(QueryToolEventsContext);
@@ -431,7 +432,7 @@ export default function QueryToolDataGrid({columns, rows, totalRowCount, dataCha
   }), [onSelectedCellChange]);
 
   useEffect(()=>{
-    let initCols = initialiseColumns(columns, rows, totalRowCount, columnWidthBy);
+    let initCols = initialiseColumns(columns, rows, totalRowCount, columnWidthBy, maxColumnDataDisplayLength);
     setReadyColumns(formatColumns(initCols, dataChangeStore, selectedColumns, onColumnSelected, onSelectedColumnsChangeWrapped, props.rowKeyGetter));
   }, [columns]);
 
@@ -496,4 +497,5 @@ QueryToolDataGrid.propTypes = {
   rowKeyGetter: PropTypes.func,
   columnWidthBy: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   startRowNum: PropTypes.number,
+  maxColumnDataDisplayLength: PropTypes.number,
 };

web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx

@@ -1573,6 +1573,7 @@ export function ResultSet() {
                 queryToolCtx.preferences.sqleditor.column_data_max_width :
                 queryToolCtx.preferences?.sqleditor?.column_data_auto_resize
             }
+            maxColumnDataDisplayLength={queryToolCtx.preferences?.sqleditor?.max_column_data_display_length}
             key={rowsResetKey}
             rowKeyGetter={rowKeyGetter}
             onRowsChange={onRowsChange}

web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py

@@ -375,6 +375,14 @@ def register_query_tool_preferences(self):
                          ' rows with alternating background colors.')
     )
 
+    self.max_column_data_display_length = self.preference.register(
+    'Results_grid', 'max_column_data_display_length',
+    gettext("Max column data display length"), 'integer',
+    200, category_label=PREF_LABEL_RESULTS_GRID,
+    help_str=gettext('Maximum number of characters to display in the'
+                     ' data preview.')
+    )
+
     self.sql_font_size = self.preference.register(
         'Editor', 'sql_font_size',
         gettext("Font size"), 'numeric', '1',