diff --git a/web/pgadmin/static/js/SchemaView/MappedControl.jsx b/web/pgadmin/static/js/SchemaView/MappedControl.jsx
index fcedb82ff..269e65161 100644
--- a/web/pgadmin/static/js/SchemaView/MappedControl.jsx
+++ b/web/pgadmin/static/js/SchemaView/MappedControl.jsx
@@ -10,7 +10,7 @@
import React, { useCallback } from 'react';
import _ from 'lodash';
-import { FormInputText, FormInputSelect, FormInputSwitch, FormInputCheckbox, FormInputColor, FormInputFileSelect, FormInputToggle, InputSwitch, FormInputSQL } from '../components/FormComponents';
+import { FormInputText, FormInputSelect, FormInputSwitch, FormInputCheckbox, FormInputColor, FormInputFileSelect, FormInputToggle, InputSwitch, FormInputSQL, FormNote } from '../components/FormComponents';
import { InputSelect, InputText, InputCheckbox } from '../components/FormComponents';
import Privilege from '../components/Privilege';
import { evalFunc } from 'sources/utils';
@@ -91,6 +91,8 @@ function MappedFormControlBase({type, value, id, onChange, className, visible, i
return ;
case 'sql':
return ;
+ case 'note':
+ return ;
default:
return {value};
}
@@ -203,7 +205,7 @@ const ALLOWED_PROPS_FIELD_COMMON = [
];
const ALLOWED_PROPS_FIELD_FORM = [
- 'type', 'onChange', 'state', 'noLabel'
+ 'type', 'onChange', 'state', 'noLabel', 'text',
];
const ALLOWED_PROPS_FIELD_CELL = [
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index d67907604..2646add45 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -11,7 +11,7 @@
import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Box, FormControl, OutlinedInput, FormHelperText,
- Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel } from '@material-ui/core';
+ Grid, IconButton, FormControlLabel, Switch, Checkbox, useTheme, InputLabel, Paper } from '@material-ui/core';
import { ToggleButton, ToggleButtonGroup } from '@material-ui/lab';
import ReportProblemIcon from '@material-ui/icons/ReportProblemRounded';
import InfoIcon from '@material-ui/icons/InfoRounded';
@@ -19,11 +19,13 @@ import CloseIcon from '@material-ui/icons/CloseRounded';
import CheckIcon from '@material-ui/icons/CheckCircleOutlineRounded';
import CheckRoundedIcon from '@material-ui/icons/CheckRounded';
import FolderOpenRoundedIcon from '@material-ui/icons/FolderOpenRounded';
+import DescriptionIcon from '@material-ui/icons/Description';
import Select, {components as RSComponents} from 'react-select';
import CreatableSelect from 'react-select/creatable';
import Pickr from '@simonwep/pickr';
import clsx from 'clsx';
import PropTypes from 'prop-types';
+import HTMLReactParse from 'html-react-parser';
import CodeMirror from './CodeMirror';
import gettext from 'sources/gettext';
@@ -64,6 +66,11 @@ const useStyles = makeStyles((theme) => ({
minHeight: theme.spacing(3.5),
width: theme.spacing(3.5),
minWidth: theme.spacing(3.5),
+ },
+ noteRoot: {
+ display: 'flex',
+ backgroundColor: theme.otherVars.borderColor,
+ padding: theme.spacing(1),
}
}));
@@ -816,6 +823,18 @@ FormInputColor.propTypes = {
testcid: PropTypes.string,
};
+export function FormNote({text}) {
+ const classes = useStyles();
+ return (
+
+
+ {HTMLReactParse(text)}
+
+ );
+}
+FormNote.propTypes = {
+ text: PropTypes.string,
+};
const useStylesFormFooter = makeStyles((theme)=>({
root: {