CB-3753 adds autocomplete for where filters from result set column names

webapp/packages/core-blocks/src/FormControls/InputField/InputAutocompletionMenu.module.css

@@ -29,17 +29,9 @@
     position: relative;
   }
 
-  & .itemIcon {
-    position: relative;
+  & .iconOrImage {
     width: 16px;
     height: 16px;
-    overflow: hidden;
-    flex-shrink: 0;
-
-    & .iconOrImage {
-      width: 100%;
-      height: 100%;
-    }
   }
 }
 

webapp/packages/core-blocks/src/FormControls/InputField/InputAutocompletionMenu.tsx

@@ -100,11 +100,7 @@ export const InputAutocompletionMenu = observer(
             className={styles['menuItem']}
             onClick={event => handleSelect(item)}
           >
-            {item.icon && (
-              <Container className={styles['itemIcon']}>
-                <IconOrImage icon={item.icon} className={styles['iconOrImage']} />
-              </Container>
-            )}
+            {item.icon && <IconOrImage icon={item.icon} className={styles['iconOrImage']} />}
             <Text truncate>{item.displayString}</Text>
           </MenuItem>
         ))}

webapp/packages/core-ui/src/InlineEditor/InlineEditor.tsx

@@ -173,7 +173,7 @@ export const InlineEditor = observer<InlineEditorProps, HTMLInputElement>(
             )}
           </div>
         </div>
-        <InputAutocompletionMenu sourceHints={autoCompleteProposals ?? []} inputRef={inputRef} />
+        <InputAutocompletionMenu matchStrategy="fuzzy" sourceHints={autoCompleteProposals ?? []} inputRef={inputRef} />
       </Container>
     );
   }),

webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/TableWhereFilter.tsx

@@ -28,6 +28,7 @@ export const TableWhereFilter: PlaceholderComponent<ITableHeaderPlaceholderProps
         className={styles['inlineEditor']}
         name="data_where"
         value={state.filter}
+        autoCompleteProposals={state.hintProposals}
         placeholder={translate(state.constraints?.supported ? 'table_header_sql_expression' : 'table_header_sql_expression_not_supported')}
         controlsPosition="inside"
         edited={!!state.filter}

webapp/packages/plugin-data-viewer/src/TableViewer/TableHeader/useWhereFilter.ts

@@ -7,19 +7,23 @@
  */
 import { action, computed, observable } from 'mobx';
 
-import { useObservableRef } from '@cloudbeaver/core-blocks';
+import { type InputAutocompleteProposal, useObservableRef } from '@cloudbeaver/core-blocks';
+import type { SqlResultColumn } from '@cloudbeaver/core-sdk';
 
 import { DatabaseDataConstraintAction } from '../../DatabaseDataModel/Actions/DatabaseDataConstraintAction.js';
+import { ResultSetViewAction } from '../../DatabaseDataModel/Actions/ResultSet/ResultSetViewAction.js';
 import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel.js';
 import type { IDatabaseDataOptions } from '../../DatabaseDataModel/IDatabaseDataOptions.js';
 import { isResultSetDataModel } from '../../ResultSet/isResultSetDataModel.js';
-import { isResultSetDataSource } from '../../ResultSet/ResultSetDataSource.js';
+import { isResultSetDataSource, ResultSetDataSource } from '../../ResultSet/ResultSetDataSource.js';
 
 interface IState {
   model: IDatabaseDataModel;
   resultIndex: number;
   readonly supported: boolean;
   readonly filter: string;
+  readonly columns: SqlResultColumn[];
+  readonly hintProposals: InputAutocompleteProposal[];
   readonly constraints: DatabaseDataConstraintAction | null;
   readonly disabled: boolean;
   readonly applicableFilter: boolean;
@@ -45,6 +49,29 @@ export function useWhereFilter(model: IDatabaseDataModel, resultIndex: number):
 
         return source.options?.whereFilter ?? '';
       },
+      get columns() {
+        const model = this.model as any;
+
+        if (!model.source.hasResult(this.resultIndex) || !isResultSetDataModel(model)) {
+          return [];
+        }
+
+        const view = model.source.tryGetAction(resultIndex, ResultSetViewAction);
+
+        if (!view) {
+          return [];
+        }
+
+        return view?.columns ?? [];
+      },
+      get hintProposals() {
+        return this.columns.map(column => ({
+          title: column.label || '',
+          displayString: column.label || '',
+          replacementString: column.label || '',
+          icon: column.icon || '',
+        }));
+      },
       get constraints() {
         const model = this.model as any;
         if (!model.source.hasResult(this.resultIndex) || !isResultSetDataModel(model)) {
@@ -84,6 +111,8 @@ export function useWhereFilter(model: IDatabaseDataModel, resultIndex: number):
       model: observable.ref,
       resultIndex: observable.ref,
       filter: computed,
+      columns: computed,
+      hintProposals: computed,
       constraints: computed,
       disabled: computed,
       applicableFilter: computed,