From bde5f75c8a565ffc6bb64b95aa8067d257fa9aad Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Thu, 22 Feb 2024 10:33:42 +0100
Subject: [PATCH] Show LongDataDisplay controls only when needed

---
 .changelog/1287.bugfix.md                     |  1 +
 src/app/components/LongDataDisplay/index.tsx  | 84 ++++++++++++-------
 .../RuntimeEvents/RuntimeEventDetails.tsx     |  1 -
 .../RuntimeTransactionDetailPage/index.tsx    | 10 +--
 4 files changed, 58 insertions(+), 38 deletions(-)
 create mode 100644 .changelog/1287.bugfix.md

diff --git a/.changelog/1287.bugfix.md b/.changelog/1287.bugfix.md
new file mode 100644
index 0000000000..7ac12493f5
--- /dev/null
+++ b/.changelog/1287.bugfix.md
@@ -0,0 +1 @@
+Show LongDataDisplay controls only when needed
diff --git a/src/app/components/LongDataDisplay/index.tsx b/src/app/components/LongDataDisplay/index.tsx
index 3f4ab14b08..d26ffae83b 100644
--- a/src/app/components/LongDataDisplay/index.tsx
+++ b/src/app/components/LongDataDisplay/index.tsx
@@ -1,47 +1,71 @@
-import Collapse from '@mui/material/Collapse'
-import Link from '@mui/material/Link'
-import { FC, useState } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import Button from '@mui/material/Button'
 import Typography from '@mui/material/Typography'
+import { styled } from '@mui/material/styles'
+import { COLORS } from '../../../styles/theme/colors'
 
-export const LongDataDisplay: FC<{ data: string; threshold: number; fontWeight?: number }> = ({
+const StyledButton = styled(Button)(() => ({
+  color: COLORS.brandDark,
+  fontWeight: 700,
+  minWidth: 'auto',
+  paddingLeft: 0,
+  '&&:hover': {
+    textDecoration: 'none',
+    color: COLORS.brandDark,
+  },
+}))
+
+const lineHeight = 22
+
+export const LongDataDisplay: FC<{ data: string; fontWeight?: number; collapsedLinesNumber?: number }> = ({
   data,
-  threshold,
   fontWeight = 700,
+  collapsedLinesNumber = 2,
 }) => {
   const { t } = useTranslation()
-  const [showData, setShowData] = useState(false)
-  const needsHiding = data.length > threshold
-  if (!needsHiding) {
-    return (
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+  const textRef = useRef<HTMLDivElement | null>(null)
+  const collapsedContainerMaxHeight = collapsedLinesNumber * lineHeight
+
+  useEffect(() => {
+    const checkOverflow = () => {
+      if (textRef.current) {
+        const isOverflow = textRef.current.scrollHeight > textRef.current.clientHeight
+        setIsOverflowing(isOverflow)
+      }
+    }
+
+    checkOverflow()
+    const handleResize = () => {
+      checkOverflow()
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [data])
+
+  return (
+    <div>
       <Typography
-        variant="mono"
-        sx={{
+        ref={textRef}
+        style={{
           fontWeight,
+          maxHeight: isExpanded ? 'none' : collapsedContainerMaxHeight,
+          overflow: 'hidden',
+          display: 'flex',
+          lineClamp: isExpanded ? 'none' : collapsedLinesNumber,
+          lineHeight: `${lineHeight}px`,
           overflowWrap: 'anywhere',
         }}
       >
         {data}
       </Typography>
-    )
-  }
-  return (
-    <div>
-      <Collapse orientation="vertical" in={showData} onClick={() => setShowData(true)} collapsedSize="3em">
-        <Typography
-          variant="mono"
-          sx={{
-            fontWeight,
-            overflowWrap: 'anywhere',
-          }}
-        >
-          {data}
-        </Typography>
-      </Collapse>
-      {data.length > threshold && (
-        <Link sx={{ cursor: 'pointer' }} onClick={() => setShowData(!showData)}>
-          {showData ? t('common.hide') : t('common.show')}
-        </Link>
+      {(isOverflowing || isExpanded) && (
+        <StyledButton onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? t('common.hide') : t('common.show')}
+        </StyledButton>
       )}
     </div>
   )
diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
index a52038de46..20fab3991f 100644
--- a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
+++ b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
@@ -168,7 +168,6 @@ export const RuntimeEventDetails: FC<{
             <br />
             <LongDataDisplay
               data={`0x${Buffer.from(event.body.data, 'base64').toString('hex')}`}
-              threshold={300}
               fontWeight={400}
             />
           </div>
diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx
index 55cbeed5c8..0ea100a08b 100644
--- a/src/app/pages/RuntimeTransactionDetailPage/index.tsx
+++ b/src/app/pages/RuntimeTransactionDetailPage/index.tsx
@@ -359,7 +359,7 @@ export const RuntimeTransactionDetailView: FC<{
             <>
               <dt>{t('transaction.rawData')}</dt>
               <dd>
-                <LongDataDisplay data={base64ToHex(transaction.body.data)} threshold={300} />
+                <LongDataDisplay data={base64ToHex(transaction.body.data)} />
               </dd>
             </>
           )}
@@ -392,7 +392,7 @@ export const RuntimeTransactionDetailView: FC<{
                 <>
                   <dt>{t('transactions.encryption.encryptedData')}</dt>
                   <dd>
-                    <LongDataDisplay data={transaction.encryption_envelope.data} threshold={300} />
+                    <LongDataDisplay data={transaction.encryption_envelope.data} />
                   </dd>
                 </>
               )}
@@ -412,11 +412,7 @@ export const RuntimeTransactionDetailView: FC<{
                 <>
                   <dt>{t('transactions.encryption.encryptedResult')}</dt>
                   <dd>
-                    <LongDataDisplay
-                      data={transaction.encryption_envelope.result}
-                      fontWeight={400}
-                      threshold={300}
-                    />
+                    <LongDataDisplay data={transaction.encryption_envelope.result} fontWeight={400} />
                   </dd>
                 </>
               )}