Meshery: UI: Provide anchor on each Settings tab for deep-linking

[leecalcote]

Current Behavior
A user visiting the /settings page in Meshery may want to land within one of the Settings tabs (Environment, Service Meshes, Metrics).

As an example, currently, if a user navigates to http://meshery/settings#service-meshes, the "Service Meshes" tab is not open.

Desired Behavior
Named anchor () tags should be added to each Settings screen tab, like so:

• <a name="environment"> </a>
• <a name="service-meshes"> </a>
• <a name="metrics"> </a>

Reference

<button class="MuiButtonBase-root MuiTab-root MuiTab-textColorPrimary Mui-selected MuiTab-labelIcon MuiTab-fullWidth" tabindex="0" type="button" role="tab" aria-selected="true" title="Connect Meshery Adapters">

Screenshot

[snitin315]

@leecalcote Can I take this up?

[leecalcote]

@snitin315 please, sir, yes. This "small" enhancement will have no "small" impact on user confusion when trying to nav the app.

[aayushdutt]

@snitin315 Are you still working on this? Can I take this?

[snitin315]

Feel free to work on it.

[leecalcote]

@aayushdutt an example use case should have been noted in the description. Here's one:

Current behavior:

• A user doesn't have an Istio adapter configured.
• They click on "Istio" in the navigation bar.
• They see a "Configure Settings" button instead of actions to take with the adapter.
• They click on "Configure Settings" and are dropped off at /settings, which shows them the Environment tab (wrong tab).

We want to change that last step's behavior.

[aayushdutt]

Got it @leecalcote
I went through #671 and it looks like the description you gave above. I'll be working on the same next.
However, I guess the current behaviour when Istio adapter is not configured is that it does nothing when clicked on "Istio" on the navbar.

[leecalcote]

@aayushdutt, good point. I was just noticing this same behavior. I suppose what I described is only true for the first two bullets. It would be an improvement if we were to implement the two last bullets with the new anchor included.

[aayushdutt]

@leecalcote That would be great.

What do you think about -

• We put a label next to "Istio" in the navigation bar which says Not Configured (probably with a similar styling of labels as that on GitHub)
• When it's clicked, it directly redirects to /settings page to configure it.
• After redirecting, it shows a toast which says something like "Please configure Istio first"