Merge pull request #876 from shobhitexe/fix/358-input-fields-maxlength

fix(inputs): added maxlength for inputs
tailwarden · Jul 4, 2023 · d4211e5 · d4211e5
2 parents 55a8e7c + 524ad8f
commit d4211e5
Show file tree

Hide file tree

Showing 9 changed files with 13 additions and 0 deletions.
diff --git a/dashboard/components/input/Input.tsx b/dashboard/components/input/Input.tsx
@@ -13,6 +13,7 @@ export type InputProps = {
   value?: string | number | string[];
   autofocus?: boolean;
   min?: number;
+  maxLength?: number;
   positiveNumberOnly?: boolean;
   action: (newData: any, id?: number) => void;
 };
@@ -27,6 +28,7 @@ function Input({
   value,
   autofocus,
   min,
+  maxLength,
   positiveNumberOnly,
   action
 }: InputProps) {
@@ -83,6 +85,7 @@ function Input({
           value={value}
           ref={inputRef}
           min={min}
+          maxLength={maxLength}
           autoComplete="off"
           data-lpignore="true"
           data-form-type="other"

diff --git a/dashboard/components/inventory/components/InventoryLayout.tsx b/dashboard/components/inventory/components/InventoryLayout.tsx
@@ -75,6 +75,7 @@ function InventoryLayout({
                 <input
                   placeholder="Search views"
                   value={query}
+                  maxLength={64}
                   onChange={e => setQuery(e.target.value)}
                   className="flex w-full items-center rounded-lg border border-black-200 px-4 py-3 pl-10 text-sm font-medium text-black-400 transition-colors hover:border-black-300 focus-visible:outline-primary"
                 />

diff --git a/dashboard/components/inventory/components/InventorySearchBar.tsx b/dashboard/components/inventory/components/InventorySearchBar.tsx
@@ -42,6 +42,7 @@ function InventorySearchBar({
             autoComplete="off"
             data-lpignore="true"
             data-form-type="other"
+            maxLength={64}
           />
           <div className="absolute top-[14px] right-4">
             <ExportCSV setToast={setToast} />

diff --git a/dashboard/components/inventory/components/InventoryTagWrapper.tsx b/dashboard/components/inventory/components/InventoryTagWrapper.tsx
@@ -22,6 +22,7 @@ function InventoryTagWrapper({
         error="Please provide a valid key name."
         action={handleChange}
         value={tag.key}
+        maxLength={64}
       />
       <Input
         id={id}
@@ -31,6 +32,7 @@ function InventoryTagWrapper({
         error="Please provide a valid value."
         action={handleChange}
         value={tag.value}
+        maxLength={64}
       />
     </div>
   );

diff --git a/dashboard/components/inventory/components/filter/InventoryFilterOperator.tsx b/dashboard/components/inventory/components/filter/InventoryFilterOperator.tsx
@@ -72,6 +72,7 @@ function InventoryFilterOperator({
             error="Please provide a tag key"
             action={handleTagKey}
             autofocus={true}
+            maxLength={64}
           />
         </div>
       )}

diff --git a/dashboard/components/inventory/components/filter/InventoryFilterValue.tsx b/dashboard/components/inventory/components/filter/InventoryFilterValue.tsx
@@ -134,6 +134,7 @@ function InventoryFilterValue({
               error="Please provide a value"
               action={handleValueInput}
               autofocus={true}
+              maxLength={64}
             />
           </div>
         )}

diff --git a/dashboard/components/inventory/components/view/InventoryView.tsx b/dashboard/components/inventory/components/view/InventoryView.tsx
@@ -152,6 +152,7 @@ function InventoryView({
               value={view.name}
               action={handleChange}
               autofocus={true}
+              maxLength={64}
             />
 
             <div className="ml-auto">

diff --git a/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx b/dashboard/components/inventory/components/view/alerts/InventoryViewAlertsEditAlert.tsx
@@ -182,6 +182,7 @@ function InventoryViewAlertsCreateOrEditAlert({
               name="name"
               action={handleChange}
               value={alert.name}
+              maxLength={64}
             />
             <Input
               type="number"
@@ -234,6 +235,7 @@ function InventoryViewAlertsCreateOrEditAlert({
                       handleChange({ endpoint: e.target.value });
                     }}
                     value={alert.endpoint}
+                    maxLength={64}
                     autoComplete="off"
                     data-lpignore="true"
                     data-form-type="other"

diff --git a/dashboard/components/select-checkbox/SelectCheckbox.tsx b/dashboard/components/select-checkbox/SelectCheckbox.tsx
@@ -157,6 +157,7 @@ function SelectCheckbox({
                 placeholder="Search"
                 className="h-10 w-full rounded-md border border-black-200/50 bg-white py-4 pl-10 pr-6 text-sm text-black-900 caret-secondary placeholder:text-black-300 focus:outline-none"
                 autoFocus
+                maxLength={64}
               />
             </div>
             {error && (