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

[rohan-chaturvedi]

Is your feature request related to a problem?

Navigating to an app and environment requires several clicks.

Describe the solution you'd like

Add a tree list of apps and envs in the sidebar that the user has access to. Under the "Apps" item:

Apps
  |
  |--App 1
  |  |
  |  |-- Dev
  |  |-- Staging
  |
  |--App 2
  |  |-- Dev
  |
  |--App 3
  |  |
  |  |-- Dev
  |  |-- Staging
  |  |-- Production

• The list should be collapsible
• The current active App and Env should be highlighted
• Handle overflows, large number of apps etc

[DhairyaMajmudar]

@rohan-chaturvedi I would like to take up this issue below is a basic mockup design, I will be handling overflows using tailwind properties of overflow, Also there will be a highlight on the active app and its staging where user is present.

[rohan-chaturvedi]

Sounds good, @DhairyaMajmudar!

[DhairyaMajmudar]

Sounds good, @DhairyaMajmudar!

Thanks can you pls. assign

[harshith-1008]

hey @rohan-chaturvedi can I work on this issue?

[rohan-chaturvedi]

All yours, @harshith-1008 !

[muntaxir4]

Can I approach this as well? I worked on this last week, but didn't ask for an issue assignment. As of now it looks like this:

[rohan-chaturvedi]

@muntaxir4 perhaps you could collaborate on it with @harshith-1008? You'll need to check with him though, as I've assigned him the issue.

[harshith-1008]

hi @muntaxir4, I have also started working on this issue. If you don't mind can you take up another unassigned issue if possible? Or we could just both attempt it and after reviewing maybe the best PR could be merged?

thank you for understanding .

[muntaxir4]

@harshith-1008 Okay, since you were assigned first, you can continue working on it. I will go with some other issue.

[harshith-1008]

@rohan-chaturvedi This is my progress, I have not finished the entire tree system yet, but just wanted to ask if I should proceed with this UI?

[harshith-1008]

Also, can you please suggest how to fetch the environments(dev, prod) of a particular app so that I can display them in sidebar? When the user clicks on a particular env of an app it should redirect it to that environments' page right? but how do I add routing/link if I don't have the Id of that env in the sidebar?

[nimish-ks]

@harshith-1008 a couple of suggestions:

• Add a reasonable maximum limit (eg. 10-15 apps) on the number of apps that can be displayed in the Apps tree drop down, if there are more apps you may something like a See more or View all button that will take you to the apps screen (for users with large number of applications.)
• Make sure the Apps and App environment tree is expandable / collapsible

[harshith-1008]

Also, can you please suggest how to fetch the environments(dev, prod) of a particular app so that I can display them in sidebar? When the user clicks on a particular env of an app it should redirect it to that environments' page right? but how do I add routing/link if I don't have the Id of that env in the sidebar?

@rohan-chaturvedi can you please help me with this?

[rohan-chaturvedi]

Also, can you please suggest how to fetch the environments(dev, prod) of a particular app so that I can display them in sidebar? When the user clicks on a particular env of an app it should redirect it to that environments' page right? but how do I add routing/link if I don't have the Id of that env in the sidebar?

@rohan-chaturvedi can you please help me with this?

Hey @harshith-1008 , you can use this GetAppEnvironments query to fetch environments for a specific App. You could create a new operation that fetches all envs for a list of app ids too.

[harshith-1008]

Hey @rohan-chaturvedi , I have tried using GetAppEnvironments but I am facing an issue in there I need all the app environments data, but for the query I can only pass a single ID, could you suggest me how I can get all the app environments data.

[rohan-chaturvedi]

@harshith-1008 You could either modify the existing query or create a new query that accepts a list of appIds: [ID] instead of a single one. The response can include the environments for all apps that match the query.

Another approach is to extend the AppType to add an 'environments' field, and return all environments that are accessible to the user per app. Then simply add the environments selection to the existing Apps query:

apps {
    id
    name
    environments {
        id
        name
    }
}

In case you plan to modify the existing GetAppEnvironments query, please make sure to check where else this query is used and see that it doesn't break anything else / update the query variables where required.

[harshith-1008]

I have done this task without modifying/creating any new queries, please tell me if you need any UI changes.

[rohan-chaturvedi]

Great! Let's try and replicate the tree like UI, with branch lines. Alternatively, you could try and use the collapsing ui from the sidebar in https://docs.phase.dev.

For active app and env, let's tone down the visual effect slightly. Just use a heavier font weight, or a brighter color.

[harshith-1008]

Please check the ui once, and by the collapsable ui do you refer to how the elements only reveal themselves when their parent is clicked(such as once we click on apps, it displays the apps present in the sidebar)? As of for now I have left the collapsable logic to the arrow icon.

[rohan-chaturvedi]

@harshith-1008 Here's a high fidelity mock that should help:

• Keep the entire Apps menu collapsed by default
• When expanded, list apps, keep the env list collapsed
• Clicking "Apps" should take you to the Apps home screen. Only clicking the "V" chevron icon should expand the lists

Here's the Figma for this too, in case it helps.

[harshith-1008]

The entire menu is closed by default, only when clicking on "V" its expanded but when I click on other sidebar links it stays expanded and only collapses on second click of "V". Also clicking on apps takes you to the apps home screen as you wish, I am just working on the design would you like anything else?

[rohan-chaturvedi]

That sounds good! Will review the details of the design and UX once we have a PR.