Merge pull request #6310 from FlowFuse/expert-api-v4-and-flow-examples-ui

Expert api v4 and flow examples UI

Author: cstns

frontend/src/components/ExpertButton.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="expert-button-wrapper flex items-center justify-center h-full px-3" style="height: 60px;">
+    <div v-if="!isExpertDrawerOpen" class="expert-button-wrapper flex items-center justify-center h-full px-3" style="height: 60px;">
         <button
             class="expert-button flex items-center gap-1.5 justify-center rounded-md px-[9px] py-[6px] font-bold text-[0.85rem] leading-[20px] text-gray-800 whitespace-nowrap transition-colors"
             data-el="expert-button"
@@ -19,7 +19,10 @@ export default {
     name: 'ExpertButton',
     components: {},
     computed: {
-        ...mapState('ux/drawers', ['rightDrawer'])
+        ...mapState('ux/drawers', ['rightDrawer']),
+        isExpertDrawerOpen () {
+            return this.rightDrawer.state && this.rightDrawer.component?.name === 'ExpertDrawer'
+        }
     },
     methods: {
         ...mapActions('ux/drawers', ['closeRightDrawer']),
@@ -45,8 +48,8 @@ export default {
     animation: gradient-border-rotate 4s linear infinite;
 
     &:hover {
-        background: linear-gradient(#f9fafb, #f9fafb) padding-box,
-                    linear-gradient(135deg, $ff-red-700, #4038d5, $ff-red-700) border-box;
+        border: 2px solid transparent;
+        margin: -1px;
     }
 }
 

frontend/src/components/TextCopier.vue

@@ -5,19 +5,21 @@
                 <span class="text">{{ text }}</span>
             </slot>
         </span>
-        <DuplicateIcon v-if="text.length" class="ff-icon" @click="copyPath" @click.prevent.stop />
-        <span ref="copied" class="ff-copied" :class="{ 'ff-copied-left': promptPosition === 'left'}">Copied!</span>
+        <button v-if="text.length" class="ff-icon-button" @click="copyPath">
+            <DuplicateIcon v-if="!copied" class="ff-icon" />
+            <CheckIcon v-else class="ff-icon ff-icon-check" />
+        </button>
     </span>
 </template>
 
 <script>
-import { DuplicateIcon } from '@heroicons/vue/outline'
+import { CheckIcon, DuplicateIcon } from '@heroicons/vue/outline'
 
 import Alert from '../services/alerts.js'
 
 export default {
     name: 'TextCopier',
-    components: { DuplicateIcon },
+    components: { DuplicateIcon, CheckIcon },
     props: {
         text: {
             required: true,
@@ -46,20 +48,42 @@ export default {
         }
     },
     emits: ['copied'],
+    data () {
+        return {
+            copied: false
+        }
+    },
     methods: {
-        copyPath () {
-            navigator.clipboard.writeText(this.text)
+        async copyPath () {
+            try {
+                // Try modern clipboard API first
+                if (navigator.clipboard && navigator.clipboard.writeText) {
+                    await navigator.clipboard.writeText(this.text)
+                } else {
+                    // Fallback for non-secure contexts (HTTP, not HTTPS)
+                    const textArea = document.createElement('textarea')
+                    textArea.value = this.text
+                    textArea.style.position = 'fixed'
+                    textArea.style.left = '-999999px'
+                    textArea.style.top = '-999999px'
+                    document.body.appendChild(textArea)
+                    textArea.focus()
+                    textArea.select()
+                    document.execCommand('copy')
+                    document.body.removeChild(textArea)
+                }
 
-            if (this.confirmationType === 'alert') {
-                Alert.emit('Copied to Clipboard', 'confirmation')
-            } else {
-                // show "Copied" notification
-                this.$refs.copied.style.display = 'inline'
-                // hide after 500ms
-                setTimeout(() => {
-                    this.$refs.copied.style.display = 'none'
-                }, 500)
-                this.$emit('copied')
+                if (this.confirmationType === 'alert') {
+                    Alert.emit('Copied to Clipboard', 'confirmation')
+                } else {
+                    this.copied = true
+                    setTimeout(() => { this.copied = false }, 2000)
+                    this.$emit('copied')
+                }
+            } catch (err) {
+                console.error('Failed to copy to clipboard:', err)
+                // Don't show alert to avoid inject() error
+                // Just keep the icon in copy state (don't show checkmark)
             }
         }
     }
@@ -75,6 +99,35 @@ export default {
   &:hover {
     cursor: pointer;
   }
+  .ff-icon-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    color: $ff-grey-600;
+
+    &:hover {
+      color: $ff-indigo-600;
+      background-color: $ff-indigo-50;
+    }
+
+    &:active {
+      background-color: $ff-indigo-100;
+    }
+
+    .ff-icon {
+      pointer-events: none;
+    }
+
+    .ff-icon-check {
+      color: $ff-green-600;
+    }
+  }
   .ff-copied {
     background-color: black;
     color: white;