chore(ui): remove store dependency for step form [TCTC-9179]

docs/_docs/contributing/new-step.md

@@ -415,8 +415,7 @@ The step should also be found in the search bar.
 #### In the action bar
 
 Actions are defined in `ui/src/components/constants.ts`.
-Add to `ACTION_CATEGORIES` an object with the `name` of your new step and its
-action `label` into the adequate category.
+Add to `ACTION_CATEGORIES` a relation between step `name` and action `label` into the adequate category.
 
 ### In columns contextual menus
 
@@ -439,9 +438,9 @@ its contextual menu. To achieve this, add your action directly in the template o
 
 #### In the search bar
 
-Searchable actions are defined in the `SEARCH_ACTION` constant in `ui/src/components/constants.ts`.
+Searchable actions are defined in the `ACTION_CATEGORIES` constant in `ui/src/components/constants.ts`.
 All actions from `ACTION_CATEGORIES` are imported. You should add in `type: 'Others actions'`
-any action not defined in `ACTION_CATEGORIES`, such as contextual ones.
+any action not defined in other category, such as contextual ones.
 
 ## Adding documentation
 

ui/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Changed
+
+- Stepform: remove store dependency from step form component
+
 ## [0.114.1] - 2024-09-10
 
 ### Fixed

ui/src/components/ActionToolbar.vue

@@ -67,7 +67,7 @@ export default class ActionToolbar extends Vue {
   get featureFlagsAllowedButtons(): ButtonDef[] {
     return CATEGORY_BUTTONS.filter((d) => {
       if (!d.featureFlag) {
-        return true;
+        return !!d.enable;
       } else {
         return !this.featureFlags ? false : this.featureFlags[d.featureFlag] === 'enable';
       }

ui/src/components/ActionToolbarButton.vue

@@ -22,7 +22,12 @@
 import Vue from 'vue';
 import { Component, Prop } from 'vue-property-decorator';
 
-import { ACTION_CATEGORIES, POPOVER_ALIGN } from '@/components/constants';
+import {
+  ACTION_CATEGORIES,
+  PipelineStepCategory,
+  POPOVER_ALIGN,
+  STEP_LABELS,
+} from '@/components/constants';
 import FAIcon from '@/components/FAIcon.vue';
 import type * as S from '@/lib/steps';
 import { Action, Getter, State } from 'pinia-class';
@@ -60,7 +65,7 @@ export default class ActionToolbarButton extends Vue {
   @Prop({
     type: String,
   })
-  category!: string;
+  category!: PipelineStepCategory;
 
   @Getter(VQBModule) computedActiveStepIndex!: number;
   @Getter(VQBModule) isEditingStep!: boolean;
@@ -106,7 +111,7 @@ export default class ActionToolbarButton extends Vue {
 
   // Filter out unsupported steps
   get items() {
-    return ACTION_CATEGORIES[this.category];
+    return ACTION_CATEGORIES[this.category].map((name) => ({ name, label: STEP_LABELS[name] }));
   }
 }
 </script>

ui/src/components/ActionToolbarSearch.vue

@@ -38,7 +38,7 @@ import type { PipelineStepName } from '@/lib/steps';
 
 import { State, Getter } from 'pinia-class';
 import { VQBModule } from '@/store';
-import { SEARCH_ACTION } from './constants';
+import { ACTION_CATEGORIES, CATEGORY_BUTTONS, STEP_LABELS } from './constants';
 import Popover from './Popover.vue';
 
 @Component({
@@ -68,9 +68,14 @@ export default class SearchActions extends Vue {
   }
 
   get actionOptions() {
-    return SEARCH_ACTION.map((e) => ({
-      ...e,
-      actions: e.actions.filter((a) => !this.unsupportedSteps.includes(a.name)),
+    return CATEGORY_BUTTONS.map((button) => ({
+      type: button.label,
+      actions: ACTION_CATEGORIES[button.category]
+        .map((name) => ({
+          name,
+          label: STEP_LABELS[name],
+        }))
+        .filter((a) => !this.unsupportedSteps.includes(a.name)),
     }));
   }
 

ui/src/components/FilterEditor.vue

@@ -18,6 +18,7 @@
           :errors="errors"
           :multi-variable="multiVariable"
           :columnTypes="columnTypes"
+          @setSelectedColumns="$emit('setSelectColumns', $event)"
         />
       </template>
     </ConditionsEditor>

ui/src/components/QueryBuilder.vue

@@ -1,13 +1,12 @@
 <template>
   <div class="query-builder" data-cy="weaverbird-query-builder" v-if="pipeline">
     <transition v-if="isEditingStep" name="slide-right" mode="out-in">
-      <component
+      <StepForm
         key="stepForm"
-        :is="formComponent"
         ref="step"
+        :name="currentStepFormName"
         :initialStepValue="stepFormInitialValue"
         :stepFormDefaults="stepFormDefaults"
-        :isStepCreation="isStepCreation"
         :backendError="backendError"
         @back="closeStepForm"
         @formSaved="saveStep"
@@ -44,11 +43,12 @@ import { Action, Getter, State } from 'pinia-class';
 import { VQBModule, type VQBActions } from '@/store';
 
 import { version } from '../../package.json';
-import StepFormsComponents from './stepforms';
+import StoreStepFormComponent from './stepforms/StoreStepFormComponent.vue';
 
 @Component({
   name: 'query-builder',
   components: {
+    StepForm: StoreStepFormComponent,
     Pipeline: PipelineComponent,
     FAIcon,
   },
@@ -76,10 +76,6 @@ export default class QueryBuilder extends Vue {
     return this.stepFormInitialValue === undefined;
   }
 
-  get formComponent() {
-    return StepFormsComponents[this.currentStepFormName];
-  }
-
   get backendError(): string | undefined {
     return this.isStepCreation ? undefined : this.editedStepBackendError;
   }