From ad26efaa5d56a3c5fa4d13433a3fa139642ccd2a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?luis=CE=B4=CE=BC?= Date: Fri, 30 May 2025 16:15:18 +0200 Subject: [PATCH] :sparkles: Limit the length of property names and values to 60 chars (#6587) --- common/src/app/common/types/variant.cljc | 5 +++- common/test/common_tests/variant_test.cljc | 25 +++++++++++-------- .../src/app/main/ui/ds/controls/combobox.cljs | 2 +- .../main/ui/ds/controls/combobox.stories.jsx | 2 ++ .../main/ui/ds/product/input_with_meta.cljs | 6 ++++- .../main/ui/ds/product/input_with_meta.mdx | 2 ++ .../ui/ds/product/input_with_meta.stories.jsx | 4 +++ .../sidebar/options/menus/component.cljs | 3 +++ 8 files changed, 36 insertions(+), 13 deletions(-) diff --git a/common/src/app/common/types/variant.cljc b/common/src/app/common/types/variant.cljc index 78b3d3c7b..9849a30e1 100644 --- a/common/src/app/common/types/variant.cljc +++ b/common/src/app/common/types/variant.cljc @@ -54,6 +54,7 @@ (def property-prefix "Property") (def property-regex (re-pattern (str property-prefix "(\\d+)"))) +(def property-max-length 60) (def value-prefix "Value ") @@ -134,7 +135,9 @@ (->> (str/split s ",") (mapv #(str/split % "=" 2)) (every? #(and (= 2 (count %)) - (not (str/blank? (first %))))))) + (not (str/blank? (first %))) + (< (count (first %)) property-max-length) + (< (count (second %)) property-max-length))))) (defn find-properties-to-remove diff --git a/common/test/common_tests/variant_test.cljc b/common/test/common_tests/variant_test.cljc index e82801083..433f00857 100644 --- a/common/test/common_tests/variant_test.cljc +++ b/common/test/common_tests/variant_test.cljc @@ -25,11 +25,14 @@ string-valid-with-no-value "border=no, color=" string-valid-with-dashes "border=no, color=--" string-valid-with-equal "border=yes color=yes" - string-invalid-1 "" - string-invalid-2 "=yes" - string-invalid-3 "border" - string-invalid-4 "border=yes, =gray" - string-invalid-5 "border=yes, color"] + + string-invalid-empty "" + string-invalid-no-property-1 "=yes" + string-invalid-no-property-2 "border=yes, =gray" + string-invalid-no-equal-1 "border" + string-invalid-no-equal-2 "border=yes, color" + string-invalid-too-long-1 "this is a too long property name which should throw a validation error=yes" + string-invalid-too-long-2 "border=this is a too long property name which should throw a validation error"] (t/testing "convert map to formula" (t/is (= (ctv/properties-map->formula map-with-two-props) string-valid-with-two-props)) @@ -50,11 +53,13 @@ (t/is (= (ctv/valid-properties-formula? string-valid-with-spaces) true)) (t/is (= (ctv/valid-properties-formula? string-valid-with-no-value) true)) (t/is (= (ctv/valid-properties-formula? string-valid-with-dashes) true)) - (t/is (= (ctv/valid-properties-formula? string-invalid-1) false)) - (t/is (= (ctv/valid-properties-formula? string-invalid-2) false)) - (t/is (= (ctv/valid-properties-formula? string-invalid-3) false)) - (t/is (= (ctv/valid-properties-formula? string-invalid-4) false)) - (t/is (= (ctv/valid-properties-formula? string-invalid-5) false))))) + (t/is (= (ctv/valid-properties-formula? string-invalid-empty) false)) + (t/is (= (ctv/valid-properties-formula? string-invalid-no-property-1) false)) + (t/is (= (ctv/valid-properties-formula? string-invalid-no-equal-1) false)) + (t/is (= (ctv/valid-properties-formula? string-invalid-no-property-2) false)) + (t/is (= (ctv/valid-properties-formula? string-invalid-no-equal-2) false)) + (t/is (= (ctv/valid-properties-formula? string-invalid-too-long-1) false)) + (t/is (= (ctv/valid-properties-formula? string-invalid-too-long-2) false))))) (t/deftest find-properties diff --git a/frontend/src/app/main/ui/ds/controls/combobox.cljs b/frontend/src/app/main/ui/ds/controls/combobox.cljs index 1496a5a8f..48674f468 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.cljs +++ b/frontend/src/app/main/ui/ds/controls/combobox.cljs @@ -259,7 +259,7 @@ :data-testid "combobox-input" :max-length (d/nilv max-length max-input-length) :disabled disabled - :value selected-value + :value (d/nilv selected-value "") :placeholder placeholder :on-change on-input-change :on-click on-input-click diff --git a/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx b/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx index 0c57dcd3f..88126a5bb 100644 --- a/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx +++ b/frontend/src/app/main/ui/ds/controls/combobox.stories.jsx @@ -18,10 +18,12 @@ export default { component: Combobox, argTypes: { disabled: { control: "boolean" }, + maxLength: { control: "number" }, hasError: { control: "boolean" }, }, args: { disabled: false, + maxLength: 10, hasError: false, placeholder: "Select a month", options: [ diff --git a/frontend/src/app/main/ui/ds/product/input_with_meta.cljs b/frontend/src/app/main/ui/ds/product/input_with_meta.cljs index 5e0cd65cf..361d62cb0 100644 --- a/frontend/src/app/main/ui/ds/product/input_with_meta.cljs +++ b/frontend/src/app/main/ui/ds/product/input_with_meta.cljs @@ -8,6 +8,8 @@ (:require-macros [app.main.style :as stl]) (:require + [app.common.data :as d] + [app.main.constants :refer [max-input-length]] [app.main.ui.ds.controls.input :refer [input*]] [app.util.dom :as dom] [app.util.keyboard :as kbd] @@ -17,11 +19,12 @@ [:map [:value :string] [:meta {:optional true} :string] + [:max-length {:optional true} :int] [:on-blur {:optional true} fn?]]) (mf/defc input-with-meta* {::mf/schema schema:input-with-meta} - [{:keys [value meta on-blur] :rest props}] + [{:keys [value meta max-length on-blur] :rest props}] (let [editing* (mf/use-state false) editing? (deref editing*) @@ -63,6 +66,7 @@ props (mf/spread-props props {:ref input-ref :default-value value + :max-length (d/nilv max-length max-input-length) :auto-focus true :on-focus on-focus :on-blur on-stop-edit diff --git a/frontend/src/app/main/ui/ds/product/input_with_meta.mdx b/frontend/src/app/main/ui/ds/product/input_with_meta.mdx index 822d7751b..140ee87bd 100644 --- a/frontend/src/app/main/ui/ds/product/input_with_meta.mdx +++ b/frontend/src/app/main/ui/ds/product/input_with_meta.mdx @@ -13,11 +13,13 @@ The `input-with-meta*` acts as an input with an optional addition of a meta text * You need to pass the mandatory string property `value`. * You can pass the optional string property `meta`. +* You can pass the optional int property `max-length`. * You can pass a function property `on-blur` that will be called with the blur event when the component loses focus (including when the user presses enter or esc). ```clj [:> input-with-meta* {:value value :meta meta + :max-length max-length :on-blur on-blur}] ``` diff --git a/frontend/src/app/main/ui/ds/product/input_with_meta.stories.jsx b/frontend/src/app/main/ui/ds/product/input_with_meta.stories.jsx index b6a31464b..6ce3386b9 100644 --- a/frontend/src/app/main/ui/ds/product/input_with_meta.stories.jsx +++ b/frontend/src/app/main/ui/ds/product/input_with_meta.stories.jsx @@ -19,10 +19,14 @@ export default { meta: { control: { type: "text" }, }, + maxLength: { + control: { type: "number" }, + }, }, args: { value: "Property 1", meta: "Value1, Value2", + maxLength: 10, }, render: ({ ...args }) => , }; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index 2da11c1c7..f3f33c811 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -317,6 +317,7 @@ [:* [:div {:class (stl/css :variant-property-name-wrapper)} [:> input-with-meta* {:value (:name prop) + :max-length ctv/property-max-length :data-position pos :on-blur update-property-name}]] @@ -326,6 +327,7 @@ :default-selected (if mixed-value? "" (:value prop)) :options (clj->js (get-options (:name prop))) :empty-to-end true + :max-length ctv/property-max-length :on-change (partial update-property-value pos)}])]])] (when variant-error-msg @@ -965,6 +967,7 @@ :class (stl/css :variant-property-row)} [:> input-with-meta* {:value (:name property) :meta meta + :max-length ctv/property-max-length :data-position pos :on-blur update-property-name}] [:> icon-button* {:variant "ghost"