wowowowowo

resources/js/pages/environment-variables/Create.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import InputError from "@/components/InputError.vue";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -6,20 +6,15 @@ import { Label } from "@/components/ui/label";
 import AppLayout from "@/layouts/AppLayout.vue";
 import { Head, useForm } from "@inertiajs/vue3";
 
-defineProps({
-    application: {
-        type: Object,
-        required: true,
-    },
-    environment: {
-        type: Object,
-        required: true,
-    },
-});
+defineProps<{
+    application: Record<string, any>;
+    environment: Record<string, any>;
+}>();
 
 const form = useForm({
     key: "",
     value: "",
+    overridable: true,
 });
 </script>
 
@@ -74,6 +69,22 @@ const form = useForm({
                 <InputError :message="form.errors.value" />
             </div>
 
+            <label class="flex items-center gap-2 text-sm">
+                <input v-model="form.overridable" type="checkbox" class="size-4" />
+                <span>
+                    Overridable
+                    <span class="block text-muted-foreground">
+                        Allows managed attachments to replace this variable if they need to.
+                    </span>
+                </span>
+            </label>
+
+            <div class="rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground">
+                Values are stored as environment variables and displayed masked in environment
+                overviews. Use locked variables for values that should not be replaced by generated
+                attachment output.
+            </div>
+
             <div class="flex items-center justify-end">
                 <Button type="submit" :disabled="form.processing">Save</Button>
             </div>