kibana/packages/cloud/.storybook
Vadim Kibana bd16667056
Connection Details Flyout (#180912)
## Summary

Implements the new *Connection Details* flyout, which allows to copy ES
connection details and provides a simplified interface to create an API
key.


![connection-details](2223db63-748c-4620-9686-1b79c40037a7)


![image](6c3f9661-12bf-4868-b432-483e88dbaab5)


![image](50016456-c880-4738-af24-cb7bebafd01a)


![image](d92f20a5-75bf-4563-abc9-afa5c3256bbd)


### Old UIs

Old connection details modal:


![image](661a9988-6c3b-493f-beca-96e7d2457ad4)

Could be open from help menu:


![image](717bac4c-b041-4163-b4b9-1b7e5ef0a791)

Or, could be open from a setup guide card:


![image](c1d5a657-183f-4af6-90c3-c1d393379785)

## How to test

Add these Cloud settings to your `config/kibana.dev.yml` as a mock data:

```
elasticsearch.hosts: ["http://localhost:9200"]
xpack.cloud.id: my-cluster-id:dXMtZWFzdC0xLmF3cy5zdGFnaW5nLmZvdW5kaXQubm8kZjY3ZDZiZjFhM2NmNDA4ODhlODg2M2Y2Y2IyY2RjNGMkOWViYzEzYjRkOTU0NDI2NDljMzcwZTNlZjMyZWYzOGI=
```

To make Kibana think your local user is a "cloud user", hard-code
`elastic_cloud_user` to `true`:

<img width="764" alt="image"
src="918ed4e6-6cdc-4632-a5a9-0f0be46947d8">



### Checklist

Delete any items that are not applicable to this PR.

- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)


### For maintainers

- [x] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)


## Release note

The new *Connection details* overlay features a cleaner UI for
Elasticsearch endpoint URL and Cloud ID token retrieval. As well as the
new *"API key"* tab, which is a simplified interface for creating an API
key with all the default settings, except the expiration time is set to
90 days. If user wants a more granular API keys, there is a link which
navigates to the right section in Stack Management.


![connection-details](2223db63-748c-4620-9686-1b79c40037a7)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2024-04-23 16:35:04 +02:00
..
main.js Connection Details Flyout (#180912) 2024-04-23 16:35:04 +02:00