Improve integration search (#11140)

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -252,6 +252,7 @@ class DataEntryFlowDialog extends LitElement {
                         <step-flow-pick-handler
                           .hass=${this.hass}
                           .handlers=${this._handlers}
+                          .initialFilter=${this._params.searchQuery}
                           @handler-picked=${this._handlerPicked}
                         ></step-flow-pick-handler>
                       `

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -96,6 +96,7 @@ export type LoadingReason =
 
 export interface DataEntryFlowDialogParams {
   startFlowHandler?: string;
+  searchQuery?: string;
   continueFlowId?: string;
   dialogClosedCallback?: (params: {
     flowFinished: boolean;

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -1,7 +1,14 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import Fuse from "fuse.js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  TemplateResult,
+  PropertyValues,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -36,6 +43,8 @@ class StepFlowPickHandler extends LitElement {
 
   @property({ attribute: false }) public handlers!: string[];
 
+  @property() public initialFilter?: string;
+
   @state() private _filter?: string;
 
   private _width?: number;
@@ -138,6 +147,13 @@ class StepFlowPickHandler extends LitElement {
     `;
   }
 
+  public willUpdate(changedProps: PropertyValues): void {
+    if (this._filter === undefined && this.initialFilter !== undefined) {
+      this._filter = this.initialFilter;
+    }
+    super.willUpdate(changedProps);
+  }
+
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     setTimeout(

src/panels/config/integrations/ha-config-integrations.ts

@@ -425,6 +425,34 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                     .deviceRegistryEntries=${this._deviceRegistryEntries}
                   ></ha-integration-card>`
               )
+            : this._filter &&
+              !configEntriesInProgress.length &&
+              !groupedConfigEntries.size &&
+              this._configEntries.length
+            ? html`
+                <div class="empty-message">
+                  <h1>
+                    ${this.hass.localize(
+                      "ui.panel.config.integrations.none_found"
+                    )}
+                  </h1>
+                  <p>
+                    ${this.hass.localize(
+                      "ui.panel.config.integrations.none_found_detail"
+                    )}
+                  </p>
+                  <mwc-button
+                    @click=${this._createFlow}
+                    unelevated
+                    .label=${this.hass.localize(
+                      "ui.panel.config.integrations.add_integration"
+                    )}
+                  ></mwc-button>
+                </div>
+              `
+            : // If we have a filter, never show a card
+            this._filter
+            ? ""
             : // If we're showing 0 cards, show empty state text
             (!this._showIgnored || ignoredConfigEntries.length === 0) &&
               (!this._showDisabled || disabledConfigEntries.size === 0) &&
@@ -449,25 +477,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                 </div>
               `
             : ""}
-          ${this._filter &&
-          !configEntriesInProgress.length &&
-          !groupedConfigEntries.size &&
-          this._configEntries.length
-            ? html`
-                <div class="empty-message">
-                  <h1>
-                    ${this.hass.localize(
-                      "ui.panel.config.integrations.none_found"
-                    )}
-                  </h1>
-                  <p>
-                    ${this.hass.localize(
-                      "ui.panel.config.integrations.none_found_detail"
-                    )}
-                  </p>
-                </div>
-              `
-            : ""}
         </div>
         <ha-fab
           slot="fab"
@@ -562,6 +571,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
 
   private _createFlow() {
     showConfigFlowDialog(this, {
+      searchQuery: this._filter,
       dialogClosedCallback: () => {
         this._handleFlowUpdated();
       },