Merge pull request #753 from bruin-data/patch/add-variant-selection-dropdown

add-variant-selection-dropdown

Author: TanayBensuYurtturk

CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+## [0.80.0] - [2026-05-11]
+- Added variant selector to the asset panel for pipelines that declare variants. The selected variant is passed to `bruin run` as `--variant <name>`.
+
 ## [0.79.9] - [2026-04-29]
 - Improved Ingestr asset display with edit/view mode toggle using "Edit"/"Done" text link for cleaner UI.
 

package.json

@@ -2,7 +2,7 @@
   "name": "bruin",
   "displayName": "Bruin",
   "description": "Manage your Bruin data assets from within VS Code.",
-  "version": "0.79.9",
+  "version": "0.80.0",
   "engines": {
     "vscode": "^1.87.0"
   },

webview-ui/src/components/asset/AssetGeneral.vue

@@ -5,12 +5,14 @@
     <div class="flex flex-col space-y-3">
       <div class="flex flex-col">
         <!-- Checkbox and Date Controls Row -->
-        <div class="flex flex-col xs:flex-row gap-1 w-full justify-between">
+        <div class="flex flex-col xs:flex-row flex-wrap gap-x-3 gap-y-2 w-full">
           <EnvSelectMenu :options="environments" @selected-env="setSelectedEnv"
             :selectedEnvironment="selectedEnvironment" class="flex-shrink-0" />
+          <VariantSelectMenu v-if="hasVariants" :options="variantNames"
+            :selectedVariant="selectedVariant" @selectedVariant="onVariantSelect" class="flex-shrink-0"/>
           <!-- Date Controls and Checkbox Group -->
-          <div id="controls" class="flex flex-col xs:w-1/2">
-            <div class="flex flex-col xs:flex-row gap-1 w-full justify-between xs:justify-end">
+          <div id="controls" class="flex flex-col flex-shrink-0">
+            <div class="flex flex-col xs:flex-row gap-1 w-full">
               <DateInput label="Start Date" v-model="startDate" />
               <DateInput label="End Date" v-model="endDate" />
               <div class="flex items-center gap-1 self-start xs:self-end">
@@ -395,6 +397,7 @@ import SqlEditor from "@/components/asset/SqlEditor.vue";
 import IngestrAssetDisplay from "@/components/asset/IngestrAssetDisplay.vue";
 import CheckboxGroup from "@/components/ui/checkbox-group/CheckboxGroup.vue";
 import EnvSelectMenu from "@/components/ui/select-menu/EnvSelectMenu.vue";
+import VariantSelectMenu from "@/components/ui/select-menu/VariantSelectMenu.vue";
 import AssetVariablesPanel from "@/components/ui/variables-panel/AssetVariablesPanel.vue";
 import ButtonGroup from "@/components/ui/buttons/ButtonGroup.vue";
 import { updateValue, resetStates, determineValidationStatus } from "@/utilities/helper";
@@ -747,6 +750,34 @@ const pipelineInfo = computed(() => {
   return props.pipeline?.raw || props.pipeline || {};
 });
 
+// --- Variant selection (for variant-bearing pipelines) -------------------
+const selectedVariant = ref<string>("");
+const variantNames = computed<string[]>(() => {
+  const variants = pipelineInfo.value?.variants;
+  if (!variants || typeof variants !== "object") return [];
+  return Object.keys(variants).sort();
+});
+const hasVariants = computed(() => variantNames.value.length > 0);
+
+watch(
+  variantNames,
+  (names) => {
+    if (names.length === 0) {
+      selectedVariant.value = "";
+      return;
+    }
+    // Keep current selection if still valid; otherwise default to first.
+    if (!names.includes(selectedVariant.value)) {
+      selectedVariant.value = names[0];
+    }
+  },
+  { immediate: true }
+);
+
+function onVariantSelect(value: string) {
+  selectedVariant.value = value;
+}
+
 const fetchedVariables = ref({});
 
 const pipelineVariables = computed(() => {
@@ -1412,6 +1443,11 @@ function buildCommandPayload(
     payload += " --environment " + selectedEnv.value;
   }
 
+  if (hasVariants.value && selectedVariant.value && selectedVariant.value.trim() !== "") {
+    const safeVariant = selectedVariant.value.replace(/"/g, '\\"');
+    payload += ` --variant "${safeVariant}"`;
+  }
+
   return payload;
 }
 

webview-ui/src/components/ui/select-menu/VariantSelectMenu.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="flex flex-col w-36">
+    <span class="text-xs mb-1 font-medium text-editor-fg">Variant</span>
+    <div class="relative">
+      <vscode-dropdown
+        @change="handleSelect"
+        class="w-full"
+        :value="selectedVariant"
+      >
+        <vscode-option
+          v-for="option in options"
+          :key="option"
+          :value="option"
+        >
+          {{ option }}
+        </vscode-option>
+      </vscode-dropdown>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+defineProps<{
+  options: string[];
+  selectedVariant: string;
+}>();
+
+const emit = defineEmits(['selectedVariant']);
+
+function handleSelect(event: Event) {
+  const value = (event.target as HTMLSelectElement).value;
+  emit('selectedVariant', value);
+}
+</script>
+
+<style scoped>
+vscode-dropdown {
+  @apply h-5 rounded-none;
+}
+vscode-dropdown::part(control) {
+  @apply px-1 py-0.5 text-2xs border-0;
+}
+vscode-dropdown::part(listbox) {
+  bottom: auto!important;
+  top: 100%!important;
+  left: 0!important;
+}
+</style>