From eefd81233f2d75fc5bd590ae0d6145a5d9df70c9 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 16 Jun 2023 11:38:52 -0400
Subject: [PATCH] Fleet UI: Hiding tables and columns from the UI if they are
 set to hidden (#12298)

---
 changes/11655-hide-osquery-table-info         |  1 +
 .../QuerySidePanel/QuerySidePanel.tests.tsx   |  6 +++---
 .../QuerySidePanel/QuerySidePanel.tsx         |  2 +-
 .../QueryTableColumns/QueryTableColumns.tsx   | 20 ++++++++++---------
 frontend/interfaces/osquery_table.ts          |  1 +
 frontend/utilities/osquery_tables.ts          |  3 ++-
 6 files changed, 19 insertions(+), 14 deletions(-)
 create mode 100644 changes/11655-hide-osquery-table-info

diff --git a/changes/11655-hide-osquery-table-info b/changes/11655-hide-osquery-table-info
new file mode 100644
index 0000000000..abb6d9b3dc
--- /dev/null
+++ b/changes/11655-hide-osquery-table-info
@@ -0,0 +1 @@
+- Hide any osquery tables or columns from Fleet UI that has hidden set to true to match Fleet website
diff --git a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.tsx b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.tsx
index fcc4124e40..6c1c7b727a 100644
--- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.tsx
+++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tests.tsx
@@ -38,7 +38,7 @@ describe("QuerySidePanel - component", () => {
     expect(platformCompatibility).toHaveTextContent(/chromeos/i);
   });
 
-  it("renders the correct number of columns", () => {
+  it("renders the correct number of columns including hiding columns set to hidden", () => {
     const { container } = render(
       <QuerySidePanel
         selectedOsqueryTable={createMockOsqueryTable()}
@@ -48,7 +48,7 @@ describe("QuerySidePanel - component", () => {
     );
 
     const platformList = container.getElementsByClassName("column-list-item");
-    expect(platformList.length).toBe(13);
+    expect(platformList.length).toBe(11); // 2 columns are set to hidden
   });
 
   it("renders the platform specific column tooltip", () => {
@@ -60,7 +60,7 @@ describe("QuerySidePanel - component", () => {
       />
     );
 
-    const tooltip = screen.getByText(/only available on windows/i);
+    const tooltip = screen.getByText(/only available on chrome/i);
     expect(tooltip).toBeInTheDocument();
   });
 
diff --git a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tsx b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tsx
index aaaffa98f4..06fd6dd3f4 100644
--- a/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tsx
+++ b/frontend/components/side_panels/QuerySidePanel/QuerySidePanel.tsx
@@ -47,7 +47,7 @@ const QuerySidePanel = ({
   };
 
   const renderTableSelect = () => {
-    const tableNames = osqueryTableNames?.map((tableName: string) => {
+    const tableNames = osqueryTableNames.map((tableName: string) => {
       return { label: tableName, value: tableName };
     });
 
diff --git a/frontend/components/side_panels/QuerySidePanel/QueryTableColumns/QueryTableColumns.tsx b/frontend/components/side_panels/QuerySidePanel/QueryTableColumns/QueryTableColumns.tsx
index 4f3f5f4c9b..a1454324f0 100644
--- a/frontend/components/side_panels/QuerySidePanel/QueryTableColumns/QueryTableColumns.tsx
+++ b/frontend/components/side_panels/QuerySidePanel/QueryTableColumns/QueryTableColumns.tsx
@@ -35,15 +35,17 @@ const baseClass = "query-table-columns";
 const QueryTableColumns = ({ columns }: IQueryTableColumnsProps) => {
   const { selectedOsqueryTable } = useContext(QueryContext);
 
-  const columnListItems = orderColumns(columns).map((column) => {
-    return (
-      <ColumnListItem
-        key={column.name}
-        column={column}
-        selectedTableName={selectedOsqueryTable.name}
-      />
-    );
-  });
+  const columnListItems = orderColumns(columns)
+    .filter((column) => !column.hidden)
+    .map((column) => {
+      return (
+        <ColumnListItem
+          key={column.name}
+          column={column}
+          selectedTableName={selectedOsqueryTable.name}
+        />
+      );
+    });
 
   return (
     <div className={baseClass}>
diff --git a/frontend/interfaces/osquery_table.ts b/frontend/interfaces/osquery_table.ts
index 14480d5f8a..289f5a43aa 100644
--- a/frontend/interfaces/osquery_table.ts
+++ b/frontend/interfaces/osquery_table.ts
@@ -42,6 +42,7 @@ export interface IOsQueryTable {
   columns: IQueryTableColumn[];
   examples?: string;
   notes?: string;
+  hidden?: boolean;
 }
 
 // Also used for testing
diff --git a/frontend/utilities/osquery_tables.ts b/frontend/utilities/osquery_tables.ts
index e8661a890f..ea0de23953 100644
--- a/frontend/utilities/osquery_tables.ts
+++ b/frontend/utilities/osquery_tables.ts
@@ -11,6 +11,7 @@ export const osqueryTables = queryTable.sort((a, b) => {
   return a.name >= b.name ? 1 : -1;
 });
 
+// Note: Hiding tables where key hidden is set to true
 export const osqueryTableNames = flatMap(osqueryTables, (table) => {
-  return table.name;
+  return table.hidden ? [] : table.name;
 });