7.1 Fix UI glitches

app/javascript/alchemy_admin/components/element_editor.js

@@ -121,6 +121,7 @@ export class ElementEditor extends HTMLElement {
     this.setClean()
     // Reset errors that might be visible from last save attempt
     this.errorsDisplay.innerHTML = ""
+    this.elementErrors.classList.add("hidden")
     this.body
       .querySelectorAll(".ingredient-editor")
       .forEach((el) => el.classList.remove("validation_failed"))

app/javascript/alchemy_admin/components/uploader.js

@@ -112,9 +112,6 @@ export class Uploader extends AlchemyHTMLElement {
     }
     this.uploadProgress = new Progress(fileUploads)
     this.uploadProgress.onComplete = (status) => {
-      if (status === "successful" || status === "canceled") {
-        this.uploadProgress.visible = false
-      }
       this.dispatchCustomEvent(`upload.${status}`)
     }
 

app/javascript/alchemy_admin/components/uploader/progress.js

@@ -27,7 +27,6 @@ export class Progress extends AlchemyHTMLElement {
     this.actionButton.addEventListener("click", () => {
       if (this.finished) {
         this.onComplete(this.status)
-        this.visible = false
       } else {
         this.cancel()
       }
@@ -126,6 +125,7 @@ export class Progress extends AlchemyHTMLElement {
    */
   _updateView() {
     const status = this.status
+    this.className = status
 
     // update progress bar
     this.progressElement.value = this.totalProgress
@@ -143,10 +143,9 @@ export class Progress extends AlchemyHTMLElement {
     if (this.finished) {
       this._setupCloseButton()
       this.onComplete(status)
+    } else {
+      this.visible = true
     }
-
-    this.className = status
-    this.visible = true
   }
 
   /**

app/views/alchemy/admin/pages/_page_status.html.erb

@@ -1,8 +1,8 @@
 <span class="page_status">
   <% if page.public? %>
-    <%= render_icon(:cloud, size: "1x", class: "disabled") %>
+    <%= render_icon(:cloud, size: "1x") %>
   <% else %>
-    <%= render_icon("cloud-off", size: "1x") %>
+    <%= render_icon("cloud-off", size: "1x", class: "disabled") %>
   <% end %>
 </span>
 <span class="page_status">

app/views/alchemy/admin/uploader/_button.html.erb

@@ -17,9 +17,10 @@
 </alchemy-uploader>
 
 <script type='text/javascript'>
-  document.querySelector("alchemy-uploader").addEventListener("Alchemy.upload.successful", () => {
+  document.querySelector("alchemy-uploader").addEventListener("Alchemy.upload.successful", (evt) => {
     setTimeout(() => {
       var url = '<%= redirect_url.html_safe %>';
+      evt.target.uploadProgress.visible = false;
       <% if local_assigns[:in_dialog] %>
       $.get(url, null, null, 'script');
       <% else %>

spec/javascript/alchemy_admin/components/element_editor.spec.js

@@ -426,6 +426,10 @@ describe("alchemy-element-editor", () => {
         expect(editor.errorsDisplay.innerHTML).toBe("")
       })
 
+      it("hides element errors", () => {
+        expect(editor.elementErrors.classList).toContain("hidden")
+      })
+
       it("removes ingredient invalid state", () => {
         expect(
           editor.querySelector(`[data-ingredient-id="666"]`).classList

spec/javascript/alchemy_admin/components/uploader.spec.js

@@ -238,10 +238,6 @@ describe("alchemy-uploader", () => {
           "upload.successful"
         )
       })
-
-      it("should hide the progress component", () => {
-        expect(component.uploadProgress.visible).toBeFalsy()
-      })
     })
 
     describe("canceled", () => {
@@ -252,10 +248,6 @@ describe("alchemy-uploader", () => {
       it("should fire upload - event", () => {
         expect(component.dispatchCustomEvent).toBeCalledWith("upload.canceled")
       })
-
-      it("should hide the progress component", () => {
-        expect(component.uploadProgress.visible).toBeFalsy()
-      })
     })
 
     describe("failed", () => {

spec/javascript/alchemy_admin/components/uploader/progress.spec.js

@@ -160,7 +160,7 @@ describe("alchemy-upload-progress", () => {
         firstFileUpload.request.onload()
         secondFileUpload.request.onload()
         expect(component.status).toEqual("successful")
-        expect(component.className).toEqual("successful visible")
+        expect(component.className).toEqual("successful")
       })
 
       it("should set overall progress value", () => {
@@ -255,6 +255,9 @@ describe("alchemy-upload-progress", () => {
         firstFileUpload.status = "successful"
         secondFileUpload.status = "successful"
         firstFileUpload.dispatchCustomEvent("FileUpload.Change")
+        component.onComplete = () => {
+          component.visible = false
+        }
       })
 
       it("shows a close button", () => {