From 5e938b69a0c1cef1696b582155bf31a341719f61 Mon Sep 17 00:00:00 2001
From: Felix Cornelius <mail@felixcornelius.de>
Date: Tue, 19 Nov 2024 21:03:32 +0100
Subject: [PATCH] Limit fields to max 4 and valid statuses

---
 docs/widgets/services/argocd.md  |  2 +-
 src/widgets/argocd/component.jsx | 32 ++++++++++++++++++++------------
 2 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/docs/widgets/services/argocd.md b/docs/widgets/services/argocd.md
index 1587bd9ac..6a81b8db9 100644
--- a/docs/widgets/services/argocd.md
+++ b/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:
diff --git a/src/widgets/argocd/component.jsx b/src/widgets/argocd/component.jsx
index aac29cf06..ec7f6b522 100644
--- a/src/widgets/argocd/component.jsx
+++ b/src/widgets/argocd/component.jsx
@@ -5,20 +5,28 @@ 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(
-    (status) => {
-      if (status === "apps") {
-        return { status, count: appsData?.items?.length };
-      }
-      const apiStatus = status.charAt(0).toUpperCase() + status.slice(1);
-      const count = appsData?.items?.filter(
-        (item) => item.status?.sync?.status === apiStatus || item.status?.health?.status === apiStatus,
-      ).length;
-      return { status, count };
-    },
-  );
+  const appCounts = widget.fields.map((status) => {
+    if (status === "apps") {
+      return { status, count: appsData?.items?.length };
+    }
+    const apiStatus = status.charAt(0).toUpperCase() + status.slice(1);
+    const count = appsData?.items?.filter(
+      (item) => item.status?.sync?.status === apiStatus || item.status?.health?.status === apiStatus,
+    ).length;
+    return { status, count };
+  });
 
   if (appsError) {
     return <Container service={service} error={appsError} />;