admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-16 17:46:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(editor): Add separate Focus Panel button to ParameterOptions (no-changelog) (#17361)

Browse Source 
Co-authored-by: Milorad FIlipović <milorad@n8n.io>
This commit is contained in:
Charlie Kolb
2025-07-22 10:31:10 +02:00
committed by GitHub
parent d6ac924b3b
commit 9df03f6d5a
1 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
packages/frontend/editor-ui/src/components/ParameterOptions.vue
View File

@@ -55,7 +55,7 @@ const shouldShowExpressionSelector = computed(
const isFocusPanelFeatureEnabled = computed(() => {
return posthogStore.getVariant(FOCUS_PANEL_EXPERIMENT.name) === FOCUS_PANEL_EXPERIMENT.variant;
});
const hasFocusAction = computed(
const canBeOpenedInFocusPanel = computed(
() =>
isFocusPanelFeatureEnabled.value &&
!props.parameter.isNodeSetting &&
@@ -73,10 +73,6 @@ const shouldShowOptions = computed(() => {
return false;
}
if (hasFocusAction.value) {
return true;
}
if (['codeNodeEditor', 'sqlEditor'].includes(props.parameter.typeOptions?.editor ?? '')) {
return false;
}
@@ -105,19 +101,13 @@ const actions = computed(() => {
return props.customActions;
}
const focusAction = {
label: i18n.baseText('parameterInput.focusParameter'),
value: 'focus',
disabled: false,
};
if (isHtmlEditor.value && !isValueAnExpression.value) {
const formatHtmlAction = {
label: i18n.baseText('parameterInput.formatHtml'),
value: 'formatHtml',
};
return hasFocusAction.value ? [formatHtmlAction, focusAction] : [formatHtmlAction];
return [
{
label: i18n.baseText('parameterInput.formatHtml'),
value: 'formatHtml',
},
];
}
const resetAction = {
@@ -131,11 +121,7 @@ const actions = computed(() => {
props.parameter.typeOptions?.editor ?? '',
);
// Conditionally build actions array without nulls to ensure correct typing
const parameterActions = [
hasResetAction ? [resetAction] : [],
hasFocusAction.value ? [focusAction] : [],
].flat();
const parameterActions = [hasResetAction ? resetAction : []].flat();
if (
hasRemoteMethod.value ||
@@ -176,6 +162,15 @@ const onViewSelected = (selected: string) => {
</n8n-text>
</div>
<div v-else :class="$style.controlsContainer">
<N8nTooltip v-if="canBeOpenedInFocusPanel">
<template #content>{{ i18n.baseText('parameterInput.focusParameter') }}</template>
<N8nIcon
size="medium"
:icon="'panel-right'"
:class="$style.focusButton"
@click="$emit('update:modelValue', 'focus')"
/>
</N8nTooltip>
<div
:class="{
[$style.noExpressionSelector]: !shouldShowExpressionSelector,
@@ -209,9 +204,12 @@ const onViewSelected = (selected: string) => {
</template>
<style lang="scss" module>
$container-height: 22px;
.container {
display: flex;
min-height: 22px;
min-height: $container-height;
max-height: $container-height;
}
.loader {
@@ -234,4 +232,11 @@ const onViewSelected = (selected: string) => {
padding-right: 0 !important;
}
}
.focusButton {
&:hover {
cursor: pointer;
color: var(--color-primary);
}
}
</style>