Merge pull request #334 from google/revert-333-main

Revert "Add agent search in dropdown"

Author: seanzhou1023

src/app/components/side-panel/side-panel.component.html

@@ -33,22 +33,10 @@
         class="app-select"
         panelClass="wide-agent-dropdown-panel"
         (selectionChange)="appSelectionChange.emit($event)"
-        (openedChange)="agentSearchControl.setValue('')"
         [placeholder]="isLoadingApps()() ? 'Loading...' : 'Select an agent'"
         [formControl]="selectedAppControl()"
       >
-        <mat-option class="search-option" (click)="$event.stopPropagation()" [value]="null">
-          <mat-form-field class="agent-search-field" subscriptSizing="dynamic" (click)="$event.stopPropagation()">
-            <input
-              matInput
-              placeholder="Search agents..."
-              [formControl]="agentSearchControl"
-              (click)="$event.stopPropagation()"
-              (keydown)="$event.stopPropagation()"
-            />
-          </mat-form-field>
-        </mat-option>
-        @if (filteredApps$ | async; as availableApps) {
+        @if (apps$() | async; as availableApps) {
           @for (appName of availableApps; track appName) {
             <mat-option class="app-name-option" [value]="appName">{{ appName }}</mat-option>
           }

src/app/components/side-panel/side-panel.component.scss

@@ -233,7 +233,6 @@
 :host ::ng-deep .wide-agent-dropdown-panel {
   min-width: 300px;
   max-width: 600px;
-  max-height: 400px;
 
   .mat-mdc-option {
     white-space: normal;
@@ -242,26 +241,4 @@
     min-height: 48px;
     padding: 8px 16px;
   }
-
-  .search-option {
-    position: sticky !important;
-    top: 0 !important;
-    z-index: 1000 !important;
-    background-color: var(--mat-select-panel-background-color, white) !important;
-    padding: 8px 16px !important;
-    border-bottom: 1px solid var(--mat-divider-color, rgba(0, 0, 0, 0.12));
-    min-height: auto !important;
-    height: auto !important;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    opacity: 1 !important;
-  }
-}
-
-
-.agent-search-field {
-  width: 100%;
-
-  .mat-mdc-form-field-subscript-wrapper {
-    display: none;
-  }
 }

src/app/components/side-panel/side-panel.component.spec.ts

@@ -253,9 +253,7 @@ describe('SidePanelComponent', () => {
     it('shows all apps in selector', () => {
       const appSelect = fixture.debugElement.query(APP_SELECT_SELECTOR);
       const options = appSelect.componentInstance.options;
-      // Filter out the search option (which has value=null)
-      const appOptions = options.filter((option: MatOption) => option.value !== null);
-      expect(appOptions.map((option: MatOption) => option.value)).toEqual([
+      expect(options.map((option: MatOption) => option.value)).toEqual([
         'app1',
         'app2',
       ]);

src/app/components/side-panel/side-panel.component.ts

@@ -17,12 +17,9 @@
 
 import {AsyncPipe, NgComponentOutlet, NgTemplateOutlet} from '@angular/common';
 import {AfterViewInit, Component, DestroyRef, effect, EnvironmentInjector, inject, input, output, runInInjectionContext, signal, Type, viewChild, ViewContainerRef, type WritableSignal} from '@angular/core';
-import {toObservable} from '@angular/core/rxjs-interop';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatMiniFabButton} from '@angular/material/button';
 import {MatOption} from '@angular/material/core';
-import {MatFormField} from '@angular/material/form-field';
-import {MatInput} from '@angular/material/input';
 import {MatIcon} from '@angular/material/icon';
 import {MatPaginator, PageEvent} from '@angular/material/paginator';
 import {MatProgressSpinner} from '@angular/material/progress-spinner';
@@ -32,7 +29,7 @@ import {MatTooltip} from '@angular/material/tooltip';
 import {type SafeHtml} from '@angular/platform-browser';
 import {NgxJsonViewerModule} from 'ngx-json-viewer';
 import {combineLatest, Observable, of} from 'rxjs';
-import {first, map, startWith, switchMap} from 'rxjs/operators';
+import {first, map} from 'rxjs/operators';
 
 import {EvalCase} from '../../core/models/Eval';
 import {Session} from '../../core/models/Session';
@@ -80,8 +77,6 @@ import {SidePanelMessagesInjectionToken} from './side-panel.component.i18n';
     MatSelect,
     ReactiveFormsModule,
     MatProgressSpinner,
-    MatFormField,
-    MatInput,
   ],
 })
 export class SidePanelComponent implements AfterViewInit {
@@ -159,27 +154,6 @@ export class SidePanelComponent implements AfterViewInit {
   protected readonly isSessionsTabReorderingEnabledObs =
       this.featureFlagService.isSessionsTabReorderingEnabled();
 
-  // Agent search
-  readonly agentSearchControl = new FormControl('', { nonNullable: true });
-  readonly filteredApps$: Observable<string[] | undefined> = toObservable(this.apps$).pipe(
-    switchMap(appsObservable =>
-      combineLatest([
-        appsObservable,
-        this.agentSearchControl.valueChanges.pipe(startWith(''))
-      ])
-    ),
-    map(([apps, searchTerm]) => {
-      if (!apps) {
-        return apps;
-      }
-      if (!searchTerm || searchTerm.trim() === '') {
-        return apps;
-      }
-      const lowerSearch = searchTerm.toLowerCase().trim();
-      return apps.filter(app => app.toLowerCase().startsWith(lowerSearch));
-    })
-  );
-
   ngAfterViewInit() {
     // Wait one tick until the eval tab container is ready.
     setTimeout(() => {

src/styles.scss

@@ -885,32 +885,3 @@ html.dark-theme {
     border-bottom: none !important;
   }
 }
-
-.wide-agent-dropdown-panel {
-  padding: 0 !important;
-
-  .search-option {
-    position: sticky !important;
-    top: 0 !important;
-    z-index: 1000 !important;
-    opacity: 1 !important;
-    padding-top: 8px;
-    padding-bottom: 8px;
-  }
-
-  span {
-    width: 100%;
-  }
-}
-
-html.dark-theme .wide-agent-dropdown-panel .search-option {
-  background-color: #2b2b2f !important;
-
-  input {
-    caret-color: white !important;
-  }
-}
-
-html.light-theme .wide-agent-dropdown-panel .search-option {
-  background-color: #ffffff !important;
-}