feat: allow setting dashboard scripts from super_admin (#9514)

This PR allows setting scripts for `vueapp.html.erb` via super admin
config. This PR has the following changes

1. Allow `DASHBOARD_SCRIPTS` in internal config
2. Remove existing scripts from `vueapp.html.erb`
3. Add scripts from `GlobalConfig` to `vueapp.html.erb`

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

.env.example

@@ -184,12 +184,6 @@ ANDROID_SHA256_CERT_FINGERPRINT=AC:73:8E:DE:EB:56:EA:CC:10:87:02:A7:65:37:7B:38:
 # SENTRY_DSN=
 
 
-# MICROSOFT CLARITY
-# MS_CLARITY_TOKEN=xxxxxxxxx
-
-# GOOGLE_TAG_MANAGER
-# GOOGLE_TAG = GTM-XXXXXXX
-
 ## Scout
 ## https://scoutapm.com/docs/ruby/configuration
 # SCOUT_KEY=YOURKEY

app/controllers/dashboard_controller.rb

@@ -3,6 +3,7 @@ class DashboardController < ActionController::Base
 
   before_action :set_application_pack
   before_action :set_global_config
+  before_action :set_dashboard_scripts
   around_action :switch_locale
   before_action :ensure_installation_onboarding, only: [:index]
   before_action :render_hc_if_custom_domain, only: [:index]
@@ -35,6 +36,10 @@ def set_global_config
     ).merge(app_config)
   end
 
+  def set_dashboard_scripts
+    @dashboard_scripts = GlobalConfig.get_value('DASHBOARD_SCRIPTS')
+  end
+
   def ensure_installation_onboarding
     redirect_to '/installation/onboarding' if ::Redis::Alfred.get(::Redis::Alfred::CHATWOOT_INSTALLATION_ONBOARDING)
   end

app/views/layouts/vueapp.html.erb

@@ -70,40 +70,8 @@
     <div id="app"></div>
     <noscript id="noscript">This app works best with JavaScript enabled.</noscript>
     <%= yield %>
-    <% if @global_config['CHATWOOT_INBOX_TOKEN'].present? %>
-    <script>
-      window.chatwootSettings = { hideMessageBubble: true, position: 'left' };
-      (function(d,t) {
-        var BASE_URL='<%= ENV.fetch('FRONTEND_URL', 'https://app.chatwoot.com') %>';
-        var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
-        g.src=BASE_URL+"/packs/js/sdk.js"; g.defer=true; g.async=true;
-        s.parentNode.insertBefore(g,s);
-        g.onload=function(){
-          window.chatwootSDK.run({
-            websiteToken: '<%= @global_config['CHATWOOT_INBOX_TOKEN'] %>',
-            baseUrl: BASE_URL,
-          });
-        }
-      })(document,"script");
-    </script>
-    <% end %>
-    <% if ENV.fetch('MS_CLARITY_TOKEN', nil).present? %>
-      <script type="text/javascript">
-          (function(c,l,a,r,i,t,y){
-              c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-              t=l.createElement(r);t.async=1;t.src='https://www.clarity.ms/tag/'+i;
-              y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
-          })(window, document, 'clarity', 'script', '<%= ENV.fetch('MS_CLARITY_TOKEN', '') %>');
-      </script>
-    <% end %>
-    <% if ENV.fetch('GOOGLE_TAG', nil).present? %>
-    <script>
-    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
-        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
-        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
-        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-        })(window,document,'script','dataLayer', '<%= ENV.fetch('GOOGLE_TAG', '') %>');
-    </script>
+    <% if @dashboard_scripts.present? %> 
+      <%= @dashboard_scripts.html_safe %>
     <% end %>
   </body>
 </html>

app/views/super_admin/app_configs/show.html.erb

@@ -13,18 +13,25 @@
         <div class="field-unit__label">
           <%= form.label "app_config[#{key}]", @installation_configs[key]&.dig('display_title') || key %>
         </div>
-        <div class="field-unit__field -mt-2 ">
+        <div class="-mt-2 field-unit__field ">
           <% if @installation_configs[key]&.dig('type') == 'boolean' %>
             <%= form.select "app_config[#{key}]", 
               [["True", true], ["False", false]], 
               { selected: ActiveModel::Type::Boolean.new.cast(@app_config[key]) },
               class: "mt-2 border border-slate-100 p-1 rounded-md" 
             %>
+          <% elsif @installation_configs[key]&.dig('type') == 'code' %>
+            <%= form.text_area "app_config[#{key}]", 
+                value: @app_config[key], 
+                rows: 12,
+                wrap: 'off',
+                class: "mt-2 border font-mono text-xs border-slate-100 p-1 rounded-md overflow-scroll"
+            %>
           <% else %>
             <%= form.text_field "app_config[#{key}]", value: @app_config[key] %>
           <% end %>
           <%if @installation_configs[key]&.dig('description').present? %>
-            <p class="text-slate-400 text-xs italic pt-2">
+            <p class="pt-2 text-xs italic text-slate-400">
               <%= @installation_configs[key]&.dig('description') %>
             </p>
           <% end %>

config/installation_config.yml

@@ -163,6 +163,11 @@
   value:
   display_title: 'Clearbit API Key'
   description: 'This API key is used for onboarding the users, to pre-fill account data.'
+- name: DASHBOARD_SCRIPTS
+  value:
+  display_title: 'Dashboard Scripts'
+  description: 'Scripts are loaded as the last item in the <body> tag'
+  type: code
 # ------- End of Chatwoot Internal Config for Cloud ----#
 
 # ------- Chatwoot Internal Config for Self Hosted ----#

enterprise/app/controllers/enterprise/super_admin/app_configs_controller.rb

@@ -30,6 +30,6 @@ def custom_branding_options
   end
 
   def internal_config_options
-    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY]
+    %w[CHATWOOT_INBOX_TOKEN CHATWOOT_INBOX_HMAC_KEY ANALYTICS_TOKEN CLEARBIT_API_KEY DASHBOARD_SCRIPTS]
   end
 end