Disable the ability to change the view type to sections and the other way around (#19902)

* Disable the ability to change the view type to sections and the other way around

* Update src/translations/en.json

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/translations/en.json

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

* Update src/translations/en.json

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

---------

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/components/ha-formfield.ts

@@ -1,11 +1,13 @@
 import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
 import { styles } from "@material/mwc-formfield/mwc-formfield.css";
 import { css } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("ha-formfield")
 export class HaFormfield extends FormfieldBase {
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
   protected _labelClick() {
     const input = this.input as HTMLInputElement | undefined;
     if (!input) return;
@@ -44,6 +46,9 @@ export class HaFormfield extends FormfieldBase {
         padding-inline-start: 4px;
         padding-inline-end: 0;
       }
+      :host([disabled]) label {
+        color: var(--disabled-text-color);
+      }
     `,
   ];
 }

src/components/ha-selector/ha-selector-select.ts

@@ -102,7 +102,10 @@ export class HaSelectSelector extends LitElement {
             ${this.label}
             ${options.map(
               (item: SelectOption) => html`
-                <ha-formfield .label=${item.label}>
+                <ha-formfield
+                  .label=${item.label}
+                  .disabled=${item.disabled || this.disabled}
+                >
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}

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

@@ -5,7 +5,10 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-form/ha-form";
-import type { SchemaUnion } from "../../../../components/ha-form/types";
+import type {
+  HaFormSchema,
+  SchemaUnion,
+} from "../../../../components/ha-form/types";
 import { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import {
@@ -34,7 +37,7 @@ export class HuiViewEditor extends LitElement {
   private _suggestedPath = false;
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc) =>
+    (localize: LocalizeFunc, currentType: string, isNew: boolean) =>
       [
         { name: "title", selector: { text: {} } },
         {
@@ -61,6 +64,11 @@ 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),
               })),
             },
           },
@@ -71,7 +79,7 @@ export class HuiViewEditor extends LitElement {
             boolean: {},
           },
         },
-      ] as const
+      ] as const satisfies HaFormSchema[]
   );
 
   set config(config: LovelaceViewConfig) {
@@ -92,7 +100,7 @@ export class HuiViewEditor extends LitElement {
       return nothing;
     }
 
-    const schema = this._schema(this.hass.localize);
+    const schema = this._schema(this.hass.localize, this._type, this.isNew);
 
     const data = {
       ...this._config,
@@ -156,6 +164,15 @@ export class HuiViewEditor extends LitElement {
         return this.hass.localize(
           "ui.panel.lovelace.editor.edit_view.subview_helper"
         );
+      case "type":
+        if (this.isNew) 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

@@ -5101,6 +5101,9 @@
               "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_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.",
+
             "types": {
               "masonry": "Masonry (default)",
               "sidebar": "Sidebar",