Harden Compose editor interactions

Author: magdielcardoso

web/src/components/applications/ComposeCodeEditor.vue

@@ -23,8 +23,10 @@ const props = withDefaults(
 const emit = defineEmits<{
   "update:modelValue": [value: string];
   validate: [];
+  error: [message: string];
 }>();
 const editorHost = ref<HTMLElement | null>(null);
+const fileInput = ref<HTMLInputElement | null>(null);
 let view: EditorView | null = null;
 
 const example = `services:
@@ -93,12 +95,32 @@ function clear() {
 function handleDrop(event: DragEvent) {
   event.preventDefault();
   const file = event.dataTransfer?.files?.[0];
-  if (!file || !/\.ya?ml$/i.test(file.name)) return;
+  if (!file) return;
+  readFile(file);
+}
+function readFile(file: File) {
+  if (!/\.ya?ml$/i.test(file.name)) {
+    emit("error", "Selecione um arquivo .yml ou .yaml.");
+    return;
+  }
+  if (file.size > 1024 * 1024) {
+    emit("error", "O arquivo Compose deve ter no máximo 1 MB.");
+    return;
+  }
   file.text().then((value) => {
     setValue(value);
     emit("update:modelValue", value);
   });
 }
+function chooseFile() {
+  fileInput.value?.click();
+}
+function handleFileInput(event: Event) {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (file) readFile(file);
+  input.value = "";
+}
 onMounted(() => {
   if (editorHost.value) {
     view = new EditorView({
@@ -115,11 +137,21 @@ watch(() => props.modelValue, setValue);
   <div class="compose-editor-shell">
     <div class="compose-toolbar">
       <span class="compose-file">compose.yml</span>
+      <button type="button" class="ghost" @click="chooseFile">
+        Carregar arquivo
+      </button>
       <button type="button" class="ghost" @click="loadExample">
         Inserir exemplo
       </button>
       <button type="button" class="ghost" @click="clear">Limpar</button>
     </div>
+    <input
+      ref="fileInput"
+      class="visually-hidden"
+      type="file"
+      accept=".yml,.yaml,text/yaml"
+      @change="handleFileInput"
+    />
     <div class="compose-dropzone" @dragover.prevent @drop="handleDrop">
       <div
         ref="editorHost"

web/src/style.css

@@ -345,6 +345,17 @@ h2 {
   color: #747c8c;
   font-size: 11px;
 }
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .compose-config-grid {
   display: grid;
   grid-template-columns: minmax(0, 1.8fr) minmax(190px, 1fr);

web/src/views/ApplicationDetail.test.ts

@@ -38,7 +38,12 @@ describe("ApplicationDetail", () => {
     });
     await router.push("/projects/2/applications/1?tab=source");
     await router.isReady();
-    const wrapper = mount(ApplicationDetail, { global: { plugins: [router] } });
+    const wrapper = mount(ApplicationDetail, {
+      global: {
+        plugins: [router],
+        stubs: { ComposeCodeEditor: { template: "<div />" } },
+      },
+    });
     await new Promise((resolve) => setTimeout(resolve, 0));
     expect(wrapper.text()).toContain("Frontend");
     expect(wrapper.text()).toContain("Docker Compose");

web/src/views/ApplicationDetail.vue

@@ -408,7 +408,11 @@ onMounted(load);
       </div>
       <div v-if="sourceType === 'compose'">
         <label>Docker Compose</label>
-        <ComposeCodeEditor v-model="composeYaml" @validate="validateSource" />
+        <ComposeCodeEditor
+          v-model="composeYaml"
+          @validate="validateSource"
+          @error="toast.error"
+        />
       </div>
       <div v-else-if="sourceType === 'image'" class="form-grid">
         <label

web/src/views/ProjectDetail.vue

@@ -522,7 +522,10 @@ onMounted(load);
         <div v-if="newApp.source_type === 'compose'">
           <h3>Docker Compose</h3>
           <div class="compose-config-grid">
-            <ComposeCodeEditor v-model="newSource.compose_yaml" />
+            <ComposeCodeEditor
+              v-model="newSource.compose_yaml"
+              @error="toast.error"
+            />
             <aside class="source-summary">
               <h3>Resumo detectado</h3>
               <p v-if="!newSource.compose_yaml" class="muted">