Fleet UI: Small fixes (e.g. hiding last_fetched filter, hide Edit query button for observers) (#14410)

frontend/components/TableContainer/DataTable/DefaultColumnFilter/DefaultColumnFilter.tsx

@@ -8,6 +8,11 @@ const DefaultColumnFilter = ({
 }: FilterProps<TableInstance>): JSX.Element => {
   const { setFilter } = column;
 
+  // Remove last_fetched filter per design as it is confusing to filter by a non-displayed date-string
+  if (column.id === "last_fetched") {
+    return <></>;
+  }
+
   return (
     <div className={"filter-cell"}>
       <SearchField

frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx

@@ -170,15 +170,17 @@ const QueryDetailsPage = ({
                 </p>
               </div>
               <div className={`${baseClass}__action-button-container`}>
-                <Button
-                  onClick={() => {
-                    queryId && router.push(PATHS.EDIT_QUERY(queryId));
-                  }}
-                  className={`${baseClass}__manage-automations button`}
-                  variant="brand"
-                >
-                  {canEditQuery ? "Edit query" : "More details"}
-                </Button>
+                {canEditQuery && (
+                  <Button
+                    onClick={() => {
+                      queryId && router.push(PATHS.EDIT_QUERY(queryId));
+                    }}
+                    className={`${baseClass}__manage-automations button`}
+                    variant="brand"
+                  >
+                    Edit query
+                  </Button>
+                )}
                 {(lastEditedQueryObserverCanRun ||
                   isObserverPlus ||
                   isAnyTeamObserverPlus ||

frontend/pages/queries/details/QueryDetailsPage/_styles.scss

@@ -7,6 +7,7 @@
   &__title-bar {
     display: flex;
     justify-content: space-between;
+    margin-top: $pad-small;
 
     .name-description {
       display: flex;

frontend/pages/queries/details/components/QueryReport/QueryReportTableConfig.tsx

@@ -76,13 +76,13 @@ const generateResultsTableHeaders = (results: any[]): Column[] => {
       ),
       accessor: key as string,
       Cell: (cellProps: ICellProps) => {
-        // Filters chronologically by date, but UI displays readable last fetched
+        // Sorts chronologically by date, but UI displays readable last fetched
         if (cellProps.column.id === "last_fetched") {
           return humanHostLastSeen(cellProps?.cell?.value);
         }
         return cellProps?.cell?.value || null;
       },
-      Filter: DefaultColumnFilter,
+      Filter: DefaultColumnFilter, // Component hides filter for last_fetched
       filterType: "text",
       disableSortBy: false,
     };

frontend/pages/queries/details/components/QueryReport/_styles.scss

@@ -3,6 +3,12 @@
     .host_id__header {
       width: 95px; // Min width for 6 digits host IDs
     }
+
+    .last_fetched__header {
+      .column-header {
+        margin-bottom: 44px; // Fills space where filter is removed
+      }
+    }
   }
 
   &__results-cta {