migrate UmbDataTypeStore to UmbContextAlias

src/Umbraco.Web.UI.Client/.storybook/preview.js

@@ -9,7 +9,7 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { setCustomElements } from '@storybook/web-components';
 
 import customElementManifests from '../custom-elements.json';
-import { UmbDataTypeStore } from '../src/backoffice/settings/data-types/data-type.store';
+import { STORE_ALIAS as dataTypeAlias, UmbDataTypeStore } from '../src/backoffice/settings/data-types/data-type.store';
 import { UmbDocumentTypeStore } from '../src/backoffice/documents/document-types/document-type.store';
 import { UmbIconStore } from '../src/core/stores/icon/icon.store';
 import { onUnhandledRequest } from '../src/core/mocks/browser';
@@ -51,7 +51,7 @@ customElements.define('umb-storybook', UmbStoryBookElement);
 const storybookProvider = (story) => html` <umb-storybook>${story()}</umb-storybook> `;
 
 const dataTypeStoreProvider = (story) => html`
-	<umb-context-provider key="umbDataTypeStore" .value=${new UmbDataTypeStore()}>${story()}</umb-context-provider>
+	<umb-context-provider key=${dataTypeAlias} .value=${new UmbDataTypeStore()}>${story()}</umb-context-provider>
 `;
 
 const documentTypeStoreProvider = (story) => html`

src/Umbraco.Web.UI.Client/src/backoffice/backoffice.element.ts

@@ -19,7 +19,7 @@ import { UmbDictionaryStore } from './translation/dictionary/dictionary.store';
 import { UmbDocumentBlueprintStore } from './documents/document-blueprints/document-blueprint.store';
 
 import { UmbSectionStore } from './shared/components/section/section.store';
-import { UmbDataTypeStore } from './settings/data-types/data-type.store';
+import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_ALIAS } from './settings/data-types/data-type.store';
 import { UmbLitElement } from '@umbraco-cms/element';
 
 // Domains
@@ -60,7 +60,7 @@ export class UmbBackofficeElement extends UmbLitElement {
 		this.provideContext(UMB_CURRENT_USER_STORE_CONTEXT_ALIAS, new UmbCurrentUserStore());
 		this.provideContext(UMB_DOCUMENT_STORE_CONTEXT_ALIAS, new UmbDocumentStore(this));
 		this.provideContext(UMB_MEDIA_STORE_CONTEXT_ALIAS, new UmbMediaStore(this));
-		this.provideContext('umbDataTypeStore', new UmbDataTypeStore(this));
+		this.provideContext(UMB_DATA_TYPE_STORE_CONTEXT_ALIAS, new UmbDataTypeStore(this));
 		this.provideContext('umbDocumentTypeStore', new UmbDocumentTypeStore(this));
 		this.provideContext('umbMediaTypeStore', new UmbMediaTypeStore(this));
 		this.provideContext('umbMemberTypeStore', new UmbMemberTypeStore(this));

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/data-type.store.ts

@@ -3,6 +3,7 @@ import { UmbDataStoreBase } from '../../../core/stores/store';
 import type { DataTypeDetails } from '@umbraco-cms/models';
 import { DataTypeResource, FolderTreeItem } from '@umbraco-cms/backend-api';
 import { tryExecuteAndNotify } from '@umbraco-cms/resources';
+import { UmbContextAlias } from '@umbraco-cms/context-api';
 
 const isDataTypeDetails = (dataType: DataTypeDetails | FolderTreeItem): dataType is DataTypeDetails => {
 	return (dataType as DataTypeDetails).data !== undefined;
@@ -124,3 +125,5 @@ export class UmbDataTypeStore extends UmbDataStoreBase<UmbDataTypeStoreItemType>
 		return this.items.pipe(map((items) => items.filter((item) => item.parentKey === key)));
 	}
 }
+
+export const UMB_DATA_TYPE_STORE_CONTEXT_ALIAS = new UmbContextAlias<UmbDataTypeStore>(STORE_ALIAS);

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/actions/delete/action-data-type-delete.element.ts

@@ -2,7 +2,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css';
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_ALIAS } from '../../../../../../core/modal';
-import { UmbDataTypeStore } from '../../../data-type.store';
+import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_ALIAS } from '../../../data-type.store';
 import UmbTreeItemActionElement from '../../../../../shared/components/tree/action/tree-item-action.element';
 
 @customElement('umb-tree-action-data-type-delete')
@@ -19,7 +19,7 @@ export default class UmbTreeActionDataTypeDeleteElement extends UmbTreeItemActio
 			this._modalService = modalService;
 		});
 
-		this.consumeContext('umbDataTypeStore', (dataTypeStore: UmbDataTypeStore) => {
+		this.consumeContext(UMB_DATA_TYPE_STORE_CONTEXT_ALIAS, (dataTypeStore) => {
 			this._dataTypeStore = dataTypeStore;
 		});
 	}

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/tree/manifests.ts

@@ -1,3 +1,4 @@
+import { STORE_ALIAS } from '../data-type.store';
 import type { ManifestTree, ManifestTreeItemAction } from '@umbraco-cms/models';
 
 const tree: ManifestTree = {
@@ -6,7 +7,7 @@ const tree: ManifestTree = {
 	name: 'Data Types Tree',
 	weight: 100,
 	meta: {
-		storeAlias: 'umbDataTypeStore',
+		storeAlias: STORE_ALIAS,
 	},
 };
 

src/Umbraco.Web.UI.Client/src/backoffice/settings/data-types/workspace/data-type-workspace.context.ts

@@ -1,5 +1,9 @@
 import { UmbWorkspaceContentContext } from '../../../shared/components/workspace/workspace-content/workspace-content.context';
-import type { UmbDataTypeStore, UmbDataTypeStoreItemType } from 'src/backoffice/settings/data-types/data-type.store';
+import {
+	UmbDataTypeStore,
+	UmbDataTypeStoreItemType,
+	UMB_DATA_TYPE_STORE_CONTEXT_ALIAS,
+} from 'src/backoffice/settings/data-types/data-type.store';
 import type { DataTypeDetails } from '@umbraco-cms/models';
 import { UmbControllerHostInterface } from '@umbraco-cms/controller';
 import { appendToFrozenArray } from '@umbraco-cms/observable-api';
@@ -21,16 +25,19 @@ export class UmbWorkspaceDataTypeContext extends UmbWorkspaceContentContext<
 	UmbDataTypeStore
 > {
 	constructor(host: UmbControllerHostInterface) {
-		super(host, DefaultDataTypeData, 'umbDataTypeStore', 'dataType');
+		super(host, DefaultDataTypeData, UMB_DATA_TYPE_STORE_CONTEXT_ALIAS.toString(), 'dataType');
 	}
 
 	public setPropertyValue(alias: string, value: unknown) {
-
 		// TODO: make sure to check that we have a details model? otherwise fail? 8This can be relevant if we use the same context for tree actions?
-		const entry = {alias: alias, value: value};
+		const entry = { alias: alias, value: value };
 
-		const newDataSet = appendToFrozenArray((this._data.getValue() as DataTypeDetails).data, entry, x => x.alias === alias);
+		const newDataSet = appendToFrozenArray(
+			(this._data.getValue() as DataTypeDetails).data,
+			entry,
+			(x) => x.alias === alias
+		);
 
-		this.update({data: newDataSet});
+		this.update({ data: newDataSet });
 	}
 }

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/content-property/content-property.element.ts

@@ -3,7 +3,7 @@ import { css, html } from 'lit';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { UmbDataTypeStore } from '../../../settings/data-types/data-type.store';
+import { UmbDataTypeStore, UMB_DATA_TYPE_STORE_CONTEXT_ALIAS } from '../../../settings/data-types/data-type.store';
 import type { ContentProperty, DataTypeDetails } from '@umbraco-cms/models';
 
 import '../workspace-property/workspace-property.element';
@@ -30,7 +30,7 @@ export class UmbContentPropertyElement extends UmbLitElement {
 	public set property(value: ContentProperty | undefined) {
 		const oldProperty = this._property;
 		this._property = value;
-		if(this._property?.dataTypeKey !== oldProperty?.dataTypeKey) {
+		if (this._property?.dataTypeKey !== oldProperty?.dataTypeKey) {
 			this._observeDataType(this._property?.dataTypeKey);
 		}
 	}
@@ -50,7 +50,7 @@ export class UmbContentPropertyElement extends UmbLitElement {
 	constructor() {
 		super();
 
-		this.consumeContext('umbDataTypeStore', (instance) => {
+		this.consumeContext(UMB_DATA_TYPE_STORE_CONTEXT_ALIAS, (instance) => {
 			this._dataTypeStore = instance;
 			this._observeDataType(this._property?.dataTypeKey);
 		});
@@ -60,14 +60,11 @@ export class UmbContentPropertyElement extends UmbLitElement {
 		if (!this._dataTypeStore) return;
 
 		this._dataTypeObserver?.destroy();
-		if(dataTypeKey) {
-			this._dataTypeObserver = this.observe(
-				this._dataTypeStore.getByKey(dataTypeKey),
-				(dataType) => {
-					this._dataTypeData = dataType?.data;
-					this._propertyEditorUIAlias = dataType?.propertyEditorUIAlias || undefined;
-				}
-			);
+		if (dataTypeKey) {
+			this._dataTypeObserver = this.observe(this._dataTypeStore.getByKey(dataTypeKey), (dataType) => {
+				this._dataTypeData = dataType?.data;
+				this._propertyEditorUIAlias = dataType?.propertyEditorUIAlias || undefined;
+			});
 		}
 	}