✨ Add detach components in bulk option

CHANGES.md

@@ -5,7 +5,8 @@
 ### :boom: Breaking changes
 ### :sparkles: New features
 
-- Add penpot look and feel to multiuser cursors [Taiga #1387](https://tree.taiga.io/project/penpot/us/1387)
+- Add detach in bulk option to context menu [Taiga #2210](https://tree.taiga.io/project/penpot/us/2210).
+- Add penpot look and feel to multiuser cursors [Taiga #1387](https://tree.taiga.io/project/penpot/us/1387).
 - Add actions to go to main component context menu option [Taiga #2053](https://tree.taiga.io/project/penpot/us/2053).
 - Add contrast between component select color and shape select color [Taiga #2121](https://tree.taiga.io/project/penpot/issue/2121).
 - Add animations in interactions [Taiga #2244](https://tree.taiga.io/project/penpot/us/2244).

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

@@ -292,6 +292,7 @@
   (let [single?   (= (count shapes) 1)
 
         has-frame? (->> shapes (d/seek #(= :frame (:type %))))
+        has-component? (some true? (map #(contains? % :component-id) shapes))
         is-component? (and single? (-> shapes first :component-id some?))
 
         shape-id (->> shapes first :id)
@@ -303,6 +304,7 @@
 
         do-add-component (st/emitf (dwl/add-component))
         do-detach-component (st/emitf (dwl/detach-component shape-id))
+        do-detach-component-in-bulk (st/emitf dwl/detach-selected-components)
         do-reset-component (st/emitf (dwl/reset-component shape-id))
         do-show-component (st/emitf (dw/go-to-component component-id))
         do-navigate-component-file (st/emitf (dwl/nav-to-component-file component-file))
@@ -324,7 +326,11 @@
         [:& menu-separator]
         [:& menu-entry {:title (tr "workspace.shape.menu.create-component")
                         :shortcut (sc/get-tooltip :create-component)
-                        :on-click do-add-component}]])
+                        :on-click do-add-component}]
+        (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}])])
 
      (when is-component?
        ;; WARNING: this menu is the same as the context menu at the sidebar.
@@ -352,7 +358,6 @@
                            :on-click do-navigate-component-file}]
            [:& menu-entry {:title (tr "workspace.shape.menu.update-main")
                            :on-click do-update-remote-component}]])])
-
      [:& menu-separator]]))
 
 (mf/defc context-menu-delete

frontend/translations/en.po

@@ -3012,6 +3012,10 @@ msgstr "Delete flow start"
 msgid "workspace.shape.menu.detach-instance"
 msgstr "Detach instance"
 
+#: 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.detach-instances-in-bulk"
+msgstr "Detach instances"
+
 msgid "workspace.shape.menu.difference"
 msgstr "Difference"
 

frontend/translations/es.po

@@ -3011,6 +3011,10 @@ msgstr "Eliminar inicio de flujo"
 msgid "workspace.shape.menu.detach-instance"
 msgstr "Desacoplar instancia"
 
+#: 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.detach-instances-in-bulk"
+msgstr "Desacoplar instancias"
+
 msgid "workspace.shape.menu.difference"
 msgstr "Diferencia"