feat: Add truncation to help text (#2637)

* Add truncation to help text

* f

* f

* f

Author: screspod

web/src/components/common/HelpText.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import { truncate } from '../../utils/textUtils';
 
 interface HelpTextProps {
   dataTestId?: string;
@@ -10,19 +11,31 @@ interface HelpTextProps {
 }
 
 const HelpText: React.FC<HelpTextProps> = ({ dataTestId, helpText, defaultValue, error }) => {
+  const [showFullText, setShowFullText] = useState(false);
+  const maxTextLength = 80;
+
+  // The truncation threshold prevents cutting off text that's only slightly over the max length as
+  // it would be preferable to display the full text than show/hide a small number of characters.
+  const truncationThreshold = 40;
+
   if ((!helpText && !defaultValue) || error) return null;
 
-  // Build the combined text with markdown formatting
+  // Build the combined text
   let combinedText = helpText || '';
   if (defaultValue) {
     const defaultText = `(Default: \`${defaultValue}\`)`;
     combinedText = helpText ? `${helpText} ${defaultText}` : defaultText;
   }
 
+  const exceedsMaxLength = combinedText.length > maxTextLength;
+  const withinThreshold = (combinedText.length - maxTextLength) <= truncationThreshold;
+  const shouldTruncate = exceedsMaxLength && !withinThreshold;
+
   return (
     <div data-testid={dataTestId ? `help-text-${dataTestId}` : "help-text"} className="mt-1 text-sm text-gray-500 [&_p]:inline [&_p]:mb-0">
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
+        rehypePlugins={shouldTruncate && !showFullText ? [[truncate, maxTextLength]] : []}
         components={{
           a: ({ ...props }) => (
             <a
@@ -41,6 +54,15 @@ const HelpText: React.FC<HelpTextProps> = ({ dataTestId, helpText, defaultValue,
       >
         {combinedText}
       </ReactMarkdown>
+      {shouldTruncate && (
+        <button
+          onClick={() => setShowFullText(!showFullText)}
+          className="ml-1 text-blue-600 hover:text-blue-800 text-xs cursor-pointer"
+          type="button"
+        >
+          {showFullText ? 'Show less' : 'Show more'}
+        </button>
+      )}
     </div>
   );
 };

web/src/components/common/Textarea.tsx

@@ -55,7 +55,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({
         required={required}
         className={`w-full px-3 py-2 border ${
           error ? 'border-red-500' : 'border-gray-300'
-        } rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 ${
+        } rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 min-h-[2.625rem] ${
           disabled ? 'bg-gray-100 text-gray-500' : 'bg-white'
         }`}
         style={{

web/src/components/common/tests/HelpText.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import HelpText from '../HelpText';
 
@@ -78,4 +78,170 @@ describe('HelpText', () => {
     const helpDiv = container.querySelector('div');
     expect(helpDiv).toHaveClass('[&_p]:inline', '[&_p]:mb-0');
   });
+
+  // Truncation functionality tests
+  describe('Text truncation', () => {
+    it('does not truncate short text', () => {
+      const shortText = 'This is a short help text';
+      render(<HelpText helpText={shortText} />);
+
+      expect(screen.getByText(shortText)).toBeInTheDocument();
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+        it('truncates long text and shows "Show more" button', () => {
+      const longText = 'This is a very long help text that exceeds the maximum length of 80 characters and should be truncated with an ellipsis and show more button because it is longer than the threshold';
+      render(<HelpText helpText={longText} />);
+
+      // Should show truncated text with ellipsis
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+      // Should show "Show more" button
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+      // Should not show the full text initially
+      expect(screen.queryByText(longText)).not.toBeInTheDocument();
+    });
+
+        it('expands text when "Show more" is clicked', () => {
+      const longText = 'This is a very long help text that exceeds the maximum length of 80 characters and should be truncated with an ellipsis and show more button because it is longer than the threshold';
+      render(<HelpText helpText={longText} />);
+
+      const showMoreButton = screen.getByText('Show more');
+      fireEvent.click(showMoreButton);
+
+      // Should show full text after clicking
+      expect(screen.getByText(longText)).toBeInTheDocument();
+      // Button should change to "Show less"
+      expect(screen.getByText('Show less')).toBeInTheDocument();
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+        it('collapses text when "Show less" is clicked', () => {
+      const longText = 'This is a very long help text that exceeds the maximum length of 80 characters and should be truncated with an ellipsis and show more button because it is longer than the threshold';
+      render(<HelpText helpText={longText} />);
+
+      const showMoreButton = screen.getByText('Show more');
+      fireEvent.click(showMoreButton);
+
+      const showLessButton = screen.getByText('Show less');
+      fireEvent.click(showLessButton);
+
+      // Should show truncated text again
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+      expect(screen.queryByText('Show less')).not.toBeInTheDocument();
+    });
+
+    it('truncates combined text with default value when total length exceeds limit', () => {
+      const longHelpText = 'This is a moderately long help text that when combined with default value it exceeds the limit';
+      const defaultValue = 'very-long-default-value-that-makes-total-exceed-limit';
+
+      render(<HelpText helpText={longHelpText} defaultValue={defaultValue} />);
+
+      // Should show "Show more" button when combined text is too long
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+    });
+
+    it('does not truncate when only default value is present and under limit', () => {
+      const shortDefaultValue = 'short-default';
+      render(<HelpText defaultValue={shortDefaultValue} />);
+
+      expect(screen.getByText(shortDefaultValue)).toBeInTheDocument();
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+        it('truncates when only default value is present and exceeds limit', () => {
+      const longDefaultValue = 'this-is-a-very-long-default-value-that-exceeds-the-maximum-character-limit-of-80-characters-and-the-threshold-so-it-should-be-truncated';
+      render(<HelpText defaultValue={longDefaultValue} />);
+
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+      expect(screen.getByText(/\.\.\./)).toBeInTheDocument();
+    });
+
+            it('preserves markdown formatting in truncated text', () => {
+      const longTextWithMarkdown = 'This is a very long help text with `code formatting` and **bold text** that exceeds the maximum length of 80 characters and the threshold so it should be truncated properly';
+      render(<HelpText helpText={longTextWithMarkdown} />);
+
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+
+      // Click to expand and check markdown is preserved
+      fireEvent.click(screen.getByText('Show more'));
+      expect(screen.getByText('code formatting')).toHaveClass('font-mono');
+      expect(screen.getByText('bold text')).toBeInTheDocument();
+    });
+
+    it('preserves markdown formatting in truncated text with code blocks', () => {
+      // Create text with TLS certificate that will be truncated in the middle of the certificate
+      const longTextWithCodeBlock = 'To configure TLS, provide your certificate:\n\n```\n-----BEGIN CERTIFICATE-----\nMIIDXTCCAkWgAwIBAgIJAKoK/heBjcOuMA0GCSqGSIb3DQEBBQUAMEUxCzAJBgNV\nBAYTAkFVMRMwEQYDVQQIDApTb21lLVN0YXRlMSEwHwYDVQQKDBhJbnRlcm5ldCBX\naWRnaXRzIFB0eSBMdGQwHhcNMTcwODI3MjM1NzU5WhcNMTgwODI3MjM1NzU5WjBF\nMQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTEhMB8GA1UECgwYSW50\nZXJuZXQgV2lkZ2l0cyBQdHkgTHRkMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIB\nCgKCAQEAuuB5/8GvxwqhkzCQF22XA0cGRUbKCzlJHoFGELqoZKxSV8j9C7sW7A==\n-----END CERTIFICATE-----\n```\n\nEnsure the certificate is valid.';
+      const { container } = render(<HelpText helpText={longTextWithCodeBlock} />);
+
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+
+      // Click to expand and check code block markdown is preserved
+      fireEvent.click(screen.getByText('Show more'));
+
+      // Check that certificate content is present (may be in different elements)
+      expect(screen.getByText(/BEGIN CERTIFICATE/)).toBeInTheDocument();
+      expect(screen.getByText(/END CERTIFICATE/)).toBeInTheDocument();
+
+      // Check that pre/code elements exist for code block
+      const preElements = container.querySelectorAll('pre');
+      const codeElements = container.querySelectorAll('code');
+      expect(preElements.length).toBeGreaterThan(0);
+      expect(codeElements.length).toBeGreaterThan(0);
+    });
+
+        it('applies correct CSS classes to show more/less button', () => {
+      const longText = 'This is a very long help text that exceeds the maximum length of 80 characters and should be truncated with an ellipsis and show more button because it is longer than the threshold';
+      render(<HelpText helpText={longText} />);
+
+      const showMoreButton = screen.getByText('Show more');
+      expect(showMoreButton).toHaveClass('ml-1', 'text-blue-600', 'hover:text-blue-800', 'text-xs', 'cursor-pointer');
+      expect(showMoreButton).toHaveAttribute('type', 'button');
+    });
+
+            it('handles text exactly at maxTextLength', () => {
+      // Create text that's exactly 80 characters (the maxTextLength)
+      const exactMaxText = 'a'.repeat(80);
+      render(<HelpText helpText={exactMaxText} />);
+
+      // Should not show "Show more" button at exactly maxTextLength
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+    it('handles text within the truncation threshold', () => {
+      // Create text that's 100 characters (over maxTextLength of 80 but within threshold of 40)
+      const withinThresholdText = 'a'.repeat(100);
+      render(<HelpText helpText={withinThresholdText} />);
+
+      // Should not show "Show more" button when within threshold (80 + 40 = 120)
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+    it('handles text at the edge of truncation threshold', () => {
+      // Create text that's exactly 120 characters (maxTextLength + threshold = 80 + 40)
+      const atThresholdEdgeText = 'a'.repeat(120);
+      render(<HelpText helpText={atThresholdEdgeText} />);
+
+      // Should not show "Show more" button when exactly at threshold edge
+      expect(screen.queryByText('Show more')).not.toBeInTheDocument();
+    });
+
+    it('handles text just over the truncation threshold', () => {
+      // Create text that's 121 characters (over maxTextLength + threshold = 80 + 40)
+      const justOverThresholdText = 'a'.repeat(121);
+      render(<HelpText helpText={justOverThresholdText} />);
+
+      // Should show "Show more" button when over threshold limit
+      expect(screen.getByText('Show more')).toBeInTheDocument();
+    });
+
+        it('maintains proper data-testid when truncated', () => {
+      const longText = 'This is a very long help text that exceeds the maximum length of 80 characters and the threshold so it should be truncated';
+      const { container } = render(<HelpText helpText={longText} dataTestId="custom-test-id" />);
+
+      const helpDiv = container.querySelector('[data-testid="help-text-custom-test-id"]');
+      expect(helpDiv).toBeInTheDocument();
+    });
+  });
 });

web/src/utils/textUtils.ts

@@ -0,0 +1,62 @@
+/**
+ * Creates a rehype plugin that truncates markdown text content to a specified maximum length.
+ *
+ * Features:
+ * - Truncates text at the AST node level for proper markdown handling
+ * - Preserves markdown structure while limiting text content
+ * - Adds ellipsis ("...") when text is truncated
+ * - Removes child nodes that exceed the limit to prevent partial content
+ *
+ * @param maxTextLength - Maximum number of characters allowed before truncation
+ * @returns A rehype plugin function that can be used with ReactMarkdown
+ *
+ * @example
+ * ```typescript
+ * // Use with ReactMarkdown
+ * <ReactMarkdown
+ *   rehypePlugins={[[truncate, 100]]}
+ * >
+ *   {longText}
+ * </ReactMarkdown>
+ * ```
+ */
+
+interface ASTNode {
+  type: string;
+  value?: string;
+  children?: ASTNode[];
+  length?: number;
+}
+
+export function truncate(maxTextLength: number): (tree: ASTNode) => void {
+  const truncateNode = (node: ASTNode, textLength: number): number => {
+    if (node.type === "text") {
+      const newLength = textLength + (node.value?.length || 0);
+      if (newLength > maxTextLength) {
+        const excess = newLength - maxTextLength;
+        if (node.value) {
+          node.value = node.value.slice(0, -excess) + '...';
+        }
+        return maxTextLength;
+      }
+      return newLength;
+    }
+
+    if ((node.type === "root" || node.type === "element") && node.children) {
+      const children = node.children;
+      for (let i = 0; i < children.length; i++) {
+        if (textLength >= maxTextLength) {
+          children.length = i;
+          break;
+        }
+        textLength = truncateNode(children[i], textLength);
+      }
+    }
+
+    return textLength;
+  };
+
+  return (tree: ASTNode) => {
+    truncateNode(tree, 0);
+  };
+}