fix(ui): update card container height correctly, improve cypress test scenario, fix console warnings

Author: Adrinlol

assets/database-lab-dark-mode.svg

@@ -1,21 +1,44 @@
 /* eslint-disable no-undef */
 
-describe('Instance page should have "Configuration" tab with content', () => {
-  it('should have token in local storage', () => {
+describe('Configuration tab', () => {
+  before(() => {
+    // Set the token in local storage
     cy.window().then((win) => {
       if (!win.localStorage.getItem('token')) {
         win.localStorage.setItem('token', 'demo-token')
       }
     })
   })
-  it('should have "Configuration" tab with content', () => {
+
+  it('should have token in local storage', () => {
+    // Check if the token exists in local storage
+    cy.window()
+      .should('have.property', 'localStorage')
+      .and('have.property', 'token', 'demo-token')
+  })
+
+  it('should have "Configuration" tab with form inputs', () => {
+    // Visit the page
     cy.visit('/', {
       retryOnStatusCodeFailure: true,
       onLoad: () => {
-        cy.get('.MuiTabs-flexContainer').contains('Configuration')
-        cy.get('.MuiBox-root')
-          .contains('p')
-          .should('have.length.greaterThan', 0)
+        // Click on the "Configuration" tab
+        cy.get('.MuiTabs-flexContainer').contains('Configuration').click({
+          force: true,
+        })
+
+        // Check for elements on the "Configuration" tab
+        cy.get('input[type="text"]').should('exist')
+        cy.get('input[type="checkbox"]').should('exist')
+        cy.get('button[type="button"]').should('exist')
+
+        // Click on the "Cancel" button within the "Configuration" tab
+        cy.get('button').contains('Cancel').click({
+          force: true,
+        })
+
+        // Check if the URL has changed to "/instance"
+        cy.url().should('eq', Cypress.config().baseUrl + '/instance')
       },
     })
   })

assets/database-lab-light-mode.svg

@@ -83,7 +83,7 @@ export const StarsIcon = ({ className }: { className?: string }) => (
     xmlns="http://www.w3.org/2000/svg"
     className={className}
   >
-    <g clip-path="url(#clip0_3156:7537)">
+    <g clipPath="url(#clip0_3156:7537)">
       <path
         d="M15.5319 4.94739C14.5807 4.94739 13.6874 5.31433 13.0162 5.98071C12.3453 6.64673 11.976 7.53381 11.976 8.47852C11.976 8.73743 11.766 8.94727 11.5072 8.94727C11.2483 8.94727 11.0385 8.73743 11.0385 8.47852C11.0385 7.53381 10.6689 6.64673 9.99805 5.98071C9.32691 5.31433 8.43359 4.94739 7.48242 4.94739C7.22351 4.94739 7.01367 4.73755 7.01367 4.47864C7.01367 4.21973 7.22351 4.00989 7.48242 4.00989C9.44312 4.00989 11.0385 2.42115 11.0385 0.468388C11.0385 0.209476 11.2483 -0.000362396 11.5072 -0.000362396C11.766 -0.000362396 11.976 0.209476 11.976 0.468388C11.976 2.42115 13.5712 4.00989 15.5319 4.00989C15.7908 4.00989 16.0006 4.21973 16.0006 4.47864C16.0006 4.73755 15.7908 4.94739 15.5319 4.94739ZM11.5072 2.45923C11.0719 3.32996 10.3604 4.04053 9.48779 4.47608C9.91565 4.68823 10.3107 4.96997 10.6586 5.31543C11.0081 5.66235 11.2928 6.05664 11.5071 6.48389C11.7214 6.05664 12.0062 5.66235 12.3556 5.31543C12.7035 4.96997 13.0986 4.68823 13.5264 4.47608C12.6539 4.04053 11.9424 3.32996 11.5072 2.45923Z"
         fill="currentColor"

assets/dle-simple.svg

@@ -125,7 +125,7 @@ export const Github = () => (
   >
     <path
       fillRule="evenodd"
-      clip-rule="evenodd"
+      clipRule="evenodd"
       d="M12.649 0C5.664 0 0 5.664 0 12.65c0 5.59 3.624 10.33 8.651 12.004.633.116.864-.275.864-.61 0-.3-.011-1.096-.018-2.151-3.518.764-4.26-1.696-4.26-1.696-.576-1.461-1.405-1.85-1.405-1.85-1.149-.785.087-.77.087-.77 1.27.09 1.937 1.304 1.937 1.304 1.128 1.933 2.961 1.375 3.682 1.052.115-.818.441-1.376.803-1.692-2.809-.319-5.762-1.405-5.762-6.252 0-1.38.493-2.51 1.302-3.394-.13-.32-.565-1.606.123-3.348 0 0 1.063-.34 3.48 1.297 1.008-.28 2.09-.421 3.166-.426 1.074.005 2.157.145 3.167.426 2.415-1.637 3.475-1.297 3.475-1.297.69 1.742.257 3.028.126 3.348.811.884 1.301 2.013 1.301 3.394 0 4.86-2.958 5.93-5.776 6.242.454.39.859 1.163.859 2.343 0 1.69-.016 3.055-.016 3.47 0 .338.228.732.87.609 5.023-1.677 8.644-6.415 8.644-12.002C25.3 5.664 19.636 0 12.649 0Z"
       fill="#fff"
     />

assets/dle.svg

@@ -38,6 +38,8 @@ export const CheckupAgentFormWrapper = (props: CheckupAgentFormProps) => {
       },
       heading: {
         ...theme.typography.h3,
+      } as {
+        [key: string]: string
       },
       fieldValue: {
         display: 'inline-block',

assets/dle_button.svg

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { StubContainer } from '@postgres.ai/shared/components/StubContainer'
 import { icons } from '@postgres.ai/shared/styles/icons'
 import { ConsoleButtonWrapper } from 'components/ConsoleButton/ConsoleButtonWrapper'
@@ -9,9 +10,11 @@ import { messages } from '../../assets/messages'
 import { useStyles } from 'components/CreateDbLabCards/CreateDbLabCards'
 
 export const CreateClusterCards = ({
+  isModal,
   props,
   dblabPermitted,
 }: {
+  isModal?: boolean
   props: DashboardProps
   dblabPermitted: boolean | undefined
 }) => {
@@ -92,7 +95,12 @@ export const CreateClusterCards = ({
   ]
 
   return (
-    <StubContainer className={classes.stubContainerProjects}>
+    <StubContainer
+      className={classNames(
+        !isModal && classes.zeroMaxHeight,
+        classes.stubContainerProjects,
+      )}
+    >
       {productData.map((product) => (
         <ProductCardWrapper
           inline

ui/packages/ce/cypress/e2e/tabs.cy.js

@@ -1,3 +1,4 @@
+import classNames from 'classnames'
 import { makeStyles } from '@material-ui/core'
 import { StubContainer } from '@postgres.ai/shared/components/StubContainer'
 import { icons } from '@postgres.ai/shared/styles/icons'
@@ -9,6 +10,9 @@ import Urls from '../../utils/urls'
 import { messages } from '../../assets/messages'
 
 export const useStyles = makeStyles((theme) => ({
+  zeroMaxHeight: {
+    maxHeight: 0,
+  },
   stubContainerProjects: {
     marginRight: '-20px',
     padding: '0 40px',
@@ -75,9 +79,11 @@ export const useStyles = makeStyles((theme) => ({
 }))
 
 export const CreatedDbLabCards = ({
+  isModal,
   props,
   dblabPermitted,
 }: {
+  isModal?: boolean
   props: DashboardProps
   dblabPermitted: boolean | undefined
 }) => {
@@ -154,7 +160,12 @@ export const CreatedDbLabCards = ({
   ]
 
   return (
-    <StubContainer className={classes.stubContainerProjects}>
+    <StubContainer
+      className={classNames(
+        !isModal && classes.zeroMaxHeight,
+        classes.stubContainerProjects,
+      )}
+    >
       {productData.map((product) => (
         <ProductCardWrapper
           inline

ui/packages/ce/src/App/Menu/Header/icons/index.tsx

@@ -420,7 +420,7 @@ class DbLabInstances extends Component<
         aria-labelledby="simple-modal-title"
         aria-describedby="simple-modal-description"
       >
-        <CreatedDbLabCards props={this.props} dblabPermitted={addPermitted} />
+        <CreatedDbLabCards isModal props={this.props} dblabPermitted={addPermitted} />
       </Modal>
     )
 

ui/packages/ce/src/App/Menu/icons/index.tsx

@@ -422,7 +422,7 @@ class PostgresClusters extends Component<
         aria-labelledby="simple-modal-title"
         aria-describedby="simple-modal-description"
       >
-        <CreateClusterCards props={this.props} dblabPermitted={addPermitted} />
+        <CreateClusterCards isModal props={this.props} dblabPermitted={addPermitted} />
       </Modal>
     )
 

ui/packages/platform/public/images/dblab.svg

@@ -25,42 +25,42 @@ export const RenewableIcon = React.forwardRef<SVGSVGElement, Props>(
       >
         <path
           fillRule="evenodd"
-          clip-rule="evenodd"
+          clipRule="evenodd"
           // eslint-disable-next-line max-len
           d="M6.14337 0L8.19809 2.9755L4.59387 3.26718L5.16139 2.07055C4.22847 2.10806 3.3161 2.48386 2.66614 3.18795L2.20594 2.76312C3.05679 1.84141 4.26977 1.40592 5.45883 1.44339L6.14337 0Z"
           fill="currentColor"
         />
         <path
           fillRule="evenodd"
-          clip-rule="evenodd"
+          clipRule="evenodd"
           // eslint-disable-next-line max-len
           d="M9.7343 9.13905L6.12728 9.39371L7.71025 6.14261L8.45158 7.24009C8.89401 6.4179 9.03479 5.44126 8.75942 4.52346L9.35931 4.34347C9.71979 5.54495 9.47743 6.81074 8.8401 7.81527L9.7343 9.13905Z"
           fill="currentColor"
         />
         <path
           fillRule="evenodd"
-          clip-rule="evenodd"
+          clipRule="evenodd"
           // eslint-disable-next-line max-len
           d="M0 7.57495L1.61898 4.34163L3.60962 7.36037L2.28757 7.43896C2.76953 8.23862 3.53811 8.85742 4.46813 9.08819L4.3173 9.69607C3.09983 9.39397 2.13422 8.54041 1.59468 7.48015L0 7.57495Z"
           fill="currentColor"
         />
         <path
           fillRule="evenodd"
-          clip-rule="evenodd"
+          clipRule="evenodd"
           // eslint-disable-next-line max-len
           d="M6.26612 2.51078C5.07868 2.17637 3.73747 2.48899 2.89616 3.40036L1.97575 2.55072C3.17071 1.25624 5.01514 0.857134 6.60567 1.30506L6.26612 2.51078Z"
           fill="currentColor"
         />
         <path
           fillRule="evenodd"
-          clip-rule="evenodd"
+          clipRule="evenodd"
           // eslint-disable-next-line max-len
           d="M7.33938 8.11969C8.34588 7.28131 8.83847 5.87691 8.45939 4.61345L9.65917 4.25348C10.1969 6.04581 9.49312 7.95595 8.14107 9.08215L7.33938 8.11969Z"
           fill="currentColor"
         />
         <path
           fillRule="evenodd"
-          clip-rule="evenodd"
+          clipRule="evenodd"
           // eslint-disable-next-line max-len
           d="M2.07072 5.82736C2.20416 7.20026 3.19328 8.44922 4.54348 8.78425L4.24181 10C2.32911 9.5254 1.00387 7.79934 0.823976 5.94853L2.07072 5.82736Z"
           fill="currentColor"

ui/packages/platform/src/components/CheckupAgentForm/CheckupAgentFormWrapper.tsx

@@ -75,7 +75,7 @@ export const ActionsMenu = (props: Props) => {
           Copy name
         </MenuItem>
         {props.isActive && (
-          <>
+          <div>
             <MenuItem
               onClick={() => {
                 closeMenu()
@@ -92,7 +92,7 @@ export const ActionsMenu = (props: Props) => {
             >
               List snapshots
             </MenuItem>
-          </>
+          </div>
         )}
       </Menu>
     </>