Show auto-complete column names in filtered rows dialog of table and filter options of view/edit data tool. #3751

Author: adityatoshniwal

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

@@ -260,7 +260,8 @@ export default function FormView({
     let contentClassName = [
       isSingleCollection() ? 'FormView-singleCollectionPanelContent' :
         'FormView-nonTabPanelContent',
-      (schemaState.errors?.message ? 'FormView-errorMargin' : null)
+      (schemaState.errors?.message ? 'FormView-errorMargin' : null),
+      (finalGroups.some((g)=>g.isFullTab) ? 'FormView-fullControl' : ''),
     ];
     return (
       <>
@@ -275,7 +276,8 @@ export default function FormView({
             classNameRoot={[
               isSingleCollection() ?
                 'FormView-singleCollectionPanel' : 'FormView-nonTabPanel',
-              className
+              className,
+              (finalGroups.some((g)=>g.isFullTab) ? 'FormView-fullSpace' : ''),
             ].join(' ')}
             className={contentClassName.join(' ')}>
             {

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

@@ -144,15 +144,17 @@ export const FormContentBox = styled(Box)(({theme}) => ({
     '& .FormView-fullControl': {
       display: 'flex',
       flexDirection: 'column',
-      '& .FormView-sqlTabInput': {
+      '& .FormView-sqlTabInput, & .Form-sql': {
         border: 0,
       },
     }
   },
   '& .FormView-nonTabPanel': {
     ...theme.mixins.tabPanel,
     '& .FormView-nonTabPanelContent': {
-      height: 'unset',
+      '&:not(.FormView-fullControl)': {
+        height: 'unset',
+      },
       '& .FormView-controlRow': {
         marginBottom: theme.spacing(1),
       },

web/pgadmin/static/js/UtilityView.jsx

@@ -41,7 +41,7 @@ export default function UtilityView({dockerObj}) {
             <UtilityViewContent
               docker={docker.current}
               panelId={panelId}
-              schema={dialogProps.schema}
+              {...dialogProps}
               treeNodeInfo={treeNodeInfo}
               actionType={dialogProps.actionType??'create'}
               formType='dialog'
@@ -60,10 +60,6 @@ export default function UtilityView({dockerObj}) {
                 onClose();
               })}
               extraData={dialogProps.extraData??{}}
-              saveBtnName={dialogProps.saveBtnName}
-              urlBase={dialogProps.urlBase}
-              sqlHelpUrl={dialogProps.sqlHelpUrl}
-              helpUrl={dialogProps.helpUrl}
             />
           </ErrorBoundary>
         )

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

@@ -192,20 +192,26 @@ FormInput.propTypes = {
 export function InputSQL({ value, options, onChange, className, controlProps, inputRef, ...props }) {
 
   const editor = useRef();
+  const { autocompleteProvider, autocompleteOnKeyPress } = options;
 
   return (
     <Root style={{height: '100%'}}>
       <CodeMirror
         currEditor={(obj) => {
           editor.current = obj;
           inputRef?.(obj);
+          if(autocompleteProvider) {
+            editor.current.registerAutocomplete(autocompleteProvider);
+          }
         }}
         value={value || ''}
         options={{
-          ...options,
+          ..._.omit(options, ['autocompleteProvider', 'autocompleteOnKeyPress']),
         }}
         className={'Form-sql ' + className}
         onChange={onChange}
+        autocomplete={true}
+        autocompleteOnKeyPress={autocompleteOnKeyPress}
         {...controlProps}
         {...props}
       />

web/pgadmin/static/js/components/ReactCodeMirror/components/Editor.jsx

@@ -165,7 +165,7 @@ const defaultExtensions = [
 
 export default function Editor({
   currEditor, name, value, options, onCursorActivity, onChange, readonly,
-  disabled, autocomplete = false, breakpoint = false, onBreakPointChange,
+  disabled, autocomplete = false, autocompleteOnKeyPress, breakpoint = false, onBreakPointChange,
   showActiveLine=false, keepHistory = true, cid, helpid, labelledBy,
   customKeyMap, language='pgsql'
 }) {
@@ -331,7 +331,7 @@ export default function Editor({
       }],
     };
     if (autocomplete) {
-      if (pref.autocomplete_on_key_press) {
+      if (pref.autocomplete_on_key_press || autocompleteOnKeyPress) {
         newConfigExtn.push(autocompletion({
           ...autoCompOptions,
           activateOnTyping: true,

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

@@ -62,6 +62,23 @@ class FilterSchema extends BaseUISchema {
           options: {
             lineWrapping: true,
           },
+          autocompleteOnKeyPress: true,
+          autocompleteProvider: (context, onAvailable)=>{
+            return new Promise((resolve)=>{
+              const word = context.matchBefore(/\w*/);
+              const fullSql = context.state.doc.toString();
+              onAvailable();
+              resolve({
+                from: word.from,
+                options: (this.sortingCollObj.columnOptions??[]).map((col)=>({
+                  label: col.label, type: 'property',
+                })),
+                validFor: (text, from)=>{
+                  return text.startsWith(fullSql.slice(from));
+                }
+              });
+            });
+          }
         }
       },
       {

web/pgadmin/tools/sqleditor/static/js/show_view_data.js

@@ -14,23 +14,47 @@ import _ from 'lodash';
 import { isEmptyString } from 'sources/validators';
 import usePreferences from '../../../../preferences/static/js/store';
 import pgAdmin from 'sources/pgadmin';
+import { getNodeListByName } from '../../../../browser/static/js/node_ajax';
 
 export default class DataFilterSchema extends BaseUISchema {
-  constructor(fieldOptions = {}) {
+  constructor(getColumns) {
     super({
       filter_sql: ''
     });
 
-    this.fieldOptions = {
-      ...fieldOptions,
-    };
+    this.getColumns = getColumns;
   }
 
   get baseFields() {
     return [{
       id: 'filter_sql',
       label: gettext('Data Filter'),
       type: 'sql', isFullTab: true, cell: 'text',
+      controlProps: {
+        autocompleteOnKeyPress: true,
+        autocompleteProvider: (context, onAvailable)=>{
+          return new Promise((resolve, reject)=>{
+            const word = context.matchBefore(/\w*/);
+            const fullSql = context.state.doc.toString();
+            this.getColumns().then((columns) => {
+              onAvailable();
+              resolve({
+                from: word.from,
+                options: (columns??[]).map((col)=>({
+                  label: col.label, type: 'property',
+                })),
+                validFor: (text, from)=>{
+                  return text.startsWith(fullSql.slice(from));
+                }
+              });
+            })
+              .catch((err) => {
+                onAvailable();
+                reject(err instanceof Error ? err : Error(gettext('Something went wrong')));
+              });
+          });
+        }
+      }
     }];
   }
 
@@ -64,8 +88,7 @@ export function showViewData(
     return;
   }
 
-  const parentData = pgBrowser.tree.getTreeNodeHierarchy(  treeIdentifier
-  );
+  const parentData = pgBrowser.tree.getTreeNodeHierarchy(treeIdentifier);
 
   if (hasServerOrDatabaseConfiguration(parentData)
     || !hasSchemaOrCatalogOrViewInformation(parentData)) {
@@ -157,7 +180,11 @@ function generateFilterValidateUrl(nodeData, parentData) {
 function showFilterDialog(pgBrowser, item, queryToolMod, transId,
   gridUrl, queryToolTitle, validateUrl) {
 
-  let schema = new DataFilterSchema();
+  const treeNodeInfo = pgBrowser.tree.getTreeNodeHierarchy(item);
+  const itemNodeData = pgBrowser.tree.findNodeByDomElement(item).getData();
+  let schema = new DataFilterSchema(
+    ()=>getNodeListByName('column', treeNodeInfo, itemNodeData),
+  );
   let helpUrl = url_for('help.static', {'filename': 'viewdata_filter.html'});
 
   let okCallback = function() {
@@ -168,7 +195,7 @@ function showFilterDialog(pgBrowser, item, queryToolMod, transId,
     gettext('Data Filter - %s', queryToolTitle),{
       schema, urlBase: validateUrl, helpUrl, saveBtnName: gettext('OK'), isTabView: false,
       onSave: okCallback,
-    }, pgBrowser.stdW.md, pgBrowser.stdH.sm
+    }, pgBrowser.stdW.md, pgBrowser.stdH.md
   );
 }