Fleet UI: Hiding tables and columns from the UI if they are set to hidden (#12298)

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

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();
   });
 

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 };
     });
 

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}>

frontend/interfaces/osquery_table.ts

@@ -42,6 +42,7 @@ export interface IOsQueryTable {
   columns: IQueryTableColumn[];
   examples?: string;
   notes?: string;
+  hidden?: boolean;
 }
 
 // Also used for testing

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;
 });