From 8950d46cbc9f746435fe1990a65733bd1b3253b5 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Fri, 13 Oct 2023 15:09:45 +0100
Subject: [PATCH] Fix script details modal UI bug (#14527)

fix a UI bug of the script details modal rendering incorrectly under the
top nav.

**Before:**


![image](https://github.com/fleetdm/fleet/assets/1153709/07370735-c305-42da-8934-7a375f4c3359)

**After:**


![image](https://github.com/fleetdm/fleet/assets/1153709/0a3cae2c-4cdb-4b72-8941-757949772993)

- [x] Manual QA for all new/changed functionality
---
 .../ScriptDetailsModal/ScriptDetailsModal.tsx |  2 +-
 .../HostDetailsPage/HostDetailsPage.tsx       | 32 ++++++++++++++++-
 .../hosts/details/cards/Scripts/Scripts.tsx   | 34 ++++++-------------
 3 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx
index 69afa85799..42df625f09 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal/ScriptDetailsModal.tsx
@@ -167,7 +167,7 @@ const ScriptDetailsModal = ({
   onCancel,
 }: IScriptDetailsModalProps) => {
   const { data, isLoading, isError } = useQuery<IScriptResultResponse>(
-    ["scriptDetailsModal"],
+    ["scriptDetailsModal", scriptExecutionId],
     () => {
       return scriptsAPI.getScriptResult(scriptExecutionId);
     },
diff --git a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
index db5bf09b87..caffc9a8be 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/HostDetailsPage.tsx
@@ -1,4 +1,10 @@
-import React, { useContext, useState, useCallback, useEffect } from "react";
+import React, {
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useRef,
+} from "react";
 import { Params, InjectedRouter } from "react-router/lib/Router";
 import { useQuery } from "react-query";
 import { useErrorHandler } from "react-error-boundary";
@@ -48,6 +54,7 @@ import {
 } from "utilities/helpers";
 import permissions from "utilities/permissions";
 import { DEFAULT_QUERY } from "utilities/constants";
+import ScriptDetailsModal from "pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal";
 
 import HostSummaryCard from "../cards/HostSummary";
 import AboutCard from "../cards/About";
@@ -154,6 +161,8 @@ const HostDetailsPage = ({
   const [showBootstrapPackageModal, setShowBootstrapPackageModal] = useState(
     false
   );
+  const [showScriptDetailsModal, setShowScriptDetailsModal] = useState(false);
+
   const [selectedPolicy, setSelectedPolicy] = useState<IHostPolicy | null>(
     null
   );
@@ -168,6 +177,10 @@ const HostDetailsPage = ({
   const [usersSearchString, setUsersSearchString] = useState("");
   const [pathname, setPathname] = useState("");
 
+  // used to track the current script execution id we want to show in the show
+  // details modal.
+  const scriptExecutionId = useRef<string | null>(null);
+
   const { data: fleetQueries, error: fleetQueriesError } = useQuery<
     IListQueriesResponse,
     Error,
@@ -540,6 +553,16 @@ const HostDetailsPage = ({
     );
   };
 
+  const onCancelScriptDetailsModal = () => {
+    setShowScriptDetailsModal(false);
+    scriptExecutionId.current = null;
+  };
+
+  const onShowScriptDetails = (executionId: string) => {
+    scriptExecutionId.current = executionId;
+    setShowScriptDetailsModal(true);
+  };
+
   const onTransferHostSubmit = async (team: ITeam) => {
     setIsUpdatingHost(true);
 
@@ -791,6 +814,7 @@ const HostDetailsPage = ({
                   page={page}
                   router={router}
                   isHostOnline={host?.status === "online"}
+                  onShowDetails={onShowScriptDetails}
                 />
               </TabPanel>
             )}
@@ -905,6 +929,12 @@ const HostDetailsPage = ({
               onClose={() => setShowBootstrapPackageModal(false)}
             />
           )}
+        {showScriptDetailsModal && scriptExecutionId.current && (
+          <ScriptDetailsModal
+            scriptExecutionId={scriptExecutionId.current}
+            onCancel={onCancelScriptDetailsModal}
+          />
+        )}
       </div>
     </MainContent>
   );
diff --git a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx b/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
index 4c94a499c7..62095581cc 100644
--- a/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
+++ b/frontend/pages/hosts/details/cards/Scripts/Scripts.tsx
@@ -16,25 +16,26 @@ import TableContainer from "components/TableContainer";
 import EmptyTable from "components/EmptyTable";
 import DataError from "components/DataError";
 import { ITableQueryData } from "components/TableContainer/TableContainer";
-import ScriptDetailsModal from "pages/DashboardPage/cards/ActivityFeed/components/ScriptDetailsModal";
 
 import { generateDataSet, generateTableHeaders } from "./ScriptsTableConfig";
 
 const baseClass = "host-scripts-section";
 
 interface IScriptsProps {
-  hostId?: number;
-  page?: number;
   isHostOnline: boolean;
   router: InjectedRouter;
+  hostId?: number;
+  page?: number;
+  onShowDetails: (scriptExecutionId: string) => void;
 }
 
-const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => {
-  const [showScriptDetailsModal, setShowScriptDetailsModal] = useState(false);
-  // used to track the current script execution id we want to show in the show
-  // details modal.
-  const scriptExecutionId = useRef<string | null>(null);
-
+const Scripts = ({
+  hostId,
+  page = 0,
+  isHostOnline,
+  router,
+  onShowDetails,
+}: IScriptsProps) => {
   const { renderFlash } = useContext(NotificationContext);
 
   const {
@@ -62,8 +63,7 @@ const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => {
     switch (action) {
       case "showDetails":
         if (!script.last_execution) return;
-        scriptExecutionId.current = script.last_execution.execution_id;
-        setShowScriptDetailsModal(true);
+        onShowDetails(script.last_execution.execution_id);
         break;
       case "run":
         try {
@@ -82,11 +82,6 @@ const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => {
     }
   };
 
-  const onCancelScriptDetailsModal = () => {
-    setShowScriptDetailsModal(false);
-    scriptExecutionId.current = null;
-  };
-
   if (isErrorScriptData) {
     return <DataError card />;
   }
@@ -117,13 +112,6 @@ const Scripts = ({ hostId, page = 0, isHostOnline, router }: IScriptsProps) => {
           disableCount
         />
       )}
-
-      {showScriptDetailsModal && scriptExecutionId.current && (
-        <ScriptDetailsModal
-          scriptExecutionId={scriptExecutionId.current}
-          onCancel={onCancelScriptDetailsModal}
-        />
-      )}
     </Card>
   );
 };