Update code example widget #2979
Conversation
|
A documentation preview will be available soon. Request a new doc build by commenting
If your PR continues to fail for an unknown reason, the doc build pipeline may be broken. Elastic employees can check the pipeline status here. |
There was a problem hiding this comment.
👍 that seems more helpful than the current modal
Not sure if that's an option technically but in case it is:
- is there a way to directly have the input field in that modal instead of a link + a button to "save and run" (the user initially clicked to Run the code so we would resume their expected flow).
- there should maybe be less emphasis on the trial/install buttons as they look very prominent while they are secondary paths to the main intent of this modal; meaning that when users click one of the main buttons, they still have to find the console URL and come back to set it, then click again to try the sample.
|
@KOTungseth would you mind reviewing these changes? |
| <label for="url">{props.langStrings(props.url_label)}</label> | ||
| <input | ||
| id="url" | ||
| type="text" | ||
| value={getValueFromState('url')} | ||
| onInput={linkState(this, getFieldName('url'))} | ||
| /> | ||
|
|
||
| <label for="curl_host">curl {props.langStrings('host')}</label> | ||
| <p></p> |
There was a problem hiding this comment.
Below Console URL field:
Go to Dev Tools > Console, then copy the URL.
There was a problem hiding this comment.
I've cut things way back in my latest commit
There was a problem hiding this comment.
Going with "Learn more about the Dev Tools Console."
|
|
||
| <label for="curl_host">curl {props.langStrings('host')}</label> | ||
| <p></p> | ||
| <p><strong>Want to use curl? (basic auth)</strong></p> |
There was a problem hiding this comment.
| <p><strong>Want to use curl? (basic auth)</strong></p> | |
| <p><strong>Copy as curl</strong></p> | |
| <p>Include your Elasticsearch settings in curl code examples.<p> |
There was a problem hiding this comment.
Me neither, I've kept the settings page changes minimal, but I think it's pretty clear now
| <input | ||
| id="curl_host" | ||
| type="text" | ||
| value={getValueFromState('curl_host')} | ||
| onInput={linkState(this, getFieldName('curl_host'))} | ||
| /> | ||
|
|
||
| <label for="curl_username">curl {props.langStrings('username')}</label> | ||
| <label for="curl_username">Elasticsearch {props.langStrings('username')}</label> | ||
| <input | ||
| id="curl_username" | ||
| type="text" |
There was a problem hiding this comment.
There was a problem hiding this comment.
Is it confusing to send users to the Kibana docs to learn more about Elasticsearch settings? Yes. Is there a better place to send them? I'm not sure.
There was a problem hiding this comment.
Maybe we can trust the users that if they have Elasticsearch and Kibana running, they'll be able to find this information. If they don't have a running deployment yet, we've got links for them to get started. At that point, they're in another domain (setting up a deployment) rather than the domain of configuring the example widget settings.
leemthompo
dismissed stale reviews from kilfoyle and florent-leborgne
via
16ebbd0
|
I've updated screenshots per latest commits, we might want to think about merging something and circling back to avoid this PR becoming too unwieldy :) |
Summary
In configuration itself:
s/curl/elasticsearchBefore / After
Widget "Try" button
Before
After
Modal
Before
After
Configuration settings
Before
After
Test it
Here's a page
ℹ️
Tests will probably fail, and code edits are probably very hacky, I'll do my best to fix whatever I can without putting work on other folks' laps (@scottybollinger 😉 🙏 )