Make helper option button more user friendly (#12468)

src/panels/config/entities/entity-registry-settings.ts

@@ -356,6 +356,25 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               )}
             </ha-select>`
           : ""}
+        ${this._helperConfigEntry
+          ? html`
+              <div class="row">
+                <mwc-button
+                  @click=${this._showOptionsFlow}
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass.localize(
+                    "ui.dialogs.entity_registry.editor.configure_state",
+                    "integration",
+                    domainToName(
+                      this.hass.localize,
+                      this._helperConfigEntry.domain
+                    )
+                  )}
+                </mwc-button>
+              </div>
+            `
+          : ""}
         <ha-textfield
           error-message="Domain needs to stay the same"
           .value=${this._entityId}
@@ -373,20 +392,6 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
               @value-changed=${this._areaPicked}
             ></ha-area-picker>`
           : ""}
-        ${this._helperConfigEntry
-          ? html`
-              <div class="row">
-                <mwc-button
-                  @click=${this._showOptionsFlow}
-                  .disabled=${this._submitting}
-                >
-                  ${this.hass.localize(
-                    "ui.dialogs.entity_registry.editor.configure_state"
-                  )}
-                </mwc-button>
-              </div>
-            `
-          : ""}
 
         <ha-expansion-panel
           .header=${this.hass.localize(

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -79,9 +79,11 @@ class HaInputSelectForm extends LitElement {
             "ui.dialogs.helper_settings.generic.icon"
           )}
         ></ha-icon-picker>
-        ${this.hass!.localize(
+        <div class="header">
-          "ui.dialogs.helper_settings.input_select.options"
+          ${this.hass!.localize(
-        )}:
+            "ui.dialogs.helper_settings.input_select.options"
+          )}:
+        </div>
         ${this._options.length
           ? this._options.map(
               (option, index) => html`
@@ -206,6 +208,10 @@ class HaInputSelectForm extends LitElement {
         #option_input {
           margin-top: 8px;
         }
+        .header {
+          margin-top: 8px;
+          margin-bottom: 8px;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -858,7 +858,7 @@
           "area_note": "By default the entities of a device are in the same area as the device. If you change the area of this entity, it will no longer follow the area of the device.",
           "follow_device_area": "Follow device area",
           "change_device_area": "Change device area",
-          "configure_state": "Configure State"
+          "configure_state": "{integration} options"
         }
       },
       "helper_settings": {