Show note about integrations not in UI even for non-advanced (#9457)

* Show note about integrations not in UI even for non-advanced

* Address comments

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

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

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

@@ -3,7 +3,6 @@ import "@polymer/paper-item/paper-item-body";
 import Fuse from "fuse.js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -34,9 +33,7 @@ declare global {
 class StepFlowPickHandler extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public handlers!: string[];
-
-  @property() public showAdvanced?: boolean;
+  @property({ attribute: false }) public handlers!: string[];
 
   @state() private _filter?: string;
 
@@ -87,47 +84,50 @@ class StepFlowPickHandler extends LitElement {
           width: `${this._width}px`,
           height: `${this._height}px`,
         })}
-        class=${classMap({ advanced: Boolean(this.showAdvanced) })}
       >
-        ${handlers.map(
-          (handler: HandlerObj) =>
-            html`
-              <paper-icon-item
-                @click=${this._handlerPicked}
-                .handler=${handler}
-              >
-                <img
-                  slot="item-icon"
-                  loading="lazy"
-                  src=${brandsUrl(handler.slug, "icon", true)}
-                  referrerpolicy="no-referrer"
-                />
+        ${handlers.length
+          ? handlers.map(
+              (handler: HandlerObj) =>
+                html`
+                  <paper-icon-item
+                    @click=${this._handlerPicked}
+                    .handler=${handler}
+                  >
+                    <img
+                      slot="item-icon"
+                      loading="lazy"
+                      src=${brandsUrl(handler.slug, "icon", true)}
+                      referrerpolicy="no-referrer"
+                    />
 
-                <paper-item-body> ${handler.name} </paper-item-body>
-                <ha-icon-next></ha-icon-next>
-              </paper-icon-item>
-            `
-        )}
+                    <paper-item-body> ${handler.name} </paper-item-body>
+                    <ha-icon-next></ha-icon-next>
+                  </paper-icon-item>
+                `
+            )
+          : html`
+              <p>
+                ${this.hass.localize(
+                  "ui.panel.config.integrations.note_about_integrations"
+                )}<br />
+                ${this.hass.localize(
+                  "ui.panel.config.integrations.note_about_website_reference"
+                )}<a
+                  href="${documentationUrl(
+                    this.hass,
+                    `/integrations/${
+                      this._filter ? `#search/${this._filter}` : ""
+                    }`
+                  )}"
+                  target="_blank"
+                  rel="noreferrer"
+                  >${this.hass.localize(
+                    "ui.panel.config.integrations.home_assistant_website"
+                  )}</a
+                >.
+              </p>
+            `}
       </div>
-      ${this.showAdvanced
-        ? html`
-            <p>
-              ${this.hass.localize(
-                "ui.panel.config.integrations.note_about_integrations"
-              )}<br />
-              ${this.hass.localize(
-                "ui.panel.config.integrations.note_about_website_reference"
-              )}<a
-                href="${documentationUrl(this.hass, "/integrations/")}"
-                target="_blank"
-                rel="noreferrer"
-                >${this.hass.localize(
-                  "ui.panel.config.integrations.home_assistant_website"
-                )}</a
-              >.
-            </p>
-          `
-        : ""}
     `;
   }
 
@@ -193,9 +193,6 @@ class StepFlowPickHandler extends LitElement {
           div {
             max-height: calc(100vh - 134px);
           }
-          div.advanced {
-            max-height: calc(100vh - 250px);
-          }
         }
         paper-icon-item {
           cursor: pointer;

src/translations/en.json

@@ -2121,7 +2121,7 @@
           "confirm_new": "Do you want to set up {integration}?",
           "add_integration": "Add integration",
           "no_integrations": "Seems like you don't have any integrations configured yet. Click on the button below to add your first integration!",
-          "note_about_integrations": "Not all integrations can be configured via the UI yet.",
+          "note_about_integrations": "No integrations matched your search, the integration you want to set up might not be available to set up via the UI yet.",
           "note_about_website_reference": "More are available on the ",
           "home_assistant_website": "Home Assistant website",
           "configure": "Configure",