Merge pull request #2337 from umbraco/v15/feature/discard-changes

Feature: Discard changes

Author: madsrasmussen

src/assets/lang/en-us.ts

@@ -447,8 +447,7 @@ export default {
 		stay: 'Stay',
 		discardChanges: 'Discard changes',
 		unsavedChanges: 'You have unsaved changes',
-		unsavedChangesWarning:
-			'Are you sure you want to navigate away from this page? - you have unsaved\n      changes\n    ',
+		unsavedChangesWarning: 'Are you sure you want to navigate away from this page? You have unsaved changes',
 		confirmListViewPublish: 'Publishing will make the selected items visible on the site.',
 		confirmListViewUnpublish:
 			'Unpublishing will remove the selected items and all their descendants from the\n      site.\n    ',

src/packages/core/modal/common/confirm/index.ts

@@ -1,2 +1,3 @@
-export * from './confirm-modal.token.js';
 export * from './confirm-modal.controller.js';
+export * from './confirm-modal.element.js';
+export * from './confirm-modal.token.js';

src/packages/core/modal/common/discard-changes/discard-changes-modal.element.ts

@@ -0,0 +1,36 @@
+import { UmbModalBaseElement } from '../../component/modal-base.element.js';
+import { html, customElement } from '@umbraco-cms/backoffice/external/lit';
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+
+@customElement('umb-discard-changes-modal')
+export class UmbDiscardChangesModalElement extends UmbModalBaseElement {
+	override render() {
+		return html`
+			<uui-dialog-layout class="uui-text" headline=${this.localize.term('prompt_unsavedChanges')}>
+				<umb-localize key="prompt_unsavedChangesWarning"></umb-localize>
+				<uui-button
+					slot="actions"
+					id="cancel"
+					label=${this.localize.term('prompt_stay')}
+					@click=${this._rejectModal}></uui-button>
+				<uui-button
+					slot="actions"
+					id="confirm"
+					color="positive"
+					look="primary"
+					label=${this.localize.term('prompt_discardChanges')}
+					@click=${this._submitModal}></uui-button>
+			</uui-dialog-layout>
+		`;
+	}
+
+	static override styles = [UmbTextStyles];
+}
+
+export { UmbDiscardChangesModalElement as element };
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-discard-changes-modal': UmbDiscardChangesModalElement;
+	}
+}

src/packages/core/modal/common/discard-changes/discard-changes-modal.tokent.ts

@@ -0,0 +1,7 @@
+import { UmbModalToken } from '../../token/index.js';
+
+export const UMB_DISCARD_CHANGES_MODAL = new UmbModalToken('Umb.Modal.DiscardChanges', {
+	modal: {
+		type: 'dialog',
+	},
+});

src/packages/core/modal/common/discard-changes/index.ts

@@ -0,0 +1,2 @@
+export * from './discard-changes-modal.element.js';
+export * from './discard-changes-modal.tokent.js';

src/packages/core/modal/common/discard-changes/manifests.ts

@@ -0,0 +1,8 @@
+export const manifests: Array<UmbExtensionManifest> = [
+	{
+		type: 'modal',
+		alias: 'Umb.Modal.DiscardChanges',
+		name: 'Discard Changes Modal',
+		element: () => import('./discard-changes-modal.element.js'),
+	},
+];

src/packages/core/modal/common/index.ts

@@ -1,2 +1,3 @@
 export * from './confirm/index.js';
+export * from './discard-changes/index.js';
 export * from './item-picker/index.js';

src/packages/core/modal/common/manifests.ts

@@ -1,4 +1,9 @@
 import { manifests as confirmManifests } from './confirm/manifests.js';
+import { manifests as discardChangesManifests } from './discard-changes/manifests.js';
 import { manifests as itemPickerManifests } from './item-picker/manifests.js';
 
-export const manifests: Array<UmbExtensionManifest> = [...confirmManifests, ...itemPickerManifests];
+export const manifests: Array<UmbExtensionManifest> = [
+	...confirmManifests,
+	...discardChangesManifests,
+	...itemPickerManifests,
+];

src/packages/core/modal/index.ts

@@ -1,8 +1,8 @@
 import './component/modal.element.js';
 
+export * from './common/index.js';
+export * from './component/modal-base.element.js';
+export * from './component/modal.element.js';
 export * from './context/index.js';
 export * from './token/index.js';
 export * from './types.js';
-export * from './component/modal-base.element.js';
-export * from './component/modal.element.js';
-export * from './common/index.js';

src/packages/core/workspace/contexts/index.ts

@@ -1,3 +1,2 @@
 export * from './default-workspace.context.js';
-export * from './submittable-workspace-context-base.js';
 export * from './tokens/index.js';