Make entry flow dialog modal (#4440)

* Make entry flow dialog modal

* Add close button

* Update dialog-data-entry-flow.ts

* Fix aria-label

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -11,6 +11,7 @@ import {
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-tooltip/paper-tooltip";
+import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-spinner/paper-spinner";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 
@@ -124,6 +125,7 @@ class DataEntryFlowDialog extends LitElement {
       <ha-paper-dialog
         with-backdrop
         opened
+        modal
         @opened-changed=${this._openedChanged}
       >
         ${this._loading || (this._step === null && this._handlers === undefined)
@@ -134,53 +136,62 @@ class DataEntryFlowDialog extends LitElement {
           ? // When we are going to next step, we render 1 round of empty
             // to reset the element.
             ""
-          : this._step === null
-          ? // Show handler picker
-            html`
-              <step-flow-pick-handler
-                .flowConfig=${this._params.flowConfig}
-                .hass=${this.hass}
-                .handlers=${this._handlers}
-                .showAdvanced=${this._params.showAdvanced}
-              ></step-flow-pick-handler>
-            `
-          : this._step.type === "form"
-          ? html`
-              <step-flow-form
-                .flowConfig=${this._params.flowConfig}
-                .step=${this._step}
-                .hass=${this.hass}
-              ></step-flow-form>
-            `
-          : this._step.type === "external"
-          ? html`
-              <step-flow-external
-                .flowConfig=${this._params.flowConfig}
-                .step=${this._step}
-                .hass=${this.hass}
-              ></step-flow-external>
-            `
-          : this._step.type === "abort"
-          ? html`
-              <step-flow-abort
-                .flowConfig=${this._params.flowConfig}
-                .step=${this._step}
-                .hass=${this.hass}
-              ></step-flow-abort>
-            `
-          : this._devices === undefined || this._areas === undefined
-          ? // When it's a create entry result, we will fetch device & area registry
-            html`
-              <step-flow-loading></step-flow-loading>
-            `
           : html`
-              <step-flow-create-entry
-                .flowConfig=${this._params.flowConfig}
-                .step=${this._step}
-                .hass=${this.hass}
-                .devices=${this._devices}
-                .areas=${this._areas}
-              ></step-flow-create-entry>
+              <paper-icon-button
+                aria-label=${this.hass.localize(
+                  "ui.panel.config.integrations.config_flow.dismiss"
+                )}
+                icon="hass:close"
+                dialog-dismiss
+              ></paper-icon-button>
+              ${this._step === null
+                ? // Show handler picker
+                  html`
+                    <step-flow-pick-handler
+                      .flowConfig=${this._params.flowConfig}
+                      .hass=${this.hass}
+                      .handlers=${this._handlers}
+                      .showAdvanced=${this._params.showAdvanced}
+                    ></step-flow-pick-handler>
+                  `
+                : this._step.type === "form"
+                ? html`
+                    <step-flow-form
+                      .flowConfig=${this._params.flowConfig}
+                      .step=${this._step}
+                      .hass=${this.hass}
+                    ></step-flow-form>
+                  `
+                : this._step.type === "external"
+                ? html`
+                    <step-flow-external
+                      .flowConfig=${this._params.flowConfig}
+                      .step=${this._step}
+                      .hass=${this.hass}
+                    ></step-flow-external>
+                  `
+                : this._step.type === "abort"
+                ? html`
+                    <step-flow-abort
+                      .flowConfig=${this._params.flowConfig}
+                      .step=${this._step}
+                      .hass=${this.hass}
+                    ></step-flow-abort>
+                  `
+                : this._devices === undefined || this._areas === undefined
+                ? // When it's a create entry result, we will fetch device & area registry
+                  html`
+                    <step-flow-loading></step-flow-loading>
+                  `
+                : html`
+                    <step-flow-create-entry
+                      .flowConfig=${this._params.flowConfig}
+                      .step=${this._step}
+                      .hass=${this.hass}
+                      .devices=${this._devices}
+                      .areas=${this._areas}
+                    ></step-flow-create-entry>
+                  `}
             `}
       </ha-paper-dialog>
     `;
@@ -318,6 +329,12 @@ class DataEntryFlowDialog extends LitElement {
           display: block;
           padding: 0;
         }
+        paper-icon-button {
+          display: inline-block;
+          padding: 8px;
+          margin: 16px 16px 0 0;
+          float: right;
+        }
       `,
     ];
   }

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -19,6 +19,7 @@ import "../../components/ha-icon-next";
 import "../../common/search/search-input";
 import { styleMap } from "lit-html/directives/style-map";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
+import { configFlowContentStyles } from "./styles";
 
 interface HandlerObj {
   name: string;
@@ -133,28 +134,27 @@ class StepFlowPickHandler extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
-    return css`
-      h2 {
-        margin-bottom: 2px;
-        padding-left: 16px;
-      }
-      div {
-        overflow: auto;
-        max-height: 600px;
-      }
-      paper-item {
-        cursor: pointer;
-      }
-      p {
-        text-align: center;
-        padding: 16px;
-        margin: 0;
-      }
-      p > a {
-        color: var(--primary-color);
-      }
-    `;
+  static get styles(): CSSResult[] {
+    return [
+      configFlowContentStyles,
+      css`
+        div {
+          overflow: auto;
+          max-height: 600px;
+        }
+        paper-item {
+          cursor: pointer;
+        }
+        p {
+          text-align: center;
+          padding: 16px;
+          margin: 0;
+        }
+        p > a {
+          color: var(--primary-color);
+        }
+      `,
+    ];
   }
 }
 

src/translations/en.json

@@ -1373,6 +1373,7 @@
           "config_flow": {
             "aborted": "Aborted",
             "close": "Close",
+            "dismiss": "Dismiss dialog",
             "finish": "Finish",
             "submit": "Submit",
             "not_all_required_fields": "Not all required fields are filled in.",