Add In-Product Help

[jtary]

SUMMARY:

1. We would like to add in-product DETAILED HELP in THREE PLACES in the Console app. One is after the user clicks on the icon next to the "Get started with a ready template or upload your own SDL" line and the other for when the user clicks the "help" icon at the bottom of the left side bar (the "?")
2. We would also like to add TOOLTIPS in FOUR places in the app

IN-PRODUCT DETAILED HELP IN SIDE BAR

• FIRST ITEM. Help after "Get started with a ready template or upload your own SDL"
  
  Two changes requested here:

1. Add "what is SDL?" label/ icon. Clicking it should pop open a side bar as shown below
   

2. Display the following content in the side bar in the format indicated in the design above (ignore the orange comment icon)
   ======
   "SDL stands for “Stack Definition Language” and, as the name suggests, is a way for you (as a user or tenant) to specify what infrastructure stack you need for your application. The SDL file includes compute needs, locations, pricing and other things that help Akash determine the best provider(s) for you to run your application on.

To dig deeper into SDL and it's various sections, read this documentation

To see some samples SDL configurations, check out this awesome akash repository. Each directory in the awesome akash repository contains a sample "deploy.yaml" SDL file that deploys a specific application on to akash"!

======

• SECOND ITEM: Clicking Help (?) on the left nav bar, should pop open the side bar with the following elements. The topy and hyperlinks are provided below (hyperlinks should open in new tabs)
  

Copy for the above design:

"Documentation": "Review detailed documentation" (hyperlink: https://docs.akash.network/guides/deploy)
"Discussion Forum": "View current and past community discussions" (https://github.com/orgs/akash-network/discussions)
"Discord Server": "Join the Discord server and ask any questions" (https://discord.akash.network/)
"Github Repository": "Check out the Akash Network Open Source code bases and community repository" (https://github.com/akash-network)

• THIRD ITEM:
  Wallet Help (@aktdenis - can you please add link and screenshot to the figma designs for this? I know we worked on them together but I can't seem to locate it)
  Two places we will want to guide people: 1) On the top right "Wallet Connected" action and 2) On the "Connect Wallet" button in the deployment configuration screen (once we implement it).
  The help for this needs to be a detailed help in the right side nav bar. Text on the right side nav bar should be as follows:
  ==========
  "Deploying workloads on Akash Network requires you to pay in Akash Token ($AKT) using a Keplr Wallet.

To use Keplr wallet with Overclock Console, install the Keplr browser plugin for your browser.
There are two main ways to fund your Keplr Wallet with AKT:

1. Purchase them from one of the exchanges listed below:

• Kucoin
• Crypto.com
• Kraken
• AscendEx
• Gate.io
• Bittrex
• DigiFinex

2. If you have tokens of other Cosmos chains you can exchange them for AKT using the Osmosis App.

For a step-by-step instruction on all that, consult our documentation on topic here"

===========

TOOL TIP HELP

• 1. Hover + tooltip after "Configure Services" here
  

Text: "This is where you can specify various parameters (one per service) that make up your SDL file. The number and name of the services will vary depending on the application/ SDL"

• 2. Hover + tooltip help after "pricing" here:
  
  text: "The value you specify here is the maximum you would like to pay for the compute resources you are requesting for this service. uakt allows you to specify an amount that is a fraction of 1AKT"

• 3. Hover+tooltip text after "Resources"
  
  Text: "This is where you specify how much CPU, memory and storage you would like to lease from the provider, to host your application."

• 4. Deployment details screen

  • Hover tooltip help next to "Update Deployment" with text "This will update a limited set of fields in an existing/ active deployment. Compute resources and placement criteria are not updatable."
  • Hover tooltip help next to "Re-Deploy" with text "This will create a whole new replica of this deployment. The existing deployment will not be touched."

[anilmurty]

@aktdenis - couple requests for you:

1. Could you please update the design images in the issue above (the one with the "what is SDL?" help) - specifically, remove that comment and remove the search bar
2. Could you add a screenshot of the design for "THIRD ITEM" above?

[mspilimbergo]

Hey all

I'm interested in giving this a stab. Are there any requirements for mobile/smaller device responsiveness? Or should I just worry about getting this to work for desktop primarily?

Thanks!

[CrystalDime]

Akash.Console.-.Google.Chrome.2023-04-03.19-28-10.mp4

The thing I'm confused about at this point is IN-PRODUCT DETAILED HELP IN SIDE BAR third item. I'm not sure what's supposed to trigger the third help center window.

[anilmurty]

hey @CrystalDime - thanks for working on this!
Re. your question about the 3rd item in the IN-PRODUCT DETAILED HELP section. This is the popup that shows up when you don't have a Keplr wallet installed (open console in a private browser and you'll see it):

And a couple other things:

1. We can remove the search bar (that was a design idea that we can pursue later)
2. I just realized that the copy for the individual items in this image are placeholders so I am adding copy to the description of the issue above
   

[anilmurty]

@CrystalDime - I've added new copy for item 2 of the in-product help section.
For item 3, we will want to trigger when the user does not have the keplr wallet installed. It should replace the "install keplr" message that shows in the center of the screen. I cleaned up the formatting of the issue a bit -- if that doesn't help, please wait for @aktdenis to add a design wireframe

[aktdenis]

@aktdenis - couple requests for you:

1. Could you please update the design images in the issue above (the one with the "what is SDL?" help) - specifically, remove that comment and remove the search bar
2. Could you add a screenshot of the design for "THIRD ITEM" above?

@anilmurty

Updated design for what's SDL:

And a screenshot for "THIRD ITEM"

[CrystalDime]

Removed search bars, added Keplr wallet help center.

[anilmurty]

Thanks @aktdenis

Great work @CrystalDime - did you also add links for each of the items? I think I put most of them in the description but a may have missed a couple like keplr extension (https://chrome.google.com/webstore/detail/keplr/dmkamcknogkgcdfhhbddcghachkejeap), Individual coin exchanges (should be easy to find those) and Akash docs for wallet set up (https://docs.akash.network/tokens-and-wallets)

Once you have those and have tested a deployment (deploy something like tetris, make sure it works and close out deployment) then you are good to raise a PR for review/ merge. If you need $AKT for testing deployment, share your keplr wallet address and I'll send you some

[anilmurty]

@aktdenis - one thing I'm wondering is, if we should have a "?" icon next to the "connect wallet" button so that this side bar is accessible always and not just when the wallet is not installed. Thoughts?

[anilmurty]

@CrystalDime - Actually, I'll just decide quickly we can move forward. Let's make all help consistent to the "?" - so, for your implementation:

1. Change the "What is SDL" label to the question mark icon
2. Add a question mark icon next to the "Connect Wallet" button (always present, regardless of what state the wallet is in (not installed, installed but not logged in or installed and logged in). Clicking it brings up the side bar for that help
3. Also, any instances of "Overclock Console" or "the Overclock Console" can be changed to "Akash Console". We had initially thought of naming it differently, and the designs are a remnant of that

All other things can remain as they are in your above screenshots. Once that is done, please raise a PR for review

[CrystalDime]

Yes, I added the links for each of the items.

My wallet address is cosmos1mp76wwtn8g3n5eunacwhj6t9gg8ec7vh29zn2n

[anilmurty]

Thanks @CrystalDime - Please send akt wallet address - should be something like akash1tf5avu5d4fh...

[CrystalDime]

akash1mp76wwtn8g3n5eunacwhj6t9gg8ec7vh8705nf

[anilmurty]

@CrystalDime - sent you 20 $AKT - please confirm

[CrystalDime]

Yes. I received it.

[anilmurty]

Great! - once you confirm a working deployment (Tetris or something basic from the templates is sufficient) with your forked changes, please include a screen recording of it in a PR and we'll review and merge it.