Skip to content

Implement Data-Center UI#2599

Open
asmasarw wants to merge 2 commits intoredhat-developer:mainfrom
asmasarw:feature/data-center
Open

Implement Data-Center UI#2599
asmasarw wants to merge 2 commits intoredhat-developer:mainfrom
asmasarw:feature/data-center

Conversation

@asmasarw
Copy link
Contributor

@asmasarw asmasarw commented Mar 24, 2026

Implement Data-Center UI including:

  • Environments Screen
  • Service Specs Screen
  • Environment Details Screen
  • Service Specs Details Screen
  • CRUD Modals (Create, Update and Delete)

** All Data are mocked since API is NOT ready yet.

UI Images:

image image image image image image image image

@asmasarw asmasarw requested a review from jkilzi as a code owner March 24, 2026 15:41
@rhdh-gh-app
Copy link

rhdh-gh-app bot commented Mar 24, 2026

Missing Changesets

The following package(s) are changed by this PR but do not have a changeset:

  • @red-hat-developer-hub/backstage-plugin-dcm

See CONTRIBUTING.md for more information about how to add changesets.

Changed Packages

Package Name Package Path Changeset Bump Current Version
app workspaces/dcm/packages/app none v0.0.1
@red-hat-developer-hub/backstage-plugin-dcm workspaces/dcm/plugins/dcm none v0.1.0

@rhdh-qodo-merge
Copy link

Review Summary by Qodo

Implement Data Center UI with Environments and Service Specs Management

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Implemented complete Data Center UI with tabbed layout for Environments and Service Specs
  management
• Created comprehensive CRUD operations (Create, Update, Delete) with modal dialogs for both
  Environments and Service Specs
• Built detail pages for individual environments and service specs with tabbed navigation (Overview,
  Entities, Request History)
• Implemented mock data structures and interfaces for Environment, ServiceSpec, entities, and
  request history
• Added Material-UI styling system with theme-aware dark/light mode support for tables, dialogs, and
  detail pages
• Created reusable form components (EnvironmentFormFields, ServiceSpecFormFields) and shared
  dialog wrapper (DcmFormDialog)
• Implemented search, filtering, and pagination functionality across all table views
• Added PatternFly theme synchronization hook to sync Backstage theme with PatternFly dark theme
• Created plugin-level router supporting nested routing for detail pages
• Added configuration schema for DCM plugin with policy packs support
• Updated RHDH logo with dynamic dark theme support
• All data is currently mocked as API is not yet ready
Diagram
flowchart LR
  A["DataCenterPage<br/>Tabbed Layout"] --> B["EnvironmentsTabContent<br/>Table + CRUD"]
  A --> C["ServiceSpecsTabContent<br/>Table + CRUD"]
  B --> D["EnvironmentDetailsPage<br/>Overview/Entities/History"]
  C --> E["ServiceSpecDetailsPage<br/>Overview/Entities/History"]
  B --> F["RegisterEnvironmentDialog<br/>EnvironmentFormFields"]
  B --> G["EditEnvironmentDialog<br/>EnvironmentFormFields"]
  B --> H["DeleteEnvironmentDialog"]
  C --> I["ServiceSpecCreateDialog<br/>ServiceSpecFormFields"]
  C --> J["ServiceSpecEditDialog<br/>ServiceSpecFormFields"]
  C --> K["DeleteServiceSpecDialog"]
  D --> L["OverviewTab<br/>OverviewField Components"]
  D --> M["EntitiesTab<br/>Filtered Table"]
  D --> N["RequestHistoryTab<br/>Paginated Table"]
  E --> O["SpecOverviewTab<br/>OverviewField Components"]
  E --> P["SpecEntitiesTab<br/>Filtered Table"]
  E --> Q["SpecRequestHistoryTab<br/>Paginated Table"]
Loading

Grey Divider

File Changes

1. workspaces/dcm/plugins/dcm/src/components/dcmTabTableStyles.ts ✨ Enhancement +240/-0

Material-UI styles for Data Center tab tables

• Created comprehensive Material-UI styles for Data Center tab tables (Environments, Service specs)
• Defines DcmTabTableClassKey type with 14 style classes for tables, dialogs, and form elements
• Implements dark/light theme detection with dynamic text color adjustments
• Provides styles for search inputs, card content, dialogs, compliance sections, and data cards

workspaces/dcm/plugins/dcm/src/components/dcmTabTableStyles.ts


2. workspaces/dcm/plugins/dcm/src/data/service-specs.ts Miscellaneous +226/-0

Mock data structures for service specifications

• Defines ServiceSpec interface for service specification data model with 14 properties
• Exports INITIAL_SERVICE_SPECS with 2 mock service specifications (Small and Medium tiers)
• Provides ServiceSpecEntityRow interface and MOCK_SERVICE_SPEC_ENTITIES with 7 mock entities
• Includes ServiceSpecRequestHistoryRow interface and MOCK_SERVICE_SPEC_REQUEST_HISTORY with 5
 mock history records

workspaces/dcm/plugins/dcm/src/data/service-specs.ts


3. workspaces/dcm/plugins/dcm/src/data/environments.ts Miscellaneous +230/-0

Mock data structures for environments

• Defines Environment interface for environment data model with 7 properties
• Exports INITIAL_ENVIRONMENTS with 2 mock environments (AWS Prod, OpenShift Dev)
• Provides EntityRow interface and MOCK_ENTITIES with 7 mock entities across environments
• Includes RequestHistoryRow interface and MOCK_REQUEST_HISTORY with 6 mock history records

workspaces/dcm/plugins/dcm/src/data/environments.ts


View more (45)
4. workspaces/dcm/plugins/dcm/src/components/dcmDetailsPageStyles.ts ✨ Enhancement +132/-0

Material-UI styles for Data Center detail pages

• Created Material-UI styles for Data Center detail pages (environment and service spec)
• Defines 12 style classes for breadcrumbs, page titles, cards, tables, and search inputs
• Implements consistent styling for overview cards, chips, YAML display, and table containers
• Provides responsive layout styles for detail page components

workspaces/dcm/plugins/dcm/src/components/dcmDetailsPageStyles.ts


5. workspaces/dcm/plugins/dcm/src/components/dcmTheme.ts ✨ Enhancement +36/-0

Theme detection utility for dark backgrounds

• Exports isBackgroundDark() utility function to detect dark theme from palette colors
• Supports both hex and RGB color format parsing
• Calculates luminance using standard formula (0.299*R + 0.587*G + 0.114*B)
• Returns true if luminance is below 0.4 threshold

workspaces/dcm/plugins/dcm/src/components/dcmTheme.ts


6. workspaces/dcm/plugins/dcm/src/pages/service-spec/components/specFormTypes.ts ✨ Enhancement +74/-0

Service spec form state management utilities

• Defines SpecFormState type for service spec form with 6 fields (name, cpu, ram, maxQuota,
 environment, policyPacks)
• Exports emptySpecForm() factory function for initializing empty form state
• Provides specToForm() converter to transform ServiceSpec to form state
• Includes defaultDetailFields() helper to generate default detail fields based on environment

workspaces/dcm/plugins/dcm/src/pages/service-spec/components/specFormTypes.ts


7. workspaces/dcm/packages/app/src/hooks/usePatternFlyTheme.ts ✨ Enhancement +52/-0

PatternFly theme synchronization hook

• Created usePatternFlyTheme() hook to sync Backstage theme with PatternFly dark theme
• Detects dark mode via MUI palette type, mode, and background color analysis
• Applies pf-v6-theme-dark class to HTML element when dark mode is active
• Automatically removes class when switching to light mode

workspaces/dcm/packages/app/src/hooks/usePatternFlyTheme.ts


8. workspaces/dcm/plugins/dcm/src/components/serviceSpecYaml.ts ✨ Enhancement +47/-0

Service spec YAML builder utility

• Exports buildServiceSpecYaml() function to generate YAML representation of ServiceSpec
• Formats service spec data into Kubernetes-style YAML structure with metadata and spec sections
• Extracts numeric values from CPU/RAM strings and formats arrays with proper indentation
• Includes storage, policy packs, port, and protocol configuration

workspaces/dcm/plugins/dcm/src/components/serviceSpecYaml.ts


9. workspaces/dcm/plugins/dcm/src/components/dataCenterNavigation.ts ✨ Enhancement +40/-0

Data Center navigation state management

• Defines DCM_FROM_TAB_STATE constant for tracking navigation source between tabs
• Exports DcmFromTab type ('environments' | 'service-specs') and DcmLocationState interface
• Provides getDataCenterHomePath() function to resolve breadcrumb navigation URLs
• Supports fallback to default tab when location state is unavailable

workspaces/dcm/plugins/dcm/src/components/dataCenterNavigation.ts


10. workspaces/dcm/plugins/dcm/src/routes.ts ✨ Enhancement +19/-1

Data Center plugin route definitions

• Added 3 new sub-route references: serviceSpecsRouteRef, environmentDetailsRouteRef,
 serviceSpecDetailsRouteRef
• Configured routes with paths: /service-specs, /environments/:id, /service-specs/:id
• All routes are sub-routes of the main rootRouteRef

workspaces/dcm/plugins/dcm/src/routes.ts


11. workspaces/dcm/plugins/dcm/src/plugin.ts ✨ Enhancement +10/-3

Data Center plugin configuration updates

• Added 3 new routes to plugin configuration: serviceSpecs, environmentDetails,
 serviceSpecDetails
• Updated DcmPage component to use new Router component instead of ExampleComponent
• Imported new route references from routes module

workspaces/dcm/plugins/dcm/src/plugin.ts


12. workspaces/dcm/plugins/dcm/src/hooks/useDcmPolicyPacks.ts ✨ Enhancement +26/-0

Policy packs configuration hook

• Created useDcmPolicyPacks() hook to retrieve policy pack IDs from app config
• Uses Backstage configApiRef to access dcm.policyPacks configuration
• Returns empty array if configuration is not set

workspaces/dcm/plugins/dcm/src/hooks/useDcmPolicyPacks.ts


13. workspaces/dcm/plugins/dcm/src/pages/data-center/components/environmentFormTypes.ts ✨ Enhancement +32/-0

Environment registration form state types

• Defines EnvironmentRegisterFormState type with 5 fields (name, type, envLabel, maxVcpus,
 maxRamGb)
• Exports emptyEnvironmentRegisterForm() factory function for initializing empty form state

workspaces/dcm/plugins/dcm/src/pages/data-center/components/environmentFormTypes.ts


14. workspaces/dcm/plugins/dcm/config.d.ts ⚙️ Configuration changes +27/-0

DCM plugin configuration schema

• Defines TypeScript configuration schema for DCM plugin
• Exports Config interface with optional dcm.policyPacks string array property
• Marks configuration as frontend-visible

workspaces/dcm/plugins/dcm/config.d.ts


15. workspaces/dcm/plugins/dcm/src/pages/data-center/index.ts Miscellaneous +21/-0

Data Center page module exports

• Exports DataCenterPage, EnvironmentsTabContent, ServiceSpecsTabContent components
• Re-exports Environment and ServiceSpec types from data modules

workspaces/dcm/plugins/dcm/src/pages/data-center/index.ts


16. workspaces/dcm/plugins/dcm/src/components/overview/index.ts Miscellaneous +18/-0

Overview field component exports

• Exports OverviewField component and OverviewFieldProps type

workspaces/dcm/plugins/dcm/src/components/overview/index.ts


17. workspaces/dcm/plugins/dcm/src/pages/service-spec-details/index.ts Miscellaneous +17/-0

Service spec details page exports

• Exports ServiceSpecDetailsPage component

workspaces/dcm/plugins/dcm/src/pages/service-spec-details/index.ts


18. workspaces/dcm/plugins/dcm/src/data/index.ts Miscellaneous +18/-0

Data module barrel exports

• Re-exports all exports from environments and service-specs data modules

workspaces/dcm/plugins/dcm/src/data/index.ts


19. workspaces/dcm/plugins/dcm/src/pages/service-spec/index.ts Miscellaneous +17/-0

Service specs tab content exports

• Exports ServiceSpecsTabContent component

workspaces/dcm/plugins/dcm/src/pages/service-spec/index.ts


20. workspaces/dcm/plugins/dcm/src/pages/environment-details/index.ts Miscellaneous +17/-0

Environment details page exports

• Exports EnvironmentDetailsPage component

workspaces/dcm/plugins/dcm/src/pages/environment-details/index.ts


21. workspaces/dcm/packages/app/src/components/rhdh-logo/RhdhLogoFull.tsx ✨ Enhancement +18/-10

RHDH logo dark theme support

• Updated useStyles to detect dark theme and apply conditional fill color to logo text
• Added logoText style class that uses white fill in dark mode or theme text color in light mode
• Applied logoText class to two SVG path elements for dynamic theme support

workspaces/dcm/packages/app/src/components/rhdh-logo/RhdhLogoFull.tsx


22. workspaces/dcm/plugins/dcm/src/pages/service-spec/ServiceSpecsTabContent.tsx ✨ Enhancement +395/-0

Service specs tab content with CRUD UI

• Implemented full service specs tab with table, search, pagination, and CRUD operations
• Manages state for specs list, search filter, pagination, and 3 dialogs (create, edit, delete)
• Provides 8 table columns with links to detail pages and action buttons
• Includes search input with clear button and toolbar with Create button

workspaces/dcm/plugins/dcm/src/pages/service-spec/ServiceSpecsTabContent.tsx


23. workspaces/dcm/plugins/dcm/src/pages/data-center/EnvironmentsTabContent.tsx ✨ Enhancement +370/-0

Environments tab content with CRUD UI

• Implemented full environments tab with table, search, pagination, and CRUD operations
• Manages state for environments list, search filter, pagination, and 3 dialogs (register, edit,
 delete)
• Provides 5 table columns with links to detail pages and action buttons
• Includes search input with clear button and toolbar with Register button

workspaces/dcm/plugins/dcm/src/pages/data-center/EnvironmentsTabContent.tsx


24. workspaces/dcm/plugins/dcm/src/pages/service-spec-details/components/SpecEntitiesTab.tsx ✨ Enhancement +210/-0

Service spec entities detail tab

• Created entities tab component for service spec details page
• Displays table of entities using the service spec with 8 columns (ID, Component, Spec, Status,
 Quantity, Instance name, Requested by, Actions)
• Implements filter functionality with search input and clear button
• Includes status icons (CheckCircle for Success, Cached for Running) and action buttons

workspaces/dcm/plugins/dcm/src/pages/service-spec-details/components/SpecEntitiesTab.tsx


25. workspaces/dcm/plugins/dcm/src/pages/environment-details/components/EntitiesTab.tsx ✨ Enhancement +210/-0

Environment entities detail tab

• Created entities tab component for environment details page
• Displays table of entities in the environment with 8 columns (ID, Component, Spec, Status,
 Quantity, Instance name, Requested by, Actions)
• Implements filter functionality with search input and clear button
• Includes status icons (CheckCircle for Success, Cached for Running) and action buttons

workspaces/dcm/plugins/dcm/src/pages/environment-details/components/EntitiesTab.tsx


26. workspaces/dcm/plugins/dcm/src/pages/service-spec-details/components/SpecRequestHistoryTab.tsx ✨ Enhancement +200/-0

Service spec request history detail tab

• Created request history tab component for service spec details page
• Displays paginated table of request history with 6 columns (Requested at, Requested by, Component,
 Usage ID, Type, Details)
• Implements filter functionality with search input and clear button
• Includes type icons (CheckCircle for Create, Update for Update) and pagination controls

workspaces/dcm/plugins/dcm/src/pages/service-spec-details/components/SpecRequestHistoryTab.tsx


27. workspaces/dcm/plugins/dcm/src/pages/data-center/DataCenterPage.tsx ✨ Enhancement +132/-0

Data Center main page with tabbed layout

• Implemented main Data Center page with tabbed layout (Environments and Service specs tabs)
• Includes dynamic tab color styling based on theme (dark/light mode detection)
• Provides isColorDark() utility and useTabColors() hook for theme-aware styling
• Uses CSS variables for tab colors and indicator styling

workspaces/dcm/plugins/dcm/src/pages/data-center/DataCenterPage.tsx


28. workspaces/dcm/packages/app/src/components/Root/Root.tsx ✨ Enhancement +2/-0

Root component PatternFly theme integration

• Added usePatternFlyTheme() hook call in Root component to enable PatternFly theme
 synchronization
• Imported usePatternFlyTheme from hooks module

workspaces/dcm/packages/app/src/components/Root/Root.tsx


29. workspaces/dcm/plugins/dcm/package.json ⚙️ Configuration changes +1/-0

Plugin configuration schema registration

• Added configSchema field pointing to config.d.ts for plugin configuration schema

workspaces/dcm/plugins/dcm/package.json


30. workspaces/dcm/plugins/dcm/src/pages/environment-details/components/RequestHistoryTab.tsx ✨ Enhancement +200/-0

Request history tab component with filtering and pagination

• New component displaying request history for an environment in a paginated, filterable table
• Implements search functionality across requestedBy, component, usageId, and details fields
• Uses Material-UI Table component with columns for timestamp, requester, component, usage ID,
 type, and details
• Supports pagination with configurable page size (5, 10, 25, 50 rows)

workspaces/dcm/plugins/dcm/src/pages/environment-details/components/RequestHistoryTab.tsx


31. workspaces/dcm/plugins/dcm/src/pages/service-spec/components/ServiceSpecFormFields.tsx ✨ Enhancement +149/-0

Service spec form fields component for CRUD operations

• New reusable form component for service spec creation and editing
• Includes fields for name, CPU, RAM, max quota, environment selection, and policy pack compliance
 checkboxes
• Integrates with useDcmPolicyPacks hook to dynamically populate policy pack options
• Provides consistent form styling through useDcmTabTableStyles

workspaces/dcm/plugins/dcm/src/pages/service-spec/components/ServiceSpecFormFields.tsx


32. workspaces/dcm/plugins/dcm/src/pages/service-spec-details/components/SpecOverviewTab.tsx ✨ Enhancement +116/-0

Service spec overview tab with details and YAML display

• New overview tab component displaying service spec details in a grid layout
• Shows spec metadata (type, environment support, usage, deployment time, cost tier)
• Displays resource specifications (CPU, RAM, quota, environment, port, protocol, backup policy)
• Includes YAML resource specification viewer with copy functionality

workspaces/dcm/plugins/dcm/src/pages/service-spec-details/components/SpecOverviewTab.tsx


33. workspaces/dcm/plugins/dcm/src/pages/data-center/components/EnvironmentFormFields.tsx ✨ Enhancement +126/-0

Environment form fields component for registration and editing

• New reusable form component for environment registration and editing
• Includes fields for name, type selection, environment label, and resource quotas (vCPUs and RAM)
• Supports both register and edit modes with mode-specific label IDs for accessibility
• Provides helper text for field guidance

workspaces/dcm/plugins/dcm/src/pages/data-center/components/EnvironmentFormFields.tsx


34. workspaces/dcm/plugins/dcm/src/pages/service-spec-details/ServiceSpecDetailsPage.tsx ✨ Enhancement +120/-0

Service spec details page with tabbed layout

• New details page for individual service specs with tabbed navigation
• Displays breadcrumb navigation and spec name as page title
• Includes three tabs: Overview, Entities, and Request History with dynamic counts
• Handles missing spec gracefully with error message

workspaces/dcm/plugins/dcm/src/pages/service-spec-details/ServiceSpecDetailsPage.tsx


35. workspaces/dcm/plugins/dcm/src/pages/environment-details/components/OverviewTab.tsx ✨ Enhancement +110/-0

Environment overview tab with details and YAML display

• New overview tab component for environment details with grid layout
• Displays environment metadata (type, URL, quotas, labels, running resources)
• Includes YAML resource specification viewer with environment configuration
• Provides links to environment entities and external URLs with icon indicators

workspaces/dcm/plugins/dcm/src/pages/environment-details/components/OverviewTab.tsx


36. workspaces/dcm/plugins/dcm/src/pages/environment-details/EnvironmentDetailsPage.tsx ✨ Enhancement +112/-0

Environment details page with tabbed layout

• New details page for individual environments with tabbed navigation
• Displays breadcrumb navigation and environment name as page title
• Includes three tabs: Overview, Entities, and Request History with dynamic counts
• Handles missing environment gracefully with error message

workspaces/dcm/plugins/dcm/src/pages/environment-details/EnvironmentDetailsPage.tsx


37. workspaces/dcm/plugins/dcm/src/components/DcmFormDialog.tsx ✨ Enhancement +81/-0

Shared form dialog component for DCM modals

• New shared modal component for Data Center form dialogs (create, edit, delete flows)
• Provides consistent UI with title, close button, content area, and action buttons
• Supports configurable max width and full-width layout
• Encapsulates dialog styling and structure for reuse across forms

workspaces/dcm/plugins/dcm/src/components/DcmFormDialog.tsx


38. workspaces/dcm/plugins/dcm/src/pages/service-spec/components/ServiceSpecCreateDialog.tsx ✨ Enhancement +67/-0

Service spec creation dialog modal

• New modal dialog for creating service specs
• Wraps ServiceSpecFormFields component with Register and Cancel action buttons
• Uses DcmFormDialog for consistent styling and structure
• Accepts form state and submission handlers as props

workspaces/dcm/plugins/dcm/src/pages/service-spec/components/ServiceSpecCreateDialog.tsx


39. workspaces/dcm/plugins/dcm/src/pages/service-spec/components/ServiceSpecEditDialog.tsx ✨ Enhancement +67/-0

Service spec edit dialog modal

• New modal dialog for editing service specs
• Wraps ServiceSpecFormFields component with Save and Cancel action buttons
• Uses DcmFormDialog for consistent styling and structure
• Accepts form state and submission handlers as props

workspaces/dcm/plugins/dcm/src/pages/service-spec/components/ServiceSpecEditDialog.tsx


40. workspaces/dcm/plugins/dcm/src/components/overview/OverviewField.tsx ✨ Enhancement +60/-0

Overview field component for label-value display

• New reusable component for displaying label-value pairs in overview cards
• Provides consistent styling for overview sections across environments and service specs
• Supports any React children as values for flexible content rendering
• Includes responsive typography and spacing

workspaces/dcm/plugins/dcm/src/components/overview/OverviewField.tsx


41. workspaces/dcm/plugins/dcm/src/pages/service-spec/components/DeleteServiceSpecDialog.tsx ✨ Enhancement +60/-0

Service spec deletion confirmation dialog

• New confirmation dialog for deleting service specs
• Displays spec name in confirmation message
• Provides Delete and Cancel action buttons
• Uses standard Material-UI Dialog components

workspaces/dcm/plugins/dcm/src/pages/service-spec/components/DeleteServiceSpecDialog.tsx


42. workspaces/dcm/plugins/dcm/src/pages/data-center/components/EditEnvironmentDialog.tsx ✨ Enhancement +57/-0

Environment edit dialog modal

• New modal dialog for editing environments
• Wraps EnvironmentFormFields component with Save and Cancel action buttons
• Uses DcmFormDialog for consistent styling and structure
• Passes edit mode to form fields for mode-specific behavior

workspaces/dcm/plugins/dcm/src/pages/data-center/components/EditEnvironmentDialog.tsx


43. workspaces/dcm/plugins/dcm/src/pages/data-center/components/RegisterEnvironmentDialog.tsx ✨ Enhancement +57/-0

Environment registration dialog modal

• New modal dialog for registering new environments
• Wraps EnvironmentFormFields component with Register and Cancel action buttons
• Uses DcmFormDialog for consistent styling and structure
• Passes register mode to form fields for mode-specific behavior

workspaces/dcm/plugins/dcm/src/pages/data-center/components/RegisterEnvironmentDialog.tsx


44. workspaces/dcm/plugins/dcm/src/pages/data-center/components/DeleteEnvironmentDialog.tsx ✨ Enhancement +61/-0

Environment deletion confirmation dialog

• New confirmation dialog for deleting environments
• Displays environment name in confirmation message
• Provides Delete and Cancel action buttons
• Uses standard Material-UI Dialog components

workspaces/dcm/plugins/dcm/src/pages/data-center/components/DeleteEnvironmentDialog.tsx


45. workspaces/dcm/plugins/dcm/src/Router.tsx ✨ Enhancement +36/-0

Plugin-level router for DCM navigation

• New plugin-level router defining all DCM routes
• Routes service spec details page at /service-specs/:id/*
• Routes environment details page at /environments/:id/*
• Falls back to main DataCenterPage for root and unmatched paths

workspaces/dcm/plugins/dcm/src/Router.tsx


46. workspaces/dcm/packages/app/src/App.tsx ⚙️ Configuration changes +1/-1

Update DCM route to support nested routing

• Updated DCM route path from /dcm to /dcm/* to support nested routing
• Enables proper route matching for detail pages and sub-routes

workspaces/dcm/packages/app/src/App.tsx


47. workspaces/dcm/tsconfig.json ⚙️ Configuration changes +2/-0

Include config type definitions in TypeScript compilation

• Added packages/*/config.d.ts to TypeScript include paths
• Added plugins/*/config.d.ts to TypeScript include paths
• Enables TypeScript compilation of configuration type definitions

workspaces/dcm/tsconfig.json


48. workspaces/dcm/app-config.yaml ⚙️ Configuration changes +6/-0

Add DCM policy packs configuration

• Added new dcm configuration section with policyPacks array
• Defines three policy pack options: security-baseline, compliance-pci, audit-logging
• Provides mock configuration data for service spec compliance options

workspaces/dcm/app-config.yaml


Grey Divider

Qodo Logo

@rhdh-qodo-merge
Copy link

rhdh-qodo-merge bot commented Mar 24, 2026

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📎 Requirement gaps (0) 📐 Spec deviations (0)

Grey Divider


Action required

1. YAML tags become comments 🐞 Bug ✓ Correctness
Description
buildServiceSpecYaml prefixes tags with '#', which YAML treats as a comment, so tag values
effectively disappear. It also emits empty list sections as blank blocks (e.g., tags: with no -
items), which is invalid or misleading YAML for consumers copying it.
Code

workspaces/dcm/plugins/dcm/src/components/serviceSpecYaml.ts[R19-36]

+export function buildServiceSpecYaml(spec: ServiceSpec): string {
+  const packs = spec.policyPacks.map(p => `    - ${p}`).join('\n');
+  const envSup = spec.envSupport.map(e => `    - ${e}`).join('\n');
+  const tags = spec.tags.map(t => `    - #${t}`).join('\n');
+  return `kind: ServiceSpec
+metadata:
+  id: ${spec.id}
+  name: ${spec.name}
+spec:
+  cpu: ${spec.cpu}
+  ram: ${spec.ram}
+  env: ${spec.environment}
+  resourceType: ${spec.resourceType}
+  envSupport:
+${envSup}
+  tags:
+${tags}
+  estDeploymentTime: ${spec.estDeploymentTime}
Evidence
The YAML builder renders tags as - #tag, where # starts a YAML comment, so the item has no
scalar value. Also, defaultDetailFields sets tags: [], meaning the generated YAML will often
contain tags: followed by an empty line because .join('\n') on an empty array yields ''.

workspaces/dcm/plugins/dcm/src/components/serviceSpecYaml.ts[19-46]
workspaces/dcm/plugins/dcm/src/pages/service-spec/components/specFormTypes.ts[51-74]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`buildServiceSpecYaml` generates YAML that is incorrect/invalid:
- Tags are rendered as `- #tag`, which YAML interprets as a comment.
- When arrays are empty, the YAML contains keys like `tags:`/`envSupport:`/`policyPacks:` with no sequence items, producing blank blocks that are invalid or misleading.

### Issue Context
This YAML is shown in the UI for copy/paste, so it should be valid YAML and preserve values.

### Fix Focus Areas
- workspaces/dcm/plugins/dcm/src/components/serviceSpecYaml.ts[19-46]

### What to change
- Remove the `#` prefix from tag rendering (use `- ${t}`), or quote it if you intend to include `#` as part of the value.
- When an array is empty, render `tags: []` (and similarly for other arrays) rather than an empty indented block.
- Consider quoting/escaping string fields that might contain `:` or newlines to keep YAML valid.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Cannot clear maxRamGb🐞 Bug ✓ Correctness
Description
Editing an environment cannot remove a previously set maxRamGb value because the update only spreads
maxRamGb when it’s defined. Clearing the input results in omitting the field from the update object,
leaving the old value unchanged.
Code

workspaces/dcm/plugins/dcm/src/pages/data-center/EnvironmentsTabContent.tsx[R137-155]

+  const handleEditSubmit = useCallback(() => {
+    if (!editingEnvironment) return;
+    const maxVcpus = Number(editForm.maxVcpus) || 0;
+    const maxRamGb =
+      editForm.maxRamGb.trim() === ''
+        ? undefined
+        : Number(editForm.maxRamGb) || undefined;
+    setEnvironments(prev =>
+      prev.map(e =>
+        e.id === editingEnvironment.id
+          ? {
+              ...e,
+              name: editForm.name.trim(),
+              type: editForm.type,
+              envLabel: editForm.envLabel.trim(),
+              resourceLoadTotal: maxVcpus,
+              ...(maxRamGb !== undefined && { maxRamGb }),
+            }
+          : e,
Evidence
When the user clears the RAM field, maxRamGb becomes undefined and the code uses `...(maxRamGb
!== undefined && { maxRamGb })`, so the property is not written during the update. Because the state
update spreads the existing env object (...e) first, the prior maxRamGb persists.

workspaces/dcm/plugins/dcm/src/pages/data-center/EnvironmentsTabContent.tsx[137-159]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Environment edit cannot clear `maxRamGb` because updates omit the field when the input is empty.

### Issue Context
The edit submit handler builds an updated environment object by spreading the old env and conditionally spreading `{ maxRamGb }` only when defined.

### Fix Focus Areas
- workspaces/dcm/plugins/dcm/src/pages/data-center/EnvironmentsTabContent.tsx[137-159]

### What to change
- Include `maxRamGb` in the update object unconditionally (even if `undefined`), so clearing the form actually clears the value.
- Alternatively, explicitly set `maxRamGb: undefined` when the input is empty.

### Acceptance criteria
- If an environment initially has `maxRamGb` set, clearing the field and saving results in `maxRamGb` being removed/undefined in state.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools



Remediation recommended

3. Theme detection logic duplicated 🐞 Bug ⚙ Maintainability
Description
usePatternFlyTheme uses a hex numeric threshold (parseInt(hex) < 0x808080) that can misclassify
bright colors as “dark”, and it duplicates logic already implemented correctly elsewhere. This can
incorrectly apply pf-v6-theme-dark and should be consolidated to the existing luminance-based
helper.
Code

workspaces/dcm/packages/app/src/hooks/usePatternFlyTheme.ts[R33-50]

+    // Check background color for dark theme indicators
+    const backgroundColor = muiTheme.palette.background?.default;
+    const isDarkByBackground =
+      backgroundColor &&
+      (backgroundColor === '#303030' ||
+        backgroundColor === '#121212' ||
+        (backgroundColor.startsWith('#') &&
+          Number.parseInt(backgroundColor.slice(1), 16) < 0x808080));
+
+    const isDark = isDarkByType || isDarkByMode || isDarkByBackground;
+
+    // Apply PatternFly dark theme class to HTML when Backstage is in dark mode
+    const html = document.documentElement;
+    if (isDark) {
+      html.classList.add('pf-v6-theme-dark');
+    } else {
+      html.classList.remove('pf-v6-theme-dark');
+    }
Evidence
The app-level hook determines darkness using numeric comparison of the 24-bit RGB value, which
doesn’t reflect luminance (e.g., #00ffff parses to 0x00ffff, which is < 0x808080 even though
the color is bright). The PR also introduces a proper luminance-based implementation
(isBackgroundDark) in the DCM plugin; the app hook should reuse equivalent luminance logic to
avoid divergence.

workspaces/dcm/packages/app/src/hooks/usePatternFlyTheme.ts[27-51]
workspaces/dcm/plugins/dcm/src/components/dcmTheme.ts[17-36]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`usePatternFlyTheme` uses a hex numeric threshold to infer dark mode from background color; this is not a luminance check and can misclassify colors. There is also duplication: the DCM plugin already contains a luminance-based `isBackgroundDark` helper.

### Issue Context
Incorrect dark detection toggles the global `pf-v6-theme-dark` class, affecting PatternFly styling across the app.

### Fix Focus Areas
- workspaces/dcm/packages/app/src/hooks/usePatternFlyTheme.ts[27-51]
- workspaces/dcm/plugins/dcm/src/components/dcmTheme.ts[17-36]

### What to change
- Replace the `parseInt(hex) < 0x808080` heuristic with a luminance-based calculation (similar to `isBackgroundDark`).
- Prefer a single shared implementation (either move a helper into the app package or duplicate the luminance logic locally, but avoid the incorrect numeric threshold).

### Acceptance criteria
- Bright colors like `#00ffff` are not detected as dark.
- Dark colors like `#333333` are detected as dark.
- The hook continues to add/remove `pf-v6-theme-dark` correctly when Backstage theme changes.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

ⓘ The new review experience is currently in Beta. Learn more

Grey Divider

Qodo Logo

@asmasarw asmasarw force-pushed the feature/data-center branch 2 times, most recently from 6706351 to c10caa2 Compare March 26, 2026 08:28
@asmasarw asmasarw force-pushed the feature/data-center branch from 11b6529 to 5b09a9e Compare March 26, 2026 09:25
@sonarqubecloud
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant