From 4b5f8de6379e92224c9a82a6b1c8d93cd618b7ca Mon Sep 17 00:00:00 2001
From: Scott Gress <scottmgress@gmail.com>
Date: Tue, 29 Apr 2025 10:24:05 -0500
Subject: [PATCH] Add syntax highlighting support for shell and powershell
 scripts (#28417)

# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [X] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
See [Changes
files](https://github.com/fleetdm/fleet/blob/main/docs/Contributing/Committing-Changes.md#changes-files)
for more information.

# Details

This PR adds syntax highlighting for shell scripts and Powershell
scripts. It switches highlighting mode based on the extension of the
file.

**Shell:**
<img width="775" alt="image"
src="https://github.com/user-attachments/assets/712ef7db-cf33-4bd7-b620-e4b55225ecf5"
/>

**Powershell:**
<img width="773" alt="image"
src="https://github.com/user-attachments/assets/8a9fedb8-d8e3-4285-9ae6-d6f17c760e52"
/>
---
 changes/27463-add-script-syntax-highlighting               | 1 +
 frontend/components/Editor/Editor.tsx                      | 7 +++++++
 .../Scripts/components/EditScriptModal/EditScriptModal.tsx | 4 ++++
 3 files changed, 12 insertions(+)
 create mode 100644 changes/27463-add-script-syntax-highlighting

diff --git a/changes/27463-add-script-syntax-highlighting b/changes/27463-add-script-syntax-highlighting
new file mode 100644
index 0000000000..c18ad6ffb2
--- /dev/null
+++ b/changes/27463-add-script-syntax-highlighting
@@ -0,0 +1 @@
+- Added shell and Powershell syntax highlighting when editing scripts
\ No newline at end of file
diff --git a/frontend/components/Editor/Editor.tsx b/frontend/components/Editor/Editor.tsx
index e471b8ec74..a68604257a 100644
--- a/frontend/components/Editor/Editor.tsx
+++ b/frontend/components/Editor/Editor.tsx
@@ -2,6 +2,8 @@ import classnames from "classnames";
 import TooltipWrapper from "components/TooltipWrapper";
 import React, { ReactNode } from "react";
 import AceEditor from "react-ace";
+import "ace-builds/src-noconflict/mode-sh";
+import "ace-builds/src-noconflict/mode-powershell";
 import { IAceEditor } from "react-ace/lib/types";
 
 const baseClass = "editor";
@@ -30,6 +32,9 @@ interface IEditorProps {
    * @default "editor"
    */
   name?: string;
+  /** The syntax highlighting mode to use.
+   */
+  mode?: string;
   /** Include correct styles as a form field.
    * @default false
    */
@@ -58,6 +63,7 @@ const Editor = ({
   readOnly = false,
   wrapEnabled = false,
   name = "editor",
+  mode,
   isFormField = false,
   maxLines = 20,
   className,
@@ -118,6 +124,7 @@ const Editor = ({
     <div className={classNames}>
       {renderLabel()}
       <AceEditor
+        mode={mode}
         wrapEnabled={wrapEnabled}
         name={name}
         className={baseClass}
diff --git a/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx b/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx
index 181ecfd6cc..4f8329a1b7 100644
--- a/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx
+++ b/frontend/pages/ManageControlsPage/Scripts/components/EditScriptModal/EditScriptModal.tsx
@@ -105,10 +105,14 @@ const EditScriptModal = ({
       return <DataError description="Close this modal and try again." />;
     }
 
+    // Set editing mode based on the file extension.
+    const mode = scriptName.match(/\.sh$/) ? "sh" : "powershell";
+
     return (
       <>
         <form onSubmit={onSubmit}>
           <Editor
+            mode={mode}
             error={formError}
             isFormField
             label="Script"