From 95ffd1b9a1b7ee56f66b6687badab5a2780f7bd8 Mon Sep 17 00:00:00 2001 From: Yogesh Mahajan Date: Wed, 19 Jun 2024 11:54:18 +0530 Subject: [PATCH] More fixes for issues reported while testing changes related to makeStyle JSS changes and auto-theme. #7363 --- web/pgadmin/browser/__init__.py | 5 --- web/pgadmin/dashboard/static/js/Dashboard.jsx | 1 + web/pgadmin/dashboard/static/js/Graphs.jsx | 17 ++++---- .../static/js/Replication/PGDReplication.jsx | 7 ++-- web/pgadmin/static/js/Explain/Analysis.jsx | 3 +- web/pgadmin/static/js/Explain/Graphical.jsx | 2 +- web/pgadmin/static/js/Theme/dark.js | 1 + web/pgadmin/static/js/Theme/high_contrast.js | 1 + web/pgadmin/static/js/Theme/index.jsx | 42 ++++++++++++------- .../static/js/Theme/{standard.js => light.js} | 1 + web/pgadmin/static/js/utils.js | 4 +- .../static/js/components/PsqlComponent.jsx | 4 +- web/pgadmin/tools/psql/tests/test_panel.py | 2 +- .../static/js/SearchObjects.jsx | 8 ++-- .../components/sections/GraphVisualiser.jsx | 8 ++-- 15 files changed, 60 insertions(+), 46 deletions(-) rename web/pgadmin/static/js/Theme/{standard.js => light.js} (99%) diff --git a/web/pgadmin/browser/__init__.py b/web/pgadmin/browser/__init__.py index ac55234b6..96cbccaa3 100644 --- a/web/pgadmin/browser/__init__.py +++ b/web/pgadmin/browser/__init__.py @@ -481,10 +481,6 @@ def utils(): pg_help_path_pref = prefs.preference('pg_help_path') pg_help_path = pg_help_path_pref.get() - # Added to have theme value available at app start page loading - prefs = Preferences.module('misc') - theme = prefs.preference('theme').get() - # Get sqleditor options prefs = Preferences.module('sqleditor') @@ -546,7 +542,6 @@ def utils(): render_template( 'browser/js/utils.js', layout=layout, - theme=theme, jssnippets=snippets, pg_help_path=pg_help_path, editor_tab_size=editor_tab_size, diff --git a/web/pgadmin/dashboard/static/js/Dashboard.jsx b/web/pgadmin/dashboard/static/js/Dashboard.jsx index 6109d253c..e1e7de6c8 100644 --- a/web/pgadmin/dashboard/static/js/Dashboard.jsx +++ b/web/pgadmin/dashboard/static/js/Dashboard.jsx @@ -76,6 +76,7 @@ const Root = styled('div')(({theme}) => ({ }, '& .Dashboard-emptyPanel': { width: '100%', + height: '100%', background: theme.otherVars.emptySpaceBg, overflow: 'auto', padding: '8px', diff --git a/web/pgadmin/dashboard/static/js/Graphs.jsx b/web/pgadmin/dashboard/static/js/Graphs.jsx index e6759b93f..e8a7adf71 100644 --- a/web/pgadmin/dashboard/static/js/Graphs.jsx +++ b/web/pgadmin/dashboard/static/js/Graphs.jsx @@ -16,13 +16,13 @@ import {getGCD, getEpoch} from 'sources/utils'; import {useInterval, usePrevious} from 'sources/custom_hooks'; import PropTypes from 'prop-types'; import StreamingChart from '../../../static/js/components/PgChart/StreamingChart'; -import { Grid } from '@mui/material'; +import { Grid, useTheme } from '@mui/material'; import { getChartColor } from '../../../static/js/utils'; export const X_AXIS_LENGTH = 75; /* Transform the labels data to suit ChartJS */ -export function transformData(labels, refreshRate, theme='standard') { +export function transformData(labels, refreshRate, theme='light') { let datasets = Object.keys(labels).map((label, i)=>{ return { label: label, @@ -91,6 +91,7 @@ const chartsDefault = { export default function Graphs({preferences, sid, did, pageVisible, enablePoll=true, isTest}) { const refreshOn = useRef(null); const prevPrefernces = usePrevious(preferences); + const theme = useTheme(); const [sessionStats, sessionStatsReduce] = useReducer(statsReducer, chartsDefault['session_stats']); const [tpsStats, tpsStatsReduce] = useReducer(statsReducer, chartsDefault['tps_stats']); @@ -212,16 +213,16 @@ export default function Graphs({preferences, sid, did, pageVisible, enablePoll=t
{pollDelay}
{chartDrawnOnce && 0} isTest={isTest} /> diff --git a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx index f22cb8387..ea71e8b97 100644 --- a/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx +++ b/web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx @@ -7,7 +7,7 @@ // ////////////////////////////////////////////////////////////// -import { Box, Grid } from '@mui/material'; +import { Box, Grid, useTheme } from '@mui/material'; import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'; import gettext from 'sources/gettext'; @@ -273,6 +273,7 @@ const chartsDefault = { export default function PGDReplication({preferences, treeNodeInfo, pageVisible, enablePoll=true, ...props}) { const api = getApiInstance(); const refreshOn = useRef(null); + const theme = useTheme(); const prevPreferences = usePrevious(preferences); const [pollDelay, setPollDelay] = useState(5000); @@ -399,8 +400,8 @@ export default function PGDReplication({preferences, treeNodeInfo, pageVisible, }); }, enablePoll ? pollDelay : -1); - const replicationLagTimeData = useMemo(()=>transformData(replicationLagTime, preferences['pgd_replication_lag_refresh'], preferences.theme), [replicationLagTime, preferences.theme]); - const replicationLagBytesData = useMemo(()=>transformData(replicationLagBytes, preferences['pgd_replication_lag_refresh'], preferences.theme), [replicationLagBytes, preferences.theme]); + const replicationLagTimeData = useMemo(()=>transformData(replicationLagTime, preferences['pgd_replication_lag_refresh'], theme.name), [replicationLagTime, theme.name]); + const replicationLagBytesData = useMemo(()=>transformData(replicationLagBytes, preferences['pgd_replication_lag_refresh'], theme.name), [replicationLagBytes, theme.name]); return ( diff --git a/web/pgadmin/static/js/Explain/Analysis.jsx b/web/pgadmin/static/js/Explain/Analysis.jsx index b5028d746..dc7cc1a26 100644 --- a/web/pgadmin/static/js/Explain/Analysis.jsx +++ b/web/pgadmin/static/js/Explain/Analysis.jsx @@ -33,7 +33,8 @@ const StyledTable = styled(Table)(({theme}) => ({ }, '& .Analysis-header': { border: 'none', - background: 'none' + background: 'none', + color :theme.palette.text.primary } })); diff --git a/web/pgadmin/static/js/Explain/Graphical.jsx b/web/pgadmin/static/js/Explain/Graphical.jsx index 60a4243df..199f6943b 100644 --- a/web/pgadmin/static/js/Explain/Graphical.jsx +++ b/web/pgadmin/static/js/Explain/Graphical.jsx @@ -158,7 +158,7 @@ function Multitext({currentXpos, currentYpos, label, maxWidth}) { return res; }; - for (let word in words) { + for (const word of words) { let tmpArr = splitTextInMultiLine( currLine, widthSoFar, word ); diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js index 02a99b481..485c9c4b5 100644 --- a/web/pgadmin/static/js/Theme/dark.js +++ b/web/pgadmin/static/js/Theme/dark.js @@ -12,6 +12,7 @@ import { darken, createTheme} from '@mui/material/styles'; export default function(basicSettings) { return createTheme(basicSettings, { + name: 'dark', palette: { default: { main: '#6b6b6b', diff --git a/web/pgadmin/static/js/Theme/high_contrast.js b/web/pgadmin/static/js/Theme/high_contrast.js index 208f65d39..f829cc2b6 100644 --- a/web/pgadmin/static/js/Theme/high_contrast.js +++ b/web/pgadmin/static/js/Theme/high_contrast.js @@ -12,6 +12,7 @@ import { createTheme } from '@mui/material/styles'; export default function(basicSettings) { return createTheme(basicSettings, { + name: 'high_contrast', palette: { default: { main: '#00000000', diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx index afe113cb7..d297bcfb6 100644 --- a/web/pgadmin/static/js/Theme/index.jsx +++ b/web/pgadmin/static/js/Theme/index.jsx @@ -17,7 +17,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'; import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3'; import CustomPropTypes from '../custom_prop_types'; -import getStandardTheme from './standard'; +import getLightTheme from './light'; import getDarkTheme from './dark'; import getHightContrastTheme from './high_contrast'; import { CssBaseline } from '@mui/material'; @@ -773,11 +773,12 @@ function getFinalTheme(baseTheme) { /* In future, this will be moved to App container */ export default function Theme({children}) { const prefStore = usePreferences(); - const [currentTheme, setCurrentTheme] = useState(prefStore.getPreferencesForModule('misc')?.theme); + const [theme, setTheme] = useState(prefStore.getPreferencesForModule('misc')?.theme); + const [selectedMode, setSelectedMode] = useState(prefStore.getPreferencesForModule('misc')?.theme || 'light'); const themeObj = useMemo(()=>{ - let baseTheme = getStandardTheme(basicSettings); - switch(currentTheme) { + let baseTheme = getLightTheme(basicSettings); + switch(theme) { case 'dark': baseTheme = getDarkTheme(baseTheme); break; @@ -786,22 +787,31 @@ export default function Theme({children}) { break; } return getFinalTheme(baseTheme); - }, [currentTheme]); + }, [theme]); useEffect(() => usePreferences.subscribe( state => { - let selectdTheme = state.getPreferencesForModule('misc').theme; - if(selectdTheme === 'system'){ - const themeQuery = window.matchMedia('(prefers-color-scheme: light)'); - setCurrentTheme(themeQuery.matches ? 'light' : 'dark'); - themeQuery.addEventListener('change', ({ matches }) => { - setCurrentTheme(matches ? 'light' : 'dark'); - }); - }else{ - setCurrentTheme(selectdTheme); - } + setSelectedMode(state.getPreferencesForModule('misc').theme); + setTheme(state.getPreferencesForModule('misc').theme); + }),[theme]); + + useEffect(() => { + if (selectedMode !== 'system') { + setTheme(selectedMode); + return; } - ), []); + + const isSystemInDarkMode = matchMedia('(prefers-color-scheme: dark)'); + setTheme(isSystemInDarkMode.matches ? 'dark' : 'light'); + + const listener = (event) => { + setTheme(event.matches ? 'dark' : 'light'); + }; + isSystemInDarkMode.addEventListener('change',listener); + return () => { + isSystemInDarkMode.removeEventListener('change',listener); + }; + },[selectedMode]); return ( diff --git a/web/pgadmin/static/js/Theme/standard.js b/web/pgadmin/static/js/Theme/light.js similarity index 99% rename from web/pgadmin/static/js/Theme/standard.js rename to web/pgadmin/static/js/Theme/light.js index 5eeb594cc..3c8ec307c 100644 --- a/web/pgadmin/static/js/Theme/standard.js +++ b/web/pgadmin/static/js/Theme/light.js @@ -12,6 +12,7 @@ import { alpha, darken, createTheme} from '@mui/material/styles'; export default function(basicSettings) { return createTheme(basicSettings, { + name: 'light', palette: { default: { main: '#fff', diff --git a/web/pgadmin/static/js/utils.js b/web/pgadmin/static/js/utils.js index 27d2ba603..81f88d61d 100644 --- a/web/pgadmin/static/js/utils.js +++ b/web/pgadmin/static/js/utils.js @@ -657,7 +657,7 @@ export function scrollbarWidth() { } const CHART_THEME_COLORS = { - 'standard':['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', + 'light':['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B', '#E377C2', '#7F7F7F', '#BCBD22', '#17BECF', '#3366CC', '#DC3912', '#FF9900', '#109618', '#990099', '#0099C6','#DD4477', '#66AA00', '#B82E2E', '#316395'], 'dark': ['#4878D0', '#EE854A', '#6ACC64', '#D65F5F', '#956CB4', '#8C613C', @@ -669,7 +669,7 @@ const CHART_THEME_COLORS = { '#52B788'] }; -export function getChartColor(index, theme='standard', colorPalette=CHART_THEME_COLORS) { +export function getChartColor(index, theme='light', colorPalette=CHART_THEME_COLORS) { const palette = colorPalette[theme]; // loop back if out of index; return palette[index % palette.length]; diff --git a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx index 358819b4b..254c48d04 100644 --- a/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx +++ b/web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx @@ -163,7 +163,9 @@ export default function PsqlComponent({ params, pgAdmin }) { termRef.current = term; termRef.current?.setOption('theme', { - background: '#ff0000'}); + background: theme?.palette.background.default}); + + termRef.current.focus(); termRef.current.focus(); diff --git a/web/pgadmin/tools/psql/tests/test_panel.py b/web/pgadmin/tools/psql/tests/test_panel.py index f580ac0bb..dbec2e0dc 100644 --- a/web/pgadmin/tools/psql/tests/test_panel.py +++ b/web/pgadmin/tools/psql/tests/test_panel.py @@ -14,7 +14,7 @@ class PSQLPanel(BaseTestGenerator): self.sid = parent_node_dict["server"][-1]["server_id"] self.did = utils.create_database(self.server, self.db_name) self.sgid = config_data["server_group"] - self.theme = 'standard' + self.theme = 'light' def runTest(self): if sys.platform == 'win32': diff --git a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx index 77182d157..581c15529 100644 --- a/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx +++ b/web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx @@ -73,7 +73,7 @@ const StyledBox = styled(Box)(({theme}) => ({ overflow: 'hidden' }, '& .SearchObjects-cellMuted': { - color: `${theme.otherVars.textMuted} !important`, + color: theme.otherVars.textMuted + ' !important', cursor: 'default !important', }, '& .SearchObjects-gridCell': { @@ -95,13 +95,13 @@ function ObjectNameFormatter({row}) { return (
- - + + {row.name} {row.other_info != null && row.other_info != '' && ( {row.showArgs = true;}} onKeyDown={()=>{/* no need */}}> {row?.showArgs ? `(${row.other_info})` : '(...)'} )} - +
); } diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx index f3f3d3086..22b1e1ba8 100644 --- a/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx +++ b/web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx @@ -186,12 +186,12 @@ function getBarChartData(rows, colName, colPosition, color) { } // This function is used to get the dataset for Pie Chart. -function getPieChartData(rows, colName, colPosition, queryToolCtx) { +function getPieChartData(rows, colName, colPosition, theme) { return { label: colName, data: rows.map((r)=>r[colPosition]), backgroundColor: rows.map((_v, i)=> { - return getChartColor(i, queryToolCtx.preferences.misc.theme); + return getChartColor(i, theme); }), }; } @@ -226,7 +226,7 @@ function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx, t styleIndex = styleIndex + 1; if (graphType === 'P') { - return getPieChartData(rows, colName, colPosition, queryToolCtx); + return getPieChartData(rows, colName, colPosition, theme.name); } else if (graphType === 'B' || graphType === 'SB') { return getBarChartData(rows, colName, colPosition, color); } else if (graphType === 'L' || graphType === 'SL') { @@ -363,7 +363,7 @@ export function GraphVisualiser({initColumns}) { // Set the Graph Data setGraphData( (prev)=> [ - getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx, queryToolCtx.preferences.misc.theme), + getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx, theme.name), prev[1] + 1 ] );