Fixes for the preferences dialog

1) Add server mode validation in the binary path. 2) Updated preferences tree rendering to avoid using the ReactDOM render. 3) Updated CSS for keyboard shortcuts checkbox border makes it consistent with input box border. 4) Fixed jasmine test case and improved code coverage. 5) Fixed SonarQube issues. 6) Added validation to disable "Maximum column with" option if "Column sized by" option is set to "Column name" in Query Tool -> Result grid. 7) Updated documentation with the latest screenshots. 8) Correct typo in the documentation. Fixes #7261 refs #7149
2025-02-25 18:55:31 -06:00 · 2022-03-23 13:28:35 +05:30
parent 1711834229
commit 2f37f0ca51
24 changed files with 338 additions and 330 deletions
--- a/web/pgadmin/static/js/components/ExternalIcon.jsx
+++ b/web/pgadmin/static/js/components/ExternalIcon.jsx
@@ -33,6 +33,6 @@ export const ConnectedIcon = ()=><ExternalIcon Icon={ConnectedSvg} style={{heigh
 export const DisonnectedIcon = ()=><ExternalIcon Icon={DisconnectedSvg} style={{height: '0.7em'}} />;
 export const RegexIcon = ()=><ExternalIcon Icon={RegexSvg} />;
 export const FormatCaseIcon = ()=><ExternalIcon Icon={FormatCaseSvg} />;
-export const ExpandDialog = ()=><ExternalIcon Icon={Expand} style={{height: '1em', width: '1em'}}  />;
-export const MinimizeDialog = ()=><ExternalIcon Icon={Collapse} style={{height: 'auto'}} />;
+export const ExpandDialogIcon = ()=><ExternalIcon Icon={Expand} style={{height: 'auto', width: '1em'}}  />;
+export const MinimizeDialogIcon = ()=><ExternalIcon Icon={Collapse} style={{height: 'auto'}} />;

--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -41,7 +41,7 @@ import { DefaultButton, PrimaryButton, PgIconButton } from './Buttons';
 import CustomPropTypes from '../custom_prop_types';
 import KeyboardShortcuts from './KeyboardShortcuts';
 import QueryThresholds from './QueryThresholds';
-import Themes from './Themes';
+import SelectThemes from './SelectThemes';


 const useStyles = makeStyles((theme) => ({
@@ -405,7 +405,7 @@ FormInputText.propTypes = {
 };

 /* Using the existing file dialog functions using showFileDialog */
-export function InputFileSelect({ controlProps, onChange, disabled, readonly, isvalidate = false, validate, ...props }) {
+export function InputFileSelect({ controlProps, onChange, disabled, readonly, isvalidate = false, hideBrowseButton=false,validate, ...props }) {
  const inpRef = useRef();
  const onFileSelect = (value) => {
    onChange && onChange(decodeURI(value));
@@ -414,8 +414,10 @@ export function InputFileSelect({ controlProps, onChange, disabled, readonly, is
  return (
    <InputText ref={inpRef} disabled={disabled} readonly={readonly} onChange={onChange} {...props} endAdornment={
      <>
+        {!hideBrowseButton &&
        <IconButton onClick={() => showFileDialog(controlProps, onFileSelect)}
          disabled={disabled || readonly} aria-label={gettext('Select a file')}><FolderOpenRoundedIcon /></IconButton>
+        }
        {isvalidate &&
          <PgIconButton title={gettext('Validate')} style={{ border: 'none' }} disabled={!props.value} onClick={() => { validate(props.value); }} icon={<AssignmentTurnedIn />}></PgIconButton>
        }
@@ -430,7 +432,8 @@ InputFileSelect.propTypes = {
  readonly: PropTypes.bool,
  isvalidate: PropTypes.bool,
  validate: PropTypes.func,
-  value: PropTypes.string
+  value: PropTypes.string,
+  hideBrowseButton: PropTypes.bool
 };

 export function FormInputFileSelect({
@@ -510,7 +513,6 @@ export function InputCheckbox({ cid, helpid, value, onChange, controlProps, read
          {...props} />
      }
      label={controlProps.label}
-      labelPlacement={props?.labelPlacement ? props.labelPlacement : 'end'}
    />
  );
 }
@@ -521,7 +523,6 @@ InputCheckbox.propTypes = {
  controlProps: PropTypes.object,
  onChange: PropTypes.func,
  readonly: PropTypes.bool,
-  labelPlacement: PropTypes.string
 };

 export function FormInputCheckbox({ hasError, required, label,
@@ -1189,13 +1190,11 @@ const useStylesKeyboardShortcut = makeStyles(() => ({
  }
 }));

-export function FormInputKeyboardShortcut({ hasError, label, className, helpMessage, testcid, onChange, ...props }) {
-  const cid = _.uniqueId('c');
-  const helpid = `h${cid}`;
+export function FormInputKeyboardShortcut({ hasError, label, className, helpMessage, onChange, ...props }) {
  const classes = useStylesKeyboardShortcut();
  return (
-    <FormInput label={label} error={hasError} className={clsx(classes.customRow, className)} helpMessage={helpMessage} testcid={testcid}>
-      <KeyboardShortcuts cid={cid} helpid={helpid} onChange={onChange} {...props} />
+    <FormInput label={label} error={hasError} className={clsx(classes.customRow, className)} helpMessage={helpMessage}>
+      <KeyboardShortcuts onChange={onChange} {...props} />
    </FormInput>

  );
@@ -1229,17 +1228,17 @@ FormInputQueryThreshold.propTypes = {
 };


-export function FormInputThemes({ hasError, label, className, helpMessage, testcid, onChange, ...props }) {
+export function FormInputSelectThemes({ hasError, label, className, helpMessage, testcid, onChange, ...props }) {
  const cid = _.uniqueId('c');
  const helpid = `h${cid}`;
  return (
    <FormInput label={label} error={hasError} className={className} helpMessage={helpMessage} testcid={testcid}>
-      <Themes cid={cid} helpid={helpid} onChange={onChange} {...props} />
+      <SelectThemes cid={cid} helpid={helpid} onChange={onChange} {...props} />
    </FormInput>
  );
 }

-FormInputThemes.propTypes = {
+FormInputSelectThemes.propTypes = {
  hasError: PropTypes.bool,
  label: PropTypes.string,
  className: CustomPropTypes.className,
--- a/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
+++ b/web/pgadmin/static/js/components/KeyboardShortcuts.jsx
@@ -22,6 +22,7 @@ const useStyles = makeStyles((theme) => ({
  inputCheckboxClass: {
    border: '1px solid',
    borderRadius: theme.shape.borderRadius,
+    borderColor: theme.otherVars.inputBorderColor,
    padding: 3
  }
 }));
@@ -36,6 +37,7 @@ export default function KeyboardShortcuts({ value, onChange, fields }) {
  const ctrlhelpid = `h${ctrlCid}`;
  const altCid = _.uniqueId('c');
  const althelpid = `h${altCid}`;
+  const keyLabel = _.uniqueId('c');

  const onKeyDown = (e) => {
    let newVal = { ...value };
@@ -72,19 +74,20 @@ export default function KeyboardShortcuts({ value, onChange, fields }) {
    <Grid
      container
      direction="row"
-      justifyContent="center"
-      alignItems="center">
+      alignItems="center"
+      key={_.uniqueId('c')}
+    >
      {fields.map(element => {
        let ctrlProps = {
          label: element.label
        };
        if (element.type == 'keyCode') {
-          return <Grid item container lg={4} md={4} sm={4} xs={12}>
+          return <Grid item container lg={4} md={4} sm={4} xs={12} key={_.uniqueId('c')}>
            <Grid item lg={4} md={4} sm={4} xs={12} className={classes.inputLabel}>
-              <Typography>{element.label}</Typography>
+              <Typography id={keyLabel}>{element.label}</Typography>
            </Grid>
            <Grid item lg={8} md={8} sm={8} xs={12}>
-              <InputText cid={keyCid} helpid={keyhelpid} type='text' value={value?.key?.char} controlProps={
+              <InputText id={keyCid} helpid={keyhelpid} type='text' value={value?.key?.char} controlProps={
                {
                  onKeyDown: onKeyDown,
                }
@@ -92,27 +95,27 @@ export default function KeyboardShortcuts({ value, onChange, fields }) {
            </Grid>
          </Grid>;
        } else if (element.name == 'shift') {
-          return <Grid item lg={2} md={2} sm={2} xs={12} className={classes.inputLabel}>
+          return <Grid item lg={2} md={2} sm={2} xs={12} className={classes.inputLabel} key={_.uniqueId('c')}>
            <Box className={classes.inputCheckboxClass}>
-              <InputCheckbox cid={shiftCid} helpid={shifthelpid} value={value?.shift}
+              <InputCheckbox id={shiftCid} helpid={shifthelpid} value={value?.shift}
                controlProps={ctrlProps}
-                onChange={onShiftChange} labelPlacement="end" ></InputCheckbox>
+                onChange={onShiftChange}></InputCheckbox>
            </Box>
          </Grid>;
        } else if (element.name == 'control') {
-          return <Grid item lg={2} md={2} sm={2} xs={12} className={classes.inputLabel}>
+          return <Grid item lg={2} md={2} sm={2} xs={12} className={classes.inputLabel} key={_.uniqueId('c')}>
            <Box className={classes.inputCheckboxClass}>
-              <InputCheckbox cid={ctrlCid} helpid={ctrlhelpid} value={value?.ctrl}
+              <InputCheckbox id={ctrlCid} helpid={ctrlhelpid} value={value?.ctrl}
                controlProps={ctrlProps}
-                onChange={onCtrlChange} labelPlacement="end" ></InputCheckbox>
+                onChange={onCtrlChange}></InputCheckbox>
            </Box>
          </Grid>;
        } else if (element.name == 'alt') {
-          return <Grid item lg={3} md={3} sm={3} xs={12} className={classes.inputLabel}>
+          return <Grid item lg={3} md={3} sm={3} xs={12} className={classes.inputLabel} key={_.uniqueId('c')}>
            <Box className={classes.inputCheckboxClass}>
-              <InputCheckbox cid={altCid} helpid={althelpid} value={value?.alt}
+              <InputCheckbox id={altCid} helpid={althelpid} value={value?.alt}
                controlProps={ctrlProps}
-                onChange={onAltChange} labelPlacement="end" ></InputCheckbox>
+                onChange={onAltChange}></InputCheckbox>
            </Box>
          </Grid>;
        }
--- a/web/pgadmin/static/js/components/PgTable.jsx
+++ b/web/pgadmin/static/js/components/PgTable.jsx
@@ -298,7 +298,7 @@ export default function PgTable({ columns, data, isSelectRow, ...props }) {
              className={classes.fixedSizeList}
              height={height - 75}
              itemCount={rows.length}
-              itemSize={35}
+              itemSize={35} 
              sorted={props?.sortOptions}
            >
              {RenderRow}
--- a/web/pgadmin/static/js/components/QueryThresholds.jsx
+++ b/web/pgadmin/static/js/components/QueryThresholds.jsx
@@ -61,7 +61,6 @@ export default function QueryThresholds({ value, onChange }) {
      <Grid
        container
        direction="row"
-        justifyContent="center"
        alignItems="center"
      >
        <Grid item lg={2} md={2} sm={2} xs={12}>
--- a/web/pgadmin/static/js/components/SelectThemes.jsx
+++ b/web/pgadmin/static/js/components/SelectThemes.jsx
@@ -20,7 +20,7 @@ const useStyles = makeStyles(() => ({
  }
 }));

-export default function Themes({onChange, ...props}) {
+export default function SelectThemes({onChange, ...props}) {
  const classes = useStyles();
  const [previewSrc, setPreviewSrc] = useState(null);

@@ -48,7 +48,7 @@ export default function Themes({onChange, ...props}) {
  );
 }

-Themes.propTypes = {
+SelectThemes.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func,
  controlProps: PropTypes.object,