diff --git a/changes/19557-empty-hover-styles b/changes/19557-empty-hover-styles
new file mode 100644
index 0000000000..20c046c0c7
--- /dev/null
+++ b/changes/19557-empty-hover-styles
@@ -0,0 +1 @@
+* Update empty state styles in 4 places, clean up
diff --git a/frontend/components/TableContainer/DataTable/TextCell/TextCell.tsx b/frontend/components/TableContainer/DataTable/TextCell/TextCell.tsx
index 7c36f8123f..1761cd4114 100644
--- a/frontend/components/TableContainer/DataTable/TextCell/TextCell.tsx
+++ b/frontend/components/TableContainer/DataTable/TextCell/TextCell.tsx
@@ -1,26 +1,26 @@
+import classnames from "classnames";
import { uniqueId } from "lodash";
import React from "react";
import ReactTooltip from "react-tooltip";
import { COLORS } from "styles/var/colors";
import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
+const baseClass = "text-cell";
interface ITextCellProps {
value?: string | number | boolean | { timeString: string } | null;
formatter?: (val: any) => React.ReactNode; // string, number, or null
- /** adds a greyed styling to the cell. This will italicise and add a grey
- * color to the cell text.
- * @default false
- */
- greyed?: boolean;
- classes?: string;
+ grey?: boolean;
+ italic?: boolean;
+ className?: string;
emptyCellTooltipText?: React.ReactNode;
}
const TextCell = ({
value,
formatter = (val) => val, // identity function if no formatter is provided
- greyed = false,
- classes = "w250",
+ grey = false,
+ italic = false,
+ className = "w250",
emptyCellTooltipText,
}: ITextCellProps) => {
let val = value;
@@ -43,7 +43,7 @@ const TextCell = ({
formattedValue === "";
if (isEmptyValue) {
- greyed = true;
+ [grey, italic] = [true, true];
}
const renderEmptyCell = () => {
@@ -70,11 +70,11 @@ const TextCell = ({
const cellText = isEmptyValue ? renderEmptyCell() : formattedValue;
- return (
-
- {cellText}
-
- );
+ const cellClasses = classnames(baseClass, className, {
+ "grey-cell": grey,
+ "italic-cell": italic,
+ });
+ return {cellText};
};
export default TextCell;
diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss
index 51cbec6754..230ac590e3 100644
--- a/frontend/components/TableContainer/DataTable/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/_styles.scss
@@ -276,13 +276,15 @@ $shadow-transition-width: 10px;
min-width: 100%;
text-align: left;
}
- .grey-cell {
- color: $ui-fleet-black-50;
+ .italic-cell {
font-style: italic;
.__react_component_tooltip {
font-style: normal;
}
}
+ .grey-cell {
+ color: $ui-fleet-black-50;
+ }
}
.disable-highlight:hover {
diff --git a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx
index 71015829b6..f5a5292217 100644
--- a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx
+++ b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx
@@ -108,7 +108,7 @@ const generateDefaultTableHeaders = (
Cell: (cellProps: IVulnCellProps) => {
const platform = cellProps.row.original.platform;
if (platform !== "darwin" && platform !== "windows") {
- return ;
+ return ;
}
return ;
},
diff --git a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx
index faa750117f..6cd80161e5 100644
--- a/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx
+++ b/frontend/pages/DashboardPage/components/MdmSolutionModal/MdmSolutionModalTableConfig.tsx
@@ -73,7 +73,7 @@ export const generateSolutionsTableHeaders = (
accessor: "hosts_count",
Cell: (cellProps: ICellProps) => (
-
+
(versions: T[] | null) => {
if (!versions) {
- return ;
+ return ;
}
const text =
versions.length !== 1 ? `${versions.length} versions` : versions[0].version;
- return ;
+ return ;
};
interface IVersionCellProps {
@@ -29,11 +27,7 @@ const VersionCell = ({
return (
- {versions.map((version) => version.version).join(", ")}
-
- }
+ tipContent={<>{versions.map((version) => version.version).join(", ")}>}
tipOffset={14}
position="top"
showArrow
diff --git a/frontend/pages/SoftwarePage/components/VulnerabilitiesCell/VulnerabilitiesCell.tsx b/frontend/pages/SoftwarePage/components/VulnerabilitiesCell/VulnerabilitiesCell.tsx
index 8099012326..2fd45edfbd 100644
--- a/frontend/pages/SoftwarePage/components/VulnerabilitiesCell/VulnerabilitiesCell.tsx
+++ b/frontend/pages/SoftwarePage/components/VulnerabilitiesCell/VulnerabilitiesCell.tsx
@@ -13,15 +13,15 @@ const generateCell = (
vulnerabilities: ISoftwareVulnerability[] | string[] | null
) => {
if (vulnerabilities === null) {
- return ;
+ return ;
}
let text = "";
- let isGrayed = true;
+ let italicize = true;
if (vulnerabilities.length === 0) {
text = "---";
} else if (vulnerabilities.length === 1) {
- isGrayed = false;
+ italicize = false;
text =
typeof vulnerabilities[0] === "string"
? vulnerabilities[0]
@@ -30,7 +30,7 @@ const generateCell = (
text = `${vulnerabilities.length} vulnerabilities`;
}
- return ;
+ return ;
};
const getName = (vulnerabiltiy: ISoftwareVulnerability | string) => {
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx b/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx
index 09a707a5b5..13eeb8737f 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Integrations/IntegrationsTableConfig.tsx
@@ -90,7 +90,7 @@ const generateTableHeaders = (
sortType: "caseInsensitive",
accessor: "name",
Cell: (cellProps: ICellProps) => (
-
+
),
},
{
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPageTableConfig.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPageTableConfig.tsx
index 7d3b12e7ba..20d166e251 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPageTableConfig.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPageTableConfig.tsx
@@ -166,7 +166,7 @@ const generateColumnConfigs = (
disableSortBy: true,
accessor: "email",
Cell: (cellProps: ICellProps) => (
-
+
),
},
{
diff --git a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx
index 0ac27a189c..bb6788b012 100644
--- a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx
@@ -163,10 +163,12 @@ const generateTableHeaders = (
);
}
+ const greyAndItalic = greyCell(cellProps.cell.value);
return (
);
},
@@ -210,7 +212,7 @@ const generateTableHeaders = (
},
];
- // Add Teams tab for premium tier only
+ // Add Teams column for premium tier
if (isPremiumTier) {
tableHeaders.splice(2, 0, {
title: "Teams",
@@ -218,10 +220,7 @@ const generateTableHeaders = (
accessor: "teams",
disableSortBy: true,
Cell: (cellProps: ICellProps) => (
-
+
),
});
}
diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
index e37aa3851a..fa52ec67b7 100644
--- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx
@@ -345,34 +345,23 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
Cell: (cellProps: IDeviceUserCellProps) => {
const numUsers = cellProps.cell.value?.length || 0;
const users = condenseDeviceUsers(cellProps.cell.value || []);
- if (users.length) {
- const tooltipText = tooltipTextWithLineBreaks(users);
+ if (users.length > 1) {
return (
- <>
- 1 ? "text-muted tooltip" : ""
- }`}
- data-tip
- data-for={`device_mapping__${cellProps.row.original.id}`}
- data-tip-disable={users.length <= 1}
- >
- {numUsers === 1 ? users[0] : `${numUsers} users`}
-
-
- {tooltipText}
-
- >
+
+
+
);
}
- return {DEFAULT_EMPTY_CELL_VALUE};
+ if (users.length === 1) {
+ return ;
+ }
+ return ;
},
},
{
diff --git a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx
index ea3c969a32..badef6d0b7 100644
--- a/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx
+++ b/frontend/pages/hosts/details/OSSettingsModal/OSSettingsTable/OSSettingsTableConfig.tsx
@@ -55,7 +55,7 @@ const generateTableConfig = (
return (
);
},
diff --git a/frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/ReportUpdatedCell.tsx b/frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/ReportUpdatedCell.tsx
index 80516b6d88..61a4083120 100644
--- a/frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/ReportUpdatedCell.tsx
+++ b/frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/ReportUpdatedCell.tsx
@@ -34,7 +34,7 @@ const ReportUpdatedCell = ({
// query runs, sends results to a logging dest, doesn't cache
return (
{
const tooltipId = uniqueId();
return (
@@ -87,8 +87,9 @@ const ReportUpdatedCell = ({
>
)}
- greyed
- classes={`${baseClass}__value`}
+ grey
+ italic
+ className={`${baseClass}__value`}
/>
);
}
@@ -101,7 +102,7 @@ const ReportUpdatedCell = ({
// last_fetched will be truthy at this point
value={{ timeString: last_fetched ?? "" }}
formatter={HumanTimeDiffWithFleetLaunchCutoff}
- classes={`${baseClass}__value`}
+ className={`${baseClass}__value`}
/>
>
);
diff --git a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
index e1f64c857d..8dfceee721 100644
--- a/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
+++ b/frontend/pages/hosts/details/cards/Software/InstallStatusCell/InstallStatusCell.tsx
@@ -96,7 +96,7 @@ const InstallStatusCell = ({
} else if (softwareName) {
displayStatus = "avaiableForInstall";
} else {
- return ;
+ return ;
}
const displayConfig = INSTALL_STATUS_DISPLAY_OPTIONS[displayStatus];