Feat/environment view

[EmilK15]

Related Issue

Closes #863

Your solution

Added information icon next to the name of the environment.
Added EnvironmentInfoDialog component which will display and allow users to copy the URL of their api endpoints.

How Has This Been Tested?

Made sure that if you switch to different environments that the dialog also gets updated

Screenshots (if relevant):

[adrians5j]

I'd go with a green icon instead of a black one on the menu. Can't really see it. Not sure how the other icons are being shown in dark mode. 🤔

Are all icons black?

BTW, not sure if you've seen this comment: #863 (comment)

Let's check those, and the remaining stuff after we do the current release. I like the general idea in the dialog, but I feel some additional styling might be added (for example, different fonts for the subtitle and the actual link).

[EmilK15]

Okay yea I can add it to the places we mentioned before:
i.e Add CMS links in environment aliases views.
Also add it in the Access Tokens form.

[adrians5j]

BTW, the dialog is wrong here, because it's not showing all of the possible env aliases that the current env might have.

Please check this comment.

[EmilK15]

Updated the the EnvironmentInfoDialog so that it now loads all relevant aliases to the environment you clicked.
Styled the text so it looks much nicer and different.

[EmilK15]

See the below menu with the added icon.
Adrian and I were talking about what the layout should be in a way that doesn't intrude on the environment name being cut off:

One way is we can remove the left Icon and reduce the space specifically for the information icon and go from there.
We could also move the information icon elsewhere so that part of the menu isn't too crowded.
Some other opinions might be helpful to come to a good solution.

[EmilK15]

After talking with the team, I'll be changing the icon to be added to the FooterMenu.

[EmilK15]

Added the API Information to the FooterMenu and can see the updated menu here:

[EmilK15]

Fixed API Information so it looks like this now:

Now EnvironmentInfoDialog looks like the following:

[Pavel910]

@doitadrian the idea was to have one single place with all API URLs. So users don't have to use terminal to find the main GraphQL API URL. I agree that we need to iterate on this visually, just to make real distinction between the 2 sections, but I would definitely keep this information all in one place.

[adrians5j]

Agreed, I'm also for keeping åll of the info in one place. 👍 👍

[EmilK15]

Made the following changes as:
Note: Making the text smaller for the other subtitles looked weird as it would be a smaller size than the actual url, so instead I had the new label match the height of the dialog title and kept the rest the same.
Environment Aliases


When clicking API information:

[adrians5j]

Please check my comment.

BTW please also divide GraphQL API row from the Headless CMS - Production section title.

[adrians5j]

What's this for? o.O

[adrians5j]

These queries are specific to app-headless-cms, and are made in the app-admin package.

This should not be here.

I suggest you leave this dialog here, but make it also pluggable, so that the additional Headless CMS URLs section can be added from that app, via a plugin.

I see you have the EnvironmentInfoDialog component there. I would rename it to APIInformationDialog, and add the Headless CMS section via a new app-plugin-admin-information-dialog plugin.

[Pavel910]

@EmilK15 this is the same thing you did for the WelcomeScreen. Create a skeleton which uses plugins, but the plugins themselves must come from other apps. App dependencies must not be hardcoded inside the packages, meaning, app-admin must NOT depend on any other app, because it's a skeleton, not an actual implementation. That's the whole point of plugins.

[adrians5j]

Thanks @Pavel910 for additional explanation.

[EmilK15]

Great points,
So to recap the plan is for that the component within app-admin will render a plugin that will be defined within app-headless-cms which will contain the environment information content.
In doing this we won't need to make a query that was specific to app-headless-cms from app-admin.
Makes sense to me

[adrians5j]

Cool, let us know if you'll need any help with this.

[EmilK15]

Moved method into plugin: Added different views depending on what you click on:
Api Documentation: (now shows GraphQL API, no other view does this)

Environment Aliases view now only shows the links for the selected Alias: (no graphql api)

Environments now shows links for every alias specific to that environment (no graphql api)