IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Continue fixing multiple UI and SonarQube issues found when testing wcDocker changes. #6479

Browse Source
This commit is contained in:
Aditya Toshniwal
2023-10-27 15:51:45 +05:30
parent 1bfd8d7f3c
commit b11b2a2f50
26 changed files with 171 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
web/pgadmin/static/js/BrowserComponent.jsx
View File

@@ -1,4 +1,4 @@
import React, {useLayoutEffect, useMemo } from 'react';
import React, {useEffect, useMemo, useState } from 'react';
import AppMenuBar from './AppMenuBar';
import ObjectBreadcrumbs from './components/ObjectBreadcrumbs';
import Layout, { LayoutDocker, getDefaultGroup } from './helpers/Layout';
@@ -35,27 +35,27 @@ const mainPanelGroup = {
};
export const processesPanelData = {
id: BROWSER_PANELS.PROCESSES, title: gettext('Processes'), content: <Processes />, closable: true, group: 'main'
id: BROWSER_PANELS.PROCESSES, title: gettext('Processes'), content: <Processes />, closable: true, group: 'playground'
};
export const defaultTabsData = [
{
id: BROWSER_PANELS.DASHBOARD, title: gettext('Dashboard'), content: <Dashboard />, closable: true, group: 'main'
id: BROWSER_PANELS.DASHBOARD, title: gettext('Dashboard'), content: <Dashboard />, closable: true, group: 'playground'
},
{
id: BROWSER_PANELS.PROPERTIES, title: gettext('Properties'), content: <Properties />, closable: true, group: 'main'
id: BROWSER_PANELS.PROPERTIES, title: gettext('Properties'), content: <Properties />, closable: true, group: 'playground'
},
{
id: BROWSER_PANELS.SQL, title: gettext('SQL'), content: <SQL />, closable: true, group: 'main'
id: BROWSER_PANELS.SQL, title: gettext('SQL'), content: <SQL />, closable: true, group: 'playground'
},
{
id: BROWSER_PANELS.STATISTICS, title: gettext('Statistics'), content: <Statistics />, closable: true, group: 'main'
id: BROWSER_PANELS.STATISTICS, title: gettext('Statistics'), content: <Statistics />, closable: true, group: 'playground'
},
{
id: BROWSER_PANELS.DEPENDENCIES, title: gettext('Dependencies'), content: <Dependencies />, closable: true, group: 'main'
id: BROWSER_PANELS.DEPENDENCIES, title: gettext('Dependencies'), content: <Dependencies />, closable: true, group: 'playground'
},
{
id: BROWSER_PANELS.DEPENDENTS, title: gettext('Dependents'), content: <Dependents />, closable: true, group: 'main'
id: BROWSER_PANELS.DEPENDENTS, title: gettext('Dependents'), content: <Dependents />, closable: true, group: 'playground'
},
processesPanelData,
];
@@ -81,9 +81,9 @@ export default function BrowserComponent({pgAdmin}) {
{
size: 80,
id: BROWSER_PANELS.MAIN,
group: 'main',
group: 'playground',
tabs: defaultTabsData.map((t)=>LayoutDocker.getPanel(t)),
panelLock: {panelStyle: 'main'},
panelLock: {panelStyle: 'playground'},
}
]
},
@@ -92,10 +92,13 @@ export default function BrowserComponent({pgAdmin}) {
};
const {isLoading, failed} = usePreferences();
let { name: browser } = useMemo(()=>getBrowser(), []);
const [uiReady, setUiReady] = useState(false);
useLayoutEffect(()=>{
pgAdmin?.Browser?.uiloaded?.();
}, []);
useEffect(()=>{
if(uiReady) {
pgAdmin?.Browser?.uiloaded?.();
}
}, [uiReady]);
if(isLoading) {
return <></>;
@@ -107,9 +110,9 @@ export default function BrowserComponent({pgAdmin}) {
return (
<PgAdminContext.Provider value={pgAdmin}>
<ModalProvider>
<NotifierProvider pgAdmin={pgAdmin} />
<NotifierProvider pgAdmin={pgAdmin} onReady={()=>setUiReady(true)}/>
{browser != 'Nwjs' && <AppMenuBar />}
<div style={{height: 'calc(100% - 32px)'}}>
<div style={{height: 'calc(100% - 30px)'}}>
<Layout
getLayoutInstance={(obj)=>{
pgAdmin.Browser.docker = obj;
@@ -119,7 +122,7 @@ export default function BrowserComponent({pgAdmin}) {
savedLayout={pgAdmin.Browser.utils.layout}
groups={{
'object-explorer': objectExplorerGroup,
'main': mainPanelGroup,
'playground': mainPanelGroup,
}}
noContextGroups={['object-explorer']}
resetToTabPanel={BROWSER_PANELS.MAIN}

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

@@ -39,6 +39,7 @@ import DataGridView from './DataGridView';
import { useIsMounted } from '../custom_hooks';
import ErrorBoundary from '../helpers/ErrorBoundary';
import { usePgAdmin } from '../BrowserComponent';
import { PgButtonGroup } from '../components/Buttons';
const useDialogStyles = makeStyles((theme)=>({
root: {
@@ -866,7 +867,7 @@ const usePropsStyles = makeStyles((theme)=>({
flexGrow: 1,
},
toolbar: {
padding: theme.spacing(0.5, 1),
padding: theme.spacing(1),
background: theme.palette.background.default,
...theme.mixins.panelBorder.bottom,
},
@@ -1000,11 +1001,13 @@ function SchemaPropertiesView({
<Box className={classes.root}>
<Loader message={loaderText}/>
<Box className={classes.toolbar}>
<PgIconButton
data-test="help" onClick={()=>props.onHelp(true, false)} icon={<InfoIcon />} disabled={props.disableSqlHelp}
title="SQL help for this object type." className={classes.buttonMargin} />
<PgIconButton data-test="edit"
onClick={props.onEdit} icon={<EditIcon />} title={gettext('Edit object...')} />
<PgButtonGroup size="small">
<PgIconButton
data-test="help" onClick={()=>props.onHelp(true, false)} icon={<InfoIcon />} disabled={props.disableSqlHelp}
title="SQL help for this object type." />
<PgIconButton data-test="edit"
onClick={props.onEdit} icon={<EditIcon />} title={gettext('Edit object...')} />
</PgButtonGroup>
</Box>
<Box className={clsx(classes.form, classes.formProperties)}>
<Box>

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

@@ -413,6 +413,9 @@ function getFinalTheme(baseTheme) {
MuiAccordion: {
root: {
...mixins.panelBorder,
'&.Mui-expanded': {
marginBottom: '8px',
},
}
},
MuiAccordionSummary: {

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

@@ -41,10 +41,14 @@ export default function rcdockOverride(theme) {
},
'& .dock-tab-active': {
color: theme.palette.text.primary,
cursor: 'move',
'&::hover': {
color: theme.palette.text.primary,
}
},
'& .dock-tab-btn': {
pointerEvents: 'none',
}
},
'&.dock-style-dialogs': {
borderRadius: theme.shape.borderRadius,
@@ -159,7 +163,30 @@ export default function rcdockOverride(theme) {
},
'& .drag-accept-reject::after': {
content: '',
},
'& .dock-nav-more': {
color: theme.custom.icon.contrastText
}
}
},
'.dock-dropdown': {
zIndex: 1004,
'& .dock-dropdown-menu': {
padding: '4px 0px',
backgroundColor: theme.palette.background.default,
color: theme.palette.text.primary,
border: `1px solid ${theme.otherVars.borderColor}`,
},
'& .dock-dropdown-menu-item': {
display: 'flex',
padding: '3px 12px',
color: theme.palette.text.primary,
transition: 'none',
'&.dock-dropdown-menu-item-active, &:hover': {
backgroundColor: theme.palette.primary.main,
color: theme.palette.primary.contrastText,
}
}
},
};
}

2
web/pgadmin/static/js/ToolView.jsx
View File

@@ -69,7 +69,7 @@ export default function ToolView() {
manualClose: true,
...tabParams,
cache: false,
group: 'main'
group: 'playground'
}, BROWSER_PANELS.MAIN, 'middle', true);
}
});

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

@@ -81,11 +81,11 @@ const useStyles = makeStyles((theme)=>({
},
noBorder: {
border: 0,
color: 'inherit',
backgroundColor: 'transparent',
color: theme.custom.icon.contrastText,
'&:hover': {
border: 0,
color: 'inherit',
color: theme.custom.icon.contrastText,
backgroundColor: 'inherit',
filter: 'brightness(85%)',
},

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

@@ -92,7 +92,7 @@ const useStyles = makeStyles((theme) => ({
pgTableHeader: {
display: 'flex',
background: theme.palette.background.default,
padding: '4px 8px',
padding: '8px 8px 4px',
},
tableRowContent:{
display: 'flex',

1
web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx
View File

@@ -118,7 +118,6 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
setPseudoActiveFile: this.setPseudoActiveFile,
toggleDirectory: this.toggleDirectory,
closeDir: this.closeDir,
remove: this.removeDir,
newFile: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewFile(dirOrPath as string)),
newFolder: async (dirOrPath: Directory | string) => this.supervisePrompt(await handle.promptNewDirectory(dirOrPath as string)),
onBlur: (callback) => this.events.add(FileTreeXEvent.OnBlur, callback),

2
web/pgadmin/static/js/helpers/Layout/index.jsx
View File

@@ -335,7 +335,7 @@ export function getDefaultGroup() {
closable: false,
maximizable: false,
floatable: false,
moreIcon: <ExpandMoreIcon style={{height: '0.9em'}} />,
moreIcon: <ExpandMoreIcon style={{height: '0.9em', marginTop: '4px'}} />,
panelExtra: (panelData, context) => {
let icon = <ExpandDialogIcon style={{width: '0.7em'}}/>;
let title = gettext('Maximise');

5
web/pgadmin/static/js/helpers/Notifier.jsx
View File

@@ -183,13 +183,14 @@ class Notifier {
}
}
export function NotifierProvider({ pgAdmin, pgWindow, getInstance, children }) {
export function NotifierProvider({ pgAdmin, pgWindow, getInstance, children, onReady }) {
const modal = useModal();
useEffect(()=>{
// if open in an iframe then use top pgAdmin
if(window.self != window.top) {
pgAdmin.Browser.notifier = new Notifier(modal, pgWindow.pgAdmin.Browser.notifier.snackbar);
onReady?.();
getInstance?.(pgAdmin.Browser.notifier);
}
}, []);
@@ -203,6 +204,7 @@ export function NotifierProvider({ pgAdmin, pgWindow, getInstance, children }) {
ref={(obj)=>{
pgAdmin.Browser.notifier = new Notifier(modal, new SnackbarNotifier(obj));
getInstance?.(pgAdmin.Browser.notifier);
onReady?.();
}}
>
{children}
@@ -221,6 +223,7 @@ NotifierProvider.propTypes = {
pgWindow: PropTypes.object,
getInstance: PropTypes.func,
children: CustomPropTypes.children,
onReady: PropTypes.func,
};
export default Notifier;

1
web/pgadmin/static/scss/_pgadmin.style.scss
View File

@@ -960,6 +960,7 @@ table.table-empty-rows{
.dialog-node-icon {
margin-right: 2px !important;
padding: 0px 10px;
background-position: 50%;
}
textarea {