From 617d392b5d1c712aef3ade844f426a4ff6fe8dbc Mon Sep 17 00:00:00 2001
From: leekelleher <leekelleher@gmail.com>
Date: Tue, 2 Apr 2024 08:52:27 +0100
Subject: [PATCH] Adds reusable function `fromCamelCase`

This is to display a friendlier label from a camelCased alias.
---
 .../extension-collection.element.ts           | 10 ++-------
 .../src/packages/core/utils/index.ts          |  1 +
 .../utils/string/from-camel-case.function.ts  | 21 +++++++++++++++++++
 3 files changed, 24 insertions(+), 8 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/packages/core/utils/string/from-camel-case.function.ts

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/extension-collection.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/extension-collection.element.ts
index df8289d9a6..771e816dc9 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/extension-collection.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/collection/extension-collection.element.ts
@@ -1,5 +1,6 @@
 import { umbExtensionsRegistry } from '../registry.js';
 import { html, customElement, css } from '@umbraco-cms/backoffice/external/lit';
+import { fromCamelCase } from '@umbraco-cms/backoffice/utils';
 import { UMB_DEFAULT_COLLECTION_CONTEXT, UmbCollectionDefaultElement } from '@umbraco-cms/backoffice/collection';
 import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui';
@@ -22,18 +23,11 @@ export class UmbExtensionCollectionElement extends UmbCollectionDefaultElement {
 
 		this.observe(umbExtensionsRegistry.extensions, (extensions) => {
 			const types = [...new Set(extensions.map((x) => x.type))];
-			const options = types.sort().map((x) => ({ name: this.#camelCaseToWords(x), value: x }));
+			const options = types.sort().map((x) => ({ name: fromCamelCase(x), value: x }));
 			this.#options = [{ name: 'All', value: '' }, ...options];
 		});
 	}
 
-	// TODO: make this a utility function, please check that we do not already have on for this: [NL]
-	// credit: https://stackoverflow.com/a/7225450/12787 [LK]
-	#camelCaseToWords(input: string) {
-		const result = input.replace(/([A-Z])/g, ' $1');
-		return result.charAt(0).toUpperCase() + result.slice(1);
-	}
-
 	#onChange(event: UUISelectEvent) {
 		const extensionType = event.target.value;
 		this.#collectionContext?.setFilter({ type: extensionType });
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts
index 9b26d456b7..0fc65a99ab 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/index.ts
@@ -12,4 +12,5 @@ export * from './string/increment-string.function.js';
 export * from './string/split-string-to-array.js';
 export * from './type/diff.type.js';
 export * from './string/to-camel-case/to-camel-case.function.js';
+export * from './string/from-camel-case.function.js';
 export * from './debounce/debounce.function.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/utils/string/from-camel-case.function.ts b/src/Umbraco.Web.UI.Client/src/packages/core/utils/string/from-camel-case.function.ts
new file mode 100644
index 0000000000..bdc44f9a6a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/utils/string/from-camel-case.function.ts
@@ -0,0 +1,21 @@
+/**
+ * Converts a string from camelCase to human-readable labels.
+ *
+ * This function has been adapted from the following Stack Overflow answer:
+ * https://stackoverflow.com/a/7225450/12787
+ * Licensed under the permissions of the CC BY-SA 4.0 DEED.
+ * https://creativecommons.org/licenses/by-sa/4.0/
+ * Modifications are licensed under the MIT License.
+ * Copyright © 2024 Umbraco HQ.
+ *
+ * @param {string} str - The camelCased string to convert.
+ * @returns {string} - The converted human-readable label.
+ *
+ * @example
+ * const label = fromCamelCase('workspaceActionMenuItem');
+ * // label: 'Workspace Action Menu Item'
+ */
+export const fromCamelCase = (str: string) => {
+	const s = str.replace(/([A-Z])/g, ' $1');
+	return s.charAt(0).toUpperCase() + s.slice(1);
+};