Fix issues reported while testing MUI5 library update.

web/pgadmin/static/js/SchemaView/FieldSetView.jsx

@@ -18,7 +18,7 @@ import CustomPropTypes from '../custom_prop_types';
 import { DepListenerContext } from './DepListener';
 import { getFieldMetaData } from './FormView';
 import FieldSet from '../components/FieldSet';
-import { Box } from '@mui/material';
+import { Grid } from '@mui/material';
 
 export default function FieldSetView({
   value, schema={}, viewHelperProps, accessPath, dataDispatch, controlClassName, isDataGridForm=false, label, visible}) {
@@ -101,9 +101,9 @@ export default function FieldSetView({
           withContainer: false, controlGridBasis: 3
         }));
         viewFields.push(
-          <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} rowGap="8px" flexWrap="wrap">
+          <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className={controlClassName} rowGap="8px">
             {inlineComponents}
-          </Box>
+          </Grid>
         );
         inlineComponents = [];
       } else {
@@ -113,9 +113,9 @@ export default function FieldSetView({
   }
   if(inlineComponents?.length > 0) {
     viewFields.push(
-      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} rowGap="8px" flexWrap="wrap">
+      <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className={controlClassName} rowGap="8px">
         {inlineComponents}
-      </Box>
+      </Grid>
     );
   }
 

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Box, Tab, Tabs } from '@mui/material';
+import { Box, Tab, Tabs, Grid } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
@@ -381,9 +381,9 @@ export default function FormView({
             withContainer: false, controlGridBasis: 3
           }));
           tabs[group].push(
-            <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} rowGap="8px" flexWrap="wrap">
+            <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className={classes.controlRow} rowGap="8px">
               {inlineComponents}
-            </Box>
+            </Grid>
           );
           inlineComponents = [];
           inlineCompGroup = null;
@@ -396,9 +396,9 @@ export default function FormView({
 
   if(inlineComponents?.length > 0) {
     tabs[inlineCompGroup].push(
-      <Box key={`ic-${inlineComponents[0].key}`} display="flex" className={classes.controlRow} rowGap="8px" flexWrap="wrap">
+      <Grid container spacing={0} key={`ic-${inlineComponents[0].key}`} className={classes.controlRow} rowGap="8px">
         {inlineComponents}
-      </Box>
+      </Grid>
     );
   }
 

web/pgadmin/static/js/Theme/index.jsx

@@ -499,6 +499,7 @@ function getFinalTheme(baseTheme) {
             '&[readonly], &.Mui-disabled': {
               color: baseTheme.palette.text.muted,
               backgroundColor: baseTheme.otherVars.inputDisabledBg,
+              WebkitTextFillColor: baseTheme.palette.text.muted
             },
             '&:focus': {
               outline: '0 !important',

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

@@ -1,6 +1,10 @@
 export default function pgadminOverride(theme) {
   return {
-
+    '.dialog-node-icon': {
+      marginRight: '2px !important',
+      padding: '0px 10px',
+      backgroundPosition: '50%'
+    },
     '.icon-server-connecting': {
       backgroundImage: theme.otherVars.iconLoaderUrl,
       backgroundRepeat: 'no-repeat',
@@ -9,7 +13,6 @@ export default function pgadminOverride(theme) {
       verticalAlign: 'middle',
       height: '1.3em',
     },
-
     '.dashboard-pg-doc': {
       backgroundImage: theme.otherVars.dashboardPgDoc,
       display: 'inline-block',

web/pgadmin/static/js/chartjs/index.jsx

@@ -11,6 +11,7 @@ import { Chart, registerables } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import PropTypes from 'prop-types';
 import _ from 'lodash';
+import { useTheme } from '@mui/material';
 
 export const DATA_POINT_STYLE = ['circle', 'cross', 'crossRot', 'rect',
   'rectRounded', 'rectRot', 'star', 'triangle'];
@@ -59,7 +60,6 @@ const defaultOptions = {
       },
       ticks: {
         display: false,
-        color: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'),
       },
     },
     y: {
@@ -69,12 +69,9 @@ const defaultOptions = {
             return label;
           }
         },
-        color: getComputedStyle(document.documentElement).getPropertyValue('--color-fg'),
       },
       grid: {
         drawBorder: false,
-        zeroLineColor: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
-        color: getComputedStyle(document.documentElement).getPropertyValue('--border-color'),
       },
     },
   },
@@ -101,6 +98,7 @@ const defaultOptions = {
 export default function BaseChart({type='line', id, options, data, redraw=false, plugins={}, ...props}) {
   const chartRef = React.useRef();
   const chartObj = React.useRef();
+  const theme = useTheme();
 
   const initChart = function() {
     Chart.register(...registerables);
@@ -126,6 +124,30 @@ export default function BaseChart({type='line', id, options, data, redraw=false,
     return destroyChart;
   }, []);
 
+  useEffect(()=>{
+    let theme1 = {
+      scales: {
+        x: {
+          ticks: {
+            color: theme.palette.text.primary,
+          },
+        },
+        y: {
+          ticks: {
+            color: theme.palette.text.primary,
+          },
+          grid: {
+            zeroLineColor: theme.otherVars.borderColor,
+            color: theme.otherVars.borderColor
+          },
+        },
+      },
+    };
+    let merged = _.merge(options, theme1);
+    chartObj.current.options = merged;
+    chartObj.current.update(props.updateOptions || {});
+  },[theme]);
+
   useEffect(()=>{
     if(typeof(chartObj.current) != 'undefined') {
       chartObj.current.data = data;

web/pgadmin/static/js/helpers/Layout/index.jsx

@@ -49,7 +49,7 @@ function TabTitle({id, closable, defaultInternal}) {
 
   return (
     <Box display="flex" alignItems="center" title={attrs.tooltip} onContextMenu={onContextMenu} width="100%">
-      {attrs.icon && <span style={{fontSize: '1rem', marginRight: '4px', padding: '0px 2px', backgroundPosition: '50%'}} className={attrs.icon}></span>}
+      {attrs.icon && <span style={{fontSize: '1rem', marginRight: '4px'}} className={attrs.icon}></span>}
       <span style={{textOverflow: 'ellipsis', overflow: 'hidden', whiteSpace: 'nowrap'}} data-visible={layoutDocker.isTabVisible(id)}>{attrs.title}</span>
       {closable && <PgIconButton title={gettext('Close')} icon={<CloseIcon style={{height: '0.7em'}} />} size="xs" noBorder onClick={()=>{
         layoutDocker.close(id);

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

@@ -26,6 +26,7 @@ import { LineChart, BarChart, PieChart, DATA_POINT_STYLE, DATA_POINT_SIZE,
   CHART_THEME_COLORS, CHART_THEME_COLORS_LENGTH, LightenDarkenColor} from 'sources/chartjs';
 import { QueryToolEventsContext, QueryToolContext } from '../QueryToolComponent';
 import { QUERY_TOOL_EVENTS, PANELS } from '../QueryToolConstants';
+import { useTheme } from '@mui/material';
 
 // Numeric data type used to separate out the options for Y axis.
 const NUMERIC_TYPES = ['oid', 'smallint', 'integer', 'bigint', 'decimal', 'numeric',
@@ -202,7 +203,7 @@ function getPieChartData(rows, colName, colPosition, queryToolCtx) {
 }
 
 // This function is used to get the graph data set for the X axis and Y axis
-function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx) {
+function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx, graphColors) {
   // Function is used to the find the position of the column
   function getColumnPosition(colName) {
     return _.find(columns, (c)=>(c.name==colName))?.pos;
@@ -227,7 +228,7 @@ function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx) {
       }
       colorIndex = colorIndex + 1;
 
-      let color = CHART_THEME_COLORS[queryToolCtx.preferences.misc.theme][colorIndex];
+      let color = graphColors[colorIndex];
       let colPosition = getColumnPosition(colName);
 
       // Loop is used to set the index for DATA_POINT_STYLE array
@@ -262,6 +263,8 @@ export function GraphVisualiser({initColumns}) {
   const [columns, setColumns] = useState(initColumns);
   const [graphHeight, setGraphHeight] = useState();
   const [expandedState, setExpandedState] = useState(true);
+  const [graphColor, setGraphColor] = useState([]);
+  const theme = useTheme();
 
 
   // Create X axis options for drop down.
@@ -339,7 +342,25 @@ export function GraphVisualiser({initColumns}) {
     if (graphType === 'P') {
       setYAxis('');
     }
-  }, [graphType]);
+  }, [graphType, theme]);
+
+  useEffect(()=>{
+    setGraphColor(CHART_THEME_COLORS[queryToolCtx.preferences.misc.theme]);
+  }, [queryToolCtx.preferences.misc.theme, theme]);
+
+  const graphBackgroundColor = useMemo(() => {
+    return theme.palette.background.default;
+  },[theme]);
+
+
+  const beforeDrawFunc = (chart) => {
+    const ctx = chart.canvas.getContext('2d');
+    ctx.save();
+    ctx.globalCompositeOperation = 'destination-over';
+    ctx.fillStyle = graphBackgroundColor;
+    ctx.fillRect(0, 0, chart.width, chart.height);
+    ctx.restore();
+  };
 
   // Generate button callback
   const onGenerate = async ()=>{
@@ -359,7 +380,7 @@ export function GraphVisualiser({initColumns}) {
     setLoaderText(gettext('Rendering data points...'));
     // Set the Graph Data
     setGraphData(
-      (prev)=> [getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx), prev[1] + 1]
+      (prev)=> [getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx, graphColor), prev[1] + 1]
     );
 
     setLoaderText('');
@@ -382,12 +403,7 @@ export function GraphVisualiser({initColumns}) {
   // when downloading the graph.
   const plugin = {
     beforeDraw: (chart) => {
-      const ctx = chart.canvas.getContext('2d');
-      ctx.save();
-      ctx.globalCompositeOperation = 'destination-over';
-      ctx.fillStyle = getComputedStyle(document.documentElement).getPropertyValue('--color-bg');
-      ctx.fillRect(0, 0, chart.width, chart.height);
-      ctx.restore();
+      beforeDrawFunc(chart);
     }
   };
 
@@ -444,7 +460,7 @@ export function GraphVisualiser({initColumns}) {
         <Box style={{height:`${graphHeight}px`}}>
           {useMemo(()=> <GenerateGraph graphType={graphType} graphData={graphData} onInit={(chartObj)=> {
             chartObjRef.current = chartObj;
-          }} plugins={plugin}/>, [graphDataKey])}
+          }} plugins={[plugin]}/>, [graphDataKey])}
         </Box>
       </Box>
     </Box>