From e5ccd414f5e1a5da647c0814e2c4f71ed881f751 Mon Sep 17 00:00:00 2001
From: Ben Hardill <ben@flowforge.com>
Date: Tue, 10 Dec 2024 15:09:41 +0000
Subject: [PATCH] Allow NR Dashboard to be loaded in iFrames

part of #4689

paired with https://github.com/FlowFuse/nr-launcher/pull/306
---
 forge/lib/templates.js                        |  3 ++
 .../pages/admin/Template/sections/Editor.vue  | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/forge/lib/templates.js b/forge/lib/templates.js
index be22313abd..930684a775 100644
--- a/forge/lib/templates.js
+++ b/forge/lib/templates.js
@@ -4,6 +4,7 @@ module.exports = {
         'disableTours',
         'httpAdminRoot',
         'dashboardUI',
+        'dashboardIFrame',
         'codeEditor',
         'theme',
         'page_title',
@@ -36,6 +37,7 @@ module.exports = {
         disableTours: false,
         httpAdminRoot: '',
         dashboardUI: '/ui',
+        dashboardIFrame: false,
         codeEditor: 'monaco',
         theme: 'forge-light',
         page_title: 'FlowFuse',
@@ -65,6 +67,7 @@ module.exports = {
         disableTours: true,
         httpAdminRoot: true,
         dashboardUI: true,
+        dashboardIFrame: true,
         codeEditor: true,
         theme: true,
         page_title: false,
diff --git a/frontend/src/pages/admin/Template/sections/Editor.vue b/frontend/src/pages/admin/Template/sections/Editor.vue
index 9aa92c2262..4e1dd2a350 100644
--- a/frontend/src/pages/admin/Template/sections/Editor.vue
+++ b/frontend/src/pages/admin/Template/sections/Editor.vue
@@ -66,6 +66,27 @@
             </div>
             <LockSetting class="flex justify-end flex-col" tooltip="This setting is fixed and cannot be changed." />
         </div>
+        <div v-if="dashboardIFrameAvailable">
+            <div class="flex flex-col sm:flex-row">
+                <div class="w-full max-w-md sm:mr-8">
+                    <FormRow v-model="editable.settings.dashboardIFrame" :error="editable.errors.dashboardIFrame" :disabled="!editTemplate && !editable.policy.dashboardIFrame" type="checkbox">
+                        Allow Dashboard to be embedded in an iFrame
+                        <template #description>
+                            Sets the <span>Content-Security-Policy: frame-ancestor '*'</span> HTTP Header for the Dashboard
+                        </template>
+                        <template #append><ChangeIndicator :value="editable.changed.settings.dashboardIFrame" /></template>
+                    </FormRow>
+                </div>
+                <LockSetting v-model="editable.policy.dashboardIFrame" class="flex justify-end flex-col" :editTemplate="editTemplate" :changed="editable.changed.policy.dashboardIFrame" />
+            </div>
+        </div>
+        <div v-else class="flex flex-col sm:flex-row">
+            <div class="space-y-4 w-full max-w-md sm:mr-8">
+                <p>Upgrade your stack to be able to enable</p>
+                <p>embedding Dashboards in iFrames</p>
+                <ff-button size="small" to="general">Upgrade</ff-button>
+            </div>
+        </div>
         <div class="flex flex-col sm:flex-row">
             <div class="w-full max-w-md sm:mr-8">
                 <FormRow v-model="editable.settings.codeEditor" :disabled="!editTemplate && !editable.policy.codeEditor" type="select" :options="[{label:'monaco', value:'monaco'},{label:'ace', value:'ace'}]">
@@ -248,6 +269,15 @@ export default {
         },
         debugLimitDisabled () {
             return !this.editTemplate && !this.editable.policy.debugMaxLength
+        },
+        dashboardIFrameAvailable () {
+            const launcherVersion = this.instance?.meta?.versions?.launcher
+            if (!launcherVersion) {
+                // We won't have this for a suspended project - so err on the side
+                // of permissive
+                return true
+            }
+            return SemVer.satisfies(SemVer.coerce(launcherVersion), '>=2.12.0')
         }
     }
 }