Skip to content

feat(x2a): icon for the X2A#2631

Open
mareklibra wants to merge 2 commits intoredhat-developer:mainfrom
mareklibra:FLPATH-3507.rhdhIcon
Open

feat(x2a): icon for the X2A#2631
mareklibra wants to merge 2 commits intoredhat-developer:mainfrom
mareklibra:FLPATH-3507.rhdhIcon

Conversation

@mareklibra
Copy link
Copy Markdown
Member

@mareklibra mareklibra commented Mar 27, 2026

Fixes: FLPATH-3507

Adding custom X2A icon for the left side menu.

TODO:

  • replace SVG with the actually desired content (wip recently)

image

Used by: x2ansible/x2a-convertor#160

@rhdh-gh-app
Copy link
Copy Markdown

rhdh-gh-app bot commented Mar 27, 2026

Changed Packages

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

@rhdh-qodo-merge
Copy link
Copy Markdown

Review Summary by Qodo

Add custom X2AIcon component for sidebar menu

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add custom X2AIcon component for left sidebar menu
• Export X2AIcon from plugin index for public use
• Replace generic ExtensionIcon with X2AIcon in sidebar
• Update catalog-info.yaml with accurate plugin metadata
• Add changeset entry documenting icon addition
Diagram
flowchart LR
  A["X2AIcon Component"] -->|"exported from"| B["Plugin Index"]
  B -->|"imported in"| C["Root Component"]
  C -->|"replaces"| D["ExtensionIcon"]
  D -->|"in"| E["X2A Sidebar Item"]
Loading

Grey Divider

File Changes

1. workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx ✨ Enhancement +54/-0

Create custom X2AIcon SVG component

• New SVG icon component created with custom X2A branding
• Implements Material-UI SvgIcon with proper TypeScript typing
• Includes Apache License 2.0 header and JSDoc documentation
• Contains multiple SVG paths defining the icon geometry

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx


2. workspaces/x2a/plugins/x2a/src/index.ts ✨ Enhancement +1/-0

Export X2AIcon from plugin index

• Export new X2AIcon component from plugin public API
• Makes icon available for external consumption

workspaces/x2a/plugins/x2a/src/index.ts


3. workspaces/x2a/packages/app/src/components/Root/Root.tsx ✨ Enhancement +5/-6

Use X2AIcon in sidebar menu

• Import X2AIcon from X2A plugin package
• Replace ExtensionIcon with X2AIcon in X2A sidebar item
• Simplify SidebarItem configuration for X2A menu entry

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


View more (3)
4. workspaces/x2a/plugins/x2a/report.api.md 📝 Documentation +4/-0

Update API report with X2AIcon export

• Add SvgIconProps import from Material-UI
• Document X2AIcon as public API export
• Include function signature with JSX return type

workspaces/x2a/plugins/x2a/report.api.md


5. workspaces/x2a/catalog-info.yaml ⚙️ Configuration changes +18/-9

Update catalog metadata for X2A plugin

• Update component name to red-hat-developer-hub-x2a-frontend
• Add title, annotations, and links sections
• Change type to backstage-frontend-plugin
• Update lifecycle to active and owner to x2a-team
• Add system and subcomponentOf references

workspaces/x2a/catalog-info.yaml


6. workspaces/x2a/.changeset/silly-views-change.md 📝 Documentation +5/-0

Add changeset for icon feature

• Create changeset entry for patch version bump
• Document icon addition for X2A left side menu

workspaces/x2a/.changeset/silly-views-change.md


Grey Divider

Qodo Logo

@rhdh-qodo-merge
Copy link
Copy Markdown

rhdh-qodo-merge bot commented Mar 27, 2026

Code Review by Qodo

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

Grey Divider


Action required

1. SVG viewBox crops icon 🐞 Bug ✓ Correctness
Description
X2AIcon sets viewBox="7 7 24 24" but its path data includes coordinates outside that box (e.g.,
x=35.75), so the icon will render clipped/cropped in the sidebar.
Code

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[R23-28]

+export const X2AIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="7 7 24 24" {...props}>
+    <path
+      className="uuid-af1cdb32-2f72-425e-8e77-dc25423c4aa2"
+      d="M28,1H10C5.0294,1,1,5.0294,1,10v18c0,4.9706,4.0294,9,9,9h18c4.9706,0,9-4.0294,9-9V10c0-4.9706-4.0294-9-9-9ZM35.75,28c0,4.2734-3.4766,7.75-7.75,7.75H10c-4.2734,0-7.75-3.4766-7.75-7.75V10c0-4.2734,3.4766-7.75,7.75-7.75h18c4.2734,0,7.75,3.4766,7.75,7.75v18Z"
+    />
Evidence
The viewBox covers x/y in the range [7..31], but the first path includes x=35.75, which is outside
the visible area and will be clipped by the SVG renderer.

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-28]
workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[23-28]

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

### Issue description
`X2AIcon` uses a `viewBox` that is smaller than the coordinate range used by its `<path>` data, causing the rendered icon to be cropped.

### Issue Context
The first path contains coordinates up to `35.75` while the current viewBox ends at `31`.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[23-28]

### Suggested fix
Update `viewBox` to match the icon’s coordinate system (e.g., use a box that includes the max x/y used by the paths), or normalize/scale the path data to fit a 24x24 viewBox.

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



Remediation recommended

2. Leaky MUI version API 🐞 Bug ⚙ Maintainability
Description
X2AIcon is implemented and exported using @mui/material/SvgIcon and SvgIconProps, which
exposes MUI v5 types via the plugin public API in a workspace that otherwise largely uses MUI v4
(@material-ui/*), making cross-package UI code harder to standardize and evolve.
Code

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[R17-24]

+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+/**
+ * Applicatino icon (for the left side menu)
+ * @public
+ */
+export const X2AIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="7 7 24 24" {...props}>
Evidence
The new icon uses MUI v5 SvgIcon/SvgIconProps and is publicly exported (API report + index.ts).
In contrast, existing components in the same plugin and the app shell use MUI v4 imports
(@material-ui/core). The plugin package also declares dependencies on both MUI v4 and v5, which
this new public export further entrenches.

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-24]
workspaces/x2a/plugins/x2a/report.api.md[7-32]
workspaces/x2a/plugins/x2a/src/components/Repository.tsx[17-60]
workspaces/x2a/packages/app/src/components/Root/Root.tsx[16-49]
workspaces/x2a/plugins/x2a/package.json[37-55]

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

### Issue description
`X2AIcon` is built on MUI v5 (`@mui/material/SvgIcon`) and its public signature exposes MUI v5 `SvgIconProps`. This increases long-term friction in a codebase that otherwise predominantly uses MUI v4 (`@material-ui/*`).

### Issue Context
- App shell code imports `@material-ui/core` / `@material-ui/icons`.
- Other plugin components also use `@material-ui/core` `SvgIcon`.
- The plugin now exports `X2AIcon` publicly.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-24]
- workspaces/x2a/plugins/x2a/src/index.ts[16-22]
- workspaces/x2a/plugins/x2a/report.api.md[7-32]

### Suggested fix options
1) Re-implement `X2AIcon` using `SvgIcon`/`SvgIconProps` from `@material-ui/core` to match the rest of the workspace.
2) If you want to keep MUI v5 internally, avoid leaking `@mui/*` types in the public API (e.g., export `X2AIcon` as `React.ComponentType<{ className?: string }>` or similar), and update the API report accordingly.

ⓘ 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

Comment on lines +23 to +28
export const X2AIcon = (props: SvgIconProps) => (
<SvgIcon viewBox="7 7 24 24" {...props}>
<path
className="uuid-af1cdb32-2f72-425e-8e77-dc25423c4aa2"
d="M28,1H10C5.0294,1,1,5.0294,1,10v18c0,4.9706,4.0294,9,9,9h18c4.9706,0,9-4.0294,9-9V10c0-4.9706-4.0294-9-9-9ZM35.75,28c0,4.2734-3.4766,7.75-7.75,7.75H10c-4.2734,0-7.75-3.4766-7.75-7.75V10c0-4.2734,3.4766-7.75,7.75-7.75h18c4.2734,0,7.75,3.4766,7.75,7.75v18Z"
/>
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Svg viewbox crops icon 🐞 Bug ✓ Correctness

X2AIcon sets viewBox="7 7 24 24" but its path data includes coordinates outside that box (e.g.,
x=35.75), so the icon will render clipped/cropped in the sidebar.
Agent Prompt
### Issue description
`X2AIcon` uses a `viewBox` that is smaller than the coordinate range used by its `<path>` data, causing the rendered icon to be cropped.

### Issue Context
The first path contains coordinates up to `35.75` while the current viewBox ends at `31`.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[23-28]

### Suggested fix
Update `viewBox` to match the icon’s coordinate system (e.g., use a box that includes the max x/y used by the paths), or normalize/scale the path data to fit a 24x24 viewBox.

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

@mareklibra mareklibra force-pushed the FLPATH-3507.rhdhIcon branch from 1bb7f16 to c171805 Compare March 30, 2026 10:27
@mareklibra mareklibra marked this pull request as ready for review March 30, 2026 10:27
@rhdh-qodo-merge
Copy link
Copy Markdown

Review Summary by Qodo

Add custom X2A icon component for sidebar menu

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add custom X2AIcon component for left sidebar menu
• Export X2AIcon from plugin public API
• Replace generic ExtensionIcon with X2AIcon in sidebar
• Update catalog-info.yaml with accurate plugin metadata
• Add changeset entry for icon feature
Diagram
flowchart LR
  A["X2AIcon Component<br/>x2aIcon.tsx"] -- "exported from" --> B["Plugin Index<br/>index.ts"]
  B -- "imported in" --> C["Root Component<br/>Root.tsx"]
  C -- "replaces" --> D["ExtensionIcon<br/>in Sidebar"]
  E["API Report<br/>report.api.md"] -- "documents" --> A
  F["Changeset<br/>silly-views-change.md"] -- "tracks" --> A
Loading

Grey Divider

File Changes

1. workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx ✨ Enhancement +27/-0

Create X2AIcon component with custom SVG

• New React component exporting X2AIcon as MUI SvgIcon wrapper
• Implements custom SVG path for X2A application icon
• Accepts SvgIconProps for styling flexibility
• Includes Apache 2.0 license header and JSDoc documentation

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx


2. workspaces/x2a/plugins/x2a/src/index.ts ✨ Enhancement +1/-0

Export X2AIcon from plugin index

• Export X2AIcon component from plugin public API
• Makes icon available to consuming applications

workspaces/x2a/plugins/x2a/src/index.ts


3. workspaces/x2a/packages/app/src/components/Root/Root.tsx ✨ Enhancement +5/-6

Use X2AIcon in sidebar menu

• Import X2AIcon from plugin package
• Replace ExtensionIcon with X2AIcon in X2A sidebar item
• Maintains existing sidebar functionality and translations

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


View more (3)
4. workspaces/x2a/plugins/x2a/report.api.md 📝 Documentation +4/-0

Update API report with X2AIcon export

• Add SvgIconProps import from @mui/material/SvgIcon
• Document X2AIcon as public exported component
• Update API report to reflect new icon export

workspaces/x2a/plugins/x2a/report.api.md


5. workspaces/x2a/.changeset/silly-views-change.md 📝 Documentation +5/-0

Add changeset for icon feature

• Create changeset entry for patch version bump
• Document icon feature for X2A left side menu

workspaces/x2a/.changeset/silly-views-change.md


6. workspaces/x2a/catalog-info.yaml ⚙️ Configuration changes +18/-9

Update catalog metadata with accurate plugin info

• Update component name to red-hat-developer-hub-x2a-frontend
• Add title, annotations, and links with GitHub source reference
• Change type to backstage-frontend-plugin and lifecycle to active
• Add owner, system, and subcomponentOf metadata
• Include sonarqube project key and team slug annotations

workspaces/x2a/catalog-info.yaml


Grey Divider

Qodo Logo

@rhdh-qodo-merge
Copy link
Copy Markdown

rhdh-qodo-merge bot commented Mar 30, 2026

Code Review by Qodo

🐞 Bugs (3) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider


Action required

1. SVG viewBox crops icon 🐞 Bug ✓ Correctness
Description
X2AIcon sets viewBox="7 7 24 24" but its path data includes coordinates outside that box (e.g.,
x=35.75), so the icon will render clipped/cropped in the sidebar.
Code

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[R23-28]

+export const X2AIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="7 7 24 24" {...props}>
+    <path
+      className="uuid-af1cdb32-2f72-425e-8e77-dc25423c4aa2"
+      d="M28,1H10C5.0294,1,1,5.0294,1,10v18c0,4.9706,4.0294,9,9,9h18c4.9706,0,9-4.0294,9-9V10c0-4.9706-4.0294-9-9-9ZM35.75,28c0,4.2734-3.4766,7.75-7.75,7.75H10c-4.2734,0-7.75-3.4766-7.75-7.75V10c0-4.2734,3.4766-7.75,7.75-7.75h18c4.2734,0,7.75,3.4766,7.75,7.75v18Z"
+    />
Evidence
The viewBox covers x/y in the range [7..31], but the first path includes x=35.75, which is outside
the visible area and will be clipped by the SVG renderer.

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-28]
workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[23-28]

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

### Issue description
`X2AIcon` uses a `viewBox` that is smaller than the coordinate range used by its `<path>` data, causing the rendered icon to be cropped.

### Issue Context
The first path contains coordinates up to `35.75` while the current viewBox ends at `31`.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[23-28]

### Suggested fix
Update `viewBox` to match the icon’s coordinate system (e.g., use a box that includes the max x/y used by the paths), or normalize/scale the path data to fit a 24x24 viewBox.

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



Remediation recommended

2. Broken subcomponentOf reference 🐞 Bug ✓ Correctness ⭐ New
Description
workspaces/x2a/catalog-info.yaml sets spec.subcomponentOf to "red-hat-developer-hub-x2a", but this
repo’s catalog defines and uses "rhdh-plugins" as the plugin-repository parent component. This makes
the X2A component’s parent relationship unresolved in the catalog graph unless a matching parent
entity is added elsewhere.
Code

workspaces/x2a/catalog-info.yaml[R18-22]

+  type: backstage-frontend-plugin
+  lifecycle: active
+  owner: x2a-team
+  system: rhdh
+  subcomponentOf: red-hat-developer-hub-x2a
Evidence
The X2A catalog descriptor points to a parent component name that is not defined among this repo’s
catalog entities, while the repo’s canonical parent component is "rhdh-plugins" and is what other
workspaces link to via subcomponentOf.

workspaces/x2a/catalog-info.yaml[17-22]
catalog-info.yaml[1-15]
workspaces/orchestrator/catalog-info.yaml[22-27]
workspaces/bulk-import/catalog-info.yaml[25-30]

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

### Issue description
`workspaces/x2a/catalog-info.yaml` declares `spec.subcomponentOf: red-hat-developer-hub-x2a`, but there is no corresponding parent component defined in this repository’s catalog descriptors. In this repo, other workspaces use `subcomponentOf: rhdh-plugins`, which *is* defined at the repo root.

### Issue Context
If `red-hat-developer-hub-x2a` is intended to be the parent, it needs its own catalog entity definition (Component) somewhere that is loaded by the catalog. If it is not intended, the X2A component should instead reference the existing `rhdh-plugins` parent like the other workspaces.

### Fix Focus Areas
- workspaces/x2a/catalog-info.yaml[17-22]
- catalog-info.yaml[1-15]

### Suggested fix options
1) **Simplest (align with other workspaces):** Change `subcomponentOf` to `rhdh-plugins`.
2) **If a dedicated parent is desired:** Add a new catalog entity (e.g., `Component` named `red-hat-developer-hub-x2a`) and ensure it is included in the catalog locations, then keep `subcomponentOf` as-is.

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


3. Leaky MUI version API 🐞 Bug ⚙ Maintainability
Description
X2AIcon is implemented and exported using @mui/material/SvgIcon and SvgIconProps, which
exposes MUI v5 types via the plugin public API in a workspace that otherwise largely uses MUI v4
(@material-ui/*), making cross-package UI code harder to standardize and evolve.
Code

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[R17-24]

+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+/**
+ * Applicatino icon (for the left side menu)
+ * @public
+ */
+export const X2AIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="7 7 24 24" {...props}>
Evidence
The new icon uses MUI v5 SvgIcon/SvgIconProps and is publicly exported (API report + index.ts).
In contrast, existing components in the same plugin and the app shell use MUI v4 imports
(@material-ui/core). The plugin package also declares dependencies on both MUI v4 and v5, which
this new public export further entrenches.

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-24]
workspaces/x2a/plugins/x2a/report.api.md[7-32]
workspaces/x2a/plugins/x2a/src/components/Repository.tsx[17-60]
workspaces/x2a/packages/app/src/components/Root/Root.tsx[16-49]
workspaces/x2a/plugins/x2a/package.json[37-55]

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

### Issue description
`X2AIcon` is built on MUI v5 (`@mui/material/SvgIcon`) and its public signature exposes MUI v5 `SvgIconProps`. This increases long-term friction in a codebase that otherwise predominantly uses MUI v4 (`@material-ui/*`).

### Issue Context
- App shell code imports `@material-ui/core` / `@material-ui/icons`.
- Other plugin components also use `@material-ui/core` `SvgIcon`.
- The plugin now exports `X2AIcon` publicly.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-24]
- workspaces/x2a/plugins/x2a/src/index.ts[16-22]
- workspaces/x2a/plugins/x2a/report.api.md[7-32]

### Suggested fix options
1) Re-implement `X2AIcon` using `SvgIcon`/`SvgIconProps` from `@material-ui/core` to match the rest of the workspace.
2) If you want to keep MUI v5 internally, avoid leaking `@mui/*` types in the public API (e.g., export `X2AIcon` as `React.ComponentType<{ className?: string }>` or similar), and update the API report accordingly.

ⓘ 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

Signed-off-by: Marek Libra <marek.libra@gmail.com>
@mareklibra mareklibra force-pushed the FLPATH-3507.rhdhIcon branch from a7abb49 to b2b7c15 Compare March 30, 2026 10:45
@mareklibra mareklibra marked this pull request as ready for review March 30, 2026 10:45
@rhdh-qodo-merge
Copy link
Copy Markdown

Review Summary by Qodo

Add custom X2A icon component for sidebar menu

✨ Enhancement

Grey Divider

Walkthroughs

Description
• Add custom X2AIcon component for left sidebar menu
• Export X2AIcon from plugin index for public use
• Replace generic ExtensionIcon with X2AIcon in sidebar
• Update catalog-info.yaml with accurate plugin metadata
• Add changeset entry documenting icon addition
Diagram
flowchart LR
  A["X2AIcon Component"] -->|"exported from"| B["Plugin Index"]
  B -->|"imported in"| C["Root Sidebar"]
  C -->|"replaces"| D["ExtensionIcon"]
  A -->|"documented in"| E["API Report"]
Loading

Grey Divider

File Changes

1. workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx ✨ Enhancement +27/-0

Create X2AIcon component with custom SVG

• New React component wrapping Material-UI SvgIcon
• Implements custom SVG path for X2A application icon
• Accepts SvgIconProps for styling flexibility
• Includes Apache License header and JSDoc documentation

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx


2. workspaces/x2a/plugins/x2a/src/index.ts ✨ Enhancement +1/-0

Export X2AIcon from plugin index

• Export new X2AIcon component from plugin
• Makes icon available for public consumption

workspaces/x2a/plugins/x2a/src/index.ts


3. workspaces/x2a/packages/app/src/components/Root/Root.tsx ✨ Enhancement +5/-6

Use X2AIcon in sidebar menu

• Import X2AIcon from plugin package
• Replace ExtensionIcon with X2AIcon in sidebar
• Simplify SidebarItem configuration for X2A menu

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


View more (3)
4. workspaces/x2a/plugins/x2a/report.api.md 📝 Documentation +4/-0

Update API report with X2AIcon export

• Add SvgIconProps import from Material-UI
• Document X2AIcon as public API export
• Include function signature in API report

workspaces/x2a/plugins/x2a/report.api.md


5. workspaces/x2a/.changeset/silly-views-change.md 📝 Documentation +5/-0

Add changeset for icon feature

• New changeset documenting icon feature
• Marks as patch version bump
• Describes icon addition for left side menu

workspaces/x2a/.changeset/silly-views-change.md


6. workspaces/x2a/catalog-info.yaml ⚙️ Configuration changes +18/-9

Update catalog metadata with accurate details

• Update component name and title to match package
• Add GitHub project and team slug annotations
• Add SonarQube project key annotation
• Add GitHub source link with metadata
• Update spec with correct plugin type and ownership
• Change lifecycle from experimental to active

workspaces/x2a/catalog-info.yaml


Grey Divider

Qodo Logo

@rhdh-qodo-merge
Copy link
Copy Markdown

rhdh-qodo-merge bot commented Mar 30, 2026

Code Review by Qodo

🐞 Bugs (4) 📘 Rule violations (0) 📎 Requirement gaps (0)

Grey Divider


Action required

1. Undefined catalog owner 🐞 Bug ✓ Correctness ⭐ New
Description
workspaces/x2a/catalog-info.yaml sets spec.owner: x2a-team, but no Group entity named
x2a-team exists in this repository’s catalog team definitions, making the owner reference
unresolvable. This can cause the component to appear without a valid owner relationship in Backstage
and undermine owner-based filtering/permissions workflows.
Code

workspaces/x2a/catalog-info.yaml[R18-22]

+  type: backstage-frontend-plugin
+  lifecycle: active
+  owner: x2a-team
+  system: rhdh
+  subcomponentOf: rhdh-plugins
Evidence
The X2A component now declares owner: x2a-team, but the repository’s team entity file defines
several Group entities (e.g., orchestrator-team) and does not define x2a-team; other
components (like Orchestrator) reference owners that are defined there, showing the intended
pattern.

workspaces/x2a/catalog-info.yaml[18-22]
catalog-info-teams.yaml[1-42]
workspaces/orchestrator/catalog-info.yaml[22-27]

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

## Issue description
`workspaces/x2a/catalog-info.yaml` sets `spec.owner` to `x2a-team`, but there is no corresponding `Group` entity named `x2a-team` in the repo’s catalog team definitions. This leaves the component with an unresolvable owner reference in Backstage.

## Issue Context
Other components in this repo use `spec.owner` values that are backed by `Group` entities defined in `catalog-info-teams.yaml` (for example, `orchestrator-team`). The X2A owner should follow the same convention.

## Fix Focus Areas
- Add a `Group` entity for `x2a-team`:
 - catalog-info-teams.yaml[1-42]
- Or change the X2A component owner to an existing defined group (e.g. `rhdh-team`) if `x2a-team` is not intended to be a catalog entity:
 - workspaces/x2a/catalog-info.yaml[18-22]

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


2. SVG viewBox crops icon 🐞 Bug ✓ Correctness
Description
X2AIcon sets viewBox="7 7 24 24" but its path data includes coordinates outside that box (e.g.,
x=35.75), so the icon will render clipped/cropped in the sidebar.
Code

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[R23-28]

+export const X2AIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="7 7 24 24" {...props}>
+    <path
+      className="uuid-af1cdb32-2f72-425e-8e77-dc25423c4aa2"
+      d="M28,1H10C5.0294,1,1,5.0294,1,10v18c0,4.9706,4.0294,9,9,9h18c4.9706,0,9-4.0294,9-9V10c0-4.9706-4.0294-9-9-9ZM35.75,28c0,4.2734-3.4766,7.75-7.75,7.75H10c-4.2734,0-7.75-3.4766-7.75-7.75V10c0-4.2734,3.4766-7.75,7.75-7.75h18c4.2734,0,7.75,3.4766,7.75,7.75v18Z"
+    />
Evidence
The viewBox covers x/y in the range [7..31], but the first path includes x=35.75, which is outside
the visible area and will be clipped by the SVG renderer.

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-28]
workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[23-28]

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

### Issue description
`X2AIcon` uses a `viewBox` that is smaller than the coordinate range used by its `<path>` data, causing the rendered icon to be cropped.

### Issue Context
The first path contains coordinates up to `35.75` while the current viewBox ends at `31`.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[23-28]

### Suggested fix
Update `viewBox` to match the icon’s coordinate system (e.g., use a box that includes the max x/y used by the paths), or normalize/scale the path data to fit a 24x24 viewBox.

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



Remediation recommended

3. Broken subcomponentOf reference 🐞 Bug ✓ Correctness
Description
workspaces/x2a/catalog-info.yaml sets spec.subcomponentOf to "red-hat-developer-hub-x2a", but this
repo’s catalog defines and uses "rhdh-plugins" as the plugin-repository parent component. This makes
the X2A component’s parent relationship unresolved in the catalog graph unless a matching parent
entity is added elsewhere.
Code

workspaces/x2a/catalog-info.yaml[R18-22]

+  type: backstage-frontend-plugin
+  lifecycle: active
+  owner: x2a-team
+  system: rhdh
+  subcomponentOf: red-hat-developer-hub-x2a
Evidence
The X2A catalog descriptor points to a parent component name that is not defined among this repo’s
catalog entities, while the repo’s canonical parent component is "rhdh-plugins" and is what other
workspaces link to via subcomponentOf.

workspaces/x2a/catalog-info.yaml[17-22]
catalog-info.yaml[1-15]
workspaces/orchestrator/catalog-info.yaml[22-27]
workspaces/bulk-import/catalog-info.yaml[25-30]

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

### Issue description
`workspaces/x2a/catalog-info.yaml` declares `spec.subcomponentOf: red-hat-developer-hub-x2a`, but there is no corresponding parent component defined in this repository’s catalog descriptors. In this repo, other workspaces use `subcomponentOf: rhdh-plugins`, which *is* defined at the repo root.

### Issue Context
If `red-hat-developer-hub-x2a` is intended to be the parent, it needs its own catalog entity definition (Component) somewhere that is loaded by the catalog. If it is not intended, the X2A component should instead reference the existing `rhdh-plugins` parent like the other workspaces.

### Fix Focus Areas
- workspaces/x2a/catalog-info.yaml[17-22]
- catalog-info.yaml[1-15]

### Suggested fix options
1) **Simplest (align with other workspaces):** Change `subcomponentOf` to `rhdh-plugins`.
2) **If a dedicated parent is desired:** Add a new catalog entity (e.g., `Component` named `red-hat-developer-hub-x2a`) and ensure it is included in the catalog locations, then keep `subcomponentOf` as-is.

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


4. Leaky MUI version API 🐞 Bug ⚙ Maintainability
Description
X2AIcon is implemented and exported using @mui/material/SvgIcon and SvgIconProps, which
exposes MUI v5 types via the plugin public API in a workspace that otherwise largely uses MUI v4
(@material-ui/*), making cross-package UI code harder to standardize and evolve.
Code

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[R17-24]

+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+/**
+ * Applicatino icon (for the left side menu)
+ * @public
+ */
+export const X2AIcon = (props: SvgIconProps) => (
+  <SvgIcon viewBox="7 7 24 24" {...props}>
Evidence
The new icon uses MUI v5 SvgIcon/SvgIconProps and is publicly exported (API report + index.ts).
In contrast, existing components in the same plugin and the app shell use MUI v4 imports
(@material-ui/core). The plugin package also declares dependencies on both MUI v4 and v5, which
this new public export further entrenches.

workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-24]
workspaces/x2a/plugins/x2a/report.api.md[7-32]
workspaces/x2a/plugins/x2a/src/components/Repository.tsx[17-60]
workspaces/x2a/packages/app/src/components/Root/Root.tsx[16-49]
workspaces/x2a/plugins/x2a/package.json[37-55]

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

### Issue description
`X2AIcon` is built on MUI v5 (`@mui/material/SvgIcon`) and its public signature exposes MUI v5 `SvgIconProps`. This increases long-term friction in a codebase that otherwise predominantly uses MUI v4 (`@material-ui/*`).

### Issue Context
- App shell code imports `@material-ui/core` / `@material-ui/icons`.
- Other plugin components also use `@material-ui/core` `SvgIcon`.
- The plugin now exports `X2AIcon` publicly.

### Fix Focus Areas
- workspaces/x2a/plugins/x2a/src/components/x2aIcon.tsx[17-24]
- workspaces/x2a/plugins/x2a/src/index.ts[16-22]
- workspaces/x2a/plugins/x2a/report.api.md[7-32]

### Suggested fix options
1) Re-implement `X2AIcon` using `SvgIcon`/`SvgIconProps` from `@material-ui/core` to match the rest of the workspace.
2) If you want to keep MUI v5 internally, avoid leaking `@mui/*` types in the public API (e.g., export `X2AIcon` as `React.ComponentType<{ className?: string }>` or similar), and update the API report accordingly.

ⓘ 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

@sonarqubecloud
Copy link
Copy Markdown

Comment on lines +18 to +22
type: backstage-frontend-plugin
lifecycle: active
owner: x2a-team
system: rhdh
subcomponentOf: rhdh-plugins
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Action required

1. Undefined catalog owner 🐞 Bug ✓ Correctness

workspaces/x2a/catalog-info.yaml sets spec.owner: x2a-team, but no Group entity named
x2a-team exists in this repository’s catalog team definitions, making the owner reference
unresolvable. This can cause the component to appear without a valid owner relationship in Backstage
and undermine owner-based filtering/permissions workflows.
Agent Prompt
## Issue description
`workspaces/x2a/catalog-info.yaml` sets `spec.owner` to `x2a-team`, but there is no corresponding `Group` entity named `x2a-team` in the repo’s catalog team definitions. This leaves the component with an unresolvable owner reference in Backstage.

## Issue Context
Other components in this repo use `spec.owner` values that are backed by `Group` entities defined in `catalog-info-teams.yaml` (for example, `orchestrator-team`). The X2A owner should follow the same convention.

## Fix Focus Areas
- Add a `Group` entity for `x2a-team`:
  - catalog-info-teams.yaml[1-42]
- Or change the X2A component owner to an existing defined group (e.g. `rhdh-team`) if `x2a-team` is not intended to be a catalog entity:
  - workspaces/x2a/catalog-info.yaml[18-22]

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

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.

2 participants