Moved label to item to util, and added normalization/underscore support (#1578)

The util function adds additional support:
* Use normalize to allow for channel names to contain subscript characters like in units; CO2.
* Convert spaces to underscore.
* Allow underscore in name.

Fixes https://github.com/openhab/openhab-addons/issues/13909

Signed-off-by: Hilbrand Bouwkamp <hilbrand@h72.nl>

bundles/org.openhab.ui/web/src/components/thing/channel-list.vue

@@ -89,8 +89,6 @@
 </style>
 
 <script>
-import diacritic from 'diacritic'
-
 import ChannelGroup from './channel-group.vue'
 import ChannelLink from './channel-link.vue'
 import ItemForm from '@/components/item/item-form.vue'
@@ -185,13 +183,13 @@ export default {
         this.newItems.splice(this.newItems.findIndex((i) => i.channel === channel), 1)
       } else {
         this.selectedChannels.push(channel)
-        let newItemName = (this.newItemsPrefix) ? this.newItemsPrefix : diacritic.clean(this.thing.label).replace(/[^0-9a-z]/gi, '')
+        let newItemName = this.newItemsPrefix || this.$oh.utils.normalizeLabel(this.thing.label)
         newItemName += '_'
         let suffix = channel.label || channelType.label || channel.id
         if (this.thing.channels.filter((c) => c.label === suffix || (c.channelTypeUID && this.channelTypesMap[c.channelTypeUID] && this.channelTypesMap[c.channelTypeUID].label === suffix)).length > 1) {
           suffix = channel.id.replace('#', '_').replace(/(^\w{1})|(_+\w{1})/g, letter => letter.toUpperCase())
         }
-        newItemName += diacritic.clean(suffix).replace(/[^0-9a-z_]/gi, '')
+        newItemName += this.$oh.utils.normalizeLabel(suffix)
         const defaultTags = (channel.defaultTags.length > 0) ? channel.defaultTags : channelType.tags
         const newItem = {
           channel: channel,

bundles/org.openhab.ui/web/src/js/openhab/index.js

@@ -3,11 +3,13 @@ import auth from './auth'
 import sse from './sse'
 import media from './media'
 import speech from './speech'
+import utils from './utils'
 
 export default {
   api,
   auth,
   sse,
   media,
-  speech
+  speech,
+  utils
 }

bundles/org.openhab.ui/web/src/js/openhab/utils.js

@@ -0,0 +1,7 @@
+import diacritic from 'diacritic'
+
+export default {
+  normalizeLabel: (label) => {
+    return diacritic.clean(label.normalize('NFKD')).replace(/\s+/g, '_').replace(/[^0-9a-z_]/gi, '')
+  }
+}

bundles/org.openhab.ui/web/src/pages/settings/model/add-from-thing.vue

@@ -89,8 +89,6 @@
 </template>
 
 <script>
-import diacritic from 'diacritic'
-
 import ThingPicker from '@/components/config/controls/thing-picker.vue'
 import ModelPickerPopup from '@/components/model/model-picker-popup.vue'
 import ChannelList from '@/components/thing/channel-list.vue'
@@ -275,7 +273,7 @@ export default {
 
           if (this.createEquipment) {
             this.newEquipmentItem = {
-              name: diacritic.clean(this.selectedThing.label).replace(/[^0-9a-z]/gi, ''),
+              name: this.$oh.utils.normalizeLabel(this.selectedThing.label),
               label: this.selectedThing.label,
               tags: ['Equipment'],
               type: 'Group',

bundles/org.openhab.ui/web/src/pages/settings/model/generate-textual-definition.js

@@ -1,4 +1,3 @@
-import diacritic from 'diacritic'
 import { Points } from '@/assets/semantics'
 
 /**
@@ -24,13 +23,13 @@ export default (thing, channelTypes, newEquipmentItem, parentGroupsForEquipment,
   for (const channel of thing.channels) {
     if (channel.kind !== 'STATE') continue
     const channelType = channelTypesMap.get(channel.channelTypeUID)
-    let newItemName = (newEquipmentItem) ? newEquipmentItem.name : diacritic.clean(thing.label).replace(/[^0-9a-z]/gi, '')
+    let newItemName = (newEquipmentItem) ? newEquipmentItem.name : this.$oh.utils.normalizeLabel(thing.label)
     newItemName += '_'
     let suffix = channel.label || channel.id
     if (thing.channels.filter((c) => c.label === suffix || (c.channelTypeUID && channelTypesMap[c.channelTypeUID] && channelTypesMap[c.channelTypeUID].label === suffix)).length > 1) {
       suffix = channel.id.replace('#', '_').replace(/(^\w{1})|(_+\w{1})/g, letter => letter.toUpperCase())
     }
-    newItemName += diacritic.clean(suffix).replace(/[^0-9a-z_]/gi, '')
+    newItemName += this.$oh.utils.normalizeLabel(suffix)
     const defaultTags = (channel.defaultTags.length > 0) ? channel.defaultTags : channelType.tags
     const newItem = {
       channel: channel,

bundles/org.openhab.ui/web/src/pages/settings/things/link/link-add.vue

@@ -124,8 +124,6 @@
 </style>
 
 <script>
-import diacritic from 'diacritic'
-
 import ConfigSheet from '@/components/config/config-sheet.vue'
 import ItemPicker from '@/components/config/controls/item-picker.vue'
 import ThingPicker from '@/components/config/controls/thing-picker.vue'
@@ -193,9 +191,9 @@ export default {
     onPageAfterIn (event) {
       if (!this.channel) return
       this.loadProfileTypes(this.channel)
-      let newItemName = diacritic.clean(this.thing.label).replace(/[^0-9a-z]/gi, '')
+      let newItemName = this.$oh.utils.normalizeLabel(this.thing.label)
       newItemName += '_'
-      newItemName += (this.channel.label) ? diacritic.clean(this.channel.label).replace(/[^0-9a-z]/gi, '') : diacritic.clean(this.channelType.label).replace(/[^0-9a-z]/gi, '')
+      newItemName += this.$oh.utils.normalizeLabel(this.channel.label || this.channelType.label)
       const defaultTags = (this.channel.defaultTags.length > 0) ? this.channel.defaultTags : this.channelType.tags
       this.$set(this, 'newItem', {
         name: newItemName,

bundles/org.openhab.ui/web/test/jest/__tests__/utils.test.js

@@ -0,0 +1,7 @@
+import util from 'src/js/openhab/utils.js'
+
+describe('normalizeLabel', () => {
+  test('normalize the label to be a valid item name', () => {
+    expect('openHAB_3_0').toEqual(util.normalizeLabel('opénHAB? ₃?$_&.0'))
+  })
+})