CB-2505 feat(core-block): Make properties table filterable

webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx

@@ -8,13 +8,14 @@
 
 import { computed } from 'mobx';
 import { observer } from 'mobx-react-lite';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import styled from 'reshadow';
 
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
 
 import { Button } from '../Button';
+import { ShadowInput } from '../FormControls/ShadowInput';
 import { useObjectRef } from '../useObjectRef';
 import type { IProperty } from './IProperty';
 import { PropertyItem } from './PropertyItem';
@@ -31,6 +32,7 @@ interface Props {
   onAdd?: () => void;
   onRemove?: (property: IProperty) => void;
   className?: string;
+  filterable?: boolean;
 }
 
 export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
@@ -38,8 +40,13 @@ export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
   const translate = useTranslate();
   const propsRef = useObjectRef({ ...props });
 
-  const sortedProperties = useMemo(() => computed(() => propsRef.properties.slice().sort(
-    (a, b) => (a?.displayName ?? '').localeCompare(b?.displayName ?? ''))), [propsRef.properties]);
+  const [filterValue, setFilterValue] = useState('');
+
+  const sortedProperties = useMemo(() => computed(() => propsRef.properties
+    .slice()
+    .sort((a, b) => (a.displayName ?? '').localeCompare(b.displayName ?? ''))
+    .filter(p => p.displayName?.includes(filterValue) ?? true )
+  ), [propsRef.properties, filterValue]);
 
   const changeName = useCallback((id: string, key: string) => {
     const { properties, propertiesState, onKeyChange } = propsRef;
@@ -109,7 +116,16 @@ export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
     <properties className={className}>
       <properties-header>
         <properties-header-name>
-          {translate('block_properties_table_name')}
+          <div>
+            {translate('block_properties_table_name')}
+          </div>
+          {props.filterable ? (
+            <ShadowInput
+              value={filterValue}
+              placeholder={translate('block_properties_table_filter_name')}
+              onChange={setFilterValue}
+            />
+          ) : null}
         </properties-header-name>
         <properties-header-value>
           {translate('block_properties_table_value')}

webapp/packages/core-blocks/src/PropertiesTable/styles.ts

@@ -19,6 +19,7 @@ export const PROPERTIES_TABLE_STYLES = css`
       box-sizing: border-box;
       display: inline-flex;
       border-bottom: solid 1px;
+      align-items: center;
     }
     properties-header-name, properties-header-value {
       composes: theme-typography--caption from global;
@@ -30,6 +31,8 @@ export const PROPERTIES_TABLE_STYLES = css`
     properties-header-name {
       flex: 0 0 auto;
       width: 300px;
+      display: flex;
+      align-items: center;
     }
     properties-header-add {
       flex: 0 0 auto;
@@ -54,6 +57,14 @@ export const PROPERTIES_TABLE_STYLES = css`
       height: 24px;
       pointer-events: none;
     }
+
+    ShadowInput {
+      composes: theme-background-surface from global;
+      box-sizing: border-box;
+      height: 24px;
+      flex: 1;
+      margin-left: 8px;
+    }
   `;
 
 export const PROPERTIES_TABLE_ADD_STYLES = css`

webapp/packages/core-blocks/src/locales/en.ts

@@ -1,6 +1,7 @@
 export default [
   ['block_properties_table_name', 'Name'],
   ['block_properties_table_value', 'Value'],
+  ['block_properties_table_filter_name', 'Filter'],
   ['block_properties_table_add', 'Add property'],
   ['combobox_no_results_placeholder', 'No results'],
 ];

webapp/packages/plugin-connections/src/ConnectionForm/DriverProperties/DriverProperties.tsx

@@ -105,6 +105,7 @@ export const DriverProperties: TabContainerPanelComponent<IConnectionFormProps>
               properties={joinedProperties.get()}
               propertiesState={formState.config.properties}
               readOnly={formState.readonly}
+              filterable
               onAdd={state.add}
               onRemove={state.remove}
             />