officejs_support_request_ui: updates to stop using unsafe CSP

 - switch to programmatic creation of DOM element using domsugar
  instead of using handlebars which needs CSP
 - use gadget_html_viewer to display post contents
 - more translation support

bt5/erp5_l10n_fr/MessageTranslationTemplateItem/fr/erp5_ui/translation.po

@@ -1405,6 +1405,12 @@ msgstr "Attacher un document"
 msgid "Attachment"
 msgstr "Pièce jointe"
 
+msgid "Attachment:"
+msgstr "Pièce jointe:"
+
+msgid "Attachment: "
+msgstr "Pièce jointe: "
+
 msgid "Attachments"
 msgstr "Pièces jointes"
 
@@ -1897,6 +1903,9 @@ msgstr "Le business template a été mis à jour avec succès"
 msgid "Buyer"
 msgstr "Acheteur"
 
+msgid "By"
+msgstr "Par"
+
 msgid "CAD Library"
 msgstr "Nom du fichier Lectra"
 
@@ -2722,6 +2731,9 @@ msgstr "Commentaires entrés par un utilisateur. Les commentaires ne seront visi
 msgid "Comments which can be read by internal users but which, unlike description, are not printed out on official documents."
 msgstr "Commentaires accessibles aux utilisateurs internes de l'application qui, contrairement à la description, ne sont pas repris ou imprimés sur les documents officiels."
 
+msgid "Comments:"
+msgstr "Commentaires:"
+
 msgid "Compare"
 msgstr "Comparer"
 
@@ -6586,6 +6598,9 @@ msgstr "Dernier"
 msgid "Last In, First Out"
 msgstr "Dernier entré, premier sorti"
 
+msgid "Last Month Activity"
+msgstr "Activité du mois"
+
 msgid "Last Name"
 msgstr "Nom"
 
@@ -10309,6 +10324,9 @@ msgstr "Hiérarchie d'expression de besoins"
 msgid "Reset"
 msgstr "Réinitialiser"
 
+msgid "Reset Filter"
+msgstr "Réinitialiser le filtre"
+
 msgid "Reset List Setting"
 msgstr "Réinitialiser la configuration de la liste"
 
@@ -11740,6 +11758,9 @@ msgstr "Soumettre au manager (action)"
 msgid "Submit Message"
 msgstr "Soumettre le message"
 
+msgid "Submit New Support Request"
+msgstr "Soumettre une nouvelle demande d'assistance"
+
 msgid "Submit Project"
 msgstr "Soumettre le projet"
 
@@ -11905,6 +11926,9 @@ msgstr "Rapport détaillé"
 msgid "Support Request Module"
 msgstr "Module des demandes d'assistance"
 
+msgid "Support Request Pipe"
+msgstr "Demandes d'assistance en cours"
+
 msgid "Support Request Status"
 msgstr "État"
 
@@ -11917,6 +11941,9 @@ msgstr "Reference du type de la demande d'assistance"
 msgid "Support Request Types"
 msgstr "Types des demandes d'assistance"
 
+msgid "Support Request WorkLists"
+msgstr "Listes de travail des demandes d'assistance"
+
 msgid "Support Requests"
 msgstr "Demandes d'assistance"
 

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_appcache.xml

@@ -64,9 +64,7 @@
         <item>
             <key> <string>categories</string> </key>
             <value>
-              <tuple>
-                <string>contributor/person_module/1</string>
-              </tuple>
+              <tuple/>
             </value>
         </item>
         <item>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_css.css

@@ -26,11 +26,11 @@
   line-height: 1.5;
 }
 
-#wrap1 iframe {
-  height: 100%;
+#wrap1, #wrap2 {
+  height: 300px;
 }
 
-#wrap2 iframe {
+#wrap1 iframe, #wrap2 iframe {
   height: 100%;
 }
 
@@ -40,6 +40,12 @@
   width: 120px;
 }
 
+.gadget-content .ui-field-contain > .left,
+.gadget-content .ui-field-contain > .right {
+  height: 50%;
+  width: 100%;
+}
+
 .gadget-content .ui-field-contain .bottom .first-line-buttons {
   -webkit-appearance: none;
   margin-top: 0;

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_css.xml

@@ -268,7 +268,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1505897718.64</float>
+                              <float>1694151687.28</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_html.html

 <!DOCTYPE html>
 <html>
 <!--
-  data-i18n=Homepage
+  data-i18n="Count"
+  data-i18n="Customer Support Dashboard"
+  data-i18n="Days"
+  data-i18n="Homepage"
+  data-i18n="Last Month Activity"
+  data-i18n="Support Request Pipe"
 -->
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
@@ -26,14 +31,14 @@
       </div>
 
       <div class="ui-field-contain">
-        <div class="left" style="height:50%; width:100%">
+        <div class="left">
           <div class="ui-icon-spinner ui-btn-icon-notext first-loader graph-spinner"></div>
-          <div id="wrap1" style="height:300px;"></div>
+          <div id="wrap1"></div>
         </div>
 
-        <div class="right" style="height:50%; width:100%">
+        <div class="right">
           <div class="ui-icon-spinner ui-btn-icon-notext first-loader graph-spinner"></div>
-          <div id="wrap2" style="height:300px;"></div>
+          <div id="wrap2"></div>
         </div>
       </div>
 
@@ -42,7 +47,7 @@
       </div>
       <div data-gadget-url="gadget_erp5_page_form.html" data-gadget-scope="last"></div>
 
-      <h1 data-i18n="[value]Support Request WorkLists" class="ui-title ui-override-theme worklist-title">Support Request WorkLists</h1>
+      <h1 data-i18n="Support Request WorkLists" class="ui-title ui-override-theme worklist-title">Support Request WorkLists</h1>
       <div data-gadget-url="gadget_supportrequest_page_worklist.html" data-gadget-scope="worklist"></div>
   </body>
 </html>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_html.xml

@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1613489292.9</float>
+                              <float>1694151614.07</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_js.js

-/*global document, window, Option, rJS, RSVP, promiseEventListener */
+/*global document, window, Option, rJS, RSVP */
 /*jslint nomen: true, indent: 2, maxerr: 3 */
-(function (window, rJS, RSVP, promiseEventListener, loopEventListener) {
+(function (window, rJS, RSVP) {
   "use strict";
 
   function getActionListByName(action_object, name) {
@@ -47,7 +47,8 @@
     /////////////////////////////////////////////////////////////////
     .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
     .declareAcquiredMethod("getUrlParameter", "getUrlParameter")
-    .declareAcquiredMethod("translateHtml", "translateHtml")
+    .declareAcquiredMethod("translate", "translate")
+    .declareAcquiredMethod("getTranslationList", "getTranslationList")
     .declareAcquiredMethod("redirect", "redirect")
     .declareAcquiredMethod("updateHeader", "updateHeader")
     .declareAcquiredMethod("updateConfiguration", "updateConfiguration")
@@ -89,7 +90,8 @@
         search_criteria = '( translated_simulation_state_title: "' + seriesName + '" AND delivery.start_date: >= ' + begin_date.toISOString().slice(0, 10) + ' AND delivery.start_date: < ' + end_date.toISOString().slice(0, 10) + ' )';
       } else {
         // Situation 2: Search Support Request by state with limit of 30 days.
-        search_criteria = '( translated_simulation_state_title: "' + name + '" AND delivery.start_date: >= ' + days_30.toISOString().slice(0, 10) + ' )';
+        end_date = days_30;
+        search_criteria = '( translated_simulation_state_title: "' + name + '" AND delivery.start_date: >= ' + end_date.toISOString().slice(0, 10) + ' )';
       }
       return search_criteria;
     })
@@ -133,8 +135,21 @@
             });
         })
         .push(function () {
-          return gadget.updateHeader({
-            page_title: 'Customer Support Dashboard'
+          return gadget.translate('Customer Support Dashboard')
+            .push(function (translated_text) {
+              return gadget.updateHeader({
+                page_title: translated_text
+              });
+            });
+        }).push(function () {
+          return gadget.getTranslationList([
+            "Submit New Support Request",
+            "Reset Filter",
+            "Support Request WorkLists"
+          ]).push(function (translation_list) {
+            gadget.element.querySelector('[data-i18n="[value]Submit New Support Request"]').value = translation_list[0];
+            gadget.element.querySelector('[data-i18n="[value]Reset Filter"]').value = translation_list[1];
+            gadget.element.querySelector('[data-i18n="Support Request WorkLists"]').innerText = translation_list[2];
           });
         });
     })
@@ -163,7 +178,10 @@
                 sandbox: "iframe",
                 element: gadget.property_dict.element.querySelector("#wrap2")
               }
-            )
+            ),
+            gadget.translate("Support Request Pipe"),
+            gadget.translate("Days"),
+            gadget.translate("Count")
             ]);
         })
         .push(function (result) {
@@ -180,10 +198,12 @@
           var sp_data = result_list[0],
             graph_gadget_1 = result_list[1],
             graph_gadget_2 = result_list[2],
+            translated_message_support_request_pipe = result_list[3],
+            translated_message_days = result_list[4],
+            translated_message_count = result_list[5],
             count_by_state_and_date_range = sp_data.count_by_state_and_date_range;
-          return RSVP.all([
-            // render first graph
-            graph_gadget_1.render({
+          return RSVP.all([graph_gadget_1.render(
+            {
               value: {
                 data: [
                   {
@@ -216,50 +236,56 @@
                 ],
                 layout: {
                   axis_dict : {
-                    '0': {"title": "Days"},
-                    '1': {"title": "Count", "value_type": "number"}
+                    '0': {"title": translated_message_days},
+                    '1': {"title": translated_message_count, "value_type": "number"}
                   },
-                  title: "Support Request Pipe"
+                  title: translated_message_support_request_pipe
                 }
               }
-            }),
-
-            // render second graph
-            graph_gadget_2.render({
-              value:
-                {
-                  data: [
-                    {
-                      value_dict: {
-                        0: [
-                          sp_data.state_title_by_state_id.validated,
-                          sp_data.state_title_by_state_id.submitted,
-                          sp_data.state_title_by_state_id.suspended,
-                          sp_data.state_title_by_state_id.invalidated
-                        ],
-                        1: [
-                          sp_data.count_by_state.validated || 0,
-                          sp_data.count_by_state.submitted || 0,
-                          sp_data.count_by_state.suspended || 0,
-                          sp_data.count_by_state.invalidated || 0
-                        ]
-                      },
-                      colors: ['#d48265', '#61a0a8', '#c23531', '#2f4554'],
-                      type: "pie",
-                      title: "Support Request"
-                    }
-                  ],
-                  layout: {
-                    axis_dict : {
-                      0: {"title": "date"},
-                      1: {"title": "value",  "value_type": "number"}
+            }
+          ),
+            sp_data,
+            graph_gadget_2,
+            gadget.translate("Last Month Activity")
+            ]);
+        })
+        .push(function (result_list) {
+          var sp_data = result_list[1],
+            graph_gadget = result_list[2],
+            translated_message_last_month_activity = result_list[3];
+          return graph_gadget.render({
+            value:
+              {
+                data: [
+                  {
+                    value_dict: {
+                      0: [
+                        sp_data.state_title_by_state_id.validated,
+                        sp_data.state_title_by_state_id.submitted,
+                        sp_data.state_title_by_state_id.suspended,
+                        sp_data.state_title_by_state_id.invalidated
+                      ],
+                      1: [
+                        sp_data.count_by_state.validated || 0,
+                        sp_data.count_by_state.submitted || 0,
+                        sp_data.count_by_state.suspended || 0,
+                        sp_data.count_by_state.invalidated || 0
+                      ]
                     },
-                    title: "Last Month Activity"
+                    colors: ['#d48265', '#61a0a8', '#c23531', '#2f4554'],
+                    type: "pie",
+                    title: "Support Request"
                   }
+                ],
+                layout: {
+                  axis_dict : {
+                    0: {"title": "date"},
+                    1: {"title": "value",  "value_type": "number"}
+                  },
+                  title: translated_message_last_month_activity
                 }
-            })
-
-          ]);
+              }
+          });
         });
     })
     .declareService(function () {
@@ -278,7 +304,7 @@
       return new RSVP.Queue()
         .push(function () {
           var restore_filter_input = gadget.element.querySelectorAll("input")[1],
-            one = loopEventListener(restore_filter_input, "click", false, function () {
+            one = rJS.loopEventListener(restore_filter_input, "click", false, function () {
               restore_filter_input.disabled = true;
               restore_filter_input.classList.add("ui-disabled");
               return gadget.redirect({
@@ -311,8 +337,7 @@
             view_list = erp5_document._links.view || [];
 
           gadget.property_dict.option_dict = {
-            // graph_gadget: Keep ending slash to be consistent with the automatically set "base" tag
-            graph_gadget: "unsafe/gadget_field_graph_echarts.html/",
+            graph_gadget: "gadget_field_graph_echarts.html",
             listbox_gadget: getActionListByName(view_list, "view_last_support_request")[0].href,
             listbox_jio_key: "support_request_module",
             field_listbox_begin_from: field_listbox_begin_from
@@ -344,4 +369,4 @@
         });
     });
 
-}(window, rJS, RSVP, promiseEventListener, rJS.loopEventListener));
+}(window, rJS, RSVP));

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_homepage_js.xml

@@ -248,7 +248,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>989.27549.43950.31078</string> </value>
+                      <value> <string>1010.61995.46538.53572</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -268,7 +268,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1613149261.83</float>
+                              <float>1694082778.57</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_page_worklist_html.html

 <!DOCTYPE html>
 <html>
-<!--
-  data-i18n=Worklist
-  data-i18n=All work caught up!
--->
   <head>
+    <!--
+      data-i18n="All work caught up!"
+    -->
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>ERP5 Page Worklist</title>
 
     <!-- renderjs -->
-    <script src="rsvp.js" type="text/javascript"></script>
-    <script src="renderjs.js" type="text/javascript"></script>
-    <script src="handlebars.js" type="text/javascript"></script>
-    <script src="jiodev.js" type="text/javascript"></script>
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="jiodev.js"></script>
 
     <!-- custom script -->
-    <script src="gadget_global.js" type="text/javascript"></script>
-    <script src="gadget_supportrequest_page_worklist.js" type="text/javascript"></script>
-
-    <!-- XXX must set theme here! -->
-    <script id="table-template" type="text/x-handlebars-template">
-      {{#if document_list }}
-      <ul data-role="listview" data-theme="c" class="document-listview ui-listview-inset ui-corner-all">
-        {{#each document_list}}
-          <li class="ui-li-has-count" data-icon="false" ><a class="ui-body-inherit" href="{{link}}">{{title}} <span class="ui-li-count">{{count}}</span></a></li>
-        {{/each}}
-      </ul>
-      {{else}}
-        <p>All work caught up!</p>
-      {{/if}}
-    </script>
-
+    <script src="domsugar.js"></script>
+    <script src="gadget_global.js"></script>
+    <script src="gadget_supportrequest_page_worklist.js"></script>
   </head>
   <body>
     <section class="document_list"></section>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_page_worklist_html.xml

@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1506514266.01</float>
+                              <float>1694060576.91</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_page_worklist_js.js

-/*global window, rJS, RSVP, Handlebars, Query */
+/*global window, rJS, RSVP, Query, domsugar */
 /*jslint nomen: true, indent: 2, maxerr: 3 */
-(function (window, rJS, RSVP, Handlebars, Query) {
+(function (window, rJS, RSVP, Query, domsugar) {
   "use strict";
 
-  /////////////////////////////////////////////////////////////////
-  // Handlebars
-  /////////////////////////////////////////////////////////////////
-  // Precompile the templates while loading the first gadget instance
-  var gadget_klass = rJS(window),
-    source = gadget_klass.__template_element
-                         .getElementById("table-template")
-                         .innerHTML,
-    table_template = Handlebars.compile(source);
-
-  gadget_klass
+  rJS(window)
     /////////////////////////////////////////////////////////////////
     // Acquired methods
     /////////////////////////////////////////////////////////////////
     .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
-    .declareAcquiredMethod("translateHtml", "translateHtml")
+    .declareAcquiredMethod("translate", "translate")
     .declareAcquiredMethod("updateHeader", "updateHeader")
     .declareAcquiredMethod("getSetting", "getSetting")
     .declareAcquiredMethod("getUrlFor", "getUrlFor")
@@ -70,17 +60,54 @@
           return RSVP.all(promise_list);
         })
         .push(function (result_list) {
-          var line_list = [], i;
-          for (i = 0; i < result_list.length; i += 1) {
-            line_list.push({
-              link: result_list[i][0],
-              title: result_list[i][1],
-              count: result_list[i][2]
-            });
+          if (result_list.length) {
+            return domsugar(
+              "ul",
+              {
+                "data-role": "listview",
+                "data-theme": "c",
+                "class": "document-listview ui-listview-inset ui-corner-all"
+              },
+              result_list.map(function (r) {
+                var link = r[0], title = r[1], count = r[2];
+                return domsugar(
+                  "li",
+                  {
+                    "class": "ui-li-has-count",
+                    "data-icon": "false"
+                  },
+                  [
+                    domsugar(
+                      "a",
+                      {
+                        "class": "ui-body-inherit",
+                        "href": link
+                      },
+                      [
+                        title,
+                        " ",
+                        domsugar(
+                          "span",
+                          { "class": "ui-li-count" },
+                          [count.toString()]
+                        )
+                      ]
+                    )
+                  ]
+                );
+              })
+            );
           }
-          gadget.element.querySelector('.document_list').innerHTML = table_template({
-            document_list: line_list
-          });
+          return gadget.translate("All work caught up!")
+            .push(function (messageNoWorklist) {
+              return domsugar("p", [messageNoWorklist]);
+            });
+        })
+        .push(function (dom_list) {
+          domsugar(
+            gadget.element.querySelector('.document_list'),
+            [dom_list]
+          );
         });
     });
-}(window, rJS, RSVP, Handlebars, Query));
\ No newline at end of file
+}(window, rJS, RSVP, Query, domsugar));
\ No newline at end of file

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_page_worklist_js.xml

@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1506505200.17</float>
+                              <float>1694062935.94</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_panel_html.html

@@ -3,75 +3,54 @@
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <title>ERP5 Panel</title>
+    <title>Support Requests Panel</title>
+    <link rel="http://www.renderjs.org/rel/interface" href="interface_panel.html">
+    <!--
+      data-i18n="Home"
+      data-i18n="Support Requests"
+      data-i18n="Preferences"
+      data-i18n="Logout"
+      data-i18n="Views"
+      data-i18n="Decisions"
+      data-i18n="Actions"
+      data-i18n="Jumps"
+    -->
 
     <!-- renderjs -->
-    <script src="rsvp.js" type="text/javascript"></script>
-    <script src="renderjs.js" type="text/javascript"></script>
-    <script src="handlebars.js" type="text/javascript"></script>
-    <script src="gadget_global.js" type="text/javascript"></script>
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
+    <script src="domsugar.js"></script>
+    <script src="jiodev.js"></script>
+    <script src="gadget_global.js"></script>
+    <script src="gadget_erp5_global.js"></script>
 
-    <script id="panel-template-header" type="text/x-handlebars-template">
-      <div data-role="header" class="ui-bar-inherit">
-        <div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
+    <!-- custom script -->
+    <script src="gadget_supportrequest_panel.js"></script>
+
+  </head>
+  <body>
+    <div>
+      <div data-role="header">
+        <div class="ui-btn-left">
           <div class="ui-controlgroup-controls">
-            <button data-i18n="Close" class="ui-btn ui-btn-icon-notext ui-icon-delete">Close</button>
+            <button data-i18n="Close" class="ui-btn-icon-notext ui-icon-delete">Close</button>
           </div>
         </div>
         <div class="panel_img">
-        <img class="ui-title" alt="ERP5" src="gadget_erp5_panel.png"/>
+        <img alt="ERP5" src="gadget_erp5_panel.png"/>
         </div>
       </div>
-    </script>
+      <div>
 
-    <script id="panel-template-body" type="text/x-handlebars-template">
-      <div class="ui-content">
-
-        <form class="dialog_form">
-          <button type="submit" class="ui-btn ui-btn-b ui-btn-inline
-                                       ui-icon-action ui-btn-icon-right ui-screen-hidden">Submit</button>
+        <form>
+          <button type="submit" class="ui-icon-action ui-btn-icon-right ui-screen-hidden">Submit</button>
           <div data-gadget-url="gadget_erp5_searchfield.html"
                data-gadget-scope="erp5_searchfield"
                data-gadget-sandbox="public"></div>
         </form>
-
-        <ul data-role="listview" class="ui-listview" data-enhanced="true">
-          <li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-left ui-icon-home" data-i18n="Home">Home</a></li>
-          <li><a href="{{supportrequest_href}}" class="ui-btn ui-btn-icon-left ui-icon-life-ring" data-i18n="Support Requests">Support Requests</a></li>
-          <li><a href="{{preference_href}}" class="ui-btn ui-btn-icon-left ui-icon-sliders" data-i18n="Preferences">Preferences</a></li>
-          <li class="ui-last-child"><a href="{{logout_href}}" class="ui-btn ui-btn-icon-left ui-icon-power-off" data-i18n="Logout" accesskey="o">Logout</a></li>
-        </ul>
+        <ul></ul>
         <dl></dl>
       </div>
-    </script>
-
-    <script id="panel-template-body-desktop" type="text/x-handlebars-template">
-        <dt class="ui-content-title ui-body-c ui-btn ui-btn-icon-left ui-icon-eye" data-i18n="Views">Views</dt>
-        {{#each view_list}}
-        <dd data-role="listview" data-theme="c" data-inset="true" class="document-listview">
-          <a data-i18n="{{title}}" class="ui-body-inherit" href="{{href}}">{{title}}</a>
-        </dd>
-        {{/each}}
-        <dt class="ui-content-title ui-body-c  ui-btn ui-btn-icon-left ui-icon-cogs" data-i18n="Decisions">Decisions</dt>
-        {{#each workflow_list}}
-        <dd data-role="listview" data-theme="c" data-inset="true" class="document-listview">
-          <a data-i18n="{{title}}" class="ui-body-inherit" href="{{href}}">{{title}}</a>
-        </dd>
-        {{/each}}
-        <dt class="ui-content-title ui-body-c  ui-btn ui-btn-icon-left ui-icon-plane" data-i18n="Jumps">Jumps</dt>
-        {{#each jump_list}}
-        <dd data-role="listview" data-theme="c" data-inset="true" class="document-listview">
-          <a data-i18n="{{title}}" class="ui-body-inherit" href="{{href}}">{{title}}</a>
-        </dd>
-        {{/each}}
-    </script>
-
-    <!-- custom script -->
-    <script src="gadget_supportrequest_panel.js" type="text/javascript"></script>
-
-  </head>
-  <body>
-
-  <div class="jqm-navmenu-panel"></div>
+    </div>
   </body>
 </html>
\ No newline at end of file

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_panel_html.xml

@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1625463570.56</float>
+                              <float>1694148611.08</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_panel_js.xml

@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1625467130.12</float>
+                              <float>1694147830.81</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_css.css

@@ -11,47 +11,9 @@ hr#post_item {
   margin-bottom: 20px;
 }
 
-#post_list li ol {
-  list-style: initial;
-  list-style-type: decimal;
-  padding-left: 2em;
-}
-
-#post_list li ul {
-  list-style: initial;
-  padding-left: 2em;
-}
-
-#post_list li p {
-  margin-block-start: 1em;
-  margin-block-end: 1em;
-}
-
-#post_list li h1 {
-  font-size: 2em;
-  font-weight: bold;
-}
-
-#post_list li h2 {
-  font-size: 1.5em;
-  font-weight: bold;
-}
-
-#post_list li h3 {
-  font-size: 1.17em;
-  font-weight: bold;
-}
-
-#post_list li h4 {
-  font-weight: bold;
-}
-
-#post_list li h5 {
-  font-size: 0.83em;
-  font-weight: bold;
-}
-
-#post_list li h6 {
-  font-size: 0.67em;
-  font-weight: bold;
+.comments-header {
+  background-color:#0E81C2;
+  color:white;
+  margin:1em 0;
+  padding:0.5em;
 }

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_css.xml

@@ -268,8 +268,8 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1542361236.16</float>
-                              <string>GMT+9</string>
+                              <float>1694060317.8</float>
+                              <string>UTC</string>
                             </tuple>
                           </state>
                         </object>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_html.html

 <!DOCTYPE html>
 <html>
+  <!--
+    data-i18n="Posting comment"
+    data-i18n="Post content can not be empty!"
+    data-i18n="Comment added"
+    data-i18n="No comment yet."
+    data-i18n="By"
+    data-i18n="Attachment:"
+    -->
   <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width" />
     <title>ERP5 PT Form View</title>
 
     <!-- renderjs -->
-    <script src="rsvp.js" type="text/javascript"></script>
-    <script src="renderjs.js" type="text/javascript"></script>
+    <script src="rsvp.js"></script>
+    <script src="renderjs.js"></script>
 
     <!-- custom script -->
-    <script src="handlebars.js" type="text/javascript"></script>
-    <script src="gadget_global.js" type="text/javascript"></script>
-    <script src="jiodev.js" type="text/javascript"></script>
-    <script src="gadget_erp5_global.js" type="text/javascript"></script>
-    <script src="gadget_erp5_pt_form_view_discussable.js" type="text/javascript"></script>
+    <script src="domsugar.js"></script>
+    <script src="gadget_global.js"></script>
+    <script src="jiodev.js"></script>
+    <script src="gadget_erp5_global.js"></script>
+    <script src="gadget_erp5_pt_form_view_discussable.js"></script>
     <link rel="stylesheet" type="text/css" href="gadget_erp5_pt_form_view_discussable.css">
-    
-    <!-- templates -->
-    <script id="template-document-list" type="text/x-handlebars-template">
-      {{#if comments }}
-        {{#each comments }}
-          <li>By <strong>{{ user }}</strong> -
-            <time datetime="{{ date }}" title="{{ date_formatted }}">{{ date_relative }}</time>
-            <br/>
-            {{{ text }}}
-            {{#if attachment_link }}
-              <br/>
-              <strong>Attachment: </strong>
-              <a href="{{attachment_link}}">{{ attachment_name }}</a>
-            {{/if}}
-            <hr id="post_item">
-          </li>
-        {{/each }}
-      {{else }}
-        <p><em>No comment yet.</em></p><hr id="post_item">
-      {{/if }}
-    </script>
 
   </head>
   <body>
@@ -49,18 +36,21 @@
       </div>
 
       <form>
-        <p style="background-color:#0E81C2;color:white;margin:1em 0;padding:0.5em">Comments:</p>
-        <ol id="post_list"></ol>
-        <h3 class="ui-content-title ui-body-c ui-icon ui-icon-custom ui-icon-random" id="comment-title" name="comment-title">&nbsp;Post a comment</h3>
+        <div>
+          <p class="comments-header" data-i18n="Comments:">Comments:</p>
+          <ol id="post_list"></ol>
+          <h3 class="ui-content-title ui-body-c ui-icon ui-icon-custom ui-icon-random" id="comment-title" name="comment-title" data-i18n="Post Comment">&nbsp;Post a comment</h3>
+        </div>
         <div data-gadget-url="gadget_editor.html"
              data-gadget-scope="editor"
              data-gadget-sandbox="">
         </div>
-
         <div id="file_upload_div">
           <input value="" name="attachment" id="attachment" type="file" title="Upload">
         </div>
-        <input data-theme="b" data-inline="true" type="submit" data-i18n="[value]Post Comment" value="Post Comment" data-icon="check" disabled class="ui-disabled"/>
+        <div>
+          <input data-theme="b" data-inline="true" type="submit" data-i18n="[value]Post Comment" value="Post Comment" data-icon="check" disabled class="ui-disabled"/>
+        </div>
       </form>
     </div>
   </body>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_html.xml

@@ -240,7 +240,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>974.28140.2414.14967</string> </value>
+                      <value> <string>1010.62469.29459.39441</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1554190620.27</float>
+                              <float>1694063872.02</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_page_module/gadget_supportrequest_pt_form_view_discussable_js.xml

@@ -240,7 +240,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>985.17756.63769.9284</string> </value>
+                      <value> <string>1010.63187.6525.24985</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1625719287.68</float>
+                              <float>1694063993.84</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_officejs_support_request_ui/PathTemplateItem/web_site_module/erp5_officejs_support_request_ui.xml

@@ -366,7 +366,7 @@
         </item>
         <item>
             <key> <string>configuration_content_security_policy</string> </key>
-            <value> <string>default-src \'self\'; img-src \'self\' data:; media-src \'self\' blob:; connect-src \'self\' data:; script-src \'self\' \'unsafe-eval\'; font-src \'self\'; style-src \'self\' \'unsafe-inline\' data:; frame-src \'self\' data:</string> </value>
+            <value> <string>default-src \'self\'; img-src \'self\' data:; media-src \'self\' blob:; connect-src \'self\' data:; script-src \'self\'; font-src \'self\'; style-src \'self\' data:; frame-src \'self\' data:</string> </value>
         </item>
         <item>
             <key> <string>configuration_default_view_action_reference</string> </key>

bt5/erp5_officejs_support_request_ui/SkinTemplateItem/portal_skins/erp5_officejs_support_request/ERP5Site_getTicketWorkflowStateInfoDict.py

@@ -11,10 +11,7 @@ workflow = portal.portal_workflow.ticket_workflow
 
 for state in workflow.getStateValueList():
   state_title = state.title_or_id()
-  if 0:
-    # We don't translate yet, it needs several other fixes
-    # see https://lab.nexedi.com/nexedi/erp5/merge_requests/778
-    state_title = unicode(translateString(
+  state_title = unicode(translateString(
       '%s [state in %s]' % (state_title, workflow.getId()),
       default=unicode(translateString(state_title))))
   info[state.getReference()] = state_title

bt5/erp5_officejs_support_request_ui/SkinTemplateItem/portal_skins/erp5_officejs_support_request/WebSection_getOfficeJSSupportRequestPrecacheManifestList.py

 url_list = [
-  'handlebars.js',
   'gadget_supportrequest_header.html',
   'gadget_supportrequest_header.js',
   'gadget_erp5_page_homepage.css',
@@ -14,19 +13,15 @@ url_list = [
   'gadget_erp5_pt_form_view_discussable.css',
   'gadget_erp5_pt_form_view_discussable.html',
   'gadget_erp5_pt_form_view_discussable.js',
-  'gadget_field_graph_echarts.html',
-  'gadget_field_graph_echarts.js',
   'gadget_supportrequest_page_worklist.html',
   'gadget_supportrequest_page_worklist.js',
   'gadget_supportrequest_panel.html',
   'gadget_supportrequest_panel.js',
-  # Echarts. Should probably be a separated script
-  'unsafe/gadget_field_graph_echarts.html/',
-  'unsafe/gadget_field_graph_echarts.html/rsvp.js',
-  'unsafe/gadget_field_graph_echarts.html/renderjs.js',
-  'unsafe/gadget_field_graph_echarts.html/echarts-all.js',
-  'unsafe/gadget_field_graph_echarts.html/gadget_global.js',
-  'unsafe/gadget_field_graph_echarts.html/unsafe/gadget_field_graph_echarts.js',
+  # Echarts. Could probably be a separated script
+  'gadget_field_graph_echarts.html',
+  'gadget_field_graph_echarts.css',
+  'gadget_field_graph_echarts.js',
+  'echarts-all.js',
 ]
 
 return url_list

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testAddSupportRequest.zpt

@@ -71,7 +71,7 @@
 </tr>
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li/p</td>
+  <td>//ol[@id="post_list"]//li//p</td>
   <td>Post test</td>
 </tr>
 <tr>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testAddSupportRequestAttachment.zpt

@@ -90,7 +90,7 @@
         </tr>
         <tr>
           <td>waitForText</td>
-          <td>//ol[@id="post_list"]//li/p</td>
+          <td>//ol[@id="post_list"]//li//p</td>
           <td>Post test</td>
         </tr>
         <tr>
@@ -207,12 +207,12 @@
         </tal:block>
         <tr>
           <td>waitForElementPresent</td>
-          <td>//a[@data-i18n="Home"]</td>
+          <td>//a[contains(@class, "ui-icon-home") and text() = "Home"]</td>
           <td></td>
         </tr>
         <tr>
           <td>click</td>
-          <td>//a[@data-i18n="Home"]</td>
+          <td>//a[contains(@class, "ui-icon-home") and text() = "Home"]</td>
           <td></td>
         </tr>
         <tr>
@@ -324,12 +324,12 @@
         </tr>
         <tr>
           <td>waitForElementPresent</td>
-          <td>//div[@data-gadget-scope="panel"]//a[@data-i18n="Documents"]</td>
+          <td>//div[@data-gadget-scope="panel"]//a[text() = "Documents"]</td>
           <td></td>
         </tr>
         <tr>
           <td>click</td>
-          <td>//div[@data-gadget-scope="panel"]//a[@data-i18n="Documents"]</td>
+          <td>//div[@data-gadget-scope="panel"]//a[text() = "Documents"]</td>
           <td></td>
         </tr>
         <tal:block tal:define="notification_configuration python: {'class': 'success',

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testCheckComment.zpt

@@ -56,12 +56,7 @@
 
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[1]/p</td>
-  <td>Post test 1</td>
-</tr>
-<tr>
-  <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[1]/p</td>
+  <td>//ol[@id="post_list"]//li[1]//p</td>
   <td>Post test 1</td>
 </tr>
 <tr>
@@ -115,12 +110,12 @@ displayed
 </tr>
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[2]/p</td>
+  <td>//ol[@id="post_list"]//li[2]//p</td>
   <td>Post test 2</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//ol[@id="post_list"]//li[1]/p</td>
+  <td>//ol[@id="post_list"]//li[1]//p</td>
   <td>Post test 1</td>
 </tr>
 <tr>
@@ -171,17 +166,17 @@ post ingested when submitting a new support request.
 </tr>
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[3]/p</td>
+  <td>//ol[@id="post_list"]//li[3]//p</td>
   <td>Post test 3</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//ol[@id="post_list"]//li[1]/p</td>
+  <td>//ol[@id="post_list"]//li[1]//p</td>
   <td>Post test 1</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//ol[@id="post_list"]//li[2]/p</td>
+  <td>//ol[@id="post_list"]//li[2]//p</td>
   <td>Post test 2</td>
 </tr>
 
@@ -252,7 +247,7 @@ and check that the relative time was updated.
 </tr>
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[3]/p</td>
+  <td>//ol[@id="post_list"]//li[3]//p</td>
   <td>Post test 4</td>
 </tr>
 </tbody></table>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testDoubleSubmitComment.zpt

@@ -56,7 +56,7 @@
 
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[1]/p</td>
+  <td>//ol[@id="post_list"]//li[1]//p</td>
   <td>First Post Content</td>
 </tr>
 
@@ -136,18 +136,18 @@
 <!-- The second post was submitted only once. -->
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[1]/p</td>
+  <td>//ol[@id="post_list"]//li[1]//p</td>
   <td>First Post Content</td>
 </tr>
 <tr>
   <td>waitForText</td>
-  <td>//ol[@id="post_list"]//li[2]/p</td>
+  <td>//ol[@id="post_list"]//li[2]//p</td>
   <td>Second Post Content</td>
 </tr>
 
 <tr>
   <td>assertElementNotPresent</td>
-  <td>//ol[@id="post_list"]//li[3]/p</td>
+  <td>//ol[@id="post_list"]//li[3]//p</td>
   <td></td>
 </tr>
 

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testHomePageRSS.zpt

@@ -26,17 +26,12 @@
 </tr>
 <tr>
   <td>waitForElementPresent</td>
-  <td>//a[@data-i18n="Support Requests"]</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertElementPresent</td>
-  <td>//a[@data-i18n="Support Requests"]</td>
+  <td>//a[contains(@class, "ui-icon-life-ring") and text() = "Support Requests"]</td>
   <td></td>
 </tr>
 <tr>
   <td>click</td>
-  <td>//a[@data-i18n="Support Requests"]</td>
+  <td>//a[contains(@class, "ui-icon-life-ring") and text() = "Support Requests"]</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testLatestPostOnFrontPage.zpt

@@ -72,10 +72,10 @@
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
 
 <tr><td>waitForText</td>
-    <td>//ol[@id="post_list"]//li/p</td>
+    <td>//ol[@id="post_list"]//li//p</td>
     <td>Post test</td></tr>
 <tr><td>assertText</td>
-    <td>//ol[@id="post_list"]//li/p</td>
+    <td>//ol[@id="post_list"]//li//p</td>
     <td>Post test</td></tr>
 <tr><td colspan="3"><b>Go back ot front page and check "latest post" columns</b></td></tr>
 

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testSupportRequestModuleAccess.zpt

@@ -18,13 +18,13 @@
 
 <tr>
   <td>click</td>
-  <td>//a[@data-i18n='Support Requests']</td>
+  <td>//a[contains(@class, "ui-icon-life-ring") and text() = "Support Requests"]</td>
   <td></td>
 </tr>
 <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
 <tr>
   <td>assertElementPresent</td>
-  <td>//a[@data-i18n='Support Requests']</td>
+  <td>//a[contains(@class, "ui-icon-life-ring") and text() = "Support Requests"]</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testViewSupportRequest.zpt

@@ -16,17 +16,12 @@
 </tr>
 <tr>
   <td>waitForElementPresent</td>
-  <td>//a[@data-i18n="Support Requests"]</td>
-  <td></td>
-</tr>
-<tr>
-  <td>assertElementPresent</td>
-  <td>//a[@data-i18n="Support Requests"]</td>
+  <td>//a[contains(@class, "ui-icon-life-ring") and text() = "Support Requests"]</td>
   <td></td>
 </tr>
 <tr>
   <td>click</td>
-  <td>//a[@data-i18n="Support Requests"]</td>
+  <td>//a[contains(@class, "ui-icon-life-ring") and text() = "Support Requests"]</td>
   <td></td>
 </tr>
 <tr>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/testWorklist.zpt

@@ -21,10 +21,9 @@
 
 <tr>
   <td>assertElementPresent</td>
-  <td>//h1[@data-i18n="[value]Support Request WorkLists"]</td>
+  <td>//h1[@data-i18n="Support Request WorkLists"]</td>
   <td></td>
 </tr>
-
 <tr>
   <td>assertElementPresent</td>
   <td>//section[@class="document_list"]//li[1]</td>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testHomePageListboxTranslation.xml

@@ -54,7 +54,7 @@
         </item>
         <item>
             <key> <string>title</string> </key>
-            <value> <unicode></unicode> </value>
+            <value> <unicode>Home Page Listbox Translation</unicode> </value>
         </item>
       </dictionary>
     </pickle>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testHomePageListboxTranslation.zpt

 <html>
   <head>
-    <title tal:content="template/title">The title</title>
+    <title tal:content="template/title_and_id"></title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
   </head>
   <body>
   <table cellpadding="1" cellspacing="1" border="1">
 <thead>
-<tr><td rowspan="1" colspan="3">Home Page Listbox Translation</td></tr>
+<tr><td rowspan="1" colspan="3" tal:content="template/title_and_id"></td></tr>
 </thead><tbody>
 <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/init" />
 <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/cleanup_module" />
@@ -24,11 +24,6 @@
   <td>//input[@data-i18n='[value]Submit New Support Request']</td>
   <td></td>
 </tr>
-<tr>
-  <td>assertElementPresent</td>
-  <td>//input[@data-i18n='[value]Submit New Support Request']</td>
-  <td></td>
-</tr>
 <tr>
   <td>waitForElementPresent</td>
   <td>//div[@class="document_table"]//tr/td[1]</td>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testHomePageTranslation-reference-snapshot-1.png.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="Image" module="OFS.Image"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>__name__</string> </key>
+            <value> <string>testHomePageTranslation-reference-snapshot-1.png</string> </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>image/png</string> </value>
+        </item>
+        <item>
+            <key> <string>height</string> </key>
+            <value> <int>285</int> </value>
+        </item>
+        <item>
+            <key> <string>precondition</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>width</string> </key>
+            <value> <int>503</int> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testHomePageTranslation-reference-snapshot-2.png.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="Image" module="OFS.Image"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>__name__</string> </key>
+            <value> <string>testHomePageTranslation-reference-snapshot-2.png</string> </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>image/png</string> </value>
+        </item>
+        <item>
+            <key> <string>height</string> </key>
+            <value> <int>285</int> </value>
+        </item>
+        <item>
+            <key> <string>precondition</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>width</string> </key>
+            <value> <int>488</int> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testHomePageTranslation.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="_reconstructor" module="copy_reg"/>
+                </klass>
+                <tuple>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                  <global name="object" module="__builtin__"/>
+                  <none/>
+                </tuple>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>testHomePageTranslation</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>utf-8</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode>Home Page Translation</unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testHomePageTranslation.zpt

+<html>
+
+<head>
+  <title tal:content="template/title_and_id"></title>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8">
+</head>
+
+<body>
+  <table cellpadding="1" cellspacing="1" border="1">
+    <thead>
+      <tr>
+        <td rowspan="1" colspan="3" tal:content="template/title_and_id"></td>
+      </tr>
+    </thead>
+    <tbody>
+      <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/init" />
+      <tr>
+        <td>open</td>
+        <td>${base_url}/web_site_module/erp5_officejs_support_request_ui/fr/</td>
+        <td></td>
+      </tr>
+      <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_app_loaded" />
+      <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_listbox_loaded" />
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//input[@data-i18n='[value]Submit New Support Request']</td>
+        <td></td>
+      </tr>
+
+      <!-- check graphs match snapshots -->
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>css=#wrap1 iframe</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>selectFrame</td>
+        <td>css=#wrap1 iframe</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//canvas</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//div[@class="graph-content" and not(@disabled)]</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>verifyImageMatchSnapshot</td>
+        <td>//canvas</td>
+        <td>0</td>
+      </tr>
+      <!-- TODO: click and check listbox -->
+      <tr>
+        <td>selectFrame</td>
+        <td>relative=top</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>css=#wrap2 iframe</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>selectFrame</td>
+        <td>css=#wrap2 iframe</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//canvas</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//div[@class="graph-content" and not(@disabled)]</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>verifyImageMatchSnapshot</td>
+        <td>//canvas</td>
+        <td>0</td>
+      </tr>
+      <!-- TODO: click and check listbox -->
+      <tr>
+        <td>selectFrame</td>
+        <td>relative=top</td>
+        <td></td>
+      </tr>
+
+
+      <!-- worklists -->
+      <tr>
+        <td>assertText</td>
+        <td>//h1[@data-i18n="Support Request WorkLists"]</td>
+        <td>Listes de travail des demandes d'assistance</td>
+      </tr>
+      <tr>
+        <td>assertElementPresent</td>
+        <td>//div[@data-gadget-scope="worklist"]//ul/li/a[text()="Demandes d'assistance à ouvrir"]/span[text()="1"]</td>
+        <td></td>
+      </tr>
+
+
+    </tbody>
+  </table>
+</body>
+
+</html>
\ No newline at end of file

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testSubmitSupportRequestTranslation.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_bind_names</string> </key>
+            <value>
+              <object>
+                <klass>
+                  <global name="_reconstructor" module="copy_reg"/>
+                </klass>
+                <tuple>
+                  <global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
+                  <global name="object" module="__builtin__"/>
+                  <none/>
+                </tuple>
+                <state>
+                  <dictionary>
+                    <item>
+                        <key> <string>_asgns</string> </key>
+                        <value>
+                          <dictionary>
+                            <item>
+                                <key> <string>name_subpath</string> </key>
+                                <value> <string>traverse_subpath</string> </value>
+                            </item>
+                          </dictionary>
+                        </value>
+                    </item>
+                  </dictionary>
+                </state>
+              </object>
+            </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/html</string> </value>
+        </item>
+        <item>
+            <key> <string>expand</string> </key>
+            <value> <int>0</int> </value>
+        </item>
+        <item>
+            <key> <string>id</string> </key>
+            <value> <string>testSubmitSupportRequestTranslation</string> </value>
+        </item>
+        <item>
+            <key> <string>output_encoding</string> </key>
+            <value> <string>utf-8</string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <unicode>Submit Request Request Translation</unicode> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testSubmitSupportRequestTranslation.zpt

+<html>
+
+<head>
+  <title tal:content="template/title_and_id"></title>
+  <meta http-equiv="content-type" content="text/html;charset=utf-8">
+</head>
+
+<body>
+  <table cellpadding="1" cellspacing="1" border="1">
+    <thead>
+      <tr>
+        <td rowspan="1" colspan="3" tal:content="template/title_and_id"></td>
+      </tr>
+    </thead>
+    <tbody>
+      <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/init" />
+      <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/cleanup_module" />
+      <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/create_data" />
+
+      <tr>
+        <td>open</td>
+        <td>${base_url}/web_site_module/erp5_officejs_support_request_ui/fr/</td>
+        <td></td>
+      </tr>
+      <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_app_loaded" />
+      <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_listbox_loaded" />
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//input[@data-i18n='[value]Submit New Support Request']</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>assertValue</td>
+        <td>//input[@data-i18n='[value]Submit New Support Request']</td>
+        <td>Soumettre une nouvelle demande d'assistance</td>
+      </tr>
+
+      <tr>
+        <td>click</td>
+        <td>//a/input[@data-i18n="[value]Submit New Support Request"]</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//input[@class="dialogconfirm"]</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>assertValue</td>
+        <td>//input[@class="dialogconfirm"]</td>
+        <td>Soumettre une nouvelle demande d'assistance</td>
+      </tr>
+      <tr>
+        <td>assertText</td>
+        <td>//h3[contains(@class, "ui-content-title")]</td>
+        <td>Soumettre une nouvelle demande d'assistance</td>
+      </tr>
+      <tr>
+        <td>setFile</td>
+        <td>field_your_file</td>
+        <td>portal_skins/erp5_officejs_support_request_test/test_support_request_text.pdf test_support_request_text.pdf
+        </td>
+      </tr>
+      <tr>
+        <td>type</td>
+        <td>field_your_title</td>
+        <td>à l'aide !</td>
+      </tr>
+      <tr>
+        <td>assertSelected</td>
+        <td>field_your_project</td>
+        <td>RobotMaking</td>
+      </tr>
+      <tr>
+        <td>waitForElementPresent</td>
+        <td>//select[@name="field_your_resource"]/option[text()="FeatureRequire"]</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>select</td>
+        <td>field_your_resource</td>
+        <td>FeatureRequire</td>
+      </tr>
+
+      <tal:block tal:define="text_content string:Le message">
+        <tal:block metal:use-macro="container/Zuite_CommonTemplateForRenderjsUi/macros/type_ckeditor_text_content" />
+      </tal:block>
+
+      <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_dialog" />
+      <!-- XXX this is here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_notification but with a trick to escape the message that already contain a ' which needs to be escaped -->
+      <tal:block>
+        <tr>
+          <td colspan="3"><b>Wait for the notification message</b></td>
+        </tr>
+        <tr>
+          <td>waitForElementPresent</td>
+          <td>//div[@data-gadget-scope='notification' and @class='visible']//button[@class='success' and
+            text()="Nouvelle demande d'assistance créée."]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td>assertElementPresent</td>
+          <td>//div[@data-gadget-scope='notification' and @class='visible']//button[@class='success' and
+            text()="Nouvelle demande d'assistance créée."]</td>
+          <td></td>
+        </tr>
+        <tr>
+          <td colspan="3">
+            <p></p>
+          </td>
+        </tr>
+      </tal:block>
+      <tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/wait_for_content_loaded" />
+
+      <tr>
+        <td>waitForText</td>
+        <td>//ol[@id="post_list"]//li[1]//p</td>
+        <td>Le message</td>
+      </tr>
+      <tr>
+        <td>assertText</td>
+        <td>//ol[@id="post_list"]//li[1]</td>
+        <td>regex:Par .*-.*il y a quelques secondes.*</td>
+      </tr>
+      <tr>
+        <td>assertText</td>
+        <td>//ol[@id="post_list"]//li[1]/strong[2]</td>
+        <td>Pièce jointe:</td>
+      </tr>
+      <tr>
+        <td>assertText</td>
+        <td>//p[@data-i18n="Comments:"]</td>
+        <td>Commentaires:</td>
+      </tr>
+
+    </tbody>
+  </table>
+</body>
+
+</html>
\ No newline at end of file

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testSupportRequestPanelTranslation.xml

@@ -54,7 +54,7 @@
         </item>
         <item>
             <key> <string>title</string> </key>
-            <value> <unicode></unicode> </value>
+            <value> <unicode>Support Request Panel Translation</unicode> </value>
         </item>
       </dictionary>
     </pickle>

bt5/erp5_officejs_support_request_ui_test/PathTemplateItem/portal_tests/officejs_support_request_ui_zuite/translation_zuite/testSupportRequestPanelTranslation.zpt

 <html>
   <head>
-    <title tal:content="template/title">Support Request Panel Translation</title>
+    <title tal:content="template/title_and_id"></title>
     <meta http-equiv="content-type" content="text/html;charset=utf-8">
   </head>
   <body>
   <table cellpadding="1" cellspacing="1" border="1">
 <thead>
-<tr><td rowspan="1" colspan="3">Support Request Panel Translation</td></tr>
+<tr><td rowspan="1" colspan="3" tal:content="template/title_and_id"></td></tr>
 </thead><tbody>
 <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/init" />
 <tal:block metal:use-macro="here/Zuite_SupportRequestUITemplate/macros/cleanup_module" />
@@ -54,55 +54,55 @@
 
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//a[contains(@class, "ui-icon-home")]</td>
+  <td>//div[@data-gadget-scope="panel"]//a[contains(@class, "ui-icon-home")]</td>
   <td>Accueil</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//a[contains(@class, "ui-icon-life-ring")]</td>
+  <td>//div[@data-gadget-scope="panel"]//a[contains(@class, "ui-icon-life-ring")]</td>
   <td>Demandes d'assistance</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//a[contains(@class, "ui-icon-sliders")]</td>
+  <td>//div[@data-gadget-scope="panel"]//a[contains(@class, "ui-icon-sliders")]</td>
   <td>Préférences</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//a[contains(@class, "ui-icon-power-off")]</td>
+  <td>//div[@data-gadget-scope="panel"]//a[contains(@class, "ui-icon-power-off")]</td>
   <td>Déconnexion</td>
 </tr>
 
 <tr>
   <td>waitForElementPresent</td>
-  <td>//div[contains(@class, "panel")]//dt[contains(@class, "ui-icon-eye")]</td>
+  <td>//div[@data-gadget-scope="panel"]//dt[contains(@class, "ui-icon-eye")]</td>
   <td></td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//dt[contains(@class, "ui-icon-eye")]</td>
+  <td>//div[@data-gadget-scope="panel"]//dt[contains(@class, "ui-icon-eye")]</td>
   <td>Vues</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//dl/dd[1]</td>
+  <td>//div[@data-gadget-scope="panel"]//dl/dd[1]</td>
   <td>Général</td>
 </tr>
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//dl/dd[2]</td>
+  <td>//div[@data-gadget-scope="panel"]//dl/dd[2]</td>
   <td>Historique</td>
 </tr>
 
 <tr>
   <td>assertText</td>
-  <td>//div[contains(@class, "panel")]//dt[contains(@class, "ui-icon-cogs")]</td>
+  <td>//div[@data-gadget-scope="panel"]//dt[contains(@class, "ui-icon-cogs")]</td>
   <td>Décisions</td>
 </tr>
 
 <tr>
   <td>assertElementPresent</td>
-  <td>//div[contains(@class, "panel")]//dl/dd/a[text() = "Clôturer le ticket"]</td>
+  <td>//div[@data-gadget-scope="panel"]//dl/dd/a[text() = "Clôturer le ticket"]</td>
   <td></td>
 </tr>