✨ Enhance modal of convert graphics into components

frontend/resources/styles/main/partials/modal.scss

@@ -1849,6 +1849,41 @@
 }
 
 .remove-graphics-dialog {
+  .modal-content {
+    padding-top: 16px;
+  }
+
+  h2 {
+    font-size: $fs18;
+  }
+
+  p {
+    font-size: $fs12;
+    color: $color-gray-30;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &.progress-message {
+      color: $color-info;
+    }
+
+    &.error-message {
+      color: $color-black;
+
+      & svg {
+        width: 16px;
+        height: 16px;
+        fill: $color-danger;
+        margin-right: 0.5rem;
+        position: relative;
+        bottom: -4px;
+        transform: rotate(45deg);
+      }
+    }
+  }
+
   .close {
     border: 1px solid $color-gray-30;
     background: $color-canvas;
@@ -1861,6 +1896,32 @@
       background: $color-gray-20;
     }
   }
+
+  .button-primary {
+    background: $color-primary;
+    border: 1px solid $color-primary;
+    border-radius: 3px;
+    color: $color-black;
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+
+    &:hover {
+      background: $color-primary-dark;
+    }
+  }
+
+  .button-secondary {
+    border: 1px solid $color-gray-30;
+    background: $color-white;
+    border-radius: 3px;
+    padding: 0.5rem 1rem;
+    cursor: pointer;
+    margin-right: 8px;
+
+    &:hover {
+      background: $color-gray-20;
+    }
+  }
 }
 
 //- LOGIN

frontend/src/app/main/data/workspace.cljs

@@ -15,6 +15,7 @@
    [app.common.geom.proportions :as gpr]
    [app.common.geom.shapes :as gsh]
    [app.common.geom.shapes.rect :as gpsr]
+   [app.common.logging :as log]
    [app.common.pages.changes-builder :as pcb]
    [app.common.pages.helpers :as cph]
    [app.common.spec :as us]
@@ -123,8 +124,8 @@
 
     ptk/WatchEvent
     (watch [_ state _]
-      (let [file           (:workspace-file state)
+      (let [file           (:workspace-data state)
-            has-graphics?  (-> file :data :media seq)
+            has-graphics?  (-> file :media seq)
             components-v2  (features/active-feature? state :components-v2)]
         (rx/merge
          (rx/of (fbc/fix-bool-contents))
@@ -1674,7 +1675,9 @@
     ptk/UpdateEvent
     (update [_ state]
       (assoc state :remove-graphics {:total total
-                                     :current nil}))))
+                                     :current nil
+                                     :error false
+                                     :completed false}))))
 
 (defn- update-remove-graphics
   [current]
@@ -1683,12 +1686,31 @@
     (update [_ state]
       (assoc-in state [:remove-graphics :current] current))))
 
+(defn- error-in-remove-graphics
+  []
+  (ptk/reify ::error-in-remove-graphics
+    ptk/UpdateEvent
+    (update [_ state]
+      (assoc-in state [:remove-graphics :error] true))))
+
+(defn clear-remove-graphics
+  []
+  (ptk/reify ::clear-remove-graphics
+    ptk/UpdateEvent
+    (update [_ state]
+      (dissoc state :remove-graphics))))
+
 (defn- complete-remove-graphics
   []
   (ptk/reify ::complete-remove-graphics
     ptk/UpdateEvent
     (update [_ state]
-      (dissoc state :remove-graphics))))
+      (assoc-in state [:remove-graphics :completed] true))
+
+    ptk/WatchEvent
+    (watch [_ state _]
+      (when-not (get-in state [:remove-graphics :error])
+        (rx/of (modal/hide))))))
 
 (defn- remove-graphic
   [it file-data page [index [media-obj pos]]]
@@ -1727,9 +1749,14 @@
                       (rx/mapcat (partial dwm/create-shapes-svg (:id file-data) (:objects page) pos)))
                  (dwm/create-shapes-img pos media-obj))]
 
-      (rx/concat
+    (->> (rx/concat
-        (rx/of (update-remove-graphics index))
+           (rx/of (update-remove-graphics index))
-        (rx/map process-shapes shapes))))
+           (rx/map process-shapes shapes))
+         (rx/catch #(do
+                      (log/error :msg (str "Error removing " (:name media-obj))
+                                 :hint (ex-message %)
+                                 :error %)
+                      (rx/of (error-in-remove-graphics)))))))
 
 (defn- remove-graphics
   [file-id file-name]
@@ -1766,8 +1793,7 @@
                                            (pcb/add-page (:id page) page)))))
           (rx/mapcat (partial remove-graphic it file-data' page)
                      (rx/from (d/enumerate (d/zip media shape-grid))))
-          (rx/of (modal/hide)
+          (rx/of (complete-remove-graphics)))))))
-                 (complete-remove-graphics)))))))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Exports

frontend/src/app/main/ui/workspace.cljs

@@ -174,14 +174,35 @@
    ::mf/register-as :remove-graphics-dialog}
   [{:keys [] :as ctx}]
   (let [remove-state (mf/deref refs/remove-graphics)
-        close #(modal/hide!)]
+        close #(modal/hide!)
+        reload-file #(dom/reload-current-window)]
+    (mf/use-effect
+      (fn []
+        #(st/emit! (dw/clear-remove-graphics))))
     [:div.modal-overlay
      [:div.modal-container.remove-graphics-dialog
       [:div.modal-header
        [:div.modal-header-title
-        [:h2 (str "Updating " (:file-name ctx) "...")]]
+        [:h2 (tr "workspace.remove-graphics.title" (:file-name ctx))]]
-       [:div.modal-close-button
+       (when (and (:completed remove-state) (:error remove-state))
-        {:on-click close} i/close]]
+         [:div.modal-close-button
-      [:div.modal-content
+          {:on-click close} i/close])]
-       [:p (str "Converting " (:current remove-state) " / " (:total remove-state))]]]]))
+      (if-not (and (:completed remove-state) (:error remove-state))
-
+        [:div.modal-content
+         [:p (tr "workspace.remove-graphics.text1")]
+         [:p (tr "workspace.remove-graphics.text2")]
+         [:p.progress-message (tr "workspace.remove-graphics.progress"
+                                  (:current remove-state)
+                                  (:total remove-state))]]
+        [:*
+         [:div.modal-content
+          [:p.error-message [:span i/close] (tr "workspace.remove-graphics.error-msg")]
+          [:p (tr "workspace.remove-graphics.error-hint")]]
+         [:div.modal-footer
+          [:div.action-buttons
+           [:input.button-secondary {:type "button"
+                                     :value (tr "labels.close")
+                                     :on-click close}]
+           [:input.button-primary {:type "button"
+                                   :value (tr "labels.reload-file")
+                                   :on-click reload-file}]]]])]]))

frontend/src/app/util/dom.cljs

@@ -596,6 +596,10 @@
   []
   (.back (.-history js/window)))
 
+(defn reload-current-window
+  []
+  (.reload (.-location js/window)))
+
 (defn animate!
   ([item keyframes duration] (animate! item keyframes duration nil))
   ([item keyframes duration onfinish]

frontend/translations/en.po

@@ -1351,6 +1351,10 @@ msgstr "Projects"
 msgid "labels.release-notes"
 msgstr "Release notes"
 
+#: src/app/main/ui/workspace.cljs
+msgid "labels.reload-file"
+msgstr "Reload file"
+
 #: src/app/main/ui/workspace/libraries.cljs, src/app/main/ui/dashboard/team.cljs
 msgid "labels.remove"
 msgstr "Remove"
@@ -3915,6 +3919,32 @@ msgstr "Separate nodes (%s)"
 msgid "workspace.path.actions.snap-nodes"
 msgstr "Snap nodes (%s)"
 
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.title"
+msgstr "Updating %s..."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.text1"
+msgstr "Library Graphics are Components from now on, which will make them much more powerful."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.text2"
+msgstr "This update is a one time action."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.error-msg"
+msgstr "Some graphics could not be updated."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.error-hint"
+msgstr ""
+"To try it again, you can reload this file. If the problem persists, we suggest you to take"
+" a look at the list and consider to delete broken graphics."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.progress"
+msgstr "Converting %s/%s"
+
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.back"
 msgstr "Send to back"

frontend/translations/es.po

@@ -1518,6 +1518,10 @@ msgstr "Reciente"
 msgid "labels.release-notes"
 msgstr "Notas de versión"
 
+#: src/app/main/ui/workspace.cljs
+msgid "labels.reload-file"
+msgstr "Recargar archivo"
+
 #: src/app/main/ui/workspace/libraries.cljs,
 #: src/app/main/ui/dashboard/team.cljs
 msgid "labels.remove"
@@ -4341,6 +4345,35 @@ msgstr "Separar nodos (%s)"
 msgid "workspace.path.actions.snap-nodes"
 msgstr "Alinear nodos (%s)"
 
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.title"
+msgstr "Actualizando %s..."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.text1"
+msgstr ""
+"Desde ahora los gráficos de la librería serán componentes, lo cual"
+" los hará mucho más potentes."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.text2"
+msgstr "Esta actualización sólo ocurrirá una vez."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.error-msg"
+msgstr "Algunos gráficos no han podido ser actualizados."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.error-hint"
+msgstr ""
+"Para intentarlo de nuevo, puedes recargar este archivo. Si el problema"
+" persiste, te sugerimos que compruebes la lista y consideres borrar los"
+" gráficos que estén mal."
+
+#: src/app/main/ui/workspace.cljs
+msgid "workspace.remove-graphics.progress"
+msgstr "Convirtiendo %s/%s"
+
 #: src/app/main/ui/workspace/context_menu.cljs
 msgid "workspace.shape.menu.back"
 msgstr "Enviar al fondo"