Transform helper to warning for edit view type (#19934)

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -57,6 +57,8 @@ import { EditViewDialogParams } from "./show-edit-view-dialog";
 export class HuiDialogEditView extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @state() private _currentType?: string;
+
   @state() private _params?: EditViewDialogParams;
 
   @state() private _config?: LovelaceViewConfig;
@@ -111,6 +113,7 @@ export class HuiDialogEditView extends LitElement {
       this._badges = [];
       return;
     }
+    this._currentType = view.type;
     const { badges, ...viewConfig } = view;
     this._config = viewConfig;
     this._badges = badges ? processEditorEntities(badges) : [];
@@ -211,6 +214,15 @@ export class HuiDialogEditView extends LitElement {
       }
     }
 
+    const isEmpty =
+      !this._config?.cards?.length && !this._config?.sections?.length;
+
+    const isCompatibleViewType =
+      isEmpty ||
+      (this._currentType === SECTION_VIEW_LAYOUT
+        ? this._config?.type === SECTION_VIEW_LAYOUT
+        : this._config?.type !== SECTION_VIEW_LAYOUT);
+
     return html`
       <ha-dialog
         open
@@ -308,9 +320,25 @@ export class HuiDialogEditView extends LitElement {
               </mwc-button>
             `
           : nothing}
+        ${!isCompatibleViewType
+          ? html`
+              <ha-alert class="incompatible" alert-type="warning">
+                ${this._config?.type === SECTION_VIEW_LAYOUT
+                  ? this.hass!.localize(
+                      "ui.panel.lovelace.editor.edit_view.type_warning_sections"
+                    )
+                  : this.hass!.localize(
+                      "ui.panel.lovelace.editor.edit_view.type_warning_others"
+                    )}
+              </ha-alert>
+            `
+          : nothing}
         <mwc-button
           slot="primaryAction"
-          ?disabled=${!this._config || this._saving || !this._dirty}
+          ?disabled=${!this._config ||
+          this._saving ||
+          !this._dirty ||
+          !isCompatibleViewType}
           @click=${this._save}
         >
           ${this._saving
@@ -554,6 +582,10 @@ export class HuiDialogEditView extends LitElement {
           margin: 12px 16px;
           flex-wrap: wrap;
         }
+        .incompatible {
+          display: block;
+          margin-top: 16px;
+        }
 
         @media all and (min-width: 600px) {
           ha-dialog {

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -37,7 +37,7 @@ export class HuiViewEditor extends LitElement {
   private _suggestedPath = false;
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, currentType: string, isNew: boolean) =>
+    (localize: LocalizeFunc) =>
       [
         { name: "title", selector: { text: {} } },
         {
@@ -64,11 +64,6 @@ export class HuiViewEditor extends LitElement {
                 label: localize(
                   `ui.panel.lovelace.editor.edit_view.types.${type}`
                 ),
-                disabled:
-                  !isNew &&
-                  (currentType === SECTION_VIEW_LAYOUT
-                    ? type !== SECTION_VIEW_LAYOUT
-                    : type === SECTION_VIEW_LAYOUT),
               })),
             },
           },
@@ -95,16 +90,12 @@ export class HuiViewEditor extends LitElement {
       : this._config.type || DEFAULT_VIEW_LAYOUT;
   }
 
-  private get _isEmpty(): boolean {
-    return !this._config.sections?.length && !this._config.cards?.length;
-  }
-
   protected render() {
     if (!this.hass) {
       return nothing;
     }
 
-    const schema = this._schema(this.hass.localize, this._type, this._isEmpty);
+    const schema = this._schema(this.hass.localize);
 
     const data = {
       ...this._config,
@@ -168,15 +159,6 @@ export class HuiViewEditor extends LitElement {
         return this.hass.localize(
           "ui.panel.lovelace.editor.edit_view.subview_helper"
         );
-      case "type":
-        if (this._isEmpty) return undefined;
-        return this._type === "sections"
-          ? this.hass.localize(
-              "ui.panel.lovelace.editor.edit_view.type_helper_others"
-            )
-          : this.hass.localize(
-              "ui.panel.lovelace.editor.edit_view.type_helper_sections"
-            );
       default:
         return undefined;
     }

src/translations/en.json

@@ -5135,8 +5135,8 @@
               "select_users": "Select which users should see this view in the navigation"
             },
             "type": "View type",
-            "type_helper_sections": "You can not change your view to use the 'sections' view type because migration is not supported yet. Start from scratch with a new view if you want to experiment with the 'sections' view.",
+            "type_warning_sections": "You can not change your view to use the 'sections' view type because migration is not supported yet. Start from scratch with a new view if you want to experiment with the 'sections' view.",
-            "type_helper_others": "You can not change your view to an other type because migration is not supported yet. Start from scratch with a new view if you want to use another view type.",
+            "type_warning_others": "You can not change your view to an other type because migration is not supported yet. Start from scratch with a new view if you want to use another view type.",
 
             "types": {
               "masonry": "Masonry (default)",