mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Fix onboarding add integration (#16163)
This commit is contained in:
parent
b1f9469002
commit
e4302a0bb5
@ -9,6 +9,7 @@ import {
|
|||||||
PropertyValues,
|
PropertyValues,
|
||||||
} from "lit";
|
} from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
|
import { LocalizeFunc } from "../common/translations/localize";
|
||||||
import "../components/ha-alert";
|
import "../components/ha-alert";
|
||||||
import "../components/ha-checkbox";
|
import "../components/ha-checkbox";
|
||||||
import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
|
import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
|
||||||
@ -20,13 +21,12 @@ import {
|
|||||||
DataEntryFlowStep,
|
DataEntryFlowStep,
|
||||||
DataEntryFlowStepForm,
|
DataEntryFlowStepForm,
|
||||||
} from "../data/data_entry_flow";
|
} from "../data/data_entry_flow";
|
||||||
import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
|
|
||||||
import "./ha-password-manager-polyfill";
|
import "./ha-password-manager-polyfill";
|
||||||
|
|
||||||
type State = "loading" | "error" | "step";
|
type State = "loading" | "error" | "step";
|
||||||
|
|
||||||
@customElement("ha-auth-flow")
|
@customElement("ha-auth-flow")
|
||||||
export class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
|
export class HaAuthFlow extends LitElement {
|
||||||
@property({ attribute: false }) public authProvider?: AuthProvider;
|
@property({ attribute: false }) public authProvider?: AuthProvider;
|
||||||
|
|
||||||
@property() public clientId?: string;
|
@property() public clientId?: string;
|
||||||
@ -35,6 +35,8 @@ export class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
|
|||||||
|
|
||||||
@property() public oauth2State?: string;
|
@property() public oauth2State?: string;
|
||||||
|
|
||||||
|
@property() public localize!: LocalizeFunc;
|
||||||
|
|
||||||
@state() private _state: State = "loading";
|
@state() private _state: State = "loading";
|
||||||
|
|
||||||
@state() private _stepData?: Record<string, any>;
|
@state() private _stepData?: Record<string, any>;
|
||||||
|
@ -82,12 +82,13 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
|
|||||||
.redirectUri=${this.redirectUri}
|
.redirectUri=${this.redirectUri}
|
||||||
.oauth2State=${this.oauth2State}
|
.oauth2State=${this.oauth2State}
|
||||||
.authProvider=${this._authProvider}
|
.authProvider=${this._authProvider}
|
||||||
|
.localize=${this.localize}
|
||||||
></ha-auth-flow>
|
></ha-auth-flow>
|
||||||
|
|
||||||
${inactiveProviders.length > 0
|
${inactiveProviders.length > 0
|
||||||
? html`
|
? html`
|
||||||
<ha-pick-auth-provider
|
<ha-pick-auth-provider
|
||||||
.resources=${this.resources}
|
.localize=${this.localize}
|
||||||
.clientId=${this.clientId}
|
.clientId=${this.clientId}
|
||||||
.authProviders=${inactiveProviders}
|
.authProviders=${inactiveProviders}
|
||||||
@pick-auth-provider=${this._handleAuthProviderPick}
|
@pick-auth-provider=${this._handleAuthProviderPick}
|
||||||
|
@ -2,10 +2,10 @@ import "@material/mwc-list";
|
|||||||
import { css, html, LitElement } from "lit";
|
import { css, html, LitElement } from "lit";
|
||||||
import { customElement, property } from "lit/decorators";
|
import { customElement, property } from "lit/decorators";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
|
import { LocalizeFunc } from "../common/translations/localize";
|
||||||
import "../components/ha-icon-next";
|
import "../components/ha-icon-next";
|
||||||
import "../components/ha-list-item";
|
import "../components/ha-list-item";
|
||||||
import { AuthProvider } from "../data/auth";
|
import { AuthProvider } from "../data/auth";
|
||||||
import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
|
|
||||||
|
|
||||||
declare global {
|
declare global {
|
||||||
interface HASSDomEvents {
|
interface HASSDomEvents {
|
||||||
@ -14,9 +14,11 @@ declare global {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@customElement("ha-pick-auth-provider")
|
@customElement("ha-pick-auth-provider")
|
||||||
export class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
|
export class HaPickAuthProvider extends LitElement {
|
||||||
@property() public authProviders: AuthProvider[] = [];
|
@property() public authProviders: AuthProvider[] = [];
|
||||||
|
|
||||||
|
@property() public localize!: LocalizeFunc;
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
return html`
|
return html`
|
||||||
<p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
|
<p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
|
||||||
|
@ -1,20 +1,21 @@
|
|||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import { mdiCheck, mdiDotsHorizontal } from "@mdi/js";
|
import { mdiCheck, mdiDotsHorizontal } from "@mdi/js";
|
||||||
|
import { UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||||
import {
|
import {
|
||||||
css,
|
css,
|
||||||
CSSResultGroup,
|
CSSResultGroup,
|
||||||
html,
|
html,
|
||||||
LitElement,
|
LitElement,
|
||||||
|
nothing,
|
||||||
PropertyValues,
|
PropertyValues,
|
||||||
TemplateResult,
|
TemplateResult,
|
||||||
nothing,
|
|
||||||
} from "lit";
|
} from "lit";
|
||||||
import { customElement, property, state } from "lit/decorators";
|
import { customElement, property, state } from "lit/decorators";
|
||||||
import { isComponentLoaded } from "../common/config/is_component_loaded";
|
import { isComponentLoaded } from "../common/config/is_component_loaded";
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { stringCompare } from "../common/string/compare";
|
import { stringCompare } from "../common/string/compare";
|
||||||
import { LocalizeFunc } from "../common/translations/localize";
|
import { LocalizeFunc } from "../common/translations/localize";
|
||||||
import { ConfigEntry, getConfigEntries } from "../data/config_entries";
|
import { ConfigEntry, subscribeConfigEntries } from "../data/config_entries";
|
||||||
import {
|
import {
|
||||||
getConfigFlowInProgressCollection,
|
getConfigFlowInProgressCollection,
|
||||||
localizeConfigFlowTitle,
|
localizeConfigFlowTitle,
|
||||||
@ -27,6 +28,8 @@ import {
|
|||||||
loadConfigFlowDialog,
|
loadConfigFlowDialog,
|
||||||
showConfigFlowDialog,
|
showConfigFlowDialog,
|
||||||
} from "../dialogs/config-flow/show-dialog-config-flow";
|
} from "../dialogs/config-flow/show-dialog-config-flow";
|
||||||
|
import { SubscribeMixin } from "../mixins/subscribe-mixin";
|
||||||
|
import { showAddIntegrationDialog } from "../panels/config/integrations/show-add-integration-dialog";
|
||||||
import { HomeAssistant } from "../types";
|
import { HomeAssistant } from "../types";
|
||||||
import "./action-badge";
|
import "./action-badge";
|
||||||
import "./integration-badge";
|
import "./integration-badge";
|
||||||
@ -40,7 +43,7 @@ const HIDDEN_DOMAINS = new Set([
|
|||||||
]);
|
]);
|
||||||
|
|
||||||
@customElement("onboarding-integrations")
|
@customElement("onboarding-integrations")
|
||||||
class OnboardingIntegrations extends LitElement {
|
class OnboardingIntegrations extends SubscribeMixin(LitElement) {
|
||||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
@property() public onboardingLocalize!: LocalizeFunc;
|
@property() public onboardingLocalize!: LocalizeFunc;
|
||||||
@ -49,30 +52,56 @@ class OnboardingIntegrations extends LitElement {
|
|||||||
|
|
||||||
@state() private _discovered?: DataEntryFlowProgress[];
|
@state() private _discovered?: DataEntryFlowProgress[];
|
||||||
|
|
||||||
private _unsubEvents?: () => void;
|
public hassSubscribe(): Array<UnsubscribeFunc | Promise<UnsubscribeFunc>> {
|
||||||
|
return [
|
||||||
public connectedCallback() {
|
subscribeConfigFlowInProgress(this.hass, (flows) => {
|
||||||
super.connectedCallback();
|
this._discovered = flows;
|
||||||
this.hass.loadBackendTranslation("title", undefined, true);
|
const integrations: Set<string> = new Set();
|
||||||
this._unsubEvents = subscribeConfigFlowInProgress(this.hass, (flows) => {
|
for (const flow of flows) {
|
||||||
this._discovered = flows;
|
// To render title placeholders
|
||||||
const integrations: Set<string> = new Set();
|
if (flow.context.title_placeholders) {
|
||||||
for (const flow of flows) {
|
integrations.add(flow.handler);
|
||||||
// To render title placeholders
|
}
|
||||||
if (flow.context.title_placeholders) {
|
|
||||||
integrations.add(flow.handler);
|
|
||||||
}
|
}
|
||||||
}
|
this.hass.loadBackendTranslation("config", Array.from(integrations));
|
||||||
this.hass.loadBackendTranslation("config", Array.from(integrations));
|
}),
|
||||||
});
|
subscribeConfigEntries(
|
||||||
}
|
this.hass,
|
||||||
|
(messages) => {
|
||||||
public disconnectedCallback() {
|
let fullUpdate = false;
|
||||||
super.disconnectedCallback();
|
const newEntries: ConfigEntry[] = [];
|
||||||
if (this._unsubEvents) {
|
messages.forEach((message) => {
|
||||||
this._unsubEvents();
|
if (message.type === null || message.type === "added") {
|
||||||
this._unsubEvents = undefined;
|
if (HIDDEN_DOMAINS.has(message.entry.domain)) {
|
||||||
}
|
return;
|
||||||
|
}
|
||||||
|
newEntries.push(message.entry);
|
||||||
|
if (message.type === null) {
|
||||||
|
fullUpdate = true;
|
||||||
|
}
|
||||||
|
} else if (message.type === "removed") {
|
||||||
|
this._entries = this._entries!.filter(
|
||||||
|
(entry) => entry.entry_id !== message.entry.entry_id
|
||||||
|
);
|
||||||
|
} else if (message.type === "updated") {
|
||||||
|
if (HIDDEN_DOMAINS.has(message.entry.domain)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const newEntry = message.entry;
|
||||||
|
this._entries = this._entries!.map((entry) =>
|
||||||
|
entry.entry_id === newEntry.entry_id ? newEntry : entry
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (!newEntries.length && !fullUpdate) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const existingEntries = fullUpdate ? [] : this._entries;
|
||||||
|
this._entries = [...existingEntries!, ...newEntries];
|
||||||
|
},
|
||||||
|
{ type: ["device", "hub", "service"] }
|
||||||
|
),
|
||||||
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
protected render() {
|
protected render() {
|
||||||
@ -149,25 +178,19 @@ class OnboardingIntegrations extends LitElement {
|
|||||||
|
|
||||||
protected firstUpdated(changedProps: PropertyValues) {
|
protected firstUpdated(changedProps: PropertyValues) {
|
||||||
super.firstUpdated(changedProps);
|
super.firstUpdated(changedProps);
|
||||||
|
this.hass.loadBackendTranslation("title", undefined, true);
|
||||||
this._scanUSBDevices();
|
this._scanUSBDevices();
|
||||||
loadConfigFlowDialog();
|
loadConfigFlowDialog();
|
||||||
this._loadConfigEntries();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private _createFlow() {
|
private _createFlow() {
|
||||||
showConfigFlowDialog(this, {
|
showAddIntegrationDialog(this);
|
||||||
dialogClosedCallback: () => {
|
|
||||||
this._loadConfigEntries();
|
|
||||||
getConfigFlowInProgressCollection(this.hass!.connection).refresh();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private _continueFlow(ev) {
|
private _continueFlow(ev) {
|
||||||
showConfigFlowDialog(this, {
|
showConfigFlowDialog(this, {
|
||||||
continueFlowId: ev.currentTarget.flowId,
|
continueFlowId: ev.currentTarget.flowId,
|
||||||
dialogClosedCallback: () => {
|
dialogClosedCallback: () => {
|
||||||
this._loadConfigEntries();
|
|
||||||
getConfigFlowInProgressCollection(this.hass!.connection).refresh();
|
getConfigFlowInProgressCollection(this.hass!.connection).refresh();
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -180,18 +203,6 @@ class OnboardingIntegrations extends LitElement {
|
|||||||
await scanUSBDevices(this.hass);
|
await scanUSBDevices(this.hass);
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _loadConfigEntries() {
|
|
||||||
const entries = await getConfigEntries(this.hass!, {
|
|
||||||
type: ["device", "hub", "service"],
|
|
||||||
});
|
|
||||||
// We filter out the config entries that are automatically created during onboarding.
|
|
||||||
// It is one that we create automatically and it will confuse the user
|
|
||||||
// if it starts showing up during onboarding.
|
|
||||||
this._entries = entries.filter(
|
|
||||||
(entry) => !HIDDEN_DOMAINS.has(entry.domain)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async _finish() {
|
private async _finish() {
|
||||||
fireEvent(this, "onboarding-step", {
|
fireEvent(this, "onboarding-step", {
|
||||||
type: "integration",
|
type: "integration",
|
||||||
|
Loading…
x
Reference in New Issue
Block a user