Fix export hosts csv UI and editing hidden columns UI (#17691)

relates to #17632

fixes a UI bug that prevented exporting hosts by csv.

also updates the edit hidden columns modal to use column id instead of
accessor. Id is safer to use as we are now using a function definition
for the accessor for mdm enrollment status and mdm server URL columns.

- [x] Manual QA for all new/changed functionality

Author: ghernandez345

frontend/pages/hosts/ManageHostsPage/HostTableConfig.tsx

@@ -117,6 +117,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       <HeaderCell value="Hosts" isSortedDesc={cellProps.column.isSortedDesc} />
     ),
     accessor: "display_name",
+    id: "display_name",
     Cell: (cellProps: IHostTableStringCellProps) => {
       if (
         // if the host is pending, we want to disable the link to host details
@@ -175,6 +176,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "hostname",
+    id: "hostname",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -188,6 +190,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "computer_name",
+    id: "computer_name",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -198,6 +201,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       <HeaderCell value="Team" isSortedDesc={cellProps.column.isSortedDesc} />
     ),
     accessor: "team_name",
+    id: "team_name",
     Cell: (cellProps) => (
       <TextCell value={cellProps.cell.value} formatter={hostTeamName} />
     ),
@@ -228,6 +232,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
     },
     disableSortBy: true,
     accessor: "status",
+    id: "status",
     Cell: (cellProps: IHostTableStringCellProps) => {
       const value = cellProps.cell.value;
       const tooltip = {
@@ -241,6 +246,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
     Header: "Issues",
     disableSortBy: true,
     accessor: "issues",
+    id: "issues",
     Cell: (cellProps: IIssuesCellProps) => (
       <IssueCell
         issues={cellProps.row.original.issues}
@@ -257,6 +263,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "gigs_disk_space_available",
+    id: "gigs_disk_space_available",
     Cell: (cellProps: IHostTableNumberCellProps) => {
       const {
         id,
@@ -286,6 +293,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "os_version",
+    id: "os_version",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -299,6 +307,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "osquery_version",
+    id: "osquery_version",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -308,6 +317,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
     Header: "Used by",
     disableSortBy: true,
     accessor: "device_mapping",
+    id: "device_mapping",
     Cell: (cellProps: IDeviceUserCellProps) => {
       const numUsers = cellProps.cell.value?.length || 0;
       const users = condenseDeviceUsers(cellProps.cell.value || []);
@@ -350,6 +360,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "primary_ip",
+    id: "primary_ip",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -374,7 +385,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
     },
     disableSortBy: true,
     accessor: (originalRow) => originalRow.mdm.enrollment_status,
-    id: "mdm_enrollment_status",
+    id: "mdm.enrollment_status",
     Cell: HostMdmStatusCell,
   },
   {
@@ -397,7 +408,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
     },
     disableSortBy: true,
     accessor: (originalRow) => originalRow.mdm.server_url,
-    id: "mdm_server_url",
+    id: "mdm.server_url",
     Cell: (cellProps: IHostTableStringCellProps) => {
       if (cellProps.row.original.platform === "chrome") {
         return NotSupported;
@@ -421,6 +432,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "public_ip",
+    id: "public_ip",
     Cell: (cellProps: IHostTableStringCellProps) => {
       return (
         <TextCell value={cellProps.cell.value ?? DEFAULT_EMPTY_CELL_VALUE} />
@@ -450,6 +462,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       );
     },
     accessor: "detail_updated_at",
+    id: "detail_updated_at",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell
         value={{ timeString: cellProps.cell.value }}
@@ -480,6 +493,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       );
     },
     accessor: "seen_time",
+    id: "seen_time",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell
         value={{ timeString: cellProps.cell.value }}
@@ -493,6 +507,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       <HeaderCell value="UUID" isSortedDesc={cellProps.column.isSortedDesc} />
     ),
     accessor: "uuid",
+    id: "uuid",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TooltipTruncatedTextCell value={cellProps.cell.value} />
     ),
@@ -506,6 +521,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "last_restarted_at",
+    id: "last_restarted_at",
     Cell: (cellProps: IHostTableStringCellProps) => {
       const { platform, last_restarted_at } = cellProps.row.original;
 
@@ -527,6 +543,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
     Header: "CPU",
     disableSortBy: true,
     accessor: "cpu_type",
+    id: "cpu_type",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -537,6 +554,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       <HeaderCell value="RAM" isSortedDesc={cellProps.column.isSortedDesc} />
     ),
     accessor: "memory",
+    id: "memory",
     Cell: (cellProps: IHostTableNumberCellProps) => (
       <TextCell value={cellProps.cell.value} formatter={humanHostMemory} />
     ),
@@ -550,6 +568,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "primary_mac",
+    id: "primary_mac",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -563,6 +582,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "hardware_serial",
+    id: "hardware_serial",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -576,6 +596,7 @@ const allHostTableHeaders: IHostTableColumnConfig[] = [
       />
     ),
     accessor: "hardware_model",
+    id: "hardware_model",
     Cell: (cellProps: IHostTableStringCellProps) => (
       <TextCell value={cellProps.cell.value} />
     ),
@@ -590,8 +611,8 @@ const defaultHiddenColumns = [
   "public_ip",
   "cpu_type",
   // TODO: should those be mdm.<blah>?
-  "mdm_server_url",
-  "mdm_enrollment_status",
+  "mdm.server_url",
+  "mdm.enrollment_status",
   "memory",
   "uptime",
   "uuid",
@@ -616,17 +637,17 @@ const generateAvailableTableHeaders = ({
       // skip over column headers that are not shown in free observer tier
       if (isFreeTier && isOnlyObserver) {
         if (
-          currentColumn.accessor === "team_name" ||
+          currentColumn.id === "team_name" ||
           currentColumn.id === "selection"
         ) {
           return columns;
         }
         // skip over column headers that are not shown in free admin/maintainer
       } else if (isFreeTier) {
         if (
-          currentColumn.accessor === "team_name" ||
-          currentColumn.id === "mdm_server_url" ||
-          currentColumn.id === "mdm_enrollment_status"
+          currentColumn.id === "team_name" ||
+          currentColumn.id === "mdm.server_url" ||
+          currentColumn.id === "mdm.enrollment_status"
         ) {
           return columns;
         }
@@ -646,7 +667,6 @@ const generateAvailableTableHeaders = ({
 
 /**
  * Will generate a host table column configuration that a user currently sees.
- *
  */
 const generateVisibleTableColumns = ({
   hiddenColumns,
@@ -660,7 +680,7 @@ const generateVisibleTableColumns = ({
   // remove columns set as hidden by the user.
   return generateAvailableTableHeaders({ isFreeTier, isOnlyObserver }).filter(
     (column) => {
-      return !hiddenColumns.includes(column.accessor as string);
+      return !hiddenColumns.includes(column.id as string);
     }
   );
 };

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx

@@ -1295,10 +1295,12 @@ const ManageHostsPage = ({
         isOnlyObserver,
       });
 
-      const columnAccessors = tableColumns
-        .map((column) => (column.accessor ? column.accessor : ""))
-        .filter((element) => element);
-      visibleColumns = columnAccessors.join(",");
+      const columnIds = tableColumns
+        .map((column) => (column.id ? column.id : ""))
+        // "selection" colum does not include any relevent data for the CSV
+        // so we filter it out.
+        .filter((element) => element !== "" && element !== "selection");
+      visibleColumns = columnIds.join(",");
     }
 
     let options = {

frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx

@@ -12,17 +12,17 @@ const useCheckboxListStateManagement = (allColumns, hiddenColumns) => {
     return allColumns.map((column) => {
       return {
         name: column.title,
-        accessor: column.accessor,
-        isChecked: !hiddenColumns.includes(column.accessor),
+        id: column.id,
+        isChecked: !hiddenColumns.includes(column.id),
         disableHidden: column.disableHidden,
       };
     });
   });
 
-  const updateColumnItems = (columnAccessor) => {
+  const updateColumnItems = (columnId) => {
     setColumnItems((prevState) => {
       const selectedColumn = columnItems.find(
-        (column) => column.accessor === columnAccessor
+        (column) => column.id === columnId
       );
       const updatedColumn = {
         ...selectedColumn,
@@ -31,9 +31,7 @@ const useCheckboxListStateManagement = (allColumns, hiddenColumns) => {
 
       // this is replacing the column object with the updatedColumn we just created.
       const newState = prevState.map((currentColumn) => {
-        return currentColumn.accessor === columnAccessor
-          ? updatedColumn
-          : currentColumn;
+        return currentColumn.id === columnId ? updatedColumn : currentColumn;
       });
       return newState;
     });
@@ -45,7 +43,7 @@ const useCheckboxListStateManagement = (allColumns, hiddenColumns) => {
 const getHiddenColumns = (columns) => {
   return columns
     .filter((column) => !column.isChecked)
-    .map((column) => column.accessor);
+    .map((column) => column.id);
 };
 
 const EditColumnsModal = ({
@@ -67,11 +65,11 @@ const EditColumnsModal = ({
           {columnItems.map((column) => {
             if (column.disableHidden) return null;
             return (
-              <div key={column.accessor}>
+              <div key={column.id}>
                 <Checkbox
                   name={column.name}
                   value={column.isChecked}
-                  onChange={() => updateColumnItems(column.accessor)}
+                  onChange={() => updateColumnItems(column.id)}
                 >
                   <span>{column.name}</span>
                 </Checkbox>