Merge pull request #38 from jbpratt/filter

feat(index): filter dashboards and groups

Author: k8s-ci-robot

web/src/testgrid-index.ts

@@ -51,6 +51,9 @@ export class TestgridIndex extends LitElement {
   @property({ type: Boolean })
   show = true;
 
+  @property({ type: String })
+  searchTerm = '';
+
   /**
    * Lit-element lifecycle method.
    * Invoked when a component is added to the document's DOM.
@@ -61,17 +64,52 @@ export class TestgridIndex extends LitElement {
     this.fetchDashboards();
   }
 
+  get filteredDashboardGroups() {
+    if (!this.searchTerm) return this.dashboardGroups;
+    return this.dashboardGroups.filter(group =>
+      group.toLowerCase().includes(this.searchTerm.toLowerCase())
+    );
+  }
+
+  get filteredDashboards() {
+    if (!this.searchTerm) return this.dashboards;
+    return this.dashboards.filter(dashboard =>
+      dashboard.toLowerCase().includes(this.searchTerm.toLowerCase())
+    );
+  }
+
+  get filteredRespectiveDashboards() {
+    if (!this.searchTerm) return this.respectiveDashboards;
+    return this.respectiveDashboards.filter(dashboard =>
+      dashboard.toLowerCase().includes(this.searchTerm.toLowerCase())
+    );
+  }
+
+  private handleSearchInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    this.searchTerm = input.value;
+  }
+
   /**
    * Lit-element lifecycle method.
    * Invoked on each update to perform rendering tasks.
    */
   render() {
     return html`
+      <div class="search-container">
+        <input
+          type="text"
+          placeholder="Search dashboards and groups..."
+          .value=${this.searchTerm}
+          @input=${this.handleSearchInput}
+          class="search-input"
+        />
+      </div>
       <div class="flex-container">
         <!-- loading dashboard groups -->
         <mwc-list style="min-width: 760px">
           ${map(
-            this.dashboardGroups,
+            this.filteredDashboardGroups,
             (dash: string, index: number) =>
               html`
                 <mwc-list-item
@@ -89,10 +127,10 @@ export class TestgridIndex extends LitElement {
         </mwc-list>
 
         <!-- loading dashboards -->
-        ${this.show ? dashboardTemplate(this.dashboards) : ''}
+        ${this.show ? dashboardTemplate(this.filteredDashboards) : ''}
 
         <!-- loading respective dashboards -->
-        ${!this.show ? dashboardTemplate(this.respectiveDashboards) : ''}
+        ${!this.show ? dashboardTemplate(this.filteredRespectiveDashboards) : ''}
         ${!this.show
           ? html`
               <mwc-button
@@ -185,6 +223,28 @@ export class TestgridIndex extends LitElement {
       background-color: var(--example-app-background-color);
     }
 
+    .search-container {
+      display: flex;
+      justify-content: center;
+      margin: 20px 0;
+    }
+
+    .search-input {
+      width: 400px;
+      max-width: 90%;
+      padding: 12px 16px;
+      font-size: 16px;
+      border: 2px solid #ddd;
+      border-radius: 8px;
+      outline: none;
+      transition: border-color 0.2s;
+      box-sizing: border-box;
+    }
+
+    .search-input:focus {
+      border-color: #707df1;
+    }
+
     .flex-container {
       display: grid;
       gap: 30px;

web/test/testgrid-index.test.ts

@@ -123,4 +123,93 @@ describe('Testgrid Index page', () => {
 
     expect(location.pathname).to.not.equal('/');
   });
+
+  describe('Search functionality', () => {
+    it('filters dashboard groups based on search term', async () => {
+      await waitUntil(
+        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard-group'),
+        'Index did not render dashboard groups',
+        {
+          timeout: 4000,
+        }
+      );
+
+      element.searchTerm = 'group-1';
+      await element.updateComplete;
+
+      expect(element.filteredDashboardGroups).to.have.lengthOf(1);
+      expect(element.filteredDashboardGroups[0]).to.include('group-1');
+    });
+
+    it('filters dashboards based on search term', async () => {
+      await waitUntil(
+        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'),
+        'Index did not render dashboards',
+        {
+          timeout: 4000,
+        }
+      );
+
+      element.searchTerm = 'dashboard-8';
+      await element.updateComplete;
+
+      expect(element.filteredDashboards).to.have.lengthOf(1);
+      expect(element.filteredDashboards[0]).to.include('dashboard-8');
+    });
+
+    it('shows no results when search term matches nothing', async () => {
+      await waitUntil(
+        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'),
+        'Index did not render dashboards',
+        {
+          timeout: 4000,
+        }
+      );
+
+      element.searchTerm = 'nonexistent';
+      await element.updateComplete;
+
+      expect(element.filteredDashboards).to.have.lengthOf(0);
+      expect(element.filteredDashboardGroups).to.have.lengthOf(0);
+    });
+
+    it('filters respective dashboards when in group view', async () => {
+      await waitUntil(
+        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard-group'),
+        'Index did not render dashboard groups',
+        {
+          timeout: 4000,
+        }
+      );
+
+      // click on a dashboard group to show respective dashboards
+      const dashboardGroup: ListItemBase = element.shadowRoot!.querySelector(
+        'mwc-list-item.dashboard-group'
+      )!;
+      dashboardGroup.click();
+      await aTimeout(3000);
+
+      element.searchTerm = 'dashboard-1';
+      await element.updateComplete;
+
+      expect(element.filteredRespectiveDashboards).to.have.lengthOf(1);
+      expect(element.filteredRespectiveDashboards[0]).to.include('dashboard-1');
+    });
+
+    it('performs case-insensitive search', async () => {
+      await waitUntil(
+        () => element.shadowRoot!.querySelector('mwc-list-item.dashboard'),
+        'Index did not render dashboards',
+        {
+          timeout: 4000,
+        }
+      );
+
+      element.searchTerm = 'DASHBOARD-8';
+      await element.updateComplete;
+
+      expect(element.filteredDashboards).to.have.lengthOf(1);
+      expect(element.filteredDashboards[0]).to.include('dashboard-8');
+    });
+  });
 });