Redirect old backup links to backup integration for non supervised (#12183)

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

@@ -12,7 +12,12 @@ import "../../layouts/hass-error-screen";
 import { HomeAssistant, Route } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 
-const REDIRECTS: Redirects = {
+const getRedirect = (
+  path: string,
+  hasSupervisor: boolean
+): Redirect | undefined =>
+  ((
+    {
       developer_states: {
         redirect: "/developer-tools/state",
       },
@@ -117,10 +122,6 @@ const REDIRECTS: Redirects = {
         component: "lovelace",
         redirect: "/config/lovelace/resources",
       },
-  backup: {
-    component: "backup",
-    redirect: "/config/backup",
-  },
       people: {
         component: "person",
         redirect: "/config/person",
@@ -163,7 +164,20 @@ const REDIRECTS: Redirects = {
         component: "media_source",
         redirect: "/media-browser",
       },
-};
+      backup: {
+        component: hasSupervisor ? "hassio" : "backup",
+        redirect: hasSupervisor ? "/hassio/backups" : "/config/backup",
+      },
+      supervisor_snapshots: {
+        component: hasSupervisor ? "hassio" : "backup",
+        redirect: hasSupervisor ? "/hassio/backups" : "/config/backup",
+      },
+      supervisor_backups: {
+        component: hasSupervisor ? "hassio" : "backup",
+        redirect: hasSupervisor ? "/hassio/backups" : "/config/backup",
+      },
+    } as Redirects
+  )[path]);
 
 export type ParamType = "url" | "string";
 
@@ -184,19 +198,17 @@ class HaPanelMy extends LitElement {
 
   @state() public _error?: string;
 
+  private _redirect?: Redirect;
+
   connectedCallback() {
     super.connectedCallback();
     const path = this.route.path.substring(1);
+    const hasSupervisor = isComponentLoaded(this.hass, "hassio");
 
-    if (path === "backup" && isComponentLoaded(this.hass, "hassio")) {
-      navigate("/hassio/backups", {
-        replace: true,
-      });
-      return;
-    }
+    this._redirect = getRedirect(path, hasSupervisor);
 
-    if (path.startsWith("supervisor")) {
-      if (!isComponentLoaded(this.hass, "hassio")) {
+    if (path.startsWith("supervisor") && this._redirect === undefined) {
+      if (!hasSupervisor) {
         this._error = "no_supervisor";
         return;
       }
@@ -206,16 +218,14 @@ class HaPanelMy extends LitElement {
       return;
     }
 
-    const redirect = REDIRECTS[path];
-
-    if (!redirect) {
+    if (!this._redirect) {
       this._error = "not_supported";
       return;
     }
 
     if (
-      redirect.component &&
-      !isComponentLoaded(this.hass, redirect.component)
+      this._redirect.component &&
+      !isComponentLoaded(this.hass, this._redirect.component)
     ) {
       this._error = "no_component";
       return;
@@ -223,7 +233,7 @@ class HaPanelMy extends LitElement {
 
     let url: string;
     try {
-      url = this._createRedirectUrl(redirect);
+      url = this._createRedirectUrl();
     } catch (err: any) {
       this._error = "url_error";
       return;
@@ -254,10 +264,16 @@ class HaPanelMy extends LitElement {
             this.hass.localize(
               "ui.panel.my.component_not_loaded",
               "integration",
-              domainToName(
-                this.hass.localize,
-                REDIRECTS[this.route.path.substr(1)].component!
-              )
+              html`<a
+                target="_blank"
+                rel="noreferrer noopener"
+                href=${documentationUrl(
+                  this.hass,
+                  `/integrations/${this._redirect!.component!}`
+                )}
+              >
+                ${domainToName(this.hass.localize, this._redirect!.component!)}
+              </a>`
             ) || "This redirect is not supported.";
           break;
         case "no_supervisor":
@@ -280,18 +296,18 @@ class HaPanelMy extends LitElement {
     return html``;
   }
 
-  private _createRedirectUrl(redirect: Redirect): string {
-    const params = this._createRedirectParams(redirect);
-    return `${redirect.redirect}${params}`;
+  private _createRedirectUrl(): string {
+    const params = this._createRedirectParams();
+    return `${this._redirect!.redirect}${params}`;
   }
 
-  private _createRedirectParams(redirect: Redirect): string {
+  private _createRedirectParams(): string {
     const params = extractSearchParamsObject();
-    if (!redirect.params && !Object.keys(params).length) {
+    if (!this._redirect!.params && !Object.keys(params).length) {
       return "";
     }
     const resultParams = {};
-    Object.entries(redirect.params || {}).forEach(([key, type]) => {
+    Object.entries(this._redirect!.params || {}).forEach(([key, type]) => {
       if (!params[key] || !this._checkParamType(type, params[key])) {
         throw Error();
       }