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

Theme component usage has been fixed, a component should never be wrapped in multiple Theme components.

Browse Source
This commit is contained in:
Aditya Toshniwal 2022-06-30 15:18:20 +05:30 committed by Akshay Joshi
parent b92e2fcfc9
commit 86b30b3c83
4 changed files with 95 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
web/pgadmin/browser/static/js/node_view.jsx
View File

@ -18,6 +18,7 @@ import { generateNodeUrl } from './node_ajax';
import Notify from '../../../static/js/helpers/Notifier';
import gettext from 'sources/gettext';
import 'wcdocker';
import Theme from '../../../static/js/Theme';
/* The entry point for rendering React based view in properties, called in node.js */
export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, formType, container, containerPanel, onEdit, onSave) {
@ -204,24 +205,26 @@ export function getNodeView(nodeType, treeNodeInfo, actionType, itemNodeData, fo
/* Fire at will, mount the DOM */
ReactDOM.render(
<SchemaView
formType={formType}
getInitData={initData}
schema={schema}
viewHelperProps={viewHelperProps}
onSave={onSaveClick}
onClose={()=>containerPanel.close()}
onHelp={onHelp}
onEdit={onEdit}
onDataChange={(dataChanged)=>{
isDirty = dataChanged;
}}
confirmOnCloseReset={confirmOnCloseReset}
hasSQL={nodeObj.hasSQL && (actionType === 'create' || actionType === 'edit')}
getSQLValue={getSQLValue}
disableSqlHelp={nodeObj.sqlAlterHelp == '' && nodeObj.sqlCreateHelp == '' && !nodeObj.epasHelp}
disableDialogHelp={nodeObj.dialogHelp == undefined || nodeObj.dialogHelp == ''}
/>, container);
<Theme>
<SchemaView
formType={formType}
getInitData={initData}
schema={schema}
viewHelperProps={viewHelperProps}
onSave={onSaveClick}
onClose={()=>containerPanel.close()}
onHelp={onHelp}
onEdit={onEdit}
onDataChange={(dataChanged)=>{
isDirty = dataChanged;
}}
confirmOnCloseReset={confirmOnCloseReset}
hasSQL={nodeObj.hasSQL && (actionType === 'create' || actionType === 'edit')}
getSQLValue={getSQLValue}
disableSqlHelp={nodeObj.sqlAlterHelp == '' && nodeObj.sqlCreateHelp == '' && !nodeObj.epasHelp}
disableDialogHelp={nodeObj.dialogHelp == undefined || nodeObj.dialogHelp == ''}
/>
</Theme>, container);
}
/* When switching from normal node to collection node, clean up the React mounted DOM */

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

@ -22,7 +22,6 @@ import diffArray from 'diff-arrays-of-objects';
import _ from 'lodash';
import {FormFooterMessage, MESSAGE_TYPE } from 'sources/components/FormComponents';
import Theme from 'sources/Theme';
import { PrimaryButton, DefaultButton, PgIconButton } from 'sources/components/Buttons';
import Loader from 'sources/components/Loader';
import { minMaxValidator, numberValidator, integerValidator, emptyValidator, checkUniqueCol, isEmptyString} from '../validators';
@ -979,19 +978,15 @@ export default function SchemaView({formType, ...props}) {
/* Switch the view based on formType */
if(formType === 'tab') {
return (
<Theme>
<ErrorBoundary>
<SchemaPropertiesView {...props}/>
</ErrorBoundary>
</Theme>
<ErrorBoundary>
<SchemaPropertiesView {...props}/>
</ErrorBoundary>
);
}
return (
<Theme>
<ErrorBoundary>
<SchemaDialogView {...props}/>
</ErrorBoundary>
</Theme>
<ErrorBoundary>
<SchemaDialogView {...props}/>
</ErrorBoundary>
);
}

58
web/pgadmin/static/js/helpers/ModalProvider.jsx
View File

@ -17,7 +17,6 @@ import CloseIcon from '@material-ui/icons/CloseRounded';
import CustomPropTypes from '../custom_prop_types';
import PropTypes from 'prop-types';
import gettext from 'sources/gettext';
import Theme from '../Theme';
import HTMLReactParser from 'html-react-parser';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import { Rnd } from 'react-rnd';
@ -267,36 +266,35 @@ function ModalContainer({ id, title, content, dialogHeight, dialogWidth, onClose
const [isfullScreen, setIsFullScreen] = useState(fullScreen);
return (
<Theme>
<Dialog
open={true}
onClose={closeModal}
PaperComponent={PaperComponent}
PaperProps={{ 'isfullscreen': isfullScreen.toString(), 'isresizeable': isResizeable.toString(), width: dialogWidth, height: dialogHeight }}
fullScreen={isfullScreen}
fullWidth={isFullWidth}
disableBackdropClick
>
<DialogTitle className='modal-drag-area'>
<Box className={classes.titleBar}>
<Box className={classes.title} marginRight="0.25rem" >{title}</Box>
{
showFullScreen && !isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
{
showFullScreen && isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
<Dialog
open={true}
onClose={closeModal}
PaperComponent={PaperComponent}
PaperProps={{ 'isfullscreen': isfullScreen.toString(), 'isresizeable': isResizeable.toString(), width: dialogWidth, height: dialogHeight }}
fullScreen={isfullScreen}
fullWidth={isFullWidth}
disableBackdropClick
disablePortal
>
<DialogTitle className='modal-drag-area'>
<Box className={classes.titleBar}>
<Box className={classes.title} marginRight="0.25rem" >{title}</Box>
{
showFullScreen && !isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Maximize')} icon={<ExpandDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
{
showFullScreen && isfullScreen &&
<Box className={classes.iconButtonStyle}><PgIconButton title={gettext('Minimize')} icon={<MinimizeDialogIcon className={classes.icon} />} size="xs" noBorder onClick={() => { setIsFullScreen(!isfullScreen); }} /></Box>
}
<Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={closeModal} /></Box>
</Box>
</DialogTitle>
<DialogContent height="100%">
{content(closeModal)}
</DialogContent>
</Dialog>
</Theme>
<Box marginLeft="auto"><PgIconButton title={gettext('Close')} icon={<CloseIcon />} size="xs" noBorder onClick={closeModal} /></Box>
</Box>
</DialogTitle>
<DialogContent height="100%">
{content(closeModal)}
</DialogContent>
</Dialog>
);
}
ModalContainer.propTypes = {

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

@ -10,7 +10,6 @@
import _ from 'lodash';
import React, { useContext, useState, useMemo, useEffect } from 'react';
import gettext from 'sources/gettext';
import Theme from 'sources/Theme';
import PropTypes from 'prop-types';
import url_for from 'sources/url_for';
import Loader from 'sources/components/Loader';
@ -324,54 +323,52 @@ export function GraphVisualiser({initColumns}) {
};
return (
<Theme>
<Box className={classes.mainContainer}>
<Loader message={loaderText} />
<Box className={classes.topContainer}>
<Box className={classes.mainContainer}>
<Loader message={loaderText} />
<Box className={classes.topContainer}>
<Box className={classes.displayFlex}>
<Box className={classes.displayFlex}>
<Box className={classes.displayFlex}>
<span className={classes.spanLabel}>{gettext('X Axis')}</span>
<InputSelect className={classes.selectCtrl} options={xAxisOptions}
onChange={(v)=>setXAxis(v)} value={xaxis} optionsReloadBasis={optionsReload}/>
</Box>
<Box className={classes.displayFlex} marginLeft="auto">
<span className={classes.spanLabel} >{gettext('Graph Type')}</span>
<InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
options={[
{label: gettext('Line Chart'), value: 'L'},
{label: gettext('Stacked Line Chart'), value: 'SL'},
{label: gettext('Bar Chart'), value: 'B'},
{label: gettext('Stacked Bar Chart'), value: 'SB'},
]} onChange={(v)=>setGraphType(v)} value={graphType} />
</Box>
<DefaultButton onClick={onGenerate} startIcon={<ShowChartRoundedIcon />}
disabled={ _.isEmpty(xaxis) || yaxis.length <= 0 }>
{gettext('Generate')}
</DefaultButton>
<span className={classes.spanLabel}>{gettext('X Axis')}</span>
<InputSelect className={classes.selectCtrl} options={xAxisOptions}
onChange={(v)=>setXAxis(v)} value={xaxis} optionsReloadBasis={optionsReload}/>
</Box>
<Box className={classes.displayFlex}>
<span className={classes.spanLabel}>{gettext('Y Axis')}</span>
<InputSelect className={classes.selectCtrl} controlProps={{'multiple': true, allowSelectAll: true}}
options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/>
<Box className={classes.displayFlex} marginLeft="auto">
<span className={classes.spanLabel} >{gettext('Graph Type')}</span>
<InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
options={[
{label: gettext('Line Chart'), value: 'L'},
{label: gettext('Stacked Line Chart'), value: 'SL'},
{label: gettext('Bar Chart'), value: 'B'},
{label: gettext('Stacked Bar Chart'), value: 'SB'},
]} onChange={(v)=>setGraphType(v)} value={graphType} />
</Box>
<DefaultButton onClick={onGenerate} startIcon={<ShowChartRoundedIcon />}
disabled={ _.isEmpty(xaxis) || yaxis.length <= 0 }>
{gettext('Generate')}
</DefaultButton>
</Box>
<Box display="flex" marginLeft="3px" marginTop="3px">
<PgButtonGroup size="small">
<PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon style={{height: '1.2rem'}}/>}
onClick={()=>onResetZoom()} disabled={ graphData.datasets.length <= 0 }/>
<PgIconButton title={gettext('Download')} icon={<SaveAltIcon style={{height: '1.2rem'}}/>}
onClick={onDownloadGraph} disabled={ graphData.datasets.length <= 0 }/>
</PgButtonGroup>
</Box>
<Box ref={contentRef} className={classes.graphContainer}>
<Box style={{height:`${graphHeight}px`}}>
{useMemo(()=> <GenerateGraph graphType={graphType} graphData={graphData} onInit={(chartObj)=> {
chartObjRef.current = chartObj;
}} plugins={plugin}/>, [graphDataKey])}
</Box>
<Box className={classes.displayFlex}>
<span className={classes.spanLabel}>{gettext('Y Axis')}</span>
<InputSelect className={classes.selectCtrl} controlProps={{'multiple': true, allowSelectAll: true}}
options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/>
</Box>
</Box>
</Theme>
<Box display="flex" marginLeft="3px" marginTop="3px">
<PgButtonGroup size="small">
<PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon style={{height: '1.2rem'}}/>}
onClick={()=>onResetZoom()} disabled={ graphData.datasets.length <= 0 }/>
<PgIconButton title={gettext('Download')} icon={<SaveAltIcon style={{height: '1.2rem'}}/>}
onClick={onDownloadGraph} disabled={ graphData.datasets.length <= 0 }/>
</PgButtonGroup>
</Box>
<Box ref={contentRef} className={classes.graphContainer}>
<Box style={{height:`${graphHeight}px`}}>
{useMemo(()=> <GenerateGraph graphType={graphType} graphData={graphData} onInit={(chartObj)=> {
chartObjRef.current = chartObj;
}} plugins={plugin}/>, [graphDataKey])}
</Box>
</Box>
</Box>
);
}
GraphVisualiser.propTypes = {