diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/market-place/packages-market-place-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/market-place/packages-market-place-section-view.element.ts index 0044f62611..48609ec264 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/market-place/packages-market-place-section-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package-section/views/market-place/packages-market-place-section-view.element.ts @@ -1,23 +1,44 @@ -import { css, html, customElement, property } from '@umbraco-cms/backoffice/external/lit'; +import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbPackageRepository } from '@umbraco-cms/backoffice/package'; import type { UmbSectionViewElement } from '@umbraco-cms/backoffice/extension-registry'; @customElement('umb-packages-market-place-section-view') export class UmbPackagesMarketPlaceSectionViewElement extends UmbLitElement implements UmbSectionViewElement { - // TODO: This URL comes from the server - // Was previously found in 'Umbraco.Sys.ServerVariables.umbracoUrls.marketplaceUrl' - @property() - marketplaceUrl = 'https://marketplace.umbraco.com/?umbversion=11.1.0&style=backoffice'; + @state() + private _marketplaceUrl?: string; + + #packageRepository = new UmbPackageRepository(this); + + constructor() { + super(); + + this.#getMarketplaceUrl(); + } + + async #getMarketplaceUrl() { + const configuration = await this.#packageRepository.configuration(); + this.observe( + configuration, + (configuration) => { + this._marketplaceUrl = configuration.marketplaceUrl; + }, + '_observeConfiguration', + ); + } render() { - return html`
- -
`; + if (!this._marketplaceUrl) return html`
`; + return html` +
+ +
+ `; } static styles = [ @@ -27,6 +48,13 @@ export class UmbPackagesMarketPlaceSectionViewElement extends UmbLitElement impl display: block; } + #loader { + height: 100%; + display: flex; + align-items: center; + justify-content: center; + } + #container { height: 100%; display: flex; diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.repository.ts index e0f05c7f75..be2d8772e3 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.repository.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.repository.ts @@ -1,11 +1,11 @@ -import type { UmbPackageStore } from './package.store.js'; import { UMB_PACKAGE_STORE_TOKEN } from './package.store.js'; import { UmbPackageServerDataSource } from './sources/package.server.data.js'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; -import type { UmbApi, ManifestBase } from '@umbraco-cms/backoffice/extension-api'; +import type { UmbPackageStore } from './package.store.js'; import { isManifestBaseType } from '@umbraco-cms/backoffice/extension-api'; import { OpenAPI } from '@umbraco-cms/backoffice/external/backend-api'; +import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; +import type { UmbApi, ManifestBase } from '@umbraco-cms/backoffice/extension-api'; /** * A repository for Packages which mimics a tree store. @@ -23,6 +23,7 @@ export class UmbPackageRepository extends UmbControllerBase implements UmbApi { this.#init = new Promise((res) => { this.consumeContext(UMB_PACKAGE_STORE_TOKEN, (instance) => { this.#packageStore = instance; + this.requestConfiguration(instance); this.requestRootItems(instance); this.requestPackageMigrations(instance); res(); @@ -30,6 +31,13 @@ export class UmbPackageRepository extends UmbControllerBase implements UmbApi { }); } + async requestConfiguration(store: UmbPackageStore) { + const { data } = await this.#packageSource.getPackageConfiguration(); + if (data) { + store.setConfiguration(data); + } + } + /** * Request the root items from the Data Source * @memberOf UmbPackageRepository @@ -91,6 +99,11 @@ export class UmbPackageRepository extends UmbControllerBase implements UmbApi { } } + async configuration() { + await this.#init; + return this.#packageStore!.configuration; + } + /** * Observable of root items * @memberOf UmbPackageRepository diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.store.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.store.ts index 01739bbcef..58190fe8b2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.store.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/package.store.ts @@ -1,11 +1,14 @@ import type { UmbPackage } from '../../types.js'; import { ReplaySubject } from '@umbraco-cms/backoffice/external/rxjs'; +import { UmbArrayState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api'; import { UmbContextToken } from '@umbraco-cms/backoffice/context-api'; -import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import { UmbStoreBase } from '@umbraco-cms/backoffice/store'; -import type { PackageMigrationStatusResponseModel } from '@umbraco-cms/backoffice/external/backend-api'; +import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; import type { ManifestBase } from '@umbraco-cms/backoffice/extension-api'; -import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api'; +import type { + PackageConfigurationResponseModel, + PackageMigrationStatusResponseModel, +} from '@umbraco-cms/backoffice/external/backend-api'; export const UMB_PACKAGE_STORE_TOKEN = new UmbContextToken('UmbPackageStore'); @@ -15,6 +18,8 @@ export const UMB_PACKAGE_STORE_TOKEN = new UmbContextToken('Umb * @extends {UmbStoreBase} */ export class UmbPackageStore extends UmbStoreBase { + #configuration = new UmbObjectState({ marketplaceUrl: '' }); + /** * Array of packages with extensions * @private @@ -26,6 +31,8 @@ export class UmbPackageStore extends UmbStoreBase { #migrations = new UmbArrayState([], (e) => e.packageName); + configuration = this.#configuration.asObservable(); + /** * Observable of packages with extensions */ @@ -63,6 +70,10 @@ export class UmbPackageStore extends UmbStoreBase { appendMigrations(migrations: PackageMigrationStatusResponseModel[]) { this.#migrations.append(migrations); } + + setConfiguration(configuration: PackageConfigurationResponseModel) { + this.#configuration.setValue(configuration); + } } export default UmbPackageStore; diff --git a/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/sources/package.server.data.ts b/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/sources/package.server.data.ts index d9422d71a9..b8cc78864e 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/sources/package.server.data.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/packages/package/repository/sources/package.server.data.ts @@ -1,6 +1,6 @@ +import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; import { PackageResource } from '@umbraco-cms/backoffice/external/backend-api'; import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api'; -import { tryExecuteAndNotify } from '@umbraco-cms/backoffice/resources'; /** * Data source for packages from the server @@ -17,6 +17,14 @@ export class UmbPackageServerDataSource { return tryExecuteAndNotify(this.host, PackageResource.getPackageManifest()); } + /** + * Get the package configuration from the server + * @memberof UmbPackageServerDataSource + */ + getPackageConfiguration() { + return tryExecuteAndNotify(this.host, PackageResource.getPackageConfiguration()); + } + /** * Get the package migrations from the server * @memberof UmbPackageServerDataSource