Add Actionable Insights UI panel with styling and mock data

[ggondela1419]

Description

This PR adds the Actionable Insights panel to the Home dashboard. It provides suggestions and resources based on insights data, and it displays a success message when everything is running smoothly. I focused on creating and styling the UI component, ensuring it displays properly on the dashboard. Right now, the panel is using mock data to mimic insights, allowing for UI testing before the backend logic is fully connected. It's ready to be integrated with actual data as soon as it's ready. This depends on the backend work for generating the health score and mapping insights (#173 and #176).

Fixes #177

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

I tested this locally by running the frontend and using mock data to simulate both scenarios:

• when insights are available (the panel shows suggestions and resources)
• when there are no issues (a success message pops up)

To reproduce:

• Run npm run dev in the Frontend directory
• Open the Home dashboard
• Verify that the Actionable Insights panel shows up under the header
• Make sure the mock data displays correctly
• Test A: insights show up correctly
• Test B: success state displays when no insights

Test Configuration:

• Language Version: JavaScript (React)
• Webpage (if applicable): http://localhost:5173/oss_dev_analytics/

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshot of Output

This is just a screenshot of the panel with the mock data for now.

[ggondela1419]

Just pulled the integration from Dhyana’s branch and tested it locally. Everything is working as expected and the Actionable Insights panel is now rendering correctly with real data instead of mock data.

Here's screenshots of what the Home page looks like now:

[hcaballero2]

This is great! I do have one question - the same one I had on Dhyana's PR - how will the user switch repos to get different health scores? My thought was to have it in the Team Tab as it already has dropdowns, but the UI is looking perfect.

[ggondela1419]

This is great! I do have one question - the same one I had on Dhyana's PR - how will the user switch repos to get different health scores? My thought was to have it in the Team Tab as it already has dropdowns, but the UI is looking perfect.

That’s a good point, I didn’t really think about how users would switch between repos for different health scores. I think that putting it in the Team page makes sense since it already has the dropdowns for that. Also, I think that either moving the panel there or connecting it to a repo selector on the Home page could work, depending on what fits best with the overall layout. Let me know what you think the best approach would be.

[hcaballero2]

This is great! I do have one question - the same one I had on Dhyana's PR - how will the user switch repos to get different health scores? My thought was to have it in the Team Tab as it already has dropdowns, but the UI is looking perfect.

That’s a good point, I didn’t really think about how users would switch between repos for different health scores. I think that putting it in the Team page makes sense since it already has the dropdowns for that. Also, I think that either moving the panel there or connecting it to a repo selector on the Home page could work, depending on what fits best with the overall layout. Let me know what you think the best approach would be.

I think the Team tab would be best, I think our current structure focuses the Home page as more of org wide news/statistics and Team is more repo specific.

[hcaballero2]

working in PR 198