Only save non system generated users and tweak text (#5131)

* Only save non system generated users and tweak text

* Clean up

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

@@ -362,6 +362,9 @@ export class HuiEditView extends LitElement {
         paper-spinner[active] {
           display: block;
         }
+        paper-dialog-scrollable {
+          margin-top: 0;
+        }
         .hidden {
           display: none;
         }

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

@@ -8,11 +8,11 @@ import {
   CSSResult,
   css,
 } from "lit-element";
-import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
 
 import { HomeAssistant } from "../../../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { configElementStyle } from "../config-elements/config-elements-style";
 import { LovelaceViewConfig, ShowViewConfig } from "../../../../data/lovelace";
 
 import { fetchUsers, User } from "../../../../data/user";
@@ -42,16 +42,14 @@ export class HuiViewVisibilityEditor extends LitElement {
   @property() private _visible!: boolean | ShowViewConfig[];
 
   private _sortedUsers = memoizeOne((users: User[]) => {
-    return users
-      .filter((user) => !user.system_generated)
-      .sort((a, b) => compare(a.name, b.name));
+    return users.sort((a, b) => compare(a.name, b.name));
   });
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
     fetchUsers(this.hass).then((users) => {
-      this._users = users;
+      this._users = users.filter((user) => !user.system_generated);
       fireEvent(this, "iron-resize");
     });
   }
@@ -62,24 +60,23 @@ export class HuiViewVisibilityEditor extends LitElement {
     }
 
     return html`
-      ${configElementStyle}
-      <div class="card-config">
-        <span>Select which users should have access to this view</span>
-
-        ${this._sortedUsers(this._users).map(
-          (user) => html`
-            <div class="flex">
-              <div>${user.name}</div>
-              <ha-switch
-                .userId="${user.id}"
-                @change=${this.valChange}
-                .checked=${this.checkUser(user.id)}
-                >&nbsp;</ha-switch
-              >
-            </div>
-          `
+      <p>
+        ${this.hass.localize(
+          "ui.panel.lovelace.editor.edit_view.visibility.select_users"
         )}
-      </div>
+      </p>
+      ${this._sortedUsers(this._users).map(
+        (user) => html`
+          <paper-item>
+            <paper-item-body>${user.name}</paper-item-body>
+            <ha-switch
+              .userId="${user.id}"
+              @change=${this.valChange}
+              .checked=${this.checkUser(user.id)}
+            ></ha-switch>
+          </paper-item>
+        `
+      )}
     `;
   }
 
@@ -133,13 +130,8 @@ export class HuiViewVisibilityEditor extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      .flex {
-        flex: 1;
-        margin-left: 16px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        min-width: 0;
+      :host {
+        display: block;
       }
     `;
   }

src/translations/en.json

@@ -1929,7 +1929,10 @@
             "move_right": "Move view right",
             "tab_settings": "Settings",
             "tab_badges": "Badges",
-            "tab_visibility": "Visibility"
+            "tab_visibility": "Visibility",
+            "visibility": {
+              "select_users": "Select which users should see this view in the navigation"
+            }
           },
           "edit_card": {
             "header": "Card Configuration",