IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-11-22 00:37:36 -06:00
Code Issues Packages Projects Releases Wiki Activity

- Update MUI v4 to v5

Browse Source 
- Remove the SCSS dependency completely and use MUI for theming.
- Update - date-fns, @date-io, notistack. Remove - popper.js, sass-loader.
- Cleanup webpack config.
- Port PSQL tool to use MUI themes instead of SCSS theme.
- Theme change will reflect realtime without refreshing pgAdmin.
This commit is contained in:
Yogesh Mahajan 2024-04-09 08:21:14 +05:30 committed by GitHub
parent edec9adbfb
commit 102e0a9839
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
193 changed files with 3110 additions and 5313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/package.json
View File

@ -17,7 +17,7 @@
"@babel/preset-typescript": "^7.22.5",
"@emotion/core": "^10.0.14",
"@emotion/memoize": "^0.7.5",
"@emotion/react": "^11.1.5",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@emotion/utils": "^1.0.0",
"@svgr/webpack": "^8.1.0",
@ -56,16 +56,13 @@
"process": "^0.11.10",
"prop-types": "^15.7.2",
"resize-observer-polyfill": "^1.5.1",
"sass": "^1.24.4",
"sass-loader": "^11.0.0",
"sass-resources-loader": "^2.2.1",
"shim-loader": "^1.0.1",
"style-loader": "^3.3.2",
"stylis": "^4.0.7",
"svgo": "^2.7.0",
"svgo-loader": "^2.2.0",
"terser-webpack-plugin": "^5.1.1",
"typescript": "^3.2.2",
"typescript": "^4.9.5",
"url-loader": "^4.1.1",
"webfonts-loader": "^8.0.1",
"webpack": "^5.88.2",
@ -77,20 +74,21 @@
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/preset-react": "^7.12.13",
"@codemirror/lang-sql": "^6.6.3",
"@date-io/core": "^1.3.6",
"@date-io/date-fns": "1.x",
"@date-io/core": "^3.0.0",
"@date-io/date-fns": "3.x",
"@emotion/sheet": "^1.0.1",
"@fortawesome/fontawesome-free": "latest",
"@material-ui/core": "4.12.4",
"@material-ui/icons": "^4.11.2",
"@material-ui/lab": "4.0.0-alpha.61",
"@material-ui/pickers": "3.3.10",
"@mui/icons-material": "^5.15.10",
"@mui/lab": "^5.0.0-alpha.165",
"@mui/material": "^5.15.10",
"@mui/styles": "^5.15.10",
"@mui/x-date-pickers": "^6.19.7",
"@projectstorm/react-diagrams": "^6.6.1",
"@simonwep/pickr": "^1.5.1",
"@szhsin/react-menu": "^2.2.0",
"@types/classnames": "^2.2.6",
"@types/react": "^16.7.18",
"@types/react-dom": "^17.0.11",
"@types/react": "^17.0.80",
"@types/react-dom": "^17.0.25",
"ajv": "^8.8.2",
"anti-trojan-source": "^1.4.0",
"aspen-decorations": "^1.0.2",
@ -107,7 +105,7 @@
"convert-units": "^2.3.4",
"cssnano": "^5.0.2",
"dagre": "^0.8.4",
"date-fns": "^2.24.0",
"date-fns": "^3.6.0",
"diff-arrays-of-objects": "^1.1.8",
"hotkeys-js": "^3.13.3",
"html-to-image": "^1.11.11",
@ -122,11 +120,10 @@
"moment": "^2.29.4",
"moment-timezone": "^0.5.34",
"notificar": "^1.0.1",
"notistack": "^1.0.10",
"notistack": "^2.0.8",
"path-fx": "^2.0.0",
"pathfinding": "^0.4.18",
"paths-js": "^0.4.9",
"popper.js": "^1.16.1",
"postcss": "^8.4.31",
"raf": "^3.4.1",
"rc-dock": "^3.2.9",
@ -172,7 +169,7 @@
"bundle:watch": "yarn run linter && yarn run webpacker:watch",
"bundle:dev": "yarn run linter && yarn run webpacker",
"bundle:analyze": "cross-env NODE_ENV=production ANALYZE=true yarn run bundle:dev",
"bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=2048 yarn run bundle:dev",
"bundle": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=3072 yarn run bundle:dev",
"test:js-once": "yarn run linter && yarn run jest --maxWorkers=50%",
"test:js": "yarn run test:js-once --watch",
"test:js-file": "yarn run test:js-once -t",

7
web/pgadmin.themes.json
View File

@ -1,7 +0,0 @@
{
"dark": {
"disp_name": "dark_(Beta)",
"cssfile": "pgadmin.theme.dark",
"preview_img": "dark_preview.png"
}
}

3
web/pgadmin/__init__.py
View File

@ -890,9 +890,6 @@ def create_app(app_name=None):
from flask_compress import Compress
Compress(app)
from pgadmin.misc.themes import themes
themes(app)
@app.context_processor
def inject_blueprint():
"""

6
web/pgadmin/about/static/js/AboutComponent.jsx
View File

@ -10,9 +10,9 @@
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
import React, { useEffect, useState, useRef } from 'react';
import { Box, Grid, InputLabel } from '@material-ui/core';
import { Box, Grid, InputLabel } from '@mui/material';
import { DefaultButton } from '../../../static/js/components/Buttons';
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@mui/styles';
import { InputText } from '../../../static/js/components/FormComponents';
import getApiInstance from '../../../static/js/api_instance';
import { copyToClipboard } from '../../../static/js/clipboard';
@ -141,7 +141,7 @@ export default function AboutComponent() {
}}>{copyText}</DefaultButton>
</Box>
<Box flexGrow="1" paddingTop="1px">
<InputText style={{height: '100%'}} controlProps={{multiline: true}} inputStyle={{resize: 'none'}}
<InputText style={{height: '100%'}} controlProps={{multiline: true}} inputStyle={{resize: 'none', height: '100%'}}
value={aboutData.settings}/>
</Box>
</Box>

3
web/pgadmin/authenticate/mfa/tests/utils.py
View File

@ -53,7 +53,6 @@ def init_dummy_auth_class():
def test_create_dummy_app(name=__name__):
import os
import pgadmin
from pgadmin.misc.themes import themes
def index():
return Response("<html><body>logged in</body></html>")
@ -88,8 +87,6 @@ def test_create_dummy_app(name=__name__):
app.register_logout_hook = types.MethodType(__dummy_logout_hook, app)
themes(app)
return app

6
web/pgadmin/browser/__init__.py
View File

@ -474,10 +474,13 @@ def utils():
snippets = []
prefs = Preferences.module('paths')
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')
@ -539,6 +542,7 @@ 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,

12
web/pgadmin/browser/server_groups/servers/static/scss/_servers.scss
View File

@ -1,12 +0,0 @@
.bg-model-duplicate {
@extend .bg-warning-light;
}
.icon-server-connecting {
background-image: $loader-icon-small !important;
background-repeat: no-repeat;
background-size: 18px !important;
align-content: center;
vertical-align: middle;
height: 1.3em;
}

41
web/pgadmin/browser/server_groups/servers/templates/servers/password.html
View File

@ -1,41 +0,0 @@
<form name="frmPassword" id="frmPassword" style="height: 100%; width: 100%" onsubmit="return false;">
<div>
<div><span class="font-weight-bold" >
{% if username %}
{{ _('Please enter the password for the user \'{0}\' to connect the server - "{1}"').format(username,
server_label) }}
{% else %}
{{ _('Please enter the password for the user to connect the server - "{0}"').format(server_label) }}
{% endif %}
</span></div>
<div class="input-group row py-2">
<label for="password" class="col-sm-2 col-form-label" aria-hidden="true">{{ _('Password') }}</label>
<div class="col-sm-10">
<input id="password" class="form-control" name="password" type="password" autocomplete="new-password">
</div>
</div>
<div class="save-password-div input-group row py-2">
<span class="col-sm-2 col-form-label">&nbsp;</span>
<div class="col-sm-10">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="save_password" name="save_password" type="checkbox"
{% if not allow_save_password %}disabled{% endif %}
>
<label class="custom-control-label" for="save_password">{{ _('Save Password') }}</label>
</div>
</div>
</div>
{% if errmsg %}
<div class='pg-prop-status-bar p-0'>
<div class="error-in-footer">
<div class="d-flex px-2 py-1">
<div class="pr-2">
<i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
</div>
<div class="alert-text" role="alert">{{ errmsg }}</div>
</div>
</div>
</div>
{% endif %}
</div>
</form>

62
web/pgadmin/browser/server_groups/servers/templates/servers/tunnel_password.html
View File

@ -1,62 +0,0 @@
<form name="frmPassword" id="frmPassword" onsubmit="return false;">
<div class="m-1">
{% if prompt_tunnel_password %}
{% if tunnel_identity_file %}
<div><label class="font-weight-bold" for="tunnel_password">{{ _('SSH Tunnel password for the identity file \'{0}\' to connect the server "{1}"').format(tunnel_identity_file, tunnel_host) }}</label></div>
{% else %}
<div><label class="font-weight-bold" for="tunnel_password">{{ _('SSH Tunnel password for the user \'{0}\' to connect the server "{1}"').format(tunnel_username, tunnel_host) }}</label></div>
{% endif %}
<div class="input-group py-2">
<div class="w-100">
<input id="tunnel_password" class="form-control" name="tunnel_password" type="password">
</div>
</div>
<div class="save-password-div input-group py-2">
<div class="w-100">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="save_tunnel_password" name="save_tunnel_password" type="checkbox"
{% if not allow_save_tunnel_password %}disabled{% endif %}
>
<label class="custom-control-label" for="save_tunnel_password" class="ml-1">{{ _('Save Password') }}</label>
</div>
</div>
</div>
{% endif %}
{% if prompt_password %}
<div><label class="font-weight-bold" for="password">
{% if service %}
{{ _('Database server password for the user to connect the server "{0}"').format(server_label) }}
{% else %}
{{ _('Database server password for the user \'{0}\' to connect the server "{1}"').format(username, server_label) }}
{% endif %}
</label></div>
<div class="input-group py-2">
<div class="w-100">
<input id="password" class="form-control" name="password" type="password">
</div>
</div>
<div class="save-password-div input-group py-2">
<div class="w-100">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="save_password" name="save_password" type="checkbox"
{% if not allow_save_password %}disabled{% endif %}
>
<label class="custom-control-label" for="save_password" class="ml-1">{{ _('Save Password') }}</label>
</div>
</div>
</div>
{% endif %}
{% if errmsg %}
<div class='pg-prop-status-bar p-0'>
<div class="error-in-footer">
<div class="d-flex px-2 py-1">
<div class="pr-2">
<i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
</div>
<div class="alert-text" role="alert">{{ errmsg }}</div>
</div>
</div>
</div>
{% endif %}
</div>
</form>

2
web/pgadmin/browser/static/js/node.js
View File

@ -664,7 +664,7 @@ define('pgadmin.browser.node', [
t = pgBrowser.tree,
i = input.item || t.selected(),
d = i ? t.itemData(i) : undefined;
pgBrowser.psql.psql_tool(d, i, true);
pgAdmin.Tools.Psql.openPsqlTool(d, i);
},
// Logic to change the server background colour

65
web/pgadmin/browser/static/scss/_browser.scss
View File

@ -1,65 +0,0 @@
.browser-tab-bar {
padding-left: 5px;
padding-top: 5px;
background-color: $color-gray-lighter;
}
code,
kbd,
pre,
samp {
font-family: $font-family-editor !important;
}
.sql-editor-grid-container {
font-family: $font-family-primary !important;
}
.select2-btn-container {
padding: 3px 0px;
background-color: $color-primary;
margin-bottom: 3px;
}
.pg-sp-container {
position: absolute;
min-width: 100%;
min-height: 100%;
background: $loading-bg;
z-index: 1056;
top: 0;
.pg-sp-content {
position: absolute;
width: 100%;
top: 40%;
}
}
.pg-sp-icon {
background: $loader-icon center center no-repeat;
height: 75px;
width: 100%;
text-align: center;
}
.pg-sp-text {
font-size: 20px;
text-align: center;
color: $loading-fg;
}
.pg-toolbar-btn {
margin-left: 0.25rem;
border-style: solid;
border-width: 1px;
font-size: 1.15em;
color: $color-fg;
border-color: $border-color;
background-color: $color-secondary;
}
.pg-toolbar-psql {
padding-top: 0em;
font-size: inherit;
align-items: center;
}

51
web/pgadmin/browser/static/scss/_wizard.scss
View File

@ -1,51 +0,0 @@
.wizard-header {
padding: 6px!important;
min-height: $title-height;
max-height: $title-height;
background-color: $alert-header-bg;
font-size: $font-size-base;
font-weight: bold;
color: $alert-header-fg;
overflow: hidden;
white-space: nowrap;
border-radius: 0rem;
border-top-left-radius: $panel-border-radius;
border-top-right-radius: $panel-border-radius;
border-bottom: none;
}
.wizard-content {
position: absolute;
overflow: auto;
top: $title-height;
bottom: $footer-height-calc;
left: 0;
right: 0;
}
.pgadmin-wizard .wizard-buttons {
border-top: $panel-border;
padding: $footer-padding
}
/* match the footer */
.pgadmin-wizard .wizard-footer {
min-height: $footer-min-height;
border: none;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin: 0;
}
/* Error message css */
.pgadmin-wizard .error_msg_div {
background: $color-bg;
font-size: 13px;
}
.pgadmin-wizard .error_msg_div p {
background: $color-bg;
color: $color-danger;
}

1
web/pgadmin/browser/templates/browser/js/utils.js
View File

@ -87,6 +87,7 @@ define('pgadmin.browser.utils',
pgBrowser.utils = {
layout: '{{ layout }}',
theme: '{{ theme }}',
pg_help_path: '{{ pg_help_path }}',
tabSize: '{{ editor_tab_size }}',
wrapCode: '{{ editor_wrap_code }}' == 'True',

17
web/pgadmin/dashboard/static/js/Dashboard.jsx
View File

@ -12,13 +12,13 @@ import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
import PgTable from 'sources/components/PgTable';
import { InputCheckbox } from '../../../static/js/components/FormComponents';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import url_for from 'sources/url_for';
import Graphs from './Graphs';
import { Box, Tab, Tabs } from '@material-ui/core';
import { Box, Tab, Tabs } from '@mui/material';
import { PgIconButton } from '../../../static/js/components/Buttons';
import CancelIcon from '@material-ui/icons/Cancel';
import StopSharpIcon from '@material-ui/icons/StopSharp';
import CancelIcon from '@mui/icons-material/Cancel';
import StopSharpIcon from '@mui/icons-material/StopSharp';
import WelcomeDashboard from './WelcomeDashboard';
import ActiveQuery from './ActiveQuery.ui';
import _ from 'lodash';
@ -62,7 +62,7 @@ const useStyles = makeStyles((theme) => ({
},
cardHeader: {
padding: '0.25rem 0.5rem',
fontWeight: 'bold',
fontWeight: 'bold !important',
backgroundColor: theme.otherVars.tableBg,
borderBottom: '1px solid',
borderBottomColor: theme.otherVars.borderColor,
@ -96,7 +96,7 @@ const useStyles = makeStyles((theme) => ({
height: '100%',
width: '100%',
minHeight: '400px',
padding: '8px'
padding: '4px'
},
mainTabs: {
...theme.mixins.panelBorder.all,
@ -165,7 +165,8 @@ function Dashboard({
const prefStore = usePreferences();
const preferences = _.merge(
usePreferences().getPreferencesForModule('dashboards'),
usePreferences().getPreferencesForModule('graphs')
usePreferences().getPreferencesForModule('graphs'),
usePreferences().getPreferencesForModule('misc')
);
if (!did) {
@ -294,7 +295,6 @@ function Dashboard({
}
);
}}
color="default"
aria-label="Terminate Session?"
title={gettext('Terminate Session?')}
></PgIconButton>
@ -363,7 +363,6 @@ function Dashboard({
}
);
}}
color="default"
aria-label="Cancel the query"
title={gettext('Cancel the active query')}
></PgIconButton>

11
web/pgadmin/dashboard/static/js/Graphs.jsx
View File

@ -16,7 +16,7 @@ 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 '@material-ui/core';
import { Grid } from '@mui/material';
export const X_AXIS_LENGTH = 75;
@ -221,6 +221,7 @@ export default function Graphs({preferences, sid, did, pageVisible, enablePoll=t
showTooltip={preferences['graph_mouse_track']}
showDataPoints={preferences['graph_data_points']}
lineBorderWidth={preferences['graph_line_border_width']}
theme={preferences['theme']}
isDatabase={did > 0}
isTest={isTest}
/>
@ -249,11 +250,12 @@ export function GraphsWrapper(props) {
showDataPoints: props.showDataPoints,
showTooltip: props.showTooltip,
lineBorderWidth: props.lineBorderWidth,
}), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
theme: props.theme,
}), [props.showTooltip, props.showDataPoints, props.lineBorderWidth, props.theme]);
return (
<>
<Grid container spacing={1}>
<Grid container spacing={0.5}>
<Grid item md={6}>
<ChartContainer id='sessions-graph' title={props.isDatabase ? gettext('Database sessions') : gettext('Server sessions')}
datasets={props.sessionStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
@ -266,7 +268,7 @@ export function GraphsWrapper(props) {
</ChartContainer>
</Grid>
</Grid>
<Grid container spacing={1} style={{marginTop: '4px', marginBottom: '4px'}}>
<Grid container spacing={0.5} style={{marginTop: '4px', marginBottom: '4px'}}>
<Grid item md={4}>
<ChartContainer id='ti-graph' title={gettext('Tuples in')} datasets={props.tiStats.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.tiStats} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
@ -301,6 +303,7 @@ GraphsWrapper.propTypes = {
showTooltip: PropTypes.bool.isRequired,
showDataPoints: PropTypes.bool.isRequired,
lineBorderWidth: PropTypes.number.isRequired,
theme: PropTypes.string,
isDatabase: PropTypes.bool.isRequired,
isTest: PropTypes.bool,
};

2
web/pgadmin/dashboard/static/js/Replication/index.jsx
View File

@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import { Box } from '@material-ui/core';
import { Box } from '@mui/material';
import React, { useEffect, useState } from 'react';
import gettext from 'sources/gettext';

12
web/pgadmin/dashboard/static/js/SystemStats/CPU.jsx
View File

@ -11,10 +11,10 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import {getGCD, getEpoch} from 'sources/utils';
import ChartContainer from '../components/ChartContainer';
import { Box, Grid } from '@material-ui/core';
import { Box, Grid } from '@mui/material';
import { DATA_POINT_SIZE } from 'sources/chartjs';
import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
import {useInterval, usePrevious} from 'sources/custom_hooks';
@ -263,19 +263,19 @@ export function CPUWrapper(props) {
}), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
return (
<>
<Grid container spacing={1} className={classes.container}>
<Grid item md={6} sm={12}>
<Grid container spacing={0.5} className={classes.container}>
<Grid item md={6}>
<ChartContainer id='cu-graph' title={gettext('CPU usage')} datasets={props.cpuUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.cpuUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
</ChartContainer>
</Grid>
<Grid item md={6} sm={12}>
<Grid item md={6} >
<ChartContainer id='la-graph' title={gettext('Load average')} datasets={props.loadAvgInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.loadAvgInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} />
</ChartContainer>
</Grid>
</Grid>
<Grid container spacing={1} className={classes.fixedContainer}>
<Grid container spacing={0.5} className={classes.fixedContainer}>
<div className={classes.tableContainer}>
<PgTable
className={classes.autoResizer}

12
web/pgadmin/dashboard/static/js/SystemStats/Memory.jsx
View File

@ -10,10 +10,10 @@ import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import {getGCD, getEpoch} from 'sources/utils';
import ChartContainer from '../components/ChartContainer';
import { Box, Grid } from '@material-ui/core';
import { Box, Grid } from '@mui/material';
import { DATA_POINT_SIZE } from 'sources/chartjs';
import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
import {useInterval, usePrevious} from 'sources/custom_hooks';
@ -266,21 +266,21 @@ export function MemoryWrapper(props) {
return (
<>
<Grid container spacing={1} className={classes.container}>
<Grid item md={6} sm={12}>
<Grid container spacing={0.5} className={classes.container}>
<Grid item md={6}>
<ChartContainer id='m-graph' title={gettext('Memory')} datasets={props.memoryUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.memoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={toPrettySize}/>
</ChartContainer>
</Grid>
<Grid item md={6} sm={12}>
<Grid item md={6}>
<ChartContainer id='sm-graph' title={gettext('Swap memory')} datasets={props.swapMemoryUsageInfo.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.swapMemoryUsageInfo} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options}
valueFormatter={toPrettySize}/>
</ChartContainer>
</Grid>
</Grid>
<Grid container spacing={1} className={classes.fixedContainer}>
<Grid container spacing={0.5} className={classes.fixedContainer}>
<div className={classes.tableContainer}>
<PgTable
className={classes.autoResizer}

8
web/pgadmin/dashboard/static/js/SystemStats/Storage.jsx
View File

@ -9,11 +9,11 @@
import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import url_for from 'sources/url_for';
import {getGCD, getEpoch} from 'sources/utils';
import ChartContainer from '../components/ChartContainer';
import { Grid } from '@material-ui/core';
import { Grid } from '@mui/material';
import { DATA_POINT_SIZE } from 'sources/chartjs';
import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
import {useInterval, usePrevious} from 'sources/custom_hooks';
@ -521,14 +521,14 @@ export function StorageWrapper(props) {
</Grid>
</Grid>
</Grid>
<Grid container spacing={1} className={classes.container}>
<Grid container spacing={0.5} className={classes.container}>
{Object.keys(props.ioInfo).map((drive, index) => (
<Grid key={`disk-${index}`} container spacing={1} className={classes.container}>
<div className={classes.driveContainer}>
<Grid container spacing={1} className={classes.driveContainerHeader}>
<div className={classes.containerHeaderText}>{gettext(drive)}</div>
</Grid>
<Grid container spacing={1} className={classes.driveContainerBody}>
<Grid container spacing={0.5} className={classes.driveContainerBody}>
{Object.keys(props.ioInfo[drive]).map((type, innerKeyIndex) => (
<Grid key={`${type}-${innerKeyIndex}`} item md={4} sm={6}>
<ChartContainer id={`io-graph-${type}`} title={type.endsWith('_bytes_rw') ? gettext('Data transfer'): type.endsWith('_total_rw') ? gettext('I/O operations count'): type.endsWith('_time_rw') ? gettext('Time spent in I/O operations'):''} datasets={transformData(props.ioInfo[drive][type], props.ioRefreshRate).datasets} errorMsg={props.errorMsg} isTest={props.isTest}>

14
web/pgadmin/dashboard/static/js/SystemStats/Summary.jsx
View File

@ -9,12 +9,12 @@
import React, { useState, useEffect, useRef, useReducer, useMemo } from 'react';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import url_for from 'sources/url_for';
import getApiInstance from 'sources/api_instance';
import {getGCD, getEpoch} from 'sources/utils';
import ChartContainer from '../components/ChartContainer';
import { Grid } from '@material-ui/core';
import { Grid } from '@mui/material';
import { DATA_POINT_SIZE } from 'sources/chartjs';
import StreamingChart from '../../../../static/js/components/PgChart/StreamingChart';
import {useInterval, usePrevious} from 'sources/custom_hooks';
@ -267,21 +267,21 @@ function SummaryWrapper(props) {
}), [props.showTooltip, props.showDataPoints, props.lineBorderWidth]);
return (
<>
<Grid container spacing={1} className={classes.container}>
<Grid item md={6} sm={12}>
<Grid container spacing={0.5} className={classes.container}>
<Grid item md={6}>
<div className={classes.tableContainer}>
<div className={classes.containerHeader}>{gettext('OS information')}</div>
<SummaryTable data={props.osStats} />
</div>
</Grid>
<Grid item md={6} sm={12} className={classes.chartContainer}>
<Grid item md={6}className={classes.chartContainer}>
<ChartContainer id='hpc-graph' title={gettext('Process & handle count')} datasets={props.processHandleCount.datasets} errorMsg={props.errorMsg} isTest={props.isTest}>
<StreamingChart data={props.processHandleCount} dataPointSize={DATA_POINT_SIZE} xRange={X_AXIS_LENGTH} options={options} showSecondAxis={true} />
</ChartContainer>
</Grid>
</Grid>
<Grid container spacing={1} className={classes.container}>
<Grid item md={6} sm={12}>
<Grid container spacing={0.5} className={classes.container}>
<Grid item md={6}>
<div className={classes.tableContainer}>
<div className={classes.containerHeader}>{gettext('CPU information')}</div>
<SummaryTable data={props.cpuStats} />

52
web/pgadmin/dashboard/static/js/WelcomeDashboard.jsx
View File

@ -11,10 +11,10 @@ import React from 'react';
import gettext from 'sources/gettext';
import _ from 'lodash';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import pgAdmin from 'sources/pgadmin';
import PgAdminLogo from './PgAdminLogo';
import { Link } from '@material-ui/core';
import { Link } from '@mui/material';
const useStyles = makeStyles((theme) => ({
emptyPanel: {
@ -83,7 +83,22 @@ const useStyles = makeStyles((theme) => ({
flex: '1 1 auto',
minHeight: '1px',
padding: '0.5rem !important',
},
welcomeLogo: {
width: '400px',
'& .app-name': {
fill: theme.otherVars.colorBrand
},
'& .app-name-underline': {
stroke: theme.palette.text.primary
},
'& .app-tagline': {
fill: theme.palette.text.primary
}
},
dashboardIcon: {
color: theme.otherVars.colorBrand
},
}));
@ -126,7 +141,9 @@ export default function WelcomeDashboard({ pgBrowser }) {
<div className={classes.card}>
<div className={classes.cardHeader}>{gettext('Welcome')}</div>
<div className={classes.cardBody}>
<div className={classes.welcomeLogo}>
<PgAdminLogo />
</div>
<h4>
{gettext('Feature rich')} | {gettext('Maximises PostgreSQL')}{' '}
| {gettext('Open Source')}{' '}
@ -148,22 +165,24 @@ export default function WelcomeDashboard({ pgBrowser }) {
<div className={classes.rowContent}>
<div className={classes.dashboardLink}>
<Link onClick={() => { AddNewServer(pgBrowser); }} className={classes.link}>
<div className={classes.dashboardIcon}>
<span
className="fa fa-4x dashboard-icon fa-server"
className="fa fa-4x fa-server"
aria-hidden="true"
></span>
<br />
</div>
{gettext('Add New Server')}
</Link>
</div>
<div className={classes.dashboardLink}>
<Link onClick={() => pgAdmin.Preferences.show()} className={classes.link}>
<div className={classes.dashboardIcon}>
<span
id="mnu_preferences"
className="fa fa-4x dashboard-icon fa-cogs"
className="fa fa-4x fa-cogs"
aria-hidden="true"
></span>
<br />
</div>
{gettext('Configure pgAdmin')}
</Link>
</div>
@ -184,21 +203,23 @@ export default function WelcomeDashboard({ pgBrowser }) {
target="postgres_help"
className={classes.link}
>
<div className={classes.dashboardIcon}>
<span
className="fa fa-4x dashboard-icon dashboard-pg-doc"
className="fa fa-4x dashboard-pg-doc"
aria-hidden="true"
></span>
<br />
</div>
{gettext('PostgreSQL Documentation')}
</a>
</div>
<div className={classes.gettingStartedLink}>
<a href="https://www.pgadmin.org" target="pgadmin_website" className={classes.link}>
<div className={classes.dashboardIcon}>
<span
className="fa fa-4x dashboard-icon fa-globe"
className="fa fa-4x fa-globe"
aria-hidden="true"
></span>
<br />
</div>
{gettext('pgAdmin Website')}
</a>
</div>
@ -208,11 +229,12 @@ export default function WelcomeDashboard({ pgBrowser }) {
target="planet_website"
className={classes.link}
>
<div className={classes.dashboardIcon}>
<span
className="fa fa-4x dashboard-icon fa-book"
className="fa fa-4x fa-book"
aria-hidden="true"
></span>
<br />
</div>
{gettext('Planet PostgreSQL')}
</a>
</div>
@ -222,11 +244,12 @@ export default function WelcomeDashboard({ pgBrowser }) {
target="postgres_website"
className={classes.link}
>
<div className={classes.dashboardIcon}>
<span
className="fa fa-4x dashboard-icon fa-users"
className="fa fa-4x fa-users"
aria-hidden="true"
></span>
<br />
</div>
{gettext('Community Support')}
</a>
</div>
@ -244,4 +267,3 @@ export default function WelcomeDashboard({ pgBrowser }) {
WelcomeDashboard.propTypes = {
pgBrowser: PropTypes.object.isRequired
};

3
web/pgadmin/dashboard/static/js/components/ChartContainer.jsx
View File

@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import PropTypes from 'prop-types';
import { Box, Card, CardContent, CardHeader, makeStyles } from '@material-ui/core';
import { Box, Card, CardContent, CardHeader } from '@mui/material';
import { makeStyles } from '@mui/styles';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

4
web/pgadmin/dashboard/static/js/components/RefreshButtons.jsx
View File

@ -9,9 +9,9 @@
import React from 'react';
import gettext from 'sources/gettext';
import CachedOutlinedIcon from '@material-ui/icons/CachedOutlined';
import CachedOutlinedIcon from '@mui/icons-material/CachedOutlined';
import { PgIconButton } from '../../../../static/js/components/Buttons';
import { makeStyles } from '@material-ui/core';
import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) => ({

3
web/pgadmin/dashboard/static/js/components/SectionContainer.jsx
View File

@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import PropTypes from 'prop-types';
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles((theme) => ({

90
web/pgadmin/dashboard/static/scss/_dashboard.scss
View File

@ -1,90 +0,0 @@
.dashboard-icon {
color: $color-brand;
}
.dashboard-container {
padding-top: math.div($grid-gutter-width, 2);
padding-bottom: math.div($grid-gutter-width, 2);
min-height: 100%;
}
.dashboard-row {
margin-bottom: math.div($grid-gutter-width, 2);
}
.graph-error {
background-color: inherit;
padding-top: 20px
}
.grid-error {
background-color: $color-gray-lighter;
padding-top: 20px;
padding-bottom: 40px;
}
.grid-container {
width: 100%;
overflow: auto;
border-radius: $card-border-radius;
border: $panel-border;
}
.dashboard-link a {
cursor: pointer;
color: $color-fg;
}
.dashboard-graph {
& .legend {
font-size: $tree-font-size;
& .legend-value {
font-weight: normal;
margin-left: 0.25rem;
& .legend-label {
margin-left: 0.25rem;
}
}
}
& .dashboard-graph-body {
padding: 0.25rem 0.5rem;
height: 165px;
& .flotr-labels {
color: $color-fg !important;
}
& .flotr-legend {
border: none !important;
padding: 0.25rem 0.5rem;
& .flotr-legend-label {
color: $color-fg !important;
padding-left: 0.25rem;
}
& .flotr-legend-color-box>div {
border: none !important;
&>div {
border: none !important;
}
}
& .flotr-legend-bg {
border-radius: $border-radius;
}
}
}
}
.welcome-logo {
width: 400px;
& .app-name {
fill: $color-brand;
}
& .app-name-underline {
stroke: $color-fg;
}
& .app-tagline {
fill: $color-fg;
}
}

8
web/pgadmin/misc/bgprocess/static/js/BgProcessNotify.jsx
View File

@ -1,9 +1,10 @@
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React from 'react';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
import clsx from 'clsx';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
import { BgProcessManagerProcessState } from './BgProcessConstants';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
@ -99,4 +100,3 @@ export function processCompleted(desc, process_state, onViewProcess) {
null
);
}

9
web/pgadmin/misc/bgprocess/static/js/ProcessDetails.jsx
View File

@ -10,17 +10,18 @@
import React, { useState, useMemo } from 'react';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import { MESSAGE_TYPE, NotifierMessage } from '../../../../static/js/components/FormComponents';
import { BgProcessManagerProcessState } from './BgProcessConstants';
import { DefaultButton, PgIconButton } from '../../../../static/js/components/Buttons';
import HighlightOffRoundedIcon from '@material-ui/icons/HighlightOffRounded';
import AccessTimeRoundedIcon from '@material-ui/icons/AccessTimeRounded';
import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
import AccessTimeRoundedIcon from '@mui/icons-material/AccessTimeRounded';
import { useInterval } from '../../../../static/js/custom_hooks';
import getApiInstance from '../../../../static/js/api_instance';
import pgAdmin from 'sources/pgadmin';
import FolderSharedRoundedIcon from '@material-ui/icons/FolderSharedRounded';
import FolderSharedRoundedIcon from '@mui/icons-material/FolderSharedRounded';
const useStyles = makeStyles((theme)=>({

12
web/pgadmin/misc/bgprocess/static/js/Processes.jsx
View File

@ -11,15 +11,15 @@ import React, { useCallback, useEffect, useMemo } from 'react';
import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import { BgProcessManagerEvents, BgProcessManagerProcessState } from './BgProcessConstants';
import { PgButtonGroup, PgIconButton } from '../../../../static/js/components/Buttons';
import CancelIcon from '@material-ui/icons/Cancel';
import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
import DeleteIcon from '@material-ui/icons/Delete';
import HelpIcon from '@material-ui/icons/HelpRounded';
import CancelIcon from '@mui/icons-material/Cancel';
import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
import DeleteIcon from '@mui/icons-material/Delete';
import HelpIcon from '@mui/icons-material/HelpRounded';
import url_for from 'sources/url_for';
import { Box } from '@material-ui/core';
import { Box } from '@mui/material';
import { usePgAdmin } from '../../../../static/js/BrowserComponent';
import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
import ErrorBoundary from '../../../../static/js/helpers/ErrorBoundary';

4
web/pgadmin/misc/cloud/static/js/CloudWizard.jsx
View File

@ -10,8 +10,8 @@
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
import React from 'react';
import { Box, Paper } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { Box, Paper } from '@mui/material';
import { makeStyles } from '@mui/styles';
import Wizard from '../../../../static/js/helpers/wizard/Wizard';
import WizardStep from '../../../../static/js/helpers/wizard/WizardStep';
import {FormFooterMessage, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';

2
web/pgadmin/misc/cloud/static/js/aws.js
View File

@ -16,7 +16,7 @@ import url_for from 'sources/url_for';
import getApiInstance from '../../../../static/js/api_instance';
import { isEmptyString } from 'sources/validators';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import gettext from 'sources/gettext';
const useStyles = makeStyles(() =>

2
web/pgadmin/misc/cloud/static/js/azure.js
View File

@ -18,7 +18,7 @@ import getApiInstance from '../../../../static/js/api_instance';
import { CloudWizardEventsContext } from './CloudWizard';
import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
import gettext from 'sources/gettext';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles(() =>
({

8
web/pgadmin/misc/cloud/static/js/cloud_components.jsx
View File

@ -8,16 +8,16 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import { ToggleButton, ToggleButtonGroup } from '@mui/material';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import { DefaultButton, PrimaryButton } from '../../../../static/js/components/Buttons';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
import { getAWSSummary } from './aws';
import {getAzureSummary} from './azure';
import { getBigAnimalSummary } from './biganimal';
import { commonTableStyles } from '../../../../static/js/Theme';
import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
import { Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
import clsx from 'clsx';
import gettext from 'sources/gettext';
import { getGoogleSummary } from './google';

2
web/pgadmin/misc/cloud/static/js/google.js
View File

@ -18,7 +18,7 @@ import getApiInstance from '../../../../static/js/api_instance';
import { CloudWizardEventsContext } from './CloudWizard';
import {MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
import gettext from 'sources/gettext';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
const useStyles = makeStyles(() =>
({

2
web/pgadmin/misc/dependencies/static/js/Dependencies.jsx
View File

@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import { getURL } from '../../../static/utils/utils';
import Loader from 'sources/components/Loader';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

2
web/pgadmin/misc/dependents/static/js/Dependents.jsx
View File

@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import { getURL } from '../../../static/utils/utils';
import Loader from 'sources/components/Loader';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

27
web/pgadmin/misc/file_manager/static/js/components/FileManager.jsx
View File

@ -6,21 +6,22 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { DefaultButton, PgButtonGroup, PgIconButton, PrimaryButton } from '../../../../../static/js/components/Buttons';
import { useModalStyles } from '../../../../../static/js/helpers/ModalProvider';
import CloseIcon from '@material-ui/icons/CloseRounded';
import FolderSharedIcon from '@material-ui/icons/FolderShared';
import FolderIcon from '@material-ui/icons/Folder';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import HomeRoundedIcon from '@material-ui/icons/HomeRounded';
import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import MoreHorizRoundedIcon from '@material-ui/icons/MoreHorizRounded';
import SyncRoundedIcon from '@material-ui/icons/SyncRounded';
import CreateNewFolderRoundedIcon from '@material-ui/icons/CreateNewFolderRounded';
import GetAppRoundedIcon from '@material-ui/icons/GetAppRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import FolderSharedIcon from '@mui/icons-material/FolderShared';
import FolderIcon from '@mui/icons-material/Folder';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import MoreHorizRoundedIcon from '@mui/icons-material/MoreHorizRounded';
import SyncRoundedIcon from '@mui/icons-material/SyncRounded';
import CreateNewFolderRoundedIcon from '@mui/icons-material/CreateNewFolderRounded';
import GetAppRoundedIcon from '@mui/icons-material/GetAppRounded';
import gettext from 'sources/gettext';
import clsx from 'clsx';
import { FormFooterMessage, InputSelectNonSearch, InputText, MESSAGE_TYPE } from '../../../../../static/js/components/FormComponents';
@ -709,7 +710,7 @@ export default function FileManager({params, closeModal, onOK, onCancel, sharedS
<PgIconButton title={gettext('Go Back')} onClick={async ()=>{
await openDir(fmUtilsObj.dirname(fmUtilsObj.currPath), selectedSS);
}} icon={<ArrowUpwardRoundedIcon />} disabled={!fmUtilsObj.dirname(fmUtilsObj.currPath) || showUploader} />
<InputText className={classes.inputFilename}
<InputText size="small" className={classes.inputFilename}
data-label="file-path"
controlProps={{maxLength: null}}
onKeyDown={async (e)=>{

11
web/pgadmin/misc/file_manager/static/js/components/GridView.jsx
View File

@ -6,12 +6,13 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, {useState, useEffect, useRef, useLayoutEffect} from 'react';
import FolderIcon from '@material-ui/icons/Folder';
import DescriptionIcon from '@material-ui/icons/Description';
import LockRoundedIcon from '@material-ui/icons/LockRounded';
import StorageRoundedIcon from '@material-ui/icons/StorageRounded';
import FolderIcon from '@mui/icons-material/Folder';
import DescriptionIcon from '@mui/icons-material/Description';
import LockRoundedIcon from '@mui/icons-material/LockRounded';
import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';

10
web/pgadmin/misc/file_manager/static/js/components/ListView.jsx
View File

@ -6,13 +6,13 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import { makeStyles } from '@material-ui/core';
import { makeStyles } from '@mui/styles';
import React, { useRef, useEffect } from 'react';
import PgReactDataGrid from '../../../../../static/js/components/PgReactDataGrid';
import FolderIcon from '@material-ui/icons/Folder';
import StorageRoundedIcon from '@material-ui/icons/StorageRounded';
import DescriptionIcon from '@material-ui/icons/Description';
import LockRoundedIcon from '@material-ui/icons/LockRounded';
import FolderIcon from '@mui/icons-material/Folder';
import StorageRoundedIcon from '@mui/icons-material/StorageRounded';
import DescriptionIcon from '@mui/icons-material/Description';
import LockRoundedIcon from '@mui/icons-material/LockRounded';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';

5
web/pgadmin/misc/file_manager/static/js/components/Uploader.jsx
View File

@ -7,8 +7,9 @@
//
//////////////////////////////////////////////////////////////
import React, { useCallback, useReducer, useEffect, useMemo } from 'react';
import { Box, List, ListItem, makeStyles } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/CloseRounded';
import { Box, List, ListItem } from '@mui/material';
import { makeStyles } from '@mui/styles';
import CloseIcon from '@mui/icons-material/CloseRounded';
import { PgIconButton } from '../../../../../static/js/components/Buttons';
import gettext from 'sources/gettext';
import {useDropzone} from 'react-dropzone';

10
web/pgadmin/misc/properties/CollectionNodeProperties.jsx
View File

@ -8,17 +8,17 @@
//////////////////////////////////////////////////////////////
import React from 'react';
import getApiInstance from 'sources/api_instance';
import { makeStyles } from '@material-ui/core/styles';
import { Box } from '@material-ui/core';
import { makeStyles } from '@mui/styles';
import { Box } from '@mui/material';
import { generateCollectionURL } from '../../browser/static/js/node_ajax';
import gettext from 'sources/gettext';
import PgTable from 'sources/components/PgTable';
import Theme from 'sources/Theme';
import PropTypes from 'prop-types';
import { PgButtonGroup, PgIconButton } from '../../static/js/components/Buttons';
import DeleteIcon from '@material-ui/icons/Delete';
import DeleteSweepIcon from '@material-ui/icons/DeleteSweep';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import DeleteIcon from '@mui/icons-material/Delete';
import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
import Loader from 'sources/components/Loader';
import { evalFunc } from '../../static/js/utils';

3
web/pgadmin/misc/properties/Properties.jsx
View File

@ -15,7 +15,8 @@ import { BROWSER_PANELS } from '../../browser/static/js/constants';
import ObjectNodeProperties from './ObjectNodeProperties';
import EmptyPanelMessage from '../../static/js/components/EmptyPanelMessage';
import gettext from 'sources/gettext';
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { usePgAdmin } from '../../static/js/BrowserComponent';
import PropTypes from 'prop-types';
import _ from 'lodash';

2
web/pgadmin/misc/sql/static/js/SQL.jsx
View File

@ -12,7 +12,7 @@ import { generateNodeUrl } from '../../../../browser/static/js/node_ajax';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import CodeMirror from '../../../../static/js/components/ReactCodeMirror';
import Loader from 'sources/components/Loader';
import withStandardTabInfo from '../../../../static/js/helpers/withStandardTabInfo';

2
web/pgadmin/misc/statistics/static/js/Statistics.jsx
View File

@ -13,7 +13,7 @@ import PgTable from 'sources/components/PgTable';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import getApiInstance from 'sources/api_instance';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import { getURL } from '../../../static/utils/utils';
import Loader from 'sources/components/Loader';
import EmptyPanelMessage from '../../../../static/js/components/EmptyPanelMessage';

47
web/pgadmin/misc/themes/__init__.py
View File

@ -4,47 +4,18 @@ from pgadmin.utils.preferences import Preferences
def get_all_themes():
# Themes file is copied in generated directory
theme_file_path = os.path.join(
os.path.dirname(os.path.realpath(__file__)),
'../../static/js/generated',
'pgadmin.themes.json'
)
all_themes = {
"standard": {
"disp_name": "Standard",
"cssfile": "pgadmin",
"preview_img": "standard_preview.png"
},
"dark": {
"disp_name": "dark",
"preview_img": "dark_preview.png"
},
"high_contrast": {
"disp_name": "high_contrast",
"preview_img": "high_contrast_preview.png"
},
}
}
try:
all_themes.update(json.load(open(theme_file_path)))
except Exception:
pass
return all_themes
def themes(app):
@app.context_processor
def inject_theme_func():
def get_theme_css():
all_themes = get_all_themes()
theme_css = all_themes['standard']['cssfile'] + '.css'
theme = 'standard'
try:
misc_preference = Preferences.module('misc')
theme = misc_preference.preference('theme').get()
if theme in all_themes:
theme_css = all_themes[theme]['cssfile'] + '.css'
except Exception:
# Let the default theme go if exception occurs
pass
return theme_css, theme
return {
'get_theme_css': get_theme_css,
}

14
web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
View File

@ -12,14 +12,14 @@ import _ from 'lodash';
import url_for from 'sources/url_for';
import React, { useEffect, useMemo } from 'react';
import { FileType } from 'react-aspen';
import { Box } from '@material-ui/core';
import { Box } from '@mui/material';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import SchemaView from '../../../../static/js/SchemaView';
import getApiInstance from '../../../../static/js/api_instance';
import CloseSharpIcon from '@material-ui/icons/CloseSharp';
import HelpIcon from '@material-ui/icons/HelpRounded';
import SaveSharpIcon from '@material-ui/icons/SaveSharp';
import CloseSharpIcon from '@mui/icons-material/CloseSharp';
import HelpIcon from '@mui/icons-material/HelpRounded';
import SaveSharpIcon from '@mui/icons-material/SaveSharp';
import clsx from 'clsx';
import pgAdmin from 'sources/pgadmin';
import { DefaultButton, PgIconButton, PrimaryButton } from '../../../../static/js/components/Buttons';
@ -528,10 +528,6 @@ export default function PreferencesComponent({ ...props }) {
}
function checkRefreshRequired(pref, requires_refresh) {
if (pref.name == 'theme') {
requires_refresh = true;
}
if (pref.name == 'user_language') {
requires_refresh = true;
}

15
web/pgadmin/preferences/static/scss/_preferences.scss
View File

@ -1,15 +0,0 @@
.preferences_tree{
padding: 0px;
padding-top: 2px;
height: 100%;
overflow: auto;
border-right: $panel-border;
}
.btn-checkbox {
padding: $btn-checkbox-padding;
& input[type="checkbox"]{
margin-top: 0px !important;
}
}

5
web/pgadmin/static/css/style.css
View File

@ -9,3 +9,8 @@
@import 'node_modules/@simonwep/pickr/dist/themes/monolith.min.css';
@import 'node_modules/uplot/dist/uPlot.min.css';
@import 'node_modules/rc-dock/dist/rc-dock.css';
@import 'node_modules/@szhsin/react-menu/dist/index.css';
@import './pgadmin.css';

0
web/pgadmin/static/scss/resources/dark/dark_preview.png → web/pgadmin/static/img/dark_preview.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

0
web/pgadmin/static/scss/resources/high_contrast/high_contrast_preview.png → web/pgadmin/static/img/high_contrast_preview.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

0
web/pgadmin/static/scss/resources/standard_preview.png → web/pgadmin/static/img/standard_preview.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

7
web/pgadmin/static/js/AppMenuBar.jsx
View File

@ -1,9 +1,10 @@
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { useState, useEffect } from 'react';
import { PrimaryButton } from './components/Buttons';
import { PgMenu, PgMenuDivider, PgMenuItem, PgSubMenu } from './components/Menu';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import AccountCircleRoundedIcon from '@material-ui/icons/AccountCircleRounded';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
import { usePgAdmin } from '../../static/js/BrowserComponent';
const useStyles = makeStyles((theme)=>({

2
web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx
View File

@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import { makeStyles } from '@material-ui/core';
import { makeStyles } from '@mui/styles';
import React from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';

2
web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx
View File

@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import { makeStyles } from '@material-ui/core';
import { makeStyles } from '@mui/styles';
import React from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';

8
web/pgadmin/static/js/Dialogs/ConfirmSaveContent.jsx
View File

@ -1,11 +1,11 @@
import React from 'react';
import { useModalStyles } from '../helpers/ModalProvider';
import gettext from 'sources/gettext';
import { Box } from '@material-ui/core';
import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../components/Buttons';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import HTMLReactParser from 'html-react-parser';
import PropTypes from 'prop-types';

6
web/pgadmin/static/js/Dialogs/ConnectServerContent.jsx
View File

@ -9,10 +9,10 @@
import React, { useState, useRef, useEffect, useLayoutEffect } from 'react';
import gettext from 'sources/gettext';
import { Box } from '@material-ui/core';
import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../components/Buttons';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import PropTypes from 'prop-types';
import { useModalStyles } from '../helpers/ModalProvider';
import { FormFooterMessage, InputCheckbox, InputText, MESSAGE_TYPE } from '../components/FormComponents';

10
web/pgadmin/static/js/Dialogs/MasterPasswordContent.jsx
View File

@ -12,11 +12,11 @@ import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
import { Box } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/CloseRounded';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import HelpIcon from '@material-ui/icons/Help';
import { Box } from '@mui/material';
import CloseIcon from '@mui/icons-material/CloseRounded';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import HelpIcon from '@mui/icons-material/Help';
import { DefaultButton, PrimaryButton, PgIconButton } from '../components/Buttons';
import { useModalStyles } from '../helpers/ModalProvider';

6
web/pgadmin/static/js/Dialogs/NamedRestoreContent.jsx
View File

@ -9,10 +9,10 @@
import React, { useState, useRef, useEffect } from 'react';
import gettext from 'sources/gettext';
import { Box } from '@material-ui/core';
import { Box } from '@mui/material';
import { DefaultButton, PrimaryButton } from '../components/Buttons';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import PropTypes from 'prop-types';
import { useModalStyles } from '../helpers/ModalProvider';
import { InputText } from '../components/FormComponents';

6
web/pgadmin/static/js/Dialogs/RenameTabContent.jsx
View File

@ -11,9 +11,9 @@ import _ from 'lodash';
import React, { useState, useRef, useMemo } from 'react';
import PropTypes from 'prop-types';
import { Box } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import { Box } from '@mui/material';
import CloseIcon from '@mui/icons-material/CloseRounded';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import gettext from 'sources/gettext';

6
web/pgadmin/static/js/Dialogs/UrlDialogContent.jsx
View File

@ -12,9 +12,9 @@ import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import url_for from 'sources/url_for';
import { Box } from '@material-ui/core';
import CloseIcon from '@material-ui/icons/CloseRounded';
import HelpIcon from '@material-ui/icons/Help';
import { Box } from '@mui/material';
import CloseIcon from '@mui/icons-material/CloseRounded';
import HelpIcon from '@mui/icons-material/Help';
import { DefaultButton, PgIconButton } from '../components/Buttons';
import { useModalStyles } from '../helpers/ModalProvider';

6
web/pgadmin/static/js/Explain/Analysis.jsx
View File

@ -6,12 +6,12 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@mui/styles';
import React from 'react';
import clsx from 'clsx';
import _ from 'lodash';
import ArrowRightAltIcon from '@material-ui/icons/ArrowRightAlt';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
import HTMLReactParse from 'html-react-parser';
import { commonTableStyles } from '../Theme';
import PropTypes from 'prop-types';

3
web/pgadmin/static/js/Explain/ExplainStatistics.jsx
View File

@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
import React from 'react';
import { Box, Grid, makeStyles } from '@material-ui/core';
import { Box, Grid } from '@mui/material';
import { makeStyles } from '@mui/styles';
import gettext from 'sources/gettext';
import { commonTableStyles } from '../Theme';
import clsx from 'clsx';

15
web/pgadmin/static/js/Explain/Graphical.jsx
View File

@ -6,19 +6,20 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import { Box, Card, CardContent, CardHeader, makeStyles, useTheme } from '@material-ui/core';
import { Box, Card, CardContent, CardHeader, useTheme } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, {useEffect} from 'react';
import _ from 'lodash';
import { PgButtonGroup, PgIconButton } from '../components/Buttons';
import ZoomInIcon from '@material-ui/icons/ZoomIn';
import ZoomOutIcon from '@material-ui/icons/ZoomOut';
import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
import SaveAltIcon from '@material-ui/icons/SaveAlt';
import ZoomInIcon from '@mui/icons-material/ZoomIn';
import ZoomOutIcon from '@mui/icons-material/ZoomOut';
import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
import SaveAltIcon from '@mui/icons-material/SaveAlt';
import gettext from 'sources/gettext';
import ReactDOMServer from 'react-dom/server';
import url_for from 'sources/url_for';
import { downloadSvg } from './svg_download';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import { commonTableStyles } from '../Theme';
import clsx from 'clsx';
import PropTypes from 'prop-types';
@ -406,7 +407,7 @@ export default function Graphical({planData, ctx}) {
return (
<Box ref={graphContainerRef} height="100%" width="100%" overflow="auto">
<Box position="absolute" top="4px" left="4px" gridGap="4px" display="flex">
<Box position="absolute" top="4px" left="4px" gap="4px" display="flex">
<PgButtonGroup size="small">
<PgIconButton title={gettext('Zoom in')} icon={<ZoomInIcon />} onClick={()=>onCmdClick('in')}/>
<PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon />} onClick={()=>onCmdClick()}/>

4
web/pgadmin/static/js/Explain/index.jsx
View File

@ -6,14 +6,14 @@
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
import { Box, Tab, Tabs } from '@material-ui/core';
import { Box, Tab, Tabs } from '@mui/material';
import React from 'react';
import _ from 'lodash';
import Graphical from './Graphical';
import TabPanel from '../components/TabPanel';
import gettext from 'sources/gettext';
import ImageMapper from './ImageMapper';
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@mui/styles';
import Analysis from './Analysis';
import ExplainStatistics from './ExplainStatistics';
import PropTypes from 'prop-types';

11
web/pgadmin/static/js/PgTreeView/index.jsx
View File

@ -1,15 +1,16 @@
import { Checkbox, makeStyles } from '@material-ui/core';
import { Checkbox } from '@mui/material';
import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import gettext from 'sources/gettext';
import React, { useEffect, useRef } from 'react';
import { Tree } from 'react-arborist';
import AutoSizer from 'react-virtualized-auto-sizer';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import PropTypes from 'prop-types';
import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox';
import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
import EmptyPanelMessage from '../components/EmptyPanelMessage';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
const useStyles = makeStyles((theme) => ({

12
web/pgadmin/static/js/QuickSearch/index.jsx
View File

@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
import React, {useRef,useState, useEffect} from 'react';
import { CircularProgress, Typography, makeStyles } from '@material-ui/core';
import { CircularProgress, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import {useDelayDebounce} from 'sources/custom_hooks';
import {onlineHelpSearch} from './online_help';
@ -103,14 +104,7 @@ HelpArticleContents.propTypes = {
isMenuLoading: PropTypes.bool
};
const useModalStyles = makeStyles(() => ({
setTop: {
marginTop: '-20px',
}
}));
export default function QuickSearch({closeModal}) {
const modalClasses = useModalStyles();
const classes = useStyles();
const wrapperRef = useRef(null);
const [searchTerm, setSearchTerm] = useState('');
@ -266,7 +260,7 @@ export default function QuickSearch({closeModal}) {
return (
<div id='quick-search-container' onClick={setSearchTerm} onKeyDown={()=>{/* no need */}}></div>,
<div id='quick-search-container' ref={wrapperRef} className={clsx('test', modalClasses.setTop)} role="menu">
<div id='quick-search-container' ref={wrapperRef} role="menu">
<div>
<div>
<div style={{padding: '2px 2px 2px 2px'}}>

12
web/pgadmin/static/js/SchemaView/DataGridView.jsx
View File

@ -10,14 +10,14 @@
/* The DataGridView component is based on react-table component */
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { PgIconButton } from '../components/Buttons';
import AddIcon from '@material-ui/icons/AddOutlined';
import AddIcon from '@mui/icons-material/AddOutlined';
import { MappedCellControl } from './MappedControl';
import DragIndicatorRoundedIcon from '@material-ui/icons/DragIndicatorRounded';
import EditRoundedIcon from '@material-ui/icons/EditRounded';
import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
import DragIndicatorRoundedIcon from '@mui/icons-material/DragIndicatorRounded';
import EditRoundedIcon from '@mui/icons-material/EditRounded';
import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded';
import { useTable, useFlexLayout, useResizeColumns, useSortBy, useExpanded, useGlobalFilter } from 'react-table';
import clsx from 'clsx';
import PropTypes from 'prop-types';

6
web/pgadmin/static/js/SchemaView/FieldSetView.jsx
View File

@ -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 '@material-ui/core';
import { Box } from '@mui/material';
export default function FieldSetView({
value, schema={}, viewHelperProps, accessPath, dataDispatch, controlClassName, isDataGridForm=false, label, visible}) {
@ -101,7 +101,7 @@ export default function FieldSetView({
withContainer: false, controlGridBasis: 3
}));
viewFields.push(
<Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} gridRowGap="8px" flexWrap="wrap">
<Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} rowGap="8px" flexWrap="wrap">
{inlineComponents}
</Box>
);
@ -113,7 +113,7 @@ export default function FieldSetView({
}
if(inlineComponents?.length > 0) {
viewFields.push(
<Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} gridRowGap="8px" flexWrap="wrap">
<Box key={`ic-${inlineComponents[0].key}`} display="flex" className={controlClassName} rowGap="8px" flexWrap="wrap">
{inlineComponents}
</Box>
);

7
web/pgadmin/static/js/SchemaView/FormView.jsx
View File

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

21
web/pgadmin/static/js/SchemaView/index.jsx
View File

@ -8,16 +8,17 @@
//////////////////////////////////////////////////////////////
import React, { useCallback, useEffect, useMemo, useReducer, useRef, useState } from 'react';
import { Box, makeStyles, Accordion, AccordionSummary, AccordionDetails} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import SaveIcon from '@material-ui/icons/Save';
import PublishIcon from '@material-ui/icons/Publish';
import DoneIcon from '@material-ui/icons/Done';
import SettingsBackupRestoreIcon from '@material-ui/icons/SettingsBackupRestore';
import CloseIcon from '@material-ui/icons/Close';
import InfoIcon from '@material-ui/icons/InfoRounded';
import HelpIcon from '@material-ui/icons/HelpRounded';
import EditIcon from '@material-ui/icons/Edit';
import { Box, Accordion, AccordionSummary, AccordionDetails} from '@mui/material';
import { makeStyles } from '@mui/styles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import SaveIcon from '@mui/icons-material/Save';
import PublishIcon from '@mui/icons-material/Publish';
import DoneIcon from '@mui/icons-material/Done';
import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
import CloseIcon from '@mui/icons-material/Close';
import InfoIcon from '@mui/icons-material/InfoRounded';
import HelpIcon from '@mui/icons-material/HelpRounded';
import EditIcon from '@mui/icons-material/Edit';
import diffArray from 'diff-arrays-of-objects';
import _ from 'lodash';
import clsx from 'clsx';

5
web/pgadmin/static/js/SecurityPages/BasePage.jsx
View File

@ -1,4 +1,5 @@
import { Box, Button, darken, makeStyles } from '@material-ui/core';
import { Box, Button, darken } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useSnackbar } from 'notistack';
import React, { useEffect } from 'react';
import { MESSAGE_TYPE, NotifierMessage } from '../components/FormComponents';
@ -79,7 +80,7 @@ export default function BasePage({pageImage, title, children, messages}) {
}, [messages]);
return (
<Box className={classes.root}>
<Box display="flex" minWidth="80%" gridGap='40px' alignItems="center" padding="20px 80px">
<Box display="flex" minWidth="80%" gap="40px" alignItems="center" padding="20px 80px">
<Box flexGrow={1} height="80%" textAlign="center">
{pageImage}
</Box>

2
web/pgadmin/static/js/SecurityPages/LoginPage.jsx
View File

@ -1,4 +1,4 @@
import { Box, Icon } from '@material-ui/core';
import { Box, Icon } from '@mui/material';
import React, { useState } from 'react';
import LoginImage from '../../img/login.svg?svgr';
import { InputSelectNonSearch, InputText, MESSAGE_TYPE, NotifierMessage } from '../components/FormComponents';

4
web/pgadmin/static/js/SecurityPages/MfaRegisterPage.jsx
View File

@ -1,4 +1,4 @@
import { Box } from '@material-ui/core';
import { Box } from '@mui/material';
import React, { useState } from 'react';
import LoginImage from '../../img/login.svg?svgr';
import { FormNote, InputText } from '../components/FormComponents';
@ -74,7 +74,7 @@ export default function MfaRegisterPage({actionUrl, mfaList, nextUrl, mfaView, .
{mfaView ? <>
{mfaView.auth_method == 'email' && <EmailRegisterView mfaView={mfaView} />}
{mfaView.auth_method == 'authenticator' && <AuthenticatorRegisterView mfaView={mfaView} />}
<Box display="flex" gridGap="15px">
<Box display="flex" gap="15px">
<SecurityButton name="continue" value="Continue">{gettext('Continue')}</SecurityButton>
<DefaultButton type="submit" name="cancel" value="Cancel" style={{width: '100%'}}>{gettext('Cancel')}</DefaultButton>
</Box>

19
web/pgadmin/static/js/Theme/dark.js
View File

@ -8,8 +8,7 @@
//////////////////////////////////////////////////////////////
/* The dark theme */
import { createTheme } from '@material-ui/core/styles';
import { darken } from '@material-ui/core/styles/colorManipulator';
import { darken, createTheme} from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
@ -45,7 +44,7 @@ export default function(basicSettings) {
},
warning: {
main: '#eea236',
light: '#b18d5a',
light: '#74572e',
contrastText: '#fff',
},
info: {
@ -82,6 +81,7 @@ export default function(basicSettings) {
}
},
otherVars: {
colorBrand: '#1b71b5',
borderColor: '#4a4a4a',
inputBorderColor: '#6b6b6b',
inputDisabledBg: 'inherit',
@ -104,6 +104,11 @@ export default function(basicSettings) {
textMuted: '#8A8A8A',
erdCanvasBg: '#303030',
erdGridColor: '#444952',
scroll: {
baseColor: '#616161',
barBackgroundColor: '#61616133',
thumbBackground:'#616161b3'
},
schemaDiff: {
diffRowColor: '#807a48',
sourceRowColor: '#402025',
@ -132,6 +137,14 @@ export default function(basicSettings) {
guttersBg: '#303030',
guttersFg: '#8A8A8A',
},
tree: {
textFg: '#d4d4d4',
inputBg: '#212121',
fgHover: '#d4d4d4',
bgHover: '#303030',
textHoverFg: '#d4d4d4',
bgSelected: '#323E43',
}
}
});
}

20
web/pgadmin/static/js/Theme/high_contrast.js
View File

@ -8,18 +8,18 @@
//////////////////////////////////////////////////////////////
/* The dark theme */
import { createTheme } from '@material-ui/core/styles';
import { createTheme } from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
palette: {
default: {
main: 'transparent',
main: '#00000000',
contrastText: '#84d6ff',
borderColor: '#84d6ff',
disabledBorderColor: '#8B9CAD',
disabledContrastText: '#8B9CAD',
hoverMain: 'transparent',
hoverMain: '#00000000',
hoverContrastText: '#fff',
hoverBorderColor: '#fff',
},
@ -80,6 +80,7 @@ export default function(basicSettings) {
}
},
otherVars: {
colorBrand: '#84D6FF',
borderColor: '#A6B7C8',
inputBorderColor: '#6b6b6b',
inputDisabledBg: '#1F2932',
@ -102,6 +103,11 @@ export default function(basicSettings) {
textMuted: '#8b9cad',
erdCanvasBg: '#010B15',
erdGridColor: '#1F2932',
scroll: {
baseColor: '#C9D0D7',
barBackgroundColor: '#C9D0D733',
thumbBackground: '#C9D0D7B3'
},
schemaDiff: {
diffRowColor: '#CFC56E',
sourceRowColor: '#EE97A5',
@ -130,6 +136,14 @@ export default function(basicSettings) {
guttersBg: '#2d3a48',
guttersFg: '#8b9cac',
},
tree: {
textFg: '#ffffff',
inputBg: '#010B15',
fgHover: '#ffffff',
bgHover: '#ffffff',
textHoverFg: '#010B15',
bgSelected: '#84D6FF',
}
}
});
}

394
web/pgadmin/static/js/Theme/index.jsx
View File

@ -12,18 +12,24 @@
* custom themes info will come here.
*/
import React, { useMemo } from 'react';
import { createTheme, ThemeProvider, makeStyles } from '@material-ui/core/styles';
import React, { useEffect, useMemo, useState } from 'react';
import { makeStyles } from '@mui/styles';
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 getDarkTheme from './dark';
import getHightContrastTheme from './high_contrast';
import { CssBaseline } from '@material-ui/core';
import { CssBaseline } from '@mui/material';
import pickrOverride from './overrides/pickr.override';
import uplotOverride from './overrides/uplot.override';
import rcdockOverride from './overrides/rcdock.override';
import cmOverride from './overrides/codemirror.override';
import jsonEditorOverride from './overrides/jsoneditor.override';
import pgadminOverride from './overrides/pgadmin.classes.override';
import reactAspenOverride from './overrides/reactaspen.override';
import usePreferences from '../../../preferences/static/js/store';
/* Common settings across all themes */
let basicSettings = createTheme();
@ -31,6 +37,7 @@ basicSettings = createTheme(basicSettings, {
typography: {
fontSize: 14,
htmlFontSize: 14,
fontFamilyIcon: '"Font Awesome 5 Free"',
fontFamily: [
'Roboto',
'"Helvetica Neue"',
@ -52,20 +59,76 @@ basicSettings = createTheme(basicSettings, {
disabledOpacity: 0.32,
}
},
overrides: {
MuiTabs: {
root: {
minHeight: 0,
transitions: {
create: () => 'none',
},
zIndex: {
modal: 3001,
},
components: {
MuiTextField: {
defaultProps: {
variant: 'outlined',
}
},
PrivateTabIndicator: {
MuiButton: {
defaultProps: {
disableTouchRipple: true,
variant: 'outlined',
},
styleOverrides: {
root: {
height: '2px',
transition: basicSettings.transitions.create(['all'], {duration: '150ms'}),
textTransform: 'none',
padding: '2px 10px',
fontSize: 'inherit',
'&.Mui-disabled': {
opacity: 0.60,
},
'&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
height: '28px',
fontSize: '0.875rem',
'& .MuiSvgIcon-root': {
height: '1.2rem',
},
},
},
contained: {
boxShadow: 'none',
'&:hover': {
boxShadow: 'none',
}
},
outlined: {
padding: '3px 9px',
},
startIcon: {
marginRight: basicSettings.spacing(0.5),
},
}
},
MuiIconButton: {
defaultProps: {
size: 'small',
disableTouchRipple: true,
}
},
MuiAccordion: {
defaultProps: {
defaultExpanded: true,
},
styleOverrides: {
root: {
boxShadow: 'none',
}
}
},
MuiTab: {
defaultProps: {
textColor: 'inherit',
},
styleOverrides: {
root: {
lineHeight: '1.75',
textTransform: 'none',
minHeight: 0,
padding: '3px 10px',
@ -86,37 +149,44 @@ basicSettings = createTheme(basicSettings, {
textTransform: 'none',
opacity: 1,
}
}
},
MuiButton: {
MuiCheckbox: {
defaultProps: {
disableTouchRipple: true,
}
},
MuiDialogTitle: {
defaultProps: {
}
},
MuiCardHeader: {
defaultProps: {
disableTypography: true,
}
},
MuiListItem: {
defaultProps: {
disableGutters: true,
}
},
MuiTabs: {
styleOverrides: {
root: {
textTransform: 'none',
padding: '2px 10px',
fontSize: 'inherit',
'&.Mui-disabled': {
opacity: 0.60,
},
'&.MuiButton-sizeSmall, &.MuiButton-outlinedSizeSmall, &.MuiButton-containedSizeSmall': {
height: '28px',
fontSize: '0.875rem',
'& .MuiSvgIcon-root': {
height: '1.2rem',
minHeight: 0,
}
}
},
},
contained: {
boxShadow: 'none',
'&:hover': {
boxShadow: 'none',
PrivateTabIndicator: {
styleOverrides: {
root: {
height: '2px',
transition: basicSettings.transitions.create(['all'], {duration: '150ms'}),
}
}
},
outlined: {
padding: '2px 10px',
},
startIcon: {
marginRight: basicSettings.spacing(0.5),
},
},
MuiOutlinedInput: {
styleOverrides: {
multiline: {
padding: '0px',
},
@ -136,20 +206,17 @@ basicSettings = createTheme(basicSettings, {
marginDense: {
height: '28px',
}
},
MuiAccordion: {
root: {
boxShadow: 'none',
}
},
MuiAccordionSummary: {
styleOverrides: {
root: {
minHeight: 0,
'&.Mui-expanded': {
minHeight: 0,
},
padding: basicSettings.spacing(0, 1),
fontWeight: basicSettings.typography.fontWeightBold,
fontWeight: basicSettings.typography.fontWeightBold
},
content: {
margin: basicSettings.spacing(0.5),
@ -157,23 +224,29 @@ basicSettings = createTheme(basicSettings, {
margin: basicSettings.spacing(0.5),
}
},
expandIcon: {
expandIconWrapper: {
order: -1,
}
}
},
MuiAccordionDetails: {
styleOverrides: {
root: {
padding: basicSettings.spacing(1),
}
}
},
MuiFormControlLabel: {
styleOverrides: {
root: {
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
}
}
},
MuiFormHelperText: {
styleOverrides: {
root: {
fontSize: '1em',
},
@ -181,13 +254,22 @@ basicSettings = createTheme(basicSettings, {
marginLeft: 0,
marginRight: 0,
}
}
},
MuiTypography: {
styleOverrides: {
root: {
fontSize: '0.875rem',
lineHeight: '1.43em',
letterSpacing: '0.01071em',
},
body1: {
fontSize: '1em',
}
}
},
MuiDialog: {
styleOverrides: {
paper: {
margin: 0,
},
@ -195,24 +277,35 @@ basicSettings = createTheme(basicSettings, {
alignItems: 'flex-start',
margin: '5% auto',
}
}
},
MuiTooltip: {
defaultProps: {
arrow: true,
},
styleOverrides: {
popper: {
top: 0,
zIndex: 9999,
},
}
},
MuiMenu: {
styleOverrides: {
list: {
padding: '0',
}
}
},
MuiMenuItem: {
styleOverrides: {
root: {
fontSize: 14,
}
}
},
MuiSelect: {
styleOverrides: {
selectMenu: {
minHeight: 'unset',
},
@ -222,44 +315,6 @@ basicSettings = createTheme(basicSettings, {
}
}
}
},
transitions: {
create: () => 'none',
},
zIndex: {
modal: 3001,
},
props: {
MuiTextField: {
variant: 'outlined',
},
MuiButton: {
disableTouchRipple: true,
},
MuiIconButton: {
size: 'small',
disableTouchRipple: true,
},
MuiAccordion: {
defaultExpanded: true,
},
MuiTab: {
textColor: 'inherit',
},
MuiCheckbox: {
disableTouchRipple: true,
},
MuiDialogTitle: {
disableTypography: true,
},
MuiCardHeader: {
disableTypography: true,
},
MuiListItem: {
disableGutters: true,
},
MuiTooltip: {
arrow: true,
}
},
});
@ -303,11 +358,36 @@ function getFinalTheme(baseTheme) {
}, baseTheme);
return createTheme({
overrides: {
components: {
MuiCssBaseline: {
'@global': {
styleOverrides: {
body: {
fontFamily: baseTheme.typography.fontFamily,
fontSize: '0.875rem',
lineHeight: '1.43em',
letterSpacing: '0.01071em',
height: '100vh',
},
'::-webkit-scrollbar,::-webkit-scrollbar-corner': {
width: '1rem !important',
height: '1rem !important',
background: baseTheme.otherVars.scroll.barBackgroundColor
},
'::-webkit-scrollbar-thumb': {
border: '0.25rem solid transparent',
borderRadius: '0.5rem',
background: baseTheme.otherVars.scroll.thumbBackground + ' !important',
backgroundClip: 'content-box !important',
},
'::-webkit-scrollbar-thumb:hover': {
border: '0.25rem solid transparent',
background: baseTheme.otherVars.scroll.baseColor + ' !important',
backgroundClip: 'content-box !important'
},
'input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus': {
webkitTextFillColor : baseTheme.palette.text.primary,
webkitBoxShadow: '0 0 0px 1000px '+ baseTheme.palette.primary.light +' inset',
transition: 'backgroundColor 5000s ease-in-out 0s',
},
ul: {
margin: 0,
@ -320,6 +400,8 @@ function getFinalTheme(baseTheme) {
},
textarea: {
fontFamily: 'inherit',
color: baseTheme.palette.text.primary,
backgroundColor: baseTheme.palette.background.default
},
iframe: {
margin: 0,
@ -334,27 +416,43 @@ function getFinalTheme(baseTheme) {
...pickrOverride(baseTheme),
...uplotOverride(baseTheme),
...rcdockOverride(baseTheme),
...cmOverride(baseTheme)
...cmOverride(baseTheme),
...jsonEditorOverride(baseTheme),
...pgadminOverride(baseTheme),
...reactAspenOverride(baseTheme)
},
},
MuiOutlinedInput: {
styleOverrides: {
root: {
lineHeight: '1.1876em',
'&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
borderColor: baseTheme.otherVars.inputBorderColor,
},
'.MuiButtonGroup-root &': {
borderRadius: 0,
'& .MuiOutlinedInput-notchedOutline': {
borderRadius: 0,
}
},
},
notchedOutline: {
borderColor: baseTheme.otherVars.inputBorderColor,
}
}
},
MuiFormControlLabel: {
styleOverrides: {
label: {
'&.Mui-disabled': {
color: baseTheme.palette.text.muted
}
}
}
},
MuiTabs: {
styleOverrides: {
root: {
backgroundColor: baseTheme.otherVars.headerBg,
...mixins.panelBorder.bottom
@ -362,17 +460,22 @@ function getFinalTheme(baseTheme) {
indicator: {
backgroundColor: baseTheme.otherVars.activeColor,
}
}
},
MuiFormLabel: {
styleOverrides: {
root: {
color: baseTheme.palette.text.primary,
fontSize: baseTheme.typography.fontSize,
whiteSpace: 'normal !important'
},
asterisk: {
color: baseTheme.palette.error.main,
}
}
},
MuiInputBase: {
styleOverrides: {
root: {
backgroundColor: baseTheme.palette.background.default,
textOverflow: 'ellipsis',
@ -401,55 +504,86 @@ function getFinalTheme(baseTheme) {
outline: '0 !important',
}
},
sizeSmall: {
height: '28px',
},
inputSizeSmall: {
height: '16px', // + 12px of padding = 28px;
}
}
},
MuiSelect: {
styleOverrides: {
icon: {
color: baseTheme.palette.text.primary,
'&.Mui-disabled': {
color: baseTheme.palette.text.muted,
}
},
}
},
MuiNativeSelect:{
styleOverrides: {
icon: {
color: baseTheme.palette.text.primary,
'&.Mui-disabled': {
color: baseTheme.palette.text.muted,
}
}
}
},
MuiIconButton: {
styleOverrides: {
root: {
color: baseTheme.palette.text.primary,
'&$disabled': {
'&.Mui-disabled': {
color: 'abc',
}
}
}
},
MuiAccordion: {
styleOverrides: {
root: {
...mixins.panelBorder,
'&.Mui-expanded': {
margin: '8px 0px',
},
}
}
},
MuiAccordionSummary: {
styleOverrides: {
root: {
...mixins.panelBorder.bottom,
backgroundColor: baseTheme.otherVars.headerBg,
},
content: {
margin: '4px',
},
expandIconWrapper: {
color: baseTheme.palette.text.primary,
}
}
},
MuiToggleButtonGroup: {
styleOverrides: {
groupedHorizontal : {
'&:not(:first-child)': {
'&:not(:first-of-type)': {
borderLeft: 'abc'
}
}
}
},
MuiSwitch: {
styleOverrides: {
root: {
width: 54,
height: 28,
padding: '7px 12px',
},
colorPrimary: {
'&$disabled': {
'&.Mui-disabled': {
color: 'abc',
'& + .MuiSwitch-track': {
backgroundColor: 'abc',
@ -458,22 +592,18 @@ function getFinalTheme(baseTheme) {
},
switchBase: {
padding: baseTheme.spacing(0.5),
'&$disabled': {
'&.Mui-disabled': {
color: 'abc',
'& + .MuiSwitch-track': {
opacity: baseTheme.palette.action.disabledOpacity,
}
},
'&.Mui-checked': {
color: baseTheme.palette.success.main,
transform: 'translateX(24px)',
'& .MuiSwitch-thumb': {
border: 0
}
},
'&.Mui-checked + .MuiSwitch-track': {
backgroundColor: baseTheme.palette.success.light,
},
}
},
thumb: {
border: '1px solid ' + baseTheme.otherVars.inputBorderColor
@ -481,8 +611,10 @@ function getFinalTheme(baseTheme) {
track: {
backgroundColor: baseTheme.otherVars.toggleBtnBg
}
}
},
MuiCheckbox: {
styleOverrides: {
root: {
padding: '0px',
color: baseTheme.otherVars.inputBorderColor,
@ -493,42 +625,51 @@ function getFinalTheme(baseTheme) {
color: baseTheme.palette.checkbox.disabled
}
}
}
},
MuiToggleButton: {
styleOverrides: {
root: {
padding: 'abc',
paddingTop: '2px',
paddingBottom: '2px',
paddingRight: baseTheme.spacing(2.5),
paddingLeft: baseTheme.spacing(0.5),
color: 'abc',
'&:hover':{
backgroundColor: 'abc',
},
'&$selected': {
color: 'abc',
backgroundColor: 'abc',
'&:hover':{
backgroundColor: 'abc',
}
}
},
label: {
textTransform: 'initial',
'&:hover':{
backgroundColor: 'abc',
},
'&.Mui-selected': {
color: [baseTheme.palette.primary.contrastText,'!important'],
backgroundColor: baseTheme.palette.primary.main,
'&:hover':{
//backgroundColor: 'abc',
backgroundColor: baseTheme.palette.primary.hoverMain,
borderColor: baseTheme.palette.primary.hoverBorderColor,
}
}
},
}
},
MuiFormHelperText: {
styleOverrides: {
root: {
color: baseTheme.palette.text.muted,
},
}
},
MuiDialogContent: {
styleOverrides: {
root: {
padding: 0,
userSelect: 'text',
}
}
},
MuiDialogTitle: {
styleOverrides: {
root: {
fontSize: '0.875rem',
fontWeight: 'bold',
padding: '5px 10px',
cursor: 'move',
@ -536,24 +677,30 @@ function getFinalTheme(baseTheme) {
alignItems: 'center',
...mixins.panelBorder.bottom,
}
}
},
MuiCardHeader: {
styleOverrides: {
root: {
padding: '4px 8px',
backgroundColor: baseTheme.otherVars.cardHeaderBg,
fontWeight: 'bold',
...mixins.panelBorder.bottom,
}
}
},
MuiCardContent: {
styleOverrides: {
root: {
padding: 0,
'&:last-child': {
paddingBottom: 0,
}
}
}
},
MuiListItem: {
styleOverrides: {
root: {
color: baseTheme.palette.text.primary,
backgroundColor: baseTheme.palette.background.default,
@ -566,7 +713,7 @@ function getFinalTheme(baseTheme) {
...mixins.panelBorder.bottom,
borderTopColor: 'transparent',
cursor: 'pointer',
'&$selected': {
'&.Mui-selected': {
backgroundColor: baseTheme.palette.primary.light,
borderColor: baseTheme.palette.primary.main,
color: basicSettings.palette.getContrastText(baseTheme.palette.primary.light),
@ -575,8 +722,10 @@ function getFinalTheme(baseTheme) {
}
},
}
}
},
MuiTooltip: {
styleOverrides: {
tooltip: {
fontSize: '0.7rem',
color: baseTheme.palette.background.default,
@ -585,29 +734,37 @@ function getFinalTheme(baseTheme) {
arrow: {
color: baseTheme.palette.text.primary,
}
}
},
MuiTab: {
styleOverrides: {
root: {
'&$selected': {
'&.MuiTab-textColorPrimary':{
color: baseTheme.palette.text.primary,
},
'&.Mui-selected': {
color: baseTheme.otherVars.activeColor,
},
}
}
},
MuiBackdrop: {
styleOverrides: {
root: {
backgroundColor: baseTheme.otherVars.loader.backgroundColor,
}
}
}
}
}, baseTheme);
}
/* Theme wrapper used by DOM containers to apply theme */
/* In future, this will be moved to App container */
export default function Theme(props) {
const theme = useMemo(()=>{
/* We'll remove this in future, we can get the value from preferences directly */
let themeName = document.querySelector('link[data-theme]')?.getAttribute('data-theme');
export default function Theme({children}) {
const prefStore = usePreferences();
const [themeName, setThemeName] = useState(prefStore.getPreferencesForModule('misc')?.theme);
const themeObj = useMemo(()=>{
let baseTheme = getStandardTheme(basicSettings);
switch(themeName) {
case 'dark':
@ -618,11 +775,20 @@ export default function Theme(props) {
break;
}
return getFinalTheme(baseTheme);
}, []);
}, [themeName]);
useEffect(() => usePreferences.subscribe(
state => {
setThemeName(state.getPreferencesForModule('misc').theme);
}
), []);
return (
<ThemeProvider theme={theme}>
<ThemeProvider theme={themeObj}>
<CssBaseline />
{props.children}
<LocalizationProvider dateAdapter={AdapterDateFns} >
{children}
</LocalizationProvider>
</ThemeProvider>
);
}

4
web/pgadmin/static/js/Theme/overrides/codemirror.override.js
View File

@ -109,8 +109,8 @@ export default function cmOverride(theme) {
fontSize: '0.9em',
'& li[aria-selected="true"]': {
backgroundColor: theme.otherVars.treeBgSelected + '!important',
color: theme.otherVars.treeFgSelected + '!important',
backgroundColor: theme.otherVars.tree.treeBgSelected + '!important',
color: theme.otherVars.tree.treeFgSelected + '!important',
},
'& .pg-cm-autocomplete-icon': {

442
web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js Normal file
View File

@ -0,0 +1,442 @@
/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2024, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
export default function jsonEditorOverride(theme) {
return {
'.jsoneditor-menu a.jsoneditor-poweredBy': {
display: 'none',
},
'.jsoneditor': {
borderColor: theme.otherVars.borderColor,
/* Validation Bar */
'& .jsoneditor-validation-errors': {
backgroundColor: theme.palette.error.light + ' !important',
color: theme.palette.text.primary,
border: `1px solid ${theme.palette.error.main}`,
},
'& .jsoneditor-text-errors': {
width: '100%',
borderCollapse: 'collapse',
borderColor: theme.palette.default.borderColor,
},
'& .jsoneditor-text-errors tr, & .jsoneditor-text-errors td, & .jsoneditor-text-errors td pre, & .jsoneditor-text-errors tr.parse-error': {
backgroundColor: theme.palette.error.light + ' !important',
color: theme.palette.text.primary,
}
},
/* Navigation Bar */
'.jsoneditor-navigation-bar': {
fontFamily: theme.typography.fontFamily + ' !important' ,
backgroundColor: theme.palette.default.main,
color: theme.palette.text.primary + ' !important',
borderBottom: `1px solid ${theme.otherVars.borderColor}`,
},
/* Menu Bar*/
'.jsoneditor-menu': {
backgroundColor: theme.palette.grey[400],
border: `1px solid ${theme.otherVars.borderColor}`
},
/* Menu Bar buttons*/
'.jsoneditor-menu>button': {
fontFamily: '"Font Awesome 5 Free" !important',
fontSize: '.925rem !important',
lineHeight: '1.5rem',
backgroundImage: 'none !important',
borderRadius: '0.25em',
borderColor: theme.palette.default.borderColor + ' !important',
opacity: 1,
backgroundColor: theme.palette.default.main + ' !important',
color: theme.palette.text.primary + ' !important',
fontWeight: 'normal !important',
/* Over rides icons */
'&.jsoneditor-format::before': {
content: '"\\f03c"',
fontWeight: '600 !important',
},
'&.jsoneditor-expand-all::before': {
content: '"\\f424"',
fontWeight: '600 !important',
},
'&.jsoneditor-collapse-all::before': {
content: '"\\f422"',
fontWeight: '600 !important',
},
'&.jsoneditor-redo::before': {
content: '"\\f01e"',
fontWeight: '600 !important',
},
'&.jsoneditor-undo::before': {
content: '"\\f0e2"',
fontWeight: '600 !important',
},
'&.jsoneditor-compact::before': {
content: '"\\f066"',
fontWeight: '600 !important',
},
'&.jsoneditor-sort::before': {
content: '"\\f160"',
fontWeight: '600 !important',
},
'&.jsoneditor-repair::before': {
content: '"\\f0ad"',
fontWeight: '600 !important',
},
'&.jsoneditor-transform::before': {
content: '"\\f0b0"',
fontWeight: '600 !important',
},
},
/* Undo redo buttons */
'.jsoneditor-menu>.jsoneditor-modes>button:disabled, .jsoneditor-menu>button:disabled': {
color: theme.palette.text.primary + ' !important',
opacity: 0.65,
borderColor:theme.palette.grey[400],
borderRadius: '0.25em',
backgroundColor: theme.palette.default.main + ' !important',
},
/* Mode drop-down */
'.jsoneditor-menu>.jsoneditor-modes>button:active, .jsoneditor-menu>.jsoneditor-modes>button:focus, .jsoneditor-menu>.jsoneditor-modes>button': {
fontFamily: theme.typography.fontFamily + ' !important',
fontSize: '.925rem !important',
lineHeight: '1.5rem',
backgroundImage: 'none !important',
borderRadius: '0.25em',
borderColor: theme.palette.default.borderColor + ' !important',
opacity: 1,
backgroundColor: theme.palette.default.main + ' !important',
color: theme.palette.text.primary + ' !important',
fontWeight: 'normal !important',
},
'.jsoneditor-contextmenu': {
'& .jsoneditor-icon': {
backgroundImage: 'none',
},
'& .jsoneditor-text': {
padding: '4px 4px 4px 5px'
},
'& .jsoneditor-menu': {
border:`1px solid ${theme.palette.primary.light}`,
backgroundColor: theme.palette.default.main + ' !important',
color: theme.palette.text.primary + ' !important',
},
'& .jsoneditor-menu button.jsoneditor-expand': {
height: '0px',
backgroundColor: theme.palette.background.default + ' !important'
},
'&.jsoneditor-menu li ul': {
padding: 0,
border: `1px solid ${theme.palette.primary.light}`,
},
'& .jsoneditor-separator': {
height: 0,
borderTop: `1px solid ${theme.palette.primary.light}`,
paddingTop: '5px',
marginTop: '5px'
},
/* Mode drop-down options */
'& .jsoneditor-menu button, & .jsoneditor-separator':{
fontFamily: theme.typography.fontFamily + ' !important',
backgroundColor: theme.palette.default.main + ' !important',
color: theme.palette.text.primary + ' !important',
border: 'none'
},
/* Drop-down hovered*/
'& .jsoneditor-menu li button':{
/* Drop-down hovered*/
'&:hover':{
backgroundColor: theme.palette.primary.main + ' !important',
borderColor: theme.palette.primary.main + ' !important',
color: theme.palette.primary.contrastText + ' !important',
},
/* Drop-down selected*/
'&.jsoneditor-selected, &.jsoneditor-selected:focus, &.jsoneditor-selected:hover': {
backgroundColor: theme.palette.primary.main + ' !important',
borderColor: theme.palette.primary.main + ' !important',
color: theme.palette.primary.contrastText + ' !important',
}
}
},
/* Search Box*/
'.jsoneditor-frame, .jsoneditor-search input': {
color: theme.palette.text.primary,
backgroundColor: theme.palette.default.main,
},
/* Set expand icon to none*/
'div.jsoneditor-tree button.jsoneditor-button:focus': {
backgroundColor: theme.palette.text.primary + ' !important',
outline: 'none',
},
/* Search Box results */
'.jsoneditor-results': {
color: theme.palette.text.primary + ' !important',
},
/* Ace editor Setting */
/* Ace editor numbers */
'.ace-jsoneditor':{
...theme.mixins.fontSourceCode,
lineHeight: '1.5 !important',
fontSize: '0.875em',
color: theme.palette.text.primary + ' !important',
'& .ace_gutter':{
backgroundColor : theme.palette.grey[400],
color: theme.palette.text.primary
},
/* Ace editor code background */
'& .ace_scroller':{
backgroundColor: theme.palette.background.default,
},
/* Ace editor hide indent guide */
'& .ace_indent-guide': {
background: 'none'
},
'& .ace_variable': {
color: theme.palette.text.primary + ' !important',
},
/* Ace editorfonts */
'&.ace_editor': {
backgroundColor: theme.palette.background.default + ' !important',
color: theme.palette.text.primary + ' !important',
},
'& .ace_text-layer':{
color: theme.palette.text.primary + ' !important',
},
/* Hi-light line in code */
'& .ace_marker-layer .ace_active-line':{
backgroundColor: theme.otherVars.editor.selectionBg,
border: 0,
borderRadius: '0.25em',
},
'& .ace_gutter-active-line': {
backgroundColor: theme.palette.grey[200],
},
'& .ace_marker-layer .ace_selected-word, & .ace_marker-layer .ace_selection': {
border: `1px solid ${theme.palette.primary.light}`,
},
},
'div.jsoneditor td.jsoneditor-tree': {
verticalAlign: 'middle'
},
'pre.jsoneditor-preview': {
backgroundColor: theme.palette.grey[200] + ' !important',
opacity: 0.8,
color: theme.palette.text.primary + ' !important',
},
/* Hilight selected values in tree/form modes */
'div':{
'&.jsoneditor-field.jsoneditor-highlight, &.jsoneditor-field[contenteditable=true]:focus, &.jsoneditor-field[contenteditable=true]:hover, &.jsoneditor-value.jsoneditor-highlight, &.jsoneditor-value[contenteditable=true]:focus, &.jsoneditor-value[contenteditable=true]:hover': {
backgroundColor: theme.otherVars.editor.selectionBg,
border: `1px solid ${theme.otherVars.editor.selectionBg}`,
borderRadius: 0.25
},
},
/* /* font setting all other mode */
/* form, tree, code, preview, schema-error */
'div.jsoneditor-default, div.jsoneditor-field, div.jsoneditor-value, div.jsoneditor textarea, div.jsoneditor td, div.jsoneditor-readonly, .jsoneditor-popover, div.jsoneditor-tree': {
fontFamily: theme.typography.fontFamily + ' !important',
fontSize: '.875rem !important',
lineHeight: '1.5rem',
backgroundColor: theme.palette.background.default + ' !important',
color: theme.palette.text.primary + ' !important'
},
/* Status Bar */
'.jsoneditor-statusbar': {
backgroundColor: theme.palette.grey[400] + ' !important',
color: theme.palette.text.primary + ' !important',
borderTop: `1px solid ${theme.otherVars.borderColor}`
},
/* Transform & sort */
/* Header */
'.jsoneditor-modal .pico-modal-header': {
fontFamily: theme.typography.fontFamily + ' !important',
fontSize: '.875rem !important',
fontWeight: 'bold',
backgroundColor: theme.palette.primary.main + ' !important',
color: theme.palette.text.primary,
},
/* Body */
'.pico-content': {
backgroundColor: theme.palette.background.default + ' !important',
},
/* Disable links */
'.jsoneditor-modal a': {
color: theme.palette.text.primary + ' !important'
},
/* Replace help text */
'.pico-modal-contents p': {
visibility: 'hidden',
display: 'flex',
marginBottom: '-1rem',
'&::after':{
visibility: 'visible',
position: 'absolute',
content: '"Enter a JMESPath query to filter, sort, or transform the JSON data."'
}
},
/* Fields */
'.jsoneditor-modal':{
'& #query, & input, & input[type=text], & input[type=text]:focus, & option, & select, & table td, & table th, & textarea, & label':{
color: theme.palette.text.primary + ' !important',
backgroundColor: theme.palette.background.default + ' !important',
fontFamily: theme.typography.fontFamily + ' !important',
fontSize: '.875rem !important',
padding: '4px',
},
'& input[type=button]':{
color: theme.palette.text.primary,
backgroundColor: theme.palette.default.main,
},
/* OK Button */
'& input[type=submit]':{
color: theme.palette.primary.contrastText + ' !important',
backgroundColor: theme.palette.primary.main + ' !important',
borderColor: theme.palette.primary.main + ' !important',
textTransform: 'uppercase',
},
'& .jsoneditor-jmespath-label':{
color: theme.palette.text.primary + ' !important',
fontWeight: 'bold'
},
'& option':{
backgroundColor: theme.palette.primary.light + ' !important',
border: `1px solid ${theme.palette.primary.light}` + ' !important',
borderRadius: '0.25',
color: theme.palette.text.primary + ' !important',
},
'& .jsoneditor-button-group.jsoneditor-button-group-value-asc input.jsoneditor-button-asc, & .jsoneditor-button-group.jsoneditor-button-group-value-desc input.jsoneditor-button-desc':{
backgroundColor: theme.palette.primary.main + ' !important',
borderColor: theme.palette.primary.main + ' !important',
color: theme.palette.primary.contrastText + ' !important',
},
'& .selectr-selected':{
color: theme.palette.text.primary + ' !important',
backgroundColor: theme.palette.background.default
},
'& .selectr-selected .selectr-tag':{
backgroundColor: theme.palette.primary.main + ' !important',
borderColor: theme.palette.primary.main,
border: `1px solid ${theme.palette.primary.main}`,
color: theme.palette.primary.contrastText + ' !important',
},
'& .selectr-selected .selectr-tag-remove::before':{
color: theme.palette.primary.main + ' !important',
}
},
'.selectr-option, .selectr-options-container': {
color: theme.palette.text.primary + ' !important',
backgroundColor: theme.palette.default.main
},
'.selectr-option.active, .selectr-option.selected': {
backgroundColor: theme.palette.primary.main + ' !important',
borderColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText + ' !important',
},
/* Update String. Key colors code mode */
'.ace_variable': {
color: theme.otherVars.editor.variable + ' !important',
},
'.ace_string': {
color: theme.otherVars.editor.string + ' !important',
},
'.ace_constant.ace_numeric': {
color: theme.otherVars.editor.number + ' !important',
},
/* Update String. Key colors tree/form mode*/
'div.jsoneditor-value':{
'&.jsoneditor-string':{
color: theme.otherVars.editor.string + ' !important',
},
' &.jsoneditor-number':{
color: theme.otherVars.editor.number + ' !important',
}
},
// /* read only mode */
'#pg-json-editor[readonly]': {
'& div.jsoneditor-tree, & div.jsoneditor td, & div.jsoneditor-readonly, & div.jsoneditor-value, & div.jsoneditor-field, & div.jsoneditor-tree button.jsoneditor-button:focus': {
backgroundColor: theme.palette.grey[400] + ' !important',
opacity: 0.85
}
},
/* Ace editor code background readonly*/
'#pg-json-editor[readonly] .ace-jsoneditor .ace_scroller':{
backgroundColor: theme.palette.grey[400] + ' !important',
opacity: 0.85
}
};
}

20
web/pgadmin/static/js/Theme/overrides/pgadmin.classes.override.js Normal file
View File

@ -0,0 +1,20 @@
export default function pgadminOverride(theme) {
return {
'.icon-server-connecting': {
backgroundImage: theme.otherVars.iconLoaderUrl,
backgroundRepeat: 'no-repeat',
backgroundAize: '18px !important',
alignContent: 'center',
verticalAlign: 'middle',
height: '1.3em',
},
'.dashboard-pg-doc': {
backgroundImage: theme.otherVars.dashboardPgDoc,
display: 'inline-block',
width: '50px',
height: '50px',
backgroundAize: '50px 50px'
}
};}

4
web/pgadmin/static/js/Theme/overrides/rcdock.override.js
View File

@ -112,7 +112,7 @@ export default function rcdockOverride(theme) {
color: 'unset',
},
'& > div': {
padding: '4px 10px',
padding: '4px 8px',
'&:focus': {
outline: '1px solid '+theme.otherVars.activeBorder,
outlineOffset: '-1px',
@ -176,7 +176,7 @@ export default function rcdockOverride(theme) {
zIndex: 1080,
},
'& .drag-accept-reject::after': {
content: '',
content: '""',
},
'& .dock-nav-more': {
color: theme.custom.icon.contrastText

230
web/pgadmin/static/js/Theme/overrides/reactaspen.override.js Normal file
View File

@ -0,0 +1,230 @@
/////////////////////////////////////////////////////////////
//
// pgAdmin 4 - PostgreSQL Tools
//
// Copyright (C) 2013 - 2024, The pgAdmin Development Team
// This software is released under the PostgreSQL Licence
//
//////////////////////////////////////////////////////////////
export default function reactAspenOverride(theme) {
return {
'.drag-tree-node': {
position: 'absolute',
top: '-100px',
left: 0,
zIndex: 99999,
color: theme.otherVars.tree.textFg,
background: theme.otherVars.tree.inputBg,
padding: '0.25rem 0.75rem',
maxWidth: '30%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
},
'.file-tree': {
color: theme.otherVars.tree.textFg + ' !important',
backgroundColor: theme.otherVars.tree.inputBg + ' !important',
fontFamily: theme.typography.fontFamily + ' !important',
fontSize: '0.815rem' + ' !important',
display: 'inline-block',
position: 'relative',
width: '100%',
'&, & *': {
boxSizing: 'border-box',
},
},
'.browser-tree': {
height: '100%',
},
'.file-tree>': {
div: {
position: 'absolute' + ' !important',
height: '100%' + ' !important',
top: '0px' + ' !important',
'>div': {
scrollbarGutter: 'stable',
overflow: 'overlay' + ' !important',
},
},
},
'.file-entry': {
font: 'inherit',
textAlign: 'left',
display: 'flex',
alignItems: 'center',
whiteSpace: 'nowrap',
padding: '2px 0',
paddingLeft: '2px',
cursor: 'default',
'&:before': {
content: '""',
background: theme.palette.grey[400],
position: 'absolute',
width: '1px',
height: '100%',
// set box-shadow to show tree indent guide.
boxShadow: `'-16px 0 0 0' + theme.palette.grey[400],
'-32px 0 0 0' + theme.palette.grey[400],
'-48px 0 0 0' + theme.palette.grey[400],
'-64px 0 0 0' + theme.palette.grey[400],
'-80px 0 0 0' + theme.palette.grey[400],
'-96px 0 0 0' + theme.palette.grey[400],
'-112px 0 0 0' + theme.palette.grey[400],
'-128px 0 0 0' + theme.palette.grey[400],
'-144px 0 0 0' + theme.palette.grey[400],
'-160px 0 0 0' + theme.palette.grey[400],
'-176px 0 0 0' + theme.palette.grey[400],
'-192px 0 0 0' + theme.palette.grey[400],
'-208px 0 0 0' + theme.palette.grey[400],
'-224px 0 0 0' + theme.palette.grey[400],
'-240px 0 0 0' + theme.palette.grey[400],
'-256px 0 0 0' + theme.palette.grey[400],
'-272px 0 0 0' + theme.palette.grey[400],
'-288px 0 0 0' + theme.palette.grey[400],
'-304px 0 0 0' + theme.palette.grey[400],
'-320px 0 0 0' + theme.palette.grey[400],
'-336px 0 0 0' + theme.palette.grey[400],
'-352px 0 0 0' + theme.palette.grey[400],
'-368px 0 0 0' + theme.palette.grey[400],
'-384px 0 0 0' + theme.palette.grey[400],
'-400px 0 0 0' + theme.palette.grey[400],
'-416px 0 0 0' + theme.palette.grey[400],
'-432px 0 0 0' + theme.palette.grey[400],
'-448px 0 0 0' + theme.palette.grey[400],
'-464px 0 0 0' + theme.palette.grey[400],
'-480px 0 0 0' + theme.palette.grey[400],
'-496px 0 0 0' + theme.palette.grey[400],
'-512px 0 0 0' + theme.palette.grey[400],
'-528px 0 0 0' + theme.palette.grey[400],
'-544px 0 0 0' + theme.palette.grey[400],
'-544px 0 0 0' + theme.palette.grey[400],
'-560px 0 0 0' + theme.palette.grey[400]`,
},
'&.big': {
fontFamily: 'monospace',
},
'&:hover, &.pseudo-active': {
color: theme.otherVars.tree.textHoverFg + ' !important',
backgroundColor: theme.otherVars.tree.bgHover + ' !important',
'span.file-label': {
'span.file-name': {
color: theme.otherVars.tree.textHoverFg,
},
},
},
'&.active, &.prompt': {
color: theme.otherVars.tree.textHoverFg + ' !important',
backgroundColor: theme.otherVars.tree.bgSelected + ' !important',
borderColor: theme.otherVars.tree.bgSelected,
borderRight: '3px solid ' + theme.palette.primary.main + ' !important',
'span.file-label': {
'span.file-name': {
color: theme.otherVars.textHoverFg,
},
},
},
'span.file-label': {
display: 'flex',
alignItems: 'center',
padding: '0 2px 0 2px',
border: '1px solid transparent',
height: 'auto',
whiteSpace: 'normal',
cursor: 'pointer !important',
marginLeft: '2px',
'&:hover, &.pseudo-active': {
color: theme.otherVars.tree.fgHover,
},
},
'span.file-name': {
font: 'inherit',
flexGrow: 1,
userSelect: 'none',
color: theme.otherVars.tree.textFg,
marginLeft: '3px',
cursor: 'pointer !important',
whiteSpace: 'nowrap',
'&:hover, &.pseudo-active': {
color: theme.otherVars.tree.fgHover,
},
},
i: {
display: 'inline-block',
font: 'normal normal normal 18px/1 "Font Awesome 5 Free"',
fontSize: '18px',
textAlign: 'center',
height: '21px !important',
width: '20px !important',
flexShrink: 0,
'&:before': {
height: 'inherit',
width: 'inherit',
display: 'inline-block',
},
'&.directory-toggle': {
'&:before': {
backgroundPosition: '6px center !important',
fontFamily: '"Font Awesome 5 Free"',
content: '"\\f054"',
borderStyle: 'none',
marginLeft: '5px',
fontWeight: 900,
right: '15px',
top: '3px',
fontSize: '0.6rem',
lineHeight: 2,
},
'&.open:before': {
backgroundPosition: '-14px center !important',
fontFamily: theme.typography.fontFamilyIcon,
content: '"\\f078"',
borderStyle: 'none',
marginLeft: '5px',
fontWeight: 900,
transform: 'none !important',
},
'&.loading:before': {
content: '""',
fontFamily: theme.typography.fontFamilyIcon,
borderStyle: 'none',
background: theme.otherVars.iconLoaderSmall + ' 0 0 no-repeat',
backgroundPosition: 'center !important',
},
},
},
'&.prompt.new .file-label, &.file .file-label': {
marginLeft: '18px',
},
// Set the tree depth CSS from depth
...Object.fromEntries(
new Array(50).fill(0).map((v, i) => {
return ['&.depth-' + i, { paddingLeft: 16 * (i - 1) + 'px' }];
})
),
},
'.children-count': {
marginLeft: '3px',
},
};
}

22
web/pgadmin/static/js/Theme/standard.js
View File

@ -8,8 +8,7 @@
//////////////////////////////////////////////////////////////
/* The standard theme */
import { createTheme } from '@material-ui/core/styles';
import { alpha, darken } from '@material-ui/core/styles/colorManipulator';
import { alpha, darken, createTheme} from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
@ -81,6 +80,10 @@ export default function(basicSettings) {
}
},
otherVars: {
colorBrand: '#326690',
iconLoaderUrl: 'url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'utf-8\'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 38 38\' style=\'enable-background:new 0 0 38 38;\' xml:space=\'preserve\'%3E%3Cstyle type=\'text/css\'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform=\'translate(1 1)\'%3E%3Ccircle class=\'st0\' cx=\'18\' cy=\'18\' r=\'16\'/%3E%3Cpath class=\'st1\' d=\'M34,18c0-8.8-7.2-16-16-16 \'%3E%3CanimateTransform accumulate=\'none\' additive=\'replace\' attributeName=\'transform\' calcMode=\'linear\' dur=\'0.7s\' fill=\'remove\' from=\'0 18 18\' repeatCount=\'indefinite\' restart=\'always\' to=\'360 18 18\' type=\'rotate\'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");',
iconLoaderSmall: 'url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'utf-8\'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 38 38\' style=\'enable-background:new 0 0 38 38;\' xml:space=\'preserve\'%3E%3Cstyle type=\'text/css\'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform=\'translate(1 1)\'%3E%3Ccircle class=\'st0\' cx=\'18\' cy=\'18\' r=\'16\'/%3E%3Cpath class=\'st1\' d=\'M34,18c0-8.8-7.2-16-16-16 \'%3E%3CanimateTransform accumulate=\'none\' additive=\'replace\' attributeName=\'transform\' calcMode=\'linear\' dur=\'0.7s\' fill=\'remove\' from=\'0 18 18\' repeatCount=\'indefinite\' restart=\'always\' to=\'360 18 18\' type=\'rotate\'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A")',
dashboardPgDoc: 'url("data:image/svg+xml,%3C%3Fxml version=\'1.0\' encoding=\'utf-8\'%3F%3E%3C!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version=\'1.1\' id=\'Layer_1\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\' x=\'0px\' y=\'0px\' viewBox=\'0 0 42 42\' style=\'enable-background:new 0 0 42 42;\' xml:space=\'preserve\'%3E%3Cstyle type=\'text/css\'%3E .st0%7Bstroke:%23000000;stroke-width:3.3022;%7D .st1%7Bfill:%23336791;%7D .st2%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:round;%7D .st3%7Bfill:none;stroke:%23FFFFFF;stroke-width:1.1007;stroke-linecap:round;stroke-linejoin:bevel;%7D .st4%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.3669;%7D .st5%7Bfill:%23FFFFFF;stroke:%23FFFFFF;stroke-width:0.1835;%7D .st6%7Bfill:none;stroke:%23FFFFFF;stroke-width:0.2649;stroke-linecap:round;stroke-linejoin:round;%7D%0A%3C/style%3E%3Cg id=\'orginal\'%3E%3C/g%3E%3Cg id=\'Layer_x0020_3\'%3E%3Cpath class=\'st0\' d=\'M31.3,30c0.3-2.1,0.2-2.4,1.7-2.1l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6c2-0.9,3.1-2.4,1.2-2 c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4 c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8 c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8l-0.1,0.3c0.5,0.4,0.4,2.7,0.5,4.4 c0.1,1.7,0.2,3.2,0.5,4.1c0.3,0.9,0.7,3.3,3.9,2.6C29.1,38.3,31.1,37.5,31.3,30\'/%3E%3Cpath class=\'st1\' d=\'M38.3,25.3c-4.4,0.9-4.7-0.6-4.7-0.6c4.7-7,6.7-15.8,5-18c-4.6-5.9-12.6-3.1-12.7-3l0,0 c-0.9-0.2-1.9-0.3-3-0.3c-2,0-3.5,0.5-4.7,1.4c0,0-14.3-5.9-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.3-3.8,3.3-3.8 c0.8,0.5,1.8,0.8,2.8,0.7l0.1-0.1c0,0.3,0,0.5,0,0.8c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8 l-0.1,0.3c0.5,0.4,0.8,2.4,0.7,4.3c-0.1,1.9-0.1,3.2,0.3,4.2c0.4,1,0.7,3.3,3.9,2.6c2.6-0.6,4-2,4.2-4.5c0.1-1.7,0.4-1.5,0.5-3 l0.2-0.7c0.3-2.3,0-3.1,1.7-2.8l0.4,0c1.2,0.1,2.8-0.2,3.7-0.6C39,26.4,40.2,24.9,38.3,25.3L38.3,25.3z\'/%3E%3Cpath class=\'st2\' d=\'M21.8,26.6c-0.1,4.4,0,8.8,0.5,9.8c0.4,1.1,1.3,3.2,4.5,2.5c2.6-0.6,3.6-1.7,4-4.1c0.3-1.8,0.9-6.7,1-7.7\'/%3E%3Cpath class=\'st2\' d=\'M18,4.7c0,0-14.3-5.8-13.6,7.4c0.1,2.8,4,21.3,8.7,15.7c1.7-2,3.2-3.7,3.2-3.7\'/%3E%3Cpath class=\'st2\' d=\'M25.7,3.6c-0.5,0.2,7.9-3.1,12.7,3c1.7,2.2-0.3,11-5,18\'/%3E%3Cpath class=\'st3\' d=\'M33.5,24.6c0,0,0.3,1.5,4.7,0.6c1.9-0.4,0.8,1.1-1.2,2c-1.6,0.8-5.3,0.9-5.3-0.1 C31.6,24.5,33.6,25.3,33.5,24.6c-0.1-0.6-1.1-1.2-1.7-2.7c-0.5-1.3-7.3-11.2,1.9-9.7c0.3-0.1-2.4-8.7-11-8.9 c-8.6-0.1-8.3,10.6-8.3,10.6\'/%3E%3Cpath class=\'st2\' d=\'M19.4,25.6c-1.2,1.3-0.8,1.6-3.2,2.1c-2.4,0.5-1,1.4-0.1,1.6c1.1,0.3,3.7,0.7,5.5-1.8c0.5-0.8,0-2-0.7-2.3 C20.5,25.1,20,24.9,19.4,25.6L19.4,25.6z\'/%3E%3Cpath class=\'st2\' d=\'M19.3,25.5c-0.1-0.8,0.3-1.7,0.7-2.8c0.6-1.6,2-3.3,0.9-8.5c-0.8-3.9-6.5-0.8-6.5-0.3c0,0.5,0.3,2.7-0.1,5.2 c-0.5,3.3,2.1,6,5,5.7\'/%3E%3Cpath class=\'st4\' d=\'M18,13.8c0,0.2,0.3,0.7,0.8,0.7c0.5,0.1,0.9-0.3,0.9-0.5c0-0.2-0.3-0.4-0.8-0.4C18.4,13.6,18,13.7,18,13.8 L18,13.8z\'/%3E%3Cpath class=\'st5\' d=\'M32,13.5c0,0.2-0.3,0.7-0.8,0.7c-0.5,0.1-0.9-0.3-0.9-0.5c0-0.2,0.3-0.4,0.8-0.4C31.6,13.2,32,13.3,32,13.5 L32,13.5z\'/%3E%3Cpath class=\'st2\' d=\'M33.7,12.2c0.1,1.4-0.3,2.4-0.4,3.9c-0.1,2.2,1,4.7-0.6,7.2\'/%3E%3Cpath class=\'st6\' d=\'M2.7,6.6\'/%3E%3C/g%3E%3C/svg%3E%0A")',
reactSelect: {
padding: '5px 8px',
},
@ -123,6 +126,11 @@ export default function(basicSettings) {
bg: '#880000'
},
},
scroll: {
baseColor: '#bac1cd',
barBackgroundColor: '#bac1cd33',
thumbBackground: '#bac1cdb3'
},
schemaDiff: {
diffRowColor: '#fff9c4',
sourceRowColor: '#ffebee',
@ -151,8 +159,14 @@ export default function(basicSettings) {
guttersBg: '#f3f5f9',
guttersFg: '#848ea0',
},
treeBgSelected: '#d6effc',
treeFgSelected: '#222',
tree: {
textFg: '#222222',
inputBg: '#ffffff',
fgHover: '#222222',
bgHover: '#ebeef3',
textHoverFg: '#222222',
bgSelected: '#d6effc'
}
}
});
}

30
web/pgadmin/static/js/components/Buttons.jsx
View File

@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
import { Button, ButtonGroup, makeStyles, Tooltip } from '@material-ui/core';
import { Button, ButtonGroup, Tooltip } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { forwardRef } from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';
@ -44,14 +45,22 @@ const useStyles = makeStyles((theme)=>({
iconButton: {
minWidth: 0,
padding: '2px 4px',
'&.MuiButton-sizeSmall, &.MuiButton-outlinedSizeSmall, &.MuiButton-containedSizeSmall': {
padding: '1px 4px',
'&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
},
},
iconButtonDefault: {
borderColor: theme.custom.icon.borderColor,
color: theme.custom.icon.contrastText,
backgroundColor: theme.custom.icon.main,
height: '28px',
padding: '1px 4px',
'.MuiButtonGroup-root &': {
minWidth: '34px',
'&.MuiButtonGroup-firstButton:hover, &.MuiButtonGroup-middleButton:hover': {
borderRightColor: theme.custom.icon.borderColor,
},
},
'&.Mui-disabled': {
borderColor: theme.custom.icon.disabledBorderColor,
backgroundColor: theme.custom.icon.disabledMain,
@ -61,19 +70,20 @@ const useStyles = makeStyles((theme)=>({
backgroundColor: theme.custom.icon.hoverMain,
color: theme.custom.icon.hoverContrastText,
borderColor: theme.custom.icon.borderColor,
},
}
},
splitButton: {
'&.MuiButton-sizeSmall, &.MuiButton-outlinedSizeSmall, &.MuiButton-containedSizeSmall': {
'&.MuiButton-sizeSmall, &.MuiButton-outlined.MuiButton-sizeSmall, &.MuiButton-contained.MuiButton-sizeSmall': {
width: '20px',
minWidth: 0,
'& svg': {
height: '0.8em',
}
},
}
},
xsButton: {
padding: '2px 1px',
height: '24px',
height: '24px !important',
minWidth: '24px',
'& .MuiSvgIcon-root': {
height: '0.8em',
@ -119,7 +129,7 @@ export const PrimaryButton = forwardRef((props, ref)=>{
noBorder && allClassName.push(...[classes.noBorder, classes.noBorderPrimary]);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
<Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} variant="contained" color="primary">{children}</Button>
<Button ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps} color="primary" variant="contained">{children}</Button>
);
});
PrimaryButton.displayName = 'PrimaryButton';
@ -142,7 +152,7 @@ export const DefaultButton = forwardRef((props, ref)=>{
noBorder && allClassName.push(classes.noBorder);
const dataLabel = typeof(children) == 'string' ? children : undefined;
return (
<Button variant="outlined" color="default" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} {...otherProps}>{children}</Button>
<Button variant="outlined" ref={ref} size={size} className={clsx(allClassName)} data-label={dataLabel} color="default" {...otherProps}>{children}</Button>
);
});
DefaultButton.displayName = 'DefaultButton';
@ -220,7 +230,7 @@ PgIconButton.propTypes = {
export const PgButtonGroup = forwardRef(({children, ...props}, ref)=>{
/* Tooltip does not work for disabled items */
return (
<ButtonGroup innerRef={ref} {...props}>
<ButtonGroup ref={ref} {...props}>
{children}
</ButtonGroup>
);

12
web/pgadmin/static/js/components/CheckBoxTree.jsx
View File

@ -1,11 +1,11 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import CheckboxTree from 'react-checkbox-tree';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import IndeterminateCheckBoxIcon from '@material-ui/icons/IndeterminateCheckBox';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import CheckBoxIcon from '@mui/icons-material/CheckBox';
import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme) =>

6
web/pgadmin/static/js/components/EmptyPanelMessage.jsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import { Box } from '@material-ui/core';
import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
import { makeStyles } from '@material-ui/styles';
import { Box } from '@mui/material';
import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
import { makeStyles } from '@mui/styles';
import PropTypes from 'prop-types';
const useStyles = makeStyles((theme)=>({

3
web/pgadmin/static/js/components/ExternalIcon.jsx
View File

@ -23,9 +23,10 @@ import MsAzure from '../../img/ms_azure.svg?svgr';
import GoogleCloud from '../../img/google-cloud-1.svg?svgr';
import TerminalSvg from '../../img/terminal.svg?svgr';
import RowFilterSvg from '../../img/fonticon/row_filter.svg?svgr';
import SvgIcon from '@mui/material/SvgIcon';
export default function ExternalIcon({Icon, ...props}) {
return <Icon className={'MuiSvgIcon-root'} {...props} />;
return <SvgIcon component={Icon} inheritViewBox {...props}/>;
}
ExternalIcon.propTypes = {

2
web/pgadmin/static/js/components/FieldSet.jsx
View File

@ -1,4 +1,4 @@
import { makeStyles } from '@material-ui/core';
import { makeStyles } from '@mui/styles';
import React from 'react';
import clsx from 'clsx';
import PropTypes from 'prop-types';

59
web/pgadmin/static/js/components/FormComponents.jsx
View File

@ -9,27 +9,26 @@
/* Common form components used in pgAdmin */
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import {
Box, FormControl, OutlinedInput, FormHelperText,
Box, FormControl, OutlinedInput, FormHelperText, ToggleButton, ToggleButtonGroup,
Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio, Tooltip,
} from '@material-ui/core';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
import ErrorRoundedIcon from '@material-ui/icons/ErrorOutlineRounded';
import InfoRoundedIcon from '@material-ui/icons/InfoRounded';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import WarningRoundedIcon from '@material-ui/icons/WarningRounded';
import FolderOpenRoundedIcon from '@material-ui/icons/FolderOpenRounded';
import DescriptionIcon from '@material-ui/icons/Description';
import AssignmentTurnedIn from '@material-ui/icons/AssignmentTurnedIn';
} from '@mui/material';
import ErrorRoundedIcon from '@mui/icons-material/ErrorOutlineRounded';
import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
import FolderOpenRoundedIcon from '@mui/icons-material/FolderOpenRounded';
import DescriptionIcon from '@mui/icons-material/Description';
import AssignmentTurnedIn from '@mui/icons-material/AssignmentTurnedIn';
import Select, { components as RSComponents } from 'react-select';
import CreatableSelect from 'react-select/creatable';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import HTMLReactParse from 'html-react-parser';
import { KeyboardDateTimePicker, KeyboardDatePicker, KeyboardTimePicker, MuiPickersUtilsProvider } from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';
import { DateTimePicker, DatePicker, TimePicker} from '@mui/x-date-pickers';
import * as DateFns from 'date-fns';
import CodeMirror from './ReactCodeMirror';
@ -257,6 +256,7 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, .
let format = '';
let placeholder = '';
let regExp = /[a-zA-Z]/;
let timeZoneString = '';
if (controlProps?.pickerType === 'Date') {
format = controlProps.format || DATE_TIME_FORMAT.DATE;
placeholder = controlProps.placeholder || 'YYYY-MM-DD';
@ -275,6 +275,7 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, .
/* Value should be a date object instead of string */
value = _.isUndefined(value) || regExp.test(value) ? null : value;
if (!_.isNull(value)) {
timeZoneString = value.slice(-6);
let parseValue = DateFns.parse(value, format, new Date());
if (!DateFns.isValid(parseValue)) {
parseValue = DateFns.parseISO(value);
@ -290,43 +291,30 @@ export function InputDateTimePicker({ value, onChange, readonly, controlProps, .
let commonProps = {
...props,
value: value,
format: format,
placeholder: placeholder,
format: format.replace('xxx', timeZoneString),
label: '',
variant: 'inline',
readOnly: Boolean(readonly),
autoOk: controlProps.autoOk || false,
ampm: controlProps.ampm || false,
ampm: controlProps.ampm ? controlProps.ampm : undefined,
disablePast: controlProps.disablePast || false,
invalidDateMessage: '',
maxDateMessage: '',
minDateMessage: '',
onChange: handleChange,
fullWidth: true,
slotProps: {textField: {placeholder:placeholder}}
};
if (controlProps?.pickerType === 'Date') {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker {...commonProps} />
</MuiPickersUtilsProvider>
<DatePicker {...commonProps} />
);
} else if (controlProps?.pickerType === 'Time') {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardTimePicker {...commonProps} />
</MuiPickersUtilsProvider>
<TimePicker {...commonProps} />
);
}
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDateTimePicker {...commonProps} />
</MuiPickersUtilsProvider>
<DateTimePicker {...commonProps} />
);
}
InputDateTimePicker.propTypes = {
value: PropTypes.string,
value: CustomPropTypes.className,
options: PropTypes.object,
onChange: PropTypes.func,
readonly: PropTypes.bool,
@ -347,7 +335,7 @@ FormInputDateTimePicker.propTypes = {
className: CustomPropTypes.className,
helpMessage: PropTypes.string,
testcid: PropTypes.string,
value: PropTypes.string,
value: CustomPropTypes.className,
controlProps: PropTypes.object,
change: PropTypes.func,
labelTooltip: PropTypes.string
@ -394,6 +382,7 @@ export const InputText = forwardRef(({
ref={ref}
color="primary"
fullWidth
size={size}
margin={size == 'small' ? 'dense' : 'none'}
inputProps={{
id: cid,

3
web/pgadmin/static/js/components/KeyboardShortcuts.jsx
View File

@ -8,7 +8,8 @@
//////////////////////////////////////////////////////////////
import _ from 'lodash';
import { makeStyles, Grid, Typography, Box } from '@material-ui/core';
import { Grid, Typography, Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React from 'react';
import { InputCheckbox, InputText } from './FormComponents';
import PropTypes from 'prop-types';

3
web/pgadmin/static/js/components/Loader.jsx
View File

@ -7,7 +7,8 @@
//
//////////////////////////////////////////////////////////////
import { CircularProgress, Box, Typography, makeStyles } from '@material-ui/core';
import { CircularProgress, Box, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React from 'react';
import PropTypes from 'prop-types';

7
web/pgadmin/static/js/components/Menu.jsx
View File

@ -1,6 +1,6 @@
import { makeStyles } from '@material-ui/styles';
import { makeStyles } from '@mui/styles';
import React, { useRef } from 'react';
import CheckIcon from '@material-ui/icons/Check';
import CheckIcon from '@mui/icons-material/Check';
import PropTypes from 'prop-types';
import {
@ -37,6 +37,9 @@ const useStyles = makeStyles((theme)=>({
'&.szh-menu__item--active, &.szh-menu__item--hover': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
},
'&.szh-menu__item--disabled':{
color: theme.palette.text.muted,
}
}
},

9
web/pgadmin/static/js/components/ObjectBreadcrumbs.jsx
View File

@ -1,8 +1,9 @@
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React, { useState, useEffect } from 'react';
import AccountTreeIcon from '@material-ui/icons/AccountTree';
import CommentIcon from '@material-ui/icons/Comment';
import ArrowForwardIosRoundedIcon from '@material-ui/icons/ArrowForwardIosRounded';
import AccountTreeIcon from '@mui/icons-material/AccountTree';
import CommentIcon from '@mui/icons-material/Comment';
import ArrowForwardIosRoundedIcon from '@mui/icons-material/ArrowForwardIosRounded';
import { usePgAdmin } from '../../../static/js/BrowserComponent';
import usePreferences from '../../../preferences/static/js/store';

2
web/pgadmin/static/js/components/PgChart/StreamingChart.jsx
View File

@ -3,7 +3,7 @@ import UplotReact from 'uplot-react';
import { useResizeDetector } from 'react-resize-detector';
import gettext from 'sources/gettext';
import PropTypes from 'prop-types';
import { useTheme } from '@material-ui/styles';
import { useTheme } from '@mui/styles';
function tooltipPlugin(refreshRate) {
let tooltipTopOffset = -20;

7
web/pgadmin/static/js/components/PgReactDataGrid.jsx
View File

@ -8,12 +8,13 @@
//////////////////////////////////////////////////////////////
import React, { useContext, useEffect } from 'react';
import ReactDataGrid, { Row } from 'react-data-grid';
import { Box, makeStyles } from '@material-ui/core';
import { Box } from '@mui/material';
import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import CustomPropTypes from '../custom_prop_types';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import gettext from 'sources/gettext';
const useStyles = makeStyles((theme)=>({

10
web/pgadmin/static/js/components/PgTable.jsx
View File

@ -18,19 +18,19 @@ import {
useExpanded,
} from 'react-table';
import { VariableSizeList } from 'react-window';
import { makeStyles } from '@material-ui/core/styles';
import { makeStyles } from '@mui/styles';
import clsx from 'clsx';
import PropTypes from 'prop-types';
import AutoSizer from 'react-virtualized-auto-sizer';
import { Checkbox, Box, Switch } from '@material-ui/core';
import { Checkbox, Box, Switch } from '@mui/material';
import { InputText } from './FormComponents';
import _ from 'lodash';
import gettext from 'sources/gettext';
import SchemaView from '../SchemaView';
import EmptyPanelMessage from './EmptyPanelMessage';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
import { PgIconButton } from './Buttons';
/* eslint-disable react/display-name */

284
web/pgadmin/static/js/components/PgTree/scss/styles.scss
View File

@ -1,284 +0,0 @@
.file-tree {
font-family: $font-family-primary !important;
font-size: $tree-font-size !important;
background-color: $color-bg !important;
display: inline-block;
color: $tree-text-fg !important;
position: relative;
&,
& * {
box-sizing: border-box;
}
width: 100%;
}
.browser-tree {
height: 100%;
}
.file-tree> {
div {
position: absolute !important;
height: 100% !important;
top: 0px !important;
>div {
scrollbar-gutter: stable;
overflow: overlay !important;
}
}
}
.file-entry {
font: inherit;
text-align: left;
display: flex;
align-items: center;
white-space: nowrap;
padding: 2px 0;
padding-left: 2px;
cursor: default;
&:before {
content: '';
background: $color-gray-light;
position: absolute;
width: 1px;
height: 100%;
// set box-shadow to show tree indent guide.
box-shadow: -16px 0 0 0 $color-gray-light,
-32px 0 0 0 $color-gray-light,
-48px 0 0 0 $color-gray-light,
-64px 0 0 0 $color-gray-light,
-80px 0 0 0 $color-gray-light,
-96px 0 0 0 $color-gray-light,
-112px 0 0 0 $color-gray-light,
-128px 0 0 0 $color-gray-light,
-144px 0 0 0 $color-gray-light,
-160px 0 0 0 $color-gray-light,
-176px 0 0 0 $color-gray-light,
-192px 0 0 0 $color-gray-light,
-208px 0 0 0 $color-gray-light,
-224px 0 0 0 $color-gray-light,
-240px 0 0 0 $color-gray-light,
-256px 0 0 0 $color-gray-light,
-272px 0 0 0 $color-gray-light,
-288px 0 0 0 $color-gray-light,
-304px 0 0 0 $color-gray-light,
-320px 0 0 0 $color-gray-light,
-336px 0 0 0 $color-gray-light,
-352px 0 0 0 $color-gray-light,
-368px 0 0 0 $color-gray-light,
-384px 0 0 0 $color-gray-light,
-400px 0 0 0 $color-gray-light,
-416px 0 0 0 $color-gray-light,
-432px 0 0 0 $color-gray-light,
-448px 0 0 0 $color-gray-light,
-464px 0 0 0 $color-gray-light,
-480px 0 0 0 $color-gray-light,
-496px 0 0 0 $color-gray-light,
-512px 0 0 0 $color-gray-light,
-528px 0 0 0 $color-gray-light,
-544px 0 0 0 $color-gray-light,
-544px 0 0 0 $color-gray-light,
-560px 0 0 0 $color-gray-light;
}
&.red {
filter: saturate(.5);
.file-icon:after {
content: '';
height: 8px;
width: 8px;
font-weight: bold;
display: inline-block;
background: #da2d38;
position: relative;
border-radius: 4px;
left: -7px;
box-sizing: border-box;
}
}
&.magenta span.file-name {
color: magenta;
}
&.big {
font-family: monospace;
}
&:hover,
&.pseudo-active {
background-color: $tree-bg-hover !important;
color: $tree-fg-hover !important;
span.file-label {
span.file-name {
color: $tree-text-hover-fg;
}
}
}
&.active,
&.prompt {
background-color: $tree-bg-selected !important;
border-color: $color-primary-light;
border-right: $active-border !important;
color: $tree-text-hover-fg !important;
span.file-label {
span.file-name {
color: $tree-text-hover-fg;
}
}
}
&.dragging {
background: #2a2a2a;
}
&.dragover {
background-color: #313131;
}
i {
display: inline-block;
font: normal normal normal 18px/1 $font-family-icon;
font-size: 18px;
text-align: center;
height: 21px !important;
width: 20px !important;
flex-shrink: 0;
&:before {
height: inherit;
width: inherit;
display: inline-block;
}
&.directory-toggle {
&:before {
background-position: 6px center !important;
font-family: $font-family-icon;
content: "\f054" !important;
border-style: none;
margin-left: 5px;
font-weight: 900;
right: 15px;
top: 3px;
font-size: 0.6rem;
line-height: 2;
}
&.open:before {
background-position: -14px center !important;
font-family: $font-family-icon;
content: "\f078" !important;
border-style: none;
margin-left: 5px;
font-weight: 900;
transform: none !important;
}
&.loading:before {
content: '' !important;
font-family: $font-family-icon;
border-style: none;
background: $loader-icon-small 0 0 no-repeat;
background-position: center !important;
}
}
}
span.file-label {
display: flex;
align-items: center;
padding: 0 2px 0 2px;
border: 1px solid transparent;
height: auto;
white-space: normal;
cursor: pointer !important;
margin-left: 2px;
&:hover,
&.pseudo-active {
color: $tree-fg-hover;
}
}
&.prompt.new .file-label,
&.file .file-label {
margin-left: 18px;
}
span.file-name {
font: inherit;
flex-grow: 1;
user-select: none;
color: $tree-text-fg;
margin-left: 3px;
cursor: pointer !important;
white-space: nowrap;
&:hover,
&.pseudo-active {
color: $tree-fg-hover;
}
}
}
// Set the tree depth CSS from depth level 21 to 50 as in default CSS depth is set from 0 to 20.
@for $i from 21 through 50 {
.file-entry.depth-#{$i} {
padding-left: 16px * ($i - 1);
}
}
.children-count {
margin-left: 3px;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
&-track {
background: transparent;
}
&-corner {
background: transparent;
}
&-thumb {
background: #3a3a3a;
&:hover {
background: #424242;
}
}
}
@for $i from 2 through 20 {
.file-entry.depth-#{$i} {
padding-left: 16px * ($i - 1);
}
}
@keyframes pulsate-err-msg {
0% {
color: #868686;
}
50% {
color: inherit;
}
100% {
color: #868686;
}
}

2
web/pgadmin/static/js/components/Privilege.jsx
View File

@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import { makeStyles } from '@material-ui/core';
import { makeStyles } from '@mui/styles';
import _ from 'lodash';
import React from 'react';
import { InputCheckbox, InputText } from './FormComponents';

3
web/pgadmin/static/js/components/QueryThresholds.jsx
View File

@ -9,7 +9,8 @@
import gettext from 'sources/gettext';
import _ from 'lodash';
import { FormGroup, makeStyles, Grid, Typography } from '@material-ui/core';
import { FormGroup, Grid, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import React from 'react';
import { InputText } from './FormComponents';
import PropTypes from 'prop-types';

4
web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx
View File

@ -12,8 +12,8 @@ import ReactDOMServer from 'react-dom/server';
import PropTypes from 'prop-types';
import { checkTrojanSource } from '../../../utils';
import usePreferences from '../../../../../preferences/static/js/store';
import KeyboardArrowRightRoundedIcon from '@material-ui/icons/KeyboardArrowRightRounded';
import ExpandMoreRoundedIcon from '@material-ui/icons/ExpandMoreRounded';
import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
import ExpandMoreRoundedIcon from '@mui/icons-material/ExpandMoreRounded';
// Codemirror packages
import {

13
web/pgadmin/static/js/components/ReactCodeMirror/components/FindDialog.jsx
View File

@ -10,14 +10,15 @@
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import { Box, InputAdornment, makeStyles } from '@material-ui/core';
import { Box, InputAdornment } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { InputText } from '../../FormComponents';
import { PgIconButton } from '../../Buttons';
import CloseIcon from '@material-ui/icons/CloseRounded';
import ArrowDownwardRoundedIcon from '@material-ui/icons/ArrowDownwardRounded';
import ArrowUpwardRoundedIcon from '@material-ui/icons/ArrowUpwardRounded';
import SwapHorizRoundedIcon from '@material-ui/icons/SwapHorizRounded';
import SwapCallsRoundedIcon from '@material-ui/icons/SwapCallsRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
import SwapHorizRoundedIcon from '@mui/icons-material/SwapHorizRounded';
import SwapCallsRoundedIcon from '@mui/icons-material/SwapCallsRounded';
import { RegexIcon, FormatCaseIcon } from '../../ExternalIcon';
import {

5
web/pgadmin/static/js/components/ReactCodeMirror/components/GotoDialog.jsx
View File

@ -10,10 +10,11 @@
import React, { useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import { Box, FormControl, makeStyles } from '@material-ui/core';
import { Box, FormControl } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { InputText } from '../../FormComponents';
import { PgIconButton } from '../../Buttons';
import CloseIcon from '@material-ui/icons/CloseRounded';
import CloseIcon from '@mui/icons-material/CloseRounded';
const useStyles = makeStyles((theme)=>({
root: {

Some files were not shown because too many files have changed in this diff Show More