From aa5d668893c5042752a2f6fa430e6153a41fffdd Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Fri, 11 Apr 2025 15:52:38 -0400
Subject: [PATCH] Fleet UI (unreleased bugs): Related to code fields in modals
 (#28173)

---
 .../AppInstallDetails/AppInstallDetails.tsx   | 22 ++++------
 .../AppInstallDetails/_styles.scss            |  6 +++
 .../SoftwareInstallDetails.tsx                | 14 +++----
 .../SoftwareUninstallDetailsModal.tsx         | 17 +++-----
 .../ActivityAutomationDetailsModal.tsx        | 17 ++++----
 .../_styles.scss                              |  6 ---
 .../RunScriptDetailsModal.tsx                 | 41 ++++++++++---------
 .../RunScriptDetailsModal/_styles.scss        | 23 -----------
 8 files changed, 56 insertions(+), 90 deletions(-)

diff --git a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx
index 54e0f1b8ad..53cbaa8d88 100644
--- a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/AppInstallDetails.tsx
@@ -116,21 +116,17 @@ export const AppInstallDetails = ({
           </span>
         </div>
         {showCommandPayload && (
-          <div className={`${baseClass}__script-output`}>
-            <Textarea label="Request payload:" variant="code">
-              {result.payload}
-            </Textarea>
-          </div>
+          <Textarea label="Request payload:" variant="code">
+            {result.payload}
+          </Textarea>
         )}
         {showCommandResponse && (
-          <div className={`${baseClass}__script-output`}>
-            <Textarea
-              label={`The response from ${formattedHost}:`}
-              variant="code"
-            >
-              {result.result}
-            </Textarea>
-          </div>
+          <Textarea
+            label={<>The response from {formattedHost}:</>}
+            variant="code"
+          >
+            {result.result}
+          </Textarea>
         )}
       </div>
     </>
diff --git a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss
index 889aa6b93b..d9ae811f04 100644
--- a/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss
+++ b/frontend/components/ActivityDetails/InstallDetails/AppInstallDetails/_styles.scss
@@ -1,6 +1,12 @@
 .app-install-details {
   overflow-wrap: anywhere; // Prevent long software name overflow
 
+  &__software-install-details {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-medium;
+  }
+
   .modal__content {
     margin-top: $pad-xlarge;
   }
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx
index d7b5599bc3..8b069de9cd 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareInstallDetails/SoftwareInstallDetails.tsx
@@ -80,14 +80,12 @@ const Output = ({
   result: ISoftwareInstallResult;
 }) => {
   return (
-    <div className={`${baseClass}__script-output`}>
-      <Textarea
-        label={`${SOFTWARE_INSTALL_OUTPUT_DISPLAY_LABELS[displayKey]}:`}
-        variant="code"
-      >
-        {result[displayKey]}
-      </Textarea>
-    </div>
+    <Textarea
+      label={`${SOFTWARE_INSTALL_OUTPUT_DISPLAY_LABELS[displayKey]}:`}
+      variant="code"
+    >
+      {result[displayKey]}
+    </Textarea>
   );
 };
 
diff --git a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
index 3278fd208a..1dcfca910f 100644
--- a/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
+++ b/frontend/components/ActivityDetails/InstallDetails/SoftwareUninstallDetailsModal/SoftwareUninstallDetailsModal.tsx
@@ -128,17 +128,12 @@ const SoftwareUninstallDetailsModal = ({
         />
         {!isPendingStatus(status) && scriptResult && (
           <>
-            <div className={`${baseClass}__script-output`}>
-              <Textarea label="Uninstall script content:" variant="code">
-                {scriptResult.script_contents}
-              </Textarea>
-            </div>
-
-            <div className={`${baseClass}__script-output`}>
-              <Textarea label="Uninstall script output:" variant="code">
-                {scriptResult.output}
-              </Textarea>
-            </div>
+            <Textarea label="Uninstall script content:" variant="code">
+              {scriptResult.script_contents}
+            </Textarea>
+            <Textarea label="Uninstall script output:" variant="code">
+              {scriptResult.output}
+            </Textarea>
           </>
         )}
       </>
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/ActivityAutomationDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/ActivityAutomationDetailsModal.tsx
index 00bd2ae9d1..cacab1814a 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/ActivityAutomationDetailsModal.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/ActivityAutomationDetailsModal.tsx
@@ -20,15 +20,14 @@ const ActivityAutomationDetailsModal = ({
     return (
       <>
         <div className={`${baseClass}__modal-content`}>
-          <p>
-            Fleet will send a JSON payload to this URL whenever a new activity
-            is generated:
-          </p>
-          <div className={`${baseClass}__webhook-url`}>
-            <Textarea className={`${baseClass}__webhook-url-textarea`}>
-              {details.webhook_url}
-            </Textarea>
-          </div>
+          <Textarea
+            label="Fleet will send a JSON payload to this URL whenever a new activity
+            is generated:"
+            className={`${baseClass}__webhook-url`}
+            variant="code"
+          >
+            {details.webhook_url}
+          </Textarea>
         </div>
         <div className="modal-cta-wrap">
           <Button onClick={onCancel} variant="brand">
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/_styles.scss b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/_styles.scss
index 0fb9df0d09..f977096e13 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/ActivityAutomationDetailsModal/_styles.scss
@@ -10,10 +10,4 @@
       gap: 0;
     }
   }
-
-  &__webhook-url-textarea {
-    box-sizing: border-box;
-    font-family: "SourceCodePro";
-    word-break: break-all;
-  }
 }
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
index 56dcaa2ad2..aa4ec5a14d 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/RunScriptDetailsModal.tsx
@@ -20,12 +20,9 @@ interface IScriptContentProps {
 
 const ScriptContent = ({ content }: IScriptContentProps) => {
   return (
-    <div className={`${baseClass}__script-content`}>
-      <span>Script content:</span>
-      <Textarea className={`${baseClass}__script-content-textarea`}>
-        {content}
-      </Textarea>
-    </div>
+    <Textarea label="Script content:" variant="code">
+      {content}
+    </Textarea>
   );
 };
 
@@ -126,20 +123,24 @@ interface IScriptOutputProps {
 
 const ScriptOutput = ({ output, hostname }: IScriptOutputProps) => {
   return (
-    <div className={`${baseClass}__script-output`}>
-      <p>
-        The{" "}
-        <TooltipWrapper
-          tipContent="Fleet records the last 10,000 characters to prevent downtime."
-          tooltipClass={`${baseClass}__output-tooltip`}
-          isDelayed
-        >
-          output recorded
-        </TooltipWrapper>{" "}
-        when <b>{hostname}</b> ran the script above:
-      </p>
-      <Textarea className={`${baseClass}__output-textarea`}>{output}</Textarea>
-    </div>
+    <Textarea
+      label={
+        <>
+          The{" "}
+          <TooltipWrapper
+            tipContent="Fleet records the last 10,000 characters to prevent downtime."
+            tooltipClass={`${baseClass}__output-tooltip`}
+            isDelayed
+          >
+            output recorded
+          </TooltipWrapper>{" "}
+          when <b>{hostname}</b> ran the script above:
+        </>
+      }
+      variant="code"
+    >
+      {output}
+    </Textarea>
   );
 };
 
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/_styles.scss b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/_styles.scss
index 92622159d4..4a64383bbc 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/components/RunScriptDetailsModal/_styles.scss
@@ -17,13 +17,6 @@
     gap: $pad-medium;
   }
 
-  &__script-content-textarea {
-    box-sizing: border-box;
-    max-height: 300px;
-    overflow-y: auto;
-    font-family: "SourceCodePro";
-  }
-
   &__status-message {
     p {
       display: flex;
@@ -45,23 +38,7 @@
     gap: $pad-xlarge;
   }
 
-  &__script-output {
-    display: flex;
-    flex-direction: column;
-    gap: $pad-medium;
-
-    p {
-      margin: 0;
-    }
-  }
-
   &__output-tooltip {
     width: 300px;
   }
-
-  &__output-textarea {
-    font-family: "SourceCodePro";
-    max-height: 150px;
-    overflow: auto;
-  }
 }