Fleet UI: Move show query button in query report (#17044)

changes/16701-move-show-query-button

@@ -0,0 +1 @@
+- Move show query button so it shows in report page even with no results

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

@@ -33,6 +33,7 @@ import DataError from "components/DataError/DataError";
 import LogDestinationIndicator from "components/LogDestinationIndicator/LogDestinationIndicator";
 import CustomLink from "components/CustomLink";
 import InfoBanner from "components/InfoBanner";
+import ShowQueryModal from "components/modals/ShowQueryModal";
 import QueryReport from "../components/QueryReport/QueryReport";
 import NoResults from "../components/NoResults/NoResults";
 
@@ -94,6 +95,7 @@ const QueryDetailsPage = ({
   const {
     lastEditedQueryName,
     lastEditedQueryDescription,
+    lastEditedQueryBody,
     lastEditedQueryObserverCanRun,
     lastEditedQueryDiscardData,
     lastEditedQueryLoggingType,
@@ -109,6 +111,7 @@ const QueryDetailsPage = ({
     setLastEditedQueryDiscardData,
   } = useContext(QueryContext);
 
+  const [showQueryModal, setShowQueryModal] = useState(false);
   const [disabledCachingGlobally, setDisabledCachingGlobally] = useState(true);
 
   useEffect(() => {
@@ -184,6 +187,10 @@ const QueryDetailsPage = ({
     }
   }, [location.pathname, storedQuery?.name]);
 
+  const onShowQueryModal = () => {
+    setShowQueryModal(!showQueryModal);
+  };
+
   const isLoading = isStoredQueryLoading || isQueryReportLoading;
   const isApiError = storedQueryError || queryReportError;
   const isClipped =
@@ -216,6 +223,13 @@ const QueryDetailsPage = ({
                 </p>
               </div>
               <div className={`${baseClass}__action-button-container`}>
+                <Button
+                  className={`${baseClass}__show-query-btn`}
+                  onClick={onShowQueryModal}
+                  variant="text-icon"
+                >
+                  Show query
+                </Button>
                 {canEditQuery && (
                   <Button
                     onClick={() => {
@@ -364,6 +378,12 @@ const QueryDetailsPage = ({
         {renderHeader()}
         {isClipped && renderClippedBanner()}
         {renderReport()}
+        {showQueryModal && (
+          <ShowQueryModal
+            query={lastEditedQueryBody}
+            onCancel={onShowQueryModal}
+          />
+        )}
       </div>
     </MainContent>
   );

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

@@ -13,7 +13,6 @@ import { IQueryReport, IQueryReportResultRow } from "interfaces/query_report";
 import Button from "components/buttons/Button";
 import Icon from "components/Icon/Icon";
 import TableContainer from "components/TableContainer";
-import ShowQueryModal from "components/modals/ShowQueryModal";
 import TooltipWrapper from "components/TooltipWrapper";
 import EmptyTable from "components/EmptyTable";
 
@@ -46,7 +45,6 @@ const QueryReport = ({
 }: IQueryReportProps): JSX.Element => {
   const { lastEditedQueryName, lastEditedQueryBody } = useContext(QueryContext);
 
-  const [showQueryModal, setShowQueryModal] = useState(false);
   const [filteredResults, setFilteredResults] = useState<Row[]>(
     flattenResults(queryReport?.results || [])
   );
@@ -77,22 +75,9 @@ const QueryReport = ({
     );
   };
 
-  const onShowQueryModal = () => {
-    setShowQueryModal(!showQueryModal);
-  };
-
   const renderTableButtons = () => {
     return (
       <div className={`${baseClass}__results-cta`}>
-        <Button
-          className={`${baseClass}__show-query-btn`}
-          onClick={onShowQueryModal}
-          variant="text-icon"
-        >
-          <>
-            Show query <Icon name="eye" />
-          </>
-        </Button>
         <Button
           className={`${baseClass}__export-btn`}
           onClick={onExportQueryResults}
@@ -170,17 +155,7 @@ const QueryReport = ({
     );
   };
 
-  return (
-    <div className={`${baseClass}__wrapper`}>
-      {renderTable()}
-      {showQueryModal && (
-        <ShowQueryModal
-          query={lastEditedQueryBody}
-          onCancel={onShowQueryModal}
-        />
-      )}
-    </div>
-  );
+  return <div className={`${baseClass}__wrapper`}>{renderTable()}</div>;
 };
 
 export default QueryReport;