Skip to content

Commit

Permalink
[Inventory] Add Sharing button (#194535)
Browse files Browse the repository at this point in the history
## 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 #192325

---------

Co-authored-by: Elastic Machine <[email protected]>
  • Loading branch information
Bluefinger and elasticmachine authored Oct 2, 2024
1 parent 30ef0ec commit 574af41
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@
import React from 'react';
import { EuiHeaderLinks } from '@elastic/eui';
import { AddDataContextMenu } from './add_data_action_menu';
import { ShareLink } from './share_link';

export function HeaderActionMenuItems() {
return (
<EuiHeaderLinks gutterSize="xs">
<ShareLink />
<AddDataContextMenu />
</EuiHeaderLinks>
);
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React, { useCallback, useState } from 'react';
import copy from 'copy-to-clipboard';
import { i18n } from '@kbn/i18n';
import { EuiButtonEmpty } from '@elastic/eui';
import { useKibana } from '../../../hooks/use_kibana';

const SHARE_BUTTON_LABEL = i18n.translate('xpack.inventory.shareLink.shareButtonLabel', {
defaultMessage: 'Share',
});

const SHARE_TOAST_SUCCESS_LABEL = i18n.translate(
'xpack.inventory.shareLink.shareToastSuccessLabel',
{ defaultMessage: 'Short URL copied to clipboard!' }
);

const SHARE_TOAST_FAILURE_LABEL = i18n.translate(
'xpack.inventory.shareLink.shareToastFailureLabel',
{ defaultMessage: 'Short URL unable to be copied.' }
);

function useShortUrlService() {
const {
services: { share, notifications },
} = useKibana();

const [isLoading, setIsLoading] = useState(false);

const copyShortUrl = useCallback(async () => {
setIsLoading(true);

try {
const shortUrls = share.url.shortUrls.get(null);

const { url } = await shortUrls.createFromLongUrl(window.location.toString());

setIsLoading(false);

if (copy(url)) {
notifications.toasts.addSuccess({
title: SHARE_TOAST_SUCCESS_LABEL,
iconType: 'copyClipboard',
});
} else {
throw new Error('Clipboard copy error');
}
} catch (e) {
const err = e as Error;
notifications.toasts.addDanger({
title: SHARE_TOAST_FAILURE_LABEL,
iconType: 'error',
text: err.message,
});
}
}, [share, notifications.toasts]);

return {
isLoading,
copyShortUrl,
};
}

export function ShareLink() {
const { isLoading, copyShortUrl } = useShortUrlService();

return (
<EuiButtonEmpty
data-test-subj="inventoryShareLinkButton"
onClick={copyShortUrl}
iconType="share"
isLoading={isLoading}
>
{SHARE_BUTTON_LABEL}
</EuiButtonEmpty>
);
}

0 comments on commit 574af41

Please sign in to comment.