feat: added normalize category name service for proper dcns on columns

addon/components/hyper-table-v2/manage-columns.hbs

@@ -20,7 +20,7 @@
           <div
             class={{concat "field-category" (if (eq this.activeColumnCategory category) " field-category--active")}}
             role="button"
-            data-control-name={{concat "field_category_toggle_" category}}
+            data-control-name={{concat "field_category_toggle_" (normalize-category-name category)}}
             {{on "click" (fn this.setFieldCategory category)}}
           >
             <div>{{category}}</div>

addon/components/hyper-table/index.hbs

@@ -90,7 +90,7 @@
           {{#each this._fieldCategories as |category|}}
             <div
               class="field-category {{if (eq this._activeFieldCategory category.key) 'field-category--active'}}"
-              data-control-name={{concat "field_category_toggle_" category.key}}
+              data-control-name={{concat "field_category_toggle_" (normalize-category-name category.key)}}
               {{action "setFieldCategory" category.key}}
             >
               <div>{{category.label}}</div>

addon/helpers/normalize-category-name.ts

@@ -0,0 +1,8 @@
+import { helper } from '@ember/component/helper';
+
+export function normalizeCategoryNameHelper(params: any[]) {
+  const [category] = params;
+  return category.toLowerCase().replace(/\s+/g, '_');
+}
+
+export default helper(normalizeCategoryNameHelper);

app/helpers/normalize-category-name.js

@@ -0,0 +1 @@
+export { default, normalizeCategoryNameHelper } from '@upfluence/hypertable/helpers/normalize-category-name';

tests/integration/helpers/normalize-category-name-test.ts

@@ -0,0 +1,41 @@
+import { render, type TestContext } from '@ember/test-helpers';
+
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { module, test } from 'qunit';
+
+module('Integration | Helper | normalize-category-name', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('when the category has no spaces, it lowercases the value', async function (this: TestContext, assert) {
+    this.category = 'Sports';
+
+    await render(hbs`<span>{{normalize-category-name this.category}}</span>`);
+
+    assert.dom('span').hasText('sports');
+  });
+
+  test('when the category has spaces, it replaces them with underscores and lowercases', async function (this: TestContext, assert) {
+    this.category = 'Social Media';
+
+    await render(hbs`<span>{{normalize-category-name this.category}}</span>`);
+
+    assert.dom('span').hasText('social_media');
+  });
+
+  test('when the category has multiple consecutive spaces, it collapses them into a single underscore', async function (this: TestContext, assert) {
+    this.category = 'Health  &  Wellness';
+
+    await render(hbs`<span>{{normalize-category-name this.category}}</span>`);
+
+    assert.dom('span').hasText('health_&_wellness');
+  });
+
+  test('when the category is already lowercase with underscores, it returns it unchanged', async function (this: TestContext, assert) {
+    this.category = 'already_normalized';
+
+    await render(hbs`<span>{{normalize-category-name this.category}}</span>`);
+
+    assert.dom('span').hasText('already_normalized');
+  });
+});