fix: add background color to TLP badges and include TLP in job API. C…

api_app/serializers/job.py

@@ -507,6 +507,7 @@ class Meta:
             "tags",
             "comments",
             "status",
+            "tlp",
             "pivots_to_execute",
             "analyzers_to_execute",
             "analyzers_requested",

frontend/src/components/common/TLPTag.jsx

@@ -5,11 +5,20 @@
 import { TLPDescriptions } from "../../constants/miscConst";
 import { TlpChoices } from "../../constants/advancedSettingsConst";
 
+let idCounter = 0;
+
 export function TLPTag(props) {
   const { value, ...rest } = props;
-  const badgeId = `tlptag-badge__${value}`;
+  const uniqueId = React.useRef(idCounter++).current;
+  const badgeId = `tlptag-badge__${value}__${uniqueId}`;
   const color = TLPColors?.[value] || "#dfe1e2";
   const tooltipText = TLPDescriptions?.[value] || "invalid";
+  const textColorMap = {
+    CLEAR: "#000000",
+    GREEN: "#000000",
+    AMBER: "#000000",
+  };
+  const textColor = textColorMap[value] || "#FFFFFF";
 
   return value ? (
     <Badge
@@ -18,7 +27,9 @@
       style={{
         borderRadius: 5,
         userSelect: "none",
+        backgroundColor: color,
         border: `1px solid ${color}`,
+        color: textColor,
       }}
       {...rest}
     >

frontend/tests/components/common/TLPTag.test.jsx

@@ -0,0 +1,81 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { TLPTag } from "../../../src/components/common/TLPTag";
+
+describe("TLPTag component", () => {
+  test("CLEAR TLP renders with correct background and text color", () => {
+    const { container } = render(<TLPTag value="CLEAR" />);
+
+    const badge = container.querySelector('[id^="tlptag-badge__CLEAR"]');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveTextContent("CLEAR");
+
+    // CLEAR should have white background (#ffffff) and black text
+    expect(badge).toHaveStyle({
+      backgroundColor: "#ffffff",
+      color: "#000000",
+    });
+  });
+
+  test("RED TLP renders with correct background and text color", () => {
+    const { container } = render(<TLPTag value="RED" />);
+
+    const badge = container.querySelector('[id^="tlptag-badge__RED"]');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveTextContent("RED");
+
+    // RED should have red background (#ff0033) and white text
+    expect(badge).toHaveStyle({
+      backgroundColor: "#ff0033",
+      color: "#FFFFFF",
+    });
+  });
+
+  test("GREEN TLP renders with correct background and text color", () => {
+    const { container } = render(<TLPTag value="GREEN" />);
+
+    const badge = container.querySelector('[id^="tlptag-badge__GREEN"]');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveTextContent("GREEN");
+
+    // GREEN should have green background (#33ff00) and black text
+    expect(badge).toHaveStyle({
+      backgroundColor: "#33ff00",
+      color: "#000000",
+    });
+  });
+
+  test("AMBER TLP renders with correct background and text color", () => {
+    const { container } = render(<TLPTag value="AMBER" />);
+
+    const badge = container.querySelector('[id^="tlptag-badge__AMBER"]');
+    expect(badge).toBeInTheDocument();
+    expect(badge).toHaveTextContent("AMBER");
+
+    // AMBER should have amber background (#ffc000) and black text
+    expect(badge).toHaveStyle({
+      backgroundColor: "#ffc000",
+      color: "#000000",
+    });
+  });
+
+  test("Multiple TLPTag instances with same value have unique IDs", () => {
+    const { container } = render(
+      <>
+        <TLPTag value="RED" />
+        <TLPTag value="RED" />
+      </>,
+    );
+
+    const badges = container.querySelectorAll('[id^="tlptag-badge__RED"]');
+    expect(badges).toHaveLength(2);
+
+    // Ensure each badge has a unique ID
+    const id1 = badges[0].getAttribute("id");
+    const id2 = badges[1].getAttribute("id");
+    expect(id1).not.toEqual(id2);
+  });
+
+
+});

tests/api_app/test_views.py

@@ -290,6 +290,7 @@ def test_retrieve_200(self):
         self.assertEqual(response.status_code, 200)
         self.assertEqual(content["id"], self.job.id, msg=msg)
         self.assertEqual(content["status"], self.job.status, msg=msg)
+        self.assertEqual(content["tlp"], self.job.tlp, msg=msg)
         self.assertEqual(content["investigation_id"], self.investigation1.pk)
         self.assertEqual(content["investigation_name"], self.investigation1.name)
         self.assertEqual(content["analyzable_id"], self.analyzable.pk)