diff --git a/ui/src/components/stepforms/StepFormComponent.vue b/ui/src/components/stepforms/StepFormComponent.vue index 19f83f0e8..2d8e9cae5 100644 --- a/ui/src/components/stepforms/StepFormComponent.vue +++ b/ui/src/components/stepforms/StepFormComponent.vue @@ -5,6 +5,7 @@ ref="step" :translator="translator" :initialStepValue="initialStepValue" + :stepFormDefaults="stepFormDefaults" :isStepCreation="isStepCreation" :columnTypes="columnTypes" :backendError="backendError" @@ -89,6 +90,10 @@ export default class StepFormComponent extends Vue { pipelineNameOrDomain: string | ReferenceToExternalQuery, ) => Promise; + // some complex steps use selectedColumns to preselect column (rename, filter...) + @Prop({}) + selectedColumn?: string; + get isStepCreation() { return this.initialStepValue === undefined; } @@ -105,7 +110,7 @@ export default class StepFormComponent extends Vue { this.$emit('formSaved', step); } - selectedColumns: string[] = []; + selectedColumns: string[] = this.selectedColumn ? [this.selectedColumn] : []; setSelectedColumns({ column }: { column: string | undefined }) { if (!!column && column !== this.selectedColumns[0]) { diff --git a/ui/src/components/stepforms/StoreStepFormComponent.vue b/ui/src/components/stepforms/StoreStepFormComponent.vue index 6ab5adb82..fcaad52cf 100644 --- a/ui/src/components/stepforms/StoreStepFormComponent.vue +++ b/ui/src/components/stepforms/StoreStepFormComponent.vue @@ -5,6 +5,7 @@ ref="step" :translator="translator" :initialStepValue="initialStepValue" + :stepFormDefaults="stepFormDefaults" :isStepCreation="isStepCreation" :columnTypes="columnTypes" :backendError="backendError" diff --git a/ui/stories/StepForm.stories.ts b/ui/stories/StepForm.stories.ts index b6e2c7a52..d7a1b1bc7 100644 --- a/ui/stories/StepForm.stories.ts +++ b/ui/stories/StepForm.stories.ts @@ -105,3 +105,98 @@ export const Default: StoryObj = { }, }, }; + +export const Edition: StoryObj = { + render: (args, { argTypes }) => ({ + components: { StepFormComponent }, + props: Object.keys(argTypes), + template: '', + methods: { + onFormSaved: action('formSaved'), + onBack: action('back'), + }, + }), + args: { + name: 'text', + availableDomains: [{ name: 'other_domain', uid: 'other_domain' }], + unjoinableDomains: [], + columnTypes: { a: 'string', b: 'boolean' }, + availableVariables: SAMPLE_VARIABLES, + variableDelimiters: { start: '<%=', end: '%>' }, + trustedVariableDelimiters: { start: '{{', end: '}}' }, + variables: VARIABLES, + initialStepValue: { + text: 'Text value', + newColumn: 'a', + }, + interpolateFunc: (a) => a, + getColumnNamesFromPipeline: () => Promise.resolve(['c', 'd']), + }, + argTypes: { + name: { + disable: true, + }, + }, +}; + +export const WithDefaults: StoryObj = { + render: (args, { argTypes }) => ({ + components: { StepFormComponent }, + props: Object.keys(argTypes), + template: '', + methods: { + onFormSaved: action('formSaved'), + onBack: action('back'), + }, + }), + args: { + name: 'text', + availableDomains: [{ name: 'other_domain', uid: 'other_domain' }], + unjoinableDomains: [], + columnTypes: { a: 'string', b: 'boolean' }, + availableVariables: SAMPLE_VARIABLES, + variableDelimiters: { start: '<%=', end: '%>' }, + trustedVariableDelimiters: { start: '{{', end: '}}' }, + stepFormDefaults: { + newColumn: 'd', + }, + variables: VARIABLES, + interpolateFunc: (a) => a, + getColumnNamesFromPipeline: () => Promise.resolve(['c', 'd']), + }, + argTypes: { + name: { + disable: true, + }, + }, +}; + +export const WithPreselectedColumn: StoryObj = { + render: (args, { argTypes }) => ({ + components: { StepFormComponent }, + props: Object.keys(argTypes), + template: '', + methods: { + onFormSaved: action('formSaved'), + onBack: action('back'), + }, + }), + args: { + name: 'filter', + availableDomains: [{ name: 'other_domain', uid: 'other_domain' }], + unjoinableDomains: [], + columnTypes: { a: 'string', b: 'boolean' }, + availableVariables: SAMPLE_VARIABLES, + variableDelimiters: { start: '<%=', end: '%>' }, + trustedVariableDelimiters: { start: '{{', end: '}}' }, + selectedColumn: 'a', + variables: VARIABLES, + interpolateFunc: (a) => a, + getColumnNamesFromPipeline: () => Promise.resolve(['c', 'd']), + }, + argTypes: { + name: { + disable: true, + }, + }, +};