fix: load images from the correct path when the Pact Broker applicati…

…on is run from a non root context

lib/pact_broker/api/renderers/html_pact_renderer.rb

@@ -44,6 +44,10 @@ def head
           <link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/material-menu.css'>
           <link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/pact.css'>
           <link rel='stylesheet' type='text/css' href='#{base_url}/stylesheets/jquery-confirm.min.css'>
+          <script type='text/javascript'>
+            const BASE_URL = '#{base_url}';
+          </script>
+          <script src='#{base_url}/javascripts/set-css-asset-base-url.js'></script>
           <script src='#{base_url}/javascripts/highlight.pack.js'></script>
           <script src='#{base_url}/javascripts/jquery-3.5.1.min.js'></script>
           <script src='#{base_url}/js/bootstrap.min.js'></script>

lib/pact_broker/ui/views/index/_css_and_js.haml

@@ -9,3 +9,4 @@
 %script{type: 'text/javascript', src:"#{base_url}/javascripts/index.js?v=#{PactBroker::VERSION}"}
 %script{type: 'text/javascript', src:"#{base_url}/javascripts/clipboard.js?v=#{PactBroker::VERSION}"}
 %script{type: 'text/javascript', src:"#{base_url}/javascripts/jquery-confirm.min.js?v=#{PactBroker::VERSION}"}
+%script{type: 'text/javascript', src:"#{base_url}/javascripts/set-css-asset-base-url.js?v=#{PactBroker::VERSION}"}

lib/pact_broker/ui/views/layouts/main.haml

@@ -8,4 +8,8 @@
     %link{rel: 'stylesheet', href: "#{base_url}/css/bootstrap.min.css?v=#{PactBroker::VERSION}"}
     %script{type: 'text/javascript', src:"#{base_url}/javascripts/jquery-3.5.1.min.js?v=#{PactBroker::VERSION}"}
     %script{type: 'text/javascript', src:"#{base_url}/js/bootstrap.bundle.min.js?v=#{PactBroker::VERSION}"}
+
+    :javascript
+      const BASE_URL = '#{base_url}';
+
   != yield

lib/pact_broker/ui/views/matrix/show.haml

@@ -9,6 +9,7 @@
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/matrix.js?v=#{PactBroker::VERSION}"}
   %script{type: 'text/javascript', src: "#{base_url}/javascripts/clipboard.js?v=#{PactBroker::VERSION}"}
   %script{type: 'text/javascript', src: "#{base_url}/js/bootstrap.bundle.min.js?v=#{PactBroker::VERSION}"}
+  %script{type: 'text/javascript', src: "#{base_url}/javascripts/set-css-asset-base-url.js?v=#{PactBroker::VERSION}"}
 
   .container
     %nav{'aria-label': 'breadcrumb'}

public/javascripts/set-css-asset-base-url.js

@@ -0,0 +1,23 @@
+/*
+  Set the base URL of the background images
+  so they load from the right path when the base
+  URL of the app is not /
+  Must be loaded after the css but before any of the elements have started to render.
+*/
+
+function setCssAssetBaseUrl(base_url, varName) {
+  const urlVar = getComputedStyle(document.documentElement).getPropertyValue(varName)
+  if (urlVar) {
+    const absoluteUrlVar = urlVar.replace(/\//, (base_url + '/'));
+    const root = document.querySelector(':root');
+    root.style.setProperty(varName, absoluteUrlVar);
+  }
+}
+
+setCssAssetBaseUrl(BASE_URL, '--kebab-url');
+setCssAssetBaseUrl(BASE_URL, '--pact-kebab-url');
+setCssAssetBaseUrl(BASE_URL, '--clock-url');
+setCssAssetBaseUrl(BASE_URL, '--arrow-switch-url');
+setCssAssetBaseUrl(BASE_URL, '--alert-url');
+setCssAssetBaseUrl(BASE_URL, '--copy-url');
+setCssAssetBaseUrl(BASE_URL, '--check-url');

public/stylesheets/index.css

@@ -1,3 +1,12 @@
+:root {
+  /* See public/javascripts/set-css-asset-base-url.js */
+  --kebab-url: url('/images/kebab-horizontal.svg');
+  --arrow-switch-url: url('/images/arrow-switch.svg');
+  --alert-url: url('/images/alert.svg');
+  --copy-url:  url('/images/copy.svg');
+  --check-url: url('/images/check.svg');
+}
+
 .table-striped>tbody>tr>td.pact, .table-striped>thead>tr>th.pact {
   border-left: none;
   border-right: none;
@@ -173,7 +182,7 @@ span.integration-settings {
 }
 
 span.kebab-horizontal {
-  background-image: url('/images/kebab-horizontal.svg');
+  background-image: var(--kebab-url);
   background-repeat: no-repeat;
   display:block;
   position: relative;
@@ -183,7 +192,7 @@ span.kebab-horizontal {
 }
 
 span.sort-icon {
-  background-image: url('/images/arrow-switch.svg');
+  background-image: var(--arrow-switch-url);
   background-repeat: no-repeat;
   display:inline-block;
   position: relative;
@@ -194,7 +203,7 @@ span.sort-icon {
 }
 
 span.warning-icon {
- background-image: url('/images/alert.svg');
+ background-image: var(--alert-url);
  background-repeat: no-repeat;
  display:inline-block;
  position: relative;
@@ -213,7 +222,7 @@ span.warning-icon {
 }
 
 span.copy-icon {
-  background-image: url('/images/copy.svg');
+  background-image: var(--copy-url);
   background-size: 16px 16px;
   background-repeat: no-repeat;
   display:block;
@@ -224,7 +233,7 @@ span.copy-icon {
 }
 
 span.copy-success-icon {
-  background-image: url('/images/check.svg');
+  background-image: var(--check-url);
   background-size: 16px 16px;
   background-repeat: no-repeat;
   display:block;

public/stylesheets/matrix.css

@@ -1,3 +1,8 @@
+:root {
+  /* See public/javascripts/set-css-asset-base-url.js */
+  --clock-url: url('/images/clock.svg');
+}
+
 div {
   /*border: 1px solid red;*/
  }
@@ -33,7 +38,7 @@ div.tag, div.version {
 
 span.pre-verified-icon {
   color: #337ab7;
-  background-image: url('/images/clock.svg');
+  background-image: var(--clock-url);
   background-repeat: no-repeat;
   display:inline-block;
   position: relative;

public/stylesheets/pact.css

@@ -1,3 +1,8 @@
+:root {
+  /* See public/javascripts/set-css-asset-base-url.js */
+  --pact-kebab-url: url('/images/kebab-horizontal.svg');
+}
+
 div.pact-metadata {
   margin-top: 40px;
   float: right;
@@ -30,7 +35,7 @@ div.pact-badge-markdown {
 }
 
 span.kebab-horizontal {
-  background-image: url('/images/kebab-horizontal.svg');
+  background-image: var(--pact-kebab-url);
   background-repeat: no-repeat;
   display:block;
   position: relative;