Port View node to react. Fixes #6637

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

@@ -167,6 +167,8 @@ export default function FormView({
     }
   }, []);
 
+  let fullTabs = [];
+
   /* Prepare the array of components based on the types */
   schema.fields.forEach((field)=>{
     let {visible, disabled, readonly, canAdd, canEdit, canDelete, modeSupported} =
@@ -232,6 +234,10 @@ export default function FormView({
          * lets pass the new changes to dependent and get the new values
          * from there as well.
          */
+        if(field.noLabel) {
+          tabsClassname[group] = classes.fullSpace;
+          fullTabs.push(group);
+        }
         tabs[group].push(
           useMemo(()=><MappedFormControl
             inputRef={(ele)=>{
@@ -282,6 +288,7 @@ export default function FormView({
       useMemo(()=><SQLTab key="sqltab" active={sqlTabActive} getSQLValue={getSQLValue} />, [sqlTabActive]),
     ];
     tabsClassname[sqlTabName] = classes.fullSpace;
+    fullTabs.push(sqlTabName);
   }
 
   useEffect(()=>{
@@ -314,7 +321,7 @@ export default function FormView({
         {Object.keys(tabs).map((tabName, i)=>{
           return (
             <TabPanel key={tabName} value={tabValue} index={i} classNameRoot={clsx(tabsClassname[tabName], isNested ? classes.nestedTabPanel : null)}
-              className={tabName != sqlTabName ? classes.nestedControl : null}>
+              className={fullTabs.indexOf(tabName) == -1 ? classes.nestedControl : null}>
               {tabs[tabName]}
             </TabPanel>
           );

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

@@ -18,7 +18,7 @@ import PropTypes from 'prop-types';
 import CustomPropTypes from '../custom_prop_types';
 
 /* Control mapping for form view */
-function MappedFormControlBase({type, value, id, onChange, className, visible, inputRef, ...props}) {
+function MappedFormControlBase({type, value, id, onChange, className, visible, inputRef, noLabel, ...props}) {
   const name = id;
   const onTextChange = useCallback((e) => {
     let value = e;
@@ -90,7 +90,7 @@ function MappedFormControlBase({type, value, id, onChange, className, visible, i
   case 'file':
     return <FormInputFileSelect name={name} value={value} onChange={onTextChange} className={className} {...props} />;
   case 'sql':
-    return <FormInputSQL name={name} value={value} onChange={onSqlChange} className={className} {...props}/>;
+    return <FormInputSQL name={name} value={value} onChange={onSqlChange} className={className} noLabel={noLabel} {...props} />;
   default:
     return <></>;
   }
@@ -108,6 +108,7 @@ MappedFormControlBase.propTypes = {
   ]),
   visible: PropTypes.bool,
   inputRef: CustomPropTypes.ref,
+  noLabel: PropTypes.bool
 };
 
 /* Control mapping for grid cell view */
@@ -202,7 +203,7 @@ const ALLOWED_PROPS_FIELD_COMMON = [
 ];
 
 const ALLOWED_PROPS_FIELD_FORM = [
-  'type', 'onChange', 'state',
+  'type', 'onChange', 'state', 'noLabel'
 ];
 
 const ALLOWED_PROPS_FIELD_CELL = [

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

@@ -485,7 +485,25 @@ function SchemaDialogView({
     } else {
       changeData[schema.idAttribute] = schema.origData[schema.idAttribute];
     }
+    if (schema.warningText) {
+      pgAlertify().confirm(
+        gettext('Warning'),
+        schema.warningText,
+        ()=> {
+          save(changeData);
+        },
+        () => {
+          setSaving(false);
+          setLoaderText('');
+          return true;
+        }
+      );
+    } else {
+      save(changeData);
+    }
+  };
 
+  const save = (changeData) => {
     props.onSave(isNew, changeData)
       .then(()=>{
         if(schema.informText) {