slapos_jio: Make software type read only whenever you cannot change it

  Instance tree cannot change software type, so make the software type selection field as read only, improving users experience.
  Remove duplicated Software type on instance tree view, since it is already present on Parameter editor.

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_instance_tree_view_js.js

@@ -226,7 +226,6 @@
                 'json_url': gadget.state.doc.url_string.split('?')[0] + ".json",
                 'softwaretype': gadget.state.doc.source_reference,
                 'shared': gadget.state.doc.root_slave ? 1 : 0,
-                //'json_url': "https://lab.node.vifib.com/nexedi/slapos/raw/master/software/kvm/software.cfg.json",
                 'parameter_hash': btoa('<?xml version="1.0" encoding="utf-8" ?><instance></instance>'),
                 'restricted_softwaretype': true
               }
@@ -294,17 +293,6 @@
                       "hidden": 0,
                       "type": "StringField"
                     },
-                    "my_source_reference": {
-                      "description": "",
-                      "title": result[1][17],
-                      "default": gadget.state.doc.source_reference,
-                      "css_class": "",
-                      "required": 1,
-                      "editable": 0,
-                      "key": "source_reference",
-                      "hidden": 0,
-                      "type": "StringField"
-                    },
                     "my_url_string": {
                       "description": "",
                       "title": result[1][18],
@@ -488,7 +476,7 @@
                     [["my_slap_state_title"],  ['my_monitoring_status'], ['my_monitor_scope'], ['my_upgrade_scope'], ['my_source_project'], ['my_source']]
 
                   ], ["center",
-                      [["my_source_reference"], ["my_url_string"], ["my_list_image"]]
+                      [["my_url_string"], ["my_list_image"]]
                     ], [
                     "bottom",
                     [["ticket_listbox"], ["connection_listbox"], ["my_text_content"], ["listbox"]]

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_instance_tree_view_js.xml

@@ -236,7 +236,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>1001.26171.19762.42854</string> </value>
+                      <value> <string>1004.26871.45800.22818</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1658173330.65</float>
+                              <float>1668800165.86</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_css.css

@@ -4,10 +4,7 @@
   padding-top: 10px;
 }
 
-
-
-
-.subfield span {
+.subfield span:not(.slapos-parameter) {
   font-weight: normal;
   font-style: italic;
   padding-left: 7px;
@@ -22,12 +19,8 @@
   font-weight: 700;
 }
 
-
-
 .input button {margin-left: 10px;}
 
-
-
 .bt_close, .subfield .slapos-parameter-dict-key span.bt_close{
   padding: 0 6px;
   display: block;
@@ -62,7 +55,6 @@
   word-break: keep-all;
 }
 
-
 .non-editable > div.input {border: 1px solid rgb(201, 201, 201); padding: 5px; background: white; font-weight: normal;
 margin: 5px 0 10px; max-height: 250px; width: 80%;}
 
@@ -84,6 +76,7 @@ label.slapos-parameter-dict-key-colapse::before {
 }
 div.slapos-parameter-dict-key {
   margin-top: 10px;
+  margin-left: 6px;
   background: rgb(245, 245, 245);
   border: 1px solid rgb(230, 230, 230);
   padding: 5px;
@@ -91,7 +84,6 @@ div.slapos-parameter-dict-key {
 
 /* cleanup */
 fieldset > .subfield > label:not(.slapos-parameter-dict-key) {
-  font-size: 113%;
   color: rgb(112, 125, 136);
 }
 fieldset > div.subfield {
@@ -103,24 +95,30 @@ fieldset > div.subfield {
 .field input ~ span,
 .subfield input ~ span {
   position: relative;
-  top: -30px;
+  top: -27px;
   pointer-events: none;
   cursor: text;
 }
 .field input:not(:placeholder-shown) ~ span:not(.error),
-.subfield input:not(:placeholder-shown) ~ span:not(.error) {
+.subfield input:not(:placeholder-shown) ~ span:not(.error),
+.field select:not(:placeholder-shown) ~ span:not(.error),
+.subfield select:not(:placeholder-shown) ~ span:not(.error) {
   visibility: hidden;
 }
 .field input ~ span:not(.error),
-.subfield input ~ span:not(.error) {
+.subfield input ~ span:not(.error),
+.field select ~ span:not(.error),
+.subfield select ~ span:not(.error) {
   opacity: .7;
 }
 .field input:focus ~ span,
-.subfield input:focus ~ span {
+.subfield input:focus ~ span,
+.field select:focus ~ span,
+.subfield select:focus ~ span {
   visibility: hidden;
 }
 .subfield .input {
-  margin-bottom: -20px;
+  margin-bottom: -15px;
 }
 .subfield .error {
   float: right;
@@ -135,7 +133,6 @@ fieldset > div.subfield {
 .slapos-show-form {
   cursor: pointer;
   font-style: italic;
-  font-size: 14px;
   color: #000;
 }
 .slapos-show-form,
@@ -147,7 +144,6 @@ label.slapos-parameter-dict-key {
   text-transform: capitalize;
 }
 label.slapos-parameter-dict-key ~ div.input label {
-  font-size: 113%;
   color: rgb(112, 125, 136);
 }
 .slapos-parameter-dict-key label {
@@ -180,14 +176,20 @@ label.slapos-parameter-dict-key ~ div.input label {
   left: 4px;
 }
 
-  .subfield {
-    min-height: 5em;
-  }
-  .subfield select {
-    margin-bottom: 0;
-  }
-  .subfield .input select + span {
-    position: relative;
-    top: -1.9em;
-    opacity: .7;
-  }
+.subfield {
+  min-height: 5em;
+}
+.subfield select {
+  margin-bottom: 0;
+}
+.subfield .input select + span {
+  position: relative;
+  top: -1.9em;
+  opacity: .7;
+}
+
+select.readonly {
+  background: #EEE; 
+  pointer-events: none;
+  touch-action: none;
+}

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.js

@@ -776,6 +776,12 @@
           lowest_index = 999,
           lowest_option_index;
 
+        if (restricted_softwaretype === true) {
+          input.classList.add("readonly");
+          input["aria-disabled"] = "true";
+          input["tab-index"] = "-1";
+        }
+
         if (input.children.length === 0) {
           if (option_selected === undefined) {
             // search by the lowest index
@@ -795,19 +801,25 @@
 
           for (option_index in json['software-type']) {
             if (json['software-type'].hasOwnProperty(option_index)) {
-              option = document.createElement("option");
+
+              if (json['software-type'][option_index].shared === undefined) {
+                json['software-type'][option_index].shared = false;
+              }
+
+              option = domsugar("option", {
+                text: json['software-type'][option_index].title,
+                value: option_index
+              });
+              option['data-id'] = option_index;
+              option['data-index'] = 999;
+              option['data-shared'] = json['software-type'][option_index].shared
+
               if (json['software-type'][option_index]['software-type'] !== undefined) {
                 option.value = json['software-type'][option_index]['software-type'];
-              } else {
-                option.value = option_index;
               }
 
-              option['data-id'] = option_index;
-              option.textContent = json['software-type'][option_index].title;
               if (json['software-type'][option_index].index) {
                 option['data-index'] = json['software-type'][option_index].index;
-              } else {
-                option['data-index'] = 999;
               }
 
               if (option_index === lowest_option_index) {
@@ -824,12 +836,6 @@
                 }
               }
 
-              if (json['software-type'][option_index].shared === undefined) {
-                json['software-type'][option_index].shared = false;
-              }
-
-              option['data-shared'] = json['software-type'][option_index].shared;
-
               if ((option_selected_index === undefined) &&
                   (option.value === option_selected) &&
                   (Boolean(shared) === Boolean(json['software-type'][option_index].shared))) {
@@ -846,6 +852,8 @@
                 if (option.value === softwaretype) {
                   if (Boolean(shared) === Boolean(json['software-type'][option_index].shared)) {
                     selection_option_list.push(option);
+                    // We expect a single possible occurence per software type
+                    break;
                   }
                 }
               } else {

master/bt5/slapos_jio/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_slap_parameter_form_js.xml

@@ -280,7 +280,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>1004.33938.61743.7680</string> </value>
+                      <value> <string>1004.26824.9734.39150</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -298,7 +298,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1669224195.85</float>
+                              <float>1668799098.86</float>
                               <string>UTC</string>
                             </tuple>
                           </state>