Merge branch 'fix-card-height-issue' into 'master'

fix(ui): update card container height correctly, improve cypress test scenario, fix console warnings See merge request postgres-ai/database-lab!829
ego · Nov 16, 2023 · dcb3568 · dcb3568
2 parents 72922c9 + 92c1496
commit dcb3568
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 59 deletions.
diff --git a/assets/database-lab-dark-mode.svg b/assets/database-lab-dark-mode.svg
diff --git a/assets/database-lab-light-mode.svg b/assets/database-lab-light-mode.svg
diff --git a/assets/dle-simple.svg b/assets/dle-simple.svg
diff --git a/assets/dle.svg b/assets/dle.svg
diff --git a/assets/dle_button.svg b/assets/dle_button.svg
diff --git a/ui/packages/ce/cypress/e2e/tabs.cy.js b/ui/packages/ce/cypress/e2e/tabs.cy.js
@@ -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')
  },
  })
  })

diff --git a/ui/packages/ce/src/App/Menu/Header/icons/index.tsx b/ui/packages/ce/src/App/Menu/Header/icons/index.tsx
@@ -83,7 +83,7 @@ export const StarsIcon = ({ className }: { className?: string }) => (
  xmlns="https://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"

diff --git a/ui/packages/ce/src/App/Menu/icons/index.tsx b/ui/packages/ce/src/App/Menu/icons/index.tsx
@@ -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"
  />

diff --git a/ui/packages/platform/public/images/dblab.svg b/ui/packages/platform/public/images/dblab.svg
diff --git a/ui/packages/platform/src/components/CheckupAgentForm/CheckupAgentFormWrapper.tsx b/ui/packages/platform/src/components/CheckupAgentForm/CheckupAgentFormWrapper.tsx
@@ -38,6 +38,8 @@ export const CheckupAgentFormWrapper = (props: CheckupAgentFormProps) => {
  },
  heading: {
  ...theme.typography.h3,
+ } as {
+ [key: string]: string
  },
  fieldValue: {
  display: 'inline-block',

diff --git a/ui/packages/platform/src/components/CreateClusterCards/CreateClusterCards.tsx b/ui/packages/platform/src/components/CreateClusterCards/CreateClusterCards.tsx
@@ -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

diff --git a/ui/packages/platform/src/components/CreateDbLabCards/CreateDbLabCards.tsx b/ui/packages/platform/src/components/CreateDbLabCards/CreateDbLabCards.tsx
@@ -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

diff --git a/ui/packages/platform/src/components/DbLabInstances/DbLabInstances.tsx b/ui/packages/platform/src/components/DbLabInstances/DbLabInstances.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>
  )
 

diff --git a/ui/packages/platform/src/components/PostgresClusters/PostgresClusters.tsx b/ui/packages/platform/src/components/PostgresClusters/PostgresClusters.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>
  )
 

diff --git a/ui/packages/shared/icons/Renewable/index.tsx b/ui/packages/shared/icons/Renewable/index.tsx
@@ -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"

diff --git a/ui/packages/shared/pages/Instance/Info/Disks/Disk/ActionsMenu/index.tsx b/ui/packages/shared/pages/Instance/Info/Disks/Disk/ActionsMenu/index.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>
  </>