Merge pull request #6670 from FlowFuse/immersive-editor-home-icon

Ensure consistent Open Editor behavior — always default to immersive experience

Author: cstns

frontend/src/components/TextCopier.vue

@@ -1,11 +1,11 @@
 <template>
     <span class="ff-text-copier">
-        <span v-if="showText" @click="copyPath">
+        <span v-if="showText" @click.stop="copyPath">
             <slot name="default">
                 <span class="text">{{ text }}</span>
             </slot>
         </span>
-        <button v-if="hasText" class="ff-icon-button" @click="copyPath">
+        <button v-if="hasText" class="ff-icon-button" @click.stop="copyPath">
             <DuplicateIcon v-if="!copied" class="ff-icon" />
             <CheckIcon v-else class="ff-icon ff-icon-check" />
         </button>
@@ -114,15 +114,15 @@ export default {
     border-radius: 4px;
     cursor: pointer;
     transition: all 0.2s ease;
-    color: $ff-grey-600;
+    color: $ff-color--action;
 
     &:hover {
-      color: $ff-indigo-600;
-      background-color: $ff-indigo-50;
+      color: $ff-white;
+      background-color: $ff-color--highlight;
     }
 
     &:active {
-      background-color: $ff-indigo-100;
+      background-color: $ff-color--highlight;
     }
 
     .ff-icon {

frontend/src/components/instance/ActionButton.vue

@@ -2,7 +2,7 @@
     <div class="action-button" data-el="action-button">
         <DropdownMenu
             v-if="hasPermission('project:change-status', { application: instance.application })"
-            buttonClass="ff-btn ff-btn--primary ff-btn-icon"
+            :buttonClass="`ff-btn ${isEditorUsable ? 'ff-btn--secondary' : 'ff-btn--primary'} ff-btn-icon`"
             :options="actionsDropdownOptions"
         >
             <CogIcon class="ff-btn--icon ff-btn--icon-left" />
@@ -84,6 +84,10 @@ export default {
         },
         instanceRunning () {
             return this.instance?.meta?.state === 'running'
+        },
+        isEditorUsable () {
+            const isHA = this.instance?.ha?.replicas !== undefined
+            return this.instanceRunning && !isHA && !this.instance?.settings?.disableEditor
         }
 
     },

frontend/src/composables/NavigationHelper.js

@@ -20,21 +20,21 @@ export function useNavigationHelper () {
         }
     }
 
-    const navigateTo = (to, $event = null) => {
+    const navigateTo = (to, $event = null, { target = '_blank' } = {}) => {
         const internalHref = _router.resolve(to).href
         const isMiddleButtonClick = $event?.button === 1
         const newTabKeyCombination = $event && ($event?.ctrlKey || $event.metaKey || isMiddleButtonClick)
         const isExternalLink = _isExternalLink(to)
 
         switch (true) {
         case isExternalLink && newTabKeyCombination:
-            return openInANewTab(to)
+            return openInANewTab(to, target)
 
         case isExternalLink:
             return navigateToExternal(to)
 
         case newTabKeyCombination:
-            return openInANewTab(internalHref)
+            return openInANewTab(internalHref, target)
 
         default:
             return _router.push(to)

frontend/src/pages/admin/Template/sections/Environment.vue

@@ -53,17 +53,26 @@
                 <template #rows>
                     <ff-data-table-row v-for="(item) in filteredRows" :key="item.index" :data-row="'row-' + item.name">
                         <td class="ff-data-table--cell !pl-1 !pr-0 !py-1 border min-w-max max-w-sm align-top">
-                            <FormRow
-                                v-model="item.name"
-                                v-ff-tooltip:left="'Cannot be renamed'"
-                                class="font-mono"
-                                :containerClass="'w-full' + (!readOnly && (editTemplate || item.policy === undefined)) ? ' env-cell-uneditable':''"
-                                :inputClass="item.deprecated ? 'w-full text-yellow-700 italic' : 'w-full'"
-                                :error="errors[item.index] ? errors[item.index].error : null"
-                                :disabled="isDisabledName(item)"
-                                value-empty-text=""
+                            <template v-if="(!readOnly && (editTemplate || item.policy === undefined))">
+                                <FormRow
+                                    v-model="item.name"
+                                    v-ff-tooltip:left="'Cannot be renamed'"
+                                    class="font-mono"
+                                    :containerClass="'w-full env-cell-uneditable'"
+                                    :inputClass="item.deprecated ? 'w-full text-yellow-700 italic' : 'w-full'"
+                                    :error="errors[item.index] ? errors[item.index].error : null"
+                                    :disabled="isDisabledName(item)"
+                                    value-empty-text=""
+                                    data-el="var-name"
+                                    type="text"
+                                />
+                            </template>
+                            <TextCopier
+                                v-else
+                                :text="item.name"
+                                class="font-mono env-cell-uneditable w-full pl-2"
+                                :class="item.deprecated ? 'text-yellow-700 italic' : ''"
                                 data-el="var-name"
-                                :type="(!readOnly && (editTemplate || item.policy === undefined)) ? 'text' : 'uneditable'"
                             />
                         </td>
                         <td class="ff-data-table--cell !p-1 border w-3/5 max-w-xl" :class="{'align-middle':item.encrypted, 'align-top': !item.hidden}">
@@ -162,6 +171,7 @@ import { DocumentDownloadIcon, ExclamationIcon, EyeIcon, EyeOffIcon, Information
 
 import FormHeading from '../../../../components/FormHeading.vue'
 import FormRow from '../../../../components/FormRow.vue'
+import TextCopier from '../../../../components/TextCopier.vue'
 import Alerts from '../../../../services/alerts.js'
 import ChangeIndicator from '../components/ChangeIndicator.vue'
 import LockSetting from '../components/LockSetting.vue'
@@ -181,7 +191,8 @@ export default {
         ExclamationIcon,
         InformationCircleIcon,
         EyeIcon,
-        EyeOffIcon
+        EyeOffIcon,
+        TextCopier
     },
     props: {
         editTemplate: {

frontend/src/pages/application/Overview.vue

@@ -169,7 +169,7 @@ export default {
         ...mapGetters('account', ['featuresCheck']),
         cloudColumns () {
             return [
-                { label: 'Name', class: ['w-1/2'], component: { is: markRaw(DeploymentName) } },
+                { label: 'Name', class: ['w-1/2'], component: { is: markRaw(DeploymentName), map: { url: 'url' } } },
                 {
                     label: 'Instance Status',
                     class: ['w-1/5'],

frontend/src/pages/application/components/cells/DeploymentName.vue

@@ -3,24 +3,52 @@
         class="flex items-center gap-2"
     >
         <IconNodeRedSolid class="ff-icon ff-icon-lg text-red-800" />
-        <div class="flex flex-col space-y-1">
-            {{ name }}
+        <div class="flex flex-col">
+            <span>{{ name }}</span>
+            <TextCopier
+                v-if="url && copyable"
+                :text="url"
+                :show-text="true"
+                class="deployment-name__url text-xs text-gray-400"
+            />
+            <span v-else-if="url" class="text-xs text-gray-400">{{ url }}</span>
         </div>
     </span>
 </template>
 
 <script>
+import TextCopier from '../../../../components/TextCopier.vue'
 import IconNodeRedSolid from '../../../../components/icons/NodeRedSolid.js'
 
 export default {
     name: 'DeploymentName',
-    components: { IconNodeRedSolid },
+    components: { IconNodeRedSolid, TextCopier },
     inheritAttrs: false,
     props: {
         name: {
             required: true,
             type: String
+        },
+        url: {
+            type: String,
+            default: ''
+        },
+        copyable: {
+            type: Boolean,
+            default: true
         }
     }
 }
 </script>
+
+<style scoped lang="scss">
+.deployment-name__url {
+    :deep(.ff-icon) {
+        width: 14px;
+        height: 14px;
+    }
+    :deep(.ff-icon-button) {
+        background: transparent;
+    }
+}
+</style>

frontend/src/pages/device/Editor/index.vue

@@ -25,7 +25,7 @@
                         title="Back to remote instance overview"
                         :to="{ name: 'device-overview', params: {id: device.id} }"
                     >
-                        <ArrowLeftIcon class="ff-btn--icon" />
+                        <HomeIcon class="ff-btn--icon" style="width: 18px; height: 18px;" />
                     </router-link>
                 </div>
                 <ff-tabs :tabs="navigation" class="tabs" />
@@ -54,7 +54,7 @@
 
 <script>
 
-import { ArrowLeftIcon, XIcon } from '@heroicons/vue/solid/index.js'
+import { HomeIcon, XIcon } from '@heroicons/vue/solid/index.js'
 import semver from 'semver'
 import { mapActions, mapGetters, mapState } from 'vuex'
 
@@ -77,7 +77,7 @@ export default {
     name: 'DeviceEditor',
     components: {
         XIcon,
-        ArrowLeftIcon,
+        HomeIcon,
         FfPage,
         DrawerTrigger,
         ResizeBar,

frontend/src/pages/instance/Editor/index.vue

@@ -26,7 +26,7 @@
             <div class="header">
                 <div class="logo">
                     <router-link title="Back to instance overview" :to="{ name: 'instance-overview', params: {id: instance.id} }">
-                        <ArrowLeftIcon class="ff-btn--icon" />
+                        <HomeIcon class="ff-btn--icon" style="width: 18px; height: 18px;" />
                     </router-link>
                 </div>
                 <ff-tabs :tabs="navigation" class="tabs" />
@@ -69,7 +69,7 @@
 </template>
 
 <script>
-import { ArrowLeftIcon, XIcon } from '@heroicons/vue/solid'
+import { HomeIcon, XIcon } from '@heroicons/vue/solid'
 import { mapActions, mapGetters } from 'vuex'
 
 import InstanceStatusPolling from '../../../components/InstanceStatusPolling.vue'
@@ -98,7 +98,7 @@ const DRAWER_MAX_WIDTH_RATIO = 0.9 // Maximum drawer width as percentage of view
 export default {
     name: 'InstanceEditor',
     components: {
-        ArrowLeftIcon,
+        HomeIcon,
         ConfirmInstanceDeleteDialog,
         InstanceActionsButton,
         DashboardLink,