Merge branch 'main' of github.com:duyet/clickhouse-monitoring

components/data-table/data-table.cy.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { mount } from 'cypress/react18'
 
 import type { QueryConfig } from '@/lib/types/query-config'
 
@@ -21,7 +20,7 @@ describe('<DataTable />', () => {
       { col1: 'val3', col2: 'val3' },
     ]
 
-    mount(<DataTable title="Test Table" config={config} data={data} />)
+    cy.mount(<DataTable title="Test Table" config={config} data={data} />)
 
     cy.get('h1').contains('Test Table')
     cy.get('table').should('have.length', 1)
@@ -40,7 +39,7 @@ describe('<DataTable />', () => {
       data.push({ col1: `val${i}`, col2: `val${i}` })
     }
 
-    mount(
+    cy.mount(
       <DataTable
         title="Test Table"
         config={config}
@@ -73,21 +72,21 @@ describe('<DataTable />', () => {
   it('render paging, click on next page', () => {
     let data = []
 
-    for (let i = 0; i < 100; i++) {
+    for (let i = 0; i < 10; i++) {
       data.push({ col1: `val${i}`, col2: `val${i}` })
     }
 
-    mount(
+    cy.mount(
       <DataTable
         title="Test Table"
         config={config}
         data={data}
-        defaultPageSize={50}
+        defaultPageSize={2}
       />
     )
 
     // Page 1 of 2
-    cy.get('div').contains('Page 1 of 2')
+    cy.get('div').contains('Page 1 of 5')
 
     // "Go to next page" button should be enabled
     cy.get('button')
@@ -96,61 +95,104 @@ describe('<DataTable />', () => {
       .click()
 
     // Page 2 of 2
-    cy.get('div').contains('Page 2 of 2')
+    cy.get('div').contains('Page 2 of 5')
   })
 
-  it('should adjust column visibility', () => {
+  it('should adjust column visibility, hide col1', () => {
     // Define some mock data
     const data = [
       { col1: 'val1', col2: 'val1' },
       { col1: 'val2', col2: 'val2' },
       { col1: 'val3', col2: 'val3' },
     ]
 
-    mount(<DataTable title="Test Table" config={config} data={data} />)
+    cy.mount(<DataTable title="Test Table" config={config} data={data} />)
+
+    const $optionBtn = cy.get('button[aria-label="Column Options"]')
 
     // Before click: table should contains 2 columns
     cy.get('thead tr th').should('have.length', 2)
 
     // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2
     // Click on col1 to toggle hide it
-    cy.get('button[aria-label="Column Options"]').click()
-    cy.get('[role="checkbox"]').should('have.length', 2)
-    cy.get('[role="checkbox"]').contains('col1').click()
+    $optionBtn.click().then(() => {
+      cy.get('[role="checkbox"]').should('have.length', 2)
+      cy.get('[role="checkbox"]').contains('col1').click()
 
-    // After click: table should contains only col2
-    cy.get('thead tr th').should('have.length', 1)
+      // After click: table should contains only col2
+      cy.get('thead tr th').should('have.length', 1)
+    })
+  })
+
+  it('should adjust column visibility, hide col2', () => {
+    // Define some mock data
+    const data = [
+      { col1: 'val1', col2: 'val1' },
+      { col1: 'val2', col2: 'val2' },
+      { col1: 'val3', col2: 'val3' },
+    ]
+
+    cy.mount(<DataTable title="Test Table" config={config} data={data} />)
+
+    cy.get('button[aria-label="Column Options"]').as('btn')
+
+    // Before click: table should contains 2 columns
+    cy.get('thead tr th').should('have.length', 2)
 
     // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2
     // Click on col2 to toggle hide it
-    cy.get('button[aria-label="Column Options"]').click()
+    cy.get('@btn').click()
     cy.get('[role="checkbox"]').should('have.length', 2)
     cy.get('[role="checkbox"]').contains('col2').click()
 
     // After click: table should contains no column
-    cy.get('thead tr th').should('have.length', 0)
+    cy.get('thead tr th').should('have.length', 1)
+  })
 
-    // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2
-    // Click on col2 to toggle show it again
-    cy.get('button[aria-label="Column Options"]').click()
-    cy.get('[role="checkbox"]').should('have.length', 2)
-    cy.get('[role="checkbox"]').contains('col1').click()
-    cy.get('button[aria-label="Column Options"]').click()
-    cy.get('[role="checkbox"]').contains('col2').click()
+  it('should adjust column visibility, hide both col1 and col2', () => {
+    // Define some mock data
+    const data = [
+      { col1: 'val1', col2: 'val1' },
+      { col1: 'val2', col2: 'val2' },
+      { col1: 'val3', col2: 'val3' },
+    ]
+
+    cy.mount(<DataTable title="Test Table" config={config} data={data} />)
+
+    cy.get('button[aria-label="Column Options"]').as('btn')
 
+    // Before click: table should contains 2 columns
     cy.get('thead tr th').should('have.length', 2)
+
+    // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2
+    // Click on col1 to toggle hide it
+    cy.get('@btn').click()
+    // Uncheck col1
+    cy.get('[role="checkbox"][aria-checked="true"][aria-label="col1"]').click()
+
+    // After click: table should contains no column
+    cy.get('thead tr th').should('have.length', 1)
+
+    // Uncheck col2
+    cy.get('@btn').click({ force: true })
+    cy.get('[role="checkbox"][aria-checked="true"][aria-label="col2"]')
+      .should('be.visible')
+      .click({ force: true })
+
+    // After click: table should contains no column
+    cy.get('thead tr th').should('have.length', 0)
   })
 
   it('should have "Show Code" button when showSQL={true}', () => {
-    mount(
+    cy.mount(
       <DataTable title="Test Table" config={config} data={[]} showSQL={true} />
     )
 
     cy.get('button[aria-label="Show SQL"]').should('exist')
   })
 
   it('should not have "Show Code" button when showSQL={false}', () => {
-    mount(
+    cy.mount(
       <DataTable title="Test Table" config={config} data={[]} showSQL={false} />
     )
 
@@ -165,7 +207,7 @@ describe('<DataTable />', () => {
       { col1: 'val3', col2: 'val3' },
     ]
 
-    mount(
+    cy.mount(
       <DataTable
         title="Test Table"
         config={config}

components/data-table/pagination.tsx

@@ -36,8 +36,7 @@ export function DataTablePagination<TData>({
       <div
         className={cn(
           'flex items-center space-x-6 lg:space-x-8',
-
-          table.getCanPreviousPage() && table.getCanNextPage()
+          table.getCanPreviousPage() || table.getCanNextPage()
             ? 'flex'
             : 'hidden'
         )}

cypress/support/component-index.html

@@ -8,7 +8,7 @@
     <!-- Used by Next.js to inject CSS. -->
     <div id="__next_css__DO_NOT_USE__"></div>
   </head>
-  <body>
+  <body class="h-full">
     <div data-cy-root></div>
   </body>
-</html>
+</html>

cypress/support/component.ts

@@ -15,6 +15,7 @@
 
 // Import commands.js using ES2015 syntax:
 import './commands'
+import '../../app/globals.css'
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

yarn.lock

@@ -1286,16 +1286,16 @@
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
 "@types/node@*", "@types/node@^20":
-  version "20.9.3"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.3.tgz#e089e1634436f676ff299596c9531bd2b59fffc6"
-  integrity sha512-nk5wXLAXGBKfrhLB0cyHGbSqopS+nz0BUgZkUQqSHSSgdee0kssp1IAqlQOu333bW+gMNs2QREx7iynm19Abxw==
+  version "20.9.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.4.tgz#cc8f970e869c26834bdb7ed480b30ede622d74c7"
+  integrity sha512-wmyg8HUhcn6ACjsn8oKYjkN/zUzQeNtMy44weTJSM6p4MMzEOuKbA3OjJ267uPCOW7Xex9dyrNTful8XTQYoDA==
   dependencies:
     undici-types "~5.26.4"
 
 "@types/node@^18.17.5":
-  version "18.18.9"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.9.tgz#5527ea1832db3bba8eb8023ce8497b7d3f299592"
-  integrity sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ==
+  version "18.18.12"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.12.tgz#0c40e52e5ff2569386b160f6f6bb019ff1361cb4"
+  integrity sha512-G7slVfkwOm7g8VqcEF1/5SXiMjP3Tbt+pXDU3r/qhlM2KkGm786DUD4xyMA2QzEElFrv/KZV9gjygv4LnkpbMQ==
   dependencies:
     undici-types "~5.26.4"
 
@@ -1305,9 +1305,9 @@
   integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==
 
 "@types/react-dom@^18":
-  version "18.2.16"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.16.tgz#028f44b08f8cc3401c37dde4c2a5e36ddf9cb5b0"
-  integrity sha512-766c37araZ9vxtYs25gvY2wNdFWsT2ZiUvOd0zMhTaoGj6B911N8CKQWgXXJoPMLF3J82thpRqQA7Rf3rBwyJw==
+  version "18.2.17"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.17.tgz#375c55fab4ae671bd98448dcfa153268d01d6f64"
+  integrity sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg==
   dependencies:
     "@types/react" "*"
 
@@ -1321,19 +1321,19 @@
     csstype "^3.0.2"
 
 "@types/scheduler@*":
-  version "0.16.7"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.7.tgz#d62f1bd54724c84089f51f9218393930ba4abcf4"
-  integrity sha512-8g25Nl3AuB1KulTlSUsUhUo/oBgBU6XIXQ+XURpeioEbEJvkO7qI4vDfREv3vJYHHzqXjcAHvoJy4pTtSQNZtA==
+  version "0.16.8"
+  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
+  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
 
 "@types/[email protected]":
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-8.1.1.tgz#b49c2c70150141a15e0fa7e79cf1f92a72934ce3"
   integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g==
 
 "@types/sizzle@^2.3.2":
-  version "2.3.6"
-  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.6.tgz#e39b7123dac4631001939bd4c2a26d46010f2275"
-  integrity sha512-m04Om5Gz6kbjUwAQ7XJJQ30OdEFsSmAVsvn4NYwcTRyMVpKKa1aPuESw1n2CxS5fYkOQv3nHgDKeNa8e76fUkw==
+  version "2.3.8"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.8.tgz#518609aefb797da19bf222feb199e8f653ff7627"
+  integrity sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg==
 
 "@types/yauzl@^2.9.1":
   version "2.10.3"
@@ -2025,9 +2025,9 @@ csstype@^3.0.2:
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
 
 cypress@^13.5.1:
-  version "13.5.1"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.5.1.tgz#8b19bf0b9f31ea43f78980b2479bd3f25197d5cc"
-  integrity sha512-yqLViT0D/lPI8Kkm7ciF/x/DCK/H/DnogdGyiTnQgX4OVR2aM30PtK+kvklTOD1u3TuItiD9wUQAF8EYWtyZug==
+  version "13.6.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.6.0.tgz#b98b7b837679012ed09c7ecee5565bf7b31d4982"
+  integrity sha512-quIsnFmtj4dBUEJYU4OH0H12bABJpSujvWexC24Ju1gTlKMJbeT6tTO0vh7WNfiBPPjoIXLN+OUqVtiKFs6SGw==
   dependencies:
     "@cypress/request" "^3.0.0"
     "@cypress/xvfb" "^1.2.4"