Merge branch 'table-groups-filter' into 'enterprise'

feat: add partial name filter to table group list

See merge request dkinternal/testgen/dataops-testgen!291

Author: ci bot

testgen/ui/components/frontend/js/components/connection_form.js

@@ -486,6 +486,7 @@ const RedshiftForm = (
                 value: connectionPassword,
                 height: 38,
                 type: 'password',
+                passwordSuggestions: false,
                 placeholder: (originalConnection?.connection_id && originalConnection?.project_pw_encrypted) ? secretsPlaceholder : '',
                 onChange: (value, state) => {
                     connectionPassword.val = value;
@@ -683,6 +684,7 @@ const DatabricksForm = (
                 value: connectionPassword,
                 height: 38,
                 type: 'password',
+                passwordSuggestions: false,
                 placeholder: (originalConnection?.connection_id && originalConnection?.project_pw_encrypted) ? secretsPlaceholder : '',
                 onChange: (value, state) => {
                     connectionPassword.val = value;
@@ -891,6 +893,7 @@ const SnowflakeForm = (
                                 value: connectionPrivateKeyPassphrase,
                                 height: 38,
                                 type: 'password',
+                                passwordSuggestions: false,
                                 help: 'Passphrase used when creating the private key. Leave empty if the private key is not encrypted.',
                                 placeholder: () => (originalConnection?.connection_id && originalConnection?.private_key_passphrase && !clearPrivateKeyPhrase.val) ? secretsPlaceholder : '',
                                 onChange: (value, state) => {
@@ -928,7 +931,7 @@ const SnowflakeForm = (
                                     console.error(err);
                                     isFieldValid = false;
                                 }
-                                validityPerField['private_key'] = state.valid;
+                                validityPerField['private_key'] = isFieldValid;
                                 isValid.val = Object.values(validityPerField).every(v => v);
                             },
                             validators: [
@@ -944,6 +947,7 @@ const SnowflakeForm = (
                     value: connectionPassword,
                     height: 38,
                     type: 'password',
+                    passwordSuggestions: false,
                     placeholder: (originalConnection?.connection_id && originalConnection?.project_pw_encrypted) ? secretsPlaceholder : '',
                     onChange: (value, state) => {
                         connectionPassword.val = value;

testgen/ui/components/frontend/js/components/input.js

@@ -20,6 +20,7 @@
  * @property {string?} icon
  * @property {boolean?} clearable
  * @property {('value' | 'always')?} clearableCondition
+ * @property {boolean?} passwordSuggestions
  * @property {function(string, InputState)?} onChange
  * @property {boolean?} disabled
  * @property {function(string, InputState)?} onClear
@@ -164,6 +165,7 @@ const Input = (/** @type Properties */ props) => {
                 name: props.name ?? '',
                 type: inputType,
                 disabled: props.disabled,
+                ...(props.passwordSuggestions ?? true ? {} : {autocomplete: 'off', 'data-op-ignore': true}),
                 placeholder: () => getValue(props.placeholder) ?? '',
                 oninput: debounce((/** @type Event */ event) => value.val = event.target.value, 300),
                 onclick: van.derive(() => autocompleteOptions.val?.length

testgen/ui/components/frontend/js/pages/table_group_list.js

@@ -11,6 +11,7 @@
  * @type {object}
  * @property {ProjectSummary} project_summary
  * @property {string?} connection_id
+ * @property {string?} table_group_name
  * @property {Connection[]} connections
  * @property {TableGroup[]} table_groups
  * @property {Permissions} permissions
@@ -26,6 +27,7 @@ import { EMPTY_STATE_MESSAGE, EmptyState } from '../components/empty_state.js';
 import { Select } from '../components/select.js';
 import { Icon } from '../components/icon.js';
 import { withTooltip } from '../components/tooltip.js';
+import { Input } from '../components/input.js';
 
 const { div, h4, i, span } = van.tags;
 
@@ -49,6 +51,7 @@ const TableGroupList = (props) => {
             const permissions = getValue(props.permissions) ?? {can_edit: false};
             const connections = getValue(props.connections) ?? [];
             const connectionId = getValue(props.connection_id);
+            const tableGroupNameFilter = getValue(props.table_group_name);
             const tableGroups = getValue(props.table_groups) ?? [];
             const projectSummary = getValue(props.project_summary);
 
@@ -68,7 +71,7 @@ const TableGroupList = (props) => {
 
             return projectSummary.table_group_count > 0
             ? div(
-                Toolbar(permissions, connections, connectionId),
+                Toolbar(permissions, connections, connectionId, tableGroupNameFilter),
                 tableGroups.length
                     ? tableGroups.map((tableGroup) => Card({
                         testId: 'table-group-card',
@@ -211,25 +214,49 @@ const TableGroupList = (props) => {
  * @param {Permissions} permissions
  * @param {Connection[]} connections
  * @param {string?} selectedConnection
+ * @param {string?} tableGroupNameFilter
  * @returns 
  */
-const Toolbar = (permissions, connections, selectedConnection) => {
+const Toolbar = (permissions, connections, selectedConnection, tableGroupNameFilter) => {
+    const connection = van.state(selectedConnection || null);
+    const tableGroupFilter = van.state(tableGroupNameFilter || null);
+
+    van.derive(() => {
+        if (connection.val !== selectedConnection || tableGroupFilter.val !== tableGroupNameFilter) {
+            emitEvent('TableGroupsFiltered', { payload: { connection_id: connection.val || null, table_group_name: tableGroupFilter.val || null } });
+        }
+    });
+
     return div(
         { class: 'flex-row fx-align-flex-end fx-justify-space-between mb-4' },
-        (getValue(connections) ?? [])?.length > 1
-            ? Select({
-                testId: 'connection-select',
-                label: 'Connection',
-                allowNull: true,
+        div(
+            {class: 'flex-row fx-gap-4'},
+            (getValue(connections) ?? [])?.length > 1
+                ? Select({
+                    testId: 'connection-select',
+                    label: 'Connection',
+                    allowNull: true,
+                    height: 38,
+                    value: connection,
+                    options: getValue(connections)?.map((connection) => ({
+                        label: connection.connection_name,
+                        value: String(connection.connection_id),
+                    })) ?? [],
+                    onChange: (value) => connection.val = value,
+                })
+                : '',
+            Input({
+                testId: 'table-groups-name-filter',
+                icon: 'search',
+                label: '',
+                placeholder: 'Search table group names',
                 height: 38,
-                value: selectedConnection,
-                options: getValue(connections)?.map((connection) => ({
-                    label: connection.connection_name,
-                    value: String(connection.connection_id),
-                })) ?? [],
-                onChange: (value) => emitEvent('ConnectionSelected', { payload: value }),
-            })
-            : span(''),
+                width: 300,
+                clearable: true,
+                value: tableGroupFilter,
+                onChange: (value) => tableGroupFilter.val = value || null,
+            }),
+        ),
         div(
             { class: 'flex-row fx-gap-4' },
             Button({

testgen/ui/views/table_groups.py

@@ -40,29 +40,38 @@ class TableGroupsPage(Page):
         roles=[ role for role in typing.get_args(user_session_service.RoleType) if role != "catalog" ],
     )
 
-    def render(self, project_code: str, connection_id: str | None = None, **_kwargs) -> None:
+    def render(
+        self,
+        project_code: str,
+        connection_id: str | None = None,
+        table_group_name: str | None = None,
+        **_kwargs,
+    ) -> None:
         testgen.page_header(PAGE_TITLE, "create-a-table-group")
 
         user_can_edit = user_session_service.user_can_edit()
         project_summary = Project.get_summary(project_code)
         if connection_id and not connection_id.isdigit():
             connection_id = None
 
+        table_group_filters = [
+            TableGroup.project_code == project_code,
+        ]
         if connection_id:
-            table_groups = TableGroup.select_minimal_where(
-                TableGroup.project_code == project_code,
-                TableGroup.connection_id == connection_id,
-            )
-        else:
-            table_groups = TableGroup.select_minimal_where(TableGroup.project_code == project_code)
+            table_group_filters.append(TableGroup.connection_id == connection_id)
+
+        if table_group_name:
+            table_group_filters.append(TableGroup.table_groups_name.ilike(f"%{table_group_name}%"))
 
+        table_groups = TableGroup.select_minimal_where(*table_group_filters)
         connections = self._get_connections(project_code)
 
         return testgen.testgen_component(
             "table_group_list",
             props={
                 "project_summary": project_summary.to_dict(json_safe=True),
                 "connection_id": connection_id,
+                "table_group_name": table_group_name,
                 "permissions": {
                     "can_edit": user_can_edit,
                 },
@@ -75,9 +84,9 @@ def render(self, project_code: str, connection_id: str | None = None, **_kwargs)
                 "EditTableGroupClicked": partial(self.edit_table_group_dialog, project_code),
                 "DeleteTableGroupClicked": partial(self.delete_table_group_dialog, project_code),
                 "RunProfilingClicked": partial(self.run_profiling_dialog, project_code),
-                "ConnectionSelected": lambda inner_connection_id: self.router.queue_navigation(
+                "TableGroupsFiltered": lambda params: self.router.queue_navigation(
                     to="table-groups",
-                    with_args={"project_code": project_code, "connection_id": inner_connection_id},
+                    with_args={"project_code": project_code, **params},
                 ),
             },
         )