From e6cc1ac48c9ddca5f27d4e4edede7f79e8041792 Mon Sep 17 00:00:00 2001
From: Shailesh Parmar <shailesh.parmar.webdev@gmail.com>
Date: Mon, 25 Nov 2024 17:41:46 +0530
Subject: [PATCH] GEN-2073: Not able to copy full logs from log viewer (#18771)

---
 .../ConnectionStepCard/ConnectionStepCard.tsx | 24 ++++++++++++++++++-
 .../connection-step-card.less                 |  1 +
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/ConnectionStepCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/ConnectionStepCard.tsx
index a050ee48a61..256ad2e4232 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/ConnectionStepCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/ConnectionStepCard.tsx
@@ -12,7 +12,7 @@
  */
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Icon from '@ant-design/icons/lib/components/Icon';
-import { Collapse, Divider, Space, Tooltip, Typography } from 'antd';
+import { Button, Collapse, Divider, Space, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import { isUndefined } from 'lodash';
 import React from 'react';
@@ -20,9 +20,11 @@ import { useTranslation } from 'react-i18next';
 import { LazyLog } from 'react-lazylog';
 import { ReactComponent as AttentionIcon } from '../../../../assets/svg/attention.svg';
 import { ReactComponent as FailIcon } from '../../../../assets/svg/fail-badge.svg';
+import { ReactComponent as CopyIcon } from '../../../../assets/svg/icon-copy.svg';
 import { ReactComponent as SuccessIcon } from '../../../../assets/svg/success-badge.svg';
 import { TestConnectionStepResult } from '../../../../generated/entity/automations/workflow';
 import { TestConnectionStep } from '../../../../generated/entity/services/connections/testConnectionDefinition';
+import { useClipboard } from '../../../../hooks/useClipBoard';
 import { requiredField } from '../../../../utils/CommonUtils';
 import './connection-step-card.less';
 
@@ -53,6 +55,16 @@ const ConnectionStepCard = ({
     testConnectionStepResult?.errorLog ??
     t('label.no-entity', { entity: t('label.log-plural') });
 
+  const { onCopyToClipBoard } = useClipboard(logs ?? '');
+
+  const handleCopyToClipBoard = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    onCopyToClipBoard();
+  };
+
   return (
     <div
       className={classNames('connection-step-card', {
@@ -142,6 +154,16 @@ const ConnectionStepCard = ({
                 <Panel
                   className="connection-step-card-content-logs"
                   data-testid="lazy-log"
+                  extra={
+                    <Tooltip title={t('message.copy-to-clipboard')}>
+                      <Button
+                        className="flex-center bg-white"
+                        data-testid="query-entity-copy-button"
+                        icon={<CopyIcon height={16} width={16} />}
+                        onClick={handleCopyToClipBoard}
+                      />
+                    </Tooltip>
+                  }
                   header={t('label.show-log-plural')}
                   key="show-log">
                   <LazyLog
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/connection-step-card.less b/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/connection-step-card.less
index 6de52463b5f..f9acecf3215 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/connection-step-card.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/common/TestConnection/ConnectionStepCard/connection-step-card.less
@@ -24,6 +24,7 @@
   box-sizing: border-box;
   border: 1px solid @border-color;
   border-radius: 4px;
+  margin-top: 16px;
   &.success {
     border-color: #28a7454d;
   }