Att tip to manage media dialog about network storage (#16612)

src/components/media-player/dialog-media-manage.ts

@@ -24,9 +24,11 @@ import "../ha-circular-progress";
 import "../ha-dialog";
 import "../ha-dialog-header";
 import "../ha-svg-icon";
+import "../ha-tip";
 import "./ha-media-player-browse";
 import "./ha-media-upload-button";
 import type { MediaManageDialogParams } from "./show-media-manage-dialog";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
 
 @customElement("dialog-media-manage")
 class DialogMediaManage extends LitElement {
@@ -197,6 +199,25 @@ class DialogMediaManage extends LitElement {
                 )}
               </mwc-list>
             `}
+        ${isComponentLoaded(this.hass, "hassio")
+          ? html`<ha-tip .hass=${this.hass}>
+              ${this.hass.localize(
+                "ui.components.media-browser.file_management.tip_media_storage",
+                {
+                  storage: html`<a
+                    href="/config/storage"
+                    @click=${this.closeDialog}
+                  >
+                    ${this.hass
+                      .localize(
+                        "ui.components.media-browser.file_management.tip_storage_panel"
+                      )
+                      .toLowerCase()}
+                  </a>`,
+                }
+              )}
+            </ha-tip>`
+          : nothing}
       </ha-dialog>
     `;
   }
@@ -309,6 +330,10 @@ class DialogMediaManage extends LitElement {
           vertical-align: middle;
         }
 
+        ha-tip {
+          margin: 16px;
+        }
+
         ha-svg-icon[slot="icon"] {
           margin-inline-start: 0px !important;
           margin-inline-end: 8px !important;

src/translations/en.json

@@ -593,7 +593,9 @@
           "uploading": "Uploading {count} {count, plural,\n  one {file}\n  other {files}\n}",
           "confirm_delete": "Do you want to delete {count} {count, plural,\n  one {file}\n  other {files}\n}?",
           "delete": "Delete {count}",
-          "deleting": "Deleting {count}"
+          "deleting": "Deleting {count}",
+          "tip_media_storage": "[%key:ui::panel::config::tips::media_storage%]",
+          "tip_storage_panel": "[%key:ui::panel::config::storage::caption%]"
         },
         "class": {
           "album": "Album",
@@ -3915,7 +3917,8 @@
         },
         "tips": {
           "tip": "Tip!",
-          "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}"
+          "join": "Join the community on our {forums}, {twitter}, {discord}, {blog} or {newsletter}",
+          "media_storage": "You can add network storage to your Home Assistant instance in the {storage} panel."
         },
         "analytics": {
           "caption": "Analytics",