feat(frontend): Replace ESLint with OXC hybrid linting architecture (#35506)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/scripts/check-custom-rules.js

@@ -0,0 +1,328 @@
+#!/usr/bin/env node
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/**
+ * Custom rule checker for Superset-specific linting patterns
+ * Runs as a separate check without needing custom binaries
+ */
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const parser = require('@babel/parser');
+const traverse = require('@babel/traverse').default;
+
+// ANSI color codes
+const RED = '\x1b[31m';
+const YELLOW = '\x1b[33m';
+const RESET = '\x1b[0m';
+
+let errorCount = 0;
+let warningCount = 0;
+
+/**
+ * Check if a node has an eslint-disable comment
+ */
+function hasEslintDisable(path, ruleName = 'theme-colors/no-literal-colors') {
+  const { node, parent } = path;
+
+  // Check leadingComments on the node itself
+  if (node.leadingComments) {
+    const hasDisable = node.leadingComments.some(
+      comment =>
+        (comment.value.includes('eslint-disable-next-line') ||
+          comment.value.includes('eslint-disable')) &&
+        comment.value.includes(ruleName),
+    );
+    if (hasDisable) return true;
+  }
+
+  // Check leadingComments on parent nodes (for expressions in assignments, etc.)
+  if (parent && parent.leadingComments) {
+    const hasDisable = parent.leadingComments.some(
+      comment =>
+        (comment.value.includes('eslint-disable-next-line') ||
+          comment.value.includes('eslint-disable')) &&
+        comment.value.includes(ruleName),
+    );
+    if (hasDisable) return true;
+  }
+
+  // Check if parent is a statement with leading comments
+  let current = path;
+  while (current.parent) {
+    current = current.parent;
+    if (current.node && current.node.leadingComments) {
+      const hasDisable = current.node.leadingComments.some(
+        comment =>
+          (comment.value.includes('eslint-disable-next-line') ||
+            comment.value.includes('eslint-disable')) &&
+          comment.value.includes(ruleName),
+      );
+      if (hasDisable) return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Check for literal color values (hex, rgb, rgba)
+ */
+function checkNoLiteralColors(ast, filepath) {
+  const colorPatterns = [
+    /^#[0-9A-Fa-f]{3,6}$/, // Hex colors
+    /^rgb\(/, // RGB colors
+    /^rgba\(/, // RGBA colors
+  ];
+
+  traverse(ast, {
+    StringLiteral(path) {
+      const { value } = path.node;
+      if (colorPatterns.some(pattern => pattern.test(value))) {
+        // Check if this line has an eslint-disable comment
+        if (hasEslintDisable(path)) {
+          return; // Skip this violation
+        }
+
+        // eslint-disable-next-line no-console
+        console.error(
+          `${RED}✖${RESET} ${filepath}: Literal color "${value}" found. Use theme colors instead.`,
+        );
+        errorCount += 1;
+      }
+    },
+    // Check styled-components template literals
+    TemplateLiteral(path) {
+      path.node.quasis.forEach(quasi => {
+        const value = quasi.value.raw;
+        // Look for CSS color properties
+        if (
+          value.match(
+            /(?:color|background|border-color|outline-color):\s*(#[0-9A-Fa-f]{3,6}|rgb|rgba)/,
+          )
+        ) {
+          // Check if this line has an eslint-disable comment
+          if (hasEslintDisable(path)) {
+            return; // Skip this violation
+          }
+
+          // eslint-disable-next-line no-console
+          console.error(
+            `${RED}✖${RESET} ${filepath}: Literal color in styled component. Use theme colors instead.`,
+          );
+          errorCount += 1;
+        }
+      });
+    },
+  });
+}
+
+/**
+ * Check for FontAwesome icon usage
+ */
+function checkNoFaIcons(ast, filepath) {
+  traverse(ast, {
+    ImportDeclaration(path) {
+      const source = path.node.source.value;
+      if (source.includes('@fortawesome') || source.includes('font-awesome')) {
+        // eslint-disable-next-line no-console
+        console.error(
+          `${RED}✖${RESET} ${filepath}: FontAwesome import detected. Use @superset-ui/core/components/Icons instead.`,
+        );
+        errorCount += 1;
+      }
+    },
+    JSXAttribute(path) {
+      if (path.node.name.name === 'className') {
+        const { value } = path.node;
+        if (
+          value &&
+          value.type === 'StringLiteral' &&
+          value.value.includes('fa-')
+        ) {
+          // eslint-disable-next-line no-console
+          console.error(
+            `${RED}✖${RESET} ${filepath}: FontAwesome class detected. Use Icons component instead.`,
+          );
+          errorCount += 1;
+        }
+      }
+    },
+  });
+}
+
+/**
+ * Check for improper i18n template usage
+ */
+function checkI18nTemplates(ast, filepath) {
+  traverse(ast, {
+    CallExpression(path) {
+      const { callee } = path.node;
+      // Check for t() or tn() functions
+      if (
+        callee.type === 'Identifier' &&
+        (callee.name === 't' || callee.name === 'tn')
+      ) {
+        const args = path.node.arguments;
+        if (args.length > 0 && args[0].type === 'TemplateLiteral') {
+          const templateLiteral = args[0];
+          if (templateLiteral.expressions.length > 0) {
+            // eslint-disable-next-line no-console
+            console.error(
+              `${RED}✖${RESET} ${filepath}: Template variables in t() function. Use parameterized messages instead.`,
+            );
+            errorCount += 1;
+          }
+        }
+      }
+    },
+  });
+}
+
+/**
+ * Process a single file
+ */
+function processFile(filepath) {
+  const code = fs.readFileSync(filepath, 'utf8');
+
+  try {
+    const ast = parser.parse(code, {
+      sourceType: 'module',
+      plugins: ['jsx', 'typescript', 'decorators-legacy'],
+      attachComments: true,
+    });
+
+    // Run all checks
+    checkNoLiteralColors(ast, filepath);
+    checkNoFaIcons(ast, filepath);
+    checkI18nTemplates(ast, filepath);
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `${YELLOW}⚠${RESET} Could not parse ${filepath}: ${error.message}`,
+    );
+    warningCount += 1;
+  }
+}
+
+/**
+ * Main function
+ */
+function main() {
+  const args = process.argv.slice(2);
+  let files = args;
+
+  // Define ignore patterns once
+  const ignorePatterns = [
+    /\.test\./,
+    /\.spec\./,
+    /\/test\//,
+    /\/tests\//,
+    /\/storybook\//,
+    /\.stories\./,
+    /\/demo\//,
+    /\/examples\//,
+    /\/color\/colorSchemes\//,
+    /\/cypress\//,
+    /\/cypress-base\//,
+    /packages\/superset-ui-demo\//,
+    /\/esm\//,
+    /\/lib\//,
+    /\/dist\//,
+    /plugins\/legacy-/, // Legacy plugins can have old color patterns
+    /\/vendor\//, // Third-party vendor code
+    /spec\/fixtures\//, // Test fixtures
+    /theme\/exampleThemes/, // Theme examples legitimately have colors
+    /\/color\/utils/, // Color utility functions legitimately work with colors
+    /\/theme\/utils/, // Theme utility functions legitimately work with colors
+    /packages\/superset-ui-core\/src\/color\/index\.ts/, // Core brand color constants
+  ];
+
+  // If no files specified, check all
+  if (files.length === 0) {
+    files = glob.sync('src/**/*.{ts,tsx,js,jsx}', {
+      ignore: [
+        '**/*.test.*',
+        '**/*.spec.*',
+        '**/test/**',
+        '**/tests/**',
+        '**/node_modules/**',
+        '**/storybook/**',
+        '**/*.stories.*',
+        '**/demo/**',
+        '**/examples/**',
+        '**/color/colorSchemes/**', // Color scheme definitions legitimately contain colors
+        '**/cypress/**',
+        '**/cypress-base/**',
+        'packages/superset-ui-demo/**', // Demo package
+        '**/esm/**', // Build artifacts
+        '**/lib/**', // Build artifacts
+        '**/dist/**', // Build artifacts
+        'plugins/legacy-*/**', // Legacy plugins
+        '**/vendor/**',
+        'spec/fixtures/**',
+        '**/theme/exampleThemes/**',
+        '**/color/utils/**',
+        '**/theme/utils/**',
+        'packages/superset-ui-core/src/color/index.ts', // Core brand color constants
+      ],
+    });
+  } else {
+    // Filter to only JS/TS files and remove superset-frontend prefix
+    files = files
+      .filter(f => /\.(ts|tsx|js|jsx)$/.test(f))
+      .map(f => f.replace(/^superset-frontend\//, ''))
+      .filter(f => !ignorePatterns.some(pattern => pattern.test(f)));
+  }
+
+  if (files.length === 0) {
+    // eslint-disable-next-line no-console
+    console.log('No files to check.');
+    return;
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(`Checking ${files.length} files for Superset custom rules...\\n`);
+
+  files.forEach(file => {
+    // Resolve the file path
+    const resolvedPath = path.resolve(file);
+    if (fs.existsSync(resolvedPath)) {
+      processFile(resolvedPath);
+    } else if (fs.existsSync(file)) {
+      processFile(file);
+    }
+  });
+
+  // eslint-disable-next-line no-console
+  console.log(`\\n${errorCount} errors, ${warningCount} warnings`);
+
+  if (errorCount > 0) {
+    process.exit(1);
+  }
+}
+
+// Run if called directly
+if (require.main === module) {
+  main();
+}
+
+module.exports = { checkNoLiteralColors, checkNoFaIcons, checkI18nTemplates };

superset-frontend/scripts/oxlint-metrics-uploader.js

@@ -0,0 +1,245 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+const { execSync } = require('child_process');
+const { google } = require('googleapis');
+
+const { SPREADSHEET_ID } = process.env;
+const SERVICE_ACCOUNT_KEY = JSON.parse(process.env.SERVICE_ACCOUNT_KEY || '{}');
+
+// Only set up Google Sheets if we have credentials
+let sheets;
+if (SERVICE_ACCOUNT_KEY.client_email) {
+  const auth = new google.auth.GoogleAuth({
+    credentials: SERVICE_ACCOUNT_KEY,
+    scopes: ['https://www.googleapis.com/auth/spreadsheets'],
+  });
+  sheets = google.sheets({ version: 'v4', auth });
+}
+
+const DATETIME = new Date().toISOString().replace(/T/, ' ').replace(/\..+/, '');
+
+async function writeToGoogleSheet(data, range, headers, append = false) {
+  if (!sheets) {
+    console.log('No Google Sheets credentials, skipping upload');
+    return;
+  }
+
+  const request = {
+    spreadsheetId: SPREADSHEET_ID,
+    range,
+    valueInputOption: 'USER_ENTERED',
+    resource: { values: append ? data : [headers, ...data] },
+  };
+
+  const method = append ? 'append' : 'update';
+  await sheets.spreadsheets.values[method](request);
+}
+
+// Run OXC and get JSON output
+async function runOxlintAndProcess() {
+  const enrichedRules = {
+    'react-prefer-function-component/react-prefer-function-component': {
+      description: 'We prefer function components to class-based components',
+    },
+    'react/jsx-filename-extension': {
+      description:
+        'We prefer Typescript - all JSX files should be converted to TSX',
+    },
+    'react/forbid-component-props': {
+      description:
+        'We prefer Emotion for styling rather than `className` or `style` props',
+    },
+    'no-restricted-imports': {
+      description:
+        "This rule catches several things that shouldn't be used anymore. LESS, antD, etc. See individual occurrence messages for details",
+    },
+    'no-console': {
+      description:
+        "We don't want a bunch of console noise, but you can use the `logger` from `@superset-ui/core` when there's a reason to.",
+    },
+  };
+
+  try {
+    // Run OXC with JSON format
+    console.log('Running OXC linter...');
+    const oxlintOutput = execSync('npx oxlint --format json', {
+      encoding: 'utf8',
+      maxBuffer: 50 * 1024 * 1024, // 50MB buffer for large outputs
+      stdio: ['pipe', 'pipe', 'ignore'], // Ignore stderr to avoid error output
+    });
+
+    const results = JSON.parse(oxlintOutput);
+
+    // Process OXC JSON output
+    const metricsByRule = {};
+    let occurrencesData = [];
+
+    // OXC JSON format has diagnostics array
+    if (results.diagnostics && Array.isArray(results.diagnostics)) {
+      results.diagnostics.forEach(diagnostic => {
+        // Extract rule ID from code like "eslint(no-unused-vars)" or "eslint-plugin-unicorn(no-new-array)"
+        const codeMatch = diagnostic.code?.match(
+          /^(?:eslint(?:-plugin-(\w+))?\()([^)]+)\)$/,
+        );
+        let ruleId = diagnostic.code || 'unknown';
+
+        if (codeMatch) {
+          const plugin = codeMatch[1];
+          const rule = codeMatch[2];
+          ruleId = plugin ? `${plugin}/${rule}` : rule;
+        }
+
+        const file = diagnostic.filename || 'unknown';
+        const line = diagnostic.labels?.[0]?.span?.line || 0;
+        const column = diagnostic.labels?.[0]?.span?.column || 0;
+        const message = diagnostic.message || '';
+
+        const ruleData = metricsByRule[ruleId] || { count: 0 };
+        ruleData.count += 1;
+        metricsByRule[ruleId] = ruleData;
+
+        occurrencesData.push({
+          rule: ruleId,
+          message,
+          file,
+          line,
+          column,
+          ts: DATETIME,
+        });
+      });
+    }
+
+    console.log(
+      `OXC found ${results.diagnostics?.length || 0} issues across ${results.number_of_files} files`,
+    );
+
+    // Also run minimal ESLint for custom rules and merge results
+    console.log('Running minimal ESLint for custom rules...');
+    let eslintOutput = '[]';
+    try {
+      // Run ESLint and capture output directly
+      eslintOutput = execSync(
+        'npx eslint --no-eslintrc --config .eslintrc.minimal.js --no-inline-config --format json src',
+        {
+          encoding: 'utf8',
+          maxBuffer: 50 * 1024 * 1024,
+          stdio: ['pipe', 'pipe', 'ignore'], // Ignore stderr
+        },
+      );
+    } catch (e) {
+      // ESLint exits with non-zero when it finds issues, capture the stdout
+      if (e.stdout) {
+        eslintOutput = e.stdout.toString();
+      }
+    }
+
+    // Parse minimal ESLint output
+    try {
+      const eslintResults = JSON.parse(eslintOutput);
+
+      eslintResults.forEach(result => {
+        result.messages.forEach(({ ruleId, line, column, message }) => {
+          const ruleData = metricsByRule[ruleId] || { count: 0 };
+          ruleData.count += 1;
+          metricsByRule[ruleId] = ruleData;
+
+          occurrencesData.push({
+            rule: ruleId,
+            message,
+            file: result.filePath,
+            line,
+            column,
+            ts: DATETIME,
+          });
+        });
+      });
+
+      console.log(
+        `ESLint found ${eslintResults.reduce((sum, r) => sum + r.messages.length, 0)} custom rule violations`,
+      );
+    } catch (e) {
+      console.log('No ESLint issues found or parsing error:', e.message);
+    }
+
+    // Transform data for Google Sheets
+    const metricsData = Object.entries(metricsByRule).map(
+      ([rule, { count }]) => [
+        'OXC+ESLint',
+        rule,
+        enrichedRules[rule]?.description || 'N/A',
+        `${count}`,
+        DATETIME,
+      ],
+    );
+
+    occurrencesData = occurrencesData.map(
+      ({ rule, message, file, line, column }) => [
+        rule,
+        enrichedRules[rule]?.description || 'N/A',
+        message,
+        file,
+        `${line}`,
+        `${column}`,
+        DATETIME,
+      ],
+    );
+
+    const aggregatedHistoryHeaders = [
+      'Process',
+      'Rule',
+      'Description',
+      'Count',
+      'Timestamp',
+    ];
+    const eslintBacklogHeaders = [
+      'Rule',
+      'Rule Description',
+      'ESLint Message',
+      'File',
+      'Line',
+      'Column',
+      'Timestamp',
+    ];
+
+    console.log(
+      `Found ${Object.keys(metricsByRule).length} unique rules with ${occurrencesData.length} total occurrences`,
+    );
+
+    await writeToGoogleSheet(
+      metricsData,
+      'Aggregated History!A:E',
+      aggregatedHistoryHeaders,
+      true,
+    );
+
+    await writeToGoogleSheet(
+      occurrencesData,
+      'ESLint Backlog!A:G',
+      eslintBacklogHeaders,
+    );
+
+    console.log('Successfully uploaded metrics to Google Sheets');
+  } catch (error) {
+    console.error('Error processing lint results:', error);
+    process.exit(1);
+  }
+}
+
+// Run the process
+runOxlintAndProcess().catch(console.error);