Browse Source

[frontend] Make sure CSRF token is present before mounting web components

This also takes care of an issue where web components are mounted before knockout is activated for the page.
Johan Åhlén 4 years ago
parent
commit
ef097a6be6

+ 24 - 20
desktop/core/src/desktop/templates/common_header_footer_components.mako

@@ -61,27 +61,8 @@ else:
   </script>
   </script>
 </%def>
 </%def>
 
 
-<%def name="header_pollers(user, is_s3_enabled, apps)">
+<%def name="ajax_interceptors()">
   <script type="text/javascript">
   <script type="text/javascript">
-    Dropzone.autoDiscover = false;
-    moment.locale(window.navigator.userLanguage || window.navigator.language);
-    localeFormat = function (time) {
-      var mTime = time;
-      if (typeof ko !== 'undefined' && ko.isObservable(time)) {
-        mTime = time();
-      }
-      try {
-        mTime = new Date(mTime);
-        if (moment(mTime).isValid()) {
-          return moment.utc(mTime).local().format("L LT Z"); // [Local Date] [Local Time] [Timezone offset]
-        }
-      }
-      catch (e) {
-        return mTime;
-      }
-      return mTime;
-    };
-
     // Catches HTTP 502 errors
     // Catches HTTP 502 errors
     function xhrOnreadystatechange() {
     function xhrOnreadystatechange() {
       if (this.readyState === 4 && this.status === 502) {
       if (this.readyState === 4 && this.status === 502) {
@@ -120,6 +101,29 @@ else:
       return xhrSend.apply(this, arguments);
       return xhrSend.apply(this, arguments);
     };
     };
     XMLHttpRequest.prototype.isAugmented = true;
     XMLHttpRequest.prototype.isAugmented = true;
+  </script>
+</%def>
+
+<%def name="header_pollers(user, is_s3_enabled, apps)">
+  <script type="text/javascript">
+    Dropzone.autoDiscover = false;
+    moment.locale(window.navigator.userLanguage || window.navigator.language);
+    localeFormat = function (time) {
+      var mTime = time;
+      if (typeof ko !== 'undefined' && ko.isObservable(time)) {
+        mTime = time();
+      }
+      try {
+        mTime = new Date(mTime);
+        if (moment(mTime).isValid()) {
+          return moment.utc(mTime).local().format("L LT Z"); // [Local Date] [Local Time] [Timezone offset]
+        }
+      }
+      catch (e) {
+        return mTime;
+      }
+      return mTime;
+    };
 
 
     $.fn.dataTableExt.sErrMode = "throw";
     $.fn.dataTableExt.sErrMode = "throw";
 
 

+ 3 - 0
desktop/core/src/desktop/templates/hue.mako

@@ -77,6 +77,7 @@
   <link rel="stylesheet" href="${ static('desktop/ext/css/bootstrap-fileupload.css') }" >
   <link rel="stylesheet" href="${ static('desktop/ext/css/bootstrap-fileupload.css') }" >
 
 
   ${ commonHeaderFooterComponents.header_i18n_redirection() }
   ${ commonHeaderFooterComponents.header_i18n_redirection() }
+  ${ commonHeaderFooterComponents.ajax_interceptors() }
   <%
   <%
     global_constants_url = '/desktop/globalJsConstants.js?v=' + hue_version()
     global_constants_url = '/desktop/globalJsConstants.js?v=' + hue_version()
   %>
   %>
@@ -170,7 +171,9 @@ ${ hueIcons.symbols() }
         <a href="javascript:void(0);" style="z-index: 1002; display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-left-side-panel" data-bind="visible: !leftAssistVisible(), toggle: leftAssistVisible"><i class="fa fa-chevron-right"></i></a>
         <a href="javascript:void(0);" style="z-index: 1002; display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-left-side-panel" data-bind="visible: !leftAssistVisible(), toggle: leftAssistVisible"><i class="fa fa-chevron-right"></i></a>
         <a href="javascript:void(0);" style="display: none; opacity: 0;" title="${_('Hide Assist')}" class="pointer side-panel-toggle hide-left-side-panel" data-bind="visible: leftAssistVisible, toggle: leftAssistVisible"><i class="fa fa-chevron-left"></i></a>
         <a href="javascript:void(0);" style="display: none; opacity: 0;" title="${_('Hide Assist')}" class="pointer side-panel-toggle hide-left-side-panel" data-bind="visible: leftAssistVisible, toggle: leftAssistVisible"><i class="fa fa-chevron-left"></i></a>
         <!-- ko if: window.USE_NEW_ASSIST_PANEL -->
         <!-- ko if: window.USE_NEW_ASSIST_PANEL -->
+% if conf.USE_NEW_ASSIST_PANEL.get():
           <assist-panel-web-component></assist-panel-web-component>
           <assist-panel-web-component></assist-panel-web-component>
+% endif
         <!-- /ko -->
         <!-- /ko -->
         <!-- ko ifnot: window.USE_NEW_ASSIST_PANEL -->
         <!-- ko ifnot: window.USE_NEW_ASSIST_PANEL -->
         <div class="assist" data-bind="component: {
         <div class="assist" data-bind="component: {