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 = ({
) : (
{showAggregate && (
-
+
)}
{
+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}
/>
);
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 && (
-
+
)}
>
);