mirror of
https://github.com/empayre/fleet.git
synced 2024-11-06 00:45:19 +00:00
tooltip for org settings form input descriptions (#434)
* added tooltip to input description on org settings form * pull out IconToolTip into its own component
This commit is contained in:
Gabe Hernandez
GitHub
parent
4677440d45
commit
8591e2a3e7
26
frontend/components/IconToolTip/IconToolTip.tsx
Normal file
26
frontend/components/IconToolTip/IconToolTip.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
import React from 'react';
|
||||
import ReactTooltip from 'react-tooltip';
|
||||
|
||||
interface IIconToolTipProps {
|
||||
text: string;
|
||||
isHtml?: boolean;
|
||||
}
|
||||
|
||||
// TODO: handle html text better. possibly use 'children' prop for html
|
||||
const IconToolTip = (props: IIconToolTipProps): JSX.Element => {
|
||||
const { text, isHtml } = props;
|
||||
return (
|
||||
<div className="icon-tooltip">
|
||||
<span data-tip={text} data-html={isHtml}>
|
||||
<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="8" cy="8.59961" r="8" fill="#6A67FE" />
|
||||
<path d="M7.49605 10.1893V9.70927C7.49605 9.33327 7.56405 8.98527 7.70005 8.66527C7.84405 8.34527 8.08405 7.99727 8.42005 7.62127C8.67605 7.34127 8.85205 7.10127 8.94805 6.90127C9.05205 6.70127 9.10405 6.48927 9.10405 6.26527C9.10405 6.00127 9.00805 5.79327 8.81605 5.64127C8.62405 5.48927 8.35205 5.41326 8.00005 5.41326C7.21605 5.41326 6.49205 5.70127 5.82805 6.27727L5.32405 5.12527C5.66005 4.82127 6.07605 4.57727 6.57205 4.39327C7.07605 4.20927 7.58405 4.11727 8.09605 4.11727C8.60005 4.11727 9.04005 4.20127 9.41605 4.36927C9.80005 4.53727 10.096 4.76927 10.304 5.06527C10.52 5.36127 10.628 5.70927 10.628 6.10927C10.628 6.47727 10.544 6.82127 10.376 7.14127C10.216 7.46127 9.92805 7.80927 9.51205 8.18527C9.13605 8.52927 8.87605 8.82927 8.73205 9.08527C8.58805 9.34127 8.49605 9.59727 8.45605 9.85327L8.40805 10.1893H7.49605ZM7.11205 12.6973V11.0293H8.79205V12.6973H7.11205Z" fill="white" />
|
||||
</svg>
|
||||
</span>
|
||||
{/* same colour as $core-dark-blue-grey */}
|
||||
<ReactTooltip effect={'solid'} data-html={isHtml} backgroundColor={'#3e4771'} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default IconToolTip;
|
||||
1
frontend/components/IconToolTip/index.ts
Normal file
1
frontend/components/IconToolTip/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { default } from './IconToolTip';
|
||||
@ -13,6 +13,7 @@ import InputField from 'components/forms/fields/InputField';
|
||||
import OrgLogoIcon from 'components/icons/OrgLogoIcon';
|
||||
import Slider from 'components/forms/fields/Slider';
|
||||
import validate from 'components/forms/admin/AppConfigForm/validate';
|
||||
import IconToolTip from 'components/IconToolTip';
|
||||
|
||||
const authMethodOptions = [
|
||||
{ label: 'Plain', value: 'authmethod_plain' },
|
||||
@ -111,12 +112,17 @@ class AppConfigForm extends Component {
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__details`}>
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
@ -183,7 +189,7 @@ class AppConfigForm extends Component {
|
||||
/>
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>The base URL of this instance for use in Fleet links.</p>
|
||||
<IconToolTip text={'The base URL of this instance for use in Fleet links.'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -205,7 +211,7 @@ class AppConfigForm extends Component {
|
||||
/>
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>A required human friendly name for the identity provider that will provide single sign on authentication.</p>
|
||||
<IconToolTip text={'A required human friendly name for the identity provider that will provide single sign on authentication.'} />
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__inputs`}>
|
||||
@ -216,7 +222,7 @@ class AppConfigForm extends Component {
|
||||
/>
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>The required entity ID is a URI that you use to identify Fleet when configuring the identity provider.</p>
|
||||
<IconToolTip text={'The required entity ID is a URI that you use to identify Fleet when configuring the identity provider.'} />
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__inputs`}>
|
||||
@ -224,11 +230,13 @@ class AppConfigForm extends Component {
|
||||
{...fields.issuer_uri}
|
||||
label="Issuer URI"
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>The issuer URI supplied by the identity provider.</p>
|
||||
<IconToolTip text={'The issuer URI supplied by the identity provider.'} />
|
||||
</div>
|
||||
|
||||
|
||||
<div className={`${baseClass}__inputs`}>
|
||||
<InputField
|
||||
{...fields.idp_image_url}
|
||||
@ -236,7 +244,7 @@ class AppConfigForm extends Component {
|
||||
/>
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>An optional link to an image such as a logo for the identity provider.</p>
|
||||
<IconToolTip text={'An optional link to an image such as a logo for the identity provider.'} />
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__inputs`}>
|
||||
@ -247,7 +255,7 @@ class AppConfigForm extends Component {
|
||||
/>
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>Metadata provided by the identity provider. Either metadata or a metadata url must be provided.</p>
|
||||
<IconToolTip text={'Metadata provided by the identity provider. Either metadata or a metadata url must be provided.'} />
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__inputs`}>
|
||||
@ -256,11 +264,11 @@ class AppConfigForm extends Component {
|
||||
label="Metadata URL"
|
||||
hint={<span>If available from the identity provider, this is the preferred means of providing metadata.</span>}
|
||||
/>
|
||||
<IconToolTip text={'A URL that references the identity provider metadata.'} />
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>A URL that references the identity provider metadata.</p>
|
||||
<IconToolTip text={'A URL that references the identity provider metadata.'} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__section`}>
|
||||
@ -282,8 +290,9 @@ class AppConfigForm extends Component {
|
||||
/>
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>The sender address for emails from Fleet.</p>
|
||||
<IconToolTip text={'The sender address for emails from Fleet.'} />
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__inputs ${baseClass}__inputs--smtp`}>
|
||||
<InputField
|
||||
{...fields.server}
|
||||
@ -301,8 +310,9 @@ class AppConfigForm extends Component {
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>The hostname / IP address and corresponding port of your organization's SMTP server.</p>
|
||||
<IconToolTip text={'The hostname / IP address and corresponding port of your organization's SMTP server.'} />
|
||||
</div>
|
||||
|
||||
<div className={`${baseClass}__inputs`}>
|
||||
<Dropdown
|
||||
{...fields.authentication_type}
|
||||
@ -312,9 +322,14 @@ class AppConfigForm extends Component {
|
||||
{renderSmtpSection()}
|
||||
</div>
|
||||
<div className={`${baseClass}__details`}>
|
||||
<p>If your mail server requires authentication, you need to specify the authentication type here.</p>
|
||||
<p><strong>No Authentication</strong> - Select this if your SMTP is open.</p>
|
||||
<p><strong>Username & Password</strong> - Select this if your SMTP server requires authentication with a username and password.</p>
|
||||
<IconToolTip
|
||||
isHtml
|
||||
text={'\
|
||||
<p>If your mail server requires authentication, you need to specify the authentication type here.</p> \
|
||||
<p><strong>No Authentication</strong> - Select this if your SMTP is open.</p> \
|
||||
<p><strong>Username & Password</strong> - Select this if your SMTP server requires authentication with a username and password.</p>\
|
||||
'}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${baseClass}__section`}>
|
||||
|
||||
@ -99,9 +99,7 @@
|
||||
float: right;
|
||||
width: 40%;
|
||||
|
||||
p {
|
||||
font-size: $x-small;
|
||||
font-style: italic;
|
||||
.icon-tooltip {
|
||||
margin: 32px 0;
|
||||
}
|
||||
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
"cypress:open": "cypress open"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/react-tooltip": "^4.2.4",
|
||||
"ace-builds": "1.3.1",
|
||||
"autoprefixer": "^9.4.3",
|
||||
"bourbon": "^5.0.0",
|
||||
@ -51,7 +52,7 @@
|
||||
"react-select": "^1",
|
||||
"react-table": "^7.6.3",
|
||||
"react-tabs": "^3.2.0",
|
||||
"react-tooltip": "^4.2.13",
|
||||
"react-tooltip": "^4.2.15",
|
||||
"redux": "4.0.5",
|
||||
"redux-mock-store": "1.4.0",
|
||||
"redux-thunk": "2.3.0",
|
||||
|
||||
15
yarn.lock
15
yarn.lock
@ -1593,6 +1593,13 @@
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-tooltip@^4.2.4":
|
||||
version "4.2.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-tooltip/-/react-tooltip-4.2.4.tgz#d0acad2a3061806e10aab91dd26a95a77fd35125"
|
||||
integrity sha512-UzjzmgY/VH3Str6DcAGTLMA1mVVhGOyARNTANExrirtp+JgxhaIOVDxq4TIRmpSi4voLv+w4HA9CC5GvhhCA0A==
|
||||
dependencies:
|
||||
react-tooltip "*"
|
||||
|
||||
"@types/react@*", "@types/react@^17.0.2":
|
||||
version "17.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.2.tgz#3de24c4efef902dd9795a49c75f760cbe4f7a5a8"
|
||||
@ -10656,10 +10663,10 @@ react-test-renderer@^16.0.0-0:
|
||||
react-is "^16.8.6"
|
||||
scheduler "^0.13.6"
|
||||
|
||||
react-tooltip@^4.2.13:
|
||||
version "4.2.13"
|
||||
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.13.tgz#908db8a41dc10ae2ae9cc1864746cde939aaab0f"
|
||||
integrity sha512-iAZ02wSxChLWb7Vnu0zeQMyAo/jiGHrwFNILWaR3pCKaFVRjKcv/B6TBI4+Xd66xLXVzLngwJ91Tf5D+mqAqVA==
|
||||
react-tooltip@*, react-tooltip@^4.2.15:
|
||||
version "4.2.15"
|
||||
resolved "https://registry.yarnpkg.com/react-tooltip/-/react-tooltip-4.2.15.tgz#ae278931a222434ae597c57aab07be215a2aa5f9"
|
||||
integrity sha512-xmVWi6N1qsrACiAquv28jhQ10igFbQX0Xk5rjSjgUPi9BAf8lCFhYpdFXe6NrEeuPrM7hdZkePa3eS2SrIRxIw==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
uuid "^7.0.3"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user