From 632c24c66fa510a2e35113e2dcb85df949a42092 Mon Sep 17 00:00:00 2001
From: achyutjhunjhunwala <achyut.jhunjhunwala@elastic.co>
Date: Thu, 9 Nov 2023 14:24:39 +0100
Subject: [PATCH] Add logic to handle breakpoint based column display

---
 .../flyout_detail/flyout_highlights.tsx       | 11 ++++----
 .../sub_components/highlight_field.tsx        | 10 ++++++-
 .../sub_components/highlight_section.tsx      |  4 ++-
 .../components/flyout_detail/translations.ts  |  7 +++++
 .../public/hooks/use_flyouot_column_width.tsx | 26 +++++++++++++++++++
 5 files changed, 51 insertions(+), 7 deletions(-)
 create mode 100644 x-pack/plugins/log_explorer/public/hooks/use_flyouot_column_width.tsx

diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_highlights.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_highlights.tsx
index 3e1256ab9a329..d549f6a40a373 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_highlights.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_highlights.tsx
@@ -34,6 +34,7 @@ import { HighlightSection } from './sub_components/highlight_section';
 import { DiscoverActionsProvider } from '../../hooks/use_discover_action';
 import { HighlightContainer } from './sub_components/highlight_container';
 import { useDimension } from '../../hooks/use_dimensions';
+import { useFlyoutColumnWidth } from '../../hooks/use_flyouot_column_width';
 
 export function FlyoutHighlights({
   formattedDoc,
@@ -46,11 +47,11 @@ export function FlyoutHighlights({
 }) {
   const elementRef = useRef<HTMLDivElement>(null);
   const [ref, dimensions] = useDimension<HTMLDivElement>(elementRef);
-  const fieldWidth = (dimensions.width - 20) / 7;
+  const { columns, fieldWidth } = useFlyoutColumnWidth(dimensions.width);
   return (
     <DiscoverActionsProvider value={actions}>
       <HighlightContainer ref={ref}>
-        <HighlightSection title={serviceAccordionTitle}>
+        <HighlightSection title={serviceAccordionTitle} columns={columns}>
           {formattedDoc[constants.SERVICE_NAME_FIELD] && (
             <HighlightField
               label={flyoutServiceLabel}
@@ -73,7 +74,7 @@ export function FlyoutHighlights({
           )}
         </HighlightSection>
 
-        <HighlightSection title={infraAccordionTitle}>
+        <HighlightSection title={infraAccordionTitle} columns={columns}>
           {formattedDoc[constants.HOST_NAME_FIELD] && (
             <HighlightField
               label={flyoutHostNameLabel}
@@ -106,7 +107,7 @@ export function FlyoutHighlights({
           )}
         </HighlightSection>
 
-        <HighlightSection title={cloudAccordionTitle}>
+        <HighlightSection title={cloudAccordionTitle} columns={columns}>
           {formattedDoc[constants.CLOUD_PROVIDER_FIELD] && (
             <HighlightField
               label={flyoutCloudProviderLabel}
@@ -159,7 +160,7 @@ export function FlyoutHighlights({
           )}
         </HighlightSection>
 
-        <HighlightSection title={otherAccordionTitle} showBottomRule={false}>
+        <HighlightSection title={otherAccordionTitle} showBottomRule={false} columns={columns}>
           {formattedDoc[constants.LOG_FILE_PATH_FIELD] && (
             <HighlightField
               label={flyoutLogPathFileLabel}
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx
index 48479fc13b1e2..ca47b10548236 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText, copyToClipboard } from '@elastic/eui';
 import React, { ReactNode, useMemo, useState } from 'react';
 import { HoverAction, HoverActionType } from './hover_action';
 import {
@@ -13,6 +13,7 @@ import {
   flyoutHoverActionFilterOutText,
   flyoutHoverActionFilterForFieldPresentText,
   flyoutHoverActionToggleColumnText,
+  flyoutHoverActionCopyToClipboardText,
 } from '../translations';
 import { useDiscoverActionsContext } from '../../../hooks/use_discover_action';
 
@@ -77,6 +78,13 @@ export function HighlightField({
         },
         display: true,
       },
+      {
+        id: 'copyToClipboardAction',
+        tooltipContent: flyoutHoverActionCopyToClipboardText,
+        iconType: 'copyClipboard',
+        onClick: () => copyToClipboard(value as string),
+        display: true,
+      },
     ],
     [filterForText, filterOutText, actions, field, value, columnAdded]
   );
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_section.tsx b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_section.tsx
index f4d9a65797e29..0b598339ed29b 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_section.tsx
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_section.tsx
@@ -19,12 +19,14 @@ interface HighlightSectionProps {
   title: string;
   children: React.ReactNode;
   showBottomRule?: boolean;
+  columns: 1 | 2 | 3;
 }
 
 export function HighlightSection({
   title,
   children,
   showBottomRule = true,
+  columns,
 }: HighlightSectionProps) {
   const validChildren = React.Children.toArray(children).filter(Boolean);
   const shouldRenderSection = validChildren.length > 0;
@@ -51,7 +53,7 @@ export function HighlightSection({
         initialIsOpen={true}
         data-test-subj={`logExplorerFlyoutHighlightSection${title}`}
       >
-        <EuiFlexGrid columns={3}>{flexChildren}</EuiFlexGrid>
+        <EuiFlexGrid columns={columns}>{flexChildren}</EuiFlexGrid>
       </EuiAccordion>
       {showBottomRule && <EuiHorizontalRule margin="xs" />}
     </>
diff --git a/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts b/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
index ef755c97f1f53..9c27e333a4bdc 100644
--- a/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
+++ b/x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts
@@ -151,3 +151,10 @@ export const flyoutHoverActionToggleColumnText = i18n.translate(
     defaultMessage: 'Toggle column in table',
   }
 );
+
+export const flyoutHoverActionCopyToClipboardText = i18n.translate(
+  'xpack.logExplorer.flyoutDetail.value.hover.copyToClipboard',
+  {
+    defaultMessage: 'Copy to clipboard',
+  }
+);
diff --git a/x-pack/plugins/log_explorer/public/hooks/use_flyouot_column_width.tsx b/x-pack/plugins/log_explorer/public/hooks/use_flyouot_column_width.tsx
new file mode 100644
index 0000000000000..53e626223b910
--- /dev/null
+++ b/x-pack/plugins/log_explorer/public/hooks/use_flyouot_column_width.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+
+interface FlyoutColumnWidth {
+  columns: 1 | 2 | 3;
+  fieldWidth: number;
+}
+
+export const useFlyoutColumnWidth = (width: number): FlyoutColumnWidth => {
+  const { euiTheme } = useEuiTheme();
+
+  const numberOfColumns = width > euiTheme.breakpoint.m ? 3 : width > euiTheme.breakpoint.s ? 2 : 1;
+  const widthFactor = numberOfColumns === 3 ? 2.5 : 2.2;
+  const fieldWidth = width / (numberOfColumns * widthFactor);
+
+  return {
+    columns: numberOfColumns,
+    fieldWidth,
+  };
+};