Fleet UI: Update compatibility tooltips (#37810)
## Issue Closes #34131 ## Description - Android tooltip was there just commented out - Added in tooltip on ChromeOS - Improve UX so user can click on save button easier if they opened tooltip and won't have to hover off tooltip for it to close ## Screen recording of fixes https://github.com/user-attachments/assets/29e81596-45b4-437c-a58f-0db7a0d013db # Checklist for submitter ## Testing - [x] QA'd all new/changed functionality manually
This commit is contained in:
@@ -48,28 +48,11 @@ const displayIncompatibilityText = (err: Error) => {
|
||||
}
|
||||
};
|
||||
|
||||
// const tipContent = (
|
||||
// <>
|
||||
// Estimated compatibility based on the <br />
|
||||
// tables used in the query. Querying <br />
|
||||
// iPhones, iPads, and Android hosts is not <br />
|
||||
// supported.
|
||||
// </>
|
||||
// );
|
||||
|
||||
// TODO(android): replace with the above tipContent when Android feature flag is removed
|
||||
const tipContent = (
|
||||
<>
|
||||
Estimated compatibility based on the <br />
|
||||
tables used in the query. Check the <br />
|
||||
table documentation (schema) to verify <br />
|
||||
compatibility of individual columns.
|
||||
<br />
|
||||
<br />
|
||||
Only live queries are supported on ChromeOS.
|
||||
<br />
|
||||
<br />
|
||||
Querying iPhones & iPads is not supported.
|
||||
Estimated compatibility based on the tables <br />
|
||||
used in the query. Querying iPhones, iPads, <br />
|
||||
and Android hosts is not supported.
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -90,6 +73,15 @@ const PlatformCompatibility = ({
|
||||
|
||||
return DISPLAY_ORDER.map((platform) => {
|
||||
const isCompatible = displayPlatforms.includes(platform);
|
||||
|
||||
const liveQueryOnlyPlatform = (
|
||||
<TooltipWrapper
|
||||
tipContent={`Only live queries are supported on ${platform}.`}
|
||||
>
|
||||
{platform}
|
||||
</TooltipWrapper>
|
||||
);
|
||||
|
||||
return (
|
||||
<span key={`platform-compatibility__${platform}`} className="platform">
|
||||
<Icon
|
||||
@@ -100,7 +92,7 @@ const PlatformCompatibility = ({
|
||||
color={isCompatible ? "status-success" : "status-error"}
|
||||
size="small"
|
||||
/>
|
||||
{platform}
|
||||
{platform === "ChromeOS" ? liveQueryOnlyPlatform : platform}
|
||||
</span>
|
||||
);
|
||||
});
|
||||
@@ -109,7 +101,7 @@ const PlatformCompatibility = ({
|
||||
return (
|
||||
<div className={baseClass}>
|
||||
<b>
|
||||
<TooltipWrapper tipContent={tipContent}>
|
||||
<TooltipWrapper tipContent={tipContent} clickable={false}>
|
||||
Compatible with:
|
||||
</TooltipWrapper>
|
||||
</b>
|
||||
|
||||
Reference in New Issue
Block a user