feat(ci): testing configured queries against ClickHouse versions

[duyet]

Summary by Sourcery

Add a new CI workflow to test queries against multiple ClickHouse versions and enhance UI components for better user experience. Update tests to align with UI changes.

New Features:

• Introduce a new CI job to test configured queries against multiple ClickHouse versions.

Enhancements:

• Update UI components to replace 'ExternalLinkIcon' with 'FilterIcon' and 'MoveRightIcon' for better clarity.
• Add a detailed explanation link to the ClickHouse system.query_log document in the QueryDetailCard component.
• Enhance the TruncatedList component to dynamically show the number of additional items when collapsed.

CI:

• Add a new CI workflow to test queries against ClickHouse versions 24.5, 24.6, 24.7, and 24.8.

Tests:

• Modify tests for the TruncatedList component to reflect changes in the display of the 'Show more' button.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
clickhouse-monitoring	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 29, 2024 5:41pm

[sourcery-ai]

Reviewer's Guide by Sourcery

This PR enhances the query detail view with improved UI elements, better link handling, and adds testing for configured queries against different ClickHouse versions. The changes include UI refinements, new link behaviors for database and table references, and the addition of a new CI workflow.

No diagrams generated as the changes look simple and do not need a visual representation.

File-Level Changes

Change	Details	Files
Enhanced UI components and link behavior in the query detail view	Replaced ExternalLinkIcon with FilterIcon for user and query ID links Added null checks for empty data arrays in link binding functions Updated link icons to use MoveRightIcon for internal navigation Added tooltips to table and database links Added an informational footer with system.query_log documentation link Removed text-xs class from 'No data' message	app/[host]/query/[query_id]/query-detail-card.tsx app/[host]/query/[query_id]/query-detail-badge.tsx
Improved TruncatedList component functionality	Added dynamic count display in 'Show more' button Updated test cases to reflect new show more/less behavior Fixed component props in test cases	components/truncated-list.tsx components/truncated-list.cy.tsx
Added new CI workflow for testing queries against multiple ClickHouse versions	Created new test-queries-config job in CI workflow Added matrix strategy for testing against ClickHouse versions 24.5-24.8 Configured Node.js and caching setup for the new workflow	.github/workflows/test.yml
Updated query configuration with new column settings	Added query_id to visible columns list Configured query_id column format with link functionality	app/[host]/query/[query_id]/config.ts

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[codecov-commenter]

Bundle Report

Changes will increase total bundle size by 1.38kB (0.02%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
clickhouse-monitoring-bundle-server-cjs	2.55MB	1.35kB (0.05%) ⬆️
clickhouse-monitoring-bundle-edge-server-array-push	128.52kB	6 bytes (-0.0%) ⬇️
clickhouse-monitoring-bundle-client-array-push	3.79MB	37 bytes (0.0%) ⬆️

[sourcery-ai]

Hey @duyet - I've reviewed your changes - here's some feedback:

Overall Comments:

• The test-queries-config job has an incomplete Jest run command that needs to be completed to properly test against different ClickHouse versions

Here's what I looked at during the review

• 🟡 General issues: 2 issues found
• 🟢 Security: all looks good
• 🟢 Review instructions: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[sourcery-ai]

suggestion: FilterIcon seems inappropriate for a user detail link - consider using a more semantically appropriate icon

The FilterIcon suggests filtering functionality which isn't present here. Consider using the original ExternalLinkIcon or another icon that better represents viewing user details.

                    {initial_user}
                    <ExternalLinkIcon className="size-3" />

[sourcery-ai]

suggestion (performance): Avoid calling Children.count() twice by storing the result in a variable

The children count is calculated both for isClamped and length. Consider calculating it once and reusing the value.

  const childrenCount = Children.count(children)
  const isClamped = childrenCount > items

[sourcery-ai]

issue (complexity): Consider using a factory function pattern to unify the link binding functions.

The binding functions share significant common patterns that can be simplified using a factory approach. This reduces duplication while keeping domain logic clear:

// Factory function for creating link bindings
function createLinkBinding(
  urlGenerator: (item: string) => string | Promise<string>,
  icon: React.ReactNode = <ExternalLinkIcon className="size-3" />,
  transform?: (item: string) => { text: string, url: string | Promise<string> }
) {
  return (items: string[]): React.ReactNode[] | null => {
    if (!items.length) return null;

    return items.map(async (item) => {
      const { text, url } = transform 
        ? transform(item)
        : { text: item, url: urlGenerator(item) };

      return (
        <Link
          className="flex flex-row items-center gap-1"
          key={item}
          href={await url}
        >
          {text} {icon}
        </Link>
      );
    });
  };
}

// Example usage:
const bindingDataFormat = createLinkBinding(
  () => "https://clickhouse.com/docs/en/chdb/data-formats",
);

const bindingTableLink = createLinkBinding(
  async (item) => {
    const [database, table] = item.split('.');
    return database.startsWith('_table_function')
      ? `https://clickhouse.com/docs/en/sql-reference/table-functions/${table}`
      : await getScopedLink(`/database/${database}/${table}`);
  },
  <MoveRightIcon className="size-3" />
);

This approach:

• Eliminates repeated null checks and Link boilerplate
• Keeps domain-specific logic explicit and configurable
• Makes it easy to customize URLs and icons per binding type
• Reduces overall code size while improving maintainability

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 77.16%. Comparing base (f36e38e) to head (33bb5df).

✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #433   +/-   ##
=======================================
  Coverage   77.16%   77.16%           
=======================================
  Files           5        5           
  Lines         162      162           
  Branches       60       59    -1     
=======================================
  Hits          125      125           
- Misses         34       37    +3     
+ Partials        3        0    -3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.