@capillarytech/creatives-library 8.0.250-alpha.2 → 8.0.251

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/__tests__/index.test.js

@@ -0,0 +1,152 @@
+/**
+ * ValidationErrorDisplay Component Tests
+ *
+ * Tests for the ValidationErrorDisplay component that integrates with ErrorInfoNote.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ValidationErrorDisplay from '../index';
+
+// Mock ErrorInfoNote component
+jest.mock('../../../../ErrorInfoNote', () => {
+  return function MockErrorInfoNote({ errorMessages }) {
+    const liquidErrors = errorMessages?.LIQUID_ERROR_MSG || [];
+    const standardErrors = errorMessages?.STANDARD_ERROR_MSG || [];
+    const hasErrors = liquidErrors.length > 0 || standardErrors.length > 0;
+
+    if (!hasErrors) return null;
+
+    return (
+      <div data-testid="error-info-note">
+        {liquidErrors.map((msg, index) => (
+          <div key={`liquid-${index}`} data-testid="error-message">
+            {msg}
+          </div>
+        ))}
+        {standardErrors.map((msg, index) => (
+          <div key={`standard-${index}`} data-testid="error-message">
+            {msg}
+          </div>
+        ))}
+      </div>
+    );
+  };
+});
+
+describe('ValidationErrorDisplay', () => {
+  it('renders standard errors when validation has issues', () => {
+    const mockValidation = {
+      getAllIssues: () => [
+        { message: 'Missing closing tag', severity: 'error', line: 5, column: 10 },
+        { message: 'Invalid attribute', severity: 'error', line: 7 }
+      ],
+      isClean: () => false,
+      isValidating: false
+    };
+
+    render(<ValidationErrorDisplay validation={mockValidation} />);
+
+    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
+    const errorMessages = screen.getAllByTestId('error-message');
+    expect(errorMessages).toHaveLength(2);
+    expect(errorMessages[0]).toHaveTextContent('Missing closing tag Line 5, Char 10.');
+    expect(errorMessages[1]).toHaveTextContent('Invalid attribute Line 7.');
+  });
+
+  it('renders liquid errors separately', () => {
+    const mockValidation = {
+      getAllIssues: () => [
+        { message: 'Invalid liquid syntax', severity: 'error', source: 'liquid-validator', line: 3 },
+        { message: 'HTML error', severity: 'error', source: 'htmlhint', line: 10 }
+      ],
+      isClean: () => false,
+      isValidating: false
+    };
+
+    render(<ValidationErrorDisplay validation={mockValidation} />);
+
+    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
+    const errorMessages = screen.getAllByTestId('error-message');
+    expect(errorMessages).toHaveLength(2);
+    // First should be liquid error, second should be standard error
+    expect(errorMessages[0]).toHaveTextContent('Invalid liquid syntax Line 3.');
+    expect(errorMessages[1]).toHaveTextContent('HTML error Line 10.');
+  });
+
+  it('does not render when validation has no errors', () => {
+    const mockValidation = {
+      getAllIssues: () => [],
+      isClean: () => true,
+      isValidating: false
+    };
+
+    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
+
+    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('does not render when validation is null', () => {
+    const { container } = render(<ValidationErrorDisplay validation={null} />);
+
+    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('does not render when validation is in progress', () => {
+    const mockValidation = {
+      getAllIssues: () => [],
+      isClean: () => false,
+      isValidating: true
+    };
+
+    const { container } = render(<ValidationErrorDisplay validation={mockValidation} />);
+
+    expect(screen.queryByTestId('error-info-note')).not.toBeInTheDocument();
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('applies custom className', () => {
+    const mockValidation = {
+      getAllIssues: () => [{ message: 'Error', severity: 'error' }],
+      isClean: () => false,
+      isValidating: false
+    };
+
+    const { container } = render(
+      <ValidationErrorDisplay validation={mockValidation} className="custom-class" />
+    );
+
+    const wrapper = container.querySelector('.validation-error-display');
+    expect(wrapper).toHaveClass('custom-class');
+  });
+
+  it('handles inapp variant correctly', () => {
+    const mockValidation = {
+      getAllIssues: () => [{ message: 'Mobile error', severity: 'error' }],
+      isClean: () => false,
+      isValidating: false
+    };
+
+    render(<ValidationErrorDisplay validation={mockValidation} variant="inapp" />);
+
+    expect(screen.getByTestId('error-info-note')).toBeInTheDocument();
+    expect(screen.getByTestId('error-message')).toHaveTextContent('Mobile error');
+  });
+
+  it('includes rule information in error messages when available', () => {
+    const mockValidation = {
+      getAllIssues: () => [
+        { message: 'Alt attribute required', severity: 'error', rule: 'alt-require', line: 5 }
+      ],
+      isClean: () => false,
+      isValidating: false
+    };
+
+    render(<ValidationErrorDisplay validation={mockValidation} />);
+
+    expect(screen.getByTestId('error-message')).toHaveTextContent('Alt attribute required Line 5. • alt-require');
+  });
+});

package/v2Components/HtmlEditor/components/ValidationErrorDisplay/index.js

@@ -1,15 +1,18 @@
 /**
- * ValidationErrorDisplay - HTML Editor validation display
+ * ValidationErrorDisplay - HTML Editor validation using ErrorInfoNote
  *
- * This component displays validation errors using the new ValidationTabs component
- * with tabbed interface for HTML, Label, and Liquid issues.
+ * This component integrates the existing ErrorInfoNote component with the HTML Editor's
+ * validation system, providing a consistent error display that matches the Figma design.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { hasValidationErrors } from '../../utils/validationAdapter';
-import ValidationTabs from '../ValidationTabs';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import ErrorInfoNote from '../../../ErrorInfoNote';
+
+import { transformValidationToErrorInfo, hasValidationErrors } from '../../utils/validationAdapter';
+import { HTML_EDITOR_VARIANTS } from '../../constants';
 
 // Styles
 import './_validationErrorDisplay.scss';
@@ -17,72 +20,51 @@ import './_validationErrorDisplay.scss';
 /**
  * ValidationErrorDisplay Component
  *
- * Displays validation errors using the ValidationTabs component
+ * Displays validation errors using the existing ErrorInfoNote component
  */
 const ValidationErrorDisplay = ({
   validation,
+  variant = HTML_EDITOR_VARIANTS.EMAIL,
   onErrorClick,
-  onClose,
-  isLiquidEnabled = false,
-  className = '',
+  className = ''
 }) => {
-  // Track if panel is dismissed
-  const [isDismissed, setIsDismissed] = useState(false);
-
-  // Handle close - dismiss temporarily
-  const handleClose = () => {
-    setIsDismissed(true);
-    if (onClose) {
-      onClose();
-    }
-  };
-
-  // Reset dismissed state when validation changes (new errors appear)
-  React.useEffect(() => {
-    if (hasValidationErrors(validation)) {
-      setIsDismissed(false);
-    }
-  }, [validation]);
-
-  // Don't render if no validation, no errors, or dismissed
-  if (!hasValidationErrors(validation) || isDismissed) {
+  // Don't render if no validation or no errors
+  if (!hasValidationErrors(validation)) {
     return null;
   }
 
+  // Transform validation data to ErrorInfoNote format
+  const errorData = transformValidationToErrorInfo(validation, variant);
+  const { errorMessages } = errorData || {};
+
+  // Handle error click if provided
+  const handleErrorClick = (error) => {
+    onErrorClick?.(error);
+  };
+
   return (
-    <div
+    <CapRow
       className={`validation-error-display ${className}`}
       role="alert"
       aria-live="polite"
       aria-label="Validation errors"
     >
-      <ValidationTabs
-        validation={validation}
-        onErrorClick={onErrorClick}
-        onClose={handleClose}
-        isLiquidEnabled={isLiquidEnabled}
+      <ErrorInfoNote
+        errorMessages={errorMessages}
+        onErrorClick={handleErrorClick}
       />
-    </div>
+    </CapRow>
   );
 };
 
 ValidationErrorDisplay.propTypes = {
   validation: PropTypes.shape({
     isValidating: PropTypes.bool,
-    getAllIssues: PropTypes.func,
+    getAllIssues: PropTypes.func
   }),
+  variant: PropTypes.oneOf(Object.values(HTML_EDITOR_VARIANTS)),
   onErrorClick: PropTypes.func,
-  onClose: PropTypes.func,
-  isLiquidEnabled: PropTypes.bool,
-  className: PropTypes.string,
-};
-
-ValidationErrorDisplay.defaultProps = {
-  validation: null,
-  onErrorClick: null,
-  onClose: null,
-  isLiquidEnabled: false,
-  className: '',
+  className: PropTypes.string
 };
 
 export default ValidationErrorDisplay;

package/v2Components/HtmlEditor/components/ValidationPanel/_validationPanel.scss

@@ -5,17 +5,17 @@
 @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
 
 .validation-panel {
-  border: 1px solid $CAP_COLOR_16;
-  border-radius: $CAP_SPACE_06;
-  background: $CAP_WHITE;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  background: #fff;
 
   &--loading {
-    padding: $CAP_SPACE_16;
+    padding: 16px;
     text-align: center;
   }
 
   &--clean {
-    padding: $CAP_SPACE_16;
+    padding: 16px;
     text-align: center;
     background: #f6ffed;
     border-color: #b7eb8f;
@@ -25,7 +25,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: $CAP_SPACE_08;
+    gap: 8px;
     color: #666;
     font-size: 14px;
   }
@@ -34,36 +34,36 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    gap: $CAP_SPACE_08;
+    gap: 8px;
     color: #52c41a;
     font-size: 14px;
-    font-weight: $FONT_WEIGHT_MEDIUM;
+    font-weight: 500;
   }
 
   &__summary {
     display: flex;
-    gap: $CAP_SPACE_16;
-    padding: $CAP_SPACE_12 $CAP_SPACE_16;
-    background: $CAP_G21;
-    border-bottom: 1px solid $CAP_COLOR_16;
-    border-radius: $CAP_SPACE_06 $CAP_SPACE_06 0 0;
+    gap: 16px;
+    padding: 12px 16px;
+    background: #fafafa;
+    border-bottom: 1px solid #d9d9d9;
+    border-radius: 6px 6px 0 0;
   }
 
   &__summary-item {
     display: flex;
     align-items: center;
-    gap: $CAP_SPACE_04;
-    font-size: $CAP_SPACE_12;
+    gap: 4px;
+    font-size: 12px;
     color: #666;
 
     &--security {
       color: #ff4d4f;
-      font-weight: $FONT_WEIGHT_MEDIUM;
+      font-weight: 500;
     }
 
     span:first-of-type {
       font-weight: 600;
-      margin-left: $CAP_SPACE_02;
+      margin-left: 2px;
     }
   }
 
@@ -72,7 +72,7 @@
       border: none;
 
       &:last-child {
-        border-radius: 0 0 $CAP_SPACE_06 $CAP_SPACE_06;
+        border-radius: 0 0 6px 6px;
       }
     }
 
@@ -123,8 +123,8 @@
   &__title {
     display: flex;
     align-items: center;
-    gap: $CAP_SPACE_08;
-    font-weight: $FONT_WEIGHT_MEDIUM;
+    gap: 8px;
+    font-weight: 500;
   }
 
   &__issues {
@@ -133,41 +133,41 @@
   }
 
   &__sanitization {
-    border-top: 1px solid $CAP_COLOR_16;
+    border-top: 1px solid #d9d9d9;
     background: #f9f9f9;
   }
 
   &__sanitization-header {
     display: flex;
     align-items: center;
-    gap: $CAP_SPACE_08;
-    padding: $CAP_SPACE_12 $CAP_SPACE_16;
-    font-weight: $FONT_WEIGHT_MEDIUM;
+    gap: 8px;
+    padding: 12px 16px;
+    font-weight: 500;
     color: #666;
     font-size: 13px;
   }
 
   &__sanitization-list {
-    padding: 0 $CAP_SPACE_16 $CAP_SPACE_12;
+    padding: 0 16px 12px;
   }
 
   &__sanitization-item {
-    padding: $CAP_SPACE_04 0;
-    font-size: $CAP_SPACE_12;
+    padding: 4px 0;
+    font-size: 12px;
     color: #8c8c8c;
   }
 }
 
 .validation-issue {
   display: flex;
-  gap: $CAP_SPACE_12;
-  padding: $CAP_SPACE_12 $CAP_SPACE_16;
+  gap: 12px;
+  padding: 12px 16px;
   border-bottom: 1px solid #f0f0f0;
   cursor: pointer;
   transition: background-color 0.2s;
 
   &:hover {
-    background: $CAP_G21;
+    background: #fafafa;
   }
 
   &:last-child {
@@ -189,22 +189,6 @@
   &__icon {
     flex-shrink: 0;
     margin-top: 2px;
-
-    &--error {
-      color: #ff4d4f;
-    }
-
-    &--info {
-      color: #1890ff;
-    }
-
-    &--warning {
-      color: #faad14;
-    }
-
-    &--security {
-      color: #ff4d4f;
-    }
   }
 
   &__content {
@@ -216,14 +200,14 @@
     font-size: 13px;
     line-height: 1.4;
     color: #262626;
-    margin-bottom: $CAP_SPACE_04;
+    margin-bottom: 4px;
     word-break: break-word;
   }
 
   &__meta {
     display: flex;
     flex-wrap: wrap;
-    gap: $CAP_SPACE_08;
+    gap: 8px;
     font-size: 11px;
     color: #8c8c8c;
   }
@@ -246,9 +230,9 @@
   &__source {
     display: flex;
     align-items: center;
-    gap: $CAP_SPACE_04;
+    gap: 4px;
     background: #f0f0f0;
-    padding: $CAP_SPACE_02 $CAP_SPACE_06;
+    padding: 2px 6px;
     border-radius: 3px;
   }
 }

package/v2Components/HtmlEditor/components/ValidationPanel/index.js

@@ -21,14 +21,13 @@ import ShieldOutlined from '@ant-design/icons/ShieldOutlined';
 import BugOutlined from '@ant-design/icons/BugOutlined';
 import CodeOutlined from '@ant-design/icons/CodeOutlined';
 import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined';
-import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
 
 import messages from './messages';
-import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
 import './_validationPanel.scss';
-import { SEVERITY } from './constants';
 
 const { Panel } = Collapse;
+
 /**
  * ValidationPanel Component
  */
@@ -38,7 +37,7 @@ const ValidationPanel = ({
   onErrorClick,
   showLineNumbers = true,
   groupBySource = false,
-  variant = 'email',
+  variant = 'email'
 }) => {
   const [activeKeys, setActiveKeys] = useState(['errors', 'warnings']);
 
@@ -57,50 +56,31 @@ const ValidationPanel = ({
         groups[source].push(issue);
         return groups;
       }, {});
+    } else {
+      return {
+        errors: allIssues.filter(issue => issue.severity === 'error'),
+        warnings: allIssues.filter(issue => issue.severity === 'warning'),
+        info: allIssues.filter(issue => issue.severity === 'info')
+      };
     }
-    return {
-      errors: allIssues.filter((issue) => issue.severity === SEVERITY.ERROR),
-      warnings: allIssues.filter((issue) => issue.severity === SEVERITY.WARNING),
-      info: allIssues.filter((issue) => issue.severity === SEVERITY.INFO),
-    };
   }, [validation, groupBySource]);
 
-  // Check if an issue is a blocking error (API error, Rule Group #1, or client-side Liquid validation errors)
-  const isBlockingError = (issue) => {
-    const { rule, source, severity } = issue || {};
-    // API errors are blocking
-    if (rule === 'liquid-api-validation' || rule === 'standard-api-validation') {
-      return true;
-    }
-    // Client-side Liquid validation errors are blocking (genuine syntax errors)
-    if (source === 'liquid-validator' && severity === 'error') {
-      return true;
-    }
-    // Rule Group #1 errors are blocking
-    if (BLOCKING_ERROR_RULE_IDS.includes(rule)) {
-      return true;
-    }
-    return false;
-  };
-
   // Get icon for issue type
-  // Blocking errors use error-icon, warnings use alert-warning
-  const getIssueIcon = (issue) => {
-    const { source, severity } = issue || {};
+  const getIssueIcon = (severity, source) => {
     if (source === 'security') {
-      return <ShieldOutlined className="validation-issue__icon validation-issue__icon--security" />;
-    }
-
-    // Only show error icon for blocking errors (API errors or Rule Group #1)
-    if (isBlockingError(issue)) {
-      return <CapIcon type="error-icon" className="validation-issue__icon validation-issue__icon--error" />;
+      return <ShieldOutlined style={{ color: '#ff4d4f' }} />;
     }
 
-    // All other issues show as warnings
-    if (severity === SEVERITY.INFO) {
-      return <CapIcon type="info" className="validation-issue__icon validation-issue__icon--info" />;
+    switch (severity) {
+      case 'error':
+        return <ExclamationCircleOutlined style={{ color: '#ff4d4f' }} />;
+      case 'warning':
+        return <WarningOutlined style={{ color: '#faad14' }} />;
+      case 'info':
+        return <InfoCircleOutlined style={{ color: '#1890ff' }} />;
+      default:
+        return <BugOutlined style={{ color: '#666' }} />;
     }
-    return <CapIcon type="alert-warning" className="validation-issue__icon validation-issue__icon--warning" />;
   };
 
   // Get source icon
@@ -126,7 +106,7 @@ const ValidationPanel = ({
         line: issue.line,
         column: issue.column || 1,
         message: issue.message,
-        severity: issue.severity,
+        severity: issue.severity
       });
     }
   };
@@ -146,7 +126,7 @@ const ValidationPanel = ({
       }}
     >
       <div className="validation-issue__icon">
-        {getIssueIcon(issue)}
+        {getIssueIcon(issue.severity, issue.source)}
       </div>
 
       <div className="validation-issue__content">
@@ -157,12 +137,10 @@ const ValidationPanel = ({
         <div className="validation-issue__meta">
           {showLineNumbers && issue.line && (
             <span className="validation-issue__location">
-              <FormattedMessage
-                {...messages.lineColumn}
-                values={{
-                  line: issue.line,
-                  column: issue.column || 1,
-                }} />
+              <FormattedMessage {...messages.lineColumn} values={{
+                line: issue.line,
+                column: issue.column || 1
+              }} />
             </span>
           )}
 
@@ -184,24 +162,17 @@ const ValidationPanel = ({
   );
 
   // Render panel header with count
-  const renderPanelHeader = (title, count, severity, issues = []) => {
-    // Check if any issue in this group is a blocking error
-    const hasBlocking = issues.some((issue) => isBlockingError(issue));
-    // Use blocking error icon only if there are blocking errors, otherwise use warning icon
-    const iconIssue = hasBlocking ? { rule: 'blocking', source: 'blocking' } : { severity: 'warning' };
-
-    return (
-      <div className="validation-panel__header">
-        <span className="validation-panel__title">
-          {getIssueIcon(iconIssue)}
-          <FormattedMessage {...title} />
-        </span>
-        {count > 0 && (
-          <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
-        )}
-      </div>
-    );
-  };
+  const renderPanelHeader = (title, count, severity) => (
+    <div className="validation-panel__header">
+      <span className="validation-panel__title">
+        {getIssueIcon(severity)}
+        <FormattedMessage {...title} />
+      </span>
+      {count > 0 && (
+        <Badge count={count} style={{ backgroundColor: getSeverityColor(severity) }} />
+      )}
+    </div>
+  );
 
   // Get severity color
   const getSeverityColor = (severity) => {
@@ -270,14 +241,14 @@ const ValidationPanel = ({
             : messages[key] || { id: `htmlEditor.validation.${key}`, defaultMessage: key };
 
           const severity = isSourceGroup
-            ? (issues.find((i) => i.severity === 'error') ? 'error'
-              : issues.find((i) => i.severity === 'warning') ? 'warning' : 'info')
+            ? (issues.find(i => i.severity === 'error') ? 'error' :
+               issues.find(i => i.severity === 'warning') ? 'warning' : 'info')
             : key;
 
           return (
             <Panel
               key={key}
-              header={renderPanelHeader(title, issues.length, severity, issues)}
+              header={renderPanelHeader(title, issues.length, severity)}
               className={`validation-panel__panel validation-panel__panel--${severity}`}
             >
               <div className="validation-panel__issues">
@@ -320,7 +291,7 @@ ValidationPanel.propTypes = {
   onErrorClick: PropTypes.func,
   showLineNumbers: PropTypes.bool,
   groupBySource: PropTypes.bool,
-  variant: PropTypes.oneOf(['email', 'inapp']),
+  variant: PropTypes.oneOf(['email', 'inapp'])
 };
 
 export default ValidationPanel;