Update add application credentials dialog (#13879)

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -1,8 +1,9 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
+import { mdiOpenInNew } from "@mdi/js";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-combo-box";
@@ -10,14 +11,15 @@ import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-markdown";
 import "../../../components/ha-textfield";
 import {
-  fetchApplicationCredentialsConfig,
-  createApplicationCredential,
-  ApplicationCredentialsConfig,
   ApplicationCredential,
+  ApplicationCredentialsConfig,
+  createApplicationCredential,
+  fetchApplicationCredentialsConfig,
 } from "../../../data/application_credential";
 import { domainToName } from "../../../data/integration";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { documentationUrl } from "../../../util/documentation-url";
 import { AddApplicationCredentialDialogParams } from "./show-dialog-add-application-credential";
 
 interface Domain {
@@ -98,6 +100,25 @@ export class DialogAddApplicationCredential extends LitElement {
       >
         <div>
           ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.description"
+            )}
+            <br />
+            <a
+              href=${documentationUrl(
+                this.hass!,
+                "/integrations/application_credentials"
+              )}
+              target="_blank"
+              rel="noreferrer"
+            >
+              ${this.hass!.localize(
+                "ui.panel.config.application_credentials.editor.view_documentation"
+              )}
+              <ha-svg-icon .path=${mdiOpenInNew}></ha-svg-icon>
+            </a>
+          </p>
           <ha-combo-box
             name="domain"
             .hass=${this.hass}
@@ -143,6 +164,10 @@ export class DialogAddApplicationCredential extends LitElement {
             @input=${this._handleValueChanged}
             error-message=${this.hass.localize("ui.common.error_required")}
             dialogInitialFocus
+            .helper=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.client_id_helper"
+            )}
+            helperPersistent
           ></ha-textfield>
           <ha-textfield
             .label=${this.hass.localize(
@@ -154,6 +179,10 @@ export class DialogAddApplicationCredential extends LitElement {
             required
             @input=${this._handleValueChanged}
             error-message=${this.hass.localize("ui.common.error_required")}
+            .helper=${this.hass.localize(
+              "ui.panel.config.application_credentials.editor.client_secret_helper"
+            )}
+            helperPersistent
           ></ha-textfield>
         </div>
         ${this._loading
@@ -163,15 +192,18 @@ export class DialogAddApplicationCredential extends LitElement {
               </div>
             `
           : html`
+              <mwc-button slot="primaryAction" @click=${this._abortDialog}>
+                ${this.hass.localize("ui.common.cancel")}
+              </mwc-button>
               <mwc-button
                 slot="primaryAction"
                 .disabled=${!this._domain ||
                 !this._clientId ||
                 !this._clientSecret}
-                @click=${this._createApplicationCredential}
+                @click=${this._addApplicationCredential}
               >
                 ${this.hass.localize(
-                  "ui.panel.config.application_credentials.editor.create"
+                  "ui.panel.config.application_credentials.editor.add"
                 )}
               </mwc-button>
             `}
@@ -213,7 +245,7 @@ export class DialogAddApplicationCredential extends LitElement {
     this.closeDialog();
   }
 
-  private async _createApplicationCredential(ev) {
+  private async _addApplicationCredential(ev) {
     ev.preventDefault();
     if (!this._domain || !this._clientId || !this._clientSecret) {
       return;
@@ -260,6 +292,12 @@ export class DialogAddApplicationCredential extends LitElement {
           display: block;
           margin-bottom: 24px;
         }
+        a {
+          text-decoration: none;
+        }
+        a ha-svg-icon {
+          --mdc-icon-size: 16px;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -3014,12 +3014,16 @@
           "caption": "Application Credentials",
           "description": "Manage the OAuth Application Credentials used by Integrations",
           "editor": {
-            "caption": "Add Application Credential",
-            "create": "Create",
+            "caption": "Add Credential",
+            "description": "OAuth is used to grant Home Assistant access to information on other websites without giving a passwords. This mechanism is used by companies such as Spotify, Google, Withings, Microsoft, and Twitter.",
+            "view_documentation": "View documentation",
+            "add": "Add",
             "domain": "Integration",
             "name": "Name",
             "client_id": "OAuth Client ID",
-            "client_secret": "OAuth Client Secret"
+            "client_id_helper": "Public identifier of the OAuth application",
+            "client_secret": "OAuth Client Secret",
+            "client_secret_helper": "Secret of the OAuth application"
           },
           "picker": {
             "add_application_credential": "Add Application Credential",