Skip to content

[7154] Follow Up: Poor UX when editor is disabled in immersive mode #7180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
n-lark wants to merge 3 commits into
base: main
Choose a base branch
from
Open

[7154] Follow Up: Poor UX when editor is disabled in immersive mode #7180

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8cf8bc7
Add disabled & restart state to hosted instances UI for disabling the…
n-lark Apr 30, 2026
d890e73
Simplify clearing of awaitingEditorRestart
n-lark Apr 30, 2026
de4f8b6
Merge branch 'main' into 7154-immersive-editor-disabled
n-lark May 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 64 additions & 2 deletions frontend/src/components/immersive-editor/HostedInstanceEditorWrapper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,36 @@
:pendingStateChange="instance.pendingStateChange"
/>

<EmptyState v-else-if="isEditorDisabled" data-el="editor-disabled-empty-state">
Copy link
Copy Markdown
Contributor

@cstns cstns May 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should ask @Yndira-E very nicely to create a couple of static lottie animations and treat these use cases as loadingScreenWrappers

we have frontend/src/images/lottie/immersive-editor-loading-states as examples, we should continue on that path

<template #img>
<LockClosedIcon class="w-20 h-20 text-gray-400 mx-auto" />
</template>
<template #header>Editor Disabled</template>
<template #message>
<p>Access to the editor has been disabled in Settings &gt; Editor.</p>
<p>Re-enable it to resume editing flows for this instance.</p>
</template>
<template #actions>
<ff-button
kind="primary"
data-action="go-to-editor-settings"
@click="goToEditorSettings"
>
Go to Editor Settings
</ff-button>
</template>
</EmptyState>

<EmptyState v-else-if="awaitingEditorRestart" data-el="editor-restart-required-empty-state">
<template #img>
<RefreshIcon class="w-20 h-20 text-gray-400 mx-auto" />
</template>
<template #header>Restart Required</template>
<template #message>
<p>The editor has been re-enabled, but the instance must be restarted for the change to take effect.</p>
</template>
</EmptyState>

<iframe
v-else
ref="iframe"
Expand All @@ -23,11 +53,15 @@
</template>

<script>
import { LockClosedIcon, RefreshIcon } from '@heroicons/vue/outline'
import { mapActions } from 'pinia'

import EmptyState from '../EmptyState.vue'

import LoadingScreenWrapper from './LoadingScreenWrapper.vue'

import { useProductAssistantStore } from '@/stores/product-assistant.js'
import { useUxDrawersStore } from '@/stores/ux-drawers.js'

const States = {
STOPPED: 'stopped',
Expand All @@ -41,7 +75,7 @@ const States = {
}
export default {
name: 'HostedInstanceEditorWrapper',
components: { LoadingScreenWrapper },
components: { EmptyState, LoadingScreenWrapper, LockClosedIcon, RefreshIcon },
inject: ['$services'],
props: {
instance: {
Expand All @@ -56,7 +90,8 @@ export default {
emits: ['iframe-loaded', 'toggle-drawer', 'request-drawer-state'],
data () {
return {
posthogKeepAliveInterval: null
posthogKeepAliveInterval: null,
awaitingEditorRestart: false
}
},
computed: {
Expand All @@ -73,6 +108,25 @@ export default {
]

return this.isInstanceTransitioningStates || unsafeStates.includes(this.instance.meta?.state)
},
isEditorDisabled () {
return !!this.instance.settings?.disableEditor
}
},
watch: {
isEditorDisabled (newVal, oldVal) {
// Running Node-RED keeps the old (disabled) config until restart,
// so suppress the iframe to avoid leaking "Cannot GET /".
if (oldVal === true && newVal === false) {
this.awaitingEditorRestart = true
} else if (newVal === true) {
this.awaitingEditorRestart = false
}
},
shouldDisplayLoadingScreen (isLoading) {
if (this.awaitingEditorRestart && isLoading) {
this.awaitingEditorRestart = false
}
}
},
mounted () {
Expand Down Expand Up @@ -102,6 +156,14 @@ export default {
...mapActions(useProductAssistantStore, {
resetAssistant: 'reset'
}),
...mapActions(useUxDrawersStore, ['openEditorImmersiveDrawer']),
goToEditorSettings () {
this.openEditorImmersiveDrawer()
this.$router.push({
name: 'instance-editor-settings-editor',
params: { id: this.instance.id }
})
},
// todo this event listener should be moved in the messaging.service.js
eventListener (event) {
if (event.origin === this.instance.url) {
Expand Down
Loading