From 163d3081dd0c92613d916a80501a9127fc261d02 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 2 Oct 2024 21:07:16 +1000
Subject: [PATCH] [8.x] [Inventory] Add Sharing button (#194535) (#194668)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Inventory] Add Sharing button
(#194535)](https://github.com/elastic/kibana/pull/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":"goncalo.rica@elastic.co"},"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
<elasticmachine@users.noreply.github.com>","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
<elasticmachine@users.noreply.github.com>","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
<elasticmachine@users.noreply.github.com>","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 <goncalo.rica@elastic.co>
---
 .../app_root/header_action_menu/index.tsx     |  2 +
 .../header_action_menu/share_link.tsx         | 82 +++++++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/share_link.tsx

diff --git a/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/index.tsx b/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/index.tsx
index 5ae0f4dd24574..ad139ba5100da 100644
--- a/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/index.tsx
+++ b/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/index.tsx
@@ -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>
   );
diff --git a/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/share_link.tsx b/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/share_link.tsx
new file mode 100644
index 0000000000000..54cceae2c4ad6
--- /dev/null
+++ b/x-pack/plugins/observability_solution/inventory/public/components/app_root/header_action_menu/share_link.tsx
@@ -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>
+  );
+}