From d3639cbbe69972f0d5dfa2782c9249144ebb47da Mon Sep 17 00:00:00 2001
From: Sarah Gillespie <73313222+gillespi314@users.noreply.github.com>
Date: Wed, 14 Feb 2024 13:32:54 -0600
Subject: [PATCH] Fix tooltip formatting of run script modal when scripts are
 disabled (#16848)

---
 .../modals/RunScriptModal/ScriptsTableConfig.tsx    | 13 ++++++-------
 .../modals/RunScriptModal/_styles.scss              | 12 ++++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx
index dbb294079e..37edd9902f 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/ScriptsTableConfig.tsx
@@ -8,6 +8,7 @@ import { IDropdownOption } from "interfaces/dropdownOption";
 import { IHostScript, ILastExecution } from "interfaces/script";
 import { IUser } from "interfaces/user";
 
+import Icon from "components/Icon";
 import DropdownCell from "components/TableContainer/DataTable/DropdownCell";
 import {
   isGlobalAdmin,
@@ -131,8 +132,10 @@ export const generateTableColumnConfigs = (
       accessor: "actions",
       Cell: (cellProps: IDropdownCellProps) => {
         if (scriptsDisabled) {
+          // create a basic span that doesn't use the dropdown component (which relies on react-select
+          // and makes it difficult for us to style the disabled tooltip underline on the placeholder text.
           return (
-            <span>
+            <span className="run-script-action--disabled">
               <TooltipWrapper
                 position="top"
                 tipContent={
@@ -141,13 +144,9 @@ export const generateTableColumnConfigs = (
                   </div>
                 }
               >
-                <DropdownCell
-                  options={[] as IDropdownOption[]}
-                  onChange={noop}
-                  placeholder={"Actions"}
-                  disabled={scriptsDisabled}
-                />
+                Actions
               </TooltipWrapper>
+              <Icon name="chevron-down" color="ui-fleet-black-50" />
             </span>
           );
         }
diff --git a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss
index f240afae03..78a4e7d7ca 100644
--- a/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss
+++ b/frontend/pages/hosts/details/HostDetailsPage/modals/RunScriptModal/_styles.scss
@@ -33,4 +33,16 @@
       }
     }
   }
+
+  // style a basic span that doesn't use the dropdown component (which relies on react-select
+  // and makes it difficult for us to style the disabled tooltip underline on the placeholder text.
+  .run-script-action--disabled {
+    cursor: pointer;
+    color: $ui-fleet-black-50;
+    display: flex;
+    padding: 5px;
+    justify-content: center;
+    align-items: center;
+    gap: 9px;
+  }
 }