RTL fix for log buttons (#12474)

hassio/src/hassio-main.ts

@@ -3,8 +3,8 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
-import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { mainWindow } from "../../src/common/dom/get_main_window";
+import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -73,6 +73,14 @@ export class HassioMain extends SupervisorBaseElement {
       });
     });
 
+    // Forward keydown events to the main window for quickbar access
+    document.body.addEventListener("keydown", (ev) => {
+      // @ts-ignore
+      fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
+        bubbles: false,
+      });
+    });
+
     makeDialogManager(this, this.shadowRoot!);
   }
 

hassio/src/hassio-my-redirect.ts

@@ -15,7 +15,7 @@ import {
 } from "../../src/panels/my/ha-panel-my";
 import { HomeAssistant, Route } from "../../src/types";
 
-const REDIRECTS: Redirects = {
+export const REDIRECTS: Redirects = {
   supervisor: {
     redirect: "/hassio/dashboard",
   },

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

@@ -198,9 +198,10 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           this.hass,
           deviceEntityLookup[device.id]
         ),
-        area: device.area_id
+        area:
-          ? areaLookup[device.area_id].name
+          device.area_id && areaLookup[device.area_id]
-          : this.hass.localize("ui.components.device-picker.no_area"),
+            ? areaLookup[device.area_id].name
+            : this.hass.localize("ui.components.device-picker.no_area"),
       }));
       if (!outputDevices.length) {
         return [

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

@@ -75,7 +75,7 @@ class HaConfigSectionUpdates extends LitElement {
           <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
             <ha-icon-button
               slot="trigger"
-              .label=${this.hass.localize("ui.panel.config.info.copy_menu")}
+              .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
             <mwc-list-item id="skipped">

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

@@ -197,7 +197,10 @@ export class HaConfigDeviceDashboard extends LitElement {
         ),
         model: device.model || "<unknown>",
         manufacturer: device.manufacturer || "<unknown>",
-        area: device.area_id ? areaLookup[device.area_id].name : "—",
+        area:
+          device.area_id && areaLookup[device.area_id]
+            ? areaLookup[device.area_id].name
+            : "—",
         integration: device.config_entries.length
           ? device.config_entries
               .filter((entId) => entId in entryLookup)

src/panels/config/entities/entity-registry-settings.ts

@@ -356,6 +356,25 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               )}
             </ha-select>`
           : ""}
+        ${this._helperConfigEntry
+          ? html`
+              <div class="row">
+                <mwc-button
+                  @click=${this._showOptionsFlow}
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.configure_state",
+                    "integration",
+                    domainToName(
+                      this.hass.localize,
+                      this._helperConfigEntry.domain
+                    )
+                  )}
+                </mwc-button>
+              </div>
+            `
+          : ""}
         <ha-textfield
           error-message="Domain needs to stay the same"
           .value=${this._entityId}
@@ -373,20 +392,6 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               @value-changed=${this._areaPicked}
             ></ha-area-picker>`
           : ""}
-        ${this._helperConfigEntry
-          ? html`
-              <div class="row">
-                <mwc-button
-                  @click=${this._showOptionsFlow}
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.configure_state"
-                  )}
-                </mwc-button>
-              </div>
-            `
-          : ""}
 
         <ha-expansion-panel
           .header=${this.hass.localize(

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -79,9 +79,11 @@ class HaInputSelectForm extends LitElement {
             "ui.dialogs.helper_settings.generic.icon"
           )}
         ></ha-icon-picker>
-        ${this.hass!.localize(
+        <div class="header">
-          "ui.dialogs.helper_settings.input_select.options"
+          ${this.hass!.localize(
-        )}:
+            "ui.dialogs.helper_settings.input_select.options"
+          )}:
+        </div>
         ${this._options.length
           ? this._options.map(
               (option, index) => html`
@@ -206,6 +208,10 @@ class HaInputSelectForm extends LitElement {
         #option_input {
           margin-top: 8px;
         }
+        .header {
+          margin-top: 8px;
+          margin-bottom: 8px;
+        }
       `,
     ];
   }

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

@@ -16,6 +16,7 @@ import "../../../components/ha-ansi-to-html";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-select";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { fetchErrorLog } from "../../../data/error_log";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import { fetchHassioLogs } from "../../../data/hassio/supervisor";
@@ -62,7 +63,11 @@ class ErrorLogCard extends LitElement {
           : ""}
         ${!this._logHTML
           ? html`
-              <mwc-button raised @click=${this._refreshLogs}>
+              <mwc-button
+                raised
+                @click=${this._refreshLogs}
+                dir=${computeRTLDirection(this.hass)}
+              >
                 ${this.hass.localize("ui.panel.config.logs.load_logs")}
               </mwc-button>
             `

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

@@ -18,6 +18,7 @@ import {
 import { HomeAssistant } from "../../../types";
 import { showSystemLogDetailDialog } from "./show-dialog-system-log-detail";
 import { formatSystemLogTime } from "./util";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 @customElement("system-log-card")
 export class SystemLogCard extends LitElement {
@@ -131,7 +132,7 @@ export class SystemLogCard extends LitElement {
                       `
                     )}
 
-                <div class="card-actions">
+                <div class="card-actions" dir=${computeRTLDirection(this.hass)}>
                   <ha-call-service-button
                     .hass=${this.hass}
                     domain="system_log"

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

@@ -41,15 +41,15 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
     component: "cloud",
     redirect: "/config/cloud",
   },
-  integrations: {
-    redirect: "/config/integrations",
-  },
   config_flow_start: {
     redirect: "/config/integrations/add",
     params: {
       domain: "string",
     },
   },
+  integrations: {
+    redirect: "/config/integrations",
+  },
   config_mqtt: {
     component: "mqtt",
     redirect: "/config/mqtt",
@@ -79,10 +79,6 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
   areas: {
     redirect: "/config/areas/dashboard",
   },
-  blueprints: {
-    component: "blueprint",
-    redirect: "/config/blueprint/dashboard",
-  },
   blueprint_import: {
     component: "blueprint",
     redirect: "/config/blueprint/dashboard/import",
@@ -90,6 +86,10 @@ export const getMyRedirects = (hasSupervisor: boolean): Redirects => ({
       blueprint_url: "url",
     },
   },
+  blueprints: {
+    component: "blueprint",
+    redirect: "/config/blueprint/dashboard",
+  },
   automations: {
     component: "automation",
     redirect: "/config/automation/dashboard",

src/state/quick-bar-mixin.ts

@@ -14,6 +14,7 @@ import { HassElement } from "./hass-element";
 declare global {
   interface HASSDomEvents {
     "hass-quick-bar": QuickBarParams;
+    "hass-quick-bar-trigger": KeyboardEvent;
     "hass-enable-shortcuts": HomeAssistant["enableShortcuts"];
   }
 }
@@ -28,6 +29,20 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
         storeState(this.hass!);
       });
 
+      mainWindow.addEventListener("hass-quick-bar-trigger", (ev) => {
+        switch (ev.detail.key) {
+          case "e":
+            this._showQuickBar(ev.detail);
+            break;
+          case "c":
+            this._showQuickBar(ev.detail, true);
+            break;
+          case "m":
+            this._createMyLink(ev.detail);
+            break;
+        }
+      });
+
       this._registerShortcut();
     }
 
@@ -48,22 +63,49 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
     }
 
     private async _createMyLink(e: KeyboardEvent) {
-      if (!this._canOverrideAlphanumericInput(e) || !this.hass) {
+      if (
+        !this.hass?.enableShortcuts ||
+        !this._canOverrideAlphanumericInput(e)
+      ) {
         return;
       }
 
       const targetPath = mainWindow.location.pathname;
+      const isHassio = isComponentLoaded(this.hass, "hassio");
+      const myParams = new URLSearchParams();
+
+      if (isHassio && targetPath.startsWith("/hassio")) {
+        const myPanelSupervisor = await import(
+          "../../hassio/src/hassio-my-redirect"
+        );
+        for (const [slug, redirect] of Object.entries(
+          myPanelSupervisor.REDIRECTS
+        )) {
+          if (targetPath.startsWith(redirect.redirect)) {
+            myParams.append("redirect", slug);
+            if (redirect.redirect === "/hassio/addon") {
+              myParams.append("addon", targetPath.split("/")[3]);
+            }
+            window.open(
+              `https://my.home-assistant.io/create-link/?${myParams.toString()}`,
+              "_blank"
+            );
+            return;
+          }
+        }
+      }
+
       const myPanel = await import("../panels/my/ha-panel-my");
 
       for (const [slug, redirect] of Object.entries(
-        myPanel.getMyRedirects(isComponentLoaded(this.hass, "hassio"))
+        myPanel.getMyRedirects(isHassio)
       )) {
-        if (redirect.redirect === targetPath) {
+        if (targetPath.startsWith(redirect.redirect)) {
+          myParams.append("redirect", slug);
           window.open(
-            `https://my.home-assistant.io/create-link/?redirect=${slug}`,
+            `https://my.home-assistant.io/create-link/?${myParams.toString()}`,
             "_blank"
           );
-
           return;
         }
       }

src/translations/en.json

@@ -858,7 +858,7 @@
           "area_note": "By default the entities of a device are in the same area as the device. If you change the area of this entity, it will no longer follow the area of the device.",
           "follow_device_area": "Follow device area",
           "change_device_area": "Change device area",
-          "configure_state": "Configure State"
+          "configure_state": "{integration} options"
         }
       },
       "helper_settings": {