TypeScript for Dashboards components by bjoernricks · Pull Request #5478 · greenbone/gsa

bjoernricks · 2026-08-04T14:18:27Z

What

TypeScript for Dashboards components

Why

References

https://jira.greenbone.net/browse/GEA-1997

Checklist

Tests

github-actions · 2026-08-04T14:18:44Z

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

Snapshot Warnings

⚠️: No snapshots were found for the head SHA 9045de7.

Ensure that dependencies are being submitted on PR branches and consider enabling retry-on-snapshot-warnings. See the documentation for more information and troubleshooting advice.

Scanned Files

None

codecov · 2026-08-06T08:01:20Z

Codecov Report

❌ Patch coverage is 86.52695% with 45 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.85%. Comparing base (a0832ad) to head (9045de7).

Files with missing lines	Patch %	Lines
src/web/components/dashboard/Dashboard.tsx	65.90%	38 Missing and 7 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #5478      +/-   ##
==========================================
+ Coverage   81.75%   81.85%   +0.10%     
==========================================
  Files        1283     1284       +1     
  Lines       33661    33680      +19     
  Branches    10007    10067      +60     
==========================================
+ Hits        27519    27569      +50     
+ Misses       5489     5453      -36     
- Partials      653      658       +5

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Use snake-case naming for the module and add tests too.

Don't add the displayId explicitly because the passed component has already a displayId. Allow to specify which dashboard registry to use. This allows for better testability.

Comply to our naming scheme.

Function components are easier to read and to understand.

Move the default export using composed HOCs into an own module and replace it with a function component.

Also adapt/clarify all types for the dashboard and its displays.

Avoid re-rendering when the loadSettings and setDefaultSettings props are changed. Before this change, non stable loadSettings or setDefaultSettings triggered loading the settings on and on again. We just want to load the settings once on startup.

The list pages were re-rendering the dashboards over and over again because the identity of the dashboard settings changes with every render and therefore caused a re-render loop.

Mocking the whole module is not necessary. We are only interested in the output of one specific logger instance.

Apply suggestions from code review.

Simplify memoization and remove the needs for an additional getter function.

bjoernricks force-pushed the typescript-dashboards branch 4 times, most recently from ecf6485 to c5df78f Compare August 6, 2026 07:44

bjoernricks marked this pull request as ready for review August 6, 2026 08:01

bjoernricks requested a review from a team as a code owner August 6, 2026 08:01

bjoernricks added 10 commits August 6, 2026 10:51

Change: Use TypeScript for the dashboard utils module

92767b6

Change: Use TypeScript for dashboard registry module

5912c62

Use snake-case naming for the module and add tests too.

Change: Improve dashboard registry functions

d38173a

Don't add the displayId explicitly because the passed component has already a displayId. Allow to specify which dashboard registry to use. This allows for better testability.

Change: Rename Controls to DashboardControls

7b9d5d6

Comply to our naming scheme.

Change: Refactor DisplayComponent to a function component

d7c39d5

Function components are easier to read and to understand.

Change: Split DashboardControls into two function components

efa2015

Move the default export using composed HOCs into an own module and replace it with a function component.

Change: Use TypeScript for Dashboard component

2f2b72c

Change: Convert Dashboard component to a function component

24b7014

Also adapt/clarify all types for the dashboard and its displays.

Avoid re-rendering of Dashboards when settings haven't changed

e41a749

The list pages were re-rendering the dashboards over and over again because the identity of the dashboard settings changes with every render and therefore caused a re-render loop.

bjoernricks force-pushed the typescript-dashboards branch from c5df78f to e41a749 Compare August 6, 2026 08:51

greenbonebot enabled auto-merge (rebase) August 6, 2026 08:51