Fixed bugs found while testing makeStyles JSS changes. #7363

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/__init__.py

@@ -580,7 +580,7 @@ class RuleView(PGChildNodeView, SchemaDiffObjectCompare):
 
         return sql
 
-    @ staticmethod
+    @staticmethod
     def _check_schema_diff(target_schema, res_data):
         """
         Check for schema diff, if yes then replace source schema with target

web/pgadmin/misc/cloud/static/js/aws.js

@@ -8,7 +8,6 @@
 //////////////////////////////////////////////////////////////
 
 import React from 'react';
-import { styled } from '@mui/material/styles';
 import pgAdmin from 'sources/pgadmin';
 import { getNodeAjaxOptions, getNodeListById } from 'pgbrowser/node_ajax';
 import {CloudInstanceDetailsSchema, CloudDBCredSchema, DatabaseSchema} from './aws_schema.ui';
@@ -19,13 +18,6 @@ import { isEmptyString } from 'sources/validators';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 
-const StyledSchemaView= styled(SchemaView)(() =>
-  ({
-    '& .aws-formClass': {
-      overflow: 'auto',
-    }
-  }));
-
 // AWS credentials
 export function AwsCredentials(props) {
   const [cloudDBCredInstance, setCloudDBCredInstance] = React.useState();
@@ -113,7 +105,7 @@ export function AwsInstanceDetails(props) {
   }, [props.cloudProvider]);
 
 
-  return  <StyledSchemaView
+  return  <SchemaView
     formType={'dialog'}
     getInitData={() => { /*This is intentional (SonarQube)*/ }}
     viewHelperProps={{ mode: 'create' }}
@@ -123,7 +115,6 @@ export function AwsInstanceDetails(props) {
     onDataChange={(isChanged, changedData) => {
       props.setCloudInstanceDetails(changedData);
     }}
-    formClassName='aws-formClass'
   />;
 }
 AwsInstanceDetails.propTypes = {

web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx

@@ -65,6 +65,9 @@ const StyledBox = styled(Box)(({theme}) => ({
         height: '100%',
         paddingTop: '5px',
         overflow: 'auto',
+        '& .PreferencesComponent-preferencesContainerBackground': {
+          backgroundColor: theme.palette.background.default,
+        }
       },
     },
     '& .PreferencesComponent-footer': {
@@ -123,6 +126,7 @@ function RightPanel({ schema, ...props }) {
       schema={schema}
       showFooter={false}
       isTabView={false}
+      formClassName='PreferencesComponent-preferencesContainerBackground'
       onDataChange={(isChanged, changedData) => {
         props.onDataChange(changedData);
       }}

web/pgadmin/static/js/Dialogs/ChangeOwnershipContent.jsx

@@ -1,4 +1,3 @@
-import { styled } from '@mui/material/styles';
 import React from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
@@ -6,13 +5,6 @@ import BaseUISchema from '../SchemaView/base_schema.ui';
 import SchemaView from '../SchemaView';
 import { isEmptyString } from 'sources/validators';
 
-
-const StyledSchemaView = styled(SchemaView)(({theme}) => ({
-  '& .ChangeOwnershipContent-root': {
-    ...theme.mixins.tabPanel,
-  }
-}));
-
 class ChangeOwnershipSchema extends BaseUISchema {
   constructor(deletedUser, adminUserList, noOfSharedServers) {
     super({
@@ -52,7 +44,7 @@ export default function ChangeOwnershipContent({onSave, onClose, deletedUser, us
 
   const objChangeOwnership = new ChangeOwnershipSchema(deletedUser, userList, noOfSharedServers);
 
-  return <StyledSchemaView
+  return <SchemaView
     formType={'dialog'}
     getInitData={() => { /*This is intentional (SonarQube)*/ }}
     schema={objChangeOwnership}
@@ -66,7 +58,6 @@ export default function ChangeOwnershipContent({onSave, onClose, deletedUser, us
     disableSqlHelp={true}
     disableDialogHelp={true}
     isTabView={false}
-    formClassName='ChangeOwnershipContent-root'
   />;
 }
 ChangeOwnershipContent.propTypes = {

web/pgadmin/static/js/Dialogs/ChangePasswordContent.jsx

@@ -1,16 +1,9 @@
-import { styled } from '@mui/material/styles';
 import React from 'react';
 import PropTypes from 'prop-types';
 import gettext from 'sources/gettext';
 import BaseUISchema from '../SchemaView/base_schema.ui';
 import SchemaView from '../SchemaView';
 
-const StyledSchemaView = styled(SchemaView )(({theme}) => ({
-  '& .ChangePasswordContent-root': {
-    ...theme.mixins.tabPanel,
-  }
-}));
-
 class ChangePasswordSchema extends BaseUISchema {
   constructor(user, isPgpassFileUsed, hasCsrfToken=false, showUser=true) {
     super({
@@ -72,7 +65,7 @@ class ChangePasswordSchema extends BaseUISchema {
 
 export default function ChangePasswordContent({getInitData=() => { /*This is intentional (SonarQube)*/ },
   onSave, onClose, hasCsrfToken=false, showUser=true}) {
-  return <StyledSchemaView
+  return <SchemaView
     formType={'dialog'}
     getInitData={getInitData}
     schema={new ChangePasswordSchema('', false, hasCsrfToken, showUser)}
@@ -86,7 +79,6 @@ export default function ChangePasswordContent({getInitData=() => { /*This is int
     disableSqlHelp={true}
     disableDialogHelp={true}
     isTabView={false}
-    formClassName='ChangePasswordContent-root'
   />;
 }
 ChangePasswordContent.propTypes = {

web/pgadmin/static/js/Explain/Analysis.jsx

@@ -31,6 +31,10 @@ const StyledTable = styled(Table)(({theme}) => ({
     backgroundColor: theme.otherVars.explain.sev4.bg,
     color: theme.otherVars.explain.sev4.color,
   },
+  '& .Analysis-header': {
+    border: 'none',
+    background: 'none'
+  }
 }));
 
 function getRowClassname(data, collapseParent) {
@@ -161,29 +165,29 @@ export default function Analysis({explainTable}) {
       <thead>
         <tr>
           <th rowSpan="2" style={{width: '30px'}}></th>
-          <th rowSpan="2"><button disabled="">#</button></th>
+          <th rowSpan="2"><button className='Analysis-header' disabled="">#</button></th>
-          <th rowSpan="2"><button disabled="">Node</button></th>
+          <th rowSpan="2"><button className='Analysis-header'  disabled="">Node</button></th>
           <th colSpan="2" style={explainTable.show_timings ? {} : {display: 'none'}}>
-            <button disabled="">{gettext('Timings')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Timings')}</button>
           </th>
           <th style={(explainTable.show_rowsx || explainTable.show_rows || explainTable.show_plan_rows) ? {} : {display: 'none'}}
             colSpan={(explainTable.show_rowsx) ? '3' : '1'}>
-            <button disabled="">{gettext('Rows')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Rows')}</button>
           </th>
           <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}} rowSpan="2">
-            <button disabled="">{gettext('Loops')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Loops')}</button>
           </th>
         </tr>
         <tr>
           <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-            <button disabled="">{gettext('Exclusive')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Exclusive')}</button>
           </th>
           <th style={explainTable.show_timings ? {} : {display: 'none'}}>
-            <button disabled="">{gettext('Inclusive')}</button>
+            <button className='Analysis-header' disabled="">{gettext('Inclusive')}</button>
           </th>
-          <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button disabled="">{gettext('Rows X')}</button></th>
+          <th style={explainTable.show_rowsx ? {} : {display: 'none'}}><button className='Analysis-header' disabled="">{gettext('Rows X')}</button></th>
-          <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Actual')}</button></th>
+          <th style={(explainTable.show_rowsx || explainTable.show_rows) ? {} : {display: 'none'}}><button className='Analysis-header' disabled="">{gettext('Actual')}</button></th>
-          <th style={(explainTable.show_rowsx || explainTable.show_plan_rows) ? {} : {display: 'none'}}><button disabled="">{gettext('Plan')}</button></th>
+          <th style={(explainTable.show_rowsx || explainTable.show_plan_rows) ? {} : {display: 'none'}}><button className='Analysis-header' disabled="">{gettext('Plan')}</button></th>
         </tr>
       </thead>
       <tbody>

web/pgadmin/static/js/SchemaView/FormView.jsx

@@ -52,7 +52,7 @@ const StyledBox = styled(Box)(({theme}) => ({
     }
   },
   '& .FormView-nonTabPanel': {
-    backgroundColor: 'inherit',
+    ...theme.mixins.tabPanel,
     '& .FormView-nonTabPanelContent': {
       height: 'unset',
       '& .FormView-controlRow': {
@@ -466,7 +466,7 @@ export default function FormView({
     let contentClassName = ['FormView-nonTabPanelContent', (stateUtils.formErr.message ? 'FormView-errorMargin' : null)];
     return (
       <StyledBox height="100%" display="flex" flexDirection="column" className={className} ref={formRef} data-test="form-view">
-        <TabPanel value={tabValue} index={0} classNameRoot='FormView-nonTabPanel'
+        <TabPanel value={tabValue} index={0} classNameRoot={['FormView-nonTabPanel',className].join(' ')}
           className={contentClassName.join(' ')}>
           {Object.keys(finalTabs).map((tabName)=>{
             return (

web/pgadmin/static/js/components/FormComponents.jsx

@@ -1068,12 +1068,14 @@ const ColorButton = withColorPicker(PgIconButton);
 export function InputColor({ value, controlProps, disabled, onChange, currObj }) {
   let btnStyles = { backgroundColor: value };
   return (
+    <Root>
       <ColorButton title={gettext('Select the color')} className='Form-colorBtn' style={btnStyles} disabled={disabled}
         icon={(_.isUndefined(value) || _.isNull(value) || value === '') && <CloseIcon data-label="CloseIcon" />} options={{
           ...controlProps,
           disabled: disabled
         }} onChange={onChange} value={value} currObj={currObj}
       />
+    </Root>
   );
 }
 InputColor.propTypes = {

web/pgadmin/static/js/components/Menu.jsx

@@ -69,7 +69,7 @@ export const PgMenuItem = applyStatics(MenuItem)(({hasCheck=false, checked=false
   return <MenuItem {...props} onClick={onClick} data-label={dataLabel} data-checked={checked}>
     {hasCheck && <CheckIcon  style={checked ? {} : {visibility: 'hidden', width: '1.3rem'}} data-label="CheckIcon"/>}
     {children}
-    <div>
+    <div style={{ marginLeft:'auto', fontSize:'0.8em', paddingLeft:'12px'}}>
       {keyVal ? `(${keyVal})` : ''}
     </div>
   </MenuItem>;

web/pgadmin/static/js/components/PgReactDataGrid.jsx

@@ -24,7 +24,7 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
     fontSize: '12px',
     border: 'none',
     '--rdg-selection-color': theme.palette.primary.main,
-    '&.rdg-cell': {
+    '& .rdg-cell': {
       ...theme.mixins.panelBorder.right,
       ...theme.mixins.panelBorder.bottom,
       fontWeight: 'abc',
@@ -43,7 +43,7 @@ const StyledReactDataGrid = styled(ReactDataGrid)(({theme})=>({
     '& .rdg-header-row': {
       backgroundColor: theme.palette.background.default,
     },
-    '&.rdg-row': {
+    '& .rdg-row': {
       backgroundColor: theme.palette.background.default,
       '&[aria-selected=true]': {
         backgroundColor: theme.palette.primary.light,

web/pgadmin/static/js/helpers/wizard/Wizard.jsx

@@ -174,24 +174,24 @@ function Wizard({ stepList, onStepChange, onSave, className, ...props }) {
 
   return (
     <StyledBox>
-      <div className={'Wizard-root ' + (props?.rootClass ? props.rootClass : '') }>
+      <div className={['Wizard-root', (props?.rootClass ? props.rootClass : '')].join(' ') }>
-        <div className={'Wizard-body ' + className}>
+        <div className={['Wizard-body', className].join(' ') }>
           <Box className='Wizard-leftPanel'>
             {steps.map((label, index) => (
-              <Box key={label} className={'Wizard-stepLabel ' + (index === activeStep ? 'Wizard-active' : '')}>
+              <Box key={label} className={['Wizard-stepLabel', (index === activeStep ? 'Wizard-active' : '')].join(' ') }>
-                <Box className={'Wizard-stepIndex ' + (index === activeStep ? 'Wizard-activeIndex' : '')}>{index + 1}</Box>
+                <Box className={['Wizard-stepIndex', (index === activeStep ? 'Wizard-activeIndex' : '')].join(' ') }>{index + 1}</Box>
                 <Box className='Wizard-label'>{label} </Box>
                 <Box className='Wizard-labelArrow'>{index === activeStep ? <ChevronRightIcon /> : null}</Box>
                 <Box className='Wizard-labelDone'>{index < activeStep ? <DoneIcon />: null}</Box>
               </Box>
             ))}
           </Box>
-          <div className={'Wizard-rightPanel ' + props.stepPanelCss}>
+          <div className={['Wizard-rightPanel', props.stepPanelCss].join(' ') }>
             <Loader message={props?.loaderText} />
             {
               React.Children.map(props.children, (child) => {
                 return (
-                  <div className={'Wizard-stepDefaultStyle ' + child.props.className + ' ' +(child.props.stepId !== activeStep ? 'Wizard-hidden' : '')}>
+                  <div className={['Wizard-stepDefaultStyle', child.props.className, (child.props.stepId !== activeStep ? 'Wizard-hidden' : '')].join(' ') }>
                     {child}
                   </div>
                 );

web/pgadmin/tools/import_export_servers/static/js/ImportExportServers.jsx

@@ -25,7 +25,7 @@ import PropTypes from 'prop-types';
 import pgAdmin from 'sources/pgadmin';
 import Table from '../../../../static/js/components/Table';
 
-const StyledBox = styled(Box)(() =>
+const StyledBox = styled(Box)(({theme}) =>
   ({
     height: '100%',
     '& .ImportExportServers-noOverflow': {
@@ -45,6 +45,9 @@ const StyledBox = styled(Box)(() =>
       '& .ImportExportServers-noteContainer': {
         marginTop: '5px',
       }
+    },
+    '& .ImportExportServers-Background':{
+      backgroundColor: theme.palette.background.default + ' !important',
     }
   }));
 
@@ -215,6 +218,7 @@ export default function ImportExportServers({onClose}) {
             schema={new ImportExportSelectionSchema()}
             showFooter={false}
             isTabView={false}
+            formClassName='ImportExportServers-Background'
             onDataChange={(isChanged, changedData) => {
               setSelectionFormData(changedData);
             }}

web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx

@@ -18,11 +18,16 @@ import url_for from 'sources/url_for';
 import Loader from 'sources/components/Loader';
 import getApiInstance, { parseApiError } from '../../../../static/js/api_instance';
 import { PrimaryButton, PgIconButton } from '../../../../static/js/components/Buttons';
-import { ModalContent } from '../../../../static/js/components/ModalContent';
 import { FormFooterMessage, InputSelect, InputText, MESSAGE_TYPE } from '../../../../static/js/components/FormComponents';
 import PgReactDataGrid from '../../../../static/js/components/PgReactDataGrid';
 
 const StyledBox = styled(Box)(({theme}) => ({
+  display:'flex',
+  flexGrow: '1',
+  flexDirection:'column',
+  position:'relative',
+  overflow:'hidden',
+  height: '100%',
   '& .SearchObjects-toolbar': {
     padding: '4px',
     display: 'flex',
@@ -41,7 +46,7 @@ const StyledBox = styled(Box)(({theme}) => ({
     alignItems: 'center',
     borderTop: `1px solid ${theme.otherVars.inputBorderColor}`,
   },
-  '&.SearchObjects-footer': {
+  '& .SearchObjects-footer': {
     borderTop: `1px solid ${theme.otherVars.inputBorderColor} !important`,
     padding: '0.5rem',
     display: 'flex',
@@ -393,7 +398,6 @@ export default function SearchObjects({nodeData}) {
   };
 
   return (
-    <ModalContent>
     <StyledBox>
       <Loader message={loaderText} />
       <Box className='SearchObjects-toolbar'>
@@ -428,11 +432,10 @@ export default function SearchObjects({nodeData}) {
         <Box>{footerText}</Box>
       </Box>
       <FormFooterMessage type={MESSAGE_TYPE.ERROR} message={errorMsg} closable onClose={()=>setErrorMsg('')}  />
-      </StyledBox>
+      <Box className='SearchObjects-footer'>
-      <StyledBox className='SearchObjects-footer'>
         <PgIconButton data-test="dialog-help" onClick={onDialogHelp} icon={<HelpIcon />} title={gettext('Help for this dialog.')} />
+      </Box>
     </StyledBox>
-    </ModalContent>
   );
 }
 

web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx

@@ -42,7 +42,7 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
       },
     },
   },
-  '&.Editors-input': {
+  '& .Editors-input': {
     appearance: 'none',
     width: '100%',
     height: '100%',
@@ -312,7 +312,7 @@ export function NumberEditor({row, column, onRowChange, onClose}) {
     }
   };
   return (
-    <StyledEditorDiv>
+    <StyledEditorDiv height={'100%'}>
       <input
         className='Editors-input'
         ref={autoFocusAndSelect}

web/pgadmin/tools/sqleditor/static/js/components/dialogs/MacrosDialog.jsx

@@ -7,11 +7,12 @@ import { QueryToolContext, getRandomName } from '../QueryToolComponent';
 import url_for from 'sources/url_for';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
+import { Box } from '@mui/material';
 
-const StyledSchemaView = styled(SchemaView)(({theme}) => ({
+const StyledBox = styled(Box)(() => ({
+  height: '100%',
   '& .MacrosDialog-root': {
-    ...theme.mixins.tabPanel,
+    padding: 0 + ' !important',
-    padding: 0,
   }
 }));
 
@@ -185,7 +186,8 @@ export default function MacrosDialog({onClose, onSave}) {
   }
 
   return (
-    <StyledSchemaView
+    <StyledBox>
+      <SchemaView
         formType={'dialog'}
         getInitData={()=>{
           if(macrosErr) {
@@ -205,6 +207,7 @@ export default function MacrosDialog({onClose, onSave}) {
         isTabView={false}
         formClassName='MacrosDialog-root'
       />
+    </StyledBox>
   );
 }
 

web/pgadmin/tools/sqleditor/static/js/components/sections/QueryHistory.jsx

@@ -27,6 +27,8 @@ const Root = styled('div')(({ theme }) => ({
   display: 'flex',
   height: '100%',
   '.QuerySources-leftRoot': {
+    flexBasis: '50%',
+    maxWidth: '50%',
     display: 'flex',
     flexDirection: 'column',
     backgroundColor: theme.otherVars.editorToolbarBg,
@@ -34,7 +36,10 @@ const Root = styled('div')(({ theme }) => ({
     '& .QuerySources-header': {
       padding: '0.25rem',
       display: 'flex',
-      flexWrap: 'wrap'
+      flexWrap: 'wrap',
+      '& .QuerySources-removeBtnMargin': {
+        marginLeft: '0.25rem',
+      },
     },
     '& .QuerySources-listRoot': {
       ...theme.mixins.panelBorder.top,
@@ -79,9 +84,6 @@ const Root = styled('div')(({ theme }) => ({
     '& .QuerySources-queryMargin': {
       marginTop: '12px',
     },
-    '& .QuerySources-removeBtnMargin': {
-      marginLeft: '0.25rem',
-    },
   },
   '& .QuerySources-infoHeader': {
     fontSize: '13px',
@@ -266,7 +268,7 @@ QuerySourceIcon.propTypes = {
 };
 
 function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick}) {
-  return <Root><ListItem tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
+  return <ListItem tabIndex="0" data-label="history-entry" data-pgadmin={entry.is_pgadmin_query} ref={(ele)=>{
     selectedItemKey==itemKey && ele?.scrollIntoView({
       block: 'center',
       behavior: 'smooth',
@@ -279,8 +281,7 @@ function HistoryEntry({entry, formatEntryDate, itemKey, selectedItemKey, onClick
     <Box fontSize="12px">
       {formatEntryDate(entry.start_time)}
     </Box>
-  </ListItem>
+  </ListItem>;
-  </Root>;
 }
 
 const EntryPropType = PropTypes.shape({
@@ -321,15 +322,13 @@ function QueryHistoryDetails({entry}) {
   }, [entry]);
 
   if(!entry) {
-    return <Root>
+    return <Box display="flex" height="100%">
-      <Box display="flex" height="100%">
       <EmptyPanelMessage text={gettext('Select an history entry to see details.')} />
-      </Box>
+    </Box>;
-    </Root>;
   }
 
   return (
-    <Root>
+    <>
       {entry.info && <Box className='QuerySources-infoHeader'>{entry.info}</Box>}
       <Box padding="0.5rem" data-label="history-detail">
         <Grid container>
@@ -361,7 +360,7 @@ function QueryHistoryDetails({entry}) {
           <Box className='QuerySources-fontSourceCode' fontSize="13px" whiteSpace="pre-wrap">{_.isObject(entry.message) ? JSON.stringify(entry.message) : entry.message}</Box>
         </Box>
       </Box>
-    </Root>
+    </>
   );
 }
 
@@ -491,11 +490,11 @@ export function QueryHistory() {
     <Root>
       <Loader message={loaderText} />
       {React.useMemo(()=>(
-        <Box display="flex" height="100%">
+        <>
           {qhu.current.size() == 0 ?
             <EmptyPanelMessage text={gettext('No history found')} />:
             <>
-              <Box flexBasis="50%" maxWidth="50%" className='QuerySources-leftRoot'>
+              <Box className='QuerySources-leftRoot'>
                 <Box className='QuerySources-header'>
                   <Box marginRight="auto">
                     {gettext('Show queries generated internally by pgAdmin?')}
@@ -531,7 +530,7 @@ export function QueryHistory() {
                 <QueryHistoryDetails entry={selectedEntry}/>
               </Box>
             </>}
-        </Box>
+        </>
       ), [selectedItemKey, showInternal, qhu.current.size()])}
     </Root>
   );

web/pgadmin/tools/user_management/static/js/UserManagementDialog.jsx

@@ -7,6 +7,7 @@
 //
 //////////////////////////////////////////////////////////////
 import React from 'react';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import SchemaView from '../../../../static/js/SchemaView';
 import BaseUISchema from '../../../../static/js/SchemaView/base_schema.ui';
@@ -22,10 +23,10 @@ import { showChangeOwnership } from '../../../../static/js/Dialogs/index';
 import { BROWSER_PANELS } from '../../../../browser/static/js/constants';
 import _ from 'lodash';
 
-const StyledSchemaView = styled(SchemaView)(({theme}) => ({
+const StyledBox = styled(Box)(() => ({
+  height: '100%',
   '& .UserManagementDialog-root': {
-    ...theme.mixins.tabPanel,
+    padding: 0 + ' !important',
-    padding: 0,
   }
 }));
 
@@ -393,7 +394,7 @@ function UserManagementDialog({onClose}) {
     window.open(url_for('help.static', { 'filename': 'user_management.html' }), 'pgadmin_help');
   };
 
-  return <StyledSchemaView
+  return <StyledBox><SchemaView
     formType={'dialog'}
     getInitData={()=>{ return new Promise((resolve, reject)=>{
       api.get(url_for('user_management.users'))
@@ -415,7 +416,7 @@ function UserManagementDialog({onClose}) {
     disableSqlHelp={true}
     isTabView={false}
     formClassName='UserManagementDialog-root'
-  />;
+  /></StyledBox>;
 }
 
 UserManagementDialog.propTypes = {

web/regression/feature_tests/query_tool_journey_test.py

@@ -362,7 +362,7 @@ class QueryToolJourneyTest(BaseFeatureTest):
     def _check_history_queries_and_icons(self, history_queries, history_icons):
         # Select first query history entry
         self.page.find_by_css_selector(
-            QueryToolLocators.query_history_specific_entry.format(1)).click()
+            QueryToolLocators.query_history_specific_entry.format(2)).click()
         for icon, query in zip(history_icons, history_queries):
             # Check query
             query_history_selected_item = self.page.find_by_css_selector(