Repository: penpot/penpot
File: frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs (ClojureScript)

Code before:

        select-malformed-comps
        (mf/use-fn
         (mf/deps current-file-id shape malformed-comps)
         (fn []
           (let [ids (map :id malformed-comps)]
             (if (= current-file-id (:component-file shape))
               (st/emit! (dwl/go-to-local-component :id (first ids) :additional-ids (rest ids)))
               (st/emit! (dwl/go-to-component-file (:component-file shape) (first malformed-comps) false))))))

        ;; Used to force a remount after an error
        key*     (mf/use-state (uuid/next))
        key      (deref key*)
        mixed-label (tr "settings.multiple")

        switch-component
        (mf/use-fn
         (mf/deps shapes)
         (fn [pos val]
           (if (= val mixed-label)
             (reset! key* (uuid/next))
             (let [error-msg (if (> (count shapes) 1)
                               (tr "workspace.component.switch.loop-error-multi")
                               (tr "workspace.component.swap.loop-error"))
                   mdata     {:on-error #(do
                                           (st/emit! (ntf/error error-msg))
                                           (reset! key* (uuid/next)))}
                   params    {:shapes shapes :pos pos :val val}]
               (st/emit! (dwv/variants-switch (with-meta params mdata)))))))]

    [:*
     [:div {:class (stl/css :variant-property-list)}
      (for [[pos prop] (map vector (range) props-first)]
        (let [mixed-value? (not-every? #(= (:value prop) (:value (nth % pos))) properties)
              options (cond-> (get-options (:name prop))
                        mixed-value?
                        (conj {:id mixed-label, :label mixed-label :dimmed true}))]
          [:div {:key (str (:id shape) pos mixed-value?)
                 :class (stl/css :variant-property-container)}

           [:div {:class (stl/css :variant-property-name-wrapper)
                  :title (:name prop)}
            [:div {:class (stl/css :variant-property-name)}
             (:name prop)]]

           [:div {:class (stl/css :variant-property-value-wrapper)}
            [:> select* {:default-selected (if mixed-value? mixed-label (:value prop))
                         :options options
                         :empty-to-end true
                         :on-change (partial switch-component pos)
                         :key (str (:value prop) "-" key)}]]]))]

Review comment (suggestion):
here, instead of st/emit! just return `(rx/of (ntf/error ...))`

Code after:

        select-malformed-comps
        (mf/use-fn
         (mf/deps current-file-id shape malformed-comps)
         (fn []
           (let [ids (map :id malformed-comps)]
             (if (= current-file-id (:component-file shape))
               (st/emit! (dwl/go-to-local-component :id (first ids) :additional-ids (rest ids)))
               (st/emit! (dwl/go-to-component-file (:component-file shape) (first malformed-comps) false))))))

        ;; Used to force a remount after an error
        key*     (mf/use-state (uuid/next))
        key      (deref key*)
        mixed-label (tr "settings.multiple")

        switch-component
        (mf/use-fn
         (mf/deps shapes)
         (fn [pos val]
           (if (= val mixed-label)
             (reset! key* (uuid/next))
             (let [error-msg (if (> (count shapes) 1)
                               (tr "workspace.component.switch.loop-error-multi")
                               (tr "workspace.component.swap.loop-error"))

                   mdata     {:on-error #(do
                                           (reset! key* (uuid/next))
                                           (st/emit! (ntf/error error-msg)))}
                   params    {:shapes shapes :pos pos :val val}]
               (st/emit! (dwv/variants-switch (with-meta params mdata)))))))]

    [:*
     [:div {:class (stl/css :variant-property-list)}
      (for [[pos prop] (map vector (range) props-first)]
        (let [mixed-value? (not-every? #(= (:value prop) (:value (nth % pos))) properties)
              options (cond-> (get-options (:name prop))
                        mixed-value?
                        (conj {:id mixed-label, :label mixed-label :dimmed true}))]
          [:div {:key (str pos mixed-value?)
                 :class (stl/css :variant-property-container)}

           [:div {:class (stl/css :variant-property-name-wrapper)
                  :title (:name prop)}
            [:div {:class (stl/css :variant-property-name)}
             (:name prop)]]

           [:div {:class (stl/css :variant-property-value-wrapper)}
            [:> select* {:default-selected (if mixed-value? mixed-label (:value prop))
                         :options options
                         :empty-to-end true
                         :on-change (partial switch-component pos)