Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update code example widget #2979

Merged
merged 4 commits into from
Apr 16, 2024
Merged

Update code example widget #2979

merged 4 commits into from
Apr 16, 2024

Conversation

leemthompo
Copy link
Contributor

@leemthompo leemthompo commented Apr 8, 2024

Summary

  • Updates UI copy from Add "Try Console" selector to the Console Widget #2974
  • Tries to help orient users who don't know what Kibana or Console is yet
    • The CTA is "Set your Kibana Console URL"
    • Makes "Try in Console" button more explicit: "Try in Elastic Console"
    • Focuses on helping users set up their Console URL first and foremost
    • Clearly separates this from new users who don't yet have deployment, making cloud and local installations sibling buttons with emphasis on Cloud

In configuration itself:

  • Clearly separates the Console and curl setup, as these are two different flows
  • Fixes bugs like "curl username" and "curl password" by s/curl/elasticsearch

Before / After

Widget "Try" button

Before
image
After

Screenshot 2024-04-16 at 11 53 14

Modal

Before
image
After

Screenshot 2024-04-16 at 11 53 01

Configuration settings

Before
image
After

Screenshot 2024-04-16 at 12 30 49

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 😉 🙏 )

@leemthompo leemthompo self-assigned this Apr 8, 2024
Copy link

github-actions bot commented Apr 8, 2024

A documentation preview will be available soon.

Request a new doc build by commenting
  • Rebuild this PR: run docs-build
  • Rebuild this PR and all Elastic docs: run docs-build rebuild

run docs-build is much faster than run docs-build rebuild. A rebuild should only be needed in rare situations.

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.

Copy link
Contributor

@florent-leborgne florent-leborgne left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 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.

@leemthompo leemthompo marked this pull request as ready for review April 8, 2024 12:09
@leemthompo leemthompo requested a review from a team as a code owner April 8, 2024 12:09
kilfoyle
kilfoyle previously approved these changes Apr 8, 2024
Copy link
Contributor

@kilfoyle kilfoyle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🏎️
This is awesome!

@scottybollinger
Copy link
Contributor

@KOTungseth would you mind reviewing these changes?

resources/web/docs_js/index.js Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/localization.js Outdated Show resolved Hide resolved
resources/web/docs_js/localization.js Outdated Show resolved Hide resolved
Copy link
Contributor

@KOTungseth KOTungseth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I took another crack at this. If none of this makes sense, I whipped up an ugly design as a dumping ground for my ideas. Let me know if you want to walk through them!

resources/web/docs_js/index.js Outdated Show resolved Hide resolved
resources/web/docs_js/localization.js Outdated Show resolved Hide resolved
resources/web/docs_js/localization.js Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
resources/web/docs_js/components/console_widget.jsx Outdated Show resolved Hide resolved
<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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Below Console URL field:

Go to Dev Tools > Console, then copy the URL.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've cut things way back in my latest commit

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<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>

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't love this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Below Elasticsearch username field:

For settings information, go to Configure Kibana.

Save | Reset

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Contributor Author

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 :)

Copy link
Contributor

@KOTungseth KOTungseth left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! This looks amazing.

@leemthompo leemthompo merged commit 07407e8 into master Apr 16, 2024
3 checks passed
@leemthompo leemthompo deleted the leemthompo/example-widget branch April 16, 2024 15:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants