feat(renterd): alerts collapse large errors

Author: alexfreska

.changeset/light-ladybugs-speak.md

@@ -0,0 +1,5 @@
+---
+'renterd': minor
+---
+
+Alerts with large errors are now collapsed by default and have a control to expand and collapse the full contents.

.changeset/mighty-news-float.md

@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': minor
+---
+
+Added ExpandableText.

apps/renterd-e2e/src/specs/alerts.spec.ts

@@ -18,10 +18,10 @@ test.afterEach(async () => {
   await afterTest()
 })
 
-test('alert data', async ({ page }) => {
+test('churn alert and slab migration alert', async ({ page }) => {
   await navigateToAlerts({ page })
 
-  // Churn alert
+  // Churn alert.
   const churnData = page.getByTestId('churn')
   await expect(churnData.getByText('churn: 37.54%')).toBeVisible()
   const churnDataContractB6 = churnData.getByTestId(
@@ -37,7 +37,7 @@ test('alert data', async ({ page }) => {
   await expect(churnDataContractB6.getByText('30.00 KB')).toBeVisible()
   await expect(churnDataContractB6.getByText('30 B')).toBeVisible()
 
-  // Slab migration failed alert
+  // Slab migration failed alert.
   const objectsData = page.getByTestId('objects')
   await expect(objectsData.getByText('bucket1/nest2/file3.png')).toBeVisible()
 })

apps/renterd/contexts/alerts/columns.tsx

@@ -7,6 +7,7 @@ import {
   Separator,
   TableColumn,
   Text,
+  ExpandableText,
 } from '@siafoundation/design-system'
 import { AlertData, TableColumnId } from './types'
 import { dataFields } from './data'
@@ -69,9 +70,11 @@ export const columns: AlertsTableColumn[] = [
             </Text>
           ) : null}
           {data['error'] ? (
-            <Text size="12" color="subtle">
-              {data['error'] as string}
-            </Text>
+            <ExpandableText
+              text={data['error'] as string}
+              size="12"
+              color="subtle"
+            />
           ) : null}
         </div>
       )

libs/design-system/src/core/ExpandableText.tsx

@@ -0,0 +1,76 @@
+'use client'
+
+import { Button } from './Button'
+import { Text } from './Text'
+import { useState, useRef, useEffect } from 'react'
+import { cx } from 'class-variance-authority'
+
+type Props = {
+  text: string
+  maxHeight?: number
+  size?: React.ComponentProps<typeof Text>['size']
+  color?: React.ComponentProps<typeof Text>['color']
+}
+
+export function ExpandableText({
+  text,
+  maxHeight = 96,
+  size = '12',
+  color = 'subtle',
+}: Props) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [canExpand, setCanExpand] = useState(false)
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (contentRef.current) {
+      setCanExpand(contentRef.current.scrollHeight > maxHeight)
+    }
+  }, [maxHeight, text])
+
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="relative">
+        <div
+          ref={contentRef}
+          className="overflow-hidden transition-[max-height] duration-300"
+          style={{ maxHeight: !isExpanded ? maxHeight : undefined }}
+        >
+          <Text size={size} color={color}>
+            {text}
+          </Text>
+        </div>
+        {!isExpanded && canExpand && (
+          <div
+            className={cx(
+              'absolute bottom-0 left-0 right-0 h-[48px]',
+              'bg-gradient-to-b from-transparent',
+              'dark:via-graydark-50/80 dark:to-graydark-50',
+              'via-gray-50/80 to-gray-50'
+            )}
+          />
+        )}
+      </div>
+      {canExpand && (
+        <div
+          className={cx(
+            'flex justify-center',
+            isExpanded && 'sticky bottom-2 z-10'
+          )}
+        >
+          <Button
+            variant="gray"
+            size="small"
+            onClick={() => setIsExpanded(!isExpanded)}
+            className={cx(
+              isExpanded && 'bg-gray-50 dark:bg-graydark-50',
+              isExpanded && 'shadow-md'
+            )}
+          >
+            {isExpanded ? 'Show less' : 'Show more'}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

libs/design-system/src/index.ts

@@ -45,6 +45,7 @@ export * from './core/Switch'
 export * from './core/HoverCard'
 export * from './core/SelectCard'
 export * from './core/NavMenu'
+export * from './core/ExpandableText'
 
 // components
 export * from './components/UserDropdownMenu'