From a98fc6f78470276b0050599a991a0f737eb9527b Mon Sep 17 00:00:00 2001
From: Simon Larsen <simonlarsen@oneuptime.com>
Date: Mon, 11 Nov 2024 18:43:46 +0000
Subject: [PATCH] Add Pill component for enabled/disabled status display in
 Workflow views

---
 Dashboard/src/Pages/Workflow/View/Index.tsx | 12 +++++++++++-
 Dashboard/src/Pages/Workflow/Workflows.tsx  | 12 +++++++++++-
 Worker/Routes.ts                            |  1 -
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/Dashboard/src/Pages/Workflow/View/Index.tsx b/Dashboard/src/Pages/Workflow/View/Index.tsx
index a25f1ec3af..8ecffe4aff 100644
--- a/Dashboard/src/Pages/Workflow/View/Index.tsx
+++ b/Dashboard/src/Pages/Workflow/View/Index.tsx
@@ -8,6 +8,8 @@ import Navigation from "Common/UI/Utils/Navigation";
 import Label from "Common/Models/DatabaseModels/Label";
 import Workflow from "Common/Models/DatabaseModels/Workflow";
 import React, { Fragment, FunctionComponent, ReactElement } from "react";
+import Pill from "Common/UI/Components/Pill/Pill";
+import { Green500, Red500 } from "Common/Types/BrandColors";
 
 const Delete: FunctionComponent<PageComponentProps> = (): ReactElement => {
   const modelId: ObjectID = Navigation.getLastParamAsObjectID(0);
@@ -109,7 +111,15 @@ const Delete: FunctionComponent<PageComponentProps> = (): ReactElement => {
                 isEnabled: true,
               },
               title: "Enabled",
-              fieldType: FieldType.Boolean,
+              fieldType: FieldType.Element,
+              getElement: (item: Workflow): ReactElement => {
+                if (item.isEnabled) {
+                  return (
+                    <Pill text="Enabled" color={Green500} isMinimal={true} />
+                  );
+                }
+                return <Pill text="Disabled" color={Red500} isMinimal={true} />;
+              },
             },
             {
               field: {
diff --git a/Dashboard/src/Pages/Workflow/Workflows.tsx b/Dashboard/src/Pages/Workflow/Workflows.tsx
index 094677a9b4..992ecd0e83 100644
--- a/Dashboard/src/Pages/Workflow/Workflows.tsx
+++ b/Dashboard/src/Pages/Workflow/Workflows.tsx
@@ -17,6 +17,8 @@ import Label from "Common/Models/DatabaseModels/Label";
 import Workflow from "Common/Models/DatabaseModels/Workflow";
 import WorkflowLog from "Common/Models/DatabaseModels/WorkflowLog";
 import React, { Fragment, FunctionComponent, ReactElement } from "react";
+import Pill from "Common/UI/Components/Pill/Pill";
+import { Green500, Red500 } from "Common/Types/BrandColors";
 
 const Workflows: FunctionComponent<PageComponentProps> = (): ReactElement => {
   const startDate: Date = OneUptimeDate.getSomeDaysAgo(30);
@@ -189,7 +191,15 @@ const Workflows: FunctionComponent<PageComponentProps> = (): ReactElement => {
                 isEnabled: true,
               },
               title: "Enabled",
-              type: FieldType.Boolean,
+              type: FieldType.Element,
+              getElement: (item: Workflow): ReactElement => {
+                if (item.isEnabled) {
+                  return (
+                    <Pill text="Enabled" color={Green500} isMinimal={true} />
+                  );
+                }
+                return <Pill text="Disabled" color={Red500} isMinimal={true} />;
+              },
             },
             {
               field: {
diff --git a/Worker/Routes.ts b/Worker/Routes.ts
index d0fd3cc7ca..1e7206202d 100644
--- a/Worker/Routes.ts
+++ b/Worker/Routes.ts
@@ -22,7 +22,6 @@ import "./Jobs/IncidentStateTimeline/SendNotificationToSubscribers";
 import "./Jobs/IncomingRequestMonitor/CheckHeartbeat";
 import "./Jobs/MeteredPlan/ReportTelemetryMeteredPlan";
 
-
 // Monitor Owners
 import "./Jobs/MonitorOwners/SendCreatedResourceNotification";
 import "./Jobs/MonitorOwners/SendOwnerAddedNotification";