feat(form): add environment variable overlap dialog and handling

Author: cskiwi

client/src/components/apps/form.vue

@@ -1164,6 +1164,43 @@
       </div>
       <Addons :addons="addons" :appname="name" />
 
+      <!-- ENV VAR OVERLAP DIALOG -->
+      <v-dialog v-model="envOverlapDialog" max-width="800px" persistent>
+        <v-card>
+          <v-card-title class="headline">
+            {{ $t("app.form.envVarConflicts") }}
+          </v-card-title>
+          <v-card-text>
+            <p class="mb-4">
+              {{ $t("app.form.envVarConflictsDescription") }}
+            </p>
+            <v-data-table
+              v-model="selectedOverlaps"
+              :headers="overlapHeaders"
+              :items="envOverlaps"
+              item-value="name"
+              show-select
+            >
+              <template v-slot:item.oldValue="{ item }">
+                <code class="text-caption">{{ item.oldValue }}</code>
+              </template>
+              <template v-slot:item.newValue="{ item }">
+                <code class="text-caption">{{ item.newValue }}</code>
+              </template>
+            </v-data-table>
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn variant="text" @click="cancelOverlapDialog">
+              {{ $t("global.cancel") }}
+            </v-btn>
+            <v-btn color="primary" @click="applyOverlapChanges">
+              {{ $t("global.applyChanges") }}
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+
       <!-- SUBMIT -->
       <v-row class="pt-5">
         <v-col cols="12" md="4">
@@ -1194,8 +1231,8 @@ import axios from "axios";
 import Addons from "./addons.vue";
 import { defineComponent } from "vue";
 import { useKuberoStore } from "../../stores/kubero";
-import { mapState } from "pinia";
 import Breadcrumbs from "../breadcrumbs.vue";
+import Swal from "sweetalert2";
 
 type App = {
   name: string;
@@ -1668,6 +1705,11 @@ export default defineComponent({
         timeoutSeconds: 3,
         periodSeconds: 10,
       },
+      // Environment variable overlap dialog state
+      envOverlapDialog: false,
+      envOverlaps: [] as { name: string; oldValue: string; newValue: string }[],
+      selectedOverlaps: [] as string[],
+      pendingEnvVars: [] as EnvVar[],
       nameRules: [
         (v: any) => !!v || "Name is required",
         (v: any) => v.length <= 60 || "Name must be less than 60 characters",
@@ -1721,6 +1763,13 @@ export default defineComponent({
       const store = useKuberoStore();
       return store.kubero;
     },
+    overlapHeaders() {
+      return [
+        { title: this.$t('app.form.variableName'), key: 'name' },
+        { title: this.$t('app.form.currentValue'), key: 'oldValue' },
+        { title: this.$t('app.form.newValue'), key: 'newValue' },
+      ];
+    },
   },
   watch: {
     advanced(newValue) {
@@ -2555,6 +2604,10 @@ export default defineComponent({
     },
     parseEnvFile(text: any) {
       const lines = text.split("\n");
+      const newEnvVars: EnvVar[] = [];
+      const overlaps: { name: string; oldValue: string; newValue: string }[] =
+        [];
+
       for (const line of lines) {
         const trimmedLine = line.trim();
         // Skip empty lines and comments
@@ -2573,10 +2626,51 @@ export default defineComponent({
         // Remove quotes if present
         const cleanValue = value.replace(/^["']|["']$/g, "");
 
-        if (name && !this.envVars.some((envVar) => envVar.name === name)) {
-          this.envVars.push({ name, value: cleanValue });
+        if (name) {
+          const existingVar = this.envVars.find(
+            (envVar) => envVar.name === name
+          );
+          if (existingVar) {
+            // skip if value is the same
+            if (existingVar.value === cleanValue) {
+              continue;
+            }
+
+            // Found overlap - add to overlaps list
+            overlaps.push({
+              name,
+              oldValue: existingVar.value,
+              newValue: cleanValue,
+            });
+          } else {
+            // No overlap - can add directly
+            newEnvVars.push({ name, value: cleanValue });
+          }
         }
       }
+
+      // Add non-overlapping variables immediately
+      this.envVars.push(...newEnvVars);
+
+      // If there are overlaps, show dialog
+      if (overlaps.length > 0) {
+        this.envOverlaps = overlaps;
+        this.selectedOverlaps = overlaps.map((overlap) => overlap.name); // Default all selected
+        this.envOverlapDialog = true;
+      } else if (newEnvVars.length === 0) {
+        // Show notification if no new environment variables were found
+        Swal.fire({
+          toast: true,
+          position: 'top-end',
+          showConfirmButton: false,
+          timer: 3000,
+          timerProgressBar: true,
+          icon: 'info',
+          title: this.$t('app.form.noNewEnvVarsFound'),
+          background: "rgb(var(--v-theme-cardBackground))",
+          color: "rgba(var(--v-theme-on-background),var(--v-high-emphasis-opacity))",
+        });
+      }
     },
     addVolumeLine() {
       this.extraVolumes.push({
@@ -2632,6 +2726,30 @@ export default defineComponent({
       });
       return cronjobs;
     },
+    // Environment variable overlap dialog methods
+    cancelOverlapDialog() {
+      this.envOverlapDialog = false;
+      this.envOverlaps = [];
+      this.selectedOverlaps = [];
+    },
+    applyOverlapChanges() {
+      // Update existing environment variables with selected new values
+      for (const overlap of this.envOverlaps) {
+        if (this.selectedOverlaps.includes(overlap.name)) {
+          const existingVar = this.envVars.find(
+            (envVar) => envVar.name === overlap.name
+          );
+          if (existingVar) {
+            existingVar.value = overlap.newValue;
+          }
+        }
+      }
+
+      // Close dialog and reset state
+      this.envOverlapDialog = false;
+      this.envOverlaps = [];
+      this.selectedOverlaps = [];
+    },
   },
 });
 </script>

client/src/locale/de-CH.ts

@@ -86,6 +86,7 @@ const messages = {
     abort: "Abbräche",
     cancel: "Abbräche",
     save: "Speichere",
+    applyChanges: "Änderige aawände",
   },
   pipeline: {
     name: 'Pipeline',
@@ -222,6 +223,12 @@ const messages = {
       healthCheckStartupSeconds: 'Startup Sekunde',
       healthCheckTimeoutSeconds: 'Timeout Sekunde',
       healthCheckIntervalSeconds: 'Intervall Sekunde',
+      noNewEnvVarsFound: 'Kei neui Umgäbigsvariable id hochladeni Datei gfunde',
+      envVarConflicts: 'Umgäbigsvariable-Konflikt',
+      envVarConflictsDescription: 'Die hochladeni .env-Datei enthalt Variable, wo scho existiere. Bitte wähl us, weli Wert du behalte möchtisch:',
+      variableName: 'Variable Name',
+      currentValue: 'Aktuälle Wert',
+      newValue: 'Neue Wert',
     },
     strategy: {
       name: 'Strategie',

client/src/locale/de.ts

@@ -9,6 +9,9 @@ const messages = {
     size: "Größe",
     create: "Erstellen",
     update: "Aktualisieren",
+    cancel: "Abbrechen",
+    save: "Speichern",
+    applyChanges: "Änderungen anwenden",
   },
   navigation: {
     pipelines: 'Pipelines',
@@ -222,6 +225,12 @@ const messages = {
       healthCheckStartupSeconds: 'Startup Sekunden',
       healthCheckTimeoutSeconds: 'Timeout Sekunden',
       healthCheckIntervalSeconds: 'Interval Sekunden',
+      noNewEnvVarsFound: 'Keine neuen Umgebungsvariablen in der hochgeladenen Datei gefunden',
+      envVarConflicts: 'Umgebungsvariablen-Konflikte',
+      envVarConflictsDescription: 'Die hochgeladene .env-Datei enthält Variablen, die bereits existieren. Bitte wählen Sie aus, welche Werte Sie behalten möchten:',
+      variableName: 'Variablenname',
+      currentValue: 'Aktueller Wert',
+      newValue: 'Neuer Wert',
     },
     strategy: {
       name: 'Strategie',

client/src/locale/en.ts

@@ -31,6 +31,7 @@ const messages = {
         abort: "Abort",
         cancel: "Cancel",
         save: "Save",
+        applyChanges: "Apply Changes",
       },
       pipeline: {
         name: 'Pipeline',
@@ -167,6 +168,12 @@ const messages = {
           healthCheckStartupSeconds: 'Startup Seconds',
           healthCheckTimeoutSeconds: 'Timeout Seconds',
           healthCheckIntervalSeconds: 'Interval Seconds',
+          noNewEnvVarsFound: 'No new environment variables found in the uploaded file',
+          envVarConflicts: 'Environment Variable Conflicts',
+          envVarConflictsDescription: 'The uploaded .env file contains variables that already exist. Please select which values you want to keep:',
+          variableName: 'Variable Name',
+          currentValue: 'Current Value',
+          newValue: 'New Value',
         },
         strategy: {
           name: 'Strategy',

client/src/locale/ja.ts

@@ -87,6 +87,7 @@ const messages = {
     abort: "中止",
     cancel: "キャンセル",
     save: "保存",
+    applyChanges: "変更を適用",
   },
   pipeline: {
     name: 'パイプライン',
@@ -223,6 +224,12 @@ const messages = {
       healthCheckStartupSeconds: '起動秒数',
       healthCheckTimeoutSeconds: 'タイムアウト秒数',
       healthCheckIntervalSeconds: 'インターバル秒数',
+      noNewEnvVarsFound: 'アップロードされたファイルに新しい環境変数が見つかりませんでした',
+      envVarConflicts: '環境変数の競合',
+      envVarConflictsDescription: 'アップロードされた.envファイルには、既に存在する変数が含まれています。保持する値を選択してください:',
+      variableName: '変数名',
+      currentValue: '現在の値',
+      newValue: '新しい値',
     },
     strategy: {
       name: '戦略',

client/src/locale/pt.ts

@@ -30,6 +30,7 @@ const messages = {
     abort: 'Abortar',
     cancel: 'Cancelar',
     save: 'Salvar',
+    applyChanges: 'Aplicar Alterações',
   },
   pipeline: {
     name: 'Pipeline',
@@ -165,6 +166,12 @@ const messages = {
       healthCheckStartupSeconds: 'Segundos de Inicialização',
       healthCheckTimeoutSeconds: 'Segundos de Timeout',
       healthCheckIntervalSeconds: 'Segundos de Intervalo',
+      noNewEnvVarsFound: 'Nenhuma nova variável de ambiente encontrada no arquivo enviado',
+      envVarConflicts: 'Conflitos de Variáveis de Ambiente',
+      envVarConflictsDescription: 'O arquivo .env enviado contém variáveis que já existem. Por favor, selecione quais valores deseja manter:',
+      variableName: 'Nome da Variável',
+      currentValue: 'Valor Atual',
+      newValue: 'Novo Valor',
     },
     strategy: {
       name: 'Estratégia',

client/src/locale/zhHans.ts

@@ -86,6 +86,7 @@ const messages = {
     abort: "中止",
     cancel: "取消",
     save: "保存",
+    applyChanges: "应用更改",
   },
   pipeline: {
     name: '流水线',
@@ -222,6 +223,12 @@ const messages = {
       healthCheckStartupSeconds: '启动秒数',
       healthCheckTimeoutSeconds: '超时时间（秒）',
       healthCheckIntervalSeconds: '间隔时间（秒）',
+      noNewEnvVarsFound: '上传的文件中未找到新的环境变量',
+      envVarConflicts: '环境变量冲突',
+      envVarConflictsDescription: '上传的.env文件包含已存在的变量。请选择要保留的值：',
+      variableName: '变量名',
+      currentValue: '当前值',
+      newValue: '新值',
     },
     strategy: {
       name: '策略',