Merge pull request #1532 from umbraco/chore/packages-marketplace-url

Chore: Packages Marketplace URL

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` <div id="container">
-			<iframe
-				src="${this.marketplaceUrl}"
-				title="Umbraco Marketplace"
-				allowfullscreen
-				allow="geolocation; autoplay; clipboard-write; encrypted-media">
-			</iframe>
-		</div>`;
+		if (!this._marketplaceUrl) return html`<div id="loader"><uui-loader></uui-loader></div>`;
+		return html`
+			<div id="container">
+				<iframe
+					src=${this._marketplaceUrl}
+					title="Umbraco Marketplace"
+					allowfullscreen
+					allow="geolocation; autoplay; clipboard-write; encrypted-media">
+				</iframe>
+			</div>
+		`;
 	}
 
 	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;

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

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>('UmbPackageStore');
 
@@ -15,6 +18,8 @@ export const UMB_PACKAGE_STORE_TOKEN = new UmbContextToken<UmbPackageStore>('Umb
  * @extends {UmbStoreBase}
  */
 export class UmbPackageStore extends UmbStoreBase {
+	#configuration = new UmbObjectState<PackageConfigurationResponseModel>({ marketplaceUrl: '' });
+
 	/**
 	 * Array of packages with extensions
 	 * @private
@@ -26,6 +31,8 @@ export class UmbPackageStore extends UmbStoreBase {
 
 	#migrations = new UmbArrayState<PackageMigrationStatusResponseModel>([], (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;

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