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

feat(editor): Add focus panel component (no-changelog) (#16620)

Browse Source
This commit is contained in:
Daria
2025-06-24 18:13:09 +03:00
committed by GitHub
parent 92afe036dd
commit 404f8451d5
8 changed files with 448 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,8 @@ import {
import { isValueExpression } from '@/utils/nodeTypesUtils';
import { computed } from 'vue';
import { useNDVStore } from '@/stores/ndv.store';
import { AI_TRANSFORM_NODE_TYPE } from '@/constants';
import { usePostHog } from '@/stores/posthog.store';
import { AI_TRANSFORM_NODE_TYPE, FOCUS_PANEL_EXPERIMENT } from '@/constants';
interface Props {
parameter: INodeProperties;
@@ -37,6 +38,8 @@ const emit = defineEmits<{
}>();
const i18n = useI18n();
const ndvStore = useNDVStore();
const posthogStore = usePostHog();
const isDefault = computed(() => props.parameter.default === props.value);
const isValueAnExpression = computed(() => isValueExpression(props.parameter, props.value));
@@ -53,6 +56,10 @@ const shouldShowOptions = computed(() => {
return false;
}
if (hasFocusAction.value) {
return true;
}
if (['codeNodeEditor', 'sqlEditor'].includes(props.parameter.typeOptions?.editor ?? '')) {
return false;
}
@@ -64,7 +71,7 @@ const shouldShowOptions = computed(() => {
return false;
});
const selectedView = computed(() => (isValueAnExpression.value ? 'expression' : 'fixed'));
const activeNode = computed(() => useNDVStore().activeNode);
const activeNode = computed(() => ndvStore.activeNode);
const hasRemoteMethod = computed(
() =>
!!props.parameter.typeOptions?.loadOptionsMethod || !!props.parameter.typeOptions?.loadOptions,
@@ -77,27 +84,44 @@ const resetValueLabel = computed(() => {
return i18n.baseText('parameterInput.resetValue');
});
const isFocusPanelFeatureEnabled = computed(() => {
return posthogStore.getVariant(FOCUS_PANEL_EXPERIMENT.name) === FOCUS_PANEL_EXPERIMENT.variant;
});
const hasFocusAction = computed(
() =>
isFocusPanelFeatureEnabled.value &&
!props.isReadOnly &&
activeNode.value &&
(props.parameter.type === 'string' || props.parameter.type === 'json'),
);
const actions = computed(() => {
if (Array.isArray(props.customActions) && props.customActions.length > 0) {
return props.customActions;
}
const focusAction = {
label: i18n.baseText('parameterInput.focusParameter'),
value: 'focus',
disabled: false,
};
if (isHtmlEditor.value && !isValueAnExpression.value) {
return [
{
label: i18n.baseText('parameterInput.formatHtml'),
value: 'formatHtml',
},
];
const formatHtmlAction = {
label: i18n.baseText('parameterInput.formatHtml'),
value: 'formatHtml',
};
return hasFocusAction.value ? [formatHtmlAction, focusAction] : [formatHtmlAction];
}
const parameterActions = [
{
label: resetValueLabel.value,
value: 'resetValue',
disabled: isDefault.value,
},
];
const resetAction = {
label: resetValueLabel.value,
value: 'resetValue',
disabled: isDefault.value,
};
const parameterActions = hasFocusAction.value ? [resetAction, focusAction] : [resetAction];
if (
hasRemoteMethod.value ||