Fixed badge showing blank when no type is selected

src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx

@@ -8,32 +8,45 @@ import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
-import { cn } from "../../../../utils/utils";
 import { useGlobalVariablesStore } from "../../../../stores/globalVariables";
+import { cn } from "../../../../utils/utils";
 
 export default function GlobalVariablesPage() {
-  const rows: Array<{type: string | undefined; id: string; name: string}> = [];
+  const rows: Array<{ type: string | undefined; id: string; name: string }> =
-  const globalVariablesEntries = useGlobalVariablesStore(state => state.globalVariablesEntries);
+    [];
-  const removeGlobalVariable = useGlobalVariablesStore(state => state.removeGlobalVariable);
+  const globalVariablesEntries = useGlobalVariablesStore(
-  const globalVariables = useGlobalVariablesStore(state => state.globalVariables);
+    (state) => state.globalVariablesEntries
+  );
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable
+  );
+  const globalVariables = useGlobalVariablesStore(
+    (state) => state.globalVariables
+  );
   globalVariablesEntries.forEach((e) => {
-    const globalVariableObj = globalVariables[e]
+    const globalVariableObj = globalVariables[e];
-    rows.push({type: globalVariableObj.type, id: globalVariableObj.id, name: e})
+    rows.push({
-  })
+      type: globalVariableObj.type,
+      id: globalVariableObj.id,
+      name: e,
+    });
+  });
 
   const BadgeRenderer = (props) => {
-    return (
+    return props.value !== "" ? (
       <div>
         <Badge variant="outline" size="md" className="font-normal">
           {props.value}
         </Badge>
       </div>
+    ) : (
+      <div></div>
     );
   };
 
   useEffect(() => {
-    setRowData(rows)
+    setRowData(rows);
-  }, [globalVariables])
+  }, [globalVariables]);
 
   const DropdownEditor = ({ options, value, onValueChange }) => {
     return (
@@ -113,9 +126,9 @@ export default function GlobalVariablesPage() {
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
   function removeVariables() {
-    selectedRows.forEach(row => {
+    selectedRows.forEach((row) => {
-      removeGlobalVariable(row)
+      removeGlobalVariable(row);
-    })
+    });
   }
 
   return (