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

[Inventory] Add Sharing button #194535

Merged
merged 3 commits into from
Oct 2, 2024
Merged

Conversation

Bluefinger
Copy link
Contributor

@Bluefinger Bluefinger commented Oct 1, 2024

Summary

Adds a Share link button to the Inventory page, next to the Add Data button on the top right of the screen. This creates a short link and copies it to the user's clipboard so they can share it.

Screen.Recording.2024-10-01.154833.mp4

How to Test

  • Log in and go to Inventory page. Ensure there is data loaded and entities are showing.
  • Put a filter on the inventory to restrict the results to a given state, such as entity.type : "service".
  • Click on the Share button and wait until you get a success toast message.
  • Open a new empty tab on the browser and paste the link into the url bar to navigate to the page.

Expected Result: The page should navigate to the Inventory page and load into the same state as the page on the original browser tab.

Closes #192325

@Bluefinger Bluefinger added release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team labels Oct 1, 2024
@obltmachine
Copy link

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

  • /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
  • run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

@Bluefinger
Copy link
Contributor Author

/ci

@Bluefinger
Copy link
Contributor Author

@elasticmachine merge upstream

@Bluefinger Bluefinger marked this pull request as ready for review October 1, 2024 11:37
@Bluefinger Bluefinger requested a review from a team as a code owner October 1, 2024 11:37
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #103 / serverless observability UI Dataset Quality Flyout overview summary panel should show summary KPIs

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
inventory 201 204 +3

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
inventory 152.2KB 155.4KB +3.1KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

@iblancof
Copy link
Contributor

iblancof commented Oct 1, 2024

Great feature!

Should we provide some feedback to the user when the link is copied to the clipboard?

I'm not sure if this functionality exists in other areas without feedback, but it could be a worthwhile improvement.

Edit: I just read in the description there's some tooltip expected but I didn't see it in the recording.

@Bluefinger
Copy link
Contributor Author

@iblancof I updated the PR description with a better video to show the toast notification.

@botelastic botelastic bot added the ci:project-deploy-observability Create an Observability project label Oct 2, 2024
@Bluefinger Bluefinger merged commit 574af41 into elastic:main Oct 2, 2024
26 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11141182464

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 2, 2024
## Summary

Adds a Share link button to the Inventory page, next to the Add Data
button on the top right of the screen. This creates a short link and
copies it to the user's clipboard so they can share it.

https://github.com/user-attachments/assets/42c7b2f9-da19-4ced-8d28-211234bea4cf

## How to Test

- Log in and go to Inventory page. Ensure there is data loaded and
entities are showing.
- Put a filter on the inventory to restrict the results to a given
state, such as `entity.type : "service"`.
- Click on the `Share` button and wait until you get a success toast
message.
- Open a new empty tab on the browser and paste the link into the url
bar to navigate to the page.

**Expected Result**: The page should navigate to the Inventory page and
load into the same state as the page on the original browser tab.

Closes elastic#192325

---------

Co-authored-by: Elastic Machine <[email protected]>
(cherry picked from commit 574af41)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

setIsLoading(false);

if (copy(url)) {
notifications.toasts.addSuccess({
Copy link
Contributor

@kpatticha kpatticha Oct 2, 2024

Choose a reason for hiding this comment

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

While this works smoothly: toggleShareContextMenu provides this for free

* It is possible to use the static function `toggleShareContextMenu`

@Bluefinger have you tried it?

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 have tried it now, but it doesn't seem to be able to give me short urls (even though I have tried making sure it is configured for short urls), which is part of the acceptance criteria. And currently, we are only doing copied URLs, so creating an overlay just to click again to copy a URL is not great UX. We also don't have the export to CSV option at the moment.

kibanamachine added a commit that referenced this pull request Oct 2, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Inventory] Add Sharing button
(#194535)](#194535)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Gonçalo Rica Pais da
Silva","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-02T09:19:44Z","message":"[Inventory]
Add Sharing button (#194535)\n\n## Summary\r\n\r\nAdds a Share link
button to the Inventory page, next to the Add Data\r\nbutton on the top
right of the screen. This creates a short link and\r\ncopies it to the
user's clipboard so they can share
it.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/42c7b2f9-da19-4ced-8d28-211234bea4cf\r\n\r\n##
How to Test\r\n\r\n- Log in and go to Inventory page. Ensure there is
data loaded and\r\nentities are showing.\r\n- Put a filter on the
inventory to restrict the results to a given\r\nstate, such as
`entity.type : \"service\"`.\r\n- Click on the `Share` button and wait
until you get a success toast\r\nmessage.\r\n- Open a new empty tab on
the browser and paste the link into the url\r\nbar to navigate to the
page.\r\n\r\n**Expected Result**: The page should navigate to the
Inventory page and\r\nload into the same state as the page on the
original browser tab.\r\n\r\nCloses
#192325\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine
<[email protected]>","sha":"574af418a2dd30ad19eee0a4c49b82b41c489470","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","v8.16.0"],"title":"[Inventory]
Add Sharing
button","number":194535,"url":"https://github.com/elastic/kibana/pull/194535","mergeCommit":{"message":"[Inventory]
Add Sharing button (#194535)\n\n## Summary\r\n\r\nAdds a Share link
button to the Inventory page, next to the Add Data\r\nbutton on the top
right of the screen. This creates a short link and\r\ncopies it to the
user's clipboard so they can share
it.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/42c7b2f9-da19-4ced-8d28-211234bea4cf\r\n\r\n##
How to Test\r\n\r\n- Log in and go to Inventory page. Ensure there is
data loaded and\r\nentities are showing.\r\n- Put a filter on the
inventory to restrict the results to a given\r\nstate, such as
`entity.type : \"service\"`.\r\n- Click on the `Share` button and wait
until you get a success toast\r\nmessage.\r\n- Open a new empty tab on
the browser and paste the link into the url\r\nbar to navigate to the
page.\r\n\r\n**Expected Result**: The page should navigate to the
Inventory page and\r\nload into the same state as the page on the
original browser tab.\r\n\r\nCloses
#192325\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine
<[email protected]>","sha":"574af418a2dd30ad19eee0a4c49b82b41c489470"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194535","number":194535,"mergeCommit":{"message":"[Inventory]
Add Sharing button (#194535)\n\n## Summary\r\n\r\nAdds a Share link
button to the Inventory page, next to the Add Data\r\nbutton on the top
right of the screen. This creates a short link and\r\ncopies it to the
user's clipboard so they can share
it.\r\n\r\n\r\nhttps://github.com/user-attachments/assets/42c7b2f9-da19-4ced-8d28-211234bea4cf\r\n\r\n##
How to Test\r\n\r\n- Log in and go to Inventory page. Ensure there is
data loaded and\r\nentities are showing.\r\n- Put a filter on the
inventory to restrict the results to a given\r\nstate, such as
`entity.type : \"service\"`.\r\n- Click on the `Share` button and wait
until you get a success toast\r\nmessage.\r\n- Open a new empty tab on
the browser and paste the link into the url\r\nbar to navigate to the
page.\r\n\r\n**Expected Result**: The page should navigate to the
Inventory page and\r\nload into the same state as the page on the
original browser tab.\r\n\r\nCloses
#192325\r\n\r\n---------\r\n\r\nCo-authored-by: Elastic Machine
<[email protected]>","sha":"574af418a2dd30ad19eee0a4c49b82b41c489470"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Gonçalo Rica Pais da Silva <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) ci:project-deploy-observability Create an Observability project release_note:skip Skip the PR/issue when compiling release notes Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v8.16.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Inventory] Add sharing button
7 participants