✨ Add Update component in bulk option

CHANGES.md

@@ -6,6 +6,7 @@
 
 - Guides [Taiga #290](https://tree.taiga.io/project/penpot/us/290?milestone=307334)
 - Improve file menu by adding semantically groups [Github #1203](https://github.com/penpot/penpot/issues/1203).
+- Add update components in bulk option in context menu [Taiga #1975](https://tree.taiga.io/project/penpot/us/1975).
 - Create e2e tests for drawing basic fors [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608).
 - Create firsts e2e test [Taiga #2608](https://tree.taiga.io/project/penpot/task/2608).
 

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

@@ -105,6 +105,26 @@
     }
   }
 
+  .modal-item-element {
+    display: flex;
+    padding-bottom: 3px;
+    margin-left: 10px;
+    font-size: $fs14;
+    color: $color-info;
+
+    .modal-component-icon {
+      margin-right: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      svg {
+        width: 16px;
+        height: 16px;
+        fill: $color-info;
+      }
+    }
+  }
+
   .modal-content {
     display: flex;
     flex-direction: column;

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

@@ -649,6 +649,16 @@
            (sync-file file-id file-id))
          (dwu/commit-undo-transaction))))))
 
+(defn update-component-in-bulk
+  [shapes file-id]
+  (ptk/reify ::update-component-in-bulk
+    ptk/WatchEvent
+    (watch [_ _ _]
+      (rx/concat
+       (rx/of (dwu/start-undo-transaction))
+       (rx/map #(update-component-sync (:id %) file-id) (rx/from shapes))
+       (rx/of (dwu/commit-undo-transaction))))))
+
 (declare sync-file-2nd-stage)
 
 (defn sync-file

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

@@ -24,6 +24,7 @@
            on-accept
            on-cancel
            hint
+           items
            cancel-label
            accept-label
            accept-style] :as props}]
@@ -70,9 +71,18 @@
         {:on-click cancel-fn} i/close]]
 
       [:div.modal-content
-       [:h3 message]
+       (when (and (string? message) (not= message ""))
+         [:h3 message])
        (when (string? hint)
-         [:p hint])]
+         [:p hint])
+       (when (> (count items) 0)
+         [:*
+          [:p (tr "ds.component-subtitle")]
+          [:ul
+           (for [item items]
+             [:li.modal-item-element
+              [:span.modal-component-icon i/component]
+              [:span (:name item)]])]])]
 
       [:div.modal-footer
        [:div.action-buttons

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

@@ -303,6 +303,7 @@
         shape-id (->> shapes first :id)
         component-id (->> shapes first :component-id)
         component-file (-> shapes first :component-file)
+        component-shapes (filter #(contains? % :component-id) shapes)
 
         current-file-id (mf/use-ctx ctx/current-file-id)
         local-component? (= component-file current-file-id)
@@ -314,6 +315,7 @@
         do-show-component (st/emitf (dw/go-to-component component-id))
         do-navigate-component-file (st/emitf (dwl/nav-to-component-file component-file))
         do-update-component (st/emitf (dwl/update-component-sync shape-id component-file))
+        do-update-component-in-bulk (st/emitf (dwl/update-component-in-bulk component-shapes component-file))
 
         do-update-remote-component
         (st/emitf (modal/show
@@ -324,7 +326,18 @@
                     :cancel-label (tr "modals.update-remote-component.cancel")
                     :accept-label (tr "modals.update-remote-component.accept")
                     :accept-style :primary
-                    :on-accept do-update-component}))]
+                    :on-accept do-update-component}))
+
+        do-update-in-bulk (st/emitf (modal/show
+                                     {:type :confirm
+                                      :message ""
+                                      :title (tr "modals.update-remote-component-in-bulk.message")
+                                      :hint (tr "modals.update-remote-component-in-bulk.hint")
+                                      :items component-shapes
+                                      :cancel-label (tr "modals.update-remote-component.cancel")
+                                      :accept-label (tr "modals.update-remote-component.accept")
+                                      :accept-style :primary
+                                      :on-accept do-update-component-in-bulk}))]
     [:*
      (when (and (not has-frame?) (not is-component?))
        [:*
@@ -335,7 +348,10 @@
         (when has-component?
           [:& menu-entry {:title (tr "workspace.shape.menu.detach-instances-in-bulk")
                           :shortcut (sc/get-tooltip :detach-component)
-                          :on-click do-detach-component-in-bulk}])])
+                          :on-click do-detach-component-in-bulk}]
+          (when (not single?)
+            [:& menu-entry {:title (tr "workspace.shape.menu.update-components-in-bulk")
+                            :on-click do-update-in-bulk}]))])
 
      (when is-component?
        ;; WARNING: this menu is the same as the context menu at the sidebar.

frontend/translations/en.po

@@ -588,6 +588,10 @@ msgstr "Ok"
 msgid "ds.confirm-title"
 msgstr "Are you sure?"
 
+#: src/app/main/ui/confirm.cljs
+msgid "ds.component-subtitle"
+msgstr "Components to update:"
+
 #: src/app/main/ui/dashboard/grid.cljs
 msgid "ds.updated-at"
 msgstr "Updated: %s"
@@ -1550,7 +1554,7 @@ msgstr "Remove “%s” as Shared Library"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component.accept"
-msgstr "Update component"
+msgstr "Update"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component.cancel"
@@ -1562,10 +1566,20 @@ msgstr ""
 "You are about to update a component in a shared library. This may affect "
 "other files that use it."
 
+#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
+msgid "modals.update-remote-component-in-bulk.hint"
+msgstr ""
+"You are about to update components in a shared library. This may affect "
+"other files that use it."
+
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component.message"
 msgstr "Update a component in a shared library"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
+msgid "modals.update-remote-component-in-bulk.message"
+msgstr "Update components in a shared library"
+
 #: src/app/main/ui/dashboard/team.cljs
 msgid "notifications.invitation-email-sent"
 msgstr "Invitation sent successfully"
@@ -3115,6 +3129,10 @@ msgstr "Detach instance"
 msgid "workspace.shape.menu.detach-instances-in-bulk"
 msgstr "Detach instances"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs, src/app/main/ui/workspace/context_menu.cljs
+msgid "workspace.shape.menu.update-components-in-bulk"
+msgstr "Update main components"
+
 msgid "workspace.shape.menu.difference"
 msgstr "Difference"
 

frontend/translations/es.po

@@ -590,6 +590,10 @@ msgstr "Cancelar"
 msgid "ds.confirm-ok"
 msgstr "Ok"
 
+#: src/app/main/ui/confirm.cljs
+msgid "ds.component-subtitle"
+msgstr "Componentes a actualizar:"
+
 #: src/app/main/ui/confirm.cljs, src/app/main/ui/confirm.cljs
 msgid "ds.confirm-title"
 msgstr "¿Seguro?"
@@ -1552,7 +1556,7 @@ msgstr "Añadir “%s” como Biblioteca Compartida"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component.accept"
-msgstr "Actualizar componente"
+msgstr "Actualizar"
 
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component.cancel"
@@ -1564,10 +1568,20 @@ msgstr ""
 "Vas a actualizar un componente en una librería compartida. Esto puede "
 "afectar a otros archivos que la usen."
 
+#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
+msgid "modals.update-remote-component-in-bulk.hint"
+msgstr ""
+"Vas a actualizar componentes en una librería compartida. Esto puede "
+"afectar a otros archivos que la usen."
+
 #: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
 msgid "modals.update-remote-component.message"
 msgstr "Actualizar un componente en librería"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs
+msgid "modals.update-remote-component-in-bulk.message"
+msgstr "Actualizar componentes en librería"
+
 #: src/app/main/ui/dashboard/team.cljs
 msgid "notifications.invitation-email-sent"
 msgstr "Invitación enviada con éxito"
@@ -3128,6 +3142,10 @@ msgstr "Desacoplar instancia"
 msgid "workspace.shape.menu.detach-instances-in-bulk"
 msgstr "Desacoplar instancias"
 
+#: src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/sidebar/options/menus/component.cljs, src/app/main/ui/workspace/context_menu.cljs, src/app/main/ui/workspace/context_menu.cljs
+msgid "workspace.shape.menu.update-components-in-bulk"
+msgstr "Actualizar componentes"
+
 msgid "workspace.shape.menu.difference"
 msgstr "Diferencia"