Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Add tooltips for advanced options on settings page (#2470)

Browse Source 
* Add tooltips for advanced options on settings page

* Remove old css

* Fix failing Cypress test
This commit is contained in:
gillespi314
2021-10-11 12:01:25 -05:00
committed by GitHub
parent 39da3fd84d
commit 89f4234819
3 changed files with 114 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
+62 -30
View File
@@ -154,42 +154,74 @@ class AppConfigForm extends Component {
const { fields } = this.props;
return (
<div>
<div className={`${baseClass}__advanced-options`}>
<p className={`${baseClass}__section-description`}>
Most users do not need to modify these options.
</p>
<div className={`${baseClass}__inputs`}>
<div className={`${baseClass}__smtp-section`}>
<InputField {...fields.domain} label="Domain" />
<Checkbox {...fields.verify_ssl_certs}>Verify SSL certs</Checkbox>
<Checkbox {...fields.enable_start_tls}>Enable STARTTLS</Checkbox>
<Checkbox {...fields.host_expiry_enabled}>Host expiry</Checkbox>
<InputField
{...fields.host_expiry_window}
disabled={!fields.host_expiry_enabled.value}
label="Host expiry window"
/>
<Checkbox {...fields.live_query_disabled}>
Disable live queries
</Checkbox>
<div className={`${baseClass}__form-fields`}>
<div className="tooltip-wrap tooltip-wrap--input">
<InputField {...fields.domain} label="Domain" />
<IconToolTip
isHtml
text={
'<p>If you need to specify a HELO domain, <br />you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>'
}
/>
</div>
<div className="tooltip-wrap">
<Checkbox {...fields.verify_ssl_certs}>Verify SSL certs</Checkbox>
<IconToolTip
isHtml
text={
'<p>Turn this off (not recommended) <br />if you use a self-signed certificate <em className="hint hint--brand"><br />(Default: <strong>On</strong>)</em></p>'
}
/>
</div>
<div className="tooltip-wrap">
<Checkbox {...fields.enable_start_tls}>Enable STARTTLS</Checkbox>
<IconToolTip
isHtml
text={
'<p>Detects if STARTTLS is enabled <br />in your SMTP server and starts <br />to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>'
}
/>
</div>
<div className="tooltip-wrap">
<Checkbox {...fields.host_expiry_enabled}>Host expiry</Checkbox>
<IconToolTip
isHtml
text={
'<p>When enabled, allows automatic cleanup <br />of hosts that have not communicated with Fleet <br />in some number of days. <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
}
/>
</div>
<div className="tooltip-wrap tooltip-wrap--input">
<InputField
{...fields.host_expiry_window}
disabled={!fields.host_expiry_enabled.value}
label="Host Expiry Window"
/>
<IconToolTip
isHtml
text={
"<p>If a host has not communicated with Fleet <br />in the specified number of days, it will be removed.</p>"
}
/>
</div>
<div className="tooltip-wrap">
<Checkbox {...fields.live_query_disabled}>
Disable live queries
</Checkbox>
<IconToolTip
isHtml
text={
'<p>When enabled, disables the ability to run live queries <br />(ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>'
}
/>
</div>
</div>
</div>
<div className={`${baseClass}__details`}>
<IconToolTip
isHtml
text={
'\
<p><strong>Domain</strong> - If you need to specify a HELO domain, you can do it here <em className="hint hint--brand">(Default: <strong>Blank</strong>)</em></p>\
<p><strong>Verify SSL certs</strong> - Turn this off (not recommended) if you use a self-signed certificate <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>\
<p><strong>Enable STARTTLS</strong> - Detects if STARTTLS is enabled in your SMTP server and starts to use it. <em className="hint hint--brand">(Default: <strong>On</strong>)</em></p>\
<p><strong>Host expiry</strong> - When enabled, allows automatic cleanup of hosts that have not communicated with Fleet in some number of days. <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>\
<p><strong>Host expiry window</strong> - If a host has not communicated with Fleet in the specified number of days, it will be removed.</p>\
<p><strong>Disable live queries</strong> - When enabled, disables the ability to run live queries (ad hoc queries executed via the UI or fleetctl). <em className="hint hint--brand">(Default: <strong>Off</strong>)</em></p>\
'
}
/>
</div>
</div>
);
};
frontend/components/forms/admin/AppConfigForm/_styles.scss
+50 -10
View File
@@ -197,16 +197,6 @@
&__smtp-section {
@include clearfix;
.fleet-checkbox__tick {
position: relative;
left: 150px;
top: 12px;
}
.fleet-checkbox__label {
position: relative;
left: -48px;
}
}
&__component-label {
@@ -228,4 +218,54 @@
justify-content: flex-end;
}
}
&__advanced-options {
margin-bottom: $pad-large;
.tooltip-wrap {
display: flex;
align-items: center;
width: 100%;
margin-bottom: $pad-large;
.icon-tooltip {
span {
display: flex;
align-items: center;
}
p {
text-align: center;
}
}
.form-field--input {
display: flex;
flex-direction: column;
width: 100%;
margin-right: $pad-small;
margin-bottom: 0;
}
.form-field--checkbox {
display: flex;
flex-direction: column;
align-items: center;
margin-right: $pad-small;
margin-bottom: 0;
.fleet-checkbox {
display: flex;
align-items: center;
}
}
}
.tooltip-wrap--input {
.icon-tooltip {
span {
margin-top: 22px;
}
}
}
}
}
frontend/pages/hosts/ManageHostsPage/components/AddHostModal/AddHostModal.jsx
+2 -2
View File
@@ -153,7 +153,7 @@ class AddHostModal extends Component {
);
};
createTeamDropdownOptions = (currentUserTeams) => {
createTeamDropdownOptions = (currentUserTeams = []) => {
const teamOptions = currentUserTeams.map((team) => {
return {
value: team.id,
@@ -280,7 +280,7 @@ class AddHostModal extends Component {
server.
</p>
<div className={`${baseClass}__secret-wrapper`}>
{isPremiumTier ? (
{isPremiumTier && currentUserTeams ? (
<Dropdown
wrapperClassName={`${baseClass}__team-dropdown-wrapper`}
label={"Select a team for this new host:"}