✨ Limit the length of property names and values to 60 chars (#6587)

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

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: [

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

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}]
 ```
 

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 }) => <InputWithMeta {...args} />,
 };

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"