Refactor StatusCell to StatusIndicator (#8854)

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

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) => <StatusCell value={cellProps.cell.value} />,
+      Cell: (cellProps) => <StatusIndicator value={cellProps.cell.value} />,
     },
     {
       title: "Private IP address",

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 ? (
     <>
       <span
         className="host-status tooltip tooltip__tooltip-icon"
@@ -48,7 +51,7 @@ const StatusCell = ({ value, tooltip }: IStatusCellProps): JSX.Element => {
   ) : (
     <>{value}</>
   );
-  return <span className={statusClassName}>{cellContent}</span>;
+  return <span className={statusClassName}>{indicatorContent}</span>;
 };
 
-export default StatusCell;
+export default StatusIndicator;

frontend/components/StatusIndicator/_styles.scss

@@ -1,4 +1,4 @@
-.data-table__status {
+.status-indicator {
   display: flex;
   align-items: center;
   color: $core-fleet-blue;

frontend/components/StatusIndicator/index.ts

@@ -0,0 +1 @@
+export { default } from "./StatusIndicator";

frontend/components/TableContainer/DataTable/StatusCell/index.ts

@@ -1 +0,0 @@
-export { default } from "./StatusCell";

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) => (
-        <StatusCell value={cellProps.cell.value} />
+        <StatusIndicator value={cellProps.cell.value} />
       ),
     },
     {

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 <StatusCell value={value} tooltip={tooltip} />;
+      return <StatusIndicator value={value} tooltip={tooltip} />;
     },
   },
   {

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 = ({
       <div className="info-flex">
         <div className="info-flex__item info-flex__item--title">
           <span className="info-flex__header">Status</span>
-          <StatusCell
+          <StatusIndicator
             value={status || ""} // temporary work around of integration test bug
             tooltip={{
               id,

frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import StatusCell from "components/TableContainer/DataTable/StatusCell";
+import StatusIndicator from "components/StatusIndicator";
 import Button from "components/buttons/Button";
 import { IHostPolicy } from "interfaces/policy";
 import { PolicyResponse } from "utilities/constants";
@@ -71,7 +71,9 @@ const generatePolicyTableHeaders = (
       accessor: "response",
       disableSortBy: true,
       Cell: (cellProps) => {
-        return <StatusCell value={getPolicyStatus(cellProps.row.original)} />;
+        return (
+          <StatusIndicator value={getPolicyStatus(cellProps.row.original)} />
+        );
       },
     },
     {

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) => <StatusCell value={cellProps.cell.value} />,
+      Cell: (cellProps) => <StatusIndicator value={cellProps.cell.value} />,
     },
   ];
   return tableHeaders;

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 => (
-        <StatusCell value={cellProps.cell.value} />
+        <StatusIndicator value={cellProps.cell.value} />
       ),
     });