carverauto/serviceradar

Fork 0

updated to tailwind css v4 / fixing glob security issue #2519

Merged

mfreeman451 merged 3 commits from refs/pull/2519/head into main

2025-12-08 04:02:53 +00:00

mfreeman451 commented

2025-12-08 03:30:56 +00:00

(Migrated from github.com)

Owner

Imported from GitHub pull request.

Original GitHub pull request: #2075
Original author: @mfreeman451
Original URL: https://github.com/carverauto/serviceradar/pull/2075
Original created: 2025-12-08T03:30:56Z
Original updated: 2025-12-08T04:02:56Z
Original head: carverauto/serviceradar:chore/update_web_glob_lib
Original base: main
Original merged: 2025-12-08T04:02:53Z by @mfreeman451

User description

IMPORTANT: Please sign the Developer Certificate of Origin

Thank you for your contribution to ServiceRadar. Please note, when contributing, the developer must include
a DCO sign-off statement indicating the DCO acceptance in one commit message. Here
is an example DCO Signed-off-by line in a commit message:

Signed-off-by: J. Doe <j.doe@domain.com>

Describe your changes

Issue ticket number and link

Code checklist before requesting a review

I have signed the DCO?
The build completes without errors?
All tests are passing when running make test?

PR Type

Enhancement

Description

Upgraded Tailwind CSS from v3 to v4 with comprehensive codebase migration
Migrated globals.css to Tailwind v4 syntax using @import and @plugin directives with custom theme configuration
Updated PostCSS configuration to use @tailwindcss/postcss plugin for v4 compatibility
Removed legacy tailwind.config.ts file (replaced by inline configuration in globals.css)
Systematically updated utility class names across 40+ components:
- shadow → shadow-sm, shadow-sm → shadow-xs for refined shadow hierarchy
- focus:outline-none → focus:outline-hidden for improved focus state semantics
- flex-shrink-0 → shrink-0 for shortened class names
- break-words → wrap-break-word for text wrapping utilities
- backdrop-blur-sm → backdrop-blur-xs for blur effect consistency
- min-h-[2.25rem] → min-h-9 for standardized spacing
Updated package.json dependencies: upgraded tailwindcss to v4.1.17, moved tailwindcss-animate to devDependencies, added @tailwindcss/postcss
Updated pnpm-lock.yaml with new build tooling including lightningcss v1.30.2 for CSS processing

Diagram Walkthrough

flowchart LR
  A["Tailwind CSS v3"] -->|"Upgrade to v4"| B["Update Dependencies"]
  B -->|"New Plugin"| C["@tailwindcss/postcss"]
  A -->|"Migrate Syntax"| D["globals.css v4"]
  D -->|"Remove"| E["tailwind.config.ts"]
  A -->|"Update Classes"| F["40+ Components"]
  F -->|"shadow utilities"| G["shadow-sm/shadow-xs"]
  F -->|"focus states"| H["outline-hidden"]
  F -->|"flex utilities"| I["shrink-0"]

File Walkthrough

Relevant files

Enhancement

40 files

globals.css `Tailwind CSS v4 migration with theme configuration` web/src/app/globals.css Migrated from Tailwind CSS v3 directives (`@tailwind` `base/components/utilities`) to v4 syntax with `@import` and `@plugin` Added custom theme configuration with CSS variables for colors, spacing, and animations Defined custom utilities and keyframes for accordion animations Added compatibility layer for border colors to maintain v3 appearance	+87/-3
page.tsx `Shadow and focus outline utility updates for Tailwind v4` web/src/app/admin/edge-packages/page.tsx Replaced `shadow-sm` with `shadow-xs` across multiple button and card elements Changed `focus:outline-none` to `focus:outline-hidden` for focus state styling Updated shadow utilities on form inputs, buttons, and container elements	+29/-29
SightingsDashboard.tsx `Shadow and focus outline utility updates for Tailwind v4` web/src/components/Identity/SightingsDashboard.tsx Replaced `shadow-sm` with `shadow-xs` on multiple card and container elements Changed `focus:outline-none` to `focus:outline-hidden` on input fields Updated text in promotion hint from "shadow mode" to "shadow-sm mode"	+18/-18
metric-components.jsx `Shadow utility updates for metric components` web/src/components/Metrics/metric-components.jsx Replaced `shadow` with `shadow-sm` on chart and metric card containers Updated shadow utilities across CPU, memory, filesystem, and process metric components	+19/-19
LANDiscoveryDashboard.tsx `Shadow utility updates for LAN discovery dashboard` web/src/components/Network/LANDiscoveryDashboard.tsx Replaced `shadow` with `shadow-sm` on dashboard cards, stat cards, and container elements Updated shadow utilities across error states, filters, and data display sections	+11/-11
SNMPDashboard.tsx `Shadow and focus outline utility updates for SNMP dashboard` web/src/components/Network/SNMPDashboard.tsx Replaced `shadow` with `shadow-sm` on SNMP metric cards and chart containers Changed `peer-focus:outline-none` to `peer-focus:outline-hidden` on toggle switch	+9/-9
DeviceBasedDiscoveryDashboard.tsx `Shadow and focus outline utility updates for device discovery` web/src/components/Network/DeviceBasedDiscoveryDashboard.tsx Replaced `shadow` with `shadow-sm` on dashboard cards and container elements Changed `focus:outline-none` to `focus:outline-hidden` on stat card buttons	+11/-11
SysmonOsxDetails.tsx `Shadow utility updates for sysmon-osx details component` web/src/components/Service/SysmonOsxDetails.tsx Replaced `shadow` with `shadow-sm` on metric cards and detail sections Updated shadow utilities across status cards and cluster information displays	+9/-9
RPerfDashboard.tsx `Shadow utility updates for rperf dashboard` web/src/components/Network/RPerfDashboard.tsx Replaced `shadow` with `shadow-sm` on metric cards and chart containers Changed `shadow-sm` to `shadow-xs` on active time range button	+9/-9
Dashboard.tsx `Shadow utility updates for service dashboard` web/src/components/Service/Dashboard.tsx Replaced `shadow` with `shadow-sm` on service dashboard cards and containers Updated shadow utilities across response time, ICMP status, and error state displays	+9/-9
DeviceDetail.tsx `Focus outline and text wrapping utility updates` web/src/components/Devices/DeviceDetail.tsx Changed `focus:outline-none` to `focus:outline-hidden` on metric type selector Updated `focus:ring` to `focus:ring-3` for focus ring styling Replaced `break-words` with `wrap-break-word` on text elements	+5/-5
page.tsx `Shadow utility updates for identity config page` web/src/app/identity/config/page.tsx Replaced `shadow-sm` with `shadow-xs` on configuration section cards Updated shadow utilities across feature flags, promotion, fingerprinting, reaper, and drift protection sections	+5/-5
NetworkSweepView.jsx `Shadow utility updates for network sweep view` web/src/components/Network/NetworkSweepView.jsx Replaced `shadow` with `shadow-sm` on host details and ICMP stats containers Updated shadow utilities across standalone and embedded view modes	+5/-5
CorrelationDashboard.tsx `Shadow utility updates for correlation dashboard` web/src/components/Observability/CorrelationDashboard.tsx Replaced `shadow` with `shadow-sm` on stats cards displaying logs, spans, and metrics found	+3/-3
ObservabilityWidget.tsx `Flex shrink utility updates for observability widget` web/src/components/Analytics/ObservabilityWidget.tsx Replaced `flex-shrink-0` with `shrink-0` on header and metric sections Updated flex shrink utilities across widget layout elements	+4/-4
CriticalLogsWidget.tsx `Flex shrink utility updates for critical logs widget` web/src/components/Analytics/CriticalLogsWidget.tsx Replaced `flex-shrink-0` with `shrink-0` on header, icon, and action elements Updated flex shrink utilities across log entry display components	+4/-4
error-components.jsx `Shadow and flex shrink utility updates for error components` web/src/components/Metrics/error-components.jsx Replaced `shadow` with `shadow-sm` on error message and empty state containers Changed `flex-shrink-0` to `shrink-0` on alert icon	+4/-4
Header.tsx `Flex shrink and focus outline utility updates for header` web/src/components/Header.tsx Changed `flex-shrink-0` to `shrink-0` on header element Replaced `focus:outline-none` with `focus:outline-hidden` on search input and submit button	+3/-3
DuskDashboard.jsx `Shadow utility updates for dusk dashboard` web/src/components/Checkers/DuskDashboard.jsx Replaced `shadow` with `shadow-sm` on poller status, current height, and latest hash cards	+3/-3
WatcherTelemetryPanel.tsx `Shadow and focus outline utility updates for watcher telemetry` web/src/components/Admin/WatcherTelemetryPanel.tsx Replaced `shadow-sm` with `shadow-xs` on telemetry panel section Changed `focus:outline-none` to `focus:outline-hidden` on KV store selector	+2/-2
page.tsx `Shadow and focus outline utility updates for login page` web/src/app/login/page.tsx Replaced `shadow-sm` with `shadow-xs` on username input field Changed `focus:outline-none` to `focus:outline-hidden` on password input and submit button	+3/-3
page.tsx `Focus outline and backdrop blur utility updates for admin page` web/src/app/admin/page.tsx Changed `focus:outline-none` to `focus:outline-hidden` on edge onboarding link Replaced `backdrop-blur-sm` with `backdrop-blur-xs` on modal overlay	+2/-2
CriticalEventsWidget.tsx `Flex shrink utility updates for critical events widget` web/src/components/Analytics/CriticalEventsWidget.tsx Replaced `flex-shrink-0` with `shrink-0` on severity icon and action icon elements	+2/-2
ServiceRegistryPanel.tsx `Shadow utility updates for service registry panel` web/src/components/Devices/ServiceRegistryPanel.tsx Replaced `shadow` with `shadow-sm` on service registry panel containers	+2/-2
PollerConfigForm.tsx `Flex shrink utility updates for poller config form` web/src/components/Admin/ConfigForms/PollerConfigForm.tsx Replaced `flex-shrink-0` with `shrink-0` on section actions and navigation links	+2/-2
NetworkStatus.jsx `Shadow utility updates for network status component` web/src/components/Network/NetworkStatus.jsx Replaced `shadow` with `shadow-sm` on ICMP summary and network sweep ICMP status containers	+2/-2
Dashboard.tsx `Focus outline utility updates for device dashboard` web/src/components/Devices/Dashboard.tsx Changed `focus:outline-none` to `focus:outline-hidden` on stat card buttons	+1/-1
Sidebar.tsx `Flex shrink utility updates for sidebar` web/src/components/Sidebar.tsx Replaced `flex-shrink-0` with `shrink-0` on sidebar container	+1/-1
ServicesTreeNavigation.tsx `Shadow utility updates for services tree navigation` web/src/components/Admin/ServicesTreeNavigation.tsx Replaced `shadow` with `shadow-sm` on add service menu dropdown	+1/-1
ICMPSparkline.tsx `Shadow utility updates for ICMP sparkline` web/src/components/Devices/ICMPSparkline.tsx Replaced `shadow` with `shadow-sm` on tooltip element	+1/-1
EventTable.tsx `Text wrapping utility updates for event table` web/src/components/Events/EventTable.tsx Replaced `break-words` with `wrap-break-word` on alias summary card text	+1/-1
MultiSysmonMetrics.tsx `Shadow utility updates for multi-sysmon metrics` web/src/components/Metrics/MultiSysmonMetrics.tsx Replaced `shadow` with `shadow-sm` on service selector container	+1/-1
APIQueryClient.tsx `Shadow and flex shrink utility updates for API query client` web/src/components/Query/APIQueryClient.tsx Replaced `shadow` with `shadow-sm` on error message container Changed `flex-shrink-0` to `shrink-0` on alert icon	+2/-2
DeleteDeviceButton.tsx `Flex shrink utility updates for delete device button` web/src/components/Devices/DeleteDeviceButton.tsx Replaced `flex-shrink-0` with `shrink-0` on alert icon	+1/-1
shared-components.jsx `Shadow utility updates for shared metric components` web/src/components/Metrics/shared-components.jsx Replaced `shadow` with `shadow-sm` on metric card container	+1/-1
RBACEditor.tsx `Minimum height utility updates for RBAC editor` web/src/components/Admin/RBACEditor.tsx Replaced `min-h-[2.25rem]` with `min-h-9` on chip list container	+1/-1
DeviceGraphCanvas.tsx `Shadow utility updates for device graph canvas` web/src/components/Devices/DeviceGraphCanvas.tsx Replaced `shadow-sm` with `shadow-xs` on SVG canvas container	+1/-1
CoreConfigForm.tsx `Update Tailwind CSS class for v4 compatibility` web/src/components/Admin/ConfigForms/CoreConfigForm.tsx Changed `flex-shrink-0` class to `shrink-0` (Tailwind v4 class name update)	+1/-1
system-metrics.jsx `Adjust shadow styling in system metrics component` web/src/components/Metrics/system-metrics.jsx Changed `shadow` class to `shadow-sm` for a more subtle shadow effect	+1/-1
HighUtilizationWidget.tsx `Update Tailwind CSS class for v4 compatibility` web/src/components/Analytics/HighUtilizationWidget.tsx Changed `flex-shrink-0` class to `shrink-0` (Tailwind v4 class name update)	+1/-1

Dependencies

2 files

package.json

Tailwind CSS v4 upgrade and dependency reorganization

web/package.json

Upgraded tailwindcss from v3.4.1 to v4.1.17
Moved tailwindcss-animate from dependencies to devDependencies
Added @tailwindcss/postcss v4.1.17 as new devDependency

+3/-2

pnpm-lock.yaml

Tailwind CSS v4 upgrade with new build tooling

web/pnpm-lock.yaml

Upgraded tailwindcss from v3.4.17 to v4.1.17 with new oxide and
postcss packages
Replaced tailwindcss-animate dependency location (moved from
dependencies to devDependencies)
Updated jiti from v2.4.2 to v2.6.1 across multiple packages
Added lightningcss v1.30.2 as a new dependency for CSS processing
Removed obsolete dependencies related to Tailwind v3 (chokidar,
postcss-import, postcss-nested, etc.)

+380/-552

Configuration changes

1 files

postcss.config.mjs

Update PostCSS configuration for Tailwind v4

web/postcss.config.mjs

Updated PostCSS configuration to use @tailwindcss/postcss plugin
instead of tailwindcss
This change aligns with Tailwind CSS v4's new plugin architecture

+1/-1

Additional files

1 files

tailwind.config.ts

+0/-93

Imported from GitHub pull request. Original GitHub pull request: #2075 Original author: @mfreeman451 Original URL: https://github.com/carverauto/serviceradar/pull/2075 Original created: 2025-12-08T03:30:56Z Original updated: 2025-12-08T04:02:56Z Original head: carverauto/serviceradar:chore/update_web_glob_lib Original base: main Original merged: 2025-12-08T04:02:53Z by @mfreeman451 --- ### **User description** ## IMPORTANT: Please sign the Developer Certificate of Origin Thank you for your contribution to ServiceRadar. Please note, when contributing, the developer must include a [DCO sign-off statement]( https://developercertificate.org/) indicating the DCO acceptance in one commit message. Here is an example DCO Signed-off-by line in a commit message: ``` Signed-off-by: J. Doe <j.doe@domain.com> ``` ## Describe your changes ## Issue ticket number and link ## Code checklist before requesting a review - [ ] I have signed the DCO? - [ ] The build completes without errors? - [ ] All tests are passing when running make test? ___ ### **PR Type** Enhancement ___ ### **Description** - Upgraded Tailwind CSS from v3 to v4 with comprehensive codebase migration - Migrated `globals.css` to Tailwind v4 syntax using `@import` and `@plugin` directives with custom theme configuration - Updated PostCSS configuration to use `@tailwindcss/postcss` plugin for v4 compatibility - Removed legacy `tailwind.config.ts` file (replaced by inline configuration in `globals.css`) - Systematically updated utility class names across 40+ components: - `shadow` → `shadow-sm`, `shadow-sm` → `shadow-xs` for refined shadow hierarchy - `focus:outline-none` → `focus:outline-hidden` for improved focus state semantics - `flex-shrink-0` → `shrink-0` for shortened class names - `break-words` → `wrap-break-word` for text wrapping utilities - `backdrop-blur-sm` → `backdrop-blur-xs` for blur effect consistency - `min-h-[2.25rem]` → `min-h-9` for standardized spacing - Updated `package.json` dependencies: upgraded `tailwindcss` to v4.1.17, moved `tailwindcss-animate` to devDependencies, added `@tailwindcss/postcss` - Updated `pnpm-lock.yaml` with new build tooling including `lightningcss` v1.30.2 for CSS processing ___ ### Diagram Walkthrough ```mermaid flowchart LR A["Tailwind CSS v3"] -->|"Upgrade to v4"| B["Update Dependencies"] B -->|"New Plugin"| C["@tailwindcss/postcss"] A -->|"Migrate Syntax"| D["globals.css v4"] D -->|"Remove"| E["tailwind.config.ts"] A -->|"Update Classes"| F["40+ Components"] F -->|"shadow utilities"| G["shadow-sm/shadow-xs"] F -->|"focus states"| H["outline-hidden"] F -->|"flex utilities"| I["shrink-0"] ``` <details><summary><h3>File Walkthrough</h3></summary> <table><thead><tr><th></th><th align="left">Relevant files</th></tr></thead><tbody><tr><td>Enhancement</td><td><details><summary>40 files</summary><table> <tr> <td> <details> <summary>globals.css<dd><code>Tailwind CSS v4 migration with theme configuration</code>              </dd></summary> <hr> web/src/app/globals.css <ul><li>Migrated from Tailwind CSS v3 directives (<code>@tailwind </code> <code>base/components/utilities</code>) to v4 syntax with <code>@import</code> and <code>@plugin</code> <li> Added custom theme configuration with CSS variables for colors, spacing, and animations <li> Defined custom utilities and keyframes for accordion animations <li> Added compatibility layer for border colors to maintain v3 appearance</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-907b8ee36ef2dcc8cc0e1e315ec79895c944ae44255dfa2145ee996d60498b18">+87/-3</a>    </td> </tr> <tr> <td> <details> <summary>page.tsx<dd><code>Shadow and focus outline utility updates for Tailwind v4</code>  </dd></summary> <hr> web/src/app/admin/edge-packages/page.tsx <ul><li>Replaced <code>shadow-sm</code> with <code>shadow-xs</code> across multiple button and card elements <li> Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> for focus state styling <li> Updated shadow utilities on form inputs, buttons, and container elements</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-d627c4ba6a102a46a28024061371276f01053b63f20c75986aef2631b967bafc">+29/-29</a>  </td> </tr> <tr> <td> <details> <summary>SightingsDashboard.tsx<dd><code>Shadow and focus outline utility updates for Tailwind v4</code>  </dd></summary> <hr> web/src/components/Identity/SightingsDashboard.tsx <ul><li>Replaced <code>shadow-sm</code> with <code>shadow-xs</code> on multiple card and container elements <li> Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> on input fields <li> Updated text in promotion hint from "shadow mode" to "shadow-sm mode"</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-60f5a44a92234ab6d477f3544924efe1f225f6aa6e2f936eccfea4505aaf0bf6">+18/-18</a>  </td> </tr> <tr> <td> <details> <summary>metric-components.jsx<dd><code>Shadow utility updates for metric components</code>                          </dd></summary> <hr> web/src/components/Metrics/metric-components.jsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on chart and metric card containers <li> Updated shadow utilities across CPU, memory, filesystem, and process metric components</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-cf2e8733e93c0ad1169a2764b2745e428a1121bf4da588fb9a8d00b73b5746f4">+19/-19</a>  </td> </tr> <tr> <td> <details> <summary>LANDiscoveryDashboard.tsx<dd><code>Shadow utility updates for LAN discovery dashboard</code>              </dd></summary> <hr> web/src/components/Network/LANDiscoveryDashboard.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on dashboard cards, stat cards, and container elements <li> Updated shadow utilities across error states, filters, and data display sections</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-e18d37fcb915c3e78180739065979bda65893849e5d5c34e0ae5aa06e8e80ebc">+11/-11</a>  </td> </tr> <tr> <td> <details> <summary>SNMPDashboard.tsx<dd><code>Shadow and focus outline utility updates for SNMP dashboard</code></dd></summary> <hr> web/src/components/Network/SNMPDashboard.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on SNMP metric cards and chart containers <li> Changed <code>peer-focus:outline-none</code> to <code>peer-focus:outline-hidden</code> on toggle switch</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-d836bd2476627bdfdef044441d5aa8dc4415b3fc70c574a8b1749cfc733d7fef">+9/-9</a>      </td> </tr> <tr> <td> <details> <summary>DeviceBasedDiscoveryDashboard.tsx<dd><code>Shadow and focus outline utility updates for device discovery</code></dd></summary> <hr> web/src/components/Network/DeviceBasedDiscoveryDashboard.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on dashboard cards and container elements <li> Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> on stat card buttons</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-4c9228f97a008dc254be38a931b5e4df232c12911ac1319eada317c76b66777b">+11/-11</a>  </td> </tr> <tr> <td> <details> <summary>SysmonOsxDetails.tsx<dd><code>Shadow utility updates for sysmon-osx details component</code>    </dd></summary> <hr> web/src/components/Service/SysmonOsxDetails.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on metric cards and detail sections <li> Updated shadow utilities across status cards and cluster information displays</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-2bce88d1bcefdbab4d6776de592377df3f05000851ed8afc9671434b1e16695e">+9/-9</a>      </td> </tr> <tr> <td> <details> <summary>RPerfDashboard.tsx<dd><code>Shadow utility updates for rperf dashboard</code>                              </dd></summary> <hr> web/src/components/Network/RPerfDashboard.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on metric cards and chart containers <li> Changed <code>shadow-sm</code> to <code>shadow-xs</code> on active time range button</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-391109912d193ddfa38ec556446b6c5f1e3f21dce0aae20ac1e4844540332003">+9/-9</a>      </td> </tr> <tr> <td> <details> <summary>Dashboard.tsx<dd><code>Shadow utility updates for service dashboard</code>                          </dd></summary> <hr> web/src/components/Service/Dashboard.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on service dashboard cards and containers <li> Updated shadow utilities across response time, ICMP status, and error state displays</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-a0046922157d76341ddcd07416191c7a7add740deefbf01ee66c1f49e7da4582">+9/-9</a>      </td> </tr> <tr> <td> <details> <summary>DeviceDetail.tsx<dd><code>Focus outline and text wrapping utility updates</code>                    </dd></summary> <hr> web/src/components/Devices/DeviceDetail.tsx <ul><li>Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> on metric type selector <li> Updated <code>focus:ring</code> to <code>focus:ring-3</code> for focus ring styling <li> Replaced <code>break-words</code> with <code>wrap-break-word</code> on text elements</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-2dbb02c57d308332683ec3795ef41e65387b5d1c30c559f01b535b5e704ba872">+5/-5</a>      </td> </tr> <tr> <td> <details> <summary>page.tsx<dd><code>Shadow utility updates for identity config page</code>                    </dd></summary> <hr> web/src/app/identity/config/page.tsx <ul><li>Replaced <code>shadow-sm</code> with <code>shadow-xs</code> on configuration section cards <li> Updated shadow utilities across feature flags, promotion, fingerprinting, reaper, and drift protection sections</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-7d97637dd296bd515adeda8adb73e738d90a48fec745d944ed546b280e5f2f9c">+5/-5</a>      </td> </tr> <tr> <td> <details> <summary>NetworkSweepView.jsx<dd><code>Shadow utility updates for network sweep view</code>                        </dd></summary> <hr> web/src/components/Network/NetworkSweepView.jsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on host details and ICMP stats containers <li> Updated shadow utilities across standalone and embedded view modes</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-38d2efe119c20a969f960b3e606517a504138f98163485a0eea8d801d1549a1f">+5/-5</a>      </td> </tr> <tr> <td> <details> <summary>CorrelationDashboard.tsx<dd><code>Shadow utility updates for correlation dashboard</code>                  </dd></summary> <hr> web/src/components/Observability/CorrelationDashboard.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on stats cards displaying logs, spans, and metrics found</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-f64ee7a0e84cea28a6baaf21695cd220c9588624073ab0d843b9e9078f2cee50">+3/-3</a>      </td> </tr> <tr> <td> <details> <summary>ObservabilityWidget.tsx<dd><code>Flex shrink utility updates for observability widget</code>          </dd></summary> <hr> web/src/components/Analytics/ObservabilityWidget.tsx <ul><li>Replaced <code>flex-shrink-0</code> with <code>shrink-0</code> on header and metric sections <li> Updated flex shrink utilities across widget layout elements</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-469ba40fa407e64ef80f447276989d9bb7891322da5dcb57549ea99a2d5a01d6">+4/-4</a>      </td> </tr> <tr> <td> <details> <summary>CriticalLogsWidget.tsx<dd><code>Flex shrink utility updates for critical logs widget</code>          </dd></summary> <hr> web/src/components/Analytics/CriticalLogsWidget.tsx <ul><li>Replaced <code>flex-shrink-0</code> with <code>shrink-0</code> on header, icon, and action elements <li> Updated flex shrink utilities across log entry display components</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-7e3cb187636bc25efb943562cd29dd295469c896ae29bf2cd0d7abaf2435523a">+4/-4</a>      </td> </tr> <tr> <td> <details> <summary>error-components.jsx<dd><code>Shadow and flex shrink utility updates for error components</code></dd></summary> <hr> web/src/components/Metrics/error-components.jsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on error message and empty state containers <li> Changed <code>flex-shrink-0</code> to <code>shrink-0</code> on alert icon</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-3d0e602eb8f3f345260d3603cb8d433ab927a644d08a56b6023a8260f76bfb19">+4/-4</a>      </td> </tr> <tr> <td> <details> <summary>Header.tsx<dd><code>Flex shrink and focus outline utility updates for header</code>  </dd></summary> <hr> web/src/components/Header.tsx <ul><li>Changed <code>flex-shrink-0</code> to <code>shrink-0</code> on header element <li> Replaced <code>focus:outline-none</code> with <code>focus:outline-hidden</code> on search input and submit button</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-ecb3bc0e6aa890352a9bee0715a79119c56401a99ba2ea7bea393d107010131d">+3/-3</a>      </td> </tr> <tr> <td> <details> <summary>DuskDashboard.jsx<dd><code>Shadow utility updates for dusk dashboard</code>                                </dd></summary> <hr> web/src/components/Checkers/DuskDashboard.jsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on poller status, current height, and latest hash cards</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-9e3f9d0f273dbbefea7ab650bd84e9869f4568df7abb0be77a6e25bb5e880af0">+3/-3</a>      </td> </tr> <tr> <td> <details> <summary>WatcherTelemetryPanel.tsx<dd><code>Shadow and focus outline utility updates for watcher telemetry</code></dd></summary> <hr> web/src/components/Admin/WatcherTelemetryPanel.tsx <ul><li>Replaced <code>shadow-sm</code> with <code>shadow-xs</code> on telemetry panel section <li> Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> on KV store selector</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-b35ea6ada7032b27a263d2e00a6ad5112693b6485cfbd07c48fca7fab626caa9">+2/-2</a>      </td> </tr> <tr> <td> <details> <summary>page.tsx<dd><code>Shadow and focus outline utility updates for login page</code>    </dd></summary> <hr> web/src/app/login/page.tsx <ul><li>Replaced <code>shadow-sm</code> with <code>shadow-xs</code> on username input field <li> Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> on password input and submit button</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-07c3171f5c210df36fdffe17f4adfedcf390711719aa1c4692ccc2b796ad547a">+3/-3</a>      </td> </tr> <tr> <td> <details> <summary>page.tsx<dd><code>Focus outline and backdrop blur utility updates for admin page</code></dd></summary> <hr> web/src/app/admin/page.tsx <ul><li>Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> on edge onboarding link <li> Replaced <code>backdrop-blur-sm</code> with <code>backdrop-blur-xs</code> on modal overlay</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-5e9f59af945d350f1fa3c76cd19d0d786df3cbb0947b53934f17dad4cd5ff546">+2/-2</a>      </td> </tr> <tr> <td> <details> <summary>CriticalEventsWidget.tsx<dd><code>Flex shrink utility updates for critical events widget</code>      </dd></summary> <hr> web/src/components/Analytics/CriticalEventsWidget.tsx <ul><li>Replaced <code>flex-shrink-0</code> with <code>shrink-0</code> on severity icon and action icon elements</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-8c9ca4b5371377b1bf9218e4de88e34fb78079b062b71489e200899bdbb8ee8a">+2/-2</a>      </td> </tr> <tr> <td> <details> <summary>ServiceRegistryPanel.tsx<dd><code>Shadow utility updates for service registry panel</code>                </dd></summary> <hr> web/src/components/Devices/ServiceRegistryPanel.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on service registry panel containers</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-284ce670567ea39a0afa54761daa95d9c4ddb90dec4dfdc906371d304a9bbd5d">+2/-2</a>      </td> </tr> <tr> <td> <details> <summary>PollerConfigForm.tsx<dd><code>Flex shrink utility updates for poller config form</code>              </dd></summary> <hr> web/src/components/Admin/ConfigForms/PollerConfigForm.tsx <ul><li>Replaced <code>flex-shrink-0</code> with <code>shrink-0</code> on section actions and navigation links</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-a461cf9c9de7dcc94fbb380a8926ad17b741a2707b58a1d0ae76c70fed432484">+2/-2</a>      </td> </tr> <tr> <td> <details> <summary>NetworkStatus.jsx<dd><code>Shadow utility updates for network status component</code>            </dd></summary> <hr> web/src/components/Network/NetworkStatus.jsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on ICMP summary and network sweep ICMP status containers</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-b907d17a62742c6863362ecfd1bf43fce57a4346dcab7a710591211b91b05739">+2/-2</a>      </td> </tr> <tr> <td> <details> <summary>Dashboard.tsx<dd><code>Focus outline utility updates for device dashboard</code>              </dd></summary> <hr> web/src/components/Devices/Dashboard.tsx <ul><li>Changed <code>focus:outline-none</code> to <code>focus:outline-hidden</code> on stat card buttons</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-da1f03ea181f8f19b672164eb86b914cef8bcef6ea7df61d174e3c19421a3461">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>Sidebar.tsx<dd><code>Flex shrink utility updates for sidebar</code>                                    </dd></summary> <hr> web/src/components/Sidebar.tsx - Replaced `flex-shrink-0` with `shrink-0` on sidebar container </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-219f9604c678f564c98ff1920201ea980331348dfb5dff7314a34d9fd198f1b1">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>ServicesTreeNavigation.tsx<dd><code>Shadow utility updates for services tree navigation</code>            </dd></summary> <hr> web/src/components/Admin/ServicesTreeNavigation.tsx - Replaced `shadow` with `shadow-sm` on add service menu dropdown </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-1ed7ef6d80b5c019b943bbd7a1827806a8f054b84e1ca993bc51179748e9f4b5">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>ICMPSparkline.tsx<dd><code>Shadow utility updates for ICMP sparkline</code>                                </dd></summary> <hr> web/src/components/Devices/ICMPSparkline.tsx - Replaced `shadow` with `shadow-sm` on tooltip element </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-cf64856828e7aadfd71c3a8e9c945b8273bd2372c31f71a36d42ac9b08efb15a">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>EventTable.tsx<dd><code>Text wrapping utility updates for event table</code>                        </dd></summary> <hr> web/src/components/Events/EventTable.tsx <ul><li>Replaced <code>break-words</code> with <code>wrap-break-word</code> on alias summary card text</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-c95a9af9c0fafa5a856221434690f8c6560bce62bfe5be4e9eb1deb9a5f77879">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>MultiSysmonMetrics.tsx<dd><code>Shadow utility updates for multi-sysmon metrics</code>                    </dd></summary> <hr> web/src/components/Metrics/MultiSysmonMetrics.tsx - Replaced `shadow` with `shadow-sm` on service selector container </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-ec9e5c2a2b20db6877753d4c65bd8c1b3a93ab89b2580643cfd32a51e12b5675">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>APIQueryClient.tsx<dd><code>Shadow and flex shrink utility updates for API query client</code></dd></summary> <hr> web/src/components/Query/APIQueryClient.tsx <ul><li>Replaced <code>shadow</code> with <code>shadow-sm</code> on error message container <li> Changed <code>flex-shrink-0</code> to <code>shrink-0</code> on alert icon</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-603646f0e0e68a45495b868512c950b4322313c7a861c0cb3530b6883d8f5991">+2/-2</a>      </td> </tr> <tr> <td> <details> <summary>DeleteDeviceButton.tsx<dd><code>Flex shrink utility updates for delete device button</code>          </dd></summary> <hr> web/src/components/Devices/DeleteDeviceButton.tsx - Replaced `flex-shrink-0` with `shrink-0` on alert icon </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-e9974d6c840555621408d6ea6dd484eab600772e553a7aed2f95d6d5ca153483">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>shared-components.jsx<dd><code>Shadow utility updates for shared metric components</code>            </dd></summary> <hr> web/src/components/Metrics/shared-components.jsx - Replaced `shadow` with `shadow-sm` on metric card container </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-da2e49cf20ae6d685ed375b397ac8a5d2fdbafad60303a706712dfb84afb49d3">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>RBACEditor.tsx<dd><code>Minimum height utility updates for RBAC editor</code>                      </dd></summary> <hr> web/src/components/Admin/RBACEditor.tsx - Replaced `min-h-[2.25rem]` with `min-h-9` on chip list container </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-e440cc47444371f397e37f6ecb432d27993c8c5aa4a77e0fcc59238320a05879">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>DeviceGraphCanvas.tsx<dd><code>Shadow utility updates for device graph canvas</code>                      </dd></summary> <hr> web/src/components/Devices/DeviceGraphCanvas.tsx - Replaced `shadow-sm` with `shadow-xs` on SVG canvas container </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-5ba0ce459adcf56e211220aeceb08150949d27dc98baf7fa37df39b70b809678">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>CoreConfigForm.tsx<dd><code>Update Tailwind CSS class for v4 compatibility</code>                      </dd></summary> <hr> web/src/components/Admin/ConfigForms/CoreConfigForm.tsx <ul><li>Changed <code>flex-shrink-0</code> class to <code>shrink-0</code> (Tailwind v4 class name update)</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-a1650a0c2c732d0fa116da50068ebcc7d035ec9c724d14ac5b763c2ceb035f0a">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>system-metrics.jsx<dd><code>Adjust shadow styling in system metrics component</code>                </dd></summary> <hr> web/src/components/Metrics/system-metrics.jsx <ul><li>Changed <code>shadow</code> class to <code>shadow-sm</code> for a more subtle shadow effect</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-8ac59d996e95f9669b6ddac45fad9179ec4875fcd135aa101f4e25f1c662f687">+1/-1</a>      </td> </tr> <tr> <td> <details> <summary>HighUtilizationWidget.tsx<dd><code>Update Tailwind CSS class for v4 compatibility</code>                      </dd></summary> <hr> web/src/components/Analytics/HighUtilizationWidget.tsx <ul><li>Changed <code>flex-shrink-0</code> class to <code>shrink-0</code> (Tailwind v4 class name update)</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-716a93a815f8f58832dcd4a0e7b1b7cbc53722bf383fad88cc7732b684c2baa7">+1/-1</a>      </td> </tr> </table></details></td></tr><tr><td>Dependencies</td><td><details><summary>2 files</summary><table> <tr> <td> <details> <summary>package.json<dd><code>Tailwind CSS v4 upgrade and dependency reorganization</code>        </dd></summary> <hr> web/package.json <ul><li>Upgraded <code>tailwindcss</code> from v3.4.1 to v4.1.17 <li> Moved <code>tailwindcss-animate</code> from dependencies to devDependencies <li> Added <code>@tailwindcss/postcss</code> v4.1.17 as new devDependency</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-b861012a5dd72b8a9f3281b7cf09f5a779c98569d040b1bbc1db50f1b15e7cce">+3/-2</a>      </td> </tr> <tr> <td> <details> <summary>pnpm-lock.yaml<dd><code>Tailwind CSS v4 upgrade with new build tooling</code>                      </dd></summary> <hr> web/pnpm-lock.yaml <ul><li>Upgraded <code>tailwindcss</code> from v3.4.17 to v4.1.17 with new oxide and postcss packages <li> Replaced <code>tailwindcss-animate</code> dependency location (moved from dependencies to devDependencies) <li> Updated <code>jiti</code> from v2.4.2 to v2.6.1 across multiple packages <li> Added <code>lightningcss</code> v1.30.2 as a new dependency for CSS processing <li> Removed obsolete dependencies related to Tailwind v3 (chokidar, postcss-import, postcss-nested, etc.)</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-f11bfba22b3604b3a7b52e44e10f4eae265b030b5682714833ba689eda12a27b">+380/-552</a></td> </tr> </table></details></td></tr><tr><td>Configuration changes</td><td><details><summary>1 files</summary><table> <tr> <td> <details> <summary>postcss.config.mjs<dd><code>Update PostCSS configuration for Tailwind v4</code>                          </dd></summary> <hr> web/postcss.config.mjs <ul><li>Updated PostCSS configuration to use <code>@tailwindcss/postcss</code> plugin instead of <code>tailwindcss</code> <li> This change aligns with Tailwind CSS v4's new plugin architecture</ul> </details> </td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-5e5f03171f043ab5bd0ed9c795886d7e163b47e99cc248983fcb4f6acbb2bb71">+1/-1</a>      </td> </tr> </table></details></td></tr><tr><td>Additional files</td><td><details><summary>1 files</summary><table> <tr> <td>tailwind.config.ts</td> <td><a href="https://github.com/carverauto/serviceradar/pull/2075/files#diff-1dd863cc4c5eabec06eec1c44d7fdcff94124de48e4594af6b6c2449caf6e605">+0/-93</a>    </td> </tr> </table></details></td></tr></tbody></table> </details> ___

qodo-code-review[bot] commented

2025-12-08 03:31:54 +00:00

(Migrated from github.com)

Author

Owner

Imported GitHub PR comment.

Original author: @qodo-code-review[bot]
Original URL: https://github.com/carverauto/serviceradar/pull/2075#issuecomment-3624479978
Original created: 2025-12-08T03:31:54Z

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Audit coverage: The PR primarily updates styling and Tailwind v4 classes without adding or modifying logging of critical actions, so it is unclear whether audit trails exist for actions like reconcile, promotion/dismiss, or downloads. Referred Code `type="button" onClick={handleReconcile} disabled={reconciling} className="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-xs hover:bg-blue-700 disabled:opacity-60" >` Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Error handling: Components render error and empty states but newly added code does not show validation or try/catch around user inputs or actions, so robustness cannot be confirmed from these styling-only changes. Referred Code `// Error state if (error && discoveryData.devices.length === 0 && discoveryData.interfaces.length === 0) { return ( <div className="bg-red-50 dark:bg-red-900/20 p-6 rounded-lg shadow-sm"> <div className="flex items-center mb-4"> <AlertCircle className="h-6 w-6 text-red-500 mr-2" /> <h2 className="text-xl font-bold text-red-700 dark:text-red-400">` Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Input validation: Multiple new input and select fields were styled but no additional client-side validation or sanitization logic was introduced in this diff, leaving validation posture unclear. Referred Code </span> <input required className="rounded border border-gray-300 px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:bg-gray-950 dark:border-gray-700" value={formState.label} onChange={(event) => handleFormChange('label', event.target.value)} placeholder="Edge component label" /> </label> <label className="flex flex-col gap-1 text-sm"> <span className="font-medium"> Component type <span className="text-red-500">*</span> </span> <select className="rounded border border-gray-300 px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:bg-gray-950 dark:border-gray-700" value={formState.componentType \|\| 'poller'} onChange={(event) => handleComponentTypeChange(event.target.value as EdgeComponentType)} > Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/2075#issuecomment-3624479978 Original created: 2025-12-08T03:31:54Z --- ## PR Compliance Guide 🔍  Below is a summary of compliance checks for this PR: <table><tbody><tr><td colspan='2'>Security Compliance</td></tr> <tr><td>🟢</td><td><details><summary>No security concerns identified</summary> No security vulnerabilities detected by AI analysis. Human verification advised for critical code. </details></td></tr> <tr><td colspan='2'>Ticket Compliance</td></tr> <tr><td>⚪</td><td><details><summary>🎫 No ticket provided </summary> - [ ] Create ticket/issue  </details></td></tr> <tr><td colspan='2'>Codebase Duplication Compliance</td></tr> <tr><td>⚪</td><td><details><summary>Codebase context is not defined </summary> Follow the <a href='https://qodo-merge-docs.qodo.ai/core-abilities/rag_context_enrichment/'>guide</a> to enable codebase context checks. </details></td></tr> <tr><td colspan='2'>Custom Compliance</td></tr> <tr><td rowspan=3>🟢</td><td> <details><summary>Generic: Meaningful Naming and Self-Documenting Code</summary> **Objective:** Ensure all identifiers clearly express their purpose and intent, making code self-documenting **Status:** Passed > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td> <details><summary>Generic: Secure Error Handling</summary> **Objective:** To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. **Status:** Passed > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td> <details><summary>Generic: Secure Logging Practices</summary> **Objective:** To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. **Status:** Passed > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td rowspan=3>⚪</td> <td><details> <summary>Generic: Comprehensive Audit Trails</summary> **Objective:** To create a detailed and reliable record of critical system actions for security analysis and compliance. **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2075/files#diff-60f5a44a92234ab6d477f3544924efe1f225f6aa6e2f936eccfea4505aaf0bf6R805-R809'>Audit coverage</a>: The PR primarily updates styling and Tailwind v4 classes without adding or modifying logging of critical actions, so it is unclear whether audit trails exist for actions like reconcile, promotion/dismiss, or downloads. <details open><summary>Referred Code</summary> ```tsx type="button" onClick={handleReconcile} disabled={reconciling} className="inline-flex items-center gap-2 rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-xs hover:bg-blue-700 disabled:opacity-60" > ``` </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td><details> <summary>Generic: Robust Error Handling and Edge Case Management</summary> **Objective:** Ensure comprehensive error handling that provides meaningful context and graceful degradation **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2075/files#diff-e18d37fcb915c3e78180739065979bda65893849e5d5c34e0ae5aa06e8e80ebcR534-R540'>Error handling</a>: Components render error and empty states but newly added code does not show validation or try/catch around user inputs or actions, so robustness cannot be confirmed from these styling-only changes. <details open><summary>Referred Code</summary> ```tsx // Error state if (error && discoveryData.devices.length === 0 && discoveryData.interfaces.length === 0) { return ( <div className="bg-red-50 dark:bg-red-900/20 p-6 rounded-lg shadow-sm"> <div className="flex items-center mb-4"> <AlertCircle className="h-6 w-6 text-red-500 mr-2" /> <h2 className="text-xl font-bold text-red-700 dark:text-red-400"> ``` </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td><details> <summary>Generic: Security-First Input Validation and Data Handling</summary> **Objective:** Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities **Status:** <a href='https://github.com/carverauto/serviceradar/pull/2075/files#diff-d627c4ba6a102a46a28024061371276f01053b63f20c75986aef2631b967bafcR1200-R1218'>Input validation</a>: Multiple new input and select fields were styled but no additional client-side validation or sanitization logic was introduced in this diff, leaving validation posture unclear. <details open><summary>Referred Code</summary> ```tsx <input required className="rounded border border-gray-300 px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:bg-gray-950 dark:border-gray-700" value={formState.label} onChange={(event) => handleFormChange('label', event.target.value)} placeholder="Edge component label" /> </label> <label className="flex flex-col gap-1 text-sm"> Component type * <select className="rounded border border-gray-300 px-3 py-2 text-sm shadow-xs focus:border-blue-500 focus:outline-hidden focus:ring-1 focus:ring-blue-500 dark:bg-gray-950 dark:border-gray-700" value={formState.componentType || 'poller'} onChange={(event) => handleComponentTypeChange(event.target.value as EdgeComponentType)} > ``` </details> > Learn more about managing compliance <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#configuration-options'>generic rules</a> or creating your own <a href='https://qodo-merge-docs.qodo.ai/tools/compliance/#custom-compliance'>custom rules</a> </details></td></tr> <tr><td align="center" colspan="2"> - [ ] Update  </td></tr></tbody></table> <details><summary>Compliance status legend</summary> 🟢 - Fully Compliant 🟡 - Partial Compliant 🔴 - Not Compliant ⚪ - Requires Further Human Verification 🏷️ - Compliance label </details>

qodo-code-review[bot] commented

2025-12-08 03:33:32 +00:00

(Migrated from github.com)

Author

Owner

Imported GitHub PR comment.

Original author: @qodo-code-review[bot]
Original URL: https://github.com/carverauto/serviceradar/pull/2075#issuecomment-3624483038
Original created: 2025-12-08T03:33:32Z

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Use the correct defined border color Replace the undefined CSS variable `--color-gray-200` with the defined `--color-border` to correctly implement the Tailwind v3 border color compatibility. web/src/app/globals.css [79-87] `@layer base { , ::after, ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); + border-color: var(--color-border); } }` Apply / Chat* Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a bug where an undefined CSS variable (`--color-gray-200`) is used, making the compatibility layer ineffective and failing to achieve its stated purpose.	High
	Use correct Tailwind CSS class Replace the invalid Tailwind CSS class `wrap-break-word` with the correct v4 class `break-word` to prevent text overflow issues. web/src/components/Devices/DeviceDetail.tsx [1686-1688] `-<p className="text-sm font-medium text-gray-900 dark:text-gray-100 wrap-break-word"> +<p className="text-sm font-medium text-gray-900 dark:text-gray-100 break-word"> {aliasHistory.current_service_id ?? "Unknown"} </p>` Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies that `wrap-break-word` is not a valid Tailwind CSS class and was likely a typo during the migration from `break-words` to `break-word` for v4, fixing a potential UI overflow issue.	Low
	Fix non-existent focus ring class Replace the invalid Tailwind CSS class `focus:ring-3` with the correct `focus:ring` to ensure the focus ring is visible for accessibility. web/src/components/Devices/DeviceDetail.tsx [1604-1608] <select value={selectedMetricType} onChange={(event) => setSelectedMetricType(event.target.value)} - className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:border-blue-500 focus:outline-hidden focus:ring-3 focus:ring-blue-500/30" + className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:border-blue-500 focus:outline-hidden focus:ring focus:ring-blue-500/30" > Apply / Chat Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies that `focus:ring-3` is not a valid Tailwind CSS class, and fixing it to `focus:ring` restores the intended focus indicator, which is important for accessibility.	Low
General	Correct a confusing UI text Revert the UI text from "shadow-sm mode" back to "shadow mode" to avoid user confusion, as this was likely an accidental replacement. web/src/components/Identity/SightingsDashboard.tsx [344] `-addHint("Promotion is in shadow-sm mode; decisions are simulated without auto-attaching devices."); +addHint("Promotion is in shadow mode; decisions are simulated without auto-attaching devices.");` Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly identifies a likely unintentional change in a UI string from "shadow mode" to "shadow-sm mode" due to a broad search-and-replace, improving UI clarity for the user.	Low
Update

Imported GitHub PR comment. Original author: @qodo-code-review[bot] Original URL: https://github.com/carverauto/serviceradar/pull/2075#issuecomment-3624483038 Original created: 2025-12-08T03:33:32Z --- ## PR Code Suggestions ✨  Explore these optional code suggestions: <table><thead><tr><td>Category</td><td align=left>Suggestion                                                                                                                                    </td><td align=center>Impact</td></tr><tbody><tr><td rowspan=3>Possible issue</td> <td> <details><summary>Use the correct defined border color</summary> ___ **Replace the undefined CSS variable <code>--color-gray-200</code> with the defined <code>--color-border</code> to correctly implement the Tailwind v3 border color compatibility.** [web/src/app/globals.css [79-87]](https://github.com/carverauto/serviceradar/pull/2075/files#diff-907b8ee36ef2dcc8cc0e1e315ec79895c944ae44255dfa2145ee996d60498b18R79-R87) ```diff @layer base { *, ::after, ::before, ::backdrop, ::file-selector-button { - border-color: var(--color-gray-200, currentcolor); + border-color: var(--color-border); } } ``` - [ ] **Apply / Chat**  <details><summary>Suggestion importance[1-10]: 9</summary> __ Why: The suggestion correctly identifies a bug where an undefined CSS variable (`--color-gray-200`) is used, making the compatibility layer ineffective and failing to achieve its stated purpose. </details></details></td><td align=center>High </td></tr><tr><td> <details><summary>Use correct Tailwind CSS class</summary> ___ **Replace the invalid Tailwind CSS class <code>wrap-break-word</code> with the correct v4 class <code>break-word</code> to prevent text overflow issues.** [web/src/components/Devices/DeviceDetail.tsx [1686-1688]](https://github.com/carverauto/serviceradar/pull/2075/files#diff-2dbb02c57d308332683ec3795ef41e65387b5d1c30c559f01b535b5e704ba872R1686-R1688) ```diff - + {aliasHistory.current_service_id ?? "Unknown"} ``` - [ ] **Apply / Chat**  <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly identifies that `wrap-break-word` is not a valid Tailwind CSS class and was likely a typo during the migration from `break-words` to `break-word` for v4, fixing a potential UI overflow issue. </details></details></td><td align=center>Low </td></tr><tr><td> <details><summary>Fix non-existent focus ring class</summary> ___ **Replace the invalid Tailwind CSS class <code>focus:ring-3</code> with the correct <code>focus:ring</code> to ensure the focus ring is visible for accessibility.** [web/src/components/Devices/DeviceDetail.tsx [1604-1608]](https://github.com/carverauto/serviceradar/pull/2075/files#diff-2dbb02c57d308332683ec3795ef41e65387b5d1c30c559f01b535b5e704ba872R1604-R1608) ```diff <select value={selectedMetricType} onChange={(event) => setSelectedMetricType(event.target.value)} - className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:border-blue-500 focus:outline-hidden focus:ring-3 focus:ring-blue-500/30" + className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-3 py-2 text-sm text-gray-900 dark:text-white focus:border-blue-500 focus:outline-hidden focus:ring focus:ring-blue-500/30" > ``` - [ ] **Apply / Chat**  <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: The suggestion correctly identifies that `focus:ring-3` is not a valid Tailwind CSS class, and fixing it to `focus:ring` restores the intended focus indicator, which is important for accessibility. </details></details></td><td align=center>Low </td></tr><tr><td rowspan=1>General</td> <td> <details><summary>Correct a confusing UI text</summary> ___ **Revert the UI text from "shadow-sm mode" back to "shadow mode" to avoid user confusion, as this was likely an accidental replacement.** [web/src/components/Identity/SightingsDashboard.tsx [344]](https://github.com/carverauto/serviceradar/pull/2075/files#diff-60f5a44a92234ab6d477f3544924efe1f225f6aa6e2f936eccfea4505aaf0bf6R344-R344) ```diff -addHint("Promotion is in shadow-sm mode; decisions are simulated without auto-attaching devices."); +addHint("Promotion is in shadow mode; decisions are simulated without auto-attaching devices."); ``` - [ ] **Apply / Chat**  <details><summary>Suggestion importance[1-10]: 4</summary> __ Why: The suggestion correctly identifies a likely unintentional change in a UI string from "shadow mode" to "shadow-sm mode" due to a broad search-and-replace, improving UI clarity for the user. </details></details></td><td align=center>Low </td></tr> <tr><td align="center" colspan="2"> - [ ] Update  </td><td></td></tr></tbody></table>