Skip to content

fix: clamp input sizes for bind/reporting tabs #216

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Nerivec merged 1 commit into from
Sep 2, 2025
Merged

fix: clamp input sizes for bind/reporting tabs #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions src/components/device-page/BindRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,6 +164,7 @@ const BindRow = memo(({ sourceIdx, devices, groups, device, rule }: BindRowProps
values={sourceEndpoints}
value={stateRule.source.endpoint}
onChange={onSourceEndpointChange}
required
/>
<DevicePicker
label={t("destination")}
Expand All @@ -172,6 +173,7 @@ const BindRow = memo(({ sourceIdx, devices, groups, device, rule }: BindRowProps
devices={devices}
groups={groups}
onChange={onDestinationChange}
required
/>
{stateRule.target.type === "endpoint" ? (
<EndpointPicker
Expand All @@ -192,7 +194,7 @@ const BindRow = memo(({ sourceIdx, devices, groups, device, rule }: BindRowProps
item={"Bind"}
disabled={!isValidRule}
title={t("bind")}
className="btn btn-primary join-item"
className="btn btn-primary btn-outline join-item"
onClick={onBindOrUnBindClick}
>
<FontAwesomeIcon icon={faLink} />
Expand All @@ -202,7 +204,7 @@ const BindRow = memo(({ sourceIdx, devices, groups, device, rule }: BindRowProps
item={"Unbind"}
disabled={stateRule.isNew || !isValidRule}
title={t("unbind")}
className="btn btn-error join-item"
className="btn btn-error btn-outline join-item"
onClick={onBindOrUnBindClick}
>
<FontAwesomeIcon icon={faUnlink} />
Expand All @@ -211,7 +213,7 @@ const BindRow = memo(({ sourceIdx, devices, groups, device, rule }: BindRowProps
</div>
</fieldset>
</div>
<div className="divider" />
<div className="divider my-1" />
</>
);
});
Expand Down
14 changes: 11 additions & 3 deletions src/components/device-page/ReportingRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ const ReportingRow = memo(({ sourceIdx, rule, device, onApply }: ReportingRowPro
value={stateRule.minimum_report_interval}
onChange={onReportNumberChange}
required
className="input validator max-w-48"
/>
<InputField
name="maximum_report_interval"
Expand All @@ -137,6 +138,7 @@ const ReportingRow = memo(({ sourceIdx, rule, device, onApply }: ReportingRowPro
value={stateRule.maximum_report_interval}
onChange={onReportNumberChange}
required
className="input validator max-w-48"
/>
<InputField
name="reportable_change"
Expand All @@ -145,17 +147,23 @@ const ReportingRow = memo(({ sourceIdx, rule, device, onApply }: ReportingRowPro
value={stateRule.reportable_change}
onChange={onReportNumberChange}
required
className="input validator max-w-48"
/>
<fieldset className="fieldset">
<legend className="fieldset-legend">{t("actions")}</legend>
<div className="join join-horizontal">
<Button<NiceReportingRule> className="btn btn-primary join-item" item={stateRule} onClick={onApply} disabled={!isValidRule}>
<Button<NiceReportingRule>
className="btn btn-primary btn-outline join-item"
item={stateRule}
onClick={onApply}
disabled={!isValidRule}
>
{t("common:apply")}
</Button>
{!stateRule.isNew ? (
<ConfirmButton<void>
title={t("common:disable")}
className="btn btn-error join-item"
className="btn btn-error btn-outline join-item"
onClick={onDisableRuleClick}
modalDescription={t("common:dialog_confirmation_prompt")}
modalCancelLabel={t("common:cancel")}
Expand All @@ -166,7 +174,7 @@ const ReportingRow = memo(({ sourceIdx, rule, device, onApply }: ReportingRowPro
</div>
</fieldset>
</div>
<div className="divider" />
<div className="divider my-1" />
</>
);
});
Expand Down
1 change: 1 addition & 0 deletions src/components/pickers/AttributePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const AttributePicker = memo(({ sourceIdx, cluster, device, onChange, label, ...
label={label}
onChange={(e: ChangeEvent<HTMLSelectElement>): void => onChange(e.target.value, clusterAttributes[e.target.value])}
disabled={options.length === 0}
className="select validator max-w-64"
{...rest}
>
<option value="" disabled>
Expand Down
2 changes: 1 addition & 1 deletion src/components/pickers/ClusterMultiPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const ClusterMultiPicker = memo((props: ClusterMultiPickerProps) => {
.map((cluster) => (
<label key={cluster} className="label" title={cluster}>
<input
className="checkbox"
className="checkbox checkbox-sm"
type="checkbox"
checked={value.includes(cluster)}
name={cluster}
Expand Down
10 changes: 9 additions & 1 deletion src/components/pickers/ClusterSinglePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,15 @@ const ClusterSinglePicker = memo((props: ClusterSinglePickerProps) => {
}, [clusters, t]);

return (
<SelectField name="attribute_picker" label={label} value={value} onChange={(e) => onChange(e.target.value)} disabled={disabled} {...rest}>
<SelectField
name="attribute_picker"
label={label}
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
className="select validator max-w-48"
{...rest}
>
<option value="" disabled>
{t("select_cluster")}
</option>
Expand Down
2 changes: 1 addition & 1 deletion src/components/pickers/DevicePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const DevicePicker = memo(({ devices, value, label, onChange, groups = [], ...re
}, [devices, groups, t]);

return (
<SelectField name="device_picker" label={label} value={value} onChange={onSelectHandler} {...rest}>
<SelectField name="device_picker" label={label} value={value} onChange={onSelectHandler} className="select validator max-w-64" {...rest}>
<option value="" disabled>
{t("select_device")}
</option>
Expand Down
1 change: 1 addition & 0 deletions src/components/pickers/EndpointPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ const EndpointPicker = memo((props: EndpointPickerProps) => {
onChange={(e) => onChange(e.target.value)}
title={hasOnlyOneEP ? t("the_only_endpoint") : ""}
disabled={(value && hasOnlyOneEP) || disabled}
className="select validator max-w-32"
{...rest}
>
<option value="" disabled>
Expand Down