From 72a39012b6421eb992e1aab82a6675e7d8ab186c Mon Sep 17 00:00:00 2001
From: Alpha Vylly <65187737+AlphaLawless@users.noreply.github.com>
Date: Sun, 23 Nov 2025 09:22:57 -0300
Subject: [PATCH] feat: add script disable functionality with visual indicators
 (#9374)

---
 frontend/public/json/opnsense-vm.json         | 43 ++++++++++++++
 .../src/app/json-editor/_schemas/schemas.ts   | 10 ++++
 frontend/src/app/json-editor/page.tsx         | 20 +++++++
 .../scripts/_components/script-accordion.tsx  |  6 +-
 .../app/scripts/_components/script-item.tsx   | 57 +++++++++++--------
 .../script-items/disable-description.tsx      | 26 +++++++++
 frontend/src/components/text-parse-links.tsx  | 52 +++++++++++++++++
 frontend/src/lib/types.ts                     |  2 +
 8 files changed, 190 insertions(+), 26 deletions(-)
 create mode 100644 frontend/public/json/opnsense-vm.json
 create mode 100644 frontend/src/app/scripts/_components/script-items/disable-description.tsx
 create mode 100644 frontend/src/components/text-parse-links.tsx

diff --git a/frontend/public/json/opnsense-vm.json b/frontend/public/json/opnsense-vm.json
new file mode 100644
index 000000000..6ec515507
--- /dev/null
+++ b/frontend/public/json/opnsense-vm.json
@@ -0,0 +1,43 @@
+{
+  "name": "OPNsense",
+  "slug": "opnsense-vm",
+  "categories": [
+    4,
+    2
+  ],
+  "date_created": "2025-02-11",
+  "type": "vm",
+  "updateable": true,
+  "privileged": false,
+  "interface_port": 443,
+  "documentation": "https://docs.opnsense.org/",
+  "website": "https://opnsense.org/",
+  "logo": "https://cdn.jsdelivr.net/gh/selfhst/icons/webp/opnsense.webp",
+  "config_path": "",
+  "description": "OPNsense is an open-source firewall and routing platform based on FreeBSD. It provides advanced security features, including intrusion detection, VPN support, traffic shaping, and web filtering, with an intuitive web interface for easy management. Known for its reliability and regular updates, OPNsense is a popular choice for both businesses and home networks.",
+  "disable": true,
+  "disable_description": "This script has been temporarily disabled due to installation failures. The OPNsense bootstrap process was not completing successfully, resulting in a plain FreeBSD VM instead of a functional OPNsense installation. The issue is being investigated and the script will be re-enabled once resolved. For more details, see: https://github.com/community-scripts/ProxmoxVE/issues/6183",
+  "install_methods": [
+    {
+      "type": "default",
+      "script": "vm/opnsense-vm.sh",
+      "resources": {
+        "cpu": 4,
+        "ram": 8192,
+        "hdd": 10,
+        "os": "FreeBSD",
+        "version": "latest"
+      }
+    }
+  ],
+  "default_credentials": {
+    "username": "root",
+    "password": "opnsense"
+  },
+  "notes": [
+    {
+      "text": "It will fail with default settings if there is no vmbr0 and vmbr1 on your node. Use advanced settings in this case.",
+      "type": "warning"
+    }
+  ]
+}
diff --git a/frontend/src/app/json-editor/_schemas/schemas.ts b/frontend/src/app/json-editor/_schemas/schemas.ts
index ef278afd0..ed104e18e 100644
--- a/frontend/src/app/json-editor/_schemas/schemas.ts
+++ b/frontend/src/app/json-editor/_schemas/schemas.ts
@@ -35,12 +35,22 @@ export const ScriptSchema = z.object({
   logo: z.string().url().nullable(),
   config_path: z.string(),
   description: z.string().min(1, "Description is required"),
+  disable: z.boolean().optional(),
+  disable_description: z.string().optional(),
   install_methods: z.array(InstallMethodSchema).min(1, "At least one install method is required"),
   default_credentials: z.object({
     username: z.string().nullable(),
     password: z.string().nullable(),
   }),
   notes: z.array(NoteSchema),
+}).refine((data) => {
+  if (data.disable === true && !data.disable_description) {
+    return false;
+  }
+  return true;
+}, {
+  message: "disable_description is required when disable is true",
+  path: ["disable_description"],
 });
 
 export type Script = z.infer<typeof ScriptSchema>;
diff --git a/frontend/src/app/json-editor/page.tsx b/frontend/src/app/json-editor/page.tsx
index 351750282..748d864c9 100644
--- a/frontend/src/app/json-editor/page.tsx
+++ b/frontend/src/app/json-editor/page.tsx
@@ -42,6 +42,8 @@ const initialScript: Script = {
   website: null,
   logo: null,
   description: "",
+  disable: undefined,
+  disable_description: undefined,
   install_methods: [],
   default_credentials: {
     username: null,
@@ -261,7 +263,25 @@ export default function JSONGenerator() {
               <Switch checked={script.privileged} onCheckedChange={checked => updateScript("privileged", checked)} />
               <label>Privileged</label>
             </div>
+            <div className="flex items-center space-x-2">
+              <Switch checked={script.disable || false} onCheckedChange={checked => updateScript("disable", checked)} />
+              <label>Disabled</label>
+            </div>
           </div>
+          {script.disable && (
+            <div>
+              <Label>
+                Disable Description
+                {" "}
+                <span className="text-red-500">*</span>
+              </Label>
+              <Textarea
+                placeholder="Explain why this script is disabled..."
+                value={script.disable_description || ""}
+                onChange={e => updateScript("disable_description", e.target.value)}
+              />
+            </div>
+          )}
           <Input
             placeholder="Interface Port"
             type="number"
diff --git a/frontend/src/app/scripts/_components/script-accordion.tsx b/frontend/src/app/scripts/_components/script-accordion.tsx
index bce44c761..5eb1868b4 100644
--- a/frontend/src/app/scripts/_components/script-accordion.tsx
+++ b/frontend/src/app/scripts/_components/script-accordion.tsx
@@ -123,7 +123,7 @@ export default function ScriptAccordion({
                     className={`flex cursor-pointer items-center justify-between gap-1 px-1 py-1 text-muted-foreground hover:rounded-lg hover:bg-accent/60 hover:dark:bg-accent/20 ${selectedScript === script.slug
                       ? "rounded-lg bg-accent font-semibold dark:bg-accent/30 dark:text-white"
                       : ""
-                    }`}
+                    } ${script.disable ? "opacity-60" : ""}`}
                     onClick={() => {
                       handleSelected(script.slug);
                       setSelectedCategory(category.name);
@@ -143,7 +143,9 @@ export default function ScriptAccordion({
                         alt={script.name}
                         className="mr-1 w-4 h-4 rounded-full"
                       />
-                      <span className="flex items-center gap-2">{script.name}</span>
+                      <span className="flex items-center gap-2">
+                        {script.name}
+                      </span>
                     </div>
                     {formattedBadge(script.type)}
                   </Link>
diff --git a/frontend/src/app/scripts/_components/script-item.tsx b/frontend/src/app/scripts/_components/script-item.tsx
index 7653ecf9e..90ac3190e 100644
--- a/frontend/src/app/scripts/_components/script-item.tsx
+++ b/frontend/src/app/scripts/_components/script-item.tsx
@@ -12,6 +12,7 @@ import { useVersions } from "@/hooks/use-versions";
 import { basePath } from "@/config/site-config";
 import { extractDate } from "@/lib/time";
 
+import DisableDescription from "./script-items/disable-description";
 import { getDisplayValueFromType } from "./script-info-blocks";
 import DefaultPassword from "./script-items/default-password";
 import InstallCommand from "./script-items/install-command";
@@ -146,37 +147,45 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
               <ScriptHeader item={item} />
             </Suspense>
 
-            <Description item={item} />
-            <Alerts item={item} />
+            {item.disable && item.disable_description && (
+              <DisableDescription item={item} />
+            ) }
 
-            <div className="mt-4 rounded-lg border shadow-sm">
-              <div className="flex gap-3 px-4 py-2 bg-accent/25">
-                <h2 className="text-lg font-semibold">
-                  How to
-                  {" "}
-                  {item.type === "pve" ? "use" : item.type === "addon" ? "apply" : "install"}
-                </h2>
-                <Tooltips item={item} />
-              </div>
-              <Separator />
-              <div className="">
-                <InstallCommand item={item} />
-              </div>
-              {item.config_path && (
-                <>
-                  <Separator />
+            {!item.disable && (
+              <>
+                <Description item={item} />
+
+                <Alerts item={item} />
+                <div className="mt-4 rounded-lg border shadow-sm">
                   <div className="flex gap-3 px-4 py-2 bg-accent/25">
-                    <h2 className="text-lg font-semibold">Location of config file</h2>
+                    <h2 className="text-lg font-semibold">
+                      How to
+                      {" "}
+                      {item.type === "pve" ? "use" : item.type === "addon" ? "apply" : "install"}
+                    </h2>
+                    <Tooltips item={item} />
                   </div>
                   <Separator />
                   <div className="">
-                    <ConfigFile configPath={item.config_path} />
+                    <InstallCommand item={item} />
                   </div>
-                </>
-              )}
-            </div>
+                  {item.config_path && (
+                    <>
+                      <Separator />
+                      <div className="flex gap-3 px-4 py-2 bg-accent/25">
+                        <h2 className="text-lg font-semibold">Location of config file</h2>
+                      </div>
+                      <Separator />
+                      <div className="">
+                        <ConfigFile configPath={item.config_path} />
+                      </div>
+                    </>
+                  )}
+                </div>
 
-            <DefaultPassword item={item} />
+                <DefaultPassword item={item} />
+              </>
+            )}
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/scripts/_components/script-items/disable-description.tsx b/frontend/src/app/scripts/_components/script-items/disable-description.tsx
new file mode 100644
index 000000000..37c724040
--- /dev/null
+++ b/frontend/src/app/scripts/_components/script-items/disable-description.tsx
@@ -0,0 +1,26 @@
+import { AlertCircle } from "lucide-react";
+
+import type { Script } from "@/lib/types";
+
+import TextParseLinks from "@/components/text-parse-links";
+import { AlertColors } from "@/config/site-config";
+import { cn } from "@/lib/utils";
+
+export default function DisableDescription({ item }: { item: Script }) {
+  return (
+    <div className="mt-4 flex flex-col shadow-sm gap-2">
+      <div
+        className={cn(
+          "flex items-start gap-3 rounded-lg border p-4 text-sm",
+          AlertColors.warning,
+        )}
+      >
+        <AlertCircle className="h-5 min-h-5 w-5 min-w-5 mt-0.5" />
+        <div className="flex flex-col gap-2">
+          <h3 className="font-semibold text-base">Script Disabled</h3>
+          <p>{TextParseLinks(item.disable_description!)}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/text-parse-links.tsx b/frontend/src/components/text-parse-links.tsx
new file mode 100644
index 000000000..1fb003ed5
--- /dev/null
+++ b/frontend/src/components/text-parse-links.tsx
@@ -0,0 +1,52 @@
+import { ClipboardIcon, ExternalLink } from "lucide-react";
+import { Fragment } from "react";
+
+import handleCopy from "./handle-copy";
+
+const URL_PATTERN = /(https?:\/\/[^\s,]+)/;
+const CODE_PATTERN = /`([^`]*)`/;
+
+export default function TextParseLinks(text: string) {
+  const codeParts = text.split(CODE_PATTERN);
+
+  return codeParts.map((part: string, codeIndex: number) => {
+    if (codeIndex % 2 === 1) {
+      return (
+        <span
+          key={`code-${codeIndex}`}
+          className="bg-secondary py-1 px-2 rounded-lg inline-flex items-center gap-2"
+        >
+          {part}
+          <ClipboardIcon
+            className="size-3 cursor-pointer"
+            onClick={() => handleCopy("command", part)}
+          />
+        </span>
+      );
+    }
+
+    const urlParts = part.split(URL_PATTERN);
+
+    return (
+      <Fragment key={`text-${codeIndex}`}>
+        {urlParts.map((urlPart: string, urlIndex: number) => {
+          if (urlIndex % 2 === 1) {
+            return (
+              <a
+                key={`url-${codeIndex}-${urlIndex}`}
+                href={urlPart}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-blue-600 dark:text-blue-400 hover:underline font-medium transition-colors"
+              >
+                {urlPart}
+                <ExternalLink className="size-3" />
+              </a>
+            );
+          }
+          return <Fragment key={`plain-${codeIndex}-${urlIndex}`}>{urlPart}</Fragment>;
+        })}
+      </Fragment>
+    );
+  });
+}
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 7dc855009..e0c32adac 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -14,6 +14,8 @@ export type Script = {
   logo: string | null;
   config_path: string;
   description: string;
+  disable?: boolean;
+  disable_description?: string;
   install_methods: {
     type: "default" | "alpine";
     script: string;