|
11 | 11 | * @property {ProjectSummary} project_summary |
12 | 12 | * @property {TestSuiteSummary} test_suites |
13 | 13 | * @property {FilterOption[]} table_group_filter_options |
| 14 | + * @property {string?} test_suite_name |
14 | 15 | * @property {Permissions} permissions |
15 | 16 | */ |
16 | 17 | import van from '../van.min.js'; |
17 | 18 | import { Streamlit } from '../streamlit.js'; |
18 | 19 | import { emitEvent, getValue, loadStylesheet, resizeFrameHeightToElement, resizeFrameHeightOnDOMChange } from '../utils.js'; |
19 | 20 | import { formatTimestamp, DISABLED_ACTION_TEXT } from '../display_utils.js'; |
| 21 | +import { Input } from '../components/input.js'; |
20 | 22 | import { Select } from '../components/select.js'; |
21 | 23 | import { Button } from '../components/button.js'; |
22 | 24 | import { Card } from '../components/card.js'; |
@@ -46,51 +48,77 @@ const TestSuites = (/** @type Properties */ props) => { |
46 | 48 | return projectSummary.test_suite_count > 0 |
47 | 49 | ? div( |
48 | 50 | { class: 'tg-test-suites'}, |
49 | | - () => div( |
50 | | - { class: 'flex-row fx-align-flex-end fx-justify-space-between fx-gap-4 mb-4' }, |
51 | | - Select({ |
52 | | - label: 'Table Group', |
53 | | - value: getValue(props.table_group_filter_options)?.find((op) => op.selected)?.value ?? null, |
54 | | - options: getValue(props.table_group_filter_options) ?? [], |
55 | | - allowNull: true, |
56 | | - style: 'font-size: 14px;', |
57 | | - testId: 'table-group-filter', |
58 | | - onChange: (value) => emitEvent('FilterApplied', {payload: value}), |
59 | | - }), |
60 | | - div( |
61 | | - { class: 'flex-row fx-gap-3' }, |
62 | | - Button({ |
63 | | - icon: 'notifications', |
64 | | - type: 'stroked', |
65 | | - label: 'Notifications', |
66 | | - tooltip: 'Configure email notifications for test runs', |
67 | | - tooltipPosition: 'bottom', |
68 | | - width: 'fit-content', |
69 | | - style: 'background: var(--button-generic-background-color);', |
70 | | - onclick: () => emitEvent('RunNotificationsClicked', {}), |
71 | | - }), |
72 | | - Button({ |
73 | | - icon: 'today', |
74 | | - type: 'stroked', |
75 | | - label: 'Schedules', |
76 | | - tooltip: 'Manage when test suites should run', |
77 | | - tooltipPosition: 'bottom', |
78 | | - width: 'fit-content', |
79 | | - style: 'background: var(--button-generic-background-color);', |
80 | | - onclick: () => emitEvent('RunSchedulesClicked', {}), |
81 | | - }), |
82 | | - userCanEdit |
83 | | - ? Button({ |
84 | | - icon: 'add', |
| 51 | + () => { |
| 52 | + const initialTableGroup = getValue(props.table_group_filter_options)?.find((op) => op.selected)?.value ?? null; |
| 53 | + const initialTestSuiteName = getValue(props.test_suite_name) || null; |
| 54 | + const selectedTableGroup = van.state(initialTableGroup); |
| 55 | + const testSuiteNameFilter = van.state(initialTestSuiteName); |
| 56 | + |
| 57 | + van.derive(() => { |
| 58 | + if (selectedTableGroup.val !== initialTableGroup || testSuiteNameFilter.val !== initialTestSuiteName) { |
| 59 | + emitEvent('FilterApplied', { payload: { table_group_id: selectedTableGroup.val, test_suite_name: testSuiteNameFilter.val } }); |
| 60 | + } |
| 61 | + }); |
| 62 | + |
| 63 | + return div( |
| 64 | + { class: 'flex-row fx-align-flex-end fx-justify-space-between fx-gap-4 fx-flex-wrap mb-4' }, |
| 65 | + div( |
| 66 | + { class: 'flex-row fx-align-flex-end fx-gap-3' }, |
| 67 | + Select({ |
| 68 | + label: 'Table Group', |
| 69 | + value: selectedTableGroup, |
| 70 | + options: getValue(props.table_group_filter_options) ?? [], |
| 71 | + allowNull: true, |
| 72 | + style: 'font-size: 14px;', |
| 73 | + testId: 'table-group-filter', |
| 74 | + onChange: (value) => selectedTableGroup.val = value, |
| 75 | + }), |
| 76 | + Input({ |
| 77 | + testId: 'test-suite-name-filter', |
| 78 | + icon: 'search', |
| 79 | + label: '', |
| 80 | + placeholder: 'Search test suite names', |
| 81 | + width: 300, |
| 82 | + clearable: true, |
| 83 | + value: testSuiteNameFilter, |
| 84 | + onChange: (value) => testSuiteNameFilter.val = value || null, |
| 85 | + }), |
| 86 | + ), |
| 87 | + div( |
| 88 | + { class: 'flex-row fx-gap-3' }, |
| 89 | + Button({ |
| 90 | + icon: 'notifications', |
85 | 91 | type: 'stroked', |
86 | | - label: 'Add Test Suite', |
| 92 | + label: 'Notifications', |
| 93 | + tooltip: 'Configure email notifications for test runs', |
| 94 | + tooltipPosition: 'bottom', |
87 | 95 | width: 'fit-content', |
88 | 96 | style: 'background: var(--button-generic-background-color);', |
89 | | - onclick: () => emitEvent('AddTestSuiteClicked', {}), |
90 | | - }) |
91 | | - : '', |
92 | | - ), |
93 | | - ), |
| 97 | + onclick: () => emitEvent('RunNotificationsClicked', {}), |
| 98 | + }), |
| 99 | + Button({ |
| 100 | + icon: 'today', |
| 101 | + type: 'stroked', |
| 102 | + label: 'Schedules', |
| 103 | + tooltip: 'Manage when test suites should run', |
| 104 | + tooltipPosition: 'bottom', |
| 105 | + width: 'fit-content', |
| 106 | + style: 'background: var(--button-generic-background-color);', |
| 107 | + onclick: () => emitEvent('RunSchedulesClicked', {}), |
| 108 | + }), |
| 109 | + userCanEdit |
| 110 | + ? Button({ |
| 111 | + icon: 'add', |
| 112 | + type: 'stroked', |
| 113 | + label: 'Add Test Suite', |
| 114 | + width: 'fit-content', |
| 115 | + style: 'background: var(--button-generic-background-color);', |
| 116 | + onclick: () => emitEvent('AddTestSuiteClicked', {}), |
| 117 | + }) |
| 118 | + : '', |
| 119 | + ), |
| 120 | + ); |
| 121 | + }, |
94 | 122 | () => getValue(testSuites)?.length |
95 | 123 | ? div( |
96 | 124 | { class: 'flex-column' }, |
|
0 commit comments