Limit fields to max 4 and valid statuses

Author: fcornelius

docs/widgets/services/argocd.md

@@ -5,7 +5,7 @@ description: ArgoCD Widget Configuration
 
 Learn more about [ArgoCD](https://argo-cd.readthedocs.io/en/stable/).
 
-Allowed fields: `["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"]`
+Allowed fields (limited to a max of 4): `["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"]`
 
 ```yaml
 widget:

src/widgets/argocd/component.jsx

@@ -5,9 +5,19 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
 export default function Component({ service }) {
   const { widget } = service;
 
+  // Limits fields to available statuses
+  const validFields = ["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"]
+  widget.fields = widget.fields.filter(field => validFields.includes(field))
+
+    // Limits max number of displayed fields
+  const MAX_ALLOWED_FIELDS = 4;
+  if (widget.fields != null && widget.fields.length > MAX_ALLOWED_FIELDS) {
+    widget.fields = widget.fields.slice(0, MAX_ALLOWED_FIELDS);
+  }
+
   const { data: appsData, error: appsError } = useWidgetAPI(widget, "applications");
 
-  const appCounts = ["apps", "synced", "outOfSync", "healthy", "progressing", "degraded", "suspended", "missing"].map(
+  const appCounts = widget.fields.map(
     (status) => {
       if (status === "apps") {
         return { status, count: appsData?.items?.length };