From 0b45afcaa8bf61db5c7ee8e2b1b4489cdcca8eee Mon Sep 17 00:00:00 2001 From: jacobshandling <61553566+jacobshandling@users.noreply.github.com> Date: Wed, 3 Jul 2024 09:40:03 -0700 Subject: [PATCH] UI - update empty styles in 5 places (#20079) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Addresses #19557 Screenshot 2024-06-27 at 1 44 12 PM Screenshot 2024-06-27 at 1 44 25 PM Screenshot 2024-06-27 at 1 49 47 PM Screenshot 2024-06-27 at 1 56 56 PM Screenshot 2024-06-27 at 4 39 22 PM - [x] Changes file added for user-visible changes in `changes/`, - [x] Manual QA for all new/changed functionality --------- Co-authored-by: Jacob Shandling --- changes/19557-empty-hover-styles | 1 + .../DataTable/TextCell/TextCell.tsx | 28 ++++++------- .../TableContainer/DataTable/_styles.scss | 6 ++- .../OperatingSystemsTableConfig.tsx | 2 +- .../MdmSolutionModalTableConfig.tsx | 2 +- .../components/VersionCell/VersionCell.tsx | 12 ++---- .../VulnerabilitiesCell.tsx | 8 ++-- .../Integrations/IntegrationsTableConfig.tsx | 2 +- .../UsersPage/UsersPageTableConfig.tsx | 2 +- .../UsersTable/UsersTableConfig.tsx | 11 +++--- .../hosts/ManageHostsPage/HostTableConfig.tsx | 39 +++++++------------ .../OSSettingsTable/OSSettingsTableConfig.tsx | 2 +- .../ReportUpdatedCell/ReportUpdatedCell.tsx | 9 +++-- .../InstallStatusCell/InstallStatusCell.tsx | 2 +- 14 files changed, 56 insertions(+), 70 deletions(-) create mode 100644 changes/19557-empty-hover-styles 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];