Skip to content

Commit

Permalink
refactor(editor): Refactor nodeHelpers mixin to composable (#7810)
Browse files Browse the repository at this point in the history 
- Convert `nodeHelpers` mixin into composable and fix types
- Replace usage of the mixin with the new composable
- Add missing store imports in components that were dependent on opaque
imports from nodeHelpers mixin
- Refactor the `CollectionParameter` component to the modern script
setup syntax
Github issue / Community forum post (link here to close automatically):

---------

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
  • Loading branch information
@OlegIvaniv
OlegIvaniv authored Dec 8, 2023
1 parent e8a493f commit 35fbc37
Show file tree
Hide file tree
Showing 20 changed files with 1,012 additions and 972 deletions.
14 changes: 10 additions & 4 deletions packages/editor-ui/src/components/BinaryDataDisplay.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,24 +25,30 @@ import type { IBinaryData, IRunData } from 'n8n-workflow';
import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue';
import { nodeHelpers } from '@/mixins/nodeHelpers';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
export default defineComponent({
name: 'BinaryDataDisplay',
mixins: [nodeHelpers],
components: {
BinaryDataDisplayEmbed,
},
setup() {
const nodeHelpers = useNodeHelpers();
return {
nodeHelpers,
};
},
props: [
'displayData', // IBinaryData
'windowVisible', // boolean
],
computed: {
...mapStores(useWorkflowsStore),
binaryData(): IBinaryData | null {
const binaryData = this.getBinaryData(
const binaryData = this.nodeHelpers.getBinaryData(
this.workflowRunData,
this.displayData.node,
this.displayData.runIndex,
Expand Down
3 changes: 2 additions & 1 deletion packages/editor-ui/src/components/CodeNodeEditor/CodeNodeEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ import { completerExtension } from './completer';
import { codeNodeEditorTheme } from './theme';
import AskAI from './AskAI/AskAI.vue';
import { useMessage } from '@/composables/useMessage';
import { useSettingsStore } from '@/stores/settings.store';
export default defineComponent({
name: 'code-node-editor',
Expand Down Expand Up @@ -156,7 +157,7 @@ export default defineComponent({
},
},
computed: {
...mapStores(useRootStore, usePostHog),
...mapStores(useRootStore, usePostHog, useSettingsStore),
aiEnabled(): boolean {
const isAiExperimentEnabled = [ASK_AI_EXPERIMENT.gpt3, ASK_AI_EXPERIMENT.gpt4].includes(
(this.posthogStore.getVariant(ASK_AI_EXPERIMENT.name) ?? '') as string,
Expand Down
280 changes: 141 additions & 139 deletions packages/editor-ui/src/components/CollectionParameter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@

<div v-if="parameterOptions.length > 0 && !isReadOnly" class="param-options">
<n8n-button
v-if="parameter.options.length === 1"
v-if="(parameter.options ?? []).length === 1"
type="tertiary"
block
@click="optionSelected(parameter.options[0].name)"
@click="optionSelected((parameter.options ?? [])[0].name)"
:label="getPlaceholderText"
/>
<div v-else class="add-option">
Expand All @@ -36,7 +36,11 @@
<n8n-option
v-for="item in parameterOptions"
:key="item.name"
:label="$locale.nodeText().collectionOptionDisplayName(parameter, item, path)"
:label="
isNodePropertyCollection(item)
? i18n.nodeText().collectionOptionDisplayName(parameter, item, path)
: item.name
"
:value="item.name"
>
</n8n-option>
Expand All @@ -47,157 +51,155 @@
</div>
</template>
<script lang="ts">
import { defineAsyncComponent, defineComponent } from 'vue';
import { mapStores } from 'pinia';
import type { INodeUi, IUpdateInformation } from '@/Interface';
<script lang="ts" setup>
import { ref, computed, defineAsyncComponent } from 'vue';
import type { IUpdateInformation } from '@/Interface';
import type { INodeProperties, INodePropertyOptions } from 'n8n-workflow';
import type {
INodeParameters,
INodeProperties,
INodePropertyCollection,
INodePropertyOptions,
} from 'n8n-workflow';
import { deepCopy } from 'n8n-workflow';
import { nodeHelpers } from '@/mixins/nodeHelpers';
import { get } from 'lodash-es';
import { useNDVStore } from '@/stores/ndv.store';
import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useI18n } from '@/composables/useI18n';
const ParameterInputList = defineAsyncComponent(async () => import('./ParameterInputList.vue'));
export default defineComponent({
name: 'CollectionParameter',
mixins: [nodeHelpers],
props: [
'hideDelete', // boolean
'nodeValues', // NodeParameters
'parameter', // INodeProperties
'path', // string
'values', // NodeParameters
'isReadOnly', // boolean
],
components: {
ParameterInputList,
},
data() {
return {
selectedOption: undefined,
};
},
computed: {
...mapStores(useNDVStore),
getPlaceholderText(): string {
const placeholder = this.$locale.nodeText().placeholder(this.parameter, this.path);
return placeholder ? placeholder : this.$locale.baseText('collectionParameter.choose');
},
getProperties(): INodeProperties[] {
const returnProperties = [];
let tempProperties;
for (const name of this.propertyNames) {
tempProperties = this.getOptionProperties(name);
if (tempProperties !== undefined) {
returnProperties.push(...tempProperties);
}
}
return returnProperties;
},
// Returns all the options which should be displayed
filteredOptions(): Array<INodePropertyOptions | INodeProperties> {
return (this.parameter.options as Array<INodePropertyOptions | INodeProperties>).filter(
(option) => {
return this.displayNodeParameter(option as INodeProperties);
},
);
},
node(): INodeUi | null {
return this.ndvStore.activeNode;
},
// Returns all the options which did not get added already
parameterOptions(): Array<INodePropertyOptions | INodeProperties> {
return this.filteredOptions.filter((option) => {
return !this.propertyNames.includes(option.name);
});
},
propertyNames(): string[] {
if (this.values) {
return Object.keys(this.values);
}
return [];
},
},
methods: {
getArgument(argumentName: string): string | number | boolean | undefined {
if (this.parameter.typeOptions === undefined) {
return undefined;
}
const selectedOption = ref<string | undefined>(undefined);
export interface Props {
hideDelete?: boolean;
nodeValues: INodeParameters;
parameter: INodeProperties;
path: string;
values: INodeProperties;
isReadOnly?: boolean;
}
const emit = defineEmits<{
(event: 'valueChanged', value: IUpdateInformation): void;
}>();
const props = defineProps<Props>();
const ndvStore = useNDVStore();
const i18n = useI18n();
const nodeHelpers = useNodeHelpers();
const getPlaceholderText = computed(() => {
return (
i18n.nodeText().placeholder(props.parameter, props.path) ??
i18n.baseText('collectionParameter.choose')
);
});
function isNodePropertyCollection(
object: INodePropertyOptions | INodeProperties | INodePropertyCollection,
): object is INodePropertyCollection {
return 'values' in object;
}
if (this.parameter.typeOptions[argumentName] === undefined) {
return undefined;
}
function displayNodeParameter(parameter: INodeProperties) {
if (parameter.displayOptions === undefined) {
// If it is not defined no need to do a proper check
return true;
}
return nodeHelpers.displayParameter(props.nodeValues, parameter, props.path, ndvStore.activeNode);
}
return this.parameter.typeOptions[argumentName];
},
getOptionProperties(optionName: string): INodeProperties[] {
const properties: INodeProperties[] = [];
for (const option of this.parameter.options) {
if (option.name === optionName) {
properties.push(option);
}
}
function getOptionProperties(optionName: string) {
const properties = [];
for (const option of props.parameter.options ?? []) {
if (option.name === optionName) {
properties.push(option);
}
}
return properties;
},
displayNodeParameter(parameter: INodeProperties) {
if (parameter.displayOptions === undefined) {
// If it is not defined no need to do a proper check
return true;
}
return this.displayParameter(this.nodeValues, parameter, this.path, this.node);
return properties;
}
const propertyNames = computed<string[]>(() => {
if (props.values) {
return Object.keys(props.values);
}
return [];
});
const getProperties = computed(() => {
const returnProperties = [];
let tempProperties;
for (const name of propertyNames.value) {
tempProperties = getOptionProperties(name);
if (tempProperties !== undefined) {
returnProperties.push(...tempProperties);
}
}
return returnProperties;
});
const filteredOptions = computed<Array<INodePropertyOptions | INodeProperties>>(() => {
return (props.parameter.options as Array<INodePropertyOptions | INodeProperties>).filter(
(option) => {
return displayNodeParameter(option as INodeProperties);
},
optionSelected(optionName: string) {
const options = this.getOptionProperties(optionName);
if (options.length === 0) {
return;
}
);
});
const parameterOptions = computed(() => {
return filteredOptions.value.filter((option) => {
return !propertyNames.value.includes(option.name);
});
});
function optionSelected(optionName: string) {
const options = getOptionProperties(optionName);
if (options.length === 0) {
return;
}
const option = options[0];
const name = `${this.path}.${option.name}`;
let parameterData;
if (option.typeOptions !== undefined && option.typeOptions.multipleValues === true) {
// Multiple values are allowed
let newValue;
if (option.type === 'fixedCollection') {
// The "fixedCollection" entries are different as they save values
// in an object and then underneath there is an array. So initialize
// them differently.
newValue = get(this.nodeValues, `${this.path}.${optionName}`, {});
} else {
// Everything else saves them directly as an array.
newValue = get(this.nodeValues, `${this.path}.${optionName}`, []);
newValue.push(deepCopy(option.default));
}
parameterData = {
name,
value: newValue,
};
} else {
// Add a new option
parameterData = {
name,
value: deepCopy(option.default),
};
const option = options[0];
const name = `${props.path}.${option.name}`;
let parameterData;
if (
'typeOptions' in option &&
option.typeOptions !== undefined &&
option.typeOptions.multipleValues === true
) {
// Multiple values are allowed
let newValue;
if (option.type === 'fixedCollection') {
// The "fixedCollection" entries are different as they save values
// in an object and then underneath there is an array. So initialize
// them differently.
const retrievedObjectValue = get(props.nodeValues, `${props.path}.${optionName}`, {});
newValue = retrievedObjectValue;
} else {
// Everything else saves them directly as an array.
const retrievedArrayValue = get(props.nodeValues, `${props.path}.${optionName}`, []) as Array<
typeof option.default
>;
if (Array.isArray(retrievedArrayValue)) {
newValue = retrievedArrayValue;
newValue.push(deepCopy(option.default));
}
}
this.$emit('valueChanged', parameterData);
this.selectedOption = undefined;
},
valueChanged(parameterData: IUpdateInformation) {
this.$emit('valueChanged', parameterData);
},
},
});
parameterData = {
name,
value: newValue,
};
} else {
// Add a new option
parameterData = {
name,
value: 'default' in option ? deepCopy(option.default) : null,
};
}
emit('valueChanged', parameterData);
selectedOption.value = undefined;
}
function valueChanged(parameterData: IUpdateInformation) {
emit('valueChanged', parameterData);
}
</script>
<style lang="scss">
Expand Down
Loading

0 comments on commit 35fbc37

Please sign in to comment.