Merge pull request #4396 from FlowFuse/4355-editor-dashboard-buttons-…

…as-anchors Change editor & dashboard buttons to anchors
FlowFuse · Aug 23, 2024 · 33389ca · 33389ca
2 parents 8f23297 + c9fb9e5
commit 33389ca
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 24 deletions.
diff --git 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 || '')
         }
     }
 }

diff --git 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
         }
     }
 }

diff --git 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?'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>
+        <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===true?'true':null" @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,13 +45,22 @@ export default {
             default: null,
             type: [String, Object]
         },
+        /** Only applicable to type="anchor" */
+        target: {
+            default: '_self',
+            type: [String]
+        },
         hasRightIcon: {
             default: true,
             type: Boolean
         },
         hasLeftIcon: {
             default: true,
             type: Boolean
+        },
+        disabled: {
+            default: null,
+            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()

diff --git 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;

diff --git a/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js b/test/e2e/frontend/cypress/tests-ee/team/overview.spec.js
@@ -103,15 +103,15 @@ 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')
                     })
 
                     cy.get('[data-el="application-instances"] .item-wrapper:contains("instance-2-1")').within(() => {
                         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')
                     })
 

diff --git 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
@@ -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
@@ -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')
             })
         })
     })