Use sections view when creating a new view (#22382)

* Use sections view when creating a new view

* Improve default

* Update src/panels/lovelace/views/default-section.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

* Update src/panels/lovelace/views/get-view-type.ts

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

---------

Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>

src/panels/lovelace/components/hui-card-options.ts

@@ -52,7 +52,7 @@ import {
 } from "../editor/lovelace-path";
 import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
 import { Lovelace, LovelaceCard } from "../types";
-import { SECTION_VIEW_LAYOUT } from "../views/const";
+import { SECTIONS_VIEW_LAYOUT } from "../views/const";
 
 @customElement("hui-card-options")
 export class HuiCardOptions extends LitElement {
@@ -355,7 +355,7 @@ export class HuiCardOptions extends LitElement {
       viewSelectedCallback: async (urlPath, selectedDashConfig, viewIndex) => {
         const view = selectedDashConfig.views[viewIndex];
 
-        if (!isStrategyView(view) && view.type === SECTION_VIEW_LAYOUT) {
+        if (!isStrategyView(view) && view.type === SECTIONS_VIEW_LAYOUT) {
           showAlertDialog(this, {
             title: this.hass!.localize(
               "ui.panel.lovelace.editor.move_card.error_title"

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

@@ -1,5 +1,7 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
 import { mdiCheck, mdiClose, mdiDotsVertical } from "@mdi/js";
 import {
   CSSResultGroup,
@@ -32,19 +34,15 @@ import {
 import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import "../../components/hui-entity-editor";
-import {
+import { SECTIONS_VIEW_LAYOUT } from "../../views/const";
-  DEFAULT_VIEW_LAYOUT,
+import { generateDefaultSection } from "../../views/default-section";
-  PANEL_VIEW_LAYOUT,
+import { getViewType } from "../../views/get-view-type";
-  SECTION_VIEW_LAYOUT,
-} from "../../views/const";
 import { addView, deleteView, replaceView } from "../config-util";
 import { ViewEditEvent, ViewVisibilityChangeEvent } from "../types";
-import "./hui-view-editor";
 import "./hui-view-background-editor";
+import "./hui-view-editor";
 import "./hui-view-visibility-editor";
 import { EditViewDialogParams } from "./show-edit-view-dialog";
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
 
 const TABS = ["tab-settings", "tab-background", "tab-visibility"] as const;
 
@@ -67,12 +65,7 @@ export class HuiDialogEditView extends LitElement {
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
   get _type(): string {
-    if (!this._config) {
+    return getViewType(this._config!);
-      return DEFAULT_VIEW_LAYOUT;
-    }
-    return this._config.panel
-      ? PANEL_VIEW_LAYOUT
-      : this._config.type || DEFAULT_VIEW_LAYOUT;
   }
 
   protected updated(changedProperties: PropertyValues) {
@@ -88,7 +81,10 @@ export class HuiDialogEditView extends LitElement {
     this._params = params;
 
     if (this._params.viewIndex === undefined) {
-      this._config = {};
+      this._config = {
+        type: SECTIONS_VIEW_LAYOUT,
+        sections: [generateDefaultSection(this.hass!.localize)],
+      };
       this._dirty = false;
       return;
     }
@@ -171,10 +167,10 @@ export class HuiDialogEditView extends LitElement {
     }
 
     const isCompatibleViewType =
-      this._config?.type === SECTION_VIEW_LAYOUT
+      this._config?.type === SECTIONS_VIEW_LAYOUT
-        ? this._config?.type === SECTION_VIEW_LAYOUT &&
+        ? this._config?.type === SECTIONS_VIEW_LAYOUT &&
           !this._config?.cards?.length
-        : this._config?.type !== SECTION_VIEW_LAYOUT &&
+        : this._config?.type !== SECTIONS_VIEW_LAYOUT &&
           !this._config?.sections?.length;
 
     return html`
@@ -238,7 +234,7 @@ export class HuiDialogEditView extends LitElement {
           ${!isCompatibleViewType
             ? html`
                 <ha-alert class="incompatible" alert-type="warning">
-                  ${this._config?.type === SECTION_VIEW_LAYOUT
+                  ${this._config?.type === SECTIONS_VIEW_LAYOUT
                     ? this.hass!.localize(
                         "ui.panel.lovelace.editor.edit_view.type_warning_sections"
                       )
@@ -378,20 +374,8 @@ export class HuiDialogEditView extends LitElement {
       ...this._config,
     };
 
-    if (viewConf.type === SECTION_VIEW_LAYOUT && !viewConf.sections?.length) {
+    if (viewConf.type === SECTIONS_VIEW_LAYOUT && !viewConf.sections?.length) {
-      viewConf.sections = [
+      viewConf.sections = [generateDefaultSection(this.hass!.localize)];
-        {
-          type: "grid",
-          cards: [
-            {
-              type: "heading",
-              heading: this.hass!.localize(
-                "ui.panel.lovelace.editor.section.default_section_title"
-              ),
-            },
-          ],
-        },
-      ];
     } else if (!viewConf.cards?.length) {
       viewConf.cards = [];
     }

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

@@ -12,11 +12,12 @@ import type {
 import { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import {
-  DEFAULT_VIEW_LAYOUT,
+  MASONRY_VIEW_LAYOUT,
-  SECTION_VIEW_LAYOUT,
+  SECTIONS_VIEW_LAYOUT,
   PANEL_VIEW_LAYOUT,
   SIDEBAR_VIEW_LAYOUT,
 } from "../../views/const";
+import { getViewType } from "../../views/get-view-type";
 
 declare global {
   interface HASSDomEvents {
@@ -60,10 +61,10 @@ export class HuiViewEditor extends LitElement {
             select: {
               options: (
                 [
-                  DEFAULT_VIEW_LAYOUT,
+                  SECTIONS_VIEW_LAYOUT,
                   SIDEBAR_VIEW_LAYOUT,
                   PANEL_VIEW_LAYOUT,
-                  SECTION_VIEW_LAYOUT,
+                  MASONRY_VIEW_LAYOUT,
                 ] as const
               ).map((type) => ({
                 value: type,
@@ -74,7 +75,7 @@ export class HuiViewEditor extends LitElement {
             },
           },
         },
-        ...(viewType === SECTION_VIEW_LAYOUT
+        ...(viewType === SECTIONS_VIEW_LAYOUT
           ? ([
               {
                 name: "section_specifics",
@@ -111,12 +112,7 @@ export class HuiViewEditor extends LitElement {
   }
 
   get _type(): string {
-    if (!this._config) {
+    return getViewType(this._config);
-      return DEFAULT_VIEW_LAYOUT;
-    }
-    return this._config.panel
-      ? PANEL_VIEW_LAYOUT
-      : this._config.type || DEFAULT_VIEW_LAYOUT;
   }
 
   protected render() {
@@ -131,7 +127,7 @@ export class HuiViewEditor extends LitElement {
       type: this._type,
     };
 
-    if (data.max_columns === undefined && this._type === SECTION_VIEW_LAYOUT) {
+    if (data.max_columns === undefined && this._type === SECTIONS_VIEW_LAYOUT) {
       data.max_columns = 4;
     }
 
@@ -150,12 +146,9 @@ export class HuiViewEditor extends LitElement {
   private _valueChanged(ev: CustomEvent): void {
     const config = ev.detail.value as LovelaceViewConfig;
 
-    if (config.type === DEFAULT_VIEW_LAYOUT) {
+    if (config.type !== SECTIONS_VIEW_LAYOUT) {
-      delete config.type;
-    }
-
-    if (config.type !== SECTION_VIEW_LAYOUT) {
       delete config.max_columns;
+      delete config.dense_section_placement;
     }
 
     if (

src/panels/lovelace/views/const.ts

@@ -1,4 +1,11 @@
-export const DEFAULT_VIEW_LAYOUT = "masonry";
+export const MASONRY_VIEW_LAYOUT = "masonry";
 export const PANEL_VIEW_LAYOUT = "panel";
 export const SIDEBAR_VIEW_LAYOUT = "sidebar";
-export const SECTION_VIEW_LAYOUT = "sections";
+export const SECTIONS_VIEW_LAYOUT = "sections";
+
+export const CARD_LAYOUTS = [
+  MASONRY_VIEW_LAYOUT,
+  PANEL_VIEW_LAYOUT,
+  SIDEBAR_VIEW_LAYOUT,
+];
+export const SECTION_VIEW_LAYOUTS = [SECTIONS_VIEW_LAYOUT];

src/panels/lovelace/views/default-section.ts

@@ -0,0 +1,13 @@
+import type { LocalizeFunc } from "../../../common/translations/localize";
+
+export const generateDefaultSection = (localize: LocalizeFunc) => ({
+  type: "grid",
+  cards: [
+    {
+      type: "heading",
+      heading: localize(
+        "ui.panel.lovelace.editor.section.default_section_title"
+      ),
+    },
+  ],
+});

src/panels/lovelace/views/get-view-type.ts

@@ -0,0 +1,22 @@
+import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
+import {
+  MASONRY_VIEW_LAYOUT,
+  PANEL_VIEW_LAYOUT,
+  SECTIONS_VIEW_LAYOUT,
+} from "./const";
+
+export const getViewType = (config?: LovelaceViewConfig): string => {
+  if (config?.type) {
+    return config.type;
+  }
+  if (config?.panel) {
+    return PANEL_VIEW_LAYOUT;
+  }
+  if (config?.sections) {
+    return SECTIONS_VIEW_LAYOUT;
+  }
+  if (config?.cards) {
+    return MASONRY_VIEW_LAYOUT;
+  }
+  return SECTIONS_VIEW_LAYOUT;
+};

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

@@ -21,6 +21,7 @@ import type { HuiBadge } from "../badges/hui-badge";
 import "../cards/hui-card";
 import type { HuiCard } from "../cards/hui-card";
 import { createViewElement } from "../create-element/create-view-element";
+import { showCreateBadgeDialog } from "../editor/badge-editor/show-create-badge-dialog";
 import { showEditBadgeDialog } from "../editor/badge-editor/show-edit-badge-dialog";
 import { showCreateCardDialog } from "../editor/card-editor/show-create-card-dialog";
 import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
@@ -35,8 +36,7 @@ import "../sections/hui-section";
 import type { HuiSection } from "../sections/hui-section";
 import { generateLovelaceViewStrategy } from "../strategies/get-strategy";
 import type { Lovelace } from "../types";
-import { DEFAULT_VIEW_LAYOUT, PANEL_VIEW_LAYOUT } from "./const";
+import { getViewType } from "./get-view-type";
-import { showCreateBadgeDialog } from "../editor/badge-editor/show-create-badge-dialog";
 
 declare global {
   // for fire event
@@ -267,9 +267,7 @@ export class HUIView extends ReactiveElement {
 
     viewConfig = {
       ...viewConfig,
-      type: viewConfig.panel
+      type: getViewType(viewConfig),
-        ? PANEL_VIEW_LAYOUT
-        : viewConfig.type || DEFAULT_VIEW_LAYOUT,
     };
 
     // Create a new layout element if necessary.

src/translations/en.json

@@ -5602,10 +5602,10 @@
             "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_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)",
+              "masonry": "Masonry",
               "sidebar": "Sidebar",
               "panel": "Panel (1 card)",
-              "sections": "Sections (experimental)"
+              "sections": "Sections"
             },
             "subview": "Subview",
             "max_columns": "Max number of sections wide",