Interaction Memory: Feature for picker modal state retention (#18305)

src/Umbraco.Web.UI.Client/package.json

@@ -57,6 +57,7 @@
 		"./icon": "./dist-cms/packages/core/icon-registry/index.js",
 		"./id": "./dist-cms/packages/core/id/index.js",
 		"./imaging": "./dist-cms/packages/media/imaging/index.js",
+		"./interaction-memory": "./dist-cms/packages/core/interaction-memory/index.js",
 		"./language": "./dist-cms/packages/language/index.js",
 		"./lit-element": "./dist-cms/packages/core/lit-element/index.js",
 		"./localization": "./dist-cms/packages/core/localization/index.js",

src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts

@@ -1,10 +1,12 @@
+import { manifests as coreManifests } from './manifests.js';
 import { UMB_AUTH_CONTEXT } from './auth/auth.context.token.js';
-import { UmbBackofficeNotificationContainerElement, UmbBackofficeModalContainerElement } from './components/index.js';
 import { UmbActionEventContext } from './action/action-event.context.js';
-import { manifests as coreManifests } from './manifests.js';
-import { UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
+import { UmbBackofficeNotificationContainerElement, UmbBackofficeModalContainerElement } from './components/index.js';
+import { UmbInteractionMemoryContext } from './interaction-memory/index.js';
+import { UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
 import { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
-import { UmbExtensionsApiInitializer, type UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
+import { UmbNotificationContext } from '@umbraco-cms/backoffice/notification';
+import type { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
 
 import './property-action/components/index.js';
 import './menu/components/index.js';
@@ -31,6 +33,7 @@ export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
 	new UmbNotificationContext(host);
 	new UmbModalManagerContext(host);
 	new UmbActionEventContext(host);
+	new UmbInteractionMemoryContext(host);
 
 	host.consumeContext(UMB_AUTH_CONTEXT, (authContext) => {
 		// Initialize the auth context to let the app context know that the core module is ready

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/constants.ts

@@ -0,0 +1 @@
+export * from './interaction-memory.context.token.js';

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/event/interaction-memories-change.event.ts

@@ -0,0 +1,8 @@
+export class UmbInteractionMemoriesChangeEvent extends Event {
+	public static readonly TYPE = 'interaction-memories-change';
+
+	public constructor() {
+		// mimics the native change event
+		super(UmbInteractionMemoriesChangeEvent.TYPE, { bubbles: true, composed: false, cancelable: false });
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/index.ts

@@ -0,0 +1,6 @@
+export * from './constants.js';
+export * from './event/interaction-memories-change.event.js';
+export * from './interaction-memory.context.js';
+export * from './interaction-memory.manager.js';
+
+export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/interaction-memory.context.token.ts

@@ -0,0 +1,6 @@
+import type { UmbInteractionMemoryContext } from './interaction-memory.context.js';
+import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
+
+export const UMB_INTERACTION_MEMORY_CONTEXT = new UmbContextToken<UmbInteractionMemoryContext>(
+	'UmbInteractionMemoryContext',
+);

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/interaction-memory.context.ts

@@ -0,0 +1,12 @@
+import { UMB_INTERACTION_MEMORY_CONTEXT } from './interaction-memory.context.token.js';
+import { UmbInteractionMemoryManager } from './interaction-memory.manager.js';
+import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
+
+export class UmbInteractionMemoryContext extends UmbContextBase {
+	public readonly memory = new UmbInteractionMemoryManager(this);
+
+	constructor(host: UmbControllerHost) {
+		super(host, UMB_INTERACTION_MEMORY_CONTEXT);
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/interaction-memory.manager.test.ts

@@ -0,0 +1,103 @@
+import { UmbInteractionMemoryManager } from './interaction-memory.manager.js';
+import { customElement } from '@umbraco-cms/backoffice/external/lit';
+import { expect } from '@open-wc/testing';
+import { Observable } from '@umbraco-cms/backoffice/external/rxjs';
+import { UmbControllerHostElementMixin } from '@umbraco-cms/backoffice/controller-api';
+
+@customElement('test-my-controller-host')
+class UmbTestControllerHostElement extends UmbControllerHostElementMixin(HTMLElement) {}
+
+describe('UmbInteractionMemoryManager', () => {
+	let manager: UmbInteractionMemoryManager;
+	const nestedMemory1 = { unique: 'nestedMemory1', value: 'Nested Memory 1' };
+	const nestedMemory2 = { unique: 'nestedMemory2', value: 'Nested Memory 2' };
+	const memory1 = { unique: '1', value: 'Memory 1' };
+	const memory2 = { unique: '2', value: 'Memory 2', memories: [nestedMemory1, nestedMemory2] };
+
+	beforeEach(() => {
+		const hostElement = new UmbTestControllerHostElement();
+		manager = new UmbInteractionMemoryManager(hostElement);
+		manager.setMemory(memory1);
+		manager.setMemory(memory2);
+	});
+
+	describe('Public API', () => {
+		describe('properties', () => {
+			it('has a memories property', () => {
+				expect(manager).to.have.property('memories').to.be.an.instanceOf(Observable);
+			});
+		});
+
+		describe('methods', () => {
+			it('has a memory method', () => {
+				expect(manager).to.have.property('memory').that.is.a('function');
+			});
+
+			it('has a getMemory method', () => {
+				expect(manager).to.have.property('getMemory').that.is.a('function');
+			});
+
+			it('has a setMemory method', () => {
+				expect(manager).to.have.property('setMemory').that.is.a('function');
+			});
+
+			it('has a deleteMemory method', () => {
+				expect(manager).to.have.property('deleteMemory').that.is.a('function');
+			});
+
+			it('has a getAllMemories method', () => {
+				expect(manager).to.have.property('getAllMemories').that.is.a('function');
+			});
+
+			it('has a clear method', () => {
+				expect(manager).to.have.property('clear').that.is.a('function');
+			});
+		});
+	});
+
+	describe('getMemory()', () => {
+		it('returns the correct memory item by unique identifier', () => {
+			const result = manager.getMemory('1');
+			expect(result).to.deep.equal(memory1);
+		});
+	});
+
+	describe('setMemory()', () => {
+		it('create a new memory unique identifier', () => {
+			const newMemory = { unique: 'newMemory', value: 'New Memory' };
+			manager.setMemory(newMemory);
+			const result = manager.getMemory('newMemory');
+			expect(result).to.deep.equal(newMemory);
+		});
+
+		it('update an existing memory item by unique identifier', () => {
+			const updatedMemory = { unique: '1', value: 'Updated Memory 1' };
+			manager.setMemory(updatedMemory);
+			const result = manager.getMemory('1');
+			expect(result).to.deep.equal(updatedMemory);
+		});
+	});
+
+	describe('deleteMemory()', () => {
+		it('deletes an existing memory item by unique identifier', () => {
+			manager.deleteMemory('1');
+			const result = manager.getMemory('1');
+			expect(result).to.be.undefined;
+		});
+	});
+
+	describe('getAllMemories()', () => {
+		it('returns all memory items', () => {
+			const result = manager.getAllMemories();
+			expect(result).to.deep.equal([memory1, memory2]);
+		});
+	});
+
+	describe('clear()', () => {
+		it('clears all memory items', () => {
+			manager.clear();
+			const result = manager.getAllMemories();
+			expect(result.length).to.equal(0);
+		});
+	});
+});

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/interaction-memory.manager.ts

@@ -0,0 +1,71 @@
+import type { UmbInteractionMemoryModel } from './types.js';
+import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
+import type { Observable } from '@umbraco-cms/backoffice/observable-api';
+
+/**
+ * A manager for handling interaction memory items.
+ * @exports
+ * @class UmbInteractionMemoryManager
+ * @augments {UmbControllerBase}
+ */
+export class UmbInteractionMemoryManager extends UmbControllerBase {
+	#memories = new UmbArrayState<UmbInteractionMemoryModel>([], (x) => x.unique);
+	/** Observable for all memory items. */
+	memories = this.#memories.asObservable();
+
+	/**
+	 * Observable for a specific memory item by its unique identifier.
+	 * @param {string} unique - The unique identifier of the memory item.
+	 * @returns {(Observable<UmbInteractionMemoryModel | undefined>)} An observable that emits the memory item or undefined if not found.
+	 * @memberof UmbInteractionMemoryManager
+	 */
+	memory(unique: string): Observable<UmbInteractionMemoryModel | undefined> {
+		return this.#memories.asObservablePart((items) => items.find((item) => item.unique === unique));
+	}
+
+	/**
+	 * Get a specific memory item by its unique identifier.
+	 * @param {string} unique - The unique identifier of the memory item.
+	 * @returns {(UmbInteractionMemoryModel | undefined)} The memory item or undefined if not found.
+	 * @memberof UmbInteractionMemoryManager
+	 */
+	getMemory(unique: string): UmbInteractionMemoryModel | undefined {
+		return this.#memories.getValue().find((item) => item.unique === unique);
+	}
+
+	/**
+	 * Add or update a memory item.
+	 * @param {UmbInteractionMemoryModel} memory - The memory item to add or update.
+	 * @memberof UmbInteractionMemoryManager
+	 */
+	setMemory(memory: UmbInteractionMemoryModel) {
+		this.#memories.appendOne(memory);
+	}
+
+	/**
+	 * Delete a memory item by its unique identifier.
+	 * @param {string} unique - The unique identifier of the memory item.
+	 * @memberof UmbInteractionMemoryManager
+	 */
+	deleteMemory(unique: string) {
+		this.#memories.removeOne(unique);
+	}
+
+	/**
+	 * Get all memory items from the manager.
+	 * @returns {Array<UmbInteractionMemoryModel>} An array of all memory items.
+	 * @memberof UmbInteractionMemoryManager
+	 */
+	getAllMemories(): Array<UmbInteractionMemoryModel> {
+		return this.#memories.getValue();
+	}
+
+	/**
+	 * Clear all memory items from the manager.
+	 * @memberof UmbInteractionMemoryManager
+	 */
+	clear() {
+		this.#memories.clear();
+	}
+}

src/Umbraco.Web.UI.Client/src/packages/core/interaction-memory/types.ts

@@ -0,0 +1,5 @@
+export interface UmbInteractionMemoryModel {
+	unique: string;
+	value?: any;
+	memories?: Array<UmbInteractionMemoryModel>;
+}

src/Umbraco.Web.UI.Client/src/packages/core/modal/context/modal.context.ts

@@ -2,12 +2,14 @@ import { UmbModalToken } from '../token/modal-token.js';
 import type { UmbModalConfig, UmbModalType } from '../types.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UUIModalElement, UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
+import { umbDeepMerge } from '@umbraco-cms/backoffice/utils';
+import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
-import { type UmbDeepPartialObject, umbDeepMerge } from '@umbraco-cms/backoffice/utils';
+import { UMB_ROUTE_CONTEXT } from '@umbraco-cms/backoffice/router';
 import type { ElementLoaderProperty } from '@umbraco-cms/backoffice/extension-api';
-import { UMB_ROUTE_CONTEXT, type IRouterSlot } from '@umbraco-cms/backoffice/router';
+import type { IRouterSlot } from '@umbraco-cms/backoffice/router';
+import type { UmbDeepPartialObject } from '@umbraco-cms/backoffice/utils';
 
 export interface UmbModalRejectReason {
 	type: string;

src/Umbraco.Web.UI.Client/src/packages/core/modal/types.ts

@@ -1,5 +1,5 @@
-import type { UUIModalElement, UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 import type { ElementLoaderProperty } from '@umbraco-cms/backoffice/extension-api';
+import type { UUIModalElement, UUIModalSidebarSize } from '@umbraco-cms/backoffice/external/uui';
 
 export type * from './extensions/types.js';
 

src/Umbraco.Web.UI.Client/src/packages/core/picker-input/picker-input.context.ts

@@ -1,12 +1,18 @@
 import { UMB_PICKER_INPUT_CONTEXT } from './picker-input.context-token.js';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import { UmbDeprecation } from '@umbraco-cms/backoffice/utils';
+import { UmbInteractionMemoryManager } from '@umbraco-cms/backoffice/interaction-memory';
 import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
-import { umbConfirmModal, umbOpenModal } from '@umbraco-cms/backoffice/modal';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbItemRepository } from '@umbraco-cms/backoffice/repository';
-import type { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@umbraco-cms/backoffice/modal';
-import { UmbDeprecation } from '@umbraco-cms/backoffice/utils';
+import {
+	umbConfirmModal,
+	umbOpenModal,
+	type UmbModalToken,
+	type UmbPickerModalData,
+	type UmbPickerModalValue,
+} from '@umbraco-cms/backoffice/modal';
 
 type PickerItemBaseType = { name: string; unique: string };
 export class UmbPickerInputContext<
@@ -21,8 +27,9 @@ export class UmbPickerInputContext<
 
 	#itemManager;
 
-	selection;
-	selectedItems;
+	public readonly selection;
+	public readonly selectedItems;
+	public readonly interactionMemory = new UmbInteractionMemoryManager(this);
 
 	/**
 	 * Define a minimum amount of selected items in this input, for this input to be valid.
@@ -100,6 +107,7 @@ export class UmbPickerInputContext<
 				selection: this.getSelection(),
 			} as PickerModalValueType,
 		}).catch(() => undefined);
+
 		if (!modalValue) return;
 
 		this.setSelection(modalValue.selection);

src/Umbraco.Web.UI.Client/src/packages/core/picker/index.ts

@@ -1,5 +1,6 @@
 export * from './constants.js';
-export * from './search/index.js';
+export * from './modal/index.js';
 export * from './picker.context.js';
 export * from './picker.context.token.js';
+export * from './search/index.js';
 export type * from './types.js';

src/Umbraco.Web.UI.Client/src/packages/core/picker/modal/index.ts

@@ -0,0 +1 @@
+export * from './picker-modal-base.element.js';

src/Umbraco.Web.UI.Client/src/packages/core/picker/modal/picker-modal-base.element.ts

@@ -0,0 +1,64 @@
+import type { UmbPickerContext } from '../picker.context.js';
+import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal';
+import type { UmbEntityModel } from '@umbraco-cms/backoffice/entity';
+import type { UmbInteractionMemoryModel } from '@umbraco-cms/backoffice/interaction-memory';
+import type { ManifestModal, UmbPickerModalData } from '@umbraco-cms/backoffice/modal';
+import { UMB_PICKER_INPUT_CONTEXT } from '@umbraco-cms/backoffice/picker-input';
+
+export abstract class UmbPickerModalBaseElement<
+	ItemType = UmbEntityModel,
+	ModalDataType extends UmbPickerModalData<ItemType> = UmbPickerModalData<ItemType>,
+	ModalValueType = unknown,
+	ModalManifestType extends ManifestModal = ManifestModal,
+> extends UmbModalBaseElement<ModalDataType, ModalValueType, ModalManifestType> {
+	protected abstract _pickerContext: UmbPickerContext;
+
+	#pickerInputContext?: typeof UMB_PICKER_INPUT_CONTEXT.TYPE;
+
+	constructor() {
+		super();
+		this.consumeContext(UMB_PICKER_INPUT_CONTEXT, (pickerInputContext) => {
+			this.#pickerInputContext = pickerInputContext;
+			this.#observeMemoriesFromInputContext();
+		});
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.#observeMemoriesFromPicker();
+	}
+
+	#observeMemoriesFromPicker() {
+		this.observe(this._pickerContext.interactionMemory.memories, (memories) => {
+			this.#setMemoriesOnInputContext(memories);
+		});
+	}
+
+	#getInteractionMemoryUnique() {
+		// TODO: consider appending with a unique when we have that implemented.
+		return `UmbPickerModal`;
+	}
+
+	#observeMemoriesFromInputContext() {
+		this.observe(
+			this.#pickerInputContext?.interactionMemory.memory(this.#getInteractionMemoryUnique()),
+			(memory) => {
+				memory?.memories?.forEach((memory) => this._pickerContext.interactionMemory.setMemory(memory));
+			},
+			'umbModalInteractionMemoryObserver',
+		);
+	}
+
+	#setMemoriesOnInputContext(pickerMemories: Array<UmbInteractionMemoryModel>) {
+		if (pickerMemories?.length > 0) {
+			const pickerModalMemory: UmbInteractionMemoryModel = {
+				unique: this.#getInteractionMemoryUnique(),
+				memories: pickerMemories,
+			};
+
+			this.#pickerInputContext?.interactionMemory.setMemory(pickerModalMemory);
+		} else {
+			this.#pickerInputContext?.interactionMemory.deleteMemory(this.#getInteractionMemoryUnique());
+		}
+	}
+}