@incident-io/backstage 0.1.0 → 0.2.0

package/src/components/EntityOnCallCard/index.test.tsx

@@ -0,0 +1,134 @@
+/// <reference types="@testing-library/jest-dom" />
+import { render, screen } from "@testing-library/react";
+import { vi } from "vitest";
+
+vi.mock("@backstage/core-plugin-api", () => ({
+  useApi: vi.fn(),
+  createApiRef: vi.fn(),
+}));
+
+vi.mock("@backstage/plugin-catalog-react", () => ({
+  useEntity: vi.fn(),
+}));
+
+vi.mock("../../hooks/useIncidentRequest", () => ({
+  useIdentity: vi.fn(),
+}));
+
+vi.mock("../../hooks/useOnCallRequest", () => ({
+  useOnCallData: vi.fn(),
+  useSchedule: vi.fn(),
+  useEscalationPath: vi.fn(),
+}));
+
+vi.mock("@backstage/core-components", () => ({
+  Progress: () => <div data-testid="progress" />,
+}));
+
+import { useEntity } from "@backstage/plugin-catalog-react";
+import { useIdentity } from "../../hooks/useIncidentRequest";
+import { useOnCallData, useSchedule, useEscalationPath } from "../../hooks/useOnCallRequest";
+import { EntityOnCallCard } from "./index";
+
+const mockEntity = {
+  metadata: { name: "core-server", namespace: "default" },
+};
+
+const mockIdentityLoaded = {
+  value: { identity: { dashboard_url: "https://app.incident.io" } },
+  loading: false,
+  error: undefined,
+};
+
+beforeEach(() => {
+  (useEntity as ReturnType<typeof vi.fn>).mockReturnValue({ entity: mockEntity });
+  (useIdentity as ReturnType<typeof vi.fn>).mockReturnValue(mockIdentityLoaded);
+  (useSchedule as ReturnType<typeof vi.fn>).mockReturnValue({ value: null, loading: false, error: undefined });
+  (useEscalationPath as ReturnType<typeof vi.fn>).mockReturnValue({ value: null, loading: false, error: undefined });
+});
+
+describe("EntityOnCallCard", () => {
+  it("should show a loading indicator while fetching", () => {
+    (useOnCallData as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: undefined,
+      loading: true,
+      error: undefined,
+    });
+
+    render(<EntityOnCallCard />);
+
+    expect(screen.getByTestId("progress")).toBeInTheDocument();
+  });
+
+  it("should show error alerts when EP and schedule fields are missing", () => {
+    (useOnCallData as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: {
+        escalationPath: null,
+        schedule: null,
+        escalationPathStatus: "no_field",
+        scheduleStatus: "no_field",
+      },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityOnCallCard />);
+
+    expect(screen.getByText(/No escalation path field on this catalog type/i)).toBeInTheDocument();
+    expect(screen.getByText(/No schedule field on this catalog type/i)).toBeInTheDocument();
+  });
+
+  it("should show warning alerts when EP and schedule fields are empty", () => {
+    (useOnCallData as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: {
+        escalationPath: null,
+        schedule: null,
+        escalationPathStatus: "empty",
+        scheduleStatus: "empty",
+      },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityOnCallCard />);
+
+    expect(screen.getByText(/Escalation path field is empty for this component/i)).toBeInTheDocument();
+    expect(screen.getByText(/Schedule field is empty for this component/i)).toBeInTheDocument();
+  });
+
+  it("should show escalation path and schedule names when loaded", () => {
+    (useOnCallData as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: {
+        escalationPath: { label: "Primary EP", literal: "ep-1" },
+        schedule: { label: "Primary Schedule", literal: "sched-1" },
+        escalationPathStatus: "ok",
+        scheduleStatus: "ok",
+      },
+      loading: false,
+      error: undefined,
+    });
+    (useEscalationPath as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: {
+        ep: { id: "ep-1", name: "Primary EP", path: [], current_responders: [] },
+        channelNames: {},
+      },
+      loading: false,
+      error: undefined,
+    });
+    (useSchedule as ReturnType<typeof vi.fn>).mockReturnValue({
+      value: {
+        id: "sched-1",
+        name: "Primary Schedule",
+        current_shifts: [],
+        config: { rotations: [] },
+      },
+      loading: false,
+      error: undefined,
+    });
+
+    render(<EntityOnCallCard />);
+
+    expect(screen.getByText("Primary EP")).toBeInTheDocument();
+    expect(screen.getByText("Primary Schedule")).toBeInTheDocument();
+  });
+});

package/src/components/EntityOnCallCard/index.tsx

@@ -0,0 +1,301 @@
+/*
+ * Copyright 2023 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Progress } from "@backstage/core-components";
+import { useEntity } from "@backstage/plugin-catalog-react";
+import {
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Chip,
+  Divider,
+  IconButton,
+  Tooltip,
+  Typography,
+  Collapse,
+} from "@material-ui/core";
+import CachedIcon from "@material-ui/icons/Cached";
+import OpenInBrowserIcon from "@material-ui/icons/OpenInBrowser";
+import { Alert } from "@material-ui/lab";
+import { useState } from "react";
+import { useIdentity } from "../../hooks/useIncidentRequest";
+import {
+  useOnCallData,
+  useSchedule,
+  useEscalationPath,
+  ScheduleRotation,
+  EscalationPathNode,
+  EscalationPathTarget,
+} from "../../hooks/useOnCallRequest";
+
+// ── Schedule helpers ──────────────────────────────────────────────────────────
+
+const intervalTypeToUnit = (type: string): string => {
+  const map: Record<string, string> = { hourly: "hour", daily: "day", weekly: "week", monthly: "month" };
+  return map[type] ?? type;
+};
+
+const formatInterval = (rotation: ScheduleRotation): string => {
+  const h = rotation.handovers[0];
+  if (!h) return "";
+  const unit = intervalTypeToUnit(h.interval_type ?? '');
+  return `Rotate every ${h.interval} ${unit}${h.interval !== 1 ? "s" : ""}`;
+};
+
+const formatShiftEnd = (isoString: string): string =>
+  new Date(isoString).toLocaleString("en-GB", {
+    weekday: "short", day: "numeric", month: "short", hour: "2-digit", minute: "2-digit",
+  });
+
+const RotationDisplay = ({ rotation, currentUserId, currentShiftEnd }: {
+  rotation: ScheduleRotation;
+  currentUserId: string | null;
+  currentShiftEnd: string | null;
+}) => (
+  <Box mt={1}>
+    <Typography variant="caption" color="textSecondary">
+      {formatInterval(rotation)}
+    </Typography>
+    <Box display="flex" flexDirection="column" mt={0.5} style={{ gap: 4 }}>
+      {(() => {
+        let onCallBadgeShown = false;
+        return rotation.users.map((user) => {
+          const isCurrent = user.id === currentUserId;
+          const showBadge = isCurrent && !onCallBadgeShown;
+          if (showBadge) onCallBadgeShown = true;
+          return (
+            <Box key={user.id} display="flex" alignItems="center" style={{ gap: 8 }}>
+              <Box width={10} height={10} borderRadius="50%" bgcolor={showBadge ? "primary.main" : "grey.400"} flexShrink={0} />
+              <Box display="flex" alignItems="center" style={{ gap: 6 }}>
+                <Typography variant="body2" style={{ fontWeight: showBadge ? 600 : 400 }}>
+                  {user.name}
+                </Typography>
+                {showBadge && <Chip label="on call" size="small" color="primary" />}
+                {showBadge && currentShiftEnd && (
+                  <Typography variant="caption" color="textSecondary">
+                    until {formatShiftEnd(currentShiftEnd)}
+                  </Typography>
+                )}
+              </Box>
+            </Box>
+          );
+        });
+      })()}
+    </Box>
+  </Box>
+);
+
+// ── Escalation path helpers ───────────────────────────────────────────────────
+
+const formatCondition = (cond: EscalationPathNode['if_else'] extends undefined ? never : NonNullable<EscalationPathNode['if_else']>['conditions'][0]): string => {
+  const subject = cond.subject.label.replace(/^Escalation → /i, "");
+  const op = cond.operation.label;
+  const values = cond.param_bindings.flatMap(b => b.array_value?.map(v => v.label) ?? []);
+  return values.length > 0 ? `${subject} ${op} ${values.join(", ")}` : `${subject} ${op}`;
+};
+
+const targetLabel = (t: EscalationPathTarget, scheduleId: string | null, scheduleName: string | null, channelNames: Record<string, string>): string => {
+  if (t.type === "schedule") return t.id === scheduleId && scheduleName ? scheduleName : "schedule";
+  if (t.type === "slack_channel") return `${channelNames[t.id] ?? t.id}`;
+  return "user";
+};
+
+const renderEscalationNodes = (
+  nodes: EscalationPathNode[],
+  scheduleId: string | null,
+  scheduleName: string | null,
+  channelNames: Record<string, string>,
+  depth = 0,
+): React.ReactNode[] =>
+  nodes.map((node) => {
+    const indent = depth * 16;
+
+    if ((node.type === "level" && node.level) || (node.type === "notify_channel" && node.notify_channel)) {
+      const data = node.level ?? node.notify_channel!;
+      const minutes = Math.floor((data.time_to_ack_seconds ?? 0) / 60);
+      const label = data.targets.map(t => targetLabel(t, scheduleId, scheduleName, channelNames)).join(", ");
+      const prefix = node.type === "notify_channel" ? "Notify" : "Page";
+      return (
+        <Box key={node.id} ml={`${indent}px`} display="flex" alignItems="center" style={{ gap: 6 }} mt={0.5}>
+          <Typography variant="body2">└ {prefix}: {label}</Typography>
+          <Typography variant="caption" color="textSecondary">· {minutes} min to ack</Typography>
+        </Box>
+      );
+    }
+
+    if (node.type === "repeat" && node.repeat) {
+      return (
+        <Box key={node.id} ml={`${indent}px`} mt={0.5}>
+          <Typography variant="body2" color="textSecondary">
+            └ Retry {node.repeat.repeat_times}x from start
+          </Typography>
+        </Box>
+      );
+    }
+
+    if (node.type === "if_else" && node.if_else) {
+      const condLabel = node.if_else.conditions.map(formatCondition).join(", ");
+      return (
+        <Box key={node.id} ml={`${indent}px`} mt={0.5}>
+          <Typography variant="body2"><strong>If {condLabel}:</strong></Typography>
+          {node.if_else.then_path.length > 0
+            ? renderEscalationNodes(node.if_else.then_path, scheduleId, scheduleName, channelNames, depth + 1)
+            : <Box ml="16px"><Typography variant="body2" color="textSecondary">└ Do nothing</Typography></Box>
+          }
+          <Typography variant="body2" style={{ marginTop: 4 }}><strong>Otherwise:</strong></Typography>
+          {node.if_else.else_path.length > 0
+            ? renderEscalationNodes(node.if_else.else_path, scheduleId, scheduleName, channelNames, depth + 1)
+            : <Box ml="16px"><Typography variant="body2" color="textSecondary">└ Do nothing</Typography></Box>
+          }
+        </Box>
+      );
+    }
+
+    return null;
+  });
+
+// ── Card ──────────────────────────────────────────────────────────────────────
+
+export const EntityOnCallCard = () => {
+  const { entity } = useEntity();
+  const [reload, setReload] = useState(false);
+  const [showPath, setShowPath] = useState(false);
+
+  const entityExternalId = `${entity.metadata.namespace}/${entity.metadata.name}`;
+
+  const { value, loading, error } = useOnCallData(entityExternalId, [reload]);
+  const { value: schedule, loading: scheduleLoading, error: scheduleError } = useSchedule(
+    value?.schedule?.literal ?? null,
+    [value?.schedule?.literal, reload],
+  );
+  const { value: escalationPathResult, loading: escalationLoading, error: escalationError } = useEscalationPath(
+    value?.escalationPath?.literal ?? null,
+    [value?.escalationPath?.literal, reload],
+  );
+  const escalationPath = escalationPathResult?.ep ?? null;
+  const channelNames = escalationPathResult?.channelNames ?? {};
+
+  const { value: identity } = useIdentity();
+  const baseUrl = identity?.identity.dashboard_url ?? "app.incident.io";
+
+  const anyLoading = loading || scheduleLoading || escalationLoading;
+  const anyError = error || scheduleError || escalationError;
+
+  return (
+    <Card>
+      <CardHeader
+        title="On-call"
+        action={
+          <IconButton aria-label="Refresh" title="Refresh" onClick={() => setReload(!reload)}>
+            <CachedIcon />
+          </IconButton>
+        }
+      />
+      <Divider />
+      <CardContent>
+        {anyLoading && <Progress />}
+        {anyError && <Alert severity="error">{anyError.message}</Alert>}
+        {!loading && !error && value && (
+          <>
+            {/* Escalation path */}
+            <Box mb={2}>
+              <Typography variant="subtitle1"><strong>Escalation path</strong></Typography>
+              {value.escalationPathStatus === 'no_field' && (
+                <Alert severity="error">No escalation path field on this catalog type — add one in incident.io.</Alert>
+              )}
+              {value.escalationPathStatus === 'empty' && (
+                <Alert severity="warning">Escalation path field is empty for this component.</Alert>
+              )}
+              {value.escalationPathStatus === 'ok' && escalationPath && (
+                <>
+                  <Box display="flex" alignItems="center" justifyContent="space-between">
+                    <Typography variant="subtitle1">{escalationPath.name}</Typography>
+                    <Tooltip title="View in incident.io" placement="top">
+                      <IconButton size="small" href={`${baseUrl}/on-call/escalation-paths/${escalationPath.id}`} target="_blank" rel="noopener noreferrer" color="primary">
+                        <OpenInBrowserIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </Box>
+                  {escalationPath.current_responders && escalationPath.current_responders.length > 0 && (
+                    <Box mb={1}>
+                      <Typography variant="body2"><strong>Current responders:</strong></Typography>
+                      {escalationPath.current_responders.map((r) => (
+                        <Typography key={r.id} variant="body2">{r.name}</Typography>
+                      ))}
+                    </Box>
+                  )}
+                  <Box
+                    display="inline-flex"
+                    alignItems="center"
+                    style={{ cursor: "pointer", gap: 4 }}
+                    onClick={() => setShowPath(p => !p)}
+                    mt={0.5}
+                    mb={0.5}
+                  >
+                    <Typography variant="button" color="primary">
+                      {showPath ? "Hide path ▲" : "Show path ▼"}
+                    </Typography>
+                  </Box>
+                  <Collapse in={showPath}>
+                    {renderEscalationNodes(
+                      escalationPath.path,
+                      value.schedule?.literal ?? null,
+                      schedule?.name ?? null,
+                      channelNames,
+                    )}
+                  </Collapse>
+                </>
+              )}
+            </Box>
+
+            <Divider />
+
+            {/* Schedule */}
+            <Box mt={2}>
+              <Typography variant="subtitle1"><strong>Schedule</strong></Typography>
+              {value.scheduleStatus === 'no_field' && (
+                <Alert severity="error">No schedule field on this catalog type — add one in incident.io.</Alert>
+              )}
+              {value.scheduleStatus === 'empty' && (
+                <Alert severity="warning">Schedule field is empty for this component.</Alert>
+              )}
+              {value.scheduleStatus === 'ok' && schedule && (
+                <>
+                <Box display="flex" alignItems="center" justifyContent="space-between">
+                  <Typography variant="subtitle1">{schedule.name}</Typography>
+                  <Tooltip title="View in incident.io" placement="top">
+                    <IconButton size="small" href={`${baseUrl}/on-call/schedules/${schedule.id}`} target="_blank" rel="noopener noreferrer" color="primary">
+                      <OpenInBrowserIcon fontSize="small" />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+                {schedule.config?.rotations.map((rotation) => (
+                  <RotationDisplay
+                    key={rotation.id}
+                    rotation={rotation}
+                    currentUserId={schedule.current_shifts?.[0]?.user?.id ?? null}
+                    currentShiftEnd={schedule.current_shifts?.[0]?.end_at ?? null}
+                  />
+                ))}
+              </>
+              )}
+            </Box>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};

package/src/components/HomePageAlertCard/Content.test.tsx

@@ -0,0 +1,56 @@
+/// <reference types="@testing-library/jest-dom" />
+import { TestApiProvider, renderInTestApp } from "@backstage/test-utils";
+import { vi, type Mocked } from "vitest";
+import { IncidentApi, IncidentApiRef } from "../../api/client";
+import { HomePageAlertCardContent } from "./Content";
+
+const mockAlert = {
+  id: "alert-1",
+  title: "High error rate",
+  status: "firing",
+  created_at: "2026-04-09T12:00:00Z",
+  updated_at: "2026-04-09T12:00:00Z",
+  deduplication_key: "abc123",
+  alert_source_id: "src-1",
+  attributes: [],
+};
+
+const makeIncidentApi = (
+  alerts: typeof mockAlert[],
+): Mocked<Partial<IncidentApi>> => ({
+  request: vi.fn().mockImplementation(({ path }: { path: string }) => {
+    if (path.startsWith("/v2/alerts")) {
+      return Promise.resolve({ alerts });
+    }
+    if (path === "/v2/alert_sources") {
+      return Promise.resolve({ alert_sources: [] });
+    }
+    return Promise.resolve({});
+  }),
+});
+
+const renderContent = (alerts: typeof mockAlert[]) =>
+  renderInTestApp(
+    <TestApiProvider apis={[[IncidentApiRef, makeIncidentApi(alerts)]]}>
+      <HomePageAlertCardContent />
+    </TestApiProvider>,
+  );
+
+describe("HomePageAlertCardContent", () => {
+  it("should render an alert chip when an alert is returned", async () => {
+    const { findByTestId } = await renderContent([mockAlert]);
+    expect(await findByTestId("chip-firing")).toBeInTheDocument();
+  });
+
+  it("should show empty state when API returns no alerts", async () => {
+    const { findByText } = await renderContent([]);
+    expect(await findByText(/No firing alerts\./i)).toBeInTheDocument();
+  });
+
+  it("should render Firing, Resolved, and All tabs", async () => {
+    const { findByText } = await renderContent([]);
+    expect(await findByText("Firing")).toBeInTheDocument();
+    expect(await findByText("Resolved")).toBeInTheDocument();
+    expect(await findByText("All")).toBeInTheDocument();
+  });
+});

package/src/components/HomePageAlertCard/Content.tsx

@@ -0,0 +1,85 @@
+import { useState } from "react";
+import { Progress } from "@backstage/core-components";
+import { configApiRef, useApi } from "@backstage/core-plugin-api";
+import Link from "@material-ui/core/Link";
+import { Alert } from "@material-ui/lab";
+import { Box, Divider, List, Tab, Tabs, Typography } from "@material-ui/core";
+import { useAlertList, useAlertSourceList } from "../../hooks/useIncidentRequest";
+import { AlertListItem } from "../AlertListItem";
+
+type StatusFilter = "firing" | "resolved" | undefined;
+
+const STATUS_TABS: { label: string; value: StatusFilter }[] = [
+  { label: "Firing", value: "firing" },
+  { label: "Resolved", value: "resolved" },
+  { label: "All", value: undefined },
+];
+
+export const HomePageAlertCardContent = () => {
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("firing");
+
+  const config = useApi(configApiRef);
+  const baseUrl =
+    config.getOptionalString("incident.baseUrl") || "https://app.incident.io";
+
+  const { loading, error, value } = useAlertList(statusFilter, [statusFilter]);
+  const { value: sourcesResponse } = useAlertSourceList();
+
+  const alerts = value?.alerts ?? [];
+  const sourceById = Object.fromEntries(
+    (sourcesResponse?.alert_sources ?? []).map(s => [s.id, s]),
+  );
+
+  const currentTabIndex = STATUS_TABS.findIndex(t => t.value === statusFilter);
+
+  if (loading) return <Progress />;
+  if (error) return <Alert severity="error">{error.message}</Alert>;
+
+  return (
+    <>
+      <Tabs
+        value={currentTabIndex}
+        onChange={(_, idx) => setStatusFilter(STATUS_TABS[idx].value)}
+        indicatorColor="primary"
+        textColor="primary"
+        style={{ minHeight: "auto" }}
+      >
+        {STATUS_TABS.map(tab => (
+          <Tab key={tab.label} label={tab.label} style={{ minHeight: "auto", padding: "0px 12px" }} />
+        ))}
+      </Tabs>
+      <Divider />
+      {alerts.length > 0 && (
+        <Typography variant="subtitle1">
+          There are <strong>{alerts.length}</strong> {statusFilter ?? ""} alerts.
+        </Typography>
+      )}
+      {alerts.length === 0 && (
+        <Typography variant="subtitle1">No {statusFilter ?? ""} alerts.</Typography>
+      )}
+      <Box style={{ maxHeight: 400, overflowY: "auto" }}>
+        <List dense>
+          {alerts.map(alert => (
+            <AlertListItem
+              key={alert.id}
+              alert={alert}
+              baseUrl={baseUrl}
+              source={sourceById[alert.alert_source_id]?.name ?? "-"}
+              priority={alert.attributes.find(a => a.attribute.name === "Priority")?.value?.label}
+            />
+          ))}
+        </List>
+      </Box>
+      <Typography variant="subtitle1">
+        Click to{" "}
+        <Link target="_blank" href={`${baseUrl}/on-call/alerts`}>
+          see more.
+        </Link>
+      </Typography>
+    </>
+  );
+};
+
+export const Content = () => {
+  return <HomePageAlertCardContent />;
+};

package/src/components/HomePageAlertCard/index.tsx

@@ -0,0 +1 @@
+export { Content } from "./Content";

package/src/components/HomePageIncidentCard/Content.test.tsx

@@ -1,11 +1,12 @@
+/// <reference types="@testing-library/jest-dom" />
 import { TestApiProvider, renderInTestApp } from "@backstage/test-utils";
-import React from "react";
+import { vi, type Mocked } from "vitest";
 import { IncidentApi, IncidentApiRef } from "../../api/client";
 import { HomePageIncidentCardContent } from "./Content";
 import { ContextProvider } from "./Context";
 
-const mockIncidentApi: jest.Mocked<Partial<IncidentApi>> = {
-  request: jest.fn().mockResolvedValue({
+const mockIncidentApi: Mocked<Partial<IncidentApi>> = {
+  request: vi.fn().mockResolvedValue({
     incidents: [
       {
         id: "incident-id",

package/src/components/HomePageIncidentCard/Content.tsx

@@ -1,7 +1,7 @@
+import { useMemo } from "react";
 import { Progress } from "@backstage/core-components";
 import Link from "@material-ui/core/Link";
 import { Alert } from "@material-ui/lab";
-import React from "react";
 import { useIncidentList } from "../../hooks/useIncidentRequest";
 import { Typography, List } from "@material-ui/core";
 import { IncidentListItem } from "../IncidentListItem";
@@ -14,7 +14,7 @@ export const HomePageIncidentCardContent = () => {
   const baseUrl =
     config.getOptionalString("incident.baseUrl") || "https://app.incident.io";
 
-  const query = React.useMemo(() => {
+  const query = useMemo(() => {
     const params = new URLSearchParams();
     params.set(`${filterType}[one_of]`, filter);
     return params;

package/src/components/HomePageIncidentCard/Context.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo } from "react";
 
 type HomePageIncidentCardContextValue = {
   filterType: "status_category" | "status";
@@ -10,7 +10,7 @@ const Context = createContext<HomePageIncidentCardContextValue | undefined>(
 );
 
 export const ContextProvider = (props: {
-  children: React.JSX.Element;
+  children: JSX.Element;
   filterType?: "status_category" | "status";
   filter?: string;
 }) => {