feat: display node details in sidepanel #1072

[faisal7008]

Problem

The current implementation of the Resources Explorer does not provide details about a node when it is clicked on the sidepanel.

fixes #1072

Solution

To address this issue, we propose to add a side panel that displays details about a node when it is clicked. This information will be fetched from the API using the resource ID, which is part of the node data.

Changes Made

• Made existing sidepanel generic and added it to storybook along with its variants.
• Reused the existing InventorySidepanel for the Resources Explorer.
• Added resource details tab to the sidepanel which is displayed on inventory page as well as explorer page.
• Implemented an onClick event handler for nodes that triggers an API call using the resource ID.
• The API response is then used to populate the side panel with details about the clicked node.
• Also, created a pill component used in node details section and added it to storybook.

How to Test

[Provide instructions on how to test the changes you made, including any relevant details like configuration steps or data to be used for testing.]

Screenshots

Notes

[Any additional notes or information that you would like to share with the reviewers.]

Checklist

• Code follows the contributing guidelines
• Changes have been thoroughly tested
• Documentation has been updated, if necessary
• Any dependencies have been added to the project, if necessary

Reviewers

@Traxmaxx @mlabouardy @AllieMendes

[Traxmaxx]

LGTM with the new changes. Thanks a ton for this great PR! Also thanks for adding all the new Storybook components! 🔥 💚

[faisal7008]

LGTM with the new changes. Thanks a ton for this great PR! Also thanks for adding all the new Storybook components! 🔥 💚

Appreciate the feedback! Glad you like the changes. Let me know if you need anything else. 😊

[mlabouardy]

@faisal7008 great job on this one 👏🏻 could you please fix the conflict so I can merge the PR :)