feat: refactor typing, add ColumnFormat.HoverCard #275

duyet · 2024-06-28T10:32:20Z

Summary by Sourcery

This pull request introduces a new 'HoverCard' column format for data tables, refactors the typing and structure of column formats, and enhances the loading and breadcrumb components for better user experience.

New Features:
- Introduced a new column format 'HoverCard' for data tables, allowing hoverable content in table cells.
Enhancements:
- Refactored the typing and structure of column formats by moving the ColumnFormat and ColumnFormatOptions definitions to a new file 'column-format.ts'.
- Updated the loading component to use a TableSkeleton component for a more consistent loading state UI.
- Improved the breadcrumb component to handle undefined or loading states more gracefully by displaying 'loading ...' instead of '0 tables'.

vercel · 2024-06-28T10:32:24Z

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	Jun 28, 2024 10:34am

sourcery-ai · 2024-06-28T10:32:27Z

Reviewer's Guide by Sourcery

This pull request refactors the typing system and introduces a new ColumnFormat.HoverCard. The changes include moving the ColumnFormat and ColumnFormatOptions definitions to a new file, '@/lib/types/column-format', and updating all relevant imports. Additionally, a new HoverCardFormat component is added to handle the new column format, and several components are updated to use this new format. The pull request also includes minor refactoring and improvements in various components, such as updating default values and replacing loading messages with skeleton components.

File-Level Changes

Files	Changes
`app/[query]/merges/merge-performance.ts` `app/[query]/merges/merges.ts` `app/[query]/merges/mutations.ts` `app/[query]/more/asynchronous-metrics.ts` `app/[query]/more/backups.ts` `app/[query]/more/count-across-replicas.ts` `app/[query]/more/mergetree-settings.ts` `app/[query]/more/metrics.ts` `app/[query]/more/settings.ts` `app/[query]/more/top-usage-columns.ts` `app/[query]/more/top-usage-tables.ts` `app/[query]/more/zookeeper.ts` `app/[query]/queries/common-errors.ts` `app/[query]/queries/expensive-queries-by-memory.ts` `app/[query]/queries/expensive-queries.ts` `app/[query]/queries/failed-queries.ts` `app/[query]/queries/history-queries.ts` `app/[query]/queries/running-queries.ts` `app/[query]/tables/distributed-ddl-queue.ts` `app/[query]/tables/readonly-tables.ts` `app/[query]/tables/replicas.ts` `app/[query]/tables/replication-queue.ts` `app/[query]/tables/table-overview.ts` `app/clusters/[cluster]/replicas-status/config.ts` `app/clusters/config.ts` `app/disks/config.ts` `app/replica/[replica]/tables/config.ts`	Replaced import of ColumnFormat from '@/components/data-table/column-defs' with '@/lib/types/column-format'.

Tips

Trigger a new Sourcery review by commenting @sourcery-ai review on the pull request.
You can change your review settings at any time by accessing your dashboard:
- Enable or disable the Sourcery-generated pull request summary or reviewer's guide;
- Change the review language;
You can always contact us if you have any questions or feedback.

sourcery-ai

Hey @duyet - I've reviewed your changes and they look great!

Here's what I looked at during the review

🟡 General issues: 6 issues found
🟢 Security: all looks good
🟢 Testing: all looks good
🟢 Complexity: all looks good
🟢 Documentation: all looks good

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

_{Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.}

sourcery-ai · 2024-06-28T10:33:11Z

app/database/[database]/breadcrumb.tsx

@@ -31,7 +31,7 @@ interface DatabaseCount {
 export async function DatabaseBreadcrumb({ database }: Props) {
  // Default
  let databases: { name: string; count: number }[] = [
-    { name: database, count: 0 },
+    { name: database, count: -1 },


issue: Negative count value might be confusing

Using -1 as a placeholder for loading state might be confusing. Consider using a more explicit value or a separate flag to indicate loading state.

sourcery-ai · 2024-06-28T10:33:11Z

app/database/[database]/breadcrumb.tsx

@@ -114,3 +114,10 @@ function Internal({
    </Breadcrumb>
  )
 }
+
+function Count({ count }: { count?: number }) {


suggestion (performance): Consider memoizing the Count component

To avoid unnecessary re-renders, consider memoizing the Count component using React.memo.

Suggested change

function Count({ count }: { count?: number }) {

import React from 'react';

const Count = React.memo(({ count }: { count?: number }) => {

if (count == undefined || count == -1) return 'loading ...';

if (count == 0) return '0 table';

});

sourcery-ai · 2024-06-28T10:33:11Z

app/database/[database]/[table]/loading.tsx

-      Loading table detail ...
-    </div>
-  )
+  return <TableSkeleton className="mb-4" />


suggestion: Consider adding a fallback for TableSkeleton

In case TableSkeleton fails to load or render, consider adding a fallback UI to improve user experience.

Suggested change

return <TableSkeleton className="mb-4" />

return (

<React.Suspense fallback={<div>Loading table detail ...</div>}>

<TableSkeleton className="mb-4" />

</React.Suspense>

)

sourcery-ai · 2024-06-28T10:33:11Z

lib/types/query-config.ts

@@ -28,7 +28,7 @@ export interface QueryConfig {
   * ```
   */
  columnFormats?: {
-    [key: string]: ColumnFormat | [ColumnFormat, ColumnFormatOptions]
+    [key: string]: ColumnFormat | ColumnFormatWithArgs


suggestion: Consider adding a type guard for ColumnFormatWithArgs

To ensure type safety, consider adding a type guard function to differentiate between ColumnFormat and ColumnFormatWithArgs.

sourcery-ai · 2024-06-28T10:33:12Z

components/data-table/cells/hover-card-format.tsx

+export function HoverCardFormat({ row, value, options }: HoverCardProps) {
+  let { content } = options || {}
+
+  if (!content) {


suggestion: Default content assignment

Consider using a more explicit default value for content to avoid potential issues with falsy values.

Suggested change

if (!content) {

if (content === undefined || content === null) {

sourcery-ai · 2024-06-28T10:33:12Z

components/ui/hover-card.tsx

+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>


suggestion: Consider using a more descriptive type alias

Using a type alias for React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> can improve readability and maintainability.

Suggested change

React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>

type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;

const HoverCardContent = React.forwardRef<

React.ElementRef<typeof HoverCardPrimitive.Content>,

HoverCardContentProps

>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (

<HoverCardPrimitive.Content

sourcery-ai · 2024-06-28T10:33:12Z

app/database/[database]/breadcrumb.tsx

@@ -114,3 +114,10 @@ function Internal({
    </Breadcrumb>
  )
 }
+
+function Count({ count }: { count?: number }) {
+  if (count == undefined || count == -1) return 'loading ...'


suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

if (count == undefined || count == -1) return 'loading ...'

if (count == undefined || count == -1) {

Explanation
It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

sourcery-ai · 2024-06-28T10:33:12Z

app/database/[database]/breadcrumb.tsx

+
+function Count({ count }: { count?: number }) {
+  if (count == undefined || count == -1) return 'loading ...'
+  if (count == 0) return '0 table'


suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

if (count == 0) return '0 table'

if (count == 0) {

Explanation
It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

sourcery-ai · 2024-06-28T10:33:12Z

app/database/[database]/breadcrumb.tsx

+function Count({ count }: { count?: number }) {
+  if (count == undefined || count == -1) return 'loading ...'
+  if (count == 0) return '0 table'
+  if (count == 1) return '1 table'


suggestion (code-quality): Use block braces for ifs, whiles, etc. (use-braces)

Suggested change

if (count == 1) return '1 table'

if (count == 1) {

Explanation
It is recommended to always use braces and create explicit statement blocks.

Using the allowed syntax to just write a single statement can lead to very confusing
situations, especially where subsequently a developer might add another statement
while forgetting to add the braces (meaning that this wouldn't be included in the condition).

feat: refactor typing, add ColumnFormat.HoverCard

cecbc16

duyet enabled auto-merge June 28, 2024 10:32

sourcery-ai bot reviewed Jun 28, 2024

View reviewed changes

vercel bot deployed to Preview June 28, 2024 10:34 View deployment

duyet merged commit e587f92 into main Jun 28, 2024
15 checks passed

duyet deleted the chore/ui branch June 28, 2024 10:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: refactor typing, add ColumnFormat.HoverCard #275

feat: refactor typing, add ColumnFormat.HoverCard #275

duyet commented Jun 28, 2024 •

edited by sourcery-ai bot

Loading

vercel bot commented Jun 28, 2024 •

edited

Loading

sourcery-ai bot commented Jun 28, 2024 •

edited

Loading

sourcery-ai bot left a comment

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

sourcery-ai bot Jun 28, 2024

-function Count({ count }: { count?: number }) {
+import React from 'react';
+const Count = React.memo(({ count }: { count?: number }) => {
+  if (count == undefined || count == -1) return 'loading ...';
+  if (count == 0) return '0 table';
+});

-  return <TableSkeleton className="mb-4" />
+return (
+  <React.Suspense fallback={<div>Loading table detail ...</div>}>
+    <TableSkeleton className="mb-4" />
+  </React.Suspense>
+)

	if (!content) {
	if (content === undefined \|\| content === null) {

-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  HoverCardContentProps
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content

	if (count == undefined \|\| count == -1) return 'loading ...'
	if (count == undefined \|\| count == -1) {

feat: refactor typing, add ColumnFormat.HoverCard #275

feat: refactor typing, add ColumnFormat.HoverCard #275

Conversation

duyet commented Jun 28, 2024 • edited by sourcery-ai bot Loading

Summary by Sourcery

vercel bot commented Jun 28, 2024 • edited Loading

sourcery-ai bot commented Jun 28, 2024 • edited Loading

Reviewer's Guide by Sourcery

File-Level Changes

sourcery-ai bot left a comment

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

sourcery-ai bot Jun 28, 2024

Choose a reason for hiding this comment

duyet commented Jun 28, 2024 •

edited by sourcery-ai bot

Loading

vercel bot commented Jun 28, 2024 •

edited

Loading

sourcery-ai bot commented Jun 28, 2024 •

edited

Loading