RHDHPAI-493: New Developer Sandbox RHDH Internal Plugin

[Lucifergene]

Developer Sandbox RHDH Internal Plugin

Screenshots

Modals

Video

Tab-.object.Object._.RHDH.mp4

Sprint Demo:
https://github.com/user-attachments/assets/9f2abd7b-4a25-4dd1-b7a2-f07d08e49cd4

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-gh-app]

Changed Packages

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

[Lucifergene]

/cc @rohitkrai03 @karthikjeeyar @ShiranHi

[christoph-jerolimov]

Sorry, also if I wasn't asked I quickly looked into this. Nice work 👍

I just like to recommend to use Material UI v4 or MUI v5, not both. You can do it and Backstage core components still use MUI v4. But I would avoid mixing them. :)

All our other other plugins uses MUI v5. Also not v6. It might work, but it could also result in issues when running later as a dynamic plugin in RHDH because RHDH dynamic plugins handles MUI as a shared library. So I guess you will get MUI v5 at runtime. 🤷‍♂️

But at the end, its up to you. The screenshot looks really nice. 😏

[ShiranHi]

Thanks, @Lucifergene , It looks great!

I have a few questions:

Home Page (design):

1. Can we make the card layout responsive so that if the screen is wide, users will see more cards per row?
2. Can you also display the tooltip "Product you tried"?

3. I noticed that all cards initially have the "Product you tried" badge. Just to confirm, this badge should not appear by default, it should only be displayed when a user clicks the "Try it" button. Is this the current behavior?

Mobile Verification Modal (design):

1. There's an icon in the phone number field, what is it?

2. Can we pre-select the phone number field so users can start typing immediately when the modal opens?
3. Can we format the phone number input to display the phone layout, for example: +34 (000) 000 0000?
4. Can we disable the "Send code" button until a user enters a valid phone number?
5. The country dropdown appears too high, can we make it open below the field and limit the height to display a maximum of seven countries at once?

Verification Code Modal (design):

1. Can we disable the "Start trial" button and only enable it once the user has entered the code?
2. Do we show an error message if the code is invalid?

Access Code Modal (design):

1. Same as above, can we disable the "Start trial" button until the user has entered the access code?
2. Do we show an error message if the code is invalid?
3. I think we need to remove the footer once a valid access code has been entered...

Dark Mode:

1. Can we adjust the badge color to be a darker cyan #009596 only for the dark mode? It seems too bright.
2. Can the banner background (where the "Try Red Hat products" title appears) match the header's color?
3. I noticed that the cards on the Home page and Activity page look different, can we align them to match the Home page style?

Activities Page (design):

1. We should split the content there, so we have the top "Featured" and the bottom (which gray background) all the rest of the cards.
2. Can we make the whole card clickable?

[Eswaraiahsapram]

@Lucifergene This looks great 🎆 , I have added few comments, PTAL.

FYI, Sonarcloud issues has to be fixed too.

1. Can we add a border as per Figma? Also, the 'TRY IT' CTA (all caps) should be aligned correctly as per the design. Additionally, the blue ticks are not properly aligned—please adjust them accordingly.
2. Developer Sandbox title font size not matching with Figma.

[Lucifergene]

@Lucifergene This looks great 🎆 , I have added few comments, PTAL.

FYI, Sonarcloud issues has to be fixed too.

1. Can we add a border as per Figma? Also, the 'TRY IT' CTA (all caps) should be aligned correctly as per the design. Additionally, the blue ticks are not properly aligned—please adjust them accordingly.
2. Developer Sandbox title font size not matching with Figma.

Thanks @Eswaraiahsapram
Actually you need to use the yarn start from the plugin to see the PF designed plugin UI that matches with the Figma

[sonarqubecloud]

Quality Gate failed

Failed conditions
7 Security Hotspots
10.6% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

[karthikjeeyar]

As soon as I click on a card, it marks that card with green badge in top left and opens the "Lets verify you" modal, if I decide to cancel without adding my phone number it still shows the green badge indicating I have tried this product, is it expected?

[Lucifergene]

As soon as I click on a card, it marks that card with green badge in top left and opens the "Lets verify you" modal, if I decide to cancel without adding my phone number it still shows the green badge indicating I have tried this product, is it expected?

yes, as the verification flow is not shown to everyone. Only some users would get it. Others would directly get signed up and sent to the cluster url.
Also showing the green corner would remind the user that he was trying to use that product even if they haven't verified their phone.

[rohitkrai03]

/approve