@capillarytech/creatives-library 8.0.255-alpha.4 → 8.0.255

package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss

@@ -0,0 +1,255 @@
+/**
+ * ValidationTabs Styles
+ */
+
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.validation-tabs {
+  overflow-y: hidden;
+  width: 100%;
+  border-radius: 0.25rem;
+  box-sizing: border-box;
+
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__tabs {
+    flex: 1;
+    
+    // Override CapTab styles for proper spacing
+    .cap-tab-v2 {
+      .ant-tabs-bar {
+        padding: 0.5rem 0.5rem;
+        background-color: $CAP_COLOR_05;
+      }
+      .ant-tabs-nav {
+        margin-bottom: 0;
+        
+        &::before {
+          border-bottom: none; // Remove bottom border
+        }
+      }
+
+      .ant-tabs-tab {
+        padding: 0.5rem 0.75rem; // Add horizontal padding for spacing
+        margin-right: 0; // Remove margin, use padding instead
+        
+        color: $CAP_G03;
+        font-size: 0.875rem;
+        font-weight: 400;
+        line-height: 1;
+        letter-spacing: 0;
+        background-color: $CAP_COLOR_05;
+        border-radius: 0.25rem;
+        border-bottom: none; // Remove bottom border
+        
+        & + .ant-tabs-tab {
+          margin-left: 1.5rem; // Add space between tabs
+        }
+        
+        &:hover {
+          color: $CAP_COLOR_05;
+          background-color: $CAP_COLOR_05;
+        }
+
+        &.ant-tabs-tab-active {
+          .ant-tabs-tab-btn {
+            color: $CAP_COLOR_05;
+            font-weight: 600;
+          }
+        }
+      }
+
+      .ant-tabs-ink-bar {
+        display: none; // Hide the ink bar (bottom border indicator)
+      }
+
+      .ant-tabs-content-holder {
+        padding-top: 0.25rem; // Reduced from 0.5rem
+        padding-bottom: 0; // No bottom padding
+      }
+    }
+  }
+
+  &__tab-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__tab-count {
+    color: inherit;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-top: 0.5rem;
+    background-color: $CAP_COLOR_05;
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.9rem;
+    height: 2.3rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G03;
+    transition: all 0.2s ease;
+
+    // &:hover {
+    //   background-color: rgba($CAP_COLOR_05, 0.1);
+    //   color: $CAP_COLOR_05;
+    // }
+
+    .cap-icon-v2 {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__content {
+    max-height: 15rem; // Limit height for many errors
+    overflow-y: auto;
+    padding-bottom: 0; // Remove bottom padding completely
+
+    // Custom scrollbar
+    &::-webkit-scrollbar {
+      width: 0.375rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $CAP_G06;
+      border-radius: 0.1875rem;
+
+      &:hover {
+        background-color: $CAP_G04;
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.5rem 0.5rem; // Reduced from 0.375rem
+    margin-bottom: 3px;
+
+    &:last-child {
+      border-bottom: none;
+      padding-bottom: 0.25rem; // Minimal padding on last item
+    }
+
+    &--error {
+      .validation-tabs__icon--error {
+        color: $CAP_RED;
+      }
+    }
+
+    &--warning {
+      .validation-tabs__icon--warning {
+        color: $CAP_YELLOW;
+      }
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 0.125rem;
+  }
+
+  &__icon {
+    font-size: 0.875rem;
+
+    &--error {
+      color: $CAP_RED;
+    }
+
+    &--warning {
+      color: $CAP_YELLOW;
+    }
+  }
+
+  &__item-content {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 2;
+    color: $CAP_G01;
+  }
+
+  &__item-message {
+    color: $CAP_G01;
+  }
+
+  &__item-location {
+    color: $CAP_G03;
+    white-space: nowrap;
+  }
+
+  &__item-rule {
+    color: $CAP_G04;
+    font-family: monospace;
+    font-size: 0.6875rem;
+  }
+
+  &__item-navigate {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    width: 1.7rem;
+    height: 1.7rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G04;
+    transition: all 0.2s ease;
+
+    .anticon {
+      font-size: 1rem; // Increased icon size
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .validation-tabs {
+    padding: 0.375rem 0.5rem;
+
+    &__tabs {
+      .ant-tabs-tab {
+        margin-right: 1rem;
+        font-size: 0.8125rem;
+        background-color: $CAP_COLOR_05;
+      }
+    }
+
+    &__content {
+      max-height: 10rem;
+    }
+
+    &__item-content {
+      font-size: 0.6875rem;
+    }
+  }
+}

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

@@ -0,0 +1,364 @@
+/**
+ * ValidationTabs Component
+ *
+ * Displays validation errors in a tabbed interface with 3 categories:
+ * - HTML issues: General HTML/CSS validation errors and warnings
+ * - Label issues: Tag syntax errors (open/close tags, attributes, brackets)
+ * - Liquid issues: Liquid expression errors (shown when liquid content is detected, even if liquid feature is disabled)
+ */
+
+import React, { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+
+// Cap UI Library
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+
+// Messages
+import messages from './messages';
+import { BLOCKING_ERROR_RULE_IDS } from '../../constants';
+import { ISSUE_SOURCES, LABEL_ISSUE_PATTERNS } from '../../utils/validationConstants';
+
+// Styles
+import './_validationTabs.scss';
+import {StyledCapTab} from '../../../../v2Containers/MobilePushNew/style';
+
+/**
+ * Categorize issues into HTML, Label, and Liquid categories
+ */
+const categorizeIssues = (allIssues) => {
+  const htmlIssues = [];
+  const labelIssues = [];
+  const liquidIssues = [];
+
+  allIssues.forEach((issue) => {
+    const { source, rule, message } = issue;
+    const messageLower = (message || '').toLowerCase();
+    const ruleLower = (rule || '').toLowerCase();
+
+    // Check if it's a Liquid issue - ONLY by source, not by message content
+    // This prevents false positives where HTML errors mention liquid syntax
+    if (source === ISSUE_SOURCES.LIQUID) {
+      liquidIssues.push(issue);
+      return;
+    }
+
+    // Check if it's a Label (tag syntax) issue
+    const isLabelIssue = LABEL_ISSUE_PATTERNS.some(
+      (pattern) => messageLower.includes(pattern.toLowerCase())
+        || ruleLower.includes(pattern.toLowerCase()),
+    );
+
+    if (isLabelIssue) {
+      labelIssues.push(issue);
+      return;
+    }
+
+    // Default to HTML issues
+    htmlIssues.push(issue);
+  });
+
+  return { htmlIssues, labelIssues, liquidIssues };
+};
+
+/**
+ * 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 based on whether issue is blocking error or warning
+ * Blocking errors use error-icon, warnings use alert-warning
+ */
+const getSeverityIcon = (issue) => {
+  if (isBlockingError(issue)) {
+    return <CapIcon type="error-icon" className="validation-tabs__icon validation-tabs__icon--error" />;
+  }
+  // All other issues (warnings, non-blocking) use warning icon
+  return <CapIcon type="alert-warning" className="validation-tabs__icon validation-tabs__icon--warning" />;
+};
+
+/**
+ * ValidationTabContent - Renders the content for each tab
+ */
+const ValidationTabContent = ({
+  issues,
+  onErrorClick,
+}) => {
+  if (!issues || issues.length === 0) {
+    return null;
+  }
+
+  const handleNavigateClick = (issue, e) => {
+    e.stopPropagation();
+    if (onErrorClick) {
+      // Always call onErrorClick to acknowledge the error (enables buttons)
+      // If line number exists, navigate to it; otherwise just acknowledge and focus editor
+      onErrorClick({
+        line: issue.line || 1, // Default to line 1 if no line number (for API errors)
+        column: issue.column || 1,
+        message: issue.message,
+        severity: issue.severity,
+      });
+    }
+  };
+
+  return (
+    <div className="validation-tabs__content">
+      {issues.map((issue, index) => {
+        const {
+          message, line, column,
+        } = issue;
+        const key = `${message}-${line}-${column}-${index}`;
+        const isBlocking = isBlockingError(issue);
+        const displaySeverity = isBlocking ? 'error' : 'warning';
+
+        return (
+          <div
+            key={key}
+            className={`validation-tabs__item validation-tabs__item--${displaySeverity}`}
+          >
+            <div className="validation-tabs__item-icon">
+              {getSeverityIcon(issue)}
+            </div>
+            <div className="validation-tabs__item-content">
+              <span className="validation-tabs__item-message">
+                {message}
+              </span>
+              {line && (
+                <span className="validation-tabs__item-location">
+                  <FormattedMessage
+                    {...messages.lineChar}
+                    values={{ line, char: column || 1 }}
+                  />
+                </span>
+              )}
+            </div>
+            {/* Always show redirection icon for errors (even API errors without line numbers) */}
+            {/* Clicking it acknowledges the error and enables buttons */}
+            <CapTooltip title={line ? `Line ${line}, Char ${column || 1}` : 'Click to acknowledge error and focus editor'}>
+              <button
+                type="button"
+                className="validation-tabs__item-navigate"
+                onClick={(e) => handleNavigateClick(issue, e)}
+                aria-label={line ? `Line ${line}, Char ${column || 1}` : 'Acknowledge error'}
+              >
+                <CapIcon type="redirection" />
+              </button>
+            </CapTooltip>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ValidationTabContent.propTypes = {
+  issues: PropTypes.array,
+  onErrorClick: PropTypes.func,
+};
+
+ValidationTabContent.defaultProps = {
+  issues: [],
+  onErrorClick: null,
+};
+
+/**
+ * ValidationTabs Component
+ */
+const ValidationTabs = ({
+  intl,
+  validation,
+  onErrorClick,
+  onClose,
+  className,
+}) => {
+  const [activeKey, setActiveKey] = useState(null);
+
+  // Categorize issues
+  const { htmlIssues, labelIssues, liquidIssues } = useMemo(() => {
+    if (!validation) {
+      return { htmlIssues: [], labelIssues: [], liquidIssues: [] };
+    }
+
+    // Get all issues from validation
+    const allIssues = validation.getAllIssues ? validation.getAllIssues() : [];
+    const categorized = categorizeIssues(allIssues);
+    return categorized;
+  }, [validation]);
+
+  // Calculate counts
+  const htmlCount = htmlIssues.length;
+  const labelCount = labelIssues.length;
+  const liquidCount = liquidIssues.length;
+  // Include liquid issues in total count even when liquid is disabled
+  // This ensures liquid errors are shown when liquid content is detected but feature is disabled
+  const totalCount = htmlCount + labelCount + liquidCount;
+
+  // Set default active key when issues change
+  useMemo(() => {
+    if (htmlCount > 0 && !activeKey) {
+      setActiveKey('html');
+    } else if (labelCount > 0 && !activeKey) {
+      setActiveKey('label');
+    } else if (liquidCount > 0 && !activeKey) {
+      // Show liquid tab even when liquid is disabled if liquid content is detected
+      setActiveKey('liquid');
+    }
+  }, [htmlCount, labelCount, liquidCount, activeKey]);
+
+  // Don't render if no issues
+  if (totalCount === 0) {
+    return null;
+  }
+
+  // Build tab panes (CapTab uses 'panes' with 'tab' and 'content' properties)
+  const tabPanes = [];
+
+  if (htmlCount > 0) {
+    tabPanes.push({
+      key: 'html',
+      tab: (
+        <CapTooltip title={`${intl.formatMessage(messages.htmlIssues)} (${htmlCount})`}>
+          <span className="validation-tabs__tab-label">
+            <FormattedMessage {...messages.htmlIssues} />
+            <span className="validation-tabs__tab-count">
+              (
+              {htmlCount}
+              )
+            </span>
+          </span>
+        </CapTooltip>
+      ),
+      content: (
+        <ValidationTabContent
+          issues={htmlIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+
+  if (labelCount > 0) {
+    tabPanes.push({
+      key: 'label',
+      tab: (
+        <CapTooltip title={`${intl.formatMessage(messages.labelIssues)} (${labelCount})`}>
+          <span className="validation-tabs__tab-label">
+            <FormattedMessage {...messages.labelIssues} />
+            <span className="validation-tabs__tab-count">
+              (
+              {labelCount}
+              )
+            </span>
+          </span>
+        </CapTooltip>
+      ),
+      content: (
+        <ValidationTabContent
+          issues={labelIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+
+  // Show liquid issues tab even when liquid is disabled if liquid content is detected
+  // This allows users to see errors when they add liquid content but liquid feature is not enabled
+  if (liquidCount > 0) {
+    tabPanes.push({
+      key: 'liquid',
+      tab: (
+        <CapTooltip title={`${intl.formatMessage(messages.liquidIssues)} (${liquidCount})`}>
+          <span className="validation-tabs__tab-label">
+            <FormattedMessage {...messages.liquidIssues} />
+            <span className="validation-tabs__tab-count">
+              (
+              {liquidCount}
+              )
+            </span>
+          </span>
+        </CapTooltip>
+      ),
+      content: (
+        <ValidationTabContent
+          issues={liquidIssues}
+          onErrorClick={onErrorClick}
+          intl={intl}
+        />
+      ),
+    });
+  }
+
+  // Handle close
+  const handleClose = () => {
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  return (
+    <div className={`validation-tabs ${className || ''}`}>
+      <CapRow className="validation-tabs__header">
+        <StyledCapTab
+          className="validation-tabs__tabs"
+          activeKey={activeKey || (tabPanes[0]?.key)}
+          onChange={setActiveKey}
+          panes={tabPanes}
+        />
+        <CapRow className="validation-tabs__actions">
+          <CapTooltip title={intl.formatMessage(messages.closePanel)}>
+            <button
+              type="button"
+              className="validation-tabs__close"
+              onClick={handleClose}
+              aria-label={intl.formatMessage(messages.closePanel)}
+            >
+              <CapIcon type="close" />
+            </button>
+          </CapTooltip>
+        </CapRow>
+      </CapRow>
+    </div>
+  );
+};
+
+ValidationTabs.propTypes = {
+  intl: intlShape.isRequired,
+  validation: PropTypes.shape({
+    getAllIssues: PropTypes.func,
+  }),
+  onErrorClick: PropTypes.func,
+  onClose: PropTypes.func,
+  isLiquidEnabled: PropTypes.bool,
+  className: PropTypes.string,
+};
+
+ValidationTabs.defaultProps = {
+  validation: null,
+  onErrorClick: null,
+  onClose: null,
+  isLiquidEnabled: false,
+  className: '',
+};
+
+export default injectIntl(ValidationTabs);

package/v2Components/HtmlEditor/components/ValidationTabs/messages.js

@@ -0,0 +1,51 @@
+/**
+ * ValidationTabs Messages
+ *
+ * Internationalization messages for the ValidationTabs component
+ */
+
+import { defineMessages } from 'react-intl';
+
+const scope = 'app.components.HtmlEditor.ValidationTabs';
+
+export default defineMessages({
+  // Tab labels
+  htmlIssues: {
+    id: `${scope}.htmlIssues`,
+    defaultMessage: 'HTML issues',
+  },
+  labelIssues: {
+    id: `${scope}.labelIssues`,
+    defaultMessage: 'Label issues',
+  },
+  liquidIssues: {
+    id: `${scope}.liquidIssues`,
+    defaultMessage: 'Liquid issues',
+  },
+
+  // Error item labels
+  syntaxError: {
+    id: `${scope}.syntaxError`,
+    defaultMessage: 'Syntax Error',
+  },
+  lineChar: {
+    id: `${scope}.lineChar`,
+    defaultMessage: 'Line {line}, Char {char}.',
+  },
+
+  // Tooltips
+  navigateToError: {
+    id: `${scope}.navigateToError`,
+    defaultMessage: 'Go to error location',
+  },
+  closePanel: {
+    id: `${scope}.closePanel`,
+    defaultMessage: 'Close validation panel',
+  },
+
+  // Liquid documentation
+  liquidDocumentation: {
+    id: `${scope}.liquidDocumentation`,
+    defaultMessage: 'Liquid documentation',
+  },
+});