From ff5748fd8f0a0eddf70434d665abb2bc43f5f71b Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Thu, 22 Feb 2024 09:05:02 -0500
Subject: [PATCH] Fleet UI: Move show query button in query report (#17044)

---
 changes/16701-move-show-query-button          |  1 +
 .../QueryDetailsPage/QueryDetailsPage.tsx     | 20 ++++++++++++++
 .../components/QueryReport/QueryReport.tsx    | 27 +------------------
 3 files changed, 22 insertions(+), 26 deletions(-)
 create mode 100644 changes/16701-move-show-query-button

diff --git a/changes/16701-move-show-query-button b/changes/16701-move-show-query-button
new file mode 100644
index 0000000000..ec0d5868ef
--- /dev/null
+++ b/changes/16701-move-show-query-button
@@ -0,0 +1 @@
+- Move show query button so it shows in report page even with no results
diff --git a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
index 82a55c004f..440e59ca49 100644
--- a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
+++ b/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>
   );
diff --git a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx b/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx
index e7e7c1807e..80de9b62e3 100644
--- a/frontend/pages/queries/details/components/QueryReport/QueryReport.tsx
+++ b/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;