[9.1] Fix: Add styling to handle the text overflow (elastic#239768) (elastic#240084)

efegurkan · elasticmachine · web-flow · commit f4b3dea6b1a3 · 2025-10-27T11:00:53.000-04:00
# Backport This will backport the following commits from `main` to `9.1`: - [Fix: Add styling to handle the text overflow (elastic#239768)](elastic#239768)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
diff --git a/x-pack/platform/packages/shared/kbn-search-index-documents/components/result/rich_result_header.tsx b/x-pack/platform/packages/shared/kbn-search-index-documents/components/result/rich_result_header.tsx
@@ -23,12 +23,15 @@ import {
   EuiTitle,
   useEuiTheme,
   EuiToolTip,
+  copyToClipboard,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { MetaDataProps } from './result_types';
+
+import type { MetaDataProps } from './result_types';
+import { definitionStyle } from './styles';
 
 interface Props {
   metaData: MetaDataProps;
@@ -52,9 +55,58 @@ const Term: React.FC<TermDef> = ({ label }) => (
 
 const Definition: React.FC<TermDef> = ({ label }) => (
   <EuiFlexItem>
-    <EuiTextColor color="subdued">{label}</EuiTextColor>
+    <EuiToolTip position="top" content={label}>
+      <EuiTextColor component="div" css={definitionStyle} color="subdued">
+        {label}
+      </EuiTextColor>
+    </EuiToolTip>
   </EuiFlexItem>
 );
+const CopyButton: React.FC<{ textToCopy: string }> = ({ textToCopy }) => {
+  const [isTextCopied, setTextCopied] = useState(false);
+
+  const onClick = () => {
+    copyToClipboard(textToCopy);
+    setTextCopied(true);
+  };
+  const onBlur = () => {
+    setTextCopied(false);
+  };
+  return (
+    <EuiToolTip
+      content={
+        isTextCopied
+          ? i18n.translate(
+              'xpack.searchIndexDocuments.result.header.compactCard.metadata.copiedTextToClipboard',
+              {
+                defaultMessage: 'Copied to clipboard',
+              }
+            )
+          : i18n.translate(
+              'xpack.searchIndexDocuments.result.header.compactCard.metadata.copyTextToClipboard',
+              {
+                defaultMessage: 'Copy text to clipboard',
+              }
+            )
+      }
+      data-test-subj="copyTextToClipboardButtonTooltip"
+    >
+      <EuiButtonIcon
+        aria-label={i18n.translate(
+          'xpack.searchIndexDocuments.result.header.compactCard.metadata.copyTextToClipboard',
+          {
+            defaultMessage: 'Copy text to clipboard',
+          }
+        )}
+        data-test-subj="copyTextToClipboardButton"
+        color="text"
+        iconType="copy"
+        onClick={onClick}
+        onBlur={onBlur}
+      />
+    </EuiToolTip>
+  );
+};
 const MetadataPopover: React.FC<MetaDataProps> = ({
   id,
   onDocumentDelete,
@@ -102,9 +154,10 @@ const MetadataPopover: React.FC<MetaDataProps> = ({
         `}
       >
         <EuiFlexItem>
-          <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s">
+          <EuiFlexGroup justifyContent="spaceBetween" gutterSize="s" alignItems="center">
             <Term label="ID" />
             <Definition label={id} />
+            <CopyButton textToCopy={id} />
           </EuiFlexGroup>
         </EuiFlexItem>
 
diff --git a/x-pack/platform/packages/shared/kbn-search-index-documents/components/result/styles.ts b/x-pack/platform/packages/shared/kbn-search-index-documents/components/result/styles.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 { css } from '@emotion/react';
+
+export const definitionStyle = css({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  maxWidth: '16rem',
+});
