Enhancement: Add issues field to Jellyseerr widget (#5725)

Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>

docs/widgets/services/jellyseerr.md

@@ -7,7 +7,7 @@ Learn more about [Jellyseerr](https://github.com/Fallenbagel/jellyseerr).
 
 Find your API key under `Settings > General > API Key`.
 
-Allowed fields: `["pending", "approved", "available"]`.
+Allowed fields: `["pending", "approved", "available", "issues"]`.
 
 ```yaml
 widget:

public/locales/en/common.json

@@ -275,7 +275,8 @@
     "jellyseerr": {
         "pending": "Pending",
         "approved": "Approved",
-        "available": "Available"
+        "available": "Available",
+        "issues": "Open Issues"
     },
     "overseerr": {
         "pending": "Pending",

src/widgets/jellyseerr/component.jsx

@@ -3,21 +3,27 @@ import Container from "components/services/widget/container";
 
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
+export const jellyseerrDefaultFields = ["pending", "approved", "available"];
+
 export default function Component({ service }) {
   const { widget } = service;
 
-  const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
+  widget.fields = widget?.fields?.length ? widget.fields : jellyseerrDefaultFields;
+  const isIssueEnabled = widget.fields.includes("issues");
 
-  if (statsError) {
-    return <Container service={service} error={statsError} />;
+  const { data: statsData, error: statsError } = useWidgetAPI(widget, "request/count");
+  const { data: issueData, error: issueError } = useWidgetAPI(widget, isIssueEnabled ? "issue/count" : "");
+  if (statsError || (isIssueEnabled && issueError)) {
+    return <Container service={service} error={statsError ? statsError : issueError} />;
   }
 
-  if (!statsData) {
+  if (!statsData || (isIssueEnabled && !issueData)) {
     return (
       <Container service={service}>
         <Block label="jellyseerr.pending" />
         <Block label="jellyseerr.approved" />
         <Block label="jellyseerr.available" />
+        <Block label="jellyseerr.issues" />
       </Container>
     );
   }
@@ -27,6 +33,7 @@ export default function Component({ service }) {
       <Block label="jellyseerr.pending" value={statsData.pending} />
       <Block label="jellyseerr.approved" value={statsData.approved} />
       <Block label="jellyseerr.available" value={statsData.available} />
+      <Block label="jellyseerr.issues" value={`${issueData?.open} / ${issueData?.total}`} />
     </Container>
   );
 }

src/widgets/jellyseerr/widget.js

@@ -9,6 +9,10 @@ const widget = {
       endpoint: "request/count",
       validate: ["pending", "approved", "available"],
     },
+    "issue/count": {
+      endpoint: "issue/count",
+      validate: ["open", "total"],
+    },
   },
 };