-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7a30195
commit 5e85697
Showing
39 changed files
with
630 additions
and
505 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
export * from "./src/AddProvider"; | ||
export * from "./src/add-provider"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import { | ||
AddProviderWorkflow, | ||
type FolderMetadata, | ||
type ProviderMetadata, | ||
} from "@echo/core-types"; | ||
import { Task } from "@lit/task"; | ||
import { LitElement, html } from "lit"; | ||
import { customElement, property } from "lit/decorators.js"; | ||
import { getOrCreateRuntime } from "@echo/services-bootstrap-runtime"; | ||
import type { ProviderLoadedEvent } from "./provider-loader"; | ||
import "@echo/components-provider-status"; | ||
import "./provider-loader"; | ||
import "./select-root"; | ||
|
||
type ProviderStatus = | ||
| { _tag: "LoadingProviders" } | ||
| { _tag: "ProvidersLoaded"; availableProviders: ProviderMetadata[] } | ||
| { _tag: "WaitingForRootFolderSelection"; folders: FolderMetadata[] } | ||
| { _tag: "ProviderStarted" }; | ||
|
||
/** | ||
* Component that displays a list of providers that can be added to the application | ||
* and allows the user to select one. | ||
*/ | ||
@customElement("add-provider") | ||
export class AddProvider extends LitElement { | ||
@property() | ||
private _providerStatus: ProviderStatus = { _tag: "LoadingProviders" }; | ||
|
||
// @ts-expect-error "Task executes automatically" | ||
private _availableProvidersTask = new Task(this, { | ||
task: () => | ||
getOrCreateRuntime() | ||
.runPromise(AddProviderWorkflow.availableProviders) | ||
.then((availableProviders) => { | ||
this._providerStatus = { | ||
_tag: "ProvidersLoaded", | ||
availableProviders, | ||
}; | ||
}), | ||
args: () => [], | ||
}); | ||
|
||
render() { | ||
return this._providerStatus._tag === "LoadingProviders" | ||
? html`<h1>Loading providers...</h1>` | ||
: this._providerStatus._tag === "ProvidersLoaded" | ||
? html`<provider-loader | ||
.availableProviders=${this._providerStatus.availableProviders} | ||
@provider-loaded=${this._onProviderLoaded} | ||
></provider-loader>` | ||
: this._providerStatus._tag === "WaitingForRootFolderSelection" | ||
? html`<select-root | ||
.availableFolders=${this._providerStatus.folders} | ||
@root-selected=${this._onRootSelected} | ||
></select-root>` | ||
: html`<provider-status></provider-status>`; | ||
} | ||
|
||
private _onProviderLoaded(event: ProviderLoadedEvent) { | ||
this._providerStatus = { | ||
_tag: "WaitingForRootFolderSelection", | ||
folders: event.availableFolders, | ||
}; | ||
} | ||
|
||
private _onRootSelected() { | ||
this._providerStatus = { | ||
_tag: "ProviderStarted", | ||
}; | ||
} | ||
} | ||
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
"add-provider": AddProvider; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,80 @@ | ||
import { | ||
AddProviderWorkflow, | ||
type FolderMetadata, | ||
type ProviderMetadata, | ||
} from "@echo/core-types"; | ||
import { getOrCreateRuntime } from "@echo/services-bootstrap-runtime"; | ||
import { Task } from "@lit/task"; | ||
import { LitElement, html } from "lit"; | ||
import { customElement, property } from "lit/decorators.js"; | ||
|
||
/** | ||
* Event that gets dispatched by the component when the provider has been loaded | ||
* and is awaiting root folder selection. | ||
*/ | ||
export class ProviderLoadedEvent extends Event { | ||
constructor(public availableFolders: FolderMetadata[]) { | ||
super("provider-loaded", { bubbles: true, composed: true }); | ||
} | ||
} | ||
|
||
/** | ||
* Component that displays a list of available providers and loads them upon selection. | ||
*/ | ||
@customElement("provider-loader") | ||
export class ProviderLoader extends LitElement { | ||
@property({ type: Array }) | ||
availableProviders: ProviderMetadata[] = []; | ||
|
||
private _loadProvider = new Task(this, { | ||
task: ([provider]: [ProviderMetadata]) => | ||
getOrCreateRuntime().runPromise( | ||
AddProviderWorkflow.loadProvider(provider), | ||
), | ||
autoRun: false, | ||
}); | ||
|
||
private _connectToProvider = new Task(this, { | ||
task: () => | ||
getOrCreateRuntime().runPromise(AddProviderWorkflow.connectToProvider()), | ||
autoRun: false, | ||
}); | ||
|
||
// @ts-expect-error "Task executes automatically" | ||
private _notifyProviderLoaded = new Task(this, { | ||
args: () => [this._connectToProvider.value], | ||
task: ([rootFolder]) => { | ||
if (rootFolder) { | ||
this.dispatchEvent(new ProviderLoadedEvent(rootFolder)); | ||
} | ||
}, | ||
}); | ||
|
||
render() { | ||
return this._connectToProvider.render({ | ||
initial: () => | ||
this._loadProvider.render({ | ||
initial: () => | ||
this.availableProviders.map( | ||
(provider) => html` | ||
<button @click=${() => this._loadProvider.run([provider])}> | ||
${provider.id} | ||
</button> | ||
`, | ||
), | ||
complete: (providerMetadata) => | ||
html`<button @click="${() => this._connectToProvider.run()}"> | ||
Connect to ${providerMetadata.id} | ||
</button>`, | ||
}), | ||
pending: () => html`<h1>Connecting...</h1>`, | ||
complete: () => html`<h1>Connected!</h1>`, | ||
}); | ||
} | ||
} | ||
|
||
declare global { | ||
interface HTMLElementTagNameMap { | ||
"provider-loader": ProviderLoader; | ||
} | ||
} |
Oops, something went wrong.