Merge "Remove property drilling for `gr-smart-search`" into stable-3.8

6 files changed, 20 insertions, 38 deletions

diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
index 4fee3952f8..2c6de04729 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header.ts
@@ -104,9 +104,6 @@ declare global {
 
 @customElement('gr-main-header')
 export class GrMainHeader extends LitElement {
-  @property({type: String})
-  searchQuery = '';
-
   @property({type: Boolean, reflect: true})
   loggedIn?: boolean;
 
@@ -143,8 +140,6 @@ export class GrMainHeader extends LitElement {
   // private but used in test
   @state() feedbackURL = '';
 
-  @state() private serverConfig?: ServerInfo;
-
   private readonly restApiService = getAppContext().restApiService;
 
   private readonly getPluginLoader = resolve(this, pluginLoaderToken);
@@ -172,7 +167,6 @@ export class GrMainHeader extends LitElement {
     this.subscriptions.push(
       this.getConfigModel().serverConfig$.subscribe(config => {
         if (!config) return;
-        this.serverConfig = config;
         this.retrieveFeedbackURL(config);
         this.retrieveRegisterURL(config);
         this.restApiService.getDocsBaseUrl(config).then(docBaseUrl => {
@@ -378,12 +372,7 @@ export class GrMainHeader extends LitElement {
         class="hideOnMobile"
         name="header-small-banner"
       ></gr-endpoint-decorator>
-      <gr-smart-search
-        id="search"
-        label="Search for changes"
-        .searchQuery=${this.searchQuery}
-        .serverConfig=${this.serverConfig}
-      ></gr-smart-search>
+      <gr-smart-search id="search"></gr-smart-search>
       <gr-endpoint-decorator
         class="hideOnMobile"
         name="header-top-right"
diff --git a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
index b23f9bcf12..955846f67c 100644
--- a/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-main-header/gr-main-header_test.ts
@@ -61,8 +61,7 @@ suite('gr-main-header tests', () => {
               name="header-small-banner"
             >
             </gr-endpoint-decorator>
-            <gr-smart-search id="search" label="Search for changes">
-            </gr-smart-search>
+            <gr-smart-search id="search"> </gr-smart-search>
             <gr-endpoint-decorator class="hideOnMobile" name="header-top-right">
             </gr-endpoint-decorator>
             <gr-endpoint-decorator
diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.ts b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.ts
index a2974869d6..0856eedcaf 100644
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.ts
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar.ts
@@ -164,9 +164,6 @@ export class GrSearchBar extends LitElement {
   @state()
   mergeabilityComputationBehavior?: MergeabilityComputationBehavior;
 
-  @property({type: String})
-  label = '';
-
   // private but used in test
   @state() inputVal = '';
 
@@ -224,7 +221,7 @@ export class GrSearchBar extends LitElement {
       <form>
         <gr-autocomplete
           id="searchInput"
-          .label=${this.label}
+          label="Search for changes"
           .text=${this.inputVal}
           .query=${this.query}
           allow-non-suggested-values
diff --git a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts
index 6e348ce5a9..603ea7b202 100644
--- a/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts
+++ b/polygerrit-ui/app/elements/core/gr-search-bar/gr-search-bar_test.ts
@@ -70,6 +70,7 @@ suite('gr-search-bar tests', () => {
           <gr-autocomplete
             allow-non-suggested-values=""
             id="searchInput"
+            label="Search for changes"
             multi=""
             tab-complete=""
           >
diff --git a/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search.ts b/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search.ts
index b9c920ad86..8b4b52ffe0 100644
--- a/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search.ts
+++ b/polygerrit-ui/app/elements/core/gr-smart-search/gr-smart-search.ts
@@ -14,11 +14,14 @@ import {
 import {AutocompleteSuggestion} from '../../shared/gr-autocomplete/gr-autocomplete';
 import {getAppContext} from '../../../services/app-context';
 import {LitElement, html} from 'lit';
-import {customElement, property, state} from 'lit/decorators.js';
+import {customElement, state} from 'lit/decorators.js';
 import {subscribe} from '../../lit/subscription-controller';
 import {resolve} from '../../../models/dependency';
 import {configModelToken} from '../../../models/config/config-model';
-import {createSearchUrl} from '../../../models/views/search';
+import {
+  createSearchUrl,
+  searchViewModelToken,
+} from '../../../models/views/search';
 import {throwingErrorCallback} from '../../shared/gr-rest-api-interface/gr-rest-apis/gr-rest-api-helper';
 
 const MAX_AUTOCOMPLETE_RESULTS = 10;
@@ -36,29 +39,31 @@ declare global {
 
 @customElement('gr-smart-search')
 export class GrSmartSearch extends LitElement {
-  @property({type: String})
+  @state()
   searchQuery = '';
 
   @state()
   serverConfig?: ServerInfo;
 
-  @property({type: String})
-  label = '';
-
   private readonly restApiService = getAppContext().restApiService;
 
   private readonly getConfigModel = resolve(this, configModelToken);
 
   private readonly getNavigation = resolve(this, navigationToken);
 
+  private readonly getSearchViewModel = resolve(this, searchViewModelToken);
+
   constructor() {
     super();
     subscribe(
       this,
       () => this.getConfigModel().serverConfig$,
-      config => {
-        this.serverConfig = config;
-      }
+      config => (this.serverConfig = config)
+    );
+    subscribe(
+      this,
+      () => this.getSearchViewModel().query$,
+      query => (this.searchQuery = query ?? '')
     );
   }
 
@@ -72,7 +77,6 @@ export class GrSmartSearch extends LitElement {
     return html`
       <gr-search-bar
         id="search"
-        .label=${this.label}
         .value=${this.searchQuery}
         .projectSuggestions=${projectSuggestions}
         .groupSuggestions=${groupSuggestions}
diff --git a/polygerrit-ui/app/elements/gr-app-element.ts b/polygerrit-ui/app/elements/gr-app-element.ts
index a36f17af55..f81640de71 100644
--- a/polygerrit-ui/app/elements/gr-app-element.ts
+++ b/polygerrit-ui/app/elements/gr-app-element.ts
@@ -68,7 +68,7 @@ import {isDarkTheme, prefersDarkColorScheme} from '../utils/theme-util';
 import {AppTheme} from '../constants/constants';
 import {subscribe} from './lit/subscription-controller';
 import {PluginViewState} from '../models/views/plugin';
-import {createSearchUrl, SearchViewState} from '../models/views/search';
+import {createSearchUrl} from '../models/views/search';
 import {createSettingsUrl} from '../models/views/settings';
 import {createDashboardUrl} from '../models/views/dashboard';
 import {userModelToken} from '../models/user/user-model';
@@ -420,7 +420,6 @@ export class GrAppElement extends LitElement {
     return html`
       <gr-main-header
         id="mainHeader"
-        .searchQuery=${(this.params as SearchViewState)?.query}
         @mobile-search=${this.mobileSearchToggle}
         @show-keyboard-shortcuts=${this.showKeyboardShortcuts}
         .mobileSearchHidden=${!this.mobileSearch}
@@ -464,14 +463,7 @@ export class GrAppElement extends LitElement {
 
   private renderMobileSearch() {
     if (!this.mobileSearch) return nothing;
-    return html`
-      <gr-smart-search
-        id="search"
-        label="Search for changes"
-        .searchQuery=${(this.params as SearchViewState)?.query}
-      >
-      </gr-smart-search>
-    `;
+    return html`<gr-smart-search id="search"></gr-smart-search>`;
   }
 
   private renderChangeListView() {