From 4d80b4eee7680c63b5602f1da62ee74721ee0e27 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 10:02:37 +0100
Subject: [PATCH 1/9] Add support for anchor type button

---
 .../src/ui-components/components/Button.vue   | 31 ++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/src/ui-components/components/Button.vue b/frontend/src/ui-components/components/Button.vue
index 96ff9789c9..8fd7cefa08 100644
--- a/frontend/src/ui-components/components/Button.vue
+++ b/frontend/src/ui-components/components/Button.vue
@@ -1,5 +1,17 @@
 <template>
-    <button ref="input" class="ff-btn transition-fade--color" :type="type" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" @click="go()">
+    <a v-if="type==='anchor'" ref="input" class="ff-btn transition-fade--color" :target="target" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :href="!to || disabled ? null : to" :aria-disabled="disabled ? 'true' : 'false'" :disabled="disabled">
+        <span v-if="hasIconLeft" class="ff-btn--icon ff-btn--icon-left">
+            <slot name="icon-left"></slot>
+        </span>
+        <span v-if="isIconOnly" class="ff-btn--icon">
+            <slot name="icon"></slot>
+        </span>
+        <slot></slot>
+        <span v-if="hasIconRight" class="ff-btn--icon ff-btn--icon-right">
+            <slot name="icon-right"></slot>
+        </span>
+    </a>
+    <button v-else ref="input" class="ff-btn transition-fade--color" :type="type" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :disabled="disabled" @click="go()">
         <span v-if="hasIconLeft" class="ff-btn--icon ff-btn--icon-left">
             <slot name="icon-left"></slot>
         </span>
@@ -18,7 +30,7 @@ export default {
     name: 'ff-button',
     props: {
         type: {
-            default: 'button', // "button" or "submit"
+            default: 'button', // "button", "submit" or "anchor"
             type: String
         },
         kind: {
@@ -33,6 +45,11 @@ export default {
             default: null,
             type: [String, Object]
         },
+        /** Only applicable to type="anchor" */
+        target: {
+            default: '_self',
+            type: [String]
+        },
         hasRightIcon: {
             default: true,
             type: Boolean
@@ -40,6 +57,10 @@ export default {
         hasLeftIcon: {
             default: true,
             type: Boolean
+        },
+        disabled: {
+            default: false,
+            type: Boolean
         }
     },
     computed: {
@@ -58,12 +79,14 @@ export default {
     },
     methods: {
         go: function () {
-            if (this.to) {
+            if (!this.disabled && this.to) {
                 this.$router.push(this.to)
             }
         },
         focus () {
-            this.$refs.input?.focus()
+            if (!this.disabled) {
+                this.$refs.input?.focus()
+            }
         },
         blur () {
             this.$refs.input?.blur()

From 7de9ac64cd9409c6a0254d5b645e118b52a79828 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 10:06:59 +0100
Subject: [PATCH 2/9] change dashboard button type to anchor

---
 .../instance/components/DashboardLink.vue     | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/instance/components/DashboardLink.vue b/frontend/src/pages/instance/components/DashboardLink.vue
index aca1407182..6b26f1547e 100644
--- a/frontend/src/pages/instance/components/DashboardLink.vue
+++ b/frontend/src/pages/instance/components/DashboardLink.vue
@@ -1,10 +1,13 @@
 <template>
     <ff-button
         v-if="!hidden"
+        type="anchor"
         kind="secondary"
         data-action="open-dashboard"
+        :to="dashboardURL"
+        :target="target"
         :disabled="buttonDisabled"
-        @click.stop="openDashboard()"
+        class="whitespace-nowrap"
     >
         <template v-if="showText" #icon-left>
             <ChartPieIcon />
@@ -58,19 +61,19 @@ export default {
     computed: {
         buttonDisabled () {
             return this.disabled || !this.instance?.settings?.dashboard2UI
-        }
-    },
-    methods: {
-        openDashboard () {
-            if (this.disabled || !this.instance?.settings?.dashboard2UI) {
-                return
+        },
+        dashboardURL () {
+            if (this.buttonDisabled) {
+                return null
             }
             // The dashboard url will *always* be relative to the root as we
             // do not expose `httpNodeRoot` to customise the base path
             const baseURL = new URL(removeSlashes(this.instance.url, false, true))
             baseURL.pathname = removeSlashes(this.instance.settings.dashboard2UI, true, false)
-            const fixedTarget = '_db2_' + this.instance.id
-            window.open(baseURL.toString(), fixedTarget)
+            return baseURL.toString()
+        },
+        target () {
+            return '_db2_' + (this.instance?.id || '')
         }
     }
 }

From 4322d3c2c64b141ad0e2a8ced8d0300a86d7bd44 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 10:07:18 +0100
Subject: [PATCH 3/9] make editor button behave like anchor

---
 .../pages/instance/components/EditorLink.vue  | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/instance/components/EditorLink.vue b/frontend/src/pages/instance/components/EditorLink.vue
index ccf19ed8d1..5b22ba79ad 100644
--- a/frontend/src/pages/instance/components/EditorLink.vue
+++ b/frontend/src/pages/instance/components/EditorLink.vue
@@ -3,11 +3,13 @@
         <slot name="default">
             <ff-button
                 v-ff-tooltip:left="(editorDisabled || disabled) ? disabledReason : undefined"
+                type="anchor"
+                :to="editorURL"
                 kind="secondary"
                 data-action="open-editor"
-                :disabled="editorDisabled || disabled || !url"
+                :disabled="buttonDisabled"
                 class="whitespace-nowrap"
-                @click.stop="openEditor()"
+                @click.stop="openEditor"
             >
                 <template v-if="showText" #icon-left>
                     <ProjectIcon />
@@ -72,16 +74,23 @@ export default {
                 return this.$router.resolve({ name: 'instance-editor', params: { id: this.instance.id } }).fullPath
             }
 
+            return this.editorURL
+        },
+        editorURL () {
             return this.instance.url || this.instance.editor?.url
+        },
+        buttonDisabled: function () {
+            return this.editorDisabled || this.disabled || !this.url
         }
     },
     methods: {
-        openEditor () {
+        openEditor (evt) {
+            evt.preventDefault()
             if (this.disabled) {
-                return
+                return false
             }
-
             window.open(this.url, !this.isImmersiveEditor ? '_blank' : '_self')
+            return false
         }
     }
 }

From e3779443d8a451cab66beabae5f666b4ca468505 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 10:07:45 +0100
Subject: [PATCH 4/9] support disabling button anchor type

---
 frontend/src/ui-components/stylesheets/ff-components.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/ui-components/stylesheets/ff-components.scss b/frontend/src/ui-components/stylesheets/ff-components.scss
index dce90089cb..dabc177391 100644
--- a/frontend/src/ui-components/stylesheets/ff-components.scss
+++ b/frontend/src/ui-components/stylesheets/ff-components.scss
@@ -182,7 +182,8 @@
     }
   }
 
-  &:disabled {
+  &:disabled,
+  &[disabled=true] {
     cursor: not-allowed;
     border-color: $ff-grey-200;
     color: $ff-grey-400;

From b1922f316fa8a6ed2573ac6e78a403f40306b281 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 10:40:54 +0100
Subject: [PATCH 5/9] fix e2e tests: use 'have.attr', 'disabled' assertion
 instead of 'be.disabled'

---
 test/e2e/frontend/cypress/tests/admin.spec.js                 | 2 +-
 test/e2e/frontend/cypress/tests/applications/overview.spec.js | 2 +-
 test/e2e/frontend/cypress/tests/instances/editor.spec.js      | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/test/e2e/frontend/cypress/tests/admin.spec.js b/test/e2e/frontend/cypress/tests/admin.spec.js
index e3dff84df1..2c75a131a7 100644
--- a/test/e2e/frontend/cypress/tests/admin.spec.js
+++ b/test/e2e/frontend/cypress/tests/admin.spec.js
@@ -77,7 +77,7 @@ describe('FlowFuse platform admin users', () => {
         cy.wait('@getApplicationInstances')
 
         cy.get('[data-el="banner-project-as-admin"]').should('exist')
-        cy.get('[data-action="open-editor"]').should('be.disabled')
+        cy.get('[data-action="open-editor"]').should('have.attr', 'disabled')
 
         cy.get('[data-el="cloud-instances"] tr').contains('instance-2-1').click()
 
diff --git a/test/e2e/frontend/cypress/tests/applications/overview.spec.js b/test/e2e/frontend/cypress/tests/applications/overview.spec.js
index 8fc85fd442..25d2846664 100644
--- a/test/e2e/frontend/cypress/tests/applications/overview.spec.js
+++ b/test/e2e/frontend/cypress/tests/applications/overview.spec.js
@@ -188,7 +188,7 @@ describe('FlowForge - Applications', () => {
                 .parent()
                 .parent()
                 .within(() => {
-                    cy.get('[data-action="open-editor"]').should('be.disabled')
+                    cy.get('[data-action="open-editor"]').should('have.attr', 'disabled')
                     cy.get('[data-el="kebab-menu"]').should('exist')
                     cy.contains('https://www.google.com:456/search?q=rick+ross')
                 })
diff --git a/test/e2e/frontend/cypress/tests/instances/editor.spec.js b/test/e2e/frontend/cypress/tests/instances/editor.spec.js
index b42e9e3224..74c3d322d4 100644
--- a/test/e2e/frontend/cypress/tests/instances/editor.spec.js
+++ b/test/e2e/frontend/cypress/tests/instances/editor.spec.js
@@ -235,7 +235,9 @@ describe('FlowForge - Instance editor', () => {
                 })
 
             cy.get('[data-el="tabs-drawer"]').within(() => {
-                cy.get('[data-action="open-dashboard"]').should('exist').should('be.disabled')
+                // cy.get('[data-action="open-dashboard"]').should('exist').should('be.disabled')
+                // anchors with disabled attribute fail the above assertion! so we need to check the attribute directly
+                cy.get('[data-action="open-dashboard"]').should('exist').should('have.attr', 'disabled')
             })
         })
     })

From 4c6a24bb9667119a8d2d4cc4170699b0a870c3de Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 11:07:39 +0100
Subject: [PATCH 6/9] fix e2e test for anchor disabled

---
 test/e2e/frontend/cypress/tests-ee/team/overview.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js b/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js
index ef1b0a959b..c40083b33d 100644
--- a/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js
@@ -103,7 +103,7 @@ describe('FlowForge - Team Overview (Home) - With License', () => {
                     cy.get('[data-el="application-instances"]').find('.item-wrapper').should('have.length', 2)
                     cy.get('[data-el="application-instances"] .item-wrapper:contains("instance-2-with-devices")').within(() => {
                         cy.get('[data-el="status-badge-stopped"]').should('exist')
-                        cy.get('[data-action="open-editor"]').should('be.disabled')
+                        cy.get('[data-action="open-editor"]').should('have.attr', 'disabled')
                         cy.get('[data-el="kebab-menu"]').should('exist')
                     })
 

From 83bad8611dbf4f83dbacea2971f9376ce7f807d9 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 11:12:50 +0100
Subject: [PATCH 7/9] remove disabled attr is NOT disabled

---
 frontend/src/ui-components/components/Button.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/ui-components/components/Button.vue b/frontend/src/ui-components/components/Button.vue
index 8fd7cefa08..d1273441f3 100644
--- a/frontend/src/ui-components/components/Button.vue
+++ b/frontend/src/ui-components/components/Button.vue
@@ -1,5 +1,5 @@
 <template>
-    <a v-if="type==='anchor'" ref="input" class="ff-btn transition-fade--color" :target="target" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :href="!to || disabled ? null : to" :aria-disabled="disabled ? 'true' : 'false'" :disabled="disabled">
+    <a v-if="type==='anchor'" ref="input" class="ff-btn transition-fade--color" :target="target" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :href="!to || disabled ? null : to" :aria-disabled="disabled===true?'true':null" :disabled="disabled===true?'true':null">
         <span v-if="hasIconLeft" class="ff-btn--icon ff-btn--icon-left">
             <slot name="icon-left"></slot>
         </span>
@@ -11,7 +11,7 @@
             <slot name="icon-right"></slot>
         </span>
     </a>
-    <button v-else ref="input" class="ff-btn transition-fade--color" :type="type" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :disabled="disabled" @click="go()">
+    <button v-else ref="input" class="ff-btn transition-fade--color" :type="type" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :disabled="disabled===true?'true':null" @click="go()">
         <span v-if="hasIconLeft" class="ff-btn--icon ff-btn--icon-left">
             <slot name="icon-left"></slot>
         </span>
@@ -59,7 +59,7 @@ export default {
             type: Boolean
         },
         disabled: {
-            default: false,
+            default: null,
             type: Boolean
         }
     },

From 66cf157b3d6c499353fc3719f844fd73f1a96fb7 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 11:14:13 +0100
Subject: [PATCH 8/9] clearer intent in tertiary statement

---
 frontend/src/ui-components/components/Button.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/ui-components/components/Button.vue b/frontend/src/ui-components/components/Button.vue
index d1273441f3..aebd59a7ec 100644
--- a/frontend/src/ui-components/components/Button.vue
+++ b/frontend/src/ui-components/components/Button.vue
@@ -1,5 +1,5 @@
 <template>
-    <a v-if="type==='anchor'" ref="input" class="ff-btn transition-fade--color" :target="target" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :href="!to || disabled ? null : to" :aria-disabled="disabled===true?'true':null" :disabled="disabled===true?'true':null">
+    <a v-if="type==='anchor'" ref="input" class="ff-btn transition-fade--color" :target="target" :class="'ff-btn--' + kind + (hasIcon ? ' ff-btn-icon' : '') + (size === 'small' ? ' ff-btn-small' : '') + (size === 'full-width' ? ' ff-btn-fwidth' : '')" :href="(!to || disabled) ? null : to" :aria-disabled="disabled===true?'true':null" :disabled="disabled===true?'true':null">
         <span v-if="hasIconLeft" class="ff-btn--icon ff-btn--icon-left">
             <slot name="icon-left"></slot>
         </span>

From c9fb9e57828bb2975bf7fa54ae66442daa6027e6 Mon Sep 17 00:00:00 2001
From: Steve-Mcl <sdmclaughlin@gmail.com>
Date: Fri, 23 Aug 2024 11:29:20 +0100
Subject: [PATCH 9/9] fix e2e test

---
 test/e2e/frontend/cypress/tests-ee/team/overview.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js b/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js
index c40083b33d..d971ff4f81 100644
--- a/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js
+++ b/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js
@@ -111,7 +111,7 @@ describe('FlowForge - Team Overview (Home) - With License', () => {
                         cy.contains('instance-2-1')
                         cy.get('[data-el="status-badge-running"]').should('exist')
                         cy.contains('http://instance-2-1.example.com')
-                        cy.get('[data-action="open-editor"]').should('be.enabled')
+                        cy.get('[data-action="open-editor"]').should('not.have.attr', 'disabled')
                         cy.get('[data-el="kebab-menu"]').should('exist')
                     })