UI – Update Advanced settings page (#15181)

## Addresses #14260

- Show host expiry window input field only when setting is enabled
- Update setting tooltip text
- Clean up form validation

![Screenshot 2023-11-16 at 2 21
19 PM](https://github.com/fleetdm/fleet/assets/61553566/5f898650-da47-4e42-885a-21e2c3b5bda5)


![image](https://github.com/fleetdm/fleet/assets/61553566/0af9d7d7-4ab7-4ea3-ad2e-b75a91213cdb)


- [x] Changes file added for user-visible changes in `changes/` 
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
This commit is contained in:
Jacob Shandling 2023-11-16 14:32:53 -08:00 committed by GitHub
parent 36e12d02e3
commit c6078a1923
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 32 additions and 33 deletions

View File

@ -0,0 +1,2 @@
* Only show the Settings > Advanced > "Host expiry window" input field when the "Host expiry"
setting is enabled

View File

@ -46,22 +46,17 @@ const Advanced = ({
setFormData({ ...formData, [name]: value });
};
const validateForm = () => {
useEffect(() => {
// validate desired form fields
const errors: IAppConfigFormErrors = {};
if (enableHostExpiry) {
if (!hostExpiryWindow || hostExpiryWindow <= 0) {
errors.host_expiry_window =
"Host expiry window must be a positive number";
}
if (enableHostExpiry && (!hostExpiryWindow || hostExpiryWindow <= 0)) {
errors.host_expiry_window =
"Host expiry window must be a positive number";
}
setFormErrors(errors);
};
useEffect(() => {
validateForm();
}, [enableHostExpiry]);
}, [enableHostExpiry, hostExpiryWindow]);
const onFormSubmit = (evt: React.MouseEvent<HTMLFormElement>) => {
evt.preventDefault();
@ -166,35 +161,37 @@ const Advanced = ({
value={enableHostExpiry}
parseTarget
tooltipContent={
<p>
When enabled, allows automatic cleanup <br />
of hosts that have not communicated with Fleet <br />
in some number of days.{" "}
<>
When enabled, allows automatic cleanup of
<br />
hosts that have not communicated with Fleet in
<br />
the number of days specified in the{" "}
<strong>
Host expiry
<br />
window
</strong>{" "}
setting.{" "}
<em className="hint hint--brand">
(Default: <strong>Off</strong>)
</em>
</p>
</>
}
>
Host expiry
</Checkbox>
<InputField
label="Host expiry window"
type="number"
disabled={!enableHostExpiry}
onChange={handleInputChange}
name="hostExpiryWindow"
value={hostExpiryWindow}
parseTarget
onBlur={validateForm}
error={formErrors.host_expiry_window}
tooltipContent={
<p>
If a host has not communicated with Fleet in the specified
number of days, it will be removed.
</p>
}
/>
{enableHostExpiry && (
<InputField
label="Host expiry window"
type="number"
onChange={handleInputChange}
name="hostExpiryWindow"
value={hostExpiryWindow}
parseTarget
error={formErrors.host_expiry_window}
/>
)}
<Checkbox
onChange={handleInputChange}
name="disableLiveQuery"