Logs are default

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: Report a bug with the UI / Dashboards
+name: Report a bug with the UI, Frontend or Lovelace
 description: Report an issue related to the Home Assistant frontend.
 labels: bug
 body:
@@ -9,7 +9,7 @@ body:
 
         If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
 
-        **Please not not report issues for custom cards.**
+        **Please not not report issues for custom Lovelace cards.**
 
         [fr]: https://github.com/home-assistant/frontend/discussions
         [releases]: https://github.com/home-assistant/home-assistant/releases

.github/ISSUE_TEMPLATE/config.yml

@@ -1,17 +1,17 @@
 blank_issues_enabled: false
 contact_links:
-  - name: Request a feature for the UI / Dashboards
+  - name: Request a feature for the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/frontend/discussions/category_choices
     about: Request an new feature for the Home Assistant frontend.
-  - name: Report a bug that is NOT related to the UI / Dashboards
+  - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
-    about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.
+    about: This is the issue tracker for our frontend. Please report other issues with the backend repository.
   - name: Report incorrect or missing information on our website
     url: https://github.com/home-assistant/home-assistant.io/issues
     about: Our documentation has its own issue tracker. Please report issues with the website there.
   - name: I have a question or need support
     url: https://www.home-assistant.io/help
-    about: We use GitHub for tracking bugs. Check our website for resources on getting help.
+    about: We use GitHub for tracking bugs, check our website for resources on getting help.
   - name: I'm unsure where to go
     url: https://www.home-assistant.io/join-chat
     about: If you are unsure where to go, then joining our chat is recommended; Just ask!

hassio/src/dashboard/hassio-update.ts

@@ -85,7 +85,7 @@ export class HassioUpdate extends LitElement {
       return html``;
     }
     return html`
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>

hassio/src/system/hassio-core-info.ts

@@ -48,7 +48,7 @@ class HassioCoreInfo extends LitElement {
     ];
 
     return html`
-      <ha-card header="Core" outlined>
+      <ha-card header="Core">
         <div class="card-content">
           <div>
             <ha-settings-row>

hassio/src/system/hassio-host-info.ts

@@ -66,7 +66,7 @@ class HassioHostInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Host" outlined>
+      <ha-card header="Host">
         <div class="card-content">
           <div>
             ${this.supervisor.host.features.includes("hostname")

hassio/src/system/hassio-supervisor-info.ts

@@ -57,7 +57,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor" outlined>
+      <ha-card header="Supervisor">
         <div class="card-content">
           <div>
             <ha-settings-row>

hassio/src/system/hassio-supervisor-log.ts

@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}

hassio/src/update-available/update-available-card.ts

@@ -128,7 +128,6 @@ class UpdateAvailableCard extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("update_available.update_name", {
           name: this._name,
         })}

package.json

@@ -106,6 +106,7 @@
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
+    "fuzzysort": "^1.2.1",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
     "home-assistant-js-websocket": "^7.0.3",

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220504.0
+version      = 20220502.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/common/string/filter/char-code.ts

@@ -1,244 +0,0 @@
-// MIT License
-
-// Copyright (c) 2015 - present Microsoft Corporation
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
-
-/**
- * An inlined enum containing useful character codes (to be used with String.charCodeAt).
- * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
- */
-export enum CharCode {
-  Null = 0,
-  /**
-   * The `\b` character.
-   */
-  Backspace = 8,
-  /**
-   * The `\t` character.
-   */
-  Tab = 9,
-  /**
-   * The `\n` character.
-   */
-  LineFeed = 10,
-  /**
-   * The `\r` character.
-   */
-  CarriageReturn = 13,
-  Space = 32,
-  /**
-   * The `!` character.
-   */
-  ExclamationMark = 33,
-  /**
-   * The `"` character.
-   */
-  DoubleQuote = 34,
-  /**
-   * The `#` character.
-   */
-  Hash = 35,
-  /**
-   * The `$` character.
-   */
-  DollarSign = 36,
-  /**
-   * The `%` character.
-   */
-  PercentSign = 37,
-  /**
-   * The `&` character.
-   */
-  Ampersand = 38,
-  /**
-   * The `'` character.
-   */
-  SingleQuote = 39,
-  /**
-   * The `(` character.
-   */
-  OpenParen = 40,
-  /**
-   * The `)` character.
-   */
-  CloseParen = 41,
-  /**
-   * The `*` character.
-   */
-  Asterisk = 42,
-  /**
-   * The `+` character.
-   */
-  Plus = 43,
-  /**
-   * The `,` character.
-   */
-  Comma = 44,
-  /**
-   * The `-` character.
-   */
-  Dash = 45,
-  /**
-   * The `.` character.
-   */
-  Period = 46,
-  /**
-   * The `/` character.
-   */
-  Slash = 47,
-
-  Digit0 = 48,
-  Digit1 = 49,
-  Digit2 = 50,
-  Digit3 = 51,
-  Digit4 = 52,
-  Digit5 = 53,
-  Digit6 = 54,
-  Digit7 = 55,
-  Digit8 = 56,
-  Digit9 = 57,
-
-  /**
-   * The `:` character.
-   */
-  Colon = 58,
-  /**
-   * The `;` character.
-   */
-  Semicolon = 59,
-  /**
-   * The `<` character.
-   */
-  LessThan = 60,
-  /**
-   * The `=` character.
-   */
-  Equals = 61,
-  /**
-   * The `>` character.
-   */
-  GreaterThan = 62,
-  /**
-   * The `?` character.
-   */
-  QuestionMark = 63,
-  /**
-   * The `@` character.
-   */
-  AtSign = 64,
-
-  A = 65,
-  B = 66,
-  C = 67,
-  D = 68,
-  E = 69,
-  F = 70,
-  G = 71,
-  H = 72,
-  I = 73,
-  J = 74,
-  K = 75,
-  L = 76,
-  M = 77,
-  N = 78,
-  O = 79,
-  P = 80,
-  Q = 81,
-  R = 82,
-  S = 83,
-  T = 84,
-  U = 85,
-  V = 86,
-  W = 87,
-  X = 88,
-  Y = 89,
-  Z = 90,
-
-  /**
-   * The `[` character.
-   */
-  OpenSquareBracket = 91,
-  /**
-   * The `\` character.
-   */
-  Backslash = 92,
-  /**
-   * The `]` character.
-   */
-  CloseSquareBracket = 93,
-  /**
-   * The `^` character.
-   */
-  Caret = 94,
-  /**
-   * The `_` character.
-   */
-  Underline = 95,
-  /**
-   * The ``(`)`` character.
-   */
-  BackTick = 96,
-
-  a = 97,
-  b = 98,
-  c = 99,
-  d = 100,
-  e = 101,
-  f = 102,
-  g = 103,
-  h = 104,
-  i = 105,
-  j = 106,
-  k = 107,
-  l = 108,
-  m = 109,
-  n = 110,
-  o = 111,
-  p = 112,
-  q = 113,
-  r = 114,
-  s = 115,
-  t = 116,
-  u = 117,
-  v = 118,
-  w = 119,
-  x = 120,
-  y = 121,
-  z = 122,
-
-  /**
-   * The `{` character.
-   */
-  OpenCurlyBrace = 123,
-  /**
-   * The `|` character.
-   */
-  Pipe = 124,
-  /**
-   * The `}` character.
-   */
-  CloseCurlyBrace = 125,
-  /**
-   * The `~` character.
-   */
-  Tilde = 126,
-}

src/common/string/filter/filter.ts

@@ -1,551 +0,0 @@
-/* eslint-disable no-console */
-// MIT License
-
-// Copyright (c) 2015 - present Microsoft Corporation
-
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-import { CharCode } from "./char-code";
-
-const _debug = false;
-
-export interface Match {
-  start: number;
-  end: number;
-}
-
-const _maxLen = 128;
-
-function initTable() {
-  const table: number[][] = [];
-  const row: number[] = [];
-  for (let i = 0; i <= _maxLen; i++) {
-    row[i] = 0;
-  }
-  for (let i = 0; i <= _maxLen; i++) {
-    table.push(row.slice(0));
-  }
-  return table;
-}
-
-function isSeparatorAtPos(value: string, index: number): boolean {
-  if (index < 0 || index >= value.length) {
-    return false;
-  }
-  const code = value.codePointAt(index);
-  switch (code) {
-    case CharCode.Underline:
-    case CharCode.Dash:
-    case CharCode.Period:
-    case CharCode.Space:
-    case CharCode.Slash:
-    case CharCode.Backslash:
-    case CharCode.SingleQuote:
-    case CharCode.DoubleQuote:
-    case CharCode.Colon:
-    case CharCode.DollarSign:
-    case CharCode.LessThan:
-    case CharCode.OpenParen:
-    case CharCode.OpenSquareBracket:
-      return true;
-    case undefined:
-      return false;
-    default:
-      if (isEmojiImprecise(code)) {
-        return true;
-      }
-      return false;
-  }
-}
-
-function isWhitespaceAtPos(value: string, index: number): boolean {
-  if (index < 0 || index >= value.length) {
-    return false;
-  }
-  const code = value.charCodeAt(index);
-  switch (code) {
-    case CharCode.Space:
-    case CharCode.Tab:
-      return true;
-    default:
-      return false;
-  }
-}
-
-function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
-  return word[pos] !== wordLow[pos];
-}
-
-export function isPatternInWord(
-  patternLow: string,
-  patternPos: number,
-  patternLen: number,
-  wordLow: string,
-  wordPos: number,
-  wordLen: number,
-  fillMinWordPosArr = false
-): boolean {
-  while (patternPos < patternLen && wordPos < wordLen) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      if (fillMinWordPosArr) {
-        // Remember the min word position for each pattern position
-        _minWordMatchPos[patternPos] = wordPos;
-      }
-      patternPos += 1;
-    }
-    wordPos += 1;
-  }
-  return patternPos === patternLen; // pattern must be exhausted
-}
-
-enum Arrow {
-  Diag = 1,
-  Left = 2,
-  LeftLeft = 3,
-}
-
-/**
- * An array representing a fuzzy match.
- *
- * 0. the score
- * 1. the offset at which matching started
- * 2. `<match_pos_N>`
- * 3. `<match_pos_1>`
- * 4. `<match_pos_0>` etc
- */
-// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
-export type FuzzyScore = Array<number>;
-
-export function fuzzyScore(
-  pattern: string,
-  patternLow: string,
-  patternStart: number,
-  word: string,
-  wordLow: string,
-  wordStart: number,
-  firstMatchCanBeWeak: boolean
-): FuzzyScore | undefined {
-  const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
-  const wordLen = word.length > _maxLen ? _maxLen : word.length;
-
-  if (
-    patternStart >= patternLen ||
-    wordStart >= wordLen ||
-    patternLen - patternStart > wordLen - wordStart
-  ) {
-    return undefined;
-  }
-
-  // Run a simple check if the characters of pattern occur
-  // (in order) at all in word. If that isn't the case we
-  // stop because no match will be possible
-  if (
-    !isPatternInWord(
-      patternLow,
-      patternStart,
-      patternLen,
-      wordLow,
-      wordStart,
-      wordLen,
-      true
-    )
-  ) {
-    return undefined;
-  }
-
-  // Find the max matching word position for each pattern position
-  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
-  _fillInMaxWordMatchPos(
-    patternLen,
-    wordLen,
-    patternStart,
-    wordStart,
-    patternLow,
-    wordLow
-  );
-
-  let row: number;
-  let column = 1;
-  let patternPos: number;
-  let wordPos: number;
-
-  const hasStrongFirstMatch = [false];
-
-  // There will be a match, fill in tables
-  for (
-    row = 1, patternPos = patternStart;
-    patternPos < patternLen;
-    row++, patternPos++
-  ) {
-    // Reduce search space to possible matching word positions and to possible access from next row
-    const minWordMatchPos = _minWordMatchPos[patternPos];
-    const maxWordMatchPos = _maxWordMatchPos[patternPos];
-    const nextMaxWordMatchPos =
-      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
-
-    for (
-      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
-      wordPos < nextMaxWordMatchPos;
-      column++, wordPos++
-    ) {
-      let score = Number.MIN_SAFE_INTEGER;
-      let canComeDiag = false;
-
-      if (wordPos <= maxWordMatchPos) {
-        score = _doScore(
-          pattern,
-          patternLow,
-          patternPos,
-          patternStart,
-          word,
-          wordLow,
-          wordPos,
-          wordLen,
-          wordStart,
-          _diag[row - 1][column - 1] === 0,
-          hasStrongFirstMatch
-        );
-      }
-
-      let diagScore = 0;
-      if (score !== Number.MAX_SAFE_INTEGER) {
-        canComeDiag = true;
-        diagScore = score + _table[row - 1][column - 1];
-      }
-
-      const canComeLeft = wordPos > minWordMatchPos;
-      const leftScore = canComeLeft
-        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
-
-      const canComeLeftLeft =
-        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
-      const leftLeftScore = canComeLeftLeft
-        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
-        : 0; // penalty for a gap start
-
-      if (
-        canComeLeftLeft &&
-        (!canComeLeft || leftLeftScore >= leftScore) &&
-        (!canComeDiag || leftLeftScore >= diagScore)
-      ) {
-        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
-        _table[row][column] = leftLeftScore;
-        _arrows[row][column] = Arrow.LeftLeft;
-        _diag[row][column] = 0;
-      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
-        // always prefer choosing left since that means a match is earlier in the word
-        _table[row][column] = leftScore;
-        _arrows[row][column] = Arrow.Left;
-        _diag[row][column] = 0;
-      } else if (canComeDiag) {
-        _table[row][column] = diagScore;
-        _arrows[row][column] = Arrow.Diag;
-        _diag[row][column] = _diag[row - 1][column - 1] + 1;
-      } else {
-        throw new Error(`not possible`);
-      }
-    }
-  }
-
-  if (_debug) {
-    printTables(pattern, patternStart, word, wordStart);
-  }
-
-  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
-    return undefined;
-  }
-
-  row--;
-  column--;
-
-  const result: FuzzyScore = [_table[row][column], wordStart];
-
-  let backwardsDiagLength = 0;
-  let maxMatchColumn = 0;
-
-  while (row >= 1) {
-    // Find the column where we go diagonally up
-    let diagColumn = column;
-    do {
-      const arrow = _arrows[row][diagColumn];
-      if (arrow === Arrow.LeftLeft) {
-        diagColumn -= 2;
-      } else if (arrow === Arrow.Left) {
-        diagColumn -= 1;
-      } else {
-        // found the diagonal
-        break;
-      }
-    } while (diagColumn >= 1);
-
-    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
-    if (
-      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
-      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
-      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
-      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
-    ) {
-      diagColumn = column;
-    }
-
-    if (diagColumn === column) {
-      // this is a contiguous match
-      backwardsDiagLength++;
-    } else {
-      backwardsDiagLength = 1;
-    }
-
-    if (!maxMatchColumn) {
-      // remember the last matched column
-      maxMatchColumn = diagColumn;
-    }
-
-    row--;
-    column = diagColumn - 1;
-    result.push(column);
-  }
-
-  if (wordLen === patternLen) {
-    // the word matches the pattern with all characters!
-    // giving the score a total match boost (to come up ahead other words)
-    result[0] += 2;
-  }
-
-  // Add 1 penalty for each skipped character in the word
-  const skippedCharsCount = maxMatchColumn - patternLen;
-  result[0] -= skippedCharsCount;
-
-  return result;
-}
-
-function _doScore(
-  pattern: string,
-  patternLow: string,
-  patternPos: number,
-  patternStart: number,
-  word: string,
-  wordLow: string,
-  wordPos: number,
-  wordLen: number,
-  wordStart: number,
-  newMatchStart: boolean,
-  outFirstMatchStrong: boolean[]
-): number {
-  if (patternLow[patternPos] !== wordLow[wordPos]) {
-    return Number.MIN_SAFE_INTEGER;
-  }
-
-  let score = 1;
-  let isGapLocation = false;
-  if (wordPos === patternPos - patternStart) {
-    // common prefix: `foobar <-> foobaz`
-    //                            ^^^^^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-  } else if (
-    isUpperCaseAtPos(wordPos, word, wordLow) &&
-    (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
-  ) {
-    // hitting upper-case: `foo <-> forOthers`
-    //                              ^^ ^
-    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
-    isGapLocation = true;
-  } else if (
-    isSeparatorAtPos(wordLow, wordPos) &&
-    (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
-  ) {
-    // hitting a separator: `. <-> foo.bar`
-    //                                ^
-    score = 5;
-  } else if (
-    isSeparatorAtPos(wordLow, wordPos - 1) ||
-    isWhitespaceAtPos(wordLow, wordPos - 1)
-  ) {
-    // post separator: `foo <-> bar_foo`
-    //                              ^^^
-    score = 5;
-    isGapLocation = true;
-  }
-
-  if (score > 1 && patternPos === patternStart) {
-    outFirstMatchStrong[0] = true;
-  }
-
-  if (!isGapLocation) {
-    isGapLocation =
-      isUpperCaseAtPos(wordPos, word, wordLow) ||
-      isSeparatorAtPos(wordLow, wordPos - 1) ||
-      isWhitespaceAtPos(wordLow, wordPos - 1);
-  }
-
-  //
-  if (patternPos === patternStart) {
-    // first character in pattern
-    if (wordPos > wordStart) {
-      // the first pattern character would match a word character that is not at the word start
-      // so introduce a penalty to account for the gap preceding this match
-      score -= isGapLocation ? 3 : 5;
-    }
-  } else if (newMatchStart) {
-    // this would be the beginning of a new match (i.e. there would be a gap before this location)
-    score += isGapLocation ? 2 : 0;
-  } else {
-    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
-    score += isGapLocation ? 0 : 1;
-  }
-
-  if (wordPos + 1 === wordLen) {
-    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
-    // so pretend there is a gap after the last character in the word to normalize things
-    score -= isGapLocation ? 3 : 5;
-  }
-
-  return score;
-}
-
-function printTable(
-  table: number[][],
-  pattern: string,
-  patternLen: number,
-  word: string,
-  wordLen: number
-): string {
-  function pad(s: string, n: number, _pad = " ") {
-    while (s.length < n) {
-      s = _pad + s;
-    }
-    return s;
-  }
-  let ret = ` |   |${word
-    .split("")
-    .map((c) => pad(c, 3))
-    .join("|")}\n`;
-
-  for (let i = 0; i <= patternLen; i++) {
-    if (i === 0) {
-      ret += " |";
-    } else {
-      ret += `${pattern[i - 1]}|`;
-    }
-    ret +=
-      table[i]
-        .slice(0, wordLen + 1)
-        .map((n) => pad(n.toString(), 3))
-        .join("|") + "\n";
-  }
-  return ret;
-}
-
-function printTables(
-  pattern: string,
-  patternStart: number,
-  word: string,
-  wordStart: number
-): void {
-  pattern = pattern.substr(patternStart);
-  word = word.substr(wordStart);
-  console.log(printTable(_table, pattern, pattern.length, word, word.length));
-  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
-  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
-}
-
-const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
-const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
-const _diag = initTable(); // the length of a contiguous diagonal match
-const _table = initTable();
-const _arrows = <Arrow[][]>initTable();
-
-function initArr(maxLen: number) {
-  const row: number[] = [];
-  for (let i = 0; i <= maxLen; i++) {
-    row[i] = 0;
-  }
-  return row;
-}
-
-function _fillInMaxWordMatchPos(
-  patternLen: number,
-  wordLen: number,
-  patternStart: number,
-  wordStart: number,
-  patternLow: string,
-  wordLow: string
-) {
-  let patternPos = patternLen - 1;
-  let wordPos = wordLen - 1;
-  while (patternPos >= patternStart && wordPos >= wordStart) {
-    if (patternLow[patternPos] === wordLow[wordPos]) {
-      _maxWordMatchPos[patternPos] = wordPos;
-      patternPos--;
-    }
-    wordPos--;
-  }
-}
-
-export interface FuzzyScorer {
-  (
-    pattern: string,
-    lowPattern: string,
-    patternPos: number,
-    word: string,
-    lowWord: string,
-    wordPos: number,
-    firstMatchCanBeWeak: boolean
-  ): FuzzyScore | undefined;
-}
-
-export function createMatches(score: undefined | FuzzyScore): Match[] {
-  if (typeof score === "undefined") {
-    return [];
-  }
-  const res: Match[] = [];
-  const wordPos = score[1];
-  for (let i = score.length - 1; i > 1; i--) {
-    const pos = score[i] + wordPos;
-    const last = res[res.length - 1];
-    if (last && last.end === pos) {
-      last.end = pos + 1;
-    } else {
-      res.push({ start: pos, end: pos + 1 });
-    }
-  }
-  return res;
-}
-
-/**
- * A fast function (therefore imprecise) to check if code points are emojis.
- * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
- */
-export function isEmojiImprecise(x: number): boolean {
-  return (
-    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
-    x === 8986 ||
-    x === 8987 ||
-    x === 9200 ||
-    x === 9203 ||
-    (x >= 9728 && x <= 10175) ||
-    x === 11088 ||
-    x === 11093 ||
-    (x >= 127744 && x <= 128591) ||
-    (x >= 128640 && x <= 128764) ||
-    (x >= 128992 && x <= 129003) ||
-    (x >= 129280 && x <= 129535) ||
-    (x >= 129648 && x <= 129750)
-  );
-}

src/common/string/filter/sequence-matching.ts

@@ -1,52 +1,4 @@
-import { fuzzyScore } from "./filter";
-
-/**
- * Determine whether a sequence of letters exists in another string,
- *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
- *
- * @param {string} filter - Sequence of letters to check for
- * @param {ScorableTextItem} item - Item against whose strings will be checked
- *
- * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
- */
-
-export const fuzzySequentialMatch = (
-  filter: string,
-  item: ScorableTextItem
-) => {
-  let topScore = Number.NEGATIVE_INFINITY;
-
-  for (const word of item.strings) {
-    const scores = fuzzyScore(
-      filter,
-      filter.toLowerCase(),
-      0,
-      word,
-      word.toLowerCase(),
-      0,
-      true
-    );
-
-    if (!scores) {
-      continue;
-    }
-
-    // The VS Code implementation of filter returns a 0 for a weak match.
-    // But if .filter() sees a "0", it considers that a failed match and will remove it.
-    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
-    const score = scores[0] === 0 ? 1 : scores[0];
-
-    if (score > topScore) {
-      topScore = score;
-    }
-  }
-
-  if (topScore === Number.NEGATIVE_INFINITY) {
-    return undefined;
-  }
-
-  return topScore;
-};
+import fuzzysort from "fuzzysort";
 
 /**
  * An interface that objects must extend in order to use the fuzzy sequence matcher
@@ -66,18 +18,48 @@ export interface ScorableTextItem {
   strings: string[];
 }
 
-type FuzzyFilterSort = <T extends ScorableTextItem>(
+export type FuzzyFilterSort = <T extends ScorableTextItem>(
   filter: string,
   items: T[]
 ) => T[];
 
-export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
-  items
+export function fuzzyMatcher(search: string | null): (string) => boolean {
+  const scorer = fuzzyScorer(search);
+  return (value: string) => scorer([value]) !== Number.NEGATIVE_INFINITY;
+}
+
+export function fuzzyScorer(
+  search: string | null
+): (values: string[]) => number {
+  const searchTerms = (search || "").match(/("[^"]+"|[^"\s]+)/g);
+  if (!searchTerms) {
+    return () => 0;
+  }
+  return (values) =>
+    searchTerms
+      .map((term) => {
+        const resultsForTerm = fuzzysort.go(term, values, {
+          allowTypo: true,
+        });
+        if (resultsForTerm.length > 0) {
+          return Math.max(...resultsForTerm.map((result) => result.score));
+        }
+        return Number.NEGATIVE_INFINITY;
+      })
+      .reduce((partial, current) => partial + current, 0);
+}
+
+export const fuzzySortFilterSort: FuzzyFilterSort = (filter, items) => {
+  const scorer = fuzzyScorer(filter);
+  return items
     .map((item) => {
-      item.score = fuzzySequentialMatch(filter, item);
+      item.score = scorer(item.strings);
       return item;
     })
-    .filter((item) => item.score !== undefined)
+    .filter((item) => item.score !== undefined && item.score > -100000)
     .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
       scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
     );
+};
+
+export const defaultFuzzyFilterSort = fuzzySortFilterSort;

src/components/data-table/ha-data-table.ts

@@ -269,8 +269,8 @@ export class HaDataTable extends LitElement {
                       @change=${this._handleHeaderRowCheckboxClick}
                       .indeterminate=${this._checkedRows.length &&
                       this._checkedRows.length !== this._checkableRowsCount}
-                      .checked=${this._checkedRows.length &&
-                      this._checkedRows.length === this._checkableRowsCount}
+                      .checked=${this._checkedRows.length ===
+                      this._checkableRowsCount}
                     >
                     </ha-checkbox>
                   </div>

src/components/data-table/sort_filter_worker.ts

@@ -7,25 +7,26 @@ import type {
   SortableColumnContainer,
   SortingDirection,
 } from "./ha-data-table";
+import { fuzzyMatcher } from "../../common/string/filter/sequence-matching";
 
 const filterData = (
   data: DataTableRowData[],
   columns: SortableColumnContainer,
   filter: string
 ) => {
-  filter = filter.toUpperCase();
+  const matcher = fuzzyMatcher(filter);
   return data.filter((row) =>
     Object.entries(columns).some((columnEntry) => {
       const [key, column] = columnEntry;
       if (column.filterable) {
         if (
-          String(
-            column.filterKey
-              ? row[column.valueColumn || key][column.filterKey]
-              : row[column.valueColumn || key]
+          matcher(
+            String(
+              column.filterKey
+                ? row[column.valueColumn || key][column.filterKey]
+                : row[column.valueColumn || key]
+            )
           )
-            .toUpperCase()
-            .includes(filter)
         ) {
           return true;
         }

src/components/entity/ha-entity-picker.ts

@@ -15,6 +15,7 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
+import { defaultFuzzyFilterSort } from "../../common/string/filter/sequence-matching";
 
 interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
@@ -336,11 +337,18 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value.toLowerCase();
-    (this.comboBox as any).filteredItems = this._states.filter(
-      (entityState) =>
-        entityState.entity_id.toLowerCase().includes(filterString) ||
-        computeStateName(entityState).toLowerCase().includes(filterString)
+    const filterString = ev.detail.value;
+
+    const sortableEntityStates = this._states.map((entityState) => ({
+      strings: [entityState.entity_id, computeStateName(entityState)],
+      entityState: entityState,
+    }));
+    const sortedEntityStates = defaultFuzzyFilterSort(
+      filterString,
+      sortableEntityStates
+    );
+    (this.comboBox as any).filteredItems = sortedEntityStates.map(
+      (sortableItem) => sortableItem.entityState
     );
   }
 

src/components/ha-clickable-list-item.ts

@@ -47,6 +47,10 @@ export class HaClickableListItem extends ListItemBase {
           padding-left: 0px;
           padding-right: 0px;
         }
+        :host([rtl]) span {
+          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
+          margin-right: 0px !important;
+        }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {
           height: 48px;
@@ -60,16 +64,6 @@ export class HaClickableListItem extends ListItemBase {
           padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
-        :host-context([style*="direction: rtl;"])
-          span.material-icons:first-of-type {
-          margin-left: var(--mdc-list-item-graphic-margin, 16px) !important;
-          margin-right: 0px !important;
-        }
-        :host-context([style*="direction: rtl;"])
-          span.material-icons:last-of-type {
-          margin-left: 0px !important;
-          margin-right: auto !important;
-        }
       `,
     ];
   }

src/components/media-player/ha-media-player-browse.ts

@@ -1,11 +1,10 @@
-import "@lit-labs/virtualizer";
-import type { LitVirtualizer } from "@lit-labs/virtualizer";
-import { grid } from "@lit-labs/virtualizer/layouts/grid";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
+import { grid } from "@lit-labs/virtualizer/layouts/grid";
+import "@lit-labs/virtualizer";
 import {
   css,
   CSSResultGroup,
@@ -22,12 +21,10 @@ import {
   state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { styleMap } from "lit/directives/style-map";
 import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
-import { getSignedPath } from "../../data/auth";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
   browseMediaPlayer,
@@ -42,7 +39,6 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
@@ -53,6 +49,8 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./ha-browse-media-tts";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
+import { getSignedPath } from "../../data/auth";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 
 declare global {
   interface HASSDomEvents {
@@ -102,10 +100,6 @@ export class HaMediaPlayerBrowse extends LitElement {
 
   @query(".content") private _content?: HTMLDivElement;
 
-  @query("lit-virtualizer") private _virtualizer?: LitVirtualizer;
-
-  private _observed = false;
-
   private _headerOffsetHeight = 0;
 
   private _resizeObserver?: ResizeObserver;
@@ -286,19 +280,6 @@ export class HaMediaPlayerBrowse extends LitElement {
       this._animateHeaderHeight();
     } else if (changedProps.has("_currentItem")) {
       this._setHeaderHeight();
-
-      // This fixes a race condition for resizing of the cards using the grid layout
-      if (this._observed) {
-        return;
-      }
-
-      // @ts-ignore
-      const virtualizer = this._virtualizer?._virtualizer;
-
-      if (virtualizer) {
-        this._observed = true;
-        setTimeout(() => virtualizer._observeMutations(), 0);
-      }
     }
   }
 
@@ -496,9 +477,6 @@ export class HaMediaPlayerBrowse extends LitElement {
                       <lit-virtualizer
                         scroller
                         .items=${children}
-                        style=${styleMap({
-                          height: `${children.length * 72 + 26}px`,
-                        })}
                         .renderItem=${this._renderListItem}
                       ></lit-virtualizer>
                       ${currentItem.not_shown
@@ -628,6 +606,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         </div>
         <span class="title">${child.title}</span>
       </mwc-list-item>
+      <li divider role="separator"></li>
     `;
   };
 

src/data/application_credential.ts

@@ -1,44 +0,0 @@
-import { HomeAssistant } from "../types";
-
-export interface ApplicationCredentialsConfig {
-  domains: string[];
-}
-
-export interface ApplicationCredential {
-  id: string;
-  domain: string;
-  client_id: string;
-  client_secret: string;
-}
-
-export const fetchApplicationCredentialsConfig = async (hass: HomeAssistant) =>
-  hass.callWS<ApplicationCredentialsConfig>({
-    type: "application_credentials/config",
-  });
-
-export const fetchApplicationCredentials = async (hass: HomeAssistant) =>
-  hass.callWS<ApplicationCredential[]>({
-    type: "application_credentials/list",
-  });
-
-export const createApplicationCredential = async (
-  hass: HomeAssistant,
-  domain: string,
-  clientId: string,
-  clientSecret: string
-) =>
-  hass.callWS<ApplicationCredential>({
-    type: "application_credentials/create",
-    domain,
-    client_id: clientId,
-    client_secret: clientSecret,
-  });
-
-export const deleteApplicationCredential = async (
-  hass: HomeAssistant,
-  applicationCredentialsId: string
-) =>
-  hass.callWS<void>({
-    type: "application_credentials/delete",
-    application_credentials_id: applicationCredentialsId,
-  });

src/data/update.ts

@@ -2,10 +2,8 @@ import type {
   HassEntities,
   HassEntityAttributeBase,
   HassEntityBase,
-  HassEvent,
 } from "home-assistant-js-websocket";
 import { BINARY_STATE_ON } from "../common/const";
-import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
@@ -112,32 +110,15 @@ export const checkForEntityUpdates = async (
     return;
   }
 
-  let updated = 0;
-
-  const unsubscribeEvents = await hass.connection.subscribeEvents<HassEvent>(
-    (event) => {
-      if (computeDomain(event.data.entity_id) === "update") {
-        updated++;
-        showToast(element, {
-          message: hass.localize("ui.panel.config.updates.updates_refreshed", {
-            count: updated,
-          }),
-        });
-      }
-    },
-    "state_changed"
-  );
-
   await hass.callService("homeassistant", "update_entity", {
     entity_id: entities,
   });
 
-  // there is no reliable way to know if all the updates are done updating, so we just wait a bit for now...
-  await new Promise((r) => setTimeout(r, 10000));
-
-  unsubscribeEvents();
-
-  if (updated === 0) {
+  if (filterUpdateEntitiesWithInstall(hass.states).length) {
+    showToast(element, {
+      message: hass.localize("ui.panel.config.updates.updates_refreshed"),
+    });
+  } else {
     showToast(element, {
       message: hass.localize("ui.panel.config.updates.no_new_updates"),
     });

src/dialogs/generic/dialog-box.ts

@@ -1,13 +1,12 @@
 import "@material/mwc-button/mwc-button";
 import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
 import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
-import { HaTextField } from "../../components/ha-textfield";
+import "../../components/ha-textfield";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogBoxParams } from "./show-dialog-box";
@@ -18,10 +17,13 @@ class DialogBox extends LitElement {
 
   @state() private _params?: DialogBoxParams;
 
-  @query("ha-textfield") private _textField?: HaTextField;
+  @state() private _value?: string;
 
   public async showDialog(params: DialogBoxParams): Promise<void> {
     this._params = params;
+    if (params.prompt) {
+      this._value = params.defaultValue;
+    }
   }
 
   public closeDialog(): boolean {
@@ -73,7 +75,9 @@ class DialogBox extends LitElement {
             ? html`
                 <ha-textfield
                   dialogInitialFocus
-                  value=${ifDefined(this._params.defaultValue)}
+                  .value=${this._value || ""}
+                  @keyup=${this._handleKeyUp}
+                  @input=${this._valueChanged}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -105,6 +109,10 @@ class DialogBox extends LitElement {
     `;
   }
 
+  private _valueChanged(ev) {
+    this._value = ev.target.value;
+  }
+
   private _dismiss(): void {
     if (this._params?.cancel) {
       this._params.cancel();
@@ -112,9 +120,15 @@ class DialogBox extends LitElement {
     this._close();
   }
 
+  private _handleKeyUp(ev: KeyboardEvent) {
+    if (ev.keyCode === 13) {
+      this._confirm();
+    }
+  }
+
   private _confirm(): void {
     if (this._params!.confirm) {
-      this._params!.confirm(this._textField?.value);
+      this._params!.confirm(this._value);
     }
     this._close();
   }

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -25,7 +25,7 @@ import { domainIcon } from "../../common/entity/domain_icon";
 import { navigate } from "../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import {
-  fuzzyFilterSort,
+  defaultFuzzyFilterSort,
   ScorableTextItem,
 } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
@@ -725,7 +725,7 @@ export class QuickBar extends LitElement {
 
   private _filterItems = memoizeOne(
     (items: QuickBarItem[], filter: string): QuickBarItem[] =>
-      fuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
+      defaultFuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
   );
 
   static get styles() {

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -1,224 +0,0 @@
-import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
-import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/ha-circular-progress";
-import "../../../components/ha-combo-box";
-import { createCloseHeading } from "../../../components/ha-dialog";
-import "../../../components/ha-textfield";
-import {
-  fetchApplicationCredentialsConfig,
-  createApplicationCredential,
-  ApplicationCredential,
-} from "../../../data/application_credential";
-import { domainToName } from "../../../data/integration";
-import { PolymerChangedEvent } from "../../../polymer-types";
-import { haStyleDialog } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
-import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
-
-interface Domain {
-  id: string;
-  name: string;
-}
-
-const rowRenderer: ComboBoxLitRenderer<Domain> = (item) => html`<mwc-list-item>
-  <span>${item.name}</span>
-</mwc-list-item>`;
-
-@customElement("dialog-add-application-credential")
-export class DialogAddApplicationCredential extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _loading = false;
-
-  // Error message when can't talk to server etc
-  @state() private _error?: string;
-
-  @state() private _params?: AddApplicationCredentialDialogParams;
-
-  @state() private _domain?: string;
-
-  @state() private _clientId?: string;
-
-  @state() private _clientSecret?: string;
-
-  @state() private _domains?: Domain[];
-
-  public showDialog(params: AddApplicationCredentialDialogParams) {
-    this._params = params;
-    this._domain = "";
-    this._clientId = "";
-    this._clientSecret = "";
-    this._error = undefined;
-    this._loading = false;
-    this._fetchConfig();
-  }
-
-  private async _fetchConfig() {
-    const config = await fetchApplicationCredentialsConfig(this.hass);
-    this._domains = config.domains.map((domain) => ({
-      id: domain,
-      name: domainToName(this.hass.localize, domain),
-    }));
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params || !this._domains) {
-      return html``;
-    }
-    return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize(
-            "ui.panel.config.application_credentials.editor.caption"
-          )
-        )}
-      >
-        <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
-          <ha-combo-box
-            name="domain"
-            .hass=${this.hass}
-            .label=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.domain"
-            )}
-            .value=${this._domain}
-            .renderer=${rowRenderer}
-            .items=${this._domains}
-            item-id-path="id"
-            item-value-path="id"
-            item-label-path="name"
-            required
-            @value-changed=${this._handleDomainPicked}
-          ></ha-combo-box>
-          <ha-textfield
-            class="clientId"
-            name="clientId"
-            .label=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.client_id"
-            )}
-            .value=${this._clientId}
-            required
-            @input=${this._handleValueChanged}
-            error-message=${this.hass.localize("ui.common.error_required")}
-            dialogInitialFocus
-          ></ha-textfield>
-          <ha-textfield
-            .label=${this.hass.localize(
-              "ui.panel.config.application_credentials.editor.client_secret"
-            )}
-            type="password"
-            name="clientSecret"
-            .value=${this._clientSecret}
-            required
-            @input=${this._handleValueChanged}
-            error-message=${this.hass.localize("ui.common.error_required")}
-          ></ha-textfield>
-        </div>
-        ${this._loading
-          ? html`
-              <div slot="primaryAction" class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
-              </div>
-            `
-          : html`
-              <mwc-button
-                slot="primaryAction"
-                .disabled=${!this._domain ||
-                !this._clientId ||
-                !this._clientSecret}
-                @click=${this._createApplicationCredential}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.application_credentials.editor.create"
-                )}
-              </mwc-button>
-            `}
-      </ha-dialog>
-    `;
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    this._domains = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  private async _handleDomainPicked(ev: PolymerChangedEvent<string>) {
-    const target = ev.target as any;
-    if (target.selectedItem) {
-      this._domain = target.selectedItem.id;
-    }
-  }
-
-  private _handleValueChanged(ev: CustomEvent) {
-    this._error = undefined;
-    const name = (ev.target as any).name;
-    const value = (ev.target as any).value;
-    this[`_${name}`] = value;
-  }
-
-  private async _createApplicationCredential(ev) {
-    ev.preventDefault();
-    if (!this._domain || !this._clientId || !this._clientSecret) {
-      return;
-    }
-
-    this._loading = true;
-    this._error = "";
-
-    let applicationCredential: ApplicationCredential;
-    try {
-      applicationCredential = await createApplicationCredential(
-        this.hass,
-        this._domain,
-        this._clientId,
-        this._clientSecret
-      );
-    } catch (err: any) {
-      this._loading = false;
-      this._error = err.message;
-      return;
-    }
-    this._params!.applicationCredentialAddedCallback(applicationCredential);
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --mdc-dialog-max-width: 500px;
-          --dialog-z-index: 10;
-        }
-        .row {
-          display: flex;
-          padding: 8px 0;
-        }
-        ha-combo-box {
-          display: block;
-          margin-bottom: 24px;
-        }
-        ha-textfield {
-          display: block;
-          margin-bottom: 24px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-add-application-credential": DialogAddApplicationCredential;
-  }
-}

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -1,259 +0,0 @@
-import { mdiDelete, mdiPlus } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import memoizeOne from "memoize-one";
-import type { HASSDomEvent } from "../../../common/dom/fire_event";
-import { LocalizeFunc } from "../../../common/translations/localize";
-import {
-  DataTableColumnContainer,
-  SelectionChangedEvent,
-} from "../../../components/data-table/ha-data-table";
-import "../../../components/data-table/ha-data-table-icon";
-import "../../../components/ha-fab";
-import "../../../components/ha-help-tooltip";
-import "../../../components/ha-svg-icon";
-import {
-  ApplicationCredential,
-  deleteApplicationCredential,
-  fetchApplicationCredentials,
-} from "../../../data/application_credential";
-import { domainToName } from "../../../data/integration";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
-import "../../../layouts/hass-tabs-subpage-data-table";
-import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
-import { HomeAssistant, Route } from "../../../types";
-import { configSections } from "../ha-panel-config";
-import { showAddApplicationCredentialDialog } from "./show-dialog-add-application-credential";
-
-@customElement("ha-config-application-credentials")
-export class HaConfigApplicationCredentials extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() public _applicationCredentials: ApplicationCredential[] = [];
-
-  @property() public isWide!: boolean;
-
-  @property() public narrow!: boolean;
-
-  @property() public route!: Route;
-
-  @state() private _selected: string[] = [];
-
-  @query("hass-tabs-subpage-data-table", true)
-  private _dataTable!: HaTabsSubpageDataTable;
-
-  private _columns = memoizeOne(
-    (narrow: boolean, localize: LocalizeFunc): DataTableColumnContainer => {
-      const columns: DataTableColumnContainer<ApplicationCredential> = {
-        clientId: {
-          title: localize(
-            "ui.panel.config.application_credentials.picker.headers.client_id"
-          ),
-          width: "25%",
-          direction: "asc",
-          grows: true,
-          template: (_, entry: ApplicationCredential) =>
-            html`${entry.client_id}`,
-        },
-        application: {
-          title: localize(
-            "ui.panel.config.application_credentials.picker.headers.application"
-          ),
-          sortable: true,
-          width: "20%",
-          direction: "asc",
-          hidden: narrow,
-          template: (_, entry) => html`${domainToName(localize, entry.domain)}`,
-        },
-      };
-
-      return columns;
-    }
-  );
-
-  protected firstUpdated(changedProperties: PropertyValues) {
-    super.firstUpdated(changedProperties);
-    this._loadTranslations();
-    this._fetchApplicationCredentials();
-  }
-
-  protected render() {
-    return html`
-      <hass-tabs-subpage-data-table
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        backPath="/config"
-        .tabs=${configSections.devices}
-        .columns=${this._columns(this.narrow, this.hass.localize)}
-        .data=${this._applicationCredentials}
-        hasFab
-        selectable
-        @selection-changed=${this._handleSelectionChanged}
-      >
-        ${this._selected.length
-          ? html`
-              <div
-                class=${classMap({
-                  "header-toolbar": this.narrow,
-                  "table-header": !this.narrow,
-                })}
-                slot="header"
-              >
-                <p class="selected-txt">
-                  ${this.hass.localize(
-                    "ui.panel.config.application_credentials.picker.selected",
-                    "number",
-                    this._selected.length
-                  )}
-                </p>
-                <div class="header-btns">
-                  ${!this.narrow
-                    ? html`
-                        <mwc-button
-                          @click=${this._removeSelected}
-                          class="warning"
-                          >${this.hass.localize(
-                            "ui.panel.config.application_credentials.picker.remove_selected.button"
-                          )}</mwc-button
-                        >
-                      `
-                    : html`
-                        <ha-icon-button
-                          class="warning"
-                          id="remove-btn"
-                          @click=${this._removeSelected}
-                          .path=${mdiDelete}
-                          .label=${this.hass.localize("ui.common.remove")}
-                        ></ha-icon-button>
-                        <ha-help-tooltip
-                          .label=${this.hass.localize(
-                            "ui.panel.config.application_credentials.picker.remove_selected.button"
-                          )}
-                        >
-                        </ha-help-tooltip>
-                      `}
-                </div>
-              </div>
-            `
-          : html``}
-        <ha-fab
-          slot="fab"
-          .label=${this.hass.localize(
-            "ui.panel.config.application_credentials.picker.add_application_credential"
-          )}
-          extended
-          @click=${this._addApplicationCredential}
-        >
-          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </ha-fab>
-      </hass-tabs-subpage-data-table>
-    `;
-  }
-
-  private _handleSelectionChanged(
-    ev: HASSDomEvent<SelectionChangedEvent>
-  ): void {
-    this._selected = ev.detail.value;
-  }
-
-  private _removeSelected() {
-    showConfirmationDialog(this, {
-      title: this.hass.localize(
-        `ui.panel.config.application_credentials.picker.remove_selected.confirm_title`,
-        "number",
-        this._selected.length
-      ),
-      text: this.hass.localize(
-        "ui.panel.config.application_credentials.picker.remove_selected.confirm_text"
-      ),
-      confirmText: this.hass.localize("ui.common.remove"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      confirm: async () => {
-        await Promise.all(
-          this._selected.map(async (applicationCredential) => {
-            await deleteApplicationCredential(this.hass, applicationCredential);
-          })
-        );
-        this._dataTable.clearSelection();
-        this._fetchApplicationCredentials();
-      },
-    });
-  }
-
-  private async _loadTranslations() {
-    await this.hass.loadBackendTranslation("title", undefined, true);
-  }
-
-  private async _fetchApplicationCredentials() {
-    this._applicationCredentials = await fetchApplicationCredentials(this.hass);
-  }
-
-  private _addApplicationCredential() {
-    showAddApplicationCredentialDialog(this, {
-      applicationCredentialAddedCallback: async (
-        applicationCredential: ApplicationCredential
-      ) => {
-        if (applicationCredential) {
-          this._applicationCredentials = [
-            ...this._applicationCredentials,
-            applicationCredential,
-          ];
-        }
-      },
-    });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      .table-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        height: 56px;
-        background-color: var(--mdc-text-field-fill-color, whitesmoke);
-        border-bottom: 1px solid
-          var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
-        box-sizing: border-box;
-      }
-      .header-toolbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        color: var(--secondary-text-color);
-        position: relative;
-        top: -4px;
-      }
-      .selected-txt {
-        font-weight: bold;
-        padding-left: 16px;
-      }
-      .table-header .selected-txt {
-        margin-top: 20px;
-      }
-      .header-toolbar .selected-txt {
-        font-size: 16px;
-      }
-      .header-toolbar .header-btns {
-        margin-right: -12px;
-      }
-      .header-btns {
-        display: flex;
-      }
-      .header-btns > mwc-button,
-      .header-btns > ha-icon-button {
-        margin: 8px;
-      }
-      ha-button-menu {
-        margin-left: 8px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-application-credentials": HaConfigApplicationCredentials;
-  }
-}

src/panels/config/application_credentials/show-dialog-add-application-credential.ts

@@ -1,22 +0,0 @@
-import { fireEvent } from "../../../common/dom/fire_event";
-import { ApplicationCredential } from "../../../data/application_credential";
-
-export interface AddApplicationCredentialDialogParams {
-  applicationCredentialAddedCallback: (
-    applicationCredential: ApplicationCredential
-  ) => void;
-}
-
-export const loadAddApplicationCredentialDialog = () =>
-  import("./dialog-add-application-credential");
-
-export const showAddApplicationCredentialDialog = (
-  element: HTMLElement,
-  dialogParams: AddApplicationCredentialDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-add-application-credential",
-    dialogImport: loadAddApplicationCredentialDialog,
-    dialogParams,
-  });
-};

src/panels/config/automation/action/ha-automation-action.ts

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -84,7 +83,7 @@ export default class HaAutomationAction extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.actions.concat(deepClone(this.actions[index])),
+      value: this.actions.concat(this.actions[index]),
     });
   }
 

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -97,7 +96,7 @@ export default class HaAutomationCondition extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.conditions.concat(deepClone(this.conditions[index])),
+      value: this.conditions.concat(this.conditions[index]),
     });
   }
 

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -1,4 +1,3 @@
-import deepClone from "deep-clone-simple";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -68,7 +67,7 @@ export default class HaAutomationTrigger extends LitElement {
     ev.stopPropagation();
     const index = (ev.target as any).index;
     fireEvent(this, "value-changed", {
-      value: this.triggers.concat(deepClone(this.triggers[index])),
+      value: this.triggers.concat(this.triggers[index]),
     });
   }
 

src/panels/config/core/ha-config-section-updates.ts

@@ -109,11 +109,7 @@ class HaConfigSectionUpdates extends LitElement {
                     ></ha-config-updates>
                   `
                 : html`
-                    <div class="no-updates">
-                      ${this.hass.localize(
-                        "ui.panel.config.updates.no_updates"
-                      )}
-                    </div>
+                    ${this.hass.localize("ui.panel.config.updates.no_updates")}
                   `}
             </div>
           </ha-card>
@@ -202,10 +198,6 @@ class HaConfigSectionUpdates extends LitElement {
       flex-direction: column;
       padding: 0;
     }
-
-    .no-updates {
-      padding: 16px;
-    }
   `;
 }
 

src/panels/config/core/ha-config-system-navigation.ts

@@ -218,13 +218,14 @@ class HaConfigSystemNavigation extends LitElement {
 
   private async _fetchNetworkStatus() {
     if (isComponentLoaded(this.hass, "cloud")) {
-      const cloudStatus = await fetchCloudStatus(this.hass);
-      if (cloudStatus.logged_in) {
-        this._externalAccess = true;
-        return;
-      }
+      fetchCloudStatus(this.hass).then((cloudStatus) => {
+        if (cloudStatus.logged_in) {
+          this._externalAccess = true;
+        }
+      });
+    } else {
+      this._externalAccess = this.hass.config.external_url !== null;
     }
-    this._externalAccess = this.hass.config.external_url !== null;
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/dashboard/ha-config-updates.ts

@@ -9,7 +9,6 @@ import "../../../components/ha-alert";
 import "../../../components/ha-icon-next";
 import type { UpdateEntity } from "../../../data/update";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-circular-progress";
 
 @customElement("ha-config-updates")
 class HaConfigUpdates extends LitElement {
@@ -52,18 +51,7 @@ class HaConfigUpdates extends LitElement {
                 .title=${entity.attributes.title ||
                 entity.attributes.friendly_name}
                 .stateObj=${entity}
-                class=${this.narrow && entity.attributes.in_progress
-                  ? "updating"
-                  : ""}
               ></state-badge>
-              ${this.narrow && entity.attributes.in_progress
-                ? html`<ha-circular-progress
-                    active
-                    size="small"
-                    slot="graphic"
-                    class="absolute"
-                  ></ha-circular-progress>`
-                : ""}
               <span
                 >${entity.attributes.title ||
                 entity.attributes.friendly_name}</span
@@ -79,13 +67,7 @@ class HaConfigUpdates extends LitElement {
                   : ""}
               </span>
               ${!this.narrow
-                ? entity.attributes.in_progress
-                  ? html`<ha-circular-progress
-                      active
-                      size="small"
-                      slot="meta"
-                    ></ha-circular-progress>`
-                  : html`<ha-icon-next slot="meta"></ha-icon-next>`
+                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
                 : ""}
             </mwc-list-item>
           `
@@ -139,12 +121,6 @@ class HaConfigUpdates extends LitElement {
           cursor: pointer;
           font-size: 16px;
         }
-        ha-circular-progress.absolute {
-          position: absolute;
-        }
-        state-badge.updating {
-          opacity: 0.5;
-        }
       `,
     ];
   }

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -16,9 +16,9 @@ import {
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-button-menu";
-import "../../../components/ha-check-list-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-check-list-item";
 import { AreaRegistryEntry } from "../../../data/area_registry";
 import { ConfigEntry } from "../../../data/config_entries";
 import {
@@ -36,7 +36,6 @@ import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
-import "../integrations/ha-integration-overflow-menu";
 import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
 
 interface DeviceRowData extends DeviceRegistryEntry {
@@ -409,10 +408,6 @@ export class HaConfigDeviceDashboard extends LitElement {
         (filteredConfigEntry.domain === "zha" ||
           filteredConfigEntry.domain === "zwave_js")}
       >
-        <ha-integration-overflow-menu
-          .hass=${this.hass}
-          slot="toolbar-icon"
-        ></ha-integration-overflow-menu>
         ${!filteredConfigEntry
           ? ""
           : filteredConfigEntry.domain === "zwave_js"

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

@@ -61,7 +61,6 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
-import "../integrations/ha-integration-overflow-menu";
 import { DialogEntityEditor } from "./dialog-entity-editor";
 import {
   loadEntityEditorDialog,
@@ -527,10 +526,6 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         id="entity_id"
         .hasFab=${includeZHAFab}
       >
-        <ha-integration-overflow-menu
-          .hass=${this.hass}
-          slot="toolbar-icon"
-        ></ha-integration-overflow-menu>
         ${this._selectedEntities.length
           ? html`
               <div

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

@@ -479,11 +479,6 @@ class HaPanelConfig extends HassRouterPage {
             "./integrations/integration-panels/zwave_js/zwave_js-config-router"
           ),
       },
-      application_credentials: {
-        tag: "ha-config-application-credentials",
-        load: () =>
-          import("./application_credentials/ha-config-application-credentials"),
-      },
     },
   };
 

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

@@ -35,7 +35,6 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { HomeAssistant, Route } from "../../../types";
 import { showEntityEditorDialog } from "../entities/show-dialog-entity-editor";
 import { configSections } from "../ha-panel-config";
-import "../integrations/ha-integration-overflow-menu";
 import { HELPER_DOMAINS } from "./const";
 import { showHelperDetailDialog } from "./show-dialog-helper-detail";
 
@@ -211,10 +210,6 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
           "ui.panel.config.helpers.picker.no_helpers"
         )}
       >
-        <ha-integration-overflow-menu
-          .hass=${this.hass}
-          slot="toolbar-icon"
-        ></ha-integration-overflow-menu>
         <ha-fab
           slot="fab"
           .label=${this.hass.localize(

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

@@ -13,20 +13,21 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
+import "../../../components/search-input";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button-menu";
-import "../../../components/ha-check-list-item";
 import "../../../components/ha-checkbox";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
-import "../../../components/search-input";
+import "../../../components/ha-check-list-item";
+
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
 import {
   getConfigFlowHandlers,
@@ -39,7 +40,6 @@ import {
   DeviceRegistryEntry,
   subscribeDeviceRegistry,
 } from "../../../data/device_registry";
-import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
 import {
   EntityRegistryEntry,
   subscribeEntityRegistry,
@@ -62,12 +62,12 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
-import { HELPER_DOMAINS } from "../helpers/const";
 import "./ha-config-flow-card";
 import "./ha-ignored-config-entry-card";
 import "./ha-integration-card";
 import type { HaIntegrationCard } from "./ha-integration-card";
-import "./ha-integration-overflow-menu";
+import { fetchDiagnosticHandlers } from "../../../data/diagnostics";
+import { HELPER_DOMAINS } from "../helpers/const";
 
 export interface ConfigEntryUpdatedEvent {
   entry: ConfigEntry;
@@ -302,46 +302,36 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       this._filter
     );
 
-    const filterMenu = html`
-      <div slot=${ifDefined(this.narrow ? "toolbar-icon" : "suffix")}>
-        <div class="menu-badge-container">
-          ${!this._showDisabled && this.narrow && disabledCount
-            ? html`<span class="badge">${disabledCount}</span>`
-            : ""}
-          <ha-button-menu
-            corner="BOTTOM_START"
-            multi
-            @action=${this._handleMenuAction}
-            @click=${this._preventDefault}
-          >
-            <ha-icon-button
-              slot="trigger"
-              .label=${this.hass.localize("ui.common.menu")}
-              .path=${mdiFilterVariant}
-            >
-            </ha-icon-button>
-            <ha-check-list-item left .selected=${this._showIgnored}>
-              ${this.hass.localize(
-                "ui.panel.config.integrations.ignore.show_ignored"
-              )}
-            </ha-check-list-item>
-            <ha-check-list-item left .selected=${this._showDisabled}>
-              ${this.hass.localize(
-                "ui.panel.config.integrations.disable.show_disabled"
-              )}
-            </ha-check-list-item>
-          </ha-button-menu>
-        </div>
-        ${this.narrow
-          ? html`
-              <ha-integration-overflow-menu
-                .hass=${this.hass}
-                slot="toolbar-icon"
-              ></ha-integration-overflow-menu>
-            `
-          : ""}
-      </div>
-    `;
+    const filterMenu = html`<div
+      slot=${ifDefined(this.narrow ? "toolbar-icon" : "suffix")}
+    >
+      ${!this._showDisabled && this.narrow && disabledCount
+        ? html`<span class="badge">${disabledCount}</span>`
+        : ""}
+      <ha-button-menu
+        corner="BOTTOM_START"
+        multi
+        @action=${this._handleMenuAction}
+        @click=${this._preventDefault}
+      >
+        <ha-icon-button
+          slot="trigger"
+          .label=${this.hass.localize("ui.common.menu")}
+          .path=${mdiFilterVariant}
+        >
+        </ha-icon-button>
+        <ha-check-list-item left .selected=${this._showIgnored}>
+          ${this.hass.localize(
+            "ui.panel.config.integrations.ignore.show_ignored"
+          )}
+        </ha-check-list-item>
+        <ha-check-list-item left .selected=${this._showDisabled}>
+          ${this.hass.localize(
+            "ui.panel.config.integrations.disable.show_disabled"
+          )}
+        </ha-check-list-item>
+      </ha-button-menu>
+    </div>`;
 
     return html`
       <hass-tabs-subpage
@@ -367,10 +357,6 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
               ${filterMenu}
             `
           : html`
-              <ha-integration-overflow-menu
-                .hass=${this.hass}
-                slot="toolbar-icon"
-              ></ha-integration-overflow-menu>
               <div class="search">
                 <search-input
                   .hass=${this.hass}
@@ -811,13 +797,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
           padding: 0px 4px;
           color: var(--text-primary-color);
           position: absolute;
-          right: 0px;
-          top: 4px;
+          right: 14px;
+          top: 8px;
           font-size: 0.65em;
         }
-        .menu-badge-container {
-          position: relative;
-        }
         ha-button-menu {
           color: var(--primary-text-color);
         }

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

@@ -52,6 +52,7 @@ import type { ConfigEntryExtended } from "./ha-config-integrations";
 import "./ha-integration-header";
 
 const integrationsWithPanel = {
+  hassio: "/hassio/dashboard",
   mqtt: "/config/mqtt",
   zha: "/config/zha/dashboard",
   zwave_js: "/config/zwave_js/dashboard",

src/panels/config/integrations/ha-integration-overflow-menu.ts

@@ -1,45 +0,0 @@
-import { mdiDotsVertical } from "@mdi/js";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../components/ha-button-menu";
-import "../../../components/ha-clickable-list-item";
-import "../../../components/ha-icon-button";
-import type { HomeAssistant } from "../../../types";
-
-@customElement("ha-integration-overflow-menu")
-export class HaIntegrationOverflowMenu extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  protected render() {
-    return html`
-      <ha-button-menu activatable corner="BOTTOM_START">
-        <ha-icon-button
-          slot="trigger"
-          .label=${this.hass.localize("ui.common.menu")}
-          .path=${mdiDotsVertical}
-        ></ha-icon-button>
-        <ha-clickable-list-item
-          @click=${this._entryClicked}
-          href="/config/application_credentials"
-          aria-label=${this.hass.localize(
-            "ui.panel.config.application_credentials.caption"
-          )}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.application_credentials.caption"
-          )}
-        </ha-clickable-list-item>
-      </ha-button-menu>
-    `;
-  }
-
-  private _entryClicked(ev) {
-    ev.currentTarget.blur();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-integration-overflow-menu": HaIntegrationOverflowMenu;
-  }
-}

src/panels/config/logs/error-log-card.ts

@@ -124,7 +124,7 @@ class ErrorLogCard extends LitElement {
     this._logHTML = this.hass.localize("ui.panel.config.logs.loading_log");
     let log: string;
 
-    if (this.provider !== "core" && isComponentLoaded(this.hass, "hassio")) {
+    if (isComponentLoaded(this.hass, "hassio")) {
       try {
         log = await fetchHassioLogs(this.hass, this.provider);
         if (this.filter) {

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -3,7 +3,6 @@ import {
   mdiCheckCircleOutline,
   mdiDotsVertical,
   mdiOpenInNew,
-  mdiPencil,
   mdiPlus,
 } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
@@ -14,7 +13,6 @@ import memoize from "memoize-one";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { navigate } from "../../../../common/navigate";
 import { stringCompare } from "../../../../common/string/compare";
-import { addSearchParam } from "../../../../common/url/search-params";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
@@ -33,10 +31,7 @@ import {
   LovelacePanelConfig,
   updateDashboard,
 } from "../../../../data/lovelace";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../dialogs/generic/show-dialog-box";
+import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../../types";
@@ -47,11 +42,11 @@ import { showDashboardDetailDialog } from "./show-dialog-lovelace-dashboard-deta
 export class HaConfigLovelaceDashboards extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public isWide!: boolean;
+  @property() public isWide!: boolean;
 
-  @property({ type: Boolean }) public narrow!: boolean;
+  @property() public narrow!: boolean;
 
-  @property({ attribute: false }) public route!: Route;
+  @property() public route!: Route;
 
   @state() private _dashboards: LovelaceDashboard[] = [];
 
@@ -197,37 +192,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
               `,
       };
 
-      columns.edit_path = {
-        title: "",
-        label: this.hass.localize(
-          "ui.panel.config.lovelace.dashboards.picker.headers.edit"
-        ),
-        width: "100px",
-        template: (edit_path, dashboard) =>
-          narrow
-            ? html`
-                <ha-icon-button
-                  .path=${mdiPencil}
-                  .urlPath=${edit_path}
-                  .mode=${dashboard.mode}
-                  @click=${this._editDashboard}
-                  .label=${this.hass.localize(
-                    "ui.panel.config.lovelace.dashboards.picker.edit"
-                  )}
-                ></ha-icon-button>
-              `
-            : html`
-                <mwc-button
-                  .urlPath=${edit_path}
-                  .mode=${dashboard.mode}
-                  @click=${this._editDashboard}
-                  >${this.hass.localize(
-                    "ui.panel.config.lovelace.dashboards.picker.edit"
-                  )}</mwc-button
-                >
-              `,
-      };
-
       return columns;
     }
   );
@@ -246,7 +210,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
         show_in_sidebar: isDefault,
         require_admin: false,
         url_path: "lovelace",
-        edit_path: "lovelace?edit=1",
         mode: defaultMode,
         filename: defaultMode === "yaml" ? "ui-lovelace.yaml" : "",
         iconColor: "var(--primary-color)",
@@ -259,7 +222,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
         show_in_sidebar: true,
         mode: "storage",
         url_path: "energy",
-        edit_path: "config/energy",
         filename: "",
         iconColor: "var(--label-badge-yellow)",
       });
@@ -270,7 +232,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
         .sort((a, b) => stringCompare(a.title, b.title))
         .map((dashboard) => ({
           filename: "",
-          edit_path: `${dashboard.url_path}?${addSearchParam({ edit: "1" })}`,
           ...dashboard,
           default: defaultUrlPath === dashboard.url_path,
         }))
@@ -296,7 +257,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
           this._dashboards
         )}
         .data=${this._getItems(this._dashboards)}
-        @row-click=${this._updateDashboard}
+        @row-click=${this._editDashboard}
         id="url_path"
         hasFab
         clickable
@@ -355,7 +316,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
     navigate(`/${(ev.target as any).urlPath}`);
   }
 
-  private _updateDashboard(ev: CustomEvent) {
+  private _editDashboard(ev: CustomEvent) {
     const urlPath = (ev.detail as RowClickedEvent).id;
 
     if (urlPath === "energy") {
@@ -366,16 +327,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
     this._openDialog(dashboard, urlPath);
   }
 
-  private _editDashboard(ev: CustomEvent) {
-    if ((ev.detail as any).mode === "yaml") {
-      showAlertDialog(this, {
-        text: "The edit UI is not available when in YAML mode.",
-      });
-      return;
-    }
-    navigate(`/${(ev.target as any).urlPath}`);
-  }
-
   private _addDashboard() {
     this._openDialog();
   }
@@ -436,9 +387,3 @@ export class HaConfigLovelaceDashboards extends LitElement {
     ev.currentTarget.blur();
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-config-lovelace-dashboards": HaConfigLovelaceDashboards;
-  }
-}

src/panels/developer-tools/developer-tools-router.ts

@@ -14,7 +14,7 @@ class DeveloperToolsRouter extends HassRouterPage {
     beforeRender: (page) => {
       if (!page || page === "not_found") {
         // If we can, we are going to restore the last visited page.
-        return this._currentPage ? this._currentPage : "yaml";
+        return this._currentPage ? this._currentPage : "state";
       }
       return undefined;
     },

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -42,9 +42,6 @@ class PanelDeveloperTools extends LitElement {
             .selected=${page}
             @iron-activate=${this.handlePageSelected}
           >
-            <paper-tab page-name="yaml">
-              ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
-            </paper-tab>
             <paper-tab page-name="state">
               ${this.hass.localize(
                 "ui.panel.developer-tools.tabs.states.title"
@@ -70,6 +67,9 @@ class PanelDeveloperTools extends LitElement {
                 "ui.panel.developer-tools.tabs.statistics.title"
               )}
             </paper-tab>
+            <paper-tab page-name="yaml">
+              ${this.hass.localize("ui.panel.developer-tools.tabs.yaml.title")}
+            </paper-tab>
           </ha-tabs>
         </app-header>
         <developer-tools-router

src/panels/developer-tools/statistics/developer-tools-statistics.ts

@@ -103,9 +103,6 @@ class HaPanelDevStatistics extends SubscribeMixin(LitElement) {
       },
       fix: {
         title: "",
-        label: this.hass.localize(
-          "ui.panel.developer-tools.tabs.statistics.fix_issue.fix"
-        ),
         template: (_, data: any) =>
           html`${data.issues
             ? html`<mwc-button @click=${this._fixIssue} .data=${data.issues}>

src/panels/lovelace/hui-root.ts

@@ -57,7 +57,10 @@ import type {
   LovelacePanelConfig,
   LovelaceViewConfig,
 } from "../../data/lovelace";
-import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../dialogs/generic/show-dialog-box";
 import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import "../../layouts/ha-app-layout";
@@ -237,7 +240,7 @@ class HUIRoot extends LitElement {
                           ${this.lovelace!.config.views.map(
                             (view) => html`
                               <paper-tab
-                                .aria-label=${view.title}
+                                aria-label=${view.title}
                                 class=${classMap({
                                   "hide-tab": Boolean(
                                     view.visible !== undefined &&
@@ -252,7 +255,7 @@ class HUIRoot extends LitElement {
                                 ${view.icon
                                   ? html`
                                       <ha-icon
-                                        .title=${view.title}
+                                        title=${view.title}
                                         .icon=${view.icon}
                                       ></ha-icon>
                                     `
@@ -400,6 +403,27 @@ class HUIRoot extends LitElement {
                                 </mwc-list-item>
                               `
                             : ""}
+                          ${this.hass!.user?.is_admin &&
+                          !this.hass!.config.safe_mode
+                            ? html`
+                                <mwc-list-item
+                                  graphic="icon"
+                                  aria-label=${this.hass!.localize(
+                                    "ui.panel.lovelace.menu.configure_ui"
+                                  )}
+                                  @request-selected=${this
+                                    ._handleEnableEditMode}
+                                >
+                                  ${this.hass!.localize(
+                                    "ui.panel.lovelace.menu.configure_ui"
+                                  )}
+                                  <ha-svg-icon
+                                    slot="graphic"
+                                    .path=${mdiPencil}
+                                  ></ha-svg-icon>
+                                </mwc-list-item>
+                              `
+                            : ""}
                           ${this._editMode
                             ? html`
                                 <a
@@ -445,7 +469,7 @@ class HUIRoot extends LitElement {
                     ${this.lovelace!.config.views.map(
                       (view) => html`
                         <paper-tab
-                          .aria-label=${view.title}
+                          aria-label=${view.title}
                           class=${classMap({
                             "hide-tab": Boolean(
                               !this._editMode &&
@@ -474,7 +498,7 @@ class HUIRoot extends LitElement {
                           ${view.icon
                             ? html`
                                 <ha-icon
-                                  .title=${view.title}
+                                  title=${view.title}
                                   .icon=${view.icon}
                                 ></ha-icon>
                               `
@@ -650,6 +674,7 @@ class HUIRoot extends LitElement {
     return (
       (this.narrow && this._conversation(this.hass.config.components)) ||
       this._editMode ||
+      (this.hass!.user?.is_admin && !this.hass!.config.safe_mode) ||
       (this.hass.panels.lovelace?.config as LovelacePanelConfig)?.mode ===
         "yaml" ||
       this._yamlMode
@@ -722,6 +747,19 @@ class HUIRoot extends LitElement {
     showVoiceCommandDialog(this);
   }
 
+  private _handleEnableEditMode(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+    if (this._yamlMode) {
+      showAlertDialog(this, {
+        text: "The edit UI is not available when in YAML mode.",
+      });
+      return;
+    }
+    this.lovelace!.setEditMode(true);
+  }
+
   private _editModeDisable(): void {
     this.lovelace!.setEditMode(false);
   }

src/translations/en.json

@@ -1175,7 +1175,7 @@
         },
         "updates": {
           "caption": "Updates",
-          "description": "Manage updates of Home Assistant, add-ons and devices",
+          "description": "Manage updates of Home Assistant, Add-ons and devices",
           "no_updates": "No updates available",
           "no_update_entities": {
             "title": "Unable to check for updates",
@@ -1183,7 +1183,7 @@
           },
           "check_updates": "Check for updates",
           "no_new_updates": "No new updates found",
-          "updates_refreshed": "{count} {count, plural,\n  one {update}\n  other {updates}\n} refreshed",
+          "updates_refreshed": "Updates refreshed",
           "title": "{count} {count, plural,\n  one {update}\n  other {updates}\n}",
           "unable_to_fetch": "Unable to load updates",
           "version_available": "Version {version_available} is available",
@@ -1490,7 +1490,7 @@
         },
         "core": {
           "caption": "General",
-          "description": "Name, time zone and locale settings",
+          "description": "Name, Timezone and locale settings",
           "section": {
             "core": {
               "header": "General Configuration",
@@ -1621,11 +1621,9 @@
                 "require_admin": "Admin only",
                 "sidebar": "Show in sidebar",
                 "filename": "Filename",
-                "url": "Open",
-                "edit": "Edit"
+                "url": "Open"
               },
               "open": "Open",
-              "edit": "Edit",
               "add_dashboard": "Add dashboard"
             },
             "confirm_delete_title": "Delete {dashboard_title}?",
@@ -2857,30 +2855,6 @@
             "create": "Create"
           }
         },
-        "application_credentials": {
-          "caption": "Application Credentials",
-          "description": "Manage the OAuth Application Credentials used by Integrations",
-          "editor": {
-            "caption": "Add Application Credential",
-            "create": "Create",
-            "domain": "Integration",
-            "client_id": "OAuth Client ID",
-            "client_secret": "OAuth Client Secret"
-          },
-          "picker": {
-            "add_application_credential": "Add Application Credential",
-            "headers": {
-              "client_id": "OAuth Client ID",
-              "application": "Integration"
-            },
-            "remove_selected": {
-              "button": "Remove selected",
-              "confirm_title": "Do you want to remove {number} {number, plural,\n  one {credential}\n  other {credentialss}\n}?",
-              "confirm_text": "Application Credentials in use by an integration may not be removed."
-            },
-            "selected": "{number} selected"
-          }
-        },
         "mqtt": {
           "title": "MQTT",
           "description_publish": "Publish a packet",
@@ -3165,7 +3139,7 @@
         },
         "analytics": {
           "caption": "Analytics",
-          "description": "Learn how to share data to improve Home Assistant"
+          "description": "Learn how to share data to better the Open Home"
         },
         "network": {
           "caption": "Network",
@@ -3210,11 +3184,11 @@
         },
         "system_health": {
           "caption": "System Health",
-          "description": "Status, metrics and integration startup time",
+          "description": "Status, Stats and Integration startup time",
           "cpu_usage": "Processor Usage",
           "ram_usage": "Memory Usage",
-          "core_stats": "Core Metrics",
-          "supervisor_stats": "Supervisor Metrics",
+          "core_stats": "Core Stats",
+          "supervisor_stats": "Supervisor Stats",
           "integration_start_time": "Integration Startup Time"
         },
         "system_dashboard": {

test/common/string/sequence_matching.test.ts

@@ -1,8 +1,7 @@
-import { assert } from "chai";
+import { assert, expect } from "chai";
 
 import {
-  fuzzyFilterSort,
-  fuzzySequentialMatch,
+  fuzzySortFilterSort,
   ScorableTextItem,
 } from "../../../src/common/string/filter/sequence-matching";
 
@@ -11,45 +10,34 @@ describe("fuzzySequentialMatch", () => {
     strings: ["automation.ticker", "Stocks"],
   };
 
-  const createExpectation: (
-    pattern,
-    expected
-  ) => {
-    pattern: string;
-    expected: string | number | undefined;
-  } = (pattern, expected) => ({
-    pattern,
-    expected,
-  });
-
   const shouldMatchEntity = [
-    createExpectation("automation.ticker", 131),
-    createExpectation("automation.ticke", 121),
-    createExpectation("automation.", 82),
-    createExpectation("au", 10),
-    createExpectation("automationticker", 85),
-    createExpectation("tion.tick", 8),
-    createExpectation("ticker", -4),
-    createExpectation("automation.r", 73),
-    createExpectation("tick", -8),
-    createExpectation("aumatick", 9),
-    createExpectation("aion.tck", 4),
-    createExpectation("ioticker", -4),
-    createExpectation("atmto.ikr", -34),
-    createExpectation("uoaintce", -39),
-    createExpectation("au.tce", -3),
-    createExpectation("tomaontkr", -19),
-    createExpectation("s", 1),
-    createExpectation("stocks", 42),
-    createExpectation("sks", -5),
+    "",
+    " ",
+    "automation.ticker",
+    "stocks",
+    "automation.ticke",
+    "automation. ticke",
+    "automation.",
+    "automationticker",
+    "automation.r",
+    "aumatick",
+    "tion.tick",
+    "aion.tck",
+    "s",
+    "au.tce",
+    "au",
+    "ticker",
+    "tick",
+    "ioticker",
+    "sks",
+    "tomaontkr",
+    "atmto.ikr",
+    "uoaintce",
   ];
 
   const shouldNotMatchEntity = [
-    "",
-    " ",
     "abcdefghijklmnopqrstuvwxyz",
     "automation.tickerz",
-    "automation. ticke",
     "1",
     "noitamotua",
     "autostocks",
@@ -57,23 +45,23 @@ describe("fuzzySequentialMatch", () => {
   ];
 
   describe(`Entity '${item.strings[0]}'`, () => {
-    for (const expectation of shouldMatchEntity) {
-      it(`matches '${expectation.pattern}' with return of '${expectation.expected}'`, () => {
-        const res = fuzzySequentialMatch(expectation.pattern, item);
-        assert.equal(res, expectation.expected);
+    for (const filter of shouldMatchEntity) {
+      it(`Should matches ${filter}`, () => {
+        const res = fuzzySortFilterSort(filter, [item]);
+        assert.lengthOf(res, 1);
       });
     }
 
     for (const badFilter of shouldNotMatchEntity) {
       it(`fails to match with '${badFilter}'`, () => {
-        const res = fuzzySequentialMatch(badFilter, item);
-        assert.equal(res, undefined);
+        const res = fuzzySortFilterSort(badFilter, [item]);
+        assert.lengthOf(res, 0);
       });
     }
   });
 });
 
-describe("fuzzyFilterSort", () => {
+describe("fuzzyFilterSort original tests", () => {
   const filter = "ticker";
   const automationTicker = {
     strings: ["automation.ticker", "Stocks"],
@@ -105,14 +93,137 @@ describe("fuzzyFilterSort", () => {
 
   it(`filters and sorts correctly`, () => {
     const expectedItemsAfterFilter = [
-      { ...ticker, score: 44 },
-      { ...sensorTicker, score: 1 },
-      { ...automationTicker, score: -4 },
-      { ...timerCheckRouter, score: -8 },
+      { ...ticker, score: 0 },
+      { ...sensorTicker, score: -14 },
+      { ...automationTicker, score: -22 },
+      { ...timerCheckRouter, score: -32012 },
     ];
 
-    const res = fuzzyFilterSort(filter, itemsBeforeFilter);
+    const res = fuzzySortFilterSort(filter, itemsBeforeFilter);
 
     assert.deepEqual(res, expectedItemsAfterFilter);
   });
 });
+
+describe("Fuzzy filter new tests", () => {
+  const testEntities = [
+    {
+      id: "binary_sensor.garage_door_opened",
+      name: "Garage Door Opened (Sensor, Binary)",
+    },
+    {
+      id: "sensor.garage_door_status",
+      name: "Garage Door Opened (Sensor)",
+    },
+    {
+      id: "sensor.temperature_living_room",
+      name: "[Living room] temperature",
+    },
+    {
+      id: "sensor.temperature_parents_bedroom",
+      name: "[Parents bedroom] temperature",
+    },
+    {
+      id: "sensor.temperature_children_bedroom",
+      name: "[Children bedroom] temperature",
+    },
+  ];
+
+  function testEntitySearch(
+    searchInput: string | null,
+    expectedResults: string[]
+  ) {
+    const sortableEntities = testEntities.map((entity) => ({
+      strings: [entity.id, entity.name],
+      entity: entity,
+    }));
+    const sortedEntities = fuzzySortFilterSort(
+      searchInput || "",
+      sortableEntities
+    );
+    // console.log(sortedEntities);
+    expect(sortedEntities.map((it) => it.entity.id)).to.have.ordered.members(
+      expectedResults
+    );
+  }
+
+  it(`test empty or null query`, () => {
+    testEntitySearch(
+      "",
+      testEntities.map((it) => it.id)
+    );
+    testEntitySearch(
+      null,
+      testEntities.map((it) => it.id)
+    );
+  });
+
+  it(`test single word search`, () => {
+    testEntitySearch("bedroom", [
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test no result`, () => {
+    testEntitySearch("does not exist", []);
+    testEntitySearch("betroom", []);
+  });
+
+  it(`test single word search with typo`, () => {
+    testEntitySearch("bedorom", [
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test multi word search`, () => {
+    testEntitySearch("bedroom children", [
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test partial word search`, () => {
+    testEntitySearch("room", [
+      "sensor.temperature_living_room",
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+
+  it(`test mixed cased word search`, () => {
+    testEntitySearch("garage binary", ["binary_sensor.garage_door_opened"]);
+  });
+
+  it(`test mixed id and name search`, () => {
+    testEntitySearch("status opened", ["sensor.garage_door_status"]);
+  });
+
+  it(`test special chars in query`, () => {
+    testEntitySearch("sensor.temperature", [
+      "sensor.temperature_living_room",
+      "sensor.temperature_parents_bedroom",
+      "sensor.temperature_children_bedroom",
+    ]);
+
+    testEntitySearch("sensor.temperature parents", [
+      "sensor.temperature_parents_bedroom",
+    ]);
+    testEntitySearch("parents_Bedroom", ["sensor.temperature_parents_bedroom"]);
+  });
+
+  it(`test search in name`, () => {
+    testEntitySearch("Binary)", ["binary_sensor.garage_door_opened"]);
+
+    testEntitySearch("Binary)NotExists", []);
+  });
+
+  it(`test regex special chars`, () => {
+    // Should return an empty result, but no error
+    testEntitySearch("\\{}()*+?.,[])", []);
+
+    testEntitySearch("[Children bedroom]", [
+      "sensor.temperature_children_bedroom",
+    ]);
+  });
+});

yarn.lock

@@ -8433,6 +8433,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"fuzzysort@npm:^1.2.1":
+  version: 1.2.1
+  resolution: "fuzzysort@npm:1.2.1"
+  checksum: 74dad902a0aef6c3237d5ae5330aacca23d408f0e07125fcc39b57561b4c29da512fbf3826c3f3918da89f132f5b393cf5d56b3217282ecfb80a90124bdf03d1
+  languageName: node
+  linkType: hard
+
 "gauge@npm:~2.7.3":
   version: 2.7.4
   resolution: "gauge@npm:2.7.4"
@@ -9119,6 +9126,7 @@ fsevents@^1.2.7:
     fancy-log: ^1.3.3
     fs-extra: ^7.0.1
     fuse.js: ^6.0.0
+    fuzzysort: ^1.2.1
     glob: ^7.2.0
     google-timezones-json: ^1.0.2
     gulp: ^4.0.2