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 Notify from '../../../static/js/helpers/Notifier';
import gettext from 'sources/gettext'; import gettext from 'sources/gettext';
import 'wcdocker'; import 'wcdocker';
import Theme from '../../../static/js/Theme';
/* The entry point for rendering React based view in properties, called in node.js */ /* 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) { 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 */ /* Fire at will, mount the DOM */
ReactDOM.render( ReactDOM.render(
<SchemaView <Theme>
formType={formType} <SchemaView
getInitData={initData} formType={formType}
schema={schema} getInitData={initData}
viewHelperProps={viewHelperProps} schema={schema}
onSave={onSaveClick} viewHelperProps={viewHelperProps}
onClose={()=>containerPanel.close()} onSave={onSaveClick}
onHelp={onHelp} onClose={()=>containerPanel.close()}
onEdit={onEdit} onHelp={onHelp}
onDataChange={(dataChanged)=>{ onEdit={onEdit}
isDirty = dataChanged; onDataChange={(dataChanged)=>{
}} isDirty = dataChanged;
confirmOnCloseReset={confirmOnCloseReset} }}
hasSQL={nodeObj.hasSQL && (actionType === 'create' || actionType === 'edit')} confirmOnCloseReset={confirmOnCloseReset}
getSQLValue={getSQLValue} hasSQL={nodeObj.hasSQL && (actionType === 'create' || actionType === 'edit')}
disableSqlHelp={nodeObj.sqlAlterHelp == '' && nodeObj.sqlCreateHelp == '' && !nodeObj.epasHelp} getSQLValue={getSQLValue}
disableDialogHelp={nodeObj.dialogHelp == undefined || nodeObj.dialogHelp == ''} disableSqlHelp={nodeObj.sqlAlterHelp == '' && nodeObj.sqlCreateHelp == '' && !nodeObj.epasHelp}
/>, container); disableDialogHelp={nodeObj.dialogHelp == undefined || nodeObj.dialogHelp == ''}
/>
</Theme>, container);
} }
/* When switching from normal node to collection node, clean up the React mounted DOM */ /* 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 _ from 'lodash';
import {FormFooterMessage, MESSAGE_TYPE } from 'sources/components/FormComponents'; import {FormFooterMessage, MESSAGE_TYPE } from 'sources/components/FormComponents';
import Theme from 'sources/Theme';
import { PrimaryButton, DefaultButton, PgIconButton } from 'sources/components/Buttons'; import { PrimaryButton, DefaultButton, PgIconButton } from 'sources/components/Buttons';
import Loader from 'sources/components/Loader'; import Loader from 'sources/components/Loader';
import { minMaxValidator, numberValidator, integerValidator, emptyValidator, checkUniqueCol, isEmptyString} from '../validators'; 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 */ /* Switch the view based on formType */
if(formType === 'tab') { if(formType === 'tab') {
return ( return (
<Theme> <ErrorBoundary>
<ErrorBoundary> <SchemaPropertiesView {...props}/>
<SchemaPropertiesView {...props}/> </ErrorBoundary>
</ErrorBoundary>
</Theme>
); );
} }
return ( return (
<Theme> <ErrorBoundary>
<ErrorBoundary> <SchemaDialogView {...props}/>
<SchemaDialogView {...props}/> </ErrorBoundary>
</ErrorBoundary>
</Theme>
); );
} }

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

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

@ -10,7 +10,6 @@
import _ from 'lodash'; import _ from 'lodash';
import React, { useContext, useState, useMemo, useEffect } from 'react'; import React, { useContext, useState, useMemo, useEffect } from 'react';
import gettext from 'sources/gettext'; import gettext from 'sources/gettext';
import Theme from 'sources/Theme';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import url_for from 'sources/url_for'; import url_for from 'sources/url_for';
import Loader from 'sources/components/Loader'; import Loader from 'sources/components/Loader';
@ -324,54 +323,52 @@ export function GraphVisualiser({initColumns}) {
}; };
return ( return (
<Theme> <Box className={classes.mainContainer}>
<Box className={classes.mainContainer}> <Loader message={loaderText} />
<Loader message={loaderText} /> <Box className={classes.topContainer}>
<Box className={classes.topContainer}> <Box className={classes.displayFlex}>
<Box className={classes.displayFlex}> <Box className={classes.displayFlex}>
<Box className={classes.displayFlex}> <span className={classes.spanLabel}>{gettext('X Axis')}</span>
<span className={classes.spanLabel}>{gettext('X Axis')}</span> <InputSelect className={classes.selectCtrl} options={xAxisOptions}
<InputSelect className={classes.selectCtrl} options={xAxisOptions} onChange={(v)=>setXAxis(v)} value={xaxis} optionsReloadBasis={optionsReload}/>
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>
</Box> </Box>
<Box className={classes.displayFlex}> <Box className={classes.displayFlex} marginLeft="auto">
<span className={classes.spanLabel}>{gettext('Y Axis')}</span> <span className={classes.spanLabel} >{gettext('Graph Type')}</span>
<InputSelect className={classes.selectCtrl} controlProps={{'multiple': true, allowSelectAll: true}} <InputSelect className={classes.selectCtrl} controlProps={{allowClear: false}}
options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/> 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> </Box>
<DefaultButton onClick={onGenerate} startIcon={<ShowChartRoundedIcon />}
disabled={ _.isEmpty(xaxis) || yaxis.length <= 0 }>
{gettext('Generate')}
</DefaultButton>
</Box> </Box>
<Box display="flex" marginLeft="3px" marginTop="3px"> <Box className={classes.displayFlex}>
<PgButtonGroup size="small"> <span className={classes.spanLabel}>{gettext('Y Axis')}</span>
<PgIconButton title={gettext('Zoom to original')} icon={<ZoomOutMapIcon style={{height: '1.2rem'}}/>} <InputSelect className={classes.selectCtrl} controlProps={{'multiple': true, allowSelectAll: true}}
onClick={()=>onResetZoom()} disabled={ graphData.datasets.length <= 0 }/> options={yAxisOptions} onChange={(v)=>setYAxis(v)} value={yaxis} optionsReloadBasis={optionsReload}/>
<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>
</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 = { GraphVisualiser.propTypes = {