From a97e6efb7957911eba762d679996f7a660fa4445 Mon Sep 17 00:00:00 2001
From: jacobshandling <61553566+jacobshandling@users.noreply.github.com>
Date: Fri, 25 Oct 2024 09:16:04 -0700
Subject: [PATCH] Enable full-row clickability on the disk encryption table
 (#23220)

## #23219

https://www.loom.com/share/d59be837e3f842288c2d259745ad49dc


- [x] Changes file added for user-visible changes in `changes/`
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 changes/23219                                 |  1 +
 .../cards/DiskEncryption/DiskEncryption.tsx   |  8 +++-
 .../DiskEncryptionTable.tsx                   | 41 ++++++++++++++++++-
 .../DiskEncryptionTableConfig.tsx             | 13 +-----
 4 files changed, 49 insertions(+), 14 deletions(-)
 create mode 100644 changes/23219

diff --git a/changes/23219 b/changes/23219
new file mode 100644
index 0000000000..ea0982ba0e
--- /dev/null
+++ b/changes/23219
@@ -0,0 +1 @@
+* Make entire rows of the Disk encryption table clickable
\ No newline at end of file
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx
index 32eed3d38c..ac0d42d06c 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx
@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import { useQuery } from "react-query";
+import { InjectedRouter } from "react-router";
 
 import { AppContext } from "context/app";
 import { NotificationContext } from "context/notification";
@@ -21,11 +22,13 @@ const baseClass = "disk-encryption";
 interface IDiskEncryptionProps {
   currentTeamId: number;
   onMutation: () => void;
+  router: InjectedRouter;
 }
 
 const DiskEncryption = ({
   currentTeamId,
   onMutation,
+  router,
 }: IDiskEncryptionProps) => {
   const { isPremiumTier, config, setConfig } = useContext(AppContext);
   const { renderFlash } = useContext(NotificationContext);
@@ -123,7 +126,10 @@ const DiskEncryption = ({
           ) : (
             <div className="disk-encryption-content">
               {showAggregate && (
-                <DiskEncryptionTable currentTeamId={currentTeamId} />
+                <DiskEncryptionTable
+                  currentTeamId={currentTeamId}
+                  router={router}
+                />
               )}
               <Checkbox
                 onChange={onToggleCheckbox}
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTable.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTable.tsx
index 1b02a67841..75391fa7f5 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTable.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTable.tsx
@@ -1,7 +1,14 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { useQuery } from "react-query";
+import { Row } from "react-table";
+import { InjectedRouter } from "react-router";
+
+import PATHS from "router/paths";
+
+import { buildQueryStringFromParams } from "utilities/url";
 
 import mdmAPI, { IDiskEncryptionSummaryResponse } from "services/entities/mdm";
+import { HOSTS_QUERY_PARAMS } from "services/entities/hosts";
 
 import TableContainer from "components/TableContainer";
 import EmptyTable from "components/EmptyTable";
@@ -10,15 +17,27 @@ import DataError from "components/DataError";
 import {
   generateTableHeaders,
   generateTableData,
+  IStatusCellValue,
 } from "./DiskEncryptionTableConfig";
 
 const baseClass = "disk-encryption-table";
 
 interface IDiskEncryptionTableProps {
   currentTeamId?: number;
+  router: InjectedRouter;
+}
+interface IDiskEncryptionRowProps extends Row {
+  original: {
+    id?: number;
+    status?: IStatusCellValue;
+    teamId?: number;
+  };
 }
 
-const DiskEncryptionTable = ({ currentTeamId }: IDiskEncryptionTableProps) => {
+const DiskEncryptionTable = ({
+  currentTeamId,
+  router,
+}: IDiskEncryptionTableProps) => {
   const {
     data: diskEncryptionStatusData,
     error: diskEncryptionStatusError,
@@ -31,6 +50,21 @@ const DiskEncryptionTable = ({ currentTeamId }: IDiskEncryptionTableProps) => {
     }
   );
 
+  const onSelectSingleRow = useCallback(
+    (row: IDiskEncryptionRowProps) => {
+      const { status, teamId } = row.original;
+
+      const queryParams = {
+        [HOSTS_QUERY_PARAMS.DISK_ENCRYPTION]: status?.value,
+        team_id: teamId,
+      };
+      const endpoint = PATHS.MANAGE_HOSTS;
+      const path = `${endpoint}?${buildQueryStringFromParams(queryParams)}`;
+      router.push(path);
+    },
+    [router]
+  );
+
   const tableHeaders = generateTableHeaders();
   const tableData = generateTableData(diskEncryptionStatusData, currentTeamId);
 
@@ -60,6 +94,9 @@ const DiskEncryptionTable = ({ currentTeamId }: IDiskEncryptionTableProps) => {
               catches up."
           />
         )}
+        // these 2 properties allow linking on click anywhere in the row
+        disableMultiRowSelect
+        onSelectSingleRow={onSelectSingleRow}
       />
     </div>
   );
diff --git a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTableConfig.tsx b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTableConfig.tsx
index a5522d011c..1eddba30ad 100644
--- a/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTableConfig.tsx
+++ b/frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/components/DiskEncryptionTable/DiskEncryptionTableConfig.tsx
@@ -5,7 +5,6 @@ import {
   IDiskEncryptionStatusAggregate,
   IDiskEncryptionSummaryResponse,
 } from "services/entities/mdm";
-import { HOSTS_QUERY_PARAMS } from "services/entities/hosts";
 
 import TextCell from "components/TableContainer/DataTable/TextCell";
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell";
@@ -13,7 +12,7 @@ import StatusIndicatorWithIcon from "components/StatusIndicatorWithIcon";
 import ViewAllHostsLink from "components/ViewAllHostsLink";
 import { IndicatorStatus } from "components/StatusIndicatorWithIcon/StatusIndicatorWithIcon";
 
-interface IStatusCellValue {
+export interface IStatusCellValue {
   displayName: string;
   statusName: IndicatorStatus;
   value: DiskEncryptionStatus;
@@ -118,15 +117,7 @@ const defaultTableHeaders: IDataColumn[] = [
       return (
         <>
           {cellProps.row.original && (
-            <ViewAllHostsLink
-              className="view-hosts-link"
-              queryParams={{
-                [HOSTS_QUERY_PARAMS.DISK_ENCRYPTION]:
-                  cellProps.row.original.status.value,
-                team_id: cellProps.row.original.teamId,
-              }}
-              rowHover
-            />
+            <ViewAllHostsLink className="view-hosts-link" rowHover noLink />
           )}
         </>
       );