From 3431aee17711edf8f1873941e4e21cabf2866546 Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Tue, 5 May 2026 11:27:48 +0200 Subject: [PATCH] :bug: Fix move org dialog must be select --- frontend/src/app/main/ui/dashboard/team.cljs | 7 +- frontend/src/app/main/ui/dashboard/team.scss | 8 ++- .../src/app/main/ui/ds/controls/combobox.cljs | 65 ++++++++++++------- frontend/translations/en.po | 5 +- frontend/translations/es.po | 5 +- 5 files changed, 63 insertions(+), 27 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index ef86cef4f3..dd3bbfb2de 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -810,7 +810,7 @@ (mf/defc select-organization-modal {::mf/register modal/components ::mf/register-as :select-organization-modal} - [{:keys [organizations current-organization-id on-confirm title-key choose-key placeholder-key accept-key cancel-key]}] + [{:keys [organizations current-organization-id on-confirm title-key text-key choose-key placeholder-key accept-key cancel-key]}] (let [valid-organizations (mf/with-memo [organizations] (remove #(= (:id %) current-organization-id) organizations)) options (mf/with-memo [valid-organizations] @@ -844,12 +844,16 @@ [:button {:class (stl/css :modal-close-btn) :on-click modal/hide!} deprecated-icon/close]] + (when text-key + [:div {:class (stl/css :modal-content :modal-select-org-text)} (tr text-key)]) + [:div [:div {:class (stl/css :modal-select-org-content)} (tr choose-key)] [:> combobox* {:id "selected-id" :class (stl/css :team-member) :options options + :select-only true :default-selected (or (some-> (get-in @form [:data :selected-id]) str) "") :placeholder (tr placeholder-key) :on-change on-change}]] @@ -1450,6 +1454,7 @@ :current-organization-id (:organization-id team) :on-confirm on-add-team-to-org-confirm :title-key "dashboard.change-org-modal.title" + :text-key "dashboard.change-org-modal.text" :choose-key "dashboard.change-org-modal.choose" :placeholder-key "dashboard.change-org-modal.select" :accept-key "dashboard.change-org-modal.accept" diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index a4e24c88b9..d68bbd26c9 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -880,7 +880,7 @@ } .modal-select-org-content { - @include t.use-typography("body-medium"); + @include t.use-typography("body-large"); color: var(--color-foreground-secondary); overflow: auto; @@ -895,6 +895,12 @@ height: $sz-40; } +.modal-select-org-text { + @include t.use-typography("body-large"); + + color: var(--color-foreground-secondary); +} + // ORGANIZATIONS SETTINGS .org-block-content { diff --git a/frontend/src/app/main/ui/ds/controls/combobox.cljs b/frontend/src/app/main/ui/ds/controls/combobox.cljs index c5a74811d2..14ade592a2 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.cljs +++ b/frontend/src/app/main/ui/ds/controls/combobox.cljs @@ -29,19 +29,21 @@ [:placeholder {:optional true} :string] [:disabled {:optional true} :boolean] [:default-selected {:optional true} :string] + [:select-only {:optional true} :boolean] [:on-change {:optional true} fn?] [:empty-to-end {:optional true} [:maybe :boolean]] [:has-error {:optional true} :boolean]]) (mf/defc combobox* {::mf/schema schema:combobox} - [{:keys [id options class placeholder disabled has-error default-selected max-length empty-to-end on-change] :rest props}] + [{:keys [id options class placeholder disabled has-error default-selected select-only max-length empty-to-end on-change] :rest props}] (let [;; NOTE: we use mfu/bean here for transparently handle ;; options provide as clojure data structures or javascript ;; plain objects and lists. options (if (array? options) (mfu/bean options) options) + select-only (d/nilv select-only false) empty-to-end (d/nilv empty-to-end false) is-open* (mf/use-state false) @@ -64,13 +66,15 @@ value-ref (mf/use-ref nil) dropdown-options - (mf/with-memo [options filter-id] - (->> options - (filterv (fn [option] - (let [option (str/lower (get option :label)) - filter (str/lower filter-id)] - (str/includes? option filter)))) - (not-empty))) + (mf/with-memo [options filter-id select-only] + (if select-only + (not-empty options) + (->> options + (filterv (fn [option] + (let [option (str/lower (get option :label)) + filter (str/lower filter-id)] + (str/includes? option filter)))) + (not-empty)))) set-option-ref (mf/use-fn @@ -113,7 +117,7 @@ on-blur (mf/use-fn - (mf/deps on-change options selected-id) + (mf/deps on-change options selected-id select-only) (fn [event] (dom/stop-propagation event) (let [target (dom/get-related-target event) @@ -125,9 +129,11 @@ (when-let [input-node (mf/ref-val input-ref)] (let [input-value (dom/get-input-value input-node) selected-option (d/seek #(= selected-id (get % :id)) options) - value (if (some? selected-option) + value (if select-only selected-id - input-value)] + (if (some? selected-option) + selected-id + input-value))] (on-change value)))))))) on-input-click @@ -149,10 +155,18 @@ on-input-key-down (mf/use-fn - (mf/deps is-open focused-id disabled) + (mf/deps is-open focused-id disabled select-only) (fn [event] (dom/stop-propagation event) (when-not disabled + (when (and select-only + (not (kbd/down-arrow? event)) + (not (kbd/up-arrow? event)) + (not (kbd/home? event)) + (not (kbd/enter? event)) + (not (kbd/esc? event)) + (not (kbd/tab? event))) + (dom/prevent-default event)) (let [options (mf/ref-val options-ref) len (count options) index (d/index-of-pred options #(= focused-id (get % :id))) @@ -201,15 +215,17 @@ on-input-change (mf/use-fn + (mf/deps select-only) (fn [event] (dom/stop-propagation event) - (let [value (-> event - dom/get-target - dom/get-value)] - (mf/set-ref-val! value-ref value) - (reset! selected-id* value) - (reset! filter-id* value) - (reset! focused-id* nil)))) + (when-not select-only + (let [value (-> event + dom/get-target + dom/get-value)] + (mf/set-ref-val! value-ref value) + (reset! selected-id* value) + (reset! filter-id* value) + (reset! focused-id* nil))))) selected-option (mf/with-memo [options selected-id] @@ -268,16 +284,19 @@ :role "combobox" :class (stl/css :input) :auto-complete "off" - :aria-autocomplete "both" + :aria-autocomplete (if select-only "none" "both") :aria-expanded is-open :aria-controls listbox-id :aria-activedescendant focused-id :data-testid "combobox-input" :max-length (d/nilv max-length max-input-length) :disabled disabled - :value (if (str/empty? (:id selected-option)) - (d/nilv selected-id "") - (d/nilv (:label selected-option) "")) + :read-only select-only + :value (if select-only + (d/nilv (:label selected-option) "") + (if (str/empty? (:id selected-option)) + (d/nilv selected-id "") + (d/nilv (:label selected-option) ""))) :placeholder placeholder :on-change on-input-change :on-click on-input-click diff --git a/frontend/translations/en.po b/frontend/translations/en.po index f80d4beb21..af5aad880e 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1157,7 +1157,10 @@ msgid "dashboard.select-org-modal.accept" msgstr "ADD TO ORGANIZATION" msgid "dashboard.change-org-modal.title" -msgstr "CHANGE TEAM'S ORGANIZATION" +msgstr "Change team's organization" + +msgid "dashboard.change-org-modal.text" +msgstr "Projects and files will remain available to team members. The team will get the configuration from the new organization." msgid "dashboard.change-org-modal.choose" msgstr "Move to:" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 1b9a2f166f..2f3e75c289 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1161,7 +1161,10 @@ msgid "dashboard.select-org-modal.accept" msgstr "AÑADIR A UNA ORGANIZACIÓN" msgid "dashboard.change-org-modal.title" -msgstr "CAMBIAR EL EQUIPO DE ORGANIZACIÓN" +msgstr "Cambiar el equipo de organización" + +msgid "dashboard.change-org-modal.text" +msgstr "Los miembros del equipo seguirán teniendo acceso a los proyectos y ficheros. El equipo tendrá la configuración de la nueva organización." msgid "dashboard.change-org-modal.choose" msgstr "Mover a:"