From 5bf71bb658fa4dc3bdf68a4fb2acf6af864d9280 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Wed, 8 Nov 2023 15:34:59 +0000
Subject: [PATCH] Update edit columns modal to have two columns (#15000)

relates to #11665

This updates the edit column modal on the manage host page to have two
columns.


![image](https://github.com/fleetdm/fleet/assets/1153709/20d0b7fc-b3cd-4caf-84d7-27e1af00fbb3)

- [x] Changes file added for user-visible changes in `changes/` or
`orbit/changes/`.
See [Changes
files](https://fleetdm.com/docs/contributing/committing-changes#changes-files)
for more information.
- [x] Manual QA for all new/changed functionality
---
 changes/issue-11665-two-column-edit-columns-modal      |  1 +
 .../components/EditColumnsModal/EditColumnsModal.jsx   | 10 ++++------
 .../components/EditColumnsModal/_styles.scss           |  7 +++++++
 3 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 changes/issue-11665-two-column-edit-columns-modal
 create mode 100644 frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/_styles.scss

diff --git a/changes/issue-11665-two-column-edit-columns-modal b/changes/issue-11665-two-column-edit-columns-modal
new file mode 100644
index 0000000000..365a3c12b6
--- /dev/null
+++ b/changes/issue-11665-two-column-edit-columns-modal
@@ -0,0 +1 @@
+- change the edit columns modal on the hosts page to show the table headers names in two columns.
diff --git a/frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx b/frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx
index e3bcade400..56221cc833 100644
--- a/frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx
+++ b/frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/EditColumnsModal.jsx
@@ -5,6 +5,8 @@ import Modal from "components/Modal";
 import Checkbox from "../../../../../components/forms/fields/Checkbox";
 import Button from "../../../../../components/buttons/Button";
 
+const baseClass = "edit-columns-modal";
+
 const useCheckboxListStateManagement = (allColumns, hiddenColumns) => {
   const [columnItems, setColumnItems] = useState(() => {
     return allColumns.map((column) => {
@@ -58,14 +60,10 @@ const EditColumnsModal = ({
   );
 
   return (
-    <Modal
-      title="Edit columns"
-      onExit={onCancelColumns}
-      className={"edit-columns-modal"}
-    >
+    <Modal title="Edit columns" onExit={onCancelColumns} className={baseClass}>
       <>
         <p>Choose which columns you see:</p>
-        <div className={"modal-items"}>
+        <div className={`${baseClass}__column-headers`}>
           {columnItems.map((column) => {
             if (column.disableHidden) return null;
             return (
diff --git a/frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/_styles.scss b/frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/_styles.scss
new file mode 100644
index 0000000000..9b17c6a3d3
--- /dev/null
+++ b/frontend/pages/hosts/ManageHostsPage/components/EditColumnsModal/_styles.scss
@@ -0,0 +1,7 @@
+.edit-columns-modal {
+  &__column-headers {
+    display: grid;
+    grid-template-columns: 1fr 1fr ;
+    grid-column-gap: $pad-medium;
+  }
+}