From db9cc5e052b8d9114f04e94a3cb873d22b7778fc Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 30 Apr 2024 01:36:56 +0200
Subject: [PATCH] Added badge as renderer of type on Global Variables

---
 .../pages/GlobalVariablesPage/index.tsx       | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
index 9818c5e81..99e1a58a8 100644
--- a/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx
@@ -6,9 +6,19 @@ import { useState } from "react";
 import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
+import { Badge } from "../../../../components/ui/badge";
 import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
+  const BadgeRenderer = (props) => {
+    return (
+      <div>
+        <Badge variant="outline" size="md" className="font-normal">
+          {props.value}
+        </Badge>
+      </div>
+    );
+  };
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
     {
@@ -21,6 +31,7 @@ export default function GlobalVariablesPage() {
     }, //This column will be twice as wide as the others
     {
       field: "type",
+      cellRenderer: BadgeRenderer,
       cellEditor: "agSelectCellEditor",
       cellEditorParams: {
         values: ["Prompt", "Credential"],
@@ -98,10 +109,15 @@ export default function GlobalVariablesPage() {
           <Button
             data-testid="api-key-button-store"
             variant="primary"
-            className="px-2 group"
+            className="group px-2"
             disabled={selectedRows.length === 0}
           >
-            <IconComponent name="Trash2" className={cn("h-5 w-5 text-destructive group-disabled:text-primary")} />
+            <IconComponent
+              name="Trash2"
+              className={cn(
+                "h-5 w-5 text-destructive group-disabled:text-primary"
+              )}
+            />
           </Button>
           <AddNewVariableButton>
             <Button data-testid="api-key-button-store" variant="primary">