Fixed some of pgAdmin CLI bugs. pgadmin-org#7116

pravesh-sharma · Mar 14, 2024 · f0c477c · f0c477c
1 parent 3039821
commit f0c477c
Show file tree

Hide file tree

Showing 7 changed files with 118 additions and 66 deletions.
diff --git a/web/pgadmin/preferences/__init__.py b/web/pgadmin/preferences/__init__.py
@@ -134,6 +134,7 @@ def _iterate_categories(pref_d, label, res):
         "open": True,
         "children": [],
         "value": gettext(pref_d['label']),
+        "name": pref_d['name']
     }
 
     for c in pref_d['categories']:

diff --git a/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx b/web/pgadmin/preferences/static/js/components/PreferencesComponent.jsx
@@ -185,7 +185,7 @@ export default function PreferencesComponent({ ...props }) {
           'id': id.toString(),
           'label': node.label,
           '_label': node.label,
-          'name': node.label,
+          'name': node.name,
           'icon': '',
           'inode': true,
           'type': 2,
@@ -378,7 +378,7 @@ export default function PreferencesComponent({ ...props }) {
           if(field.visible && _.isNull(firstElement)) {
             firstElement = field;
           }
-          field.tooltip = item._parent._metadata.data.name.toLowerCase() + ':' + item._metadata.data.name + ':' + field.name;
+          field.labelTooltip = item._parent._metadata.data.name.toLowerCase() + ':' + item._metadata.data.name + ':' + field.name;
         });
         setLoadTree(crypto.getRandomValues(new Uint16Array(1)));
         initTreeTimeout = setTimeout(() => {

diff --git a/web/pgadmin/static/js/SchemaView/FormView.jsx b/web/pgadmin/static/js/SchemaView/FormView.jsx
@@ -8,7 +8,7 @@
 //////////////////////////////////////////////////////////////
 
 import React, { useContext, useEffect, useRef, useState } from 'react';
-import { Box, makeStyles, Tab, Tabs, Tooltip } from '@material-ui/core';
+import { Box, makeStyles, Tab, Tabs } from '@material-ui/core';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -363,10 +363,6 @@ export default function FormView({
           ]}
         />;
 
-        if(field.tooltip) {
-          currentControl = <Tooltip title={field.tooltip} aria-label={field.tooltip}>{currentControl}</Tooltip>;
-        }
-
         if(field.isFullTab && field.helpMessage) {
           currentControl = (<React.Fragment key={`coll-${field.id}`}>
             <FormNote key={`note-${field.id}`} text={field.helpMessage}/>

diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx
@@ -212,7 +212,7 @@ const ALLOWED_PROPS_FIELD_COMMON = [
   'label', 'options', 'optionsLoaded', 'controlProps', 'schema', 'inputRef',
   'visible', 'autoFocus', 'helpMessage', 'className', 'optionsReloadBasis',
   'orientation', 'isvalidate', 'fields', 'radioType', 'hideBrowseButton', 'btnName', 'hidden',
-  'withContainer', 'controlGridBasis', 'hasCheckbox', 'treeData', 'title'
+  'withContainer', 'controlGridBasis', 'hasCheckbox', 'treeData', 'labelTooltip'
 ];
 
 const ALLOWED_PROPS_FIELD_FORM = [

diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -12,7 +12,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import { makeStyles } from '@material-ui/core/styles';
 import {
   Box, FormControl, OutlinedInput, FormHelperText,
-  Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper, Select as MuiSelect, Radio,
+  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';
@@ -127,7 +127,7 @@ FormIcon.propTypes = {
 };
 
 /* Wrapper on any form component to add label, error indicator and help message */
-export function FormInput({ children, error, className, label, helpMessage, required, testcid, lid, withContainer=true, labelGridBasis=3, controlGridBasis=9 }) {
+export function FormInput({ children, error, className, label, helpMessage, required, testcid, lid, withContainer=true, labelGridBasis=3, controlGridBasis=9, labelTooltip='' }) {
   const classes = useStyles();
   const cid = testcid || _.uniqueId('c');
   const helpid = `h${cid}`;
@@ -149,13 +149,20 @@ export function FormInput({ children, error, className, label, helpMessage, requ
       </>
     );
   }
+
+  let labelComponent = <InputLabel id={lid} htmlFor={lid ? undefined : cid} className={clsx(classes.formLabel, error ? classes.formLabelError : null)} required={required}>
+    {label}
+    <FormIcon type={MESSAGE_TYPE.ERROR} style={{ marginLeft: 'auto', visibility: error ? 'unset' : 'hidden' }} />
+  </InputLabel>;
   return (
     <Grid container spacing={0} className={className} data-testid="form-input">
       <Grid item lg={labelGridBasis} md={labelGridBasis} sm={12} xs={12}>
-        <InputLabel id={lid} htmlFor={lid ? undefined : cid} className={clsx(classes.formLabel, error ? classes.formLabelError : null)} required={required}>
-          {label}
-          <FormIcon type={MESSAGE_TYPE.ERROR} style={{ marginLeft: 'auto', visibility: error ? 'unset' : 'hidden' }} />
-        </InputLabel>
+        {
+          labelTooltip ? 
+            <Tooltip title={labelTooltip}>
+              {labelComponent}
+            </Tooltip> : labelComponent
+        }
       </Grid>
       <Grid item lg={controlGridBasis} md={controlGridBasis} sm={12} xs={12}>
         <FormControl error={Boolean(error)} fullWidth>
@@ -178,6 +185,7 @@ FormInput.propTypes = {
   withContainer: PropTypes.bool,
   labelGridBasis: PropTypes.number,
   controlGridBasis: PropTypes.number,
+  labelTooltip: PropTypes.string
 };
 
 export function InputSQL({ value, options, onChange, className, controlProps, inputRef, ...props }) {
@@ -325,9 +333,9 @@ InputDateTimePicker.propTypes = {
   controlProps: PropTypes.object,
 };
 
-export function FormInputDateTimePicker({ hasError, required, label, className, helpMessage, testcid, ...props }) {
+export function FormInputDateTimePicker({ hasError, required, label, className, helpMessage, testcid, labelTooltip, ...props }) {
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <InputDateTimePicker {...props} />
     </FormInput>
   );
@@ -342,6 +350,7 @@ FormInputDateTimePicker.propTypes = {
   value: PropTypes.string,
   controlProps: PropTypes.object,
   change: PropTypes.func,
+  labelTooltip: PropTypes.string
 };
 
 /* Use forwardRef to pass ref prop to OutlinedInput */
@@ -426,9 +435,9 @@ InputText.propTypes = {
   inputStyle: PropTypes.object
 };
 
-export function FormInputText({ hasError, required, label, className, helpMessage, testcid, ...props }) {
+export function FormInputText({ hasError, required, label, className, helpMessage, testcid, labelTooltip, ...props }) {
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip} >
       <InputText label={label} {...props} />
     </FormInput>
   );
@@ -440,6 +449,7 @@ FormInputText.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
+  labelTooltip: PropTypes.string
 };
 
 export function InputFileSelect({ controlProps, onChange, disabled, readonly, isvalidate = false, hideBrowseButton=false,validate, ...props }) {
@@ -488,10 +498,10 @@ InputFileSelect.propTypes = {
 };
 
 export function FormInputFileSelect({
-  hasError, required, label, className, helpMessage, testcid, ...props }) {
+  hasError, required, label, className, helpMessage, testcid, labelTooltip, ...props }) {
 
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <InputFileSelect required={required} label={label} {...props} />
     </FormInput>
   );
@@ -503,6 +513,7 @@ FormInputFileSelect.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
+  labelTooltip: PropTypes.string
 };
 
 export function InputSwitch({ cid, helpid, value, onChange, readonly, controlProps, ...props }) {
@@ -533,10 +544,10 @@ InputSwitch.propTypes = {
   controlProps: PropTypes.object,
 };
 
-export function FormInputSwitch({ hasError, required, label, className, helpMessage, testcid, withContainer, controlGridBasis, ...props }) {
+export function FormInputSwitch({ hasError, required, label, className, helpMessage, testcid, withContainer, controlGridBasis, labelTooltip, ...props }) {
   return (
     <FormInput required={required} label={label} error={hasError} className={className}
-      helpMessage={helpMessage} testcid={testcid} withContainer={withContainer} controlGridBasis={controlGridBasis}>
+      helpMessage={helpMessage} testcid={testcid} withContainer={withContainer} controlGridBasis={controlGridBasis} labelTooltip={labelTooltip}>
       <InputSwitch {...props} />
     </FormInput>
   );
@@ -550,6 +561,7 @@ FormInputSwitch.propTypes = {
   testcid: PropTypes.string,
   withContainer: PropTypes.bool,
   controlGridBasis: PropTypes.number,
+  labelTooltip: PropTypes.string
 };
 
 export function InputCheckbox({ cid, helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
@@ -581,10 +593,10 @@ InputCheckbox.propTypes = {
 };
 
 export function FormInputCheckbox({ hasError, required, label,
-  className, helpMessage, testcid, ...props }) {
+  className, helpMessage, testcid, labelTooltip, ...props }) {
 
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <InputCheckbox {...props} />
     </FormInput>
   );
@@ -596,6 +608,7 @@ FormInputCheckbox.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
+  labelTooltip: PropTypes.string
 };
 
 export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
@@ -675,9 +688,9 @@ InputToggle.propTypes = {
 };
 
 export function FormInputToggle({ hasError, required, label,
-  className, helpMessage, testcid, inputRef, ...props }) {
+  className, helpMessage, testcid, inputRef, labelTooltip, ...props }) {
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <InputToggle ref={inputRef} {...props} />
     </FormInput>
   );
@@ -689,7 +702,8 @@ FormInputToggle.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
-  inputRef: CustomPropTypes.ref
+  inputRef: CustomPropTypes.ref,
+  labelTooltip: PropTypes.string
 };
 
 /* react-select package is used for select input
@@ -1022,9 +1036,9 @@ InputSelect.propTypes = {
 
 
 export function FormInputSelect({
-  hasError, required, className, label, helpMessage, testcid, ...props }) {
+  hasError, required, className, label, helpMessage, testcid, labelTooltip, ...props }) {
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <InputSelect ref={props.inputRef} {...props} />
     </FormInput>
   );
@@ -1036,7 +1050,8 @@ FormInputSelect.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
-  inputRef: CustomPropTypes.ref
+  inputRef: CustomPropTypes.ref,
+  labelTooltip: PropTypes.string
 };
 
 const ColorButton = withColorPicker(PgIconButton);
@@ -1062,10 +1077,10 @@ InputColor.propTypes = {
 };
 
 export function FormInputColor({
-  hasError, required, className, label, helpMessage, testcid, ...props }) {
+  hasError, required, className, label, helpMessage, testcid, labelTooltip, ...props }) {
 
   return (
-    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput required={required} label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <InputColor {...props} />
     </FormInput>
   );
@@ -1076,7 +1091,8 @@ FormInputColor.propTypes = {
   className: CustomPropTypes.className,
   label: PropTypes.string,
   helpMessage: PropTypes.string,
-  testcid: PropTypes.string
+  testcid: PropTypes.string,
+  labelTooltip: PropTypes.string
 };
 
 export function PlainString({ controlProps, value }) {
@@ -1193,10 +1209,10 @@ const useStylesKeyboardShortcut = makeStyles(() => ({
   }
 }));
 
-export function FormInputKeyboardShortcut({ hasError, label, className, helpMessage, onChange, ...props }) {
+export function FormInputKeyboardShortcut({ hasError, label, className, helpMessage, onChange, labelTooltip, ...props }) {
   const classes = useStylesKeyboardShortcut();
   return (
-    <FormInput label={label} error={hasError} className={clsx(classes.customRow, className)} helpMessage={helpMessage}>
+    <FormInput label={label} error={hasError} className={clsx(classes.customRow, className)} helpMessage={helpMessage} labelTooltip={labelTooltip}>
       <KeyboardShortcuts onChange={onChange} {...props} />
     </FormInput>
 
@@ -1208,14 +1224,15 @@ FormInputKeyboardShortcut.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  labelTooltip: PropTypes.string
 };
 
-export function FormInputQueryThreshold({ hasError, label, className, helpMessage, testcid, onChange, ...props }) {
+export function FormInputQueryThreshold({ hasError, label, className, helpMessage, testcid, onChange, labelTooltip, ...props }) {
   const cid = _.uniqueId('c');
   const helpid = `h${cid}`;
   return (
-    <FormInput label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <QueryThresholds cid={cid} helpid={helpid} onChange={onChange} {...props} />
     </FormInput>
 
@@ -1227,15 +1244,16 @@ FormInputQueryThreshold.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  labelTooltip: PropTypes.string
 };
 
 
-export function FormInputSelectThemes({ hasError, label, className, helpMessage, testcid, onChange, ...props }) {
+export function FormInputSelectThemes({ hasError, label, className, helpMessage, testcid, onChange, labelTooltip, ...props }) {
   const cid = _.uniqueId('c');
   const helpid = `h${cid}`;
   return (
-    <FormInput label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
+    <FormInput label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid} labelTooltip={labelTooltip}>
       <SelectThemes cid={cid} helpid={helpid} onChange={onChange} {...props} />
     </FormInput>
   );
@@ -1247,7 +1265,8 @@ FormInputSelectThemes.propTypes = {
   className: CustomPropTypes.className,
   helpMessage: PropTypes.string,
   testcid: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
+  labelTooltip: PropTypes.string
 };
 
 

diff --git a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme) => ({
   }
 }));
 
-export default function KeyboardShortcuts({ value, onChange, fields, title }) {
+export default function KeyboardShortcuts({ value, onChange, fields }) {
   const classes = useStyles();
   const keyCid = _.uniqueId('c');
   const keyhelpid = `h${keyCid}`;
@@ -91,7 +91,7 @@ export default function KeyboardShortcuts({ value, onChange, fields, title }) {
                 {
                   onKeyDown: onKeyDown,
                 }
-              } title={title} />
+              }/>
             </Grid>
           </Grid>;
         } else if (element.name == 'shift') {
@@ -128,6 +128,5 @@ export default function KeyboardShortcuts({ value, onChange, fields, title }) {
 KeyboardShortcuts.propTypes = {
   value: PropTypes.object,
   onChange: PropTypes.func,
-  fields: PropTypes.array,
-  title: PropTypes.string
+  fields: PropTypes.array
 };