diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/actions/editor-action-data-type-save.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/actions/editor-action-data-type-save.element.ts
new file mode 100644
index 0000000000..24fb3fc8e2
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/actions/editor-action-data-type-save.element.ts
@@ -0,0 +1,63 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import type { UUIButtonState } from '@umbraco-ui/uui';
+import type { UmbNotificationDefaultData } from '../../../../core/services/notification/layouts/default';
+import type { UmbNotificationService } from '../../../../core/services/notification';
+import { UmbDataTypeContext } from '../data-type.context';
+import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { UmbDataTypeStore } from 'src/core/stores/data-type/data-type.store';
+
+@customElement('umb-editor-action-data-type-save')
+export class UmbEditorActionDataTypeSaveElement extends UmbContextConsumerMixin(LitElement) {
+ static styles = [UUITextStyles, css``];
+
+ @state()
+ private _saveButtonState?: UUIButtonState;
+
+ private _dataTypeStore?: UmbDataTypeStore;
+ private _dataTypeContext?: UmbDataTypeContext;
+ private _notificationService?: UmbNotificationService;
+
+ constructor() {
+ super();
+
+ this.consumeAllContexts(['umbDataTypeStore', 'umbDataTypeContext', 'umbNotificationService'], (instances) => {
+ this._dataTypeStore = instances['umbDataTypeStore'];
+ this._dataTypeContext = instances['umbDataTypeContext'];
+ this._notificationService = instances['umbNotificationService'];
+ });
+ }
+
+ private async _handleSave() {
+ if (!this._dataTypeStore || !this._dataTypeContext) return;
+
+ try {
+ this._saveButtonState = 'waiting';
+ const dataType = this._dataTypeContext.getData();
+ await this._dataTypeStore.save([dataType]);
+ const data: UmbNotificationDefaultData = { message: 'Data Type Saved' };
+ this._notificationService?.peek('positive', { data });
+ this._saveButtonState = 'success';
+ } catch (error) {
+ this._saveButtonState = 'failed';
+ }
+ }
+
+ render() {
+ return html``;
+ }
+}
+
+export default UmbEditorActionDataTypeSaveElement;
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-editor-action-data-type-save': UmbEditorActionDataTypeSaveElement;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
index 0e3631fbe0..8b50b4d26c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/editors/data-type/editor-data-type.element.ts
@@ -1,14 +1,13 @@
-import { UUIButtonState, UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
+import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { css, html, LitElement } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
-import { UmbNotificationService } from '../../../core/services/notification';
import { UmbDataTypeStore } from '../../../core/stores/data-type/data-type.store';
-import { UmbNotificationDefaultData } from '../../../core/services/notification/layouts/default';
import type { DataTypeDetails } from '../../../core/mocks/data/data-type.data';
import { UmbDataTypeContext } from './data-type.context';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { UmbContextProviderMixin, UmbContextConsumerMixin } from '@umbraco-cms/context-api';
+import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import '../shared/editor-entity-layout/editor-entity-layout.element';
@@ -41,25 +40,67 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(
@state()
private _dataTypeName = '';
- @state()
- private _saveButtonState?: UUIButtonState;
-
private _dataTypeContext?: UmbDataTypeContext;
private _dataTypeStore?: UmbDataTypeStore;
- private _notificationService?: UmbNotificationService;
constructor() {
super();
- this.consumeAllContexts(['umbDataTypeStore', 'umbNotificationService'], (instances) => {
+ this._registerExtensions();
+
+ this.consumeAllContexts(['umbDataTypeStore'], (instances) => {
this._dataTypeStore = instances['umbDataTypeStore'];
- this._notificationService = instances['umbNotificationService'];
this._observeDataType();
});
this.addEventListener('property-value-change', this._onPropertyValueChange);
}
+ private _registerExtensions() {
+ const extensions: Array = [
+ {
+ type: 'editorView',
+ alias: 'Umb.EditorView.DataType.Edit',
+ name: 'Data Type Editor Edit View',
+ loader: () => import('./views/edit/editor-view-data-type-edit.element'),
+ weight: 90,
+ meta: {
+ editors: ['Umb.Editor.DataType'],
+ label: 'Edit',
+ pathname: 'edit',
+ icon: 'edit',
+ },
+ },
+ {
+ type: 'editorView',
+ alias: 'Umb.EditorView.DataType.Info',
+ name: 'Data Type Editor Info View',
+ loader: () => import('./views/info/editor-view-data-type-info.element'),
+ weight: 90,
+ meta: {
+ editors: ['Umb.Editor.DataType'],
+ label: 'Info',
+ pathname: 'info',
+ icon: 'info',
+ },
+ },
+ {
+ type: 'editorAction',
+ alias: 'Umb.EditorAction.DataType.Save',
+ name: 'Save Data Type Editor Action',
+ loader: () => import('./actions/editor-action-data-type-save.element'),
+ meta: {
+ editors: ['Umb.Editor.DataType'],
+ },
+ },
+ ];
+
+ extensions.forEach((extension) => {
+ if (umbExtensionsRegistry.isRegistered(extension.alias)) return;
+ umbExtensionsRegistry.register(extension);
+ });
+ }
+
private _observeDataType() {
if (!this._dataTypeStore) return;
@@ -86,22 +127,6 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(
this._dataTypeContext?.setPropertyValue(target?.alias, target?.value);
};
- private async _onSave() {
- // TODO: What if store is not present, what if node is not loaded....
- if (!this._dataTypeStore || !this._dataTypeContext) return;
-
- try {
- this._saveButtonState = 'waiting';
- const dataType = this._dataTypeContext.getData();
- await this._dataTypeStore.save([dataType]);
- const data: UmbNotificationDefaultData = { message: 'Data Type Saved' };
- this._notificationService?.peek('positive', { data });
- this._saveButtonState = 'success';
- } catch (error) {
- this._saveButtonState = 'failed';
- }
- }
-
// TODO. find a way where we don't have to do this for all editors.
private _handleInput(event: UUIInputEvent) {
if (event instanceof UUIInputEvent) {
@@ -117,15 +142,6 @@ export class UmbEditorDataTypeElement extends UmbContextProviderMixin(
return html`
-
-
-
-
`;
}
diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
index ce97628fbe..48274100a5 100644
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests/index.ts
@@ -209,36 +209,6 @@ export const internalManifests: Array Promise import('../backoffice/editors/data-type/views/edit/editor-view-data-type-edit.element'),
- weight: 90,
- meta: {
- // TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
- // this is a temp solution
- editors: ['Umb.Editor.DataType'],
- label: 'Edit',
- pathname: 'edit',
- icon: 'edit',
- },
- },
- {
- type: 'editorView',
- alias: 'Umb.EditorView.DataType.Info',
- name: 'Data Type Editor Info View',
- loader: () => import('../backoffice/editors/data-type/views/info/editor-view-data-type-info.element'),
- weight: 90,
- meta: {
- // TODO: how do we want to filter where editor views are shown? https://our.umbraco.com/documentation/extending/Content-Apps/#setting-up-the-plugin
- // this is a temp solution
- editors: ['Umb.Editor.DataType'],
- label: 'Info',
- pathname: 'info',
- icon: 'info',
- },
- },
{
type: 'editorView',
alias: 'Umb.EditorView.DocumentType.Design',