Refactor brands url to single location (#7613)

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

@@ -23,6 +23,7 @@ import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { brandsUrl } from "../../util/brands-url";
 
 interface HandlerObj {
   name: string;
@@ -102,7 +103,7 @@ class StepFlowPickHandler extends LitElement {
                 <img
                   slot="item-icon"
                   loading="lazy"
-                  src="https://brands.home-assistant.io/_/${handler.slug}/icon.png"
+                  src="${brandsUrl(handler.slug, "icon", true)}"
                   referrerpolicy="no-referrer"
                 />
 

src/onboarding/integration-badge.ts

@@ -8,6 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "../components/ha-icon";
+import { brandsUrl } from "../util/brands-url";
 
 @customElement("integration-badge")
 class IntegrationBadge extends LitElement {
@@ -23,7 +24,7 @@ class IntegrationBadge extends LitElement {
     return html`
       <div class="icon">
         <img
-          src="https://brands.home-assistant.io/${this.domain}/icon.png"
+          src="${brandsUrl(this.domain, "icon")}"
           referrerpolicy="no-referrer"
         />
         ${this.badgeIcon

src/panels/config/devices/ha-config-device-page.ts

@@ -45,6 +45,7 @@ import { configSections } from "../ha-panel-config";
 import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
+import { brandsUrl } from "../../../util/brands-url";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -224,9 +225,7 @@ export class HaConfigDevicePage extends LitElement {
                       : ""
                   }
                   <img
-                    src="https://brands.home-assistant.io/${
+                    src="${brandsUrl(integrations[0], "logo")}"
-                      integrations[0]
-                    }/logo.png"
                     referrerpolicy="no-referrer"
                     @load=${this._onImageLoad}
                     @error=${this._onImageError}

src/panels/config/info/integrations-card.ts

@@ -17,6 +17,7 @@ import {
   IntegrationManifest,
 } from "../../../data/integration";
 import { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
 
 @customElement("integrations-card")
 class IntegrationsCard extends LitElement {
@@ -50,7 +51,7 @@ class IntegrationsCard extends LitElement {
                     <td>
                       <img
                         loading="lazy"
-                        src="https://brands.home-assistant.io/_/${domain}/icon.png"
+                        src="${brandsUrl(domain, "icon", true)}"
                         referrerpolicy="no-referrer"
                       />
                     </td>

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

@@ -67,6 +67,7 @@ import type {
   ConfigEntryUpdatedEvent,
   HaIntegrationCard,
 } from "./ha-integration-card";
+import { brandsUrl } from "../../../util/brands-url";
 
 interface DataEntryFlowProgressExtended extends DataEntryFlowProgress {
   localized_title?: string;
@@ -330,7 +331,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                     <div class="card-content">
                       <div class="image">
                         <img
-                          src="https://brands.home-assistant.io/${item.domain}/logo.png"
+                          src="${brandsUrl(item.domain, "logo")}"
                           referrerpolicy="no-referrer"
                           @error=${this._onImageError}
                           @load=${this._onImageLoad}
@@ -378,7 +379,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                       <div class="card-content">
                         <div class="image">
                           <img
-                            src="https://brands.home-assistant.io/${flow.handler}/logo.png"
+                            src="${brandsUrl(flow.handler, "logo")}"
                             referrerpolicy="no-referrer"
                             @error=${this._onImageError}
                             @load=${this._onImageLoad}

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

@@ -31,6 +31,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
+import { brandsUrl } from "../../../util/brands-url";
 
 export interface ConfigEntryUpdatedEvent {
   entry: ConfigEntry;
@@ -107,7 +108,7 @@ export class HaIntegrationCard extends LitElement {
       <ha-card outlined class="group">
         <div class="group-header">
           <img
-            src="https://brands.home-assistant.io/${this.domain}/icon.png"
+            src="${brandsUrl(this.domain, "icon")}"
             referrerpolicy="no-referrer"
             @error=${this._onImageError}
             @load=${this._onImageLoad}
@@ -157,7 +158,7 @@ export class HaIntegrationCard extends LitElement {
         <div class="card-content">
           <div class="image">
             <img
-              src="https://brands.home-assistant.io/${item.domain}/logo.png"
+              src="${brandsUrl(item.domain, "logo")}"
               referrerpolicy="no-referrer"
               @error=${this._onImageError}
               @load=${this._onImageLoad}

src/util/brands-url.ts

@@ -0,0 +1,9 @@
+export const brandsUrl = (
+  domain: string,
+  type: "icon" | "logo",
+  useFallback?: boolean
+) => {
+  return `https://brands.home-assistant.io/${
+    useFallback ? "_/" : ""
+  }${domain}/${type}.png`;
+};

test-mocha/util/generate-brands-url-spec.ts

@@ -0,0 +1,33 @@
+import * as assert from "assert";
+import { brandsUrl } from "../../src/util/brands-url";
+
+describe("Generate brands Url", function () {
+  it("Generate logo brands url for cloud component without fallback", function () {
+    assert.strictEqual(
+      // @ts-ignore
+      brandsUrl("cloud", "logo"),
+      "https://brands.home-assistant.io/cloud/logo.png"
+    );
+  });
+  it("Generate icon brands url for cloud component without fallback", function () {
+    assert.strictEqual(
+      // @ts-ignore
+      brandsUrl("cloud", "icon"),
+      "https://brands.home-assistant.io/cloud/icon.png"
+    );
+  });
+  it("Generate logo brands url for cloud component with fallback", function () {
+    assert.strictEqual(
+      // @ts-ignore
+      brandsUrl("cloud", "logo", true),
+      "https://brands.home-assistant.io/_/cloud/logo.png"
+    );
+  });
+  it("Generate icon brands url for cloud component with fallback", function () {
+    assert.strictEqual(
+      // @ts-ignore
+      brandsUrl("cloud", "icon", true),
+      "https://brands.home-assistant.io/_/cloud/icon.png"
+    );
+  });
+});