From 801506b566eeda9a9bb1b92a199878c59c9cabcb Mon Sep 17 00:00:00 2001
From: Grldk <33746490+Grldk@users.noreply.github.com>
Date: Thu, 31 Mar 2022 14:05:21 +0000
Subject: [PATCH] Make horizon work with strict content-security-policy (#1138)

* move contents of horizon div to separate component

* dont remove google fonts

* fix assetsAreCurrent
---
 resources/js/app.js              |  15 ++-
 resources/js/base.js             |   6 +-
 resources/js/components/App.vue  | 177 +++++++++++++++++++++++++++++++
 resources/views/layout.blade.php | 110 ++-----------------
 4 files changed, 198 insertions(+), 110 deletions(-)
 create mode 100644 resources/js/components/App.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index 38fc889e..908aa130 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -43,6 +43,9 @@ const router = new VueRouter({
 Vue.component('vue-json-pretty', VueJsonPretty);
 Vue.component('alert', require('./components/Alert.vue').default);
 
+const app = Vue.component('app', require('./components/App.vue').default);
+const root = document.getElementById('horizon');
+
 Vue.mixin(Base);
 
 Vue.directive('tooltip', function (el, binding) {
@@ -54,10 +57,16 @@ Vue.directive('tooltip', function (el, binding) {
 });
 
 new Vue({
-    el: '#horizon',
-
+    el: root,
     router,
-
+    render: (createElement) =>
+        createElement(app, {
+            props: {
+                appName: root.dataset.appName,
+                assetsAreCurrent: root.dataset.assetsAreCurrent,
+                isDownForMaintenance: root.dataset.isDownForMaintenance,
+            },
+        }),
     data() {
         return {
             alert: {
diff --git a/resources/js/base.js b/resources/js/base.js
index dab7123e..44e6aeed 100644
--- a/resources/js/base.js
+++ b/resources/js/base.js
@@ -37,11 +37,11 @@ export default {
          * Autoload new entries in listing screens.
          */
         autoLoadNewEntries() {
-            if (!this.autoLoadsNewEntries) {
-                this.autoLoadsNewEntries = true;
+            if (!this.$root.autoLoadsNewEntries) {
+                this.$root.autoLoadsNewEntries = true;
                 localStorage.autoLoadsNewEntries = 1;
             } else {
-                this.autoLoadsNewEntries = false;
+                this.$root.autoLoadsNewEntries = false;
                 localStorage.autoLoadsNewEntries = 0;
             }
         },
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
new file mode 100644
index 00000000..8e8cabea
--- /dev/null
+++ b/resources/js/components/App.vue
@@ -0,0 +1,177 @@
+<script type="text/ecmascript-6">
+export default {
+  props: ["assetsAreCurrent", "isDownForMaintenance", "appName"],
+  data() {
+    return {
+      alert: this.$root.alert,
+    };
+  },
+};
+</script>
+
+<template>
+  <div>
+    <alert
+      :message="alert.message"
+      :type="alert.type"
+      :auto-close="alert.autoClose"
+      :confirmation-proceed="alert.confirmationProceed"
+      :confirmation-cancel="alert.confirmationCancel"
+      v-if="alert.type"
+    ></alert>
+
+    <div class="container mb-5">
+      <div class="d-flex align-items-center py-4 header">
+        <svg
+          class="logo"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 30 30"
+        >
+          <path
+            class="fill-primary"
+            d="M5.26176342 26.4094389C2.04147988 23.6582233 0 19.5675182 0 15c0-4.1421356 1.67893219-7.89213562 4.39339828-10.60660172C7.10786438 1.67893219 10.8578644 0 15 0c8.2842712 0 15 6.71572875 15 15 0 8.2842712-6.7157288 15-15 15-3.716753 0-7.11777662-1.3517984-9.73823658-3.5905611zM4.03811305 15.9222506C5.70084247 14.4569342 6.87195416 12.5 10 12.5c5 0 5 5 10 5 3.1280454 0 4.2991572-1.9569336 5.961887-3.4222502C25.4934253 8.43417206 20.7645408 4 15 4 8.92486775 4 4 8.92486775 4 15c0 .3105915.01287248.6181765.03811305.9222506z"
+          />
+        </svg>
+
+        <h4 class="mb-0 ml-2"><strong>Laravel</strong> Horizon{{ appName }}</h4>
+
+        <button
+          class="btn btn-outline-primary ml-auto"
+          :class="{ active: this.$root.autoLoadsNewEntries }"
+          v-on:click.prevent="autoLoadNewEntries"
+          title="Auto Load Entries"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            class="icon fill-primary"
+          >
+            <path
+              d="M10 3v2a5 5 0 0 0-3.54 8.54l-1.41 1.41A7 7 0 0 1 10 3zm4.95 2.05A7 7 0 0 1 10 17v-2a5 5 0 0 0 3.54-8.54l1.41-1.41zM10 20l-4-4 4-4v8zm0-12V0l4 4-4 4z"
+            ></path>
+          </svg>
+        </button>
+      </div>
+
+      <div class="row mt-4">
+        <div class="col-2 sidebar">
+          <ul class="nav flex-column">
+            <li class="nav-item">
+              <router-link
+                active-class="active"
+                to="/dashboard"
+                class="nav-link d-flex align-items-center pt-0"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path
+                    d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2zm8 3l4 5H6l4-5z"
+                  ></path>
+                </svg>
+                <span>Dashboard</span>
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link
+                active-class="active"
+                to="/monitoring"
+                class="nav-link d-flex align-items-center"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path
+                    d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"
+                  ></path>
+                </svg>
+                <span>Monitoring</span>
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link
+                active-class="active"
+                to="/metrics"
+                class="nav-link d-flex align-items-center"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path
+                    d="M1 10h3v10H1V10zM6 0h3v20H6V0zm5 8h3v12h-3V8zm5-4h3v16h-3V4z"
+                  ></path>
+                </svg>
+                <span>Metrics</span>
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link
+                active-class="active"
+                to="/batches"
+                class="nav-link d-flex align-items-center"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path
+                    d="M1 1h18v2H1V1zm0 8h18v2H1V9zm0 8h18v2H1v-2zM1 5h18v2H1V5zm0 8h18v2H1v-2z"
+                  />
+                </svg>
+                <span>Batches</span>
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link
+                active-class="active"
+                to="/jobs/pending"
+                class="nav-link d-flex align-items-center"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path
+                    d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM7 6h2v8H7V6zm4 0h2v8h-2V6z"
+                  />
+                </svg>
+                <span>Pending Jobs</span>
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link
+                active-class="active"
+                to="/jobs/completed"
+                class="nav-link d-flex align-items-center"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path
+                    d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29L9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"
+                  ></path>
+                </svg>
+                <span>Completed Jobs</span>
+              </router-link>
+            </li>
+            <li class="nav-item">
+              <router-link
+                active-class="active"
+                to="/failed"
+                class="nav-link d-flex align-items-center"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                  <path
+                    d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z"
+                  ></path>
+                </svg>
+                <span>Failed Jobs</span>
+              </router-link>
+            </li>
+          </ul>
+        </div>
+
+        <div class="col-10">
+          <div v-if="!assetsAreCurrent" class="alert alert-warning">
+            The published Horizon assets are not up-to-date with the installed
+            version. To update, run:<br /><code
+              >php artisan horizon:publish</code
+            >
+          </div>
+
+          <div v-if="isDownForMaintenance" class="alert alert-warning">
+            This application is in "maintenance mode". Queued jobs may not be
+            processed unless your worker is using the "force" flag.
+          </div>
+          <router-view></router-view>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/resources/views/layout.blade.php b/resources/views/layout.blade.php
index 52a4f7f8..fc37264f 100644
--- a/resources/views/layout.blade.php
+++ b/resources/views/layout.blade.php
@@ -14,111 +14,13 @@
     <link href="{{ asset(mix($cssFile, 'vendor/horizon')) }}" rel="stylesheet">
 </head>
 <body>
-<div id="horizon" v-cloak>
-    <alert :message="alert.message"
-           :type="alert.type"
-           :auto-close="alert.autoClose"
-           :confirmation-proceed="alert.confirmationProceed"
-           :confirmation-cancel="alert.confirmationCancel"
-           v-if="alert.type"></alert>
-
-    <div class="container mb-5">
-        <div class="d-flex align-items-center py-4 header">
-            <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-                <path class="fill-primary" d="M5.26176342 26.4094389C2.04147988 23.6582233 0 19.5675182 0 15c0-4.1421356 1.67893219-7.89213562 4.39339828-10.60660172C7.10786438 1.67893219 10.8578644 0 15 0c8.2842712 0 15 6.71572875 15 15 0 8.2842712-6.7157288 15-15 15-3.716753 0-7.11777662-1.3517984-9.73823658-3.5905611zM4.03811305 15.9222506C5.70084247 14.4569342 6.87195416 12.5 10 12.5c5 0 5 5 10 5 3.1280454 0 4.2991572-1.9569336 5.961887-3.4222502C25.4934253 8.43417206 20.7645408 4 15 4 8.92486775 4 4 8.92486775 4 15c0 .3105915.01287248.6181765.03811305.9222506z"/>
-            </svg>
-
-            <h4 class="mb-0 ml-2">
-                <strong>Laravel</strong> Horizon{{ config('app.name') ? ' - ' . config('app.name') : '' }}</h4>
-
-            <button class="btn btn-outline-primary ml-auto" :class="{active: autoLoadsNewEntries}" v-on:click.prevent="autoLoadNewEntries" title="Auto Load Entries">
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="icon fill-primary">
-                    <path d="M10 3v2a5 5 0 0 0-3.54 8.54l-1.41 1.41A7 7 0 0 1 10 3zm4.95 2.05A7 7 0 0 1 10 17v-2a5 5 0 0 0 3.54-8.54l1.41-1.41zM10 20l-4-4 4-4v8zm0-12V0l4 4-4 4z"></path>
-                </svg>
-            </button>
-        </div>
-
-        <div class="row mt-4">
-            <div class="col-2 sidebar">
-                <ul class="nav flex-column">
-                    <li class="nav-item">
-                        <router-link active-class="active" to="/dashboard" class="nav-link d-flex align-items-center pt-0">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M0 3c0-1.1.9-2 2-2h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3zm2 2v12h16V5H2zm8 3l4 5H6l4-5z"></path>
-                            </svg>
-                            <span>Dashboard</span>
-                        </router-link>
-                    </li>
-                    <li class="nav-item">
-                        <router-link active-class="active" to="/monitoring" class="nav-link d-flex align-items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"></path>
-                            </svg>
-                            <span>Monitoring</span>
-                        </router-link>
-                    </li>
-                    <li class="nav-item">
-                        <router-link active-class="active" to="/metrics" class="nav-link d-flex align-items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M1 10h3v10H1V10zM6 0h3v20H6V0zm5 8h3v12h-3V8zm5-4h3v16h-3V4z"></path>
-                            </svg>
-                            <span>Metrics</span>
-                        </router-link>
-                    </li>
-                    <li class="nav-item">
-                        <router-link active-class="active" to="/batches" class="nav-link d-flex align-items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M1 1h18v2H1V1zm0 8h18v2H1V9zm0 8h18v2H1v-2zM1 5h18v2H1V5zm0 8h18v2H1v-2z"/>
-                            </svg>
-                            <span>Batches</span>
-                        </router-link>
-                    </li>
-                    <li class="nav-item">
-                        <router-link active-class="active" to="/jobs/pending" class="nav-link d-flex align-items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM7 6h2v8H7V6zm4 0h2v8h-2V6z"/>
-                            </svg>
-                            <span>Pending Jobs</span>
-                        </router-link>
-                    </li>
-                    <li class="nav-item">
-                        <router-link active-class="active" to="/jobs/completed" class="nav-link d-flex align-items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM6.7 9.29L9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z"></path>
-                            </svg>
-                            <span>Completed Jobs</span>
-                        </router-link>
-                    </li>
-                    <li class="nav-item">
-                        <router-link active-class="active" to="/failed" class="nav-link d-flex align-items-center">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z"></path>
-                            </svg>
-                            <span>Failed Jobs</span>
-                        </router-link>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="col-10">
-                @if (! $assetsAreCurrent)
-                    <div class="alert alert-warning">
-                        The published Horizon assets are not up-to-date with the installed version. To update, run:<br/><code>php artisan horizon:publish</code>
-                    </div>
-                @endif
-
-                @if ($isDownForMaintenance)
-                    <div class="alert alert-warning">
-                        This application is in "maintenance mode". Queued jobs may not be processed unless your worker is using the "force" flag.
-                    </div>
-                @endif
-
-                <router-view></router-view>
-            </div>
-        </div>
+    <div
+        id="horizon"
+        v-cloak
+        data-assets-are-current="{{ $assetsAreCurrent }}"
+        data-is-down-for-maintenance="{{ $isDownForMaintenance }}"
+        data-app-name="{{ config('app.name') ? ' - ' . config('app.name') : '' }}">
     </div>
-</div>
-
 <!-- Global Horizon Object -->
 <script>
     window.Horizon = @json($horizonScriptVariables);