feat(editor): Add button to open workflow from Instance AI preview (no-changelog) (#29880)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Tuukka Kantola 2026-05-06 16:22:22 +02:00 committed by GitHub
parent bc8d196931
commit 6b1061386e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 26 additions and 1 deletions

View File

@ -5192,6 +5192,7 @@
"instanceAi.artifactsPanel.archived": "Archived",
"instanceAi.previewTabBar.collapse": "Collapse panel",
"instanceAi.previewTabBar.openInEditor": "Open in editor",
"instanceAi.previewTabBar.openWorkflowInEditor": "Open workflow in editor",
"instanceAi.previewTabBar.copyLink": "Copy link",
"instanceAi.delegateCard.implementsStep": "Step {step}",
"instanceAi.delegateCard.delegatingTo": "Delegating to",

View File

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ref, watch, nextTick, onBeforeUnmount, useTemplateRef } from 'vue';
import { N8nText, N8nIcon } from '@n8n/design-system';
import { N8nText, N8nIcon, N8nIconButton } from '@n8n/design-system';
import { useI18n } from '@n8n/i18n';
import type { PushMessage } from '@n8n/api-types';
import WorkflowPreview from '@/app/components/WorkflowPreview.vue';
@ -56,6 +56,12 @@ function relayPushEvent(event: PushMessage) {
);
}
function openWorkflowInEditor() {
const workflowId = workflow.value?.id ?? props.workflowId;
if (!workflowId) return;
window.open(`/workflow/${workflowId}`, '_blank', 'noopener');
}
async function fetchWorkflow(id: string) {
const isRefresh = workflow.value?.id === id;
const generation = ++fetchGeneration;
@ -133,6 +139,17 @@ defineExpose({ relayPushEvent });
loader-type="spinner"
/>
<N8nIconButton
v-if="workflow"
icon="external-link"
variant="subtle"
size="large"
:class="$style.openWorkflowButton"
:aria-label="i18n.baseText('instanceAi.previewTabBar.openWorkflowInEditor')"
data-test-id="instance-ai-workflow-preview-open-editor"
@click="openWorkflowInEditor"
/>
<!-- Loading overlay (shown during initial load or when no workflow yet) -->
<div v-if="isLoading && !workflow" :class="$style.centerState">
<N8nIcon icon="loader-circle" :size="80" spin />
@ -156,4 +173,11 @@ defineExpose({ relayPushEvent });
gap: var(--spacing--xs);
height: 100%;
}
.openWorkflowButton {
position: absolute;
top: var(--spacing--xs);
right: var(--spacing--xs);
z-index: 1;
}
</style>