From 6ed5dc138d6f7edebe67e0ec9ef62c8747eb6005 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 27 May 2024 14:43:11 +0200 Subject: [PATCH 1/3] Fix editing/saving --- .../app/main/ui/workspace/tokens/common.cljs | 7 ++----- .../app/main/ui/workspace/tokens/modal.cljs | 19 +++++++------------ 2 files changed, 9 insertions(+), 17 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/common.cljs b/frontend/src/app/main/ui/workspace/tokens/common.cljs index 866f8e660..c720fdd1c 100644 --- a/frontend/src/app/main/ui/workspace/tokens/common.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/common.cljs @@ -24,11 +24,8 @@ (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 diff --git a/frontend/src/app/main/ui/workspace/tokens/modal.cljs b/frontend/src/app/main/ui/workspace/tokens/modal.cljs index 5529d328a..fba2c13b8 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 {:defaultValue @name + :autoFocus true + :onChange 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 {:defaultValue @token-value + :onChange #(on-update-state-field idx %)}}])]) [:& tokens.common/labeled-input {:label "Description" - :default-value @description - :on-change #(on-update-description %)}] + :input-props {:defaultValue @description + :onChange #(on-update-description %)}}] [:div {:class (stl/css :button-row)} [:button {:class (stl/css :button) :type "submit"} From 47d75e7e2a97e0f89c5b416832be1deadfa7d562 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 27 May 2024 14:43:28 +0200 Subject: [PATCH 2/3] Remove closed for now --- common/src/app/common/types/token.cljc | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/common/src/app/common/types/token.cljc b/common/src/app/common/types/token.cljc index c0c1e8dbd..942864743 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 From 96a7cf2e98d1d400087706e814aafccb213d7177 Mon Sep 17 00:00:00 2001 From: Florian Schroedl Date: Mon, 27 May 2024 14:50:55 +0200 Subject: [PATCH 3/3] Convert kebab keys into camelCase --- .../app/main/ui/workspace/tokens/common.cljs | 17 ++++++++++++++--- .../src/app/main/ui/workspace/tokens/modal.cljs | 14 +++++++------- 2 files changed, 21 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/tokens/common.cljs b/frontend/src/app/main/ui/workspace/tokens/common.cljs index c720fdd1c..f9d5e7c5d 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,6 +22,14 @@ [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 @@ -28,9 +38,10 @@ (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 fba2c13b8..f5d71acfc 100644 --- a/frontend/src/app/main/ui/workspace/tokens/modal.cljs +++ b/frontend/src/app/main/ui/workspace/tokens/modal.cljs @@ -84,19 +84,19 @@ :on-submit on-submit} [:div {:class (stl/css :token-rows)} [:& tokens.common/labeled-input {:label "Name" - :input-props {:defaultValue @name - :autoFocus true - :onChange on-update-name}}] + :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 - :input-props {:defaultValue @token-value - :onChange #(on-update-state-field idx %)}}])]) + :input-props {:default-value @token-value + :on-change #(on-update-state-field idx %)}}])]) [:& tokens.common/labeled-input {:label "Description" - :input-props {:defaultValue @description - :onChange #(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"}