Ensure consistent Open Editor behavior — always default to immersive experience by dimitrieh · Pull Request #6670 · FlowFuse/flowfuse

dimitrieh · 2026-02-09T11:44:44Z

Description

Improve the consistency of "Open Editor" behavior across FlowFuse to always default to the immersive experience, and polish instance interactions across the platform.

Core changes

Home icon in immersive editor: Replace back arrow with home icon in the immersive editor drawer header (hosted and remote instances)
Split dropdown editor button: Convert "Open Editor" into a split button with a chevron dropdown containing "Open Default URL" as an alternative action
Clickable instance tiles: Make instance tiles on the home page clickable as a whole (navigates to instance overview)
Copy-to-clipboard URLs: Show instance URL with copy-to-clipboard in the DeploymentName table cell (application overview, team hosted instances). Copy button click does not trigger row navigation.
ApplicationLink column: Wire the Application column on the team Hosted Instances page to use the ApplicationLink component (clickable link)

Editor & Actions button emphasis

The editor and actions buttons use mutually exclusive primary styling based on whether the editor is actually usable. This applies in both the instance page header and the immersive editor drawer.

Scenario	Editor button	Actions button
Running, editor enabled	Primary	Secondary
Running + HA enabled	Secondary	Primary
Running + editor disabled in settings	Secondary	Primary
Not running (suspended, stopped, etc.)	Secondary	Primary

UI polish

Rename "Open Instance" to "Open Default URL" in split button dropdown and instance tile kebab menu
Add "Open Default URL" to home page instance tile kebab menu with divider separator
Style kebab menu as tertiary button with transparent border to match editor button height (34px)
Fix click propagation: TextCopier .stop prevents row navigation; editor chevron .stop prevents row navigation
Fix data table icon styles: reset negative margin on icons inside buttons; prevent row-hover background/color from bleeding into button icons
Polish drawer header: full-height hover backgrounds on home icon and close button
Add white-space: nowrap to editor button text
Rename "Editor" to "Default URL" in the overview info table; make URL read-only with copy-to-clipboard and external link button
Replace link icons with chevron-right action buttons in info table rows (Security, Maintenance, HA)
Add copy-to-clipboard to Instance ID, Name, and Default URL in instance Settings > General
Add copy-to-clipboard to read-only environment variable names
Update TextCopier hover style to use primary highlight color consistently
Polish dashboard section header alignment

Related Issue(s)

closes #6653

Checklist

I have read the contribution guidelines
Suitable unit/system level tests have been added and they pass
I have built and verified the change locally

hardillb · 2026-02-09T11:53:05Z

Does this still doesn't have a single click (no copy/paste) way to open the bare editor? if not it needs to add it.

codecov · 2026-02-09T11:58:35Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 76.66%. Comparing base (c909cfa) to head (5e4ae04).
⚠️ Report is 19 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6670   +/-   ##
=======================================
  Coverage   76.66%   76.66%           
=======================================
  Files         398      398           
  Lines       20103    20103           
  Branches     4841     4841           
=======================================
  Hits        15411    15411           
  Misses       4692     4692

Flag	Coverage Δ
backend	`76.66% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

dimitrieh · 2026-02-09T12:25:19Z

Does this still doesn't have a single click (no copy/paste) way to open the bare editor? if not it needs to add it.

@hardillb working on this atm 👍.

Swap ArrowLeftIcon for HomeIcon in both instance and device immersive editors, with a slightly larger size (18px) to improve visual clarity.

- Convert EditorLink from single button to split dropdown with HeadlessUI Menu: left half opens editor, chevron opens dropdown with "Open Instance" option that opens Node-RED URL directly - Add "Open Instance" as first item in InstanceTile kebab menu - Add hover/active backgrounds to immersive editor drawer header buttons (home icon, close button)

- Right-align split button dropdown with chevron toggle - Make chevron toggle square with larger icon and bolder text - Reduce action button padding for tighter layout - Remove icon margins on minimal (icon-only) editor button - Add kebab menu divider between Open Instance and Start - Fix kebab menu edge-to-edge alignment (reset ul padding) - Make drawer header home/close buttons fill full height on hover

@click

Replace individual clickable elements (router-link for name, anchor for URL) with a single click handler on the tile root that navigates to the instance overview. The URL becomes display-only text. Action buttons remain independent via @click.stop propagation.

Match the kebab icon size to the editor button (20px), add indigo tertiary color with purple hover, and add a 4px gap between action buttons for visual breathing room.

- Bold instance name (font-weight 500) and reduce right padding on tile - Make Open Editor button primary and Actions button secondary - Add primary prop to EditorLink split button component

Make the editor button primary only when the editor is actually usable (running, not HA, editor not disabled). The actions button gets the inverse treatment — primary when the editor is not usable, guiding users toward Start/Restart. Rename "Editor" to "Default URL" in the overview info table for accuracy.

- Rename "Editor" to "Default URL" in overview info table - Make Default URL read-only with TextCopier and external link button - Replace link icons with chevron-right action buttons in info rows - Add copy-to-clipboard to Instance ID, Name, and Default URL in Settings - Add copy-to-clipboard to read-only env var names - Update TextCopier hover to use primary highlight color consistently - Rename "Open Instance" to "Open Default URL" in split button and kebab menu

- Stop click propagation on TextCopier to prevent row navigation - Stop click propagation on editor split button chevron toggle - Add transparent border to kebab menu button to match editor button height (34px) - Reset negative margin on icons inside buttons in data table cells - Fix row-hover background bleeding into button icons in table cells - Enable copy-to-clipboard on team Hosted Instances page - Add white-space: nowrap to editor button text - Show instance URL with copy-to-clipboard in DeploymentName cell - Wire ApplicationLink component for Application column - Polish dashboard section header alignment

…st dep

- Add trailing newline to KebabMenu.vue (eol-last lint rule) - Remove stale [data-el="editor-link"] assertion from instances.spec.js (attribute was removed in dc2fe51 when Overview switched to TextCopier) - Replace .parent().parent().parent() with .closest('tr') in team/instances.spec.js (DeploymentName now wraps name in <span>)

dimitrieh · 2026-02-09T15:39:23Z

Fixes pushed

Change	Correct fix?	Spirit of the test preserved?
KebabMenu.vue trailing newline	Yes	N/A (lint, not a test)
Remove [data-el="editor-link"] assertion	Yes — attribute was removed deliberately in this PR's own commit `dc2fe51`	Yes — the editor button existence is already verified by [data-action="open-editor"] on the line above
.parent()³ → .closest('tr')	Yes — DeploymentName added a wrapper, shifting depth by 1	Yes — the test intent is "within instance-1-1's row, check button state" and .closest('tr') captures that exactly

…k navigation - Replace ChevronRightIcon with ArrowRightIcon (outline, 16px) in info table - Rename "Default URL" to "Direct URL" across Overview, Settings, EditorLink, and InstanceTile - Use navigateTo for Ctrl/Cmd+click new-tab support on editor and submenu links - Align editor dropdown right edge to trigger button and match 10px gap with Actions menu

hardillb · 2026-02-09T16:45:30Z

The icon after the URL works as needed as well as the dropdown on the open editor button.

… tabs Add optional target parameter to navigateTo so EditorLink can pass the instance ID as the window name instead of _blank.

cstns

There a couple of niggles on which i commented on, but functionaly it's in a really good state. Very nice iteration and a good UX improvement

…nd revert formatting - Rename editorUsable to isEditorUsable in ActionButton (boolean naming convention) - Replace raw HeadlessUI Menu with shared DropdownMenu component in EditorLink - Use navigation helper with named target instead of window.open in Overview - Remove unnecessary v-if guard on instance.url in Overview info table - Add TextCopier to InstanceTile URL for copy-to-clipboard consistency - Revert formatting-only changes in RecentlyModifiedInstances

dimitrieh requested a review from cstns February 9, 2026 11:44

dimitrieh temporarily deployed to staging February 9, 2026 11:48 — with GitHub Actions Inactive

dimitrieh temporarily deployed to staging February 9, 2026 12:29 — with GitHub Actions Inactive

dimitrieh temporarily deployed to staging February 9, 2026 12:48 — with GitHub Actions Inactive

dimitrieh added 9 commits February 9, 2026 13:49

Replace back arrow with home icon in immersive editor drawer

b7acfcb

Swap ArrowLeftIcon for HomeIcon in both instance and device immersive editors, with a slightly larger size (18px) to improve visual clarity.

Style kebab menu as tertiary button in instance tile

50c266e

Match the kebab icon size to the editor button (20px), add indigo tertiary color with purple hover, and add a 4px gap between action buttons for visual breathing room.

Polish instance tile and make editor button primary on overview

65dbfb5

- Bold instance name (font-weight 500) and reduce right padding on tile - Make Open Editor button primary and Actions button secondary - Add primary prop to EditorLink split button component

Fix lint errors in RecentlyModifiedInstances

c3997de

dimitrieh force-pushed the immersive-editor-home-icon branch from 503dc33 to c3997de Compare February 9, 2026 12:56

dimitrieh temporarily deployed to staging February 9, 2026 13:00 — with GitHub Actions Inactive

dimitrieh had a problem deploying to staging February 9, 2026 13:44 — with GitHub Actions Failure

Fix ESLint import order in DeploymentName

c4ad30f

dimitrieh temporarily deployed to staging February 9, 2026 13:50 — with GitHub Actions Inactive

Use plain CSS scoped style for kebab border to avoid sass-embedded te…

a7dafee

…st dep

dimitrieh temporarily deployed to staging February 9, 2026 13:57 — with GitHub Actions Inactive

dimitrieh temporarily deployed to staging February 9, 2026 15:42 — with GitHub Actions Inactive

dimitrieh marked this pull request as ready for review February 9, 2026 16:03

dimitrieh mentioned this pull request Feb 9, 2026

Immersive editor: warn users about undeployed changes before navigating away #6672

Open

Use named window target for Cmd/Ctrl+click to reuse existing instance…

05ed6ab

… tabs Add optional target parameter to navigateTo so EditorLink can pass the instance ID as the window name instead of _blank.

dimitrieh temporarily deployed to staging February 9, 2026 17:14 — with GitHub Actions Inactive

cstns requested changes Feb 9, 2026

View reviewed changes

dimitrieh requested a review from cstns February 9, 2026 18:17

Merge branch 'main' into immersive-editor-home-icon

13338d6

dimitrieh temporarily deployed to staging February 9, 2026 18:25 — with GitHub Actions Inactive

cstns approved these changes Feb 9, 2026

View reviewed changes

Merge branch 'main' into immersive-editor-home-icon

5e4ae04

Steve-Mcl temporarily deployed to staging February 10, 2026 09:40 — with GitHub Actions Inactive

cstns merged commit caa8232 into main Feb 10, 2026
27 checks passed

cstns deleted the immersive-editor-home-icon branch February 10, 2026 09:55

cstns temporarily deployed to staging February 10, 2026 09:55 — with GitHub Actions Inactive

Steve-Mcl mentioned this pull request Feb 10, 2026

Hosted and Report instances are no longer aligned #6681

Open

dimitrieh mentioned this pull request Feb 10, 2026

Add 'Open in new tab' option to Editor split button dropdown #6682

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Ensure consistent Open Editor behavior — always default to immersive experience#6670

Ensure consistent Open Editor behavior — always default to immersive experience#6670
cstns merged 18 commits intomainfrom
immersive-editor-home-icon

dimitrieh commented Feb 9, 2026 •

edited

Loading

Uh oh!

hardillb commented Feb 9, 2026

Uh oh!

codecov Bot commented Feb 9, 2026 •

edited

Loading

Uh oh!

dimitrieh commented Feb 9, 2026

Uh oh!

dimitrieh commented Feb 9, 2026

Uh oh!

hardillb commented Feb 9, 2026

Uh oh!

cstns left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

dimitrieh commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Core changes

Editor & Actions button emphasis

UI polish

Related Issue(s)

Checklist

Uh oh!

hardillb commented Feb 9, 2026

Uh oh!

codecov Bot commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

dimitrieh commented Feb 9, 2026

Uh oh!

dimitrieh commented Feb 9, 2026

Uh oh!

hardillb commented Feb 9, 2026

Uh oh!

cstns left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

dimitrieh commented Feb 9, 2026 •

edited

Loading

codecov Bot commented Feb 9, 2026 •

edited

Loading