fix(step-form-component): provide step form defaults and preselect co…

…lumn if necessary in complex steps [TCTC-9437] (#2251) * fix(step-form-component): provide step form defaults and preselect column if necessary in complex steps * fix: lint
ToucanToco · Sep 27, 2024 · 99c0ffc · 99c0ffc
1 parent 3852692
commit 99c0ffc
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 1 deletion.
diff --git 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<string[] | undefined>;
 
+  // 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
@@ -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
@@ -105,3 +105,98 @@ export const Default: StoryObj<StepFormComponent> = {
     },
   },
 };
+
+export const Edition: StoryObj<StepFormComponent> = {
+  render: (args, { argTypes }) => ({
+    components: { StepFormComponent },
+    props: Object.keys(argTypes),
+    template: '<StepFormComponent v-bind="$props" @formSaved="onFormSaved" @back="onBack" />',
+    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<StepFormComponent> = {
+  render: (args, { argTypes }) => ({
+    components: { StepFormComponent },
+    props: Object.keys(argTypes),
+    template: '<StepFormComponent v-bind="$props" @formSaved="onFormSaved" @back="onBack" />',
+    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<StepFormComponent> = {
+  render: (args, { argTypes }) => ({
+    components: { StepFormComponent },
+    props: Object.keys(argTypes),
+    template: '<StepFormComponent v-bind="$props" @formSaved="onFormSaved" @back="onBack" />',
+    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,
+    },
+  },
+};