Align filtering of integrations with other pages (#8746)

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

@@ -1,7 +1,7 @@
 import "@material/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiFilterVariant, mdiPlus } from "@mdi/js";
 import "@polymer/app-route/app-route";
 import Fuse from "fuse.js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
@@ -17,6 +17,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
+import { ifDefined } from "lit-html/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
@@ -28,6 +29,7 @@ import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
+import "../../../components/ha-checkbox";
 import "../../../components/ha-svg-icon";
 import {
   ConfigEntry,
@@ -275,6 +277,36 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       this._filter
     );
 
+    const filterMenu = html`<ha-button-menu
+      corner="BOTTOM_START"
+      multi
+      slot=${ifDefined(this.narrow ? "toolbar-icon" : undefined)}
+      @action=${this._handleMenuAction}
+    >
+      <mwc-icon-button
+        .title=${this.hass.localize("ui.common.menu")}
+        .label=${this.hass.localize("ui.common.overflow_menu")}
+        slot="trigger"
+      >
+        <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
+      </mwc-icon-button>
+      <mwc-list-item graphic="control" .selected=${this._showIgnored}>
+        <ha-checkbox slot="graphic" .checked=${this._showIgnored}></ha-checkbox>
+        ${this.hass.localize(
+          "ui.panel.config.integrations.ignore.show_ignored"
+        )}
+      </mwc-list-item>
+      <mwc-list-item graphic="control" .selected=${this._showDisabled}>
+        <ha-checkbox
+          slot="graphic"
+          .checked=${this._showDisabled}
+        ></ha-checkbox>
+        ${this.hass.localize(
+          "ui.panel.config.integrations.disable.show_disabled"
+        )}
+      </mwc-list-item>
+    </ha-button-menu>`;
+
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -286,51 +318,20 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         ${this.narrow
           ? html`
               <div slot="header">
-                <slot name="header">
+                <search-input
-                  <search-input
+                  .filter=${this._filter}
-                    .filter=${this._filter}
+                  class="header"
-                    class="header"
+                  no-label-float
-                    no-label-float
+                  no-underline
-                    no-underline
+                  @value-changed=${this._handleSearchChange}
-                    @value-changed=${this._handleSearchChange}
+                  .label=${this.hass.localize(
-                    .label=${this.hass.localize(
+                    "ui.panel.config.integrations.search"
-                      "ui.panel.config.integrations.search"
+                  )}
-                    )}
+                ></search-input>
-                  ></search-input>
-                </slot>
               </div>
+              ${filterMenu}
             `
-          : ""}
+          : html`
-        <ha-button-menu
-          corner="BOTTOM_START"
-          slot="toolbar-icon"
-          @action=${this._handleMenuAction}
-        >
-          <mwc-icon-button
-            .title=${this.hass.localize("ui.common.menu")}
-            .label=${this.hass.localize("ui.common.overflow_menu")}
-            slot="trigger"
-          >
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-          </mwc-icon-button>
-          <mwc-list-item>
-            ${this.hass.localize(
-              this._showIgnored
-                ? "ui.panel.config.integrations.ignore.hide_ignored"
-                : "ui.panel.config.integrations.ignore.show_ignored"
-            )}
-          </mwc-list-item>
-          <mwc-list-item>
-            ${this.hass.localize(
-              this._showDisabled
-                ? "ui.panel.config.integrations.disable.hide_disabled"
-                : "ui.panel.config.integrations.disable.show_disabled"
-            )}
-          </mwc-list-item>
-        </ha-button-menu>
-
-        ${!this.narrow
-          ? html`
               <div class="search">
                 <search-input
                   no-label-float
@@ -355,9 +356,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                       </mwc-button>
                     </div>`
                   : ""}
+                ${filterMenu}
               </div>
-            `
+            `}
-          : ""}
 
         <div
           class="container"
@@ -758,6 +759,9 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     return [
       haStyle,
       css`
+        ha-button-menu {
+          margin: 0 -8px 0 8px;
+        }
         .container {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

src/translations/en.json

@@ -2105,7 +2105,6 @@
           "rename_input_label": "Entry name",
           "search": "Search integrations",
           "disable": {
-            "show_disabled": "Show disabled integrations",
             "hide_disabled": "Hide disabled integrations",
             "disabled_integrations": "{number} disabled",
             "show": "Show"
@@ -2115,7 +2114,6 @@
             "confirm_ignore_title": "Ignore discovery of {name}?",
             "confirm_ignore": "Are you sure you don't want to set up this integration? You can undo this by clicking the 'Show ignored integrations' in the overflow menu on the top right.",
             "show_ignored": "Show ignored integrations",
-            "hide_ignored": "Hide ignored integrations",
             "ignored": "Ignored",
             "confirm_delete_ignore_title": "Stop ignoring {name}?",
             "confirm_delete_ignore": "This will make the integration appear in your discovered integrations again when it gets discovered. This might require a restart or take some time.",