Add a tree list for navigation to apps and envs in the sidebar #265

[harshith-1008]

Changed the sidebar and team layout components.

🔍 Overview

I have created a tree list navigation for easier navigation through apps and their environments.

💡 Proposed Changes

•Changed the layout.tsx file inside the [team] folder, to fetch query and send props.
•Changed the sidebar.tsx component for fitting the logic and links for the apps and environments.

🖼️ Screenshots or Demo

Before:

After:

📝 Release Notes

•New feature: Added a tree list navigation.
•Improvement: Its dynamic and changes when apps are deleted or added.
•UI: Added a scrollbar for scrolling through the sidebar.

❓ Open Questions

•I need help with the actual tree lines, mention any packages/ideas I could use to recreate it.
•Provide all test cases as I may not have covered them all.

🧪 Testing

•I have tested all links.
•I have tested light mode and dark mode UI.
•I have tested adding and deleting of apps.

🎯 Reviewer Focus

•Go through layout.tsx file in [teams] folder.
•Go through Sidebar.tsx in components/layout folder

➕ Additional Context

•Fixed issue: #265

✨ How to Test the Changes Locally

•Pull latest code from this branch.
•Ensure your local environment is up and running.
•Review all test cases.

💚 Did You...

• Ensure linting passes (code style checks)?
• Update dependencies and lockfiles (if required)
• Regenerate graphql schema and types (if required)
• Verify the app builds locally?
• Manually test the changes on different browsers/devices?

[harshith-1008]

@rohan-chaturvedi could you look into this, also how can I retrieve LICENSE file, without losing license folder.

[rohan-chaturvedi]

@harshith-1008 Sure, however the UI implementation doesn't seem complete yet:

• No branch lines
• "Cube" icons not required on the App buttons
• App chevrons don't match the expanded or collapsed state

For the license, maybe just grab it from main and restore the file to its original state.

[harshith-1008]

Could you provide me any logic/libraries I can implement for the tree system, I have no clue and I have added it on open questions as well.

[rohan-chaturvedi]

@harshith-1008 Sorry, missed the open question on the PR. For the tree ui, you could try using just divs with borders and position them either with absolute positioning or use margin properties. Check out the secret history dialog for an example:

console/frontend/components/environments/secrets/HistoryDialog.tsx

Line 95 in a8fbc88

<div className="space-y-4 pb-4 border-l border-zinc-300 dark:border-zinc-700">

[harshith-1008]

@rohan-chaturvedi Is this fine?

[harshith-1008]

@rohan-chaturvedi also for height of the line i have a static and dynamic method, could you inform me on what I should use.