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

AshwinGajbhiye · 2026-02-07T05:11:35Z

Description

Fixed TLP badge display issue where badges were showing only borders without background colors on the job report page.

This PR includes:

Frontend fix: Added backgroundColor and accessible text colors to TLP badge component
Backend fix: Added tlp field to JobSerializer so the API returns TLP value in job details

Changes made:

Added backgroundColor property to TLPTag component styling
Implemented accessible text color logic (black text for CLEAR/GREEN/AMBER, white text for RED) based on Copilot AI review suggestions
Added tlp field to JobSerializer to return TLP value in job details API response

Closes #3150

Type of change

Bug fix (non-breaking change which fixes an issue).
New feature (non-breaking change which adds functionality).
Breaking change (fix or feature that would cause existing functionality to not work as expected).

ScreenShot

Checklist

Important Rules

If you miss to compile the Checklist properly, your PR won't be reviewed by the maintainers.
Everytime you make changes to the PR and you think the work is done, you should explicitly ask for a review by using GitHub's reviewing system detailed here.

…loses 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

Copilot

Pull request overview

Fixes incorrect TLP badge rendering in the job report UI and ensures the job retrieve API returns the tlp field so the frontend can display it consistently (closes #3150).

Changes:

Add backgroundColor and explicit text color selection for TLPTag badges.
Include tlp in JobSerializer fields so /api/jobs/{id} returns the value.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
frontend/src/components/common/TLPTag.jsx	Updates TLP badge styling (background + text color) used across job/investigation/plugin UIs.
api_app/serializers/job.py	Adds `tlp` to the job retrieve serializer output.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-07T05:14:50Z

frontend/src/components/common/TLPTag.jsx

  const badgeId = `tlptag-badge__${value}`;
  const color = TLPColors?.[value] || "#dfe1e2";
  const tooltipText = TLPDescriptions?.[value] || "invalid";
+  const textColorMap = {
+    CLEAR: "#000000",


badgeId is derived only from the TLP value, which will produce duplicate DOM ids whenever multiple rows/cards render the same TLP (common in job/investigation tables). Duplicate ids break HTML validity and can cause UncontrolledTooltip to attach to the wrong element. Consider generating a unique id per component instance (e.g., React useId()), or accept an explicit id prop and fall back to a unique default.

Copilot · 2026-02-07T05:14:50Z

frontend/src/components/common/TLPTag.jsx

@@ -18,7 +24,9 @@ export function TLPTag(props) {
      style={{
        borderRadius: 5,
        userSelect: "none",
+        backgroundColor: color,
        border: `1px solid ${color}`,
+        color: textColor,


The new background/text color styling logic isn’t covered by any frontend unit test (there are no existing tests exercising TLPTag). Since this component is reused across multiple pages, add a small Jest test to assert the rendered badge has the expected backgroundColor and text color for at least one light TLP (e.g. CLEAR) and RED.

api_app/serializers/job.py

- 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

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-07T07:49:48Z

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

+    // 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",
+    });


The tests hardcode TLP hex colors instead of asserting against the shared TLPColors constant. Using the constant (or another shared source of truth) would reduce duplication and keep the test aligned if the palette ever changes.

Copilot · 2026-02-07T07:49:49Z

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";


screen is imported from @testing-library/react but never used in this test file. Please remove the unused import to keep the test clean and avoid future lint noise if test files are ever added to the lint target.

Suggested change

import { render, screen } from "@testing-library/react";

import { render } from "@testing-library/react";

mlodic

please address CI failures.

Also pull the most recent changes from develop and test it again because there were some GUI changes

- Import TLPColors constant to avoid hardcoding hex values in tests - Remove unused screen import from @testing-library/react - Addresses Copilot review feedback

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

Copilot

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (1)

frontend/src/components/common/TLPTag.jsx:40

{...rest} is spread after id={badgeId}, so a caller-provided id will override the badge's DOM id while the tooltip still targets badgeId, breaking the tooltip (and potentially reintroducing the original issue). Consider explicitly handling an id prop (use it for both the <Badge> and tooltip target) or ensure id cannot be overridden by moving {...rest} before id={badgeId} / omitting id from rest.

    <Badge
      id={badgeId}
      color={null}
      style={{
        borderRadius: 5,
        userSelect: "none",
        backgroundColor: color,
        border: `1px solid ${color}`,
        color: textColor,
      }}
      {...rest}
    >
      {value}
      <UncontrolledTooltip target={badgeId} placement="top" fade={false}>
        {tooltipText}
      </UncontrolledTooltip>

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot AI review requested due to automatic review settings February 7, 2026 05:11

Copilot started reviewing on behalf of AshwinGajbhiye February 7, 2026 05:12 View session

Copilot AI reviewed Feb 7, 2026

View reviewed changes

AshwinGajbhiye added 2 commits February 7, 2026 11:22

test: add tlp field assertion in job retrieve test

bacebc7

Copilot AI review requested due to automatic review settings February 7, 2026 07:46

Copilot started reviewing on behalf of AshwinGajbhiye February 7, 2026 07:46 View session

Copilot AI reviewed Feb 7, 2026

View reviewed changes

mlodic requested changes Feb 7, 2026

View reviewed changes

AshwinGajbhiye added 2 commits February 8, 2026 00:10

refactor: use TLPColors constant in tests and remove unused import

93c1928

- Import TLPColors constant to avoid hardcoding hex values in tests - Remove unused screen import from @testing-library/react - Addresses Copilot review feedback

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

2cc5161

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

Copilot AI review requested due to automatic review settings February 8, 2026 08:37

Copilot started reviewing on behalf of AshwinGajbhiye February 8, 2026 08:37 View session

Copilot AI reviewed Feb 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

AshwinGajbhiye commented Feb 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

Copilot AI Feb 7, 2026

Uh oh!

mlodic left a comment

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	import { render, screen } from "@testing-library/react";
	import { render } from "@testing-library/react";

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

AshwinGajbhiye commented Feb 7, 2026

Description

Type of change

ScreenShot

Checklist

Important Rules

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 7, 2026

Choose a reason for hiding this comment

Uh oh!

mlodic left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants