diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index c0c1e8dbdb..942864743f 100644 --- a/common/src/app/common/types/token.cljc +++ b/common/src/app/common/types/token.cljc @@ -119,8 +119,7 @@ (def rotation-keys (schema-keys ::rotation)) (sm/def! ::tokens - [:map {:title "Applied Tokens" - :closed true}]) + [:map {:title "Applied Tokens"}]) (sm/def! ::applied-tokens (merge-schemas ::tokens diff --git a/frontend/src/app/main/ui/workspace/tokens/common.cljs b/frontend/src/app/main/ui/workspace/tokens/common.cljs index 866f8e6606..f9d5e7c5df 100644 --- a/frontend/src/app/main/ui/workspace/tokens/common.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/common.cljs @@ -7,6 +7,8 @@ (ns app.main.ui.workspace.tokens.common (:require-macros [app.main.style :as stl]) (:require + [app.common.data :as d] + [cuerdas.core :as str] [rumext.v2 :as mf])) ;; Helpers --------------------------------------------------------------------- @@ -20,20 +22,26 @@ [pos coll] (into (subvec coll 0 pos) (subvec coll (inc pos)))) +(defn camel-keys [m] + (->> m + (d/deep-mapm + (fn [[k v]] + (if (or (keyword? k) (string? k)) + [(keyword (str/camel (name k))) v] + [k v]))))) + ;; Components ------------------------------------------------------------------ (mf/defc labeled-input {::mf/wrap-props false} - [{:keys [input-ref label default-value on-change auto-focus? auto-complete?]}] - (let [input-props (cond-> {:ref input-ref - :default-value default-value - :autoFocus auto-focus? - :on-change on-change} + [{:keys [label input-props auto-complete?]}] + (let [input-props (cond-> input-props ;; Disable auto-complete on form fields for proprietary password managers ;; https://github.com/orgs/tokens-studio/projects/69/views/11?pane=issue&itemId=63724204 - (not auto-complete?) (assoc :data-1p-ignore true - :data-lpignore true - :autoComplete "off"))] + (not auto-complete?) (assoc "data-1p-ignore" true + "data-lpignore" true + :auto-complete "off") + :always camel-keys)] [:label {:class (stl/css :labeled-input)} [:span {:class (stl/css :label)} label] [:& :input input-props]])) diff --git a/frontend/src/app/main/ui/workspace/tokens/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/modal.cljs index 5529d328aa..f5d71acfc2 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modal.cljs @@ -49,7 +49,6 @@ name (mf/use-var (or (:name token) "")) on-update-name #(reset! name (dom/get-target-val %)) - name-ref (mf/use-ref) token-value (mf/use-var (or (:value token) "")) @@ -79,29 +78,25 @@ (st/emit! (dt/add-token token)) (modal/hide!)))] - (mf/use-effect - (fn [] - (dom/focus! (mf/ref-val name-ref)))) - [:form {:class (stl/css :shadow) :style (clj->js style) :on-submit on-submit} [:div {:class (stl/css :token-rows)} [:& tokens.common/labeled-input {:label "Name" - :default-value @name - :on-change on-update-name - :input-ref name-ref}] + :input-props {:default-value @name + :auto-focus true + :on-change on-update-name}}] (for [[idx {:keys [type label]}] (d/enumerate @state)] [:* {:key (str "form-field-" idx)} (case type :box-shadow [:p "TODO BOX SHADOW"] [:& tokens.common/labeled-input {:label label - :default-value @token-value - :on-change #(on-update-state-field idx %)}])]) + :input-props {:default-value @token-value + :on-change #(on-update-state-field idx %)}}])]) [:& tokens.common/labeled-input {:label "Description" - :default-value @description - :on-change #(on-update-description %)}] + :input-props {:default-value @description + :on-change #(on-update-description %)}}] [:div {:class (stl/css :button-row)} [:button {:class (stl/css :button) :type "submit"}