diff --git a/frontend/components/LiveQuery/TargetsInput/TargetsInputHostsTableConfig.tsx b/frontend/components/LiveQuery/TargetsInput/TargetsInputHostsTableConfig.tsx index 9ad09a894b..a59e490767 100644 --- a/frontend/components/LiveQuery/TargetsInput/TargetsInputHostsTableConfig.tsx +++ b/frontend/components/LiveQuery/TargetsInput/TargetsInputHostsTableConfig.tsx @@ -6,7 +6,7 @@ import { Row } from "react-table"; import { IDataColumn } from "interfaces/datatable_config"; import TextCell from "components/TableContainer/DataTable/TextCell"; -import StatusCell from "components/TableContainer/DataTable/StatusCell/StatusCell"; +import StatusIndicator from "components/StatusIndicator"; import RemoveIcon from "../../../../assets/images/icon-action-remove-20x20@2x.png"; // NOTE: cellProps come from react-table @@ -44,7 +44,7 @@ export const generateTableHeaders = ( Header: "Status", disableSortBy: true, accessor: "status", - Cell: (cellProps) => , + Cell: (cellProps) => , }, { title: "Private IP address", diff --git a/frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx b/frontend/components/StatusIndicator/StatusIndicator.tsx similarity index 74% rename from frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx rename to frontend/components/StatusIndicator/StatusIndicator.tsx index 60bf7895da..d71c32a0cd 100644 --- a/frontend/components/TableContainer/DataTable/StatusCell/StatusCell.tsx +++ b/frontend/components/StatusIndicator/StatusIndicator.tsx @@ -2,7 +2,7 @@ import React from "react"; import classnames from "classnames"; import ReactTooltip from "react-tooltip"; -interface IStatusCellProps { +interface IStatusIndicatorProps { value: string; tooltip?: { id: number; @@ -17,14 +17,17 @@ const generateClassTag = (rawValue: string): string => { return rawValue.replace(" ", "-").toLowerCase(); }; -const StatusCell = ({ value, tooltip }: IStatusCellProps): JSX.Element => { +const StatusIndicator = ({ + value, + tooltip, +}: IStatusIndicatorProps): JSX.Element => { const classTag = generateClassTag(value); const statusClassName = classnames( - "data-table__status", - `data-table__status--${classTag}`, + "status-indicator", + `status-indicator--${classTag}`, `status--${classTag}` ); - const cellContent = tooltip ? ( + const indicatorContent = tooltip ? ( <> { ) : ( <>{value} ); - return {cellContent}; + return {indicatorContent}; }; -export default StatusCell; +export default StatusIndicator; diff --git a/frontend/components/TableContainer/DataTable/StatusCell/_styles.scss b/frontend/components/StatusIndicator/_styles.scss similarity index 98% rename from frontend/components/TableContainer/DataTable/StatusCell/_styles.scss rename to frontend/components/StatusIndicator/_styles.scss index 1012c8c510..760a199446 100644 --- a/frontend/components/TableContainer/DataTable/StatusCell/_styles.scss +++ b/frontend/components/StatusIndicator/_styles.scss @@ -1,4 +1,4 @@ -.data-table__status { +.status-indicator { display: flex; align-items: center; color: $core-fleet-blue; diff --git a/frontend/components/StatusIndicator/index.ts b/frontend/components/StatusIndicator/index.ts new file mode 100644 index 0000000000..5342fad75a --- /dev/null +++ b/frontend/components/StatusIndicator/index.ts @@ -0,0 +1 @@ +export { default } from "./StatusIndicator"; diff --git a/frontend/components/TableContainer/DataTable/StatusCell/index.ts b/frontend/components/TableContainer/DataTable/StatusCell/index.ts deleted file mode 100644 index 60cc7d01e8..0000000000 --- a/frontend/components/TableContainer/DataTable/StatusCell/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./StatusCell"; diff --git a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx index 139f460652..ca6603f528 100644 --- a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx +++ b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTableConfig.tsx @@ -1,7 +1,7 @@ import React from "react"; import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell"; -import StatusCell from "components/TableContainer/DataTable/StatusCell/StatusCell"; +import StatusIndicator from "components/StatusIndicator"; import TextCell from "components/TableContainer/DataTable/TextCell/TextCell"; import { IInvite } from "interfaces/invite"; import { IUser } from "interfaces/user"; @@ -94,7 +94,7 @@ const generateTableHeaders = ( ), accessor: "status", Cell: (cellProps: ICellProps) => ( - + ), }, { diff --git a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx index 014d15d39c..5f41c73180 100644 --- a/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx +++ b/frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx @@ -11,7 +11,7 @@ import DiskSpaceGraph from "components/DiskSpaceGraph"; import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell"; import IssueCell from "components/TableContainer/DataTable/IssueCell/IssueCell"; import LinkCell from "components/TableContainer/DataTable/LinkCell/LinkCell"; -import StatusCell from "components/TableContainer/DataTable/StatusCell/StatusCell"; +import StatusIndicator from "components/StatusIndicator"; import TextCell from "components/TableContainer/DataTable/TextCell/TextCell"; import TooltipWrapper from "components/TooltipWrapper"; import { @@ -218,7 +218,7 @@ const allHostTableHeaders: IDataColumn[] = [ id: cellProps.row.original.id, tooltipText: getHostStatusTooltipText(value), }; - return ; + return ; }, }, { diff --git a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx index 5f532c8a0e..3e93a8ca5e 100644 --- a/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx +++ b/frontend/pages/hosts/details/cards/HostSummary/HostSummary.tsx @@ -11,8 +11,7 @@ import { wrapFleetHelper, } from "utilities/helpers"; import getHostStatusTooltipText from "pages/hosts/helpers"; -import StatusCell from "components/TableContainer/DataTable/StatusCell"; -// TODO: Refactor StatusCell into smaller non-table-specific StatusIndicator component to be wrapped by StatusCell +import StatusIndicator from "components/StatusIndicator"; import IssueIcon from "../../../../../../assets/images/icon-issue-fleet-black-50-16x16@2x.png"; const baseClass = "host-summary"; @@ -137,7 +136,7 @@ const HostSummary = ({
Status - { - return ; + return ( + + ); }, }, { diff --git a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTableConfig.tsx b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTableConfig.tsx index 8beaab8847..8873cfce35 100644 --- a/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTableConfig.tsx +++ b/frontend/pages/packs/ManagePacksPage/components/PacksTable/PacksTableConfig.tsx @@ -8,7 +8,7 @@ import format from "date-fns/format"; // @ts-ignore import Checkbox from "components/forms/fields/Checkbox"; import LinkCell from "components/TableContainer/DataTable/LinkCell/LinkCell"; -import StatusCell from "components/TableContainer/DataTable/StatusCell/StatusCell"; +import StatusIndicator from "components/StatusIndicator"; import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell"; import TextCell from "components/TableContainer/DataTable/TextCell"; @@ -148,7 +148,7 @@ const generateTableHeaders = (): IDataColumn[] => { Header: "Status", disableSortBy: true, accessor: "status", - Cell: (cellProps) => , + Cell: (cellProps) => , }, ]; return tableHeaders; diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx index 83503048c8..8520a66f14 100644 --- a/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx +++ b/frontend/pages/policies/ManagePoliciesPage/components/PoliciesTable/PoliciesTableConfig.tsx @@ -7,7 +7,7 @@ import ReactTooltip from "react-tooltip"; // @ts-ignore import Checkbox from "components/forms/fields/Checkbox"; import LinkCell from "components/TableContainer/DataTable/LinkCell/LinkCell"; -import StatusCell from "components/TableContainer/DataTable/StatusCell/StatusCell"; +import StatusIndicator from "components/StatusIndicator"; import { IPolicyStats } from "interfaces/policy"; import PATHS from "router/paths"; import sortUtils from "utilities/sort"; @@ -204,7 +204,7 @@ const generateTableHeaders = (options: { disableSortBy: true, accessor: "webhook", Cell: (cellProps: ICellProps): JSX.Element => ( - + ), });