Add alert to manually download YAML file instead

public/index.html

@@ -21,6 +21,24 @@
         your browser.
       </div>
     </noscript>
+    <div
+      id="download-alert"
+      class="alert alert-warning alert-dismissible fade show d-none"
+      role="alert"
+      tabindex="-1">
+      <strong>Having trouble?</strong>
+      If the generated workflow does not automatically appear in your workflow
+      editor, manually download
+      <a href="#" id="download-alert-link">matlab.yml</a>
+      and save it to the
+      <code>.github/workflows</code>
+      folder of your repository.
+      <button
+        type="button"
+        class="btn-close"
+        data-bs-dismiss="alert"
+        aria-label="Close"></button>
+    </div>
     <main class="container py-5">
       <div class="text-center mt-4 mb-4">
         <img

public/scripts/main.js

@@ -41,11 +41,36 @@ function handleFormSubmit(e) {
   url += `/${repoInfo.owner}/${repoInfo.repo}/new/main?filename=${filePath}&value=${encoded}`;
 
   window.navigateTo(url);
+
+  showDownloadAlert();
+}
+
+function showDownloadAlert() {
+  const alert = document.getElementById("download-alert");
+  alert.classList.remove("d-none");
+  alert.focus();
+}
+
+function handleDownloadClick(e) {
+  e.preventDefault();
+
+  const workflow = generateWorkflowWithFormInputs();
+
+  const blob = new Blob([workflow], { type: "text/yaml" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = "matlab.yml";
+  a.click();
+  URL.revokeObjectURL(url);
 }
 
 document
   .getElementById("generate-form")
   .addEventListener("submit", handleFormSubmit);
+document
+  .getElementById("download-alert-link")
+  .addEventListener("click", handleDownloadClick);
 
 document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((el) => {
   new bootstrap.Tooltip(el);

public/style.css

@@ -118,3 +118,12 @@ p.lead.text-muted {
 .bi-question-circle {
   color: #0076a8;
 }
+
+#download-alert {
+  text-align: center;
+  position: fixed;
+  top: 5px;
+  left: 2%;
+  width: 96%;
+  z-index: 2000;
+}

tests/main.test.js

@@ -17,7 +17,8 @@ beforeEach(async () => {
       <input type="checkbox" id="build-across-platforms" />
       <button type="submit" id="generate-button"></button>
     </form>
-    <a id="downloadButton"></a>
+    <a id="download-alert-link"></a>
+    <div id="download-alert" class="d-none"></div>
   `;
 
   await import("../public/scripts/main.js");
@@ -98,3 +99,29 @@ test("advanced options are passed to generateWorkflow", async () => {
     jsyaml: window.jsyaml,
   });
 });
+
+test("download link triggers file download", () => {
+  const repoInput = document.getElementById("repo");
+  repoInput.value = "owner/repo";
+
+  window.jsyaml = { dump: () => "yaml-content" };
+
+  const mockCreateObjectURL = jest.fn(() => "blob:url");
+  const mockRevokeObjectURL = jest.fn();
+  global.URL.createObjectURL = mockCreateObjectURL;
+  global.URL.revokeObjectURL = mockRevokeObjectURL;
+
+  const a = document.createElement("a");
+  document.body.appendChild(a);
+  jest.spyOn(document, "createElement").mockImplementation((tag) => {
+    if (tag === "a") return a;
+    return document.createElement(tag);
+  });
+  const clickSpy = jest.spyOn(a, "click");
+
+  document.getElementById("download-alert-link").click();
+
+  expect(mockCreateObjectURL).toHaveBeenCalled();
+  expect(clickSpy).toHaveBeenCalled();
+  expect(mockRevokeObjectURL).toHaveBeenCalled();
+});