k-select component is not marking as selected pre-existing values

[italovalcy]

Hi,

Maintenance Napp and Mef_eline are two examples being currently impacted by this issue:

• when we create a EVC (using REST from CLI) and specify primary/backup constraints for desired and undesired links, then try to load the EVC from UI it will not mark the links as selected (at least not when you have metadata.link_name
• when you create a MW (also using REST from CLI) and try to load the MW from UI, it will not select the pre-existing values

Then, if you just change the name/description of the evc or mw, it will end up modifying the other properties (i.e., constraints or items under maintenance)

[italovalcy]

In the case of Maintenance Napp, the following code should be enough to load the selected options:

                                    <div :class="'editable-' + property_editable['Links']">
                                        <k-select icon="link" title="Links" :options="links_options" :value.sync="chosen_links"></k-select>
                                    </div>
                                    <div :class="'editable-' + property_editable['Switches']">
                                        <k-select icon="link" title="Switches" :options="switches_options" :value.sync="chosen_switches"></k-select>
                                    </div>
                                    <div :class="'editable-' + property_editable['Interfaces']">
                                        <k-select  icon="link" title="Interfaces" :options="interfaces_options" :value.sync="chosen_interfaces"></k-select>
                                    </div>

The :value.sync property of the k-select component should be enough to fill out the selected values.

However, it is not working.

I managed to find the following workaround for Maintenance (it could be also adapted for Mef, but I think it is better to fix this in the UI core):

root@4919fb6963ef:/src/kytos-maintenance# git diff
diff --git a/ui/k-info-panel/edit_window.kytos b/ui/k-info-panel/edit_window.kytos
index dea5fed..df86d9e 100644
--- a/ui/k-info-panel/edit_window.kytos
+++ b/ui/k-info-panel/edit_window.kytos
@@ -403,6 +403,13 @@
                         } catch(error) {
                             // Description is id
                         }
+                        // Since we are running the code async, at this point we may already
+                        // have an element loaded by the MW, then we update the description
+                        linkIndex = _this.links_options.findIndex(option => option.value == linksKeys[i])
+                        if(linkIndex != -1) {
+                            _this.links_options[linkIndex].description = description
+                            continue
+                        }
                         // Add the link as an option to edit items.
                         _this.links_options.push({"value":linksKeys[i], "description":description})
                     }
@@ -445,6 +452,13 @@
                         } catch(error) {
                             // Description is id
                         }
+                        // Since we are running the code async, at this point we may already
+                        // have an element loaded by the MW, then we update the description
+                        switchIndex = _this.switches_options.findIndex(option => option.value == switchesKeys[i])
+                        if(switchIndex != -1) {
+                            _this.switches_options[switchIndex].description = description
+                            continue
+                        }
                         // Add the switch as an option to edit items.
                         _this.switches_options.push({"value":switchesKeys[i], "description":description})
                     }
@@ -487,6 +501,13 @@
                         } catch(error) {
                             // Description is id
                         }
+                        // Since we are running the code async, at this point we may already
+                        // have an element loaded by the MW, then we update the description
+                        interfaceIndex = _this.interfaces_options.findIndex(option => option.value == interfacesKeys[i])
+                        if(interfaceIndex != -1) {
+                            _this.interfaces_options[interfaceIndex].description = description
+                            continue
+                        }
                         // Add the interface as an option to edit items.
                         _this.interfaces_options.push({"value":interfacesKeys[i], "description":description})
                     }
@@ -535,6 +556,10 @@
                             // Add it.
                             this.chosen_links.push(auto_links[i])
                         }
+                        linkIndex = this.links_options.findIndex(option => option.value == auto_links[i])
+                        if(linkIndex != -1) {
+                            this.links_options[linkIndex].selected = true
+                        }
                     }
                 }
                 // If there are switches to be auto-selected
@@ -546,6 +571,10 @@
                             // Add it.
                             this.chosen_switches.push(auto_switches[i])
                         }
+                        switchIndex = this.switches_options.findIndex(option => option.value == auto_switches[i])
+                        if(switchIndex != -1) {
+                            this.switches_options[switchIndex].selected = true
+                        }
                     }
                 }
                 // If there are interfaces to be auto-selected
@@ -557,6 +586,10 @@
                             // Add it.
                             this.chosen_interfaces.push(auto_interfaces[i])
                         }
+                        interfaceIndex = this.interfaces_options.findIndex(option => option.value == auto_interfaces[i])
+                        if(interfaceIndex != -1) {
+                            this.interfaces_options[interfaceIndex].selected = true
+                        }
                     }
                 }
             },

[italovalcy]

Debugging this a little deeper was possible to conclude that:

1. The UI's k-select component actually has a bug which leads to all options being returned as selected (this would be handled by PR Fix Select component event trigger #33)
2. The PR Fix Select component event trigger #33 needs to be updated to handle the collateral effected that would end up creating the issues described here
3. A workaround has been added to Maintenance, apparently facing the same issue

After talking with @rmotitsuki we decided to postpone the inclusion of PR #33 to a next release and apply the same workaround from Maintenance into Mef_Eline.