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