14415 - Loose ends 2 (#15595)

## Addresses #15011 

- Sort host details > queries list by query name
- Update shape of expected response from HQR call to schedulable query
API
- Shorten the 'clipped' banner's message for Observers and Observers+
- Update tooltips in RevealButton

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

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/components/TeamsDropdown/_styles.scss

@@ -73,10 +73,6 @@
 
     .Select-arrow-zone {
       padding-left: 15px;
-      svg {
-        position: relative;
-        top: 3px;
-      }
     }
 
     .Select-multi-value-wrapper {

frontend/components/buttons/RevealButton/RevealButton.tests.tsx

@@ -1,12 +1,11 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { renderWithSetup } from "test/test-utils";
 
 import RevealButton from "./RevealButton";
 
 const SHOW_TEXT = "Show advanced options";
 const HIDE_TEXT = "Hide advanced options";
-const TOOLTIP_HTML = "Customize logging type and platforms";
+const TOOLTIP_CONTENT = "Customize logging type and platforms";
 
 describe("Reveal button", () => {
   it("renders show text", async () => {
@@ -75,18 +74,18 @@ describe("Reveal button", () => {
   });
 
   it("renders tooltip on hover if provided", async () => {
-    const { user } = renderWithSetup(
+    render(
       <RevealButton
         isShowing={false}
         hideText={HIDE_TEXT}
         showText={SHOW_TEXT}
         caretPosition={"before"}
-        tooltipHtml={TOOLTIP_HTML}
+        tooltipContent={TOOLTIP_CONTENT}
       />
     );
 
     await fireEvent.mouseEnter(screen.getByText(SHOW_TEXT));
 
-    expect(screen.getByText(TOOLTIP_HTML)).toBeInTheDocument();
+    expect(screen.getByText(TOOLTIP_CONTENT)).toBeInTheDocument();
   });
 });

frontend/components/buttons/RevealButton/RevealButton.tsx

@@ -12,7 +12,7 @@ export interface IRevealButtonProps {
   caretPosition?: "before" | "after";
   autofocus?: boolean;
   disabled?: boolean;
-  tooltipHtml?: string;
+  tooltipContent?: React.ReactNode;
   onClick?:
     | ((value?: any) => void)
     | ((evt: React.MouseEvent<HTMLButtonElement>) => void);
@@ -28,7 +28,7 @@ const RevealButton = ({
   caretPosition,
   autofocus,
   disabled,
-  tooltipHtml,
+  tooltipContent,
   onClick,
 }: IRevealButtonProps): JSX.Element => {
   const classNames = classnames(baseClass, className);
@@ -36,8 +36,8 @@ const RevealButton = ({
   const buttonContent = () => {
     const text = isShowing ? hideText : showText;
 
-    const buttonText = tooltipHtml ? (
-      <TooltipWrapper tipContent={tooltipHtml}>{text}</TooltipWrapper>
+    const buttonText = tooltipContent ? (
+      <TooltipWrapper tipContent={tooltipContent}>{text}</TooltipWrapper>
     ) : (
       text
     );

frontend/pages/hosts/details/HostQueryReport/HostQueryReport.tsx

@@ -4,7 +4,10 @@ import MainContent from "components/MainContent";
 import ShowQueryModal from "components/modals/ShowQueryModal";
 import Spinner from "components/Spinner";
 import { AppContext } from "context/app";
-import { ISchedulableQuery } from "interfaces/schedulable_query";
+import {
+  IGetQueryResponse,
+  ISchedulableQuery,
+} from "interfaces/schedulable_query";
 import React, { useCallback, useContext, useState } from "react";
 import { useQuery } from "react-query";
 import { browserHistory, InjectedRouter, Link } from "react-router";
@@ -55,10 +58,12 @@ const HostQueryReport = ({
     isLoading: queryLoading,
     data: queryResponse,
     error: queryError,
-  } = useQuery<ISchedulableQuery, Error, ISchedulableQuery>(
+  } = useQuery<IGetQueryResponse, Error, ISchedulableQuery>(
     ["query", queryId],
     () => queryAPI.load(queryId),
+
     {
+      select: (data) => data.query,
       enabled: !!queryId,
       refetchOnMount: false,
       refetchOnReconnect: false,

frontend/pages/hosts/details/cards/Queries/HostQueries.tsx

@@ -98,7 +98,7 @@ const HostQueries = ({
             data={tableData}
             onQueryChange={() => null}
             resultsTitle="queries"
-            defaultSortHeader="scheduled_query_name"
+            defaultSortHeader="query_name"
             defaultSortDirection="asc"
             showMarkAllPages={false}
             isAllPagesSelected={false}

frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx

@@ -767,9 +767,13 @@ const ManagePolicyPage = ({
               globalPoliciesCount
             )}
             caretPosition={"before"}
-            tooltipHtml={`"All teams" policies are checked ${(
-              <br />
-            )} for this team's hosts.`}
+            tooltipContent={
+              <>
+                &quot;All teams&quot; policies are checked
+                <br />
+                for this team&apos;s hosts.
+              </>
+            }
             onClick={toggleShowInheritedPolicies}
           />
         )}

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx

@@ -319,8 +319,12 @@ const ManageQueriesPage = ({
           inheritedQueryCount === 1 ? "y" : "ies"
         }`}
         caretPosition={"before"}
-        tooltipHtml={
-          'Queries from the "All teams"<br/>schedule run on this team’s hosts.'
+        tooltipContent={
+          <>
+            Queries from the &quot;All teams&quot;
+            <br />
+            schedule run on this team&apos;s hosts.
+          </>
         }
         onClick={() => {
           setShowInheritedQueries(!showInheritedQueries);

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -98,7 +98,7 @@
     .data-table-block {
       .data-table {
         &__wrapper {
-          overflow-x: scroll;
+          overflow-x: auto;
           overflow-y: hidden;
         }
         &__table {
@@ -192,4 +192,9 @@
       }
     }
   }
+  .reveal-button {
+    .component__tooltip-wrapper__underline {
+      position: initial;
+    }
+  }
 }

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

@@ -18,6 +18,10 @@ import { IQueryReport } from "interfaces/query_report";
 import queryAPI from "services/entities/queries";
 import queryReportAPI, { ISortOption } from "services/entities/query_report";
 import { DOCUMENT_TITLE_SUFFIX } from "utilities/constants";
+import {
+  isGlobalObserver,
+  isTeamObserver,
+} from "utilities/permissions/permissions";
 
 import Spinner from "components/Spinner/Spinner";
 import Button from "components/buttons/Button";
@@ -76,6 +80,7 @@ const QueryDetailsPage = ({
 
   const handlePageError = useErrorHandler();
   const {
+    currentUser,
     isGlobalAdmin,
     isGlobalMaintainer,
     isTeamMaintainerOrTeamAdmin,
@@ -301,8 +306,15 @@ const QueryDetailsPage = ({
     >
       <div>
         <b>Report clipped.</b> A sample of this query&apos;s results is included
-        below. You can still use query automations to complete this report in
-        your log destination.
+        below.
+        {
+          // Exclude below message for global and team observers/observer+s
+          !(
+            (currentUser && isGlobalObserver(currentUser)) ||
+            isTeamObserver(currentUser, teamId ?? null)
+          ) &&
+            " You can still use query automations to complete this report in your log destination."
+        }
       </div>
     </InfoBanner>
   );