fix: add background color to TLP badges and include TLP in job API. C… (intelowlproject#3284)

* fix: add background color to TLP badges and include TLP in job API. Closes intelowlproject#3150

- Added backgroundColor property to TLP badge component styling
- Implemented accessible text color logic (black for CLEAR/GREEN/AMBER, white for RED)
- Added tlp field to JobSerializer to return TLP value in job details API response
- Fixed issue where TLP badges showed only borders without background colors on job report page

* test: add tlp field assertion in job retrieve test

* fix: use unique IDs for TLPTag badges and add unit tests

- Replace simple value-based IDs with counter-based unique IDs to prevent duplicate DOM IDs when multiple badges with same TLP value are rendered
- Add comprehensive Jest tests for TLPTag component covering:
  * Background and text color rendering for all TLP levels (CLEAR, RED, GREEN, AMBER)
  * Unique ID generation for multiple instances
- Addresses Copilot review feedback for duplicate ID issue and missing test coverage

* fix: resolve ESLint no-plusplus error in TLPTag unique ID generation

- Replace postfix increment (idCounter++) with prefix increment (idCounter += 1)
- Maintains unique ID generation for TLP badges without ESLint violations

* fix: resolve Prettier formatting issues in TLPTag tests

Author: AshwinGajbhiye

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,21 @@ import { TLPColors } from "../../constants/colorConst";
 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;
+  idCounter += 1;
+  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 +28,9 @@ export function TLPTag(props) {
       style={{
         borderRadius: 5,
         userSelect: "none",
+        backgroundColor: color,
         border: `1px solid ${color}`,
+        color: textColor,
       }}
       {...rest}
     >

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

@@ -0,0 +1,80 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import { render } from "@testing-library/react";
+import { TLPTag } from "../../../src/components/common/TLPTag";
+import { TLPColors } from "../../../src/constants/colorConst";
+
+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 and black text
+    expect(badge).toHaveStyle({
+      backgroundColor: TLPColors.CLEAR,
+      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 and white text
+    expect(badge).toHaveStyle({
+      backgroundColor: TLPColors.RED,
+      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 and black text
+    expect(badge).toHaveStyle({
+      backgroundColor: TLPColors.GREEN,
+      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 and black text
+    expect(badge).toHaveStyle({
+      backgroundColor: TLPColors.AMBER,
+      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)