Merge branch 'correct-disable-state-for-dle-install' into 'master'

NikolayS · NikolayS · commit 76a6d29f43c2 · 2023-08-11T20:35:22.000Z
fix(ui): correct disabled call for install DLE button, conditionally call the snapshots API, increase cypress timeout duration, improve types

See merge request postgres-ai/database-lab!803
diff --git a/ui/packages/ce/cypress.config.ts b/ui/packages/ce/cypress.config.ts
@@ -1,6 +1,8 @@
-import { defineConfig } from "cypress";
+import { defineConfig } from 'cypress'
 
 export default defineConfig({
+  pageLoadTimeout: 10000,
+  defaultCommandTimeout: 10000,
   e2e: {
     testIsolation: false,
     supportFile: false,
@@ -11,8 +13,8 @@ export default defineConfig({
 
   component: {
     devServer: {
-      framework: "create-react-app",
-      bundler: "webpack",
+      framework: 'create-react-app',
+      bundler: 'webpack',
     },
   },
-});
+})
diff --git a/ui/packages/platform/src/components/DbLabInstanceInstallForm/DbLabInstanceInstallFormSidebar.tsx b/ui/packages/platform/src/components/DbLabInstanceInstallForm/DbLabInstanceInstallFormSidebar.tsx
@@ -99,7 +99,7 @@ export const DbLabInstanceFormInstallSidebar = ({
           variant="contained"
           color="primary"
           onClick={handleCreate}
-          disabled={!state.name || !state.verificationToken || !disabled}
+          disabled={!state.name || !state.verificationToken || disabled}
         >
           Install DLE
         </Button>
diff --git a/ui/packages/shared/components/ResetCloneModal/index.tsx b/ui/packages/shared/components/ResetCloneModal/index.tsx
@@ -18,15 +18,14 @@ import { ImportantText } from '@postgres.ai/shared/components/ImportantText'
 import { Spinner } from '@postgres.ai/shared/components/Spinner'
 import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls'
 import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot'
-import { InstanceState } from '@postgres.ai/shared/types/api/entities/instanceState'
 
 type Props = {
   isOpen: boolean
   onClose: () => void
   clone: Clone
   onResetClone: (snapshotId: string) => void
   snapshots: Snapshot[] | null
-  version: InstanceState['engine']['version']
+  version: string | null | undefined
 }
 
 const useStyles = makeStyles(
diff --git a/ui/packages/shared/pages/Clone/index.tsx b/ui/packages/shared/pages/Clone/index.tsx
@@ -398,7 +398,7 @@ export const Clone = observer((props: Props) => {
 
             <p className={classes.text}>
               <span className={classes.paramTitle}>Logical data size:</span>
-              {instance.state.dataSize
+              {instance.state?.dataSize
                 ? formatBytesIEC(instance.state.dataSize)
                 : '-'}
             </p>
@@ -625,7 +625,7 @@ export const Clone = observer((props: Props) => {
             clone={clone}
             snapshots={stores.main.snapshots.data}
             onResetClone={resetClone}
-            version={instance.state.engine.version}
+            version={instance.state?.engine.version}
           />
         </>
       </div>
diff --git a/ui/packages/shared/pages/CreateClone/index.tsx b/ui/packages/shared/pages/CreateClone/index.tsx
@@ -210,7 +210,7 @@ export const CreateClone = observer((props: Props) => {
               <p className={styles.param}>
                 <span>Data size:</span>
                 <strong>
-                  {stores.main.instance.state.dataSize
+                  {stores.main.instance.state?.dataSize
                     ? formatBytesIEC(stores.main.instance.state.dataSize)
                     : '-'}
                 </strong>
@@ -220,7 +220,7 @@ export const CreateClone = observer((props: Props) => {
                 <span>Expected cloning time:</span>
                 <strong>
                   {round(
-                    stores.main.instance.state.cloning.expectedCloningTime,
+                    stores.main.instance.state?.cloning.expectedCloningTime as number,
                     2,
                   )}{' '}
                   s
diff --git a/ui/packages/shared/pages/Instance/Clones/index.tsx b/ui/packages/shared/pages/Instance/Clones/index.tsx
@@ -63,15 +63,15 @@ export const Clones = observer(() => {
   const host = useHost()
 
   const { instance } = stores.main
-  if (!instance) return null
+  if (!instance || !instance.state) return null
 
   const isShortList = isMobile && isShortListForMobile
   const toggleListSize = () => setIsShortListForMobile(!isShortListForMobile)
 
   const goToCloneAddPage = () => history.push(host.routes.createClone())
 
   const showListSizeButton =
-    instance.state.cloning.clones?.length > SHORT_LIST_SIZE && isMobile
+    instance.state?.cloning.clones?.length > SHORT_LIST_SIZE && isMobile
 
   const isLoadingSnapshots = stores.main.snapshots.isLoading
   const hasSnapshots = Boolean(stores.main.snapshots.data?.length)
diff --git a/ui/packages/shared/pages/Instance/ClonesModal/index.tsx b/ui/packages/shared/pages/Instance/ClonesModal/index.tsx
@@ -36,7 +36,7 @@ export const ClonesModal = observer(() => {
 
   return (
     <Modal
-      title={`Clones (${instance.state.cloning.clones.length})`}
+      title={`Clones (${instance.state?.cloning.clones.length})`}
       isOpen={isOpenModal}
       onClose={closeModal}
       size="md"
@@ -58,7 +58,7 @@ export const ClonesModal = observer(() => {
     >
       <ClonesList
         isDisabled={false}
-        clones={instance.state.cloning.clones.filter((clone) => {
+        clones={instance.state?.cloning.clones.filter((clone) => {
           const isMatchedByPool = !pool || pool === clone.snapshot?.pool
           const isMatchedBySnapshot =
             !snapshotId || snapshotId === clone.snapshot?.id
diff --git a/ui/packages/shared/pages/Instance/InactiveInstance/index.tsx b/ui/packages/shared/pages/Instance/InactiveInstance/index.tsx
@@ -60,7 +60,7 @@ export const InactiveInstance = ({
 }) => {
   const classes = useStyles()
 
-  const getVersionDigits = (str: string | undefined) => {
+  const getVersionDigits = (str: string | undefined | null) => {
     if (!str) {
       return 'N/A'
     }
diff --git a/ui/packages/shared/pages/Instance/Info/Disks/index.tsx b/ui/packages/shared/pages/Instance/Info/Disks/index.tsx
@@ -22,7 +22,7 @@ export const Disks = observer(() => {
 
   return (
     <Section title="Disks">
-      {instance.state.pools?.map((pool) => {
+      {instance.state?.pools?.map((pool) => {
         return (
           <Disk
             key={pool.name}
@@ -38,11 +38,11 @@ export const Disks = observer(() => {
             totalDataSize={pool.fileSystem.size}
             usedDataSize={pool.fileSystem.used}
             freeDataSize={pool.fileSystem.free}
-            refreshingStartDate={instance.state.retrieving?.lastRefresh ?? null}
+            refreshingStartDate={instance.state?.retrieving?.lastRefresh ?? null}
           />
         )
       }) ??
-        (instance.state.fileSystem && (
+        (instance.state?.fileSystem && (
           <Disk
             status={'active'}
             name={'Main'}
diff --git a/ui/packages/shared/pages/Instance/Info/Retrieval/RefreshFailedAlert/index.tsx b/ui/packages/shared/pages/Instance/Info/Retrieval/RefreshFailedAlert/index.tsx
@@ -12,7 +12,7 @@ export const RefreshFailedAlert = observer(() => {
   const stores = useStores()
 
   const refreshFailed =
-    stores.main.instance?.state.retrieving?.alerts?.refreshFailed
+    stores.main.instance?.state?.retrieving?.alerts?.refreshFailed
   if (!refreshFailed) return null
 
   return (
diff --git a/ui/packages/shared/pages/Instance/Info/Retrieval/index.tsx b/ui/packages/shared/pages/Instance/Info/Retrieval/index.tsx
@@ -41,7 +41,7 @@ export const Retrieval = observer(() => {
   const { instance, instanceRetrieval } = stores.main
   if (!instance) return null
 
-  const { retrieving } = instance.state
+  const retrieving  = instance.state?.retrieving
   if (!retrieving) return null
 
   if (!instanceRetrieval) return null
diff --git a/ui/packages/shared/pages/Instance/Info/Retrieval/utils.ts b/ui/packages/shared/pages/Instance/Info/Retrieval/utils.ts
@@ -1,8 +1,4 @@
-import { InstanceState } from '@postgres.ai/shared/types/api/entities/instanceState'
-
-export const getTypeByStatus = (
-  status: Exclude<InstanceState['retrieving'], undefined>['status'],
-) => {
+export const getTypeByStatus = (status: string | undefined) => {
   if (status === 'finished') return 'ok'
   if (status === 'refreshing') return 'waiting'
   if (status === 'failed') return 'error'
diff --git a/ui/packages/shared/pages/Instance/Info/Status/index.tsx b/ui/packages/shared/pages/Instance/Info/Status/index.tsx
@@ -30,7 +30,7 @@ export const Status = observer(() => {
   const stores = useStores()
 
   const { instance } = stores.main
-  if (!instance) return null
+  if (!instance || !instance.state) return null
 
   const { code, message } = instance.state.status
   const { version, startedAt } = instance.state.engine
diff --git a/ui/packages/shared/pages/Instance/components/ClonesList/ConnectionModal/index.tsx b/ui/packages/shared/pages/Instance/components/ClonesList/ConnectionModal/index.tsx
@@ -76,7 +76,7 @@ export const ConnectionModal = observer((props: Props) => {
   const { instance } = stores.main
   if (!instance) return null
 
-  const clone = instance.state.cloning.clones.find(
+  const clone = instance.state?.cloning.clones.find(
     (clone) => clone.id === cloneId,
   )
   if (!clone) return null
diff --git a/ui/packages/shared/pages/Instance/components/ClonesList/MenuCell/index.tsx b/ui/packages/shared/pages/Instance/components/ClonesList/MenuCell/index.tsx
@@ -91,7 +91,7 @@ export const MenuCell = observer((props: Props) => {
         onResetClone={(snapshotId) =>
           stores.main.resetClone(clone.id, snapshotId)
         }
-        version={stores.main.instance.state.engine.version}
+        version={stores.main.instance.state?.engine.version}
       />
     </TableBodyCellMenu>
   )
diff --git a/ui/packages/shared/pages/Instance/components/ClonesList/index.tsx b/ui/packages/shared/pages/Instance/components/ClonesList/index.tsx
@@ -39,7 +39,7 @@ import { ConnectionModal } from './ConnectionModal'
 import styles from './styles.module.scss'
 
 type Props = {
-  clones: Clone[]
+  clones?: Clone[]
   isDisabled: boolean
   emptyStubText: string
 }
@@ -62,7 +62,7 @@ export const ClonesList = (props: Props) => {
     setIsOpenConnectionModal(false)
   }
 
-  if (!props.clones.length)
+  if (!props.clones?.length)
     return <p className={styles.emptyStub}>{props.emptyStubText}</p>
 
   return (
diff --git a/ui/packages/shared/pages/Instance/stores/Main.ts b/ui/packages/shared/pages/Instance/stores/Main.ts
@@ -89,27 +89,33 @@ export class MainStore {
   load = (instanceId: string) => {
     this.instance = null
     this.isReloadingInstance = true
-    this.loadInstance(instanceId, false)
+    this.loadInstance(instanceId, false).then(() => {
+      if (this.instance?.url) {
+        this.snapshots.load(instanceId)
+      }
+    })
     this.loadInstanceRetrieval(instanceId).then(() => {
       if (this.instanceRetrieval) {
         this.getConfig()
         this.getFullConfig()
       }
     })
-    this.snapshots.load(instanceId)
   }
 
   reload = (instanceId: string) => {
     this.instance = null
     this.isReloadingInstance = true
-    this.loadInstance(instanceId)
+    this.loadInstance(instanceId, false).then(() => {
+      if (this.instance?.url) {
+        this.snapshots.load(instanceId)
+      }
+    })
     this.loadInstanceRetrieval(instanceId).then(() => {
       if (this.instanceRetrieval) {
         this.getConfig()
         this.getFullConfig()
       }
     })
-    this.snapshots.load(instanceId)
   }
 
   reloadSnapshots = async () => {
@@ -269,7 +275,7 @@ export class MainStore {
 
     return {
       response,
-      error
+      error,
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -99,7 +99,7 @@ export const DbLabInstanceFormInstallSidebar = ({`
`99`	`99`	`variant="contained"`
`100`	`100`	`color="primary"`
`101`	`101`	`onClick={handleCreate}`
`102`		`- disabled={!state.name \|\| !state.verificationToken \|\| !disabled}`
	`102`	`+ disabled={!state.name \|\| !state.verificationToken \|\| disabled}`
`103`	`103`	`>`
`104`	`104`	`Install DLE`
`105`	`105`	`</Button>`
Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ export const InactiveInstance = ({`
`60`	`60`	`}) => {`
`61`	`61`	`const classes = useStyles()`
`62`	`62`
`63`		`- const getVersionDigits = (str: string \| undefined) => {`
	`63`	`+ const getVersionDigits = (str: string \| undefined \| null) => {`
`64`	`64`	`if (!str) {`
`65`	`65`	`return 'N/A'`
`66`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -76,7 +76,7 @@ export const ConnectionModal = observer((props: Props) => {`
`76`	`76`	`const { instance } = stores.main`
`77`	`77`	`if (!instance) return null`
`78`	`78`
`79`		`- const clone = instance.state.cloning.clones.find(`
	`79`	`+ const clone = instance.state?.cloning.clones.find(`
`80`	`80`	`(clone) => clone.id === cloneId,`
`81`	`81`	`)`
`82`	`82`	`if (!clone) return null`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,7 @@ export const MenuCell = observer((props: Props) => {`
`91`	`91`	`onResetClone={(snapshotId) =>`
`92`	`92`	`stores.main.resetClone(clone.id, snapshotId)`
`93`	`93`	`}`
`94`		`- version={stores.main.instance.state.engine.version}`
	`94`	`+ version={stores.main.instance.state?.engine.version}`
`95`	`95`	`/>`
`96`	`96`	`</TableBodyCellMenu>`
`97`	`97`	`)`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@ import { ConnectionModal } from './ConnectionModal'`
`39`	`39`	`import styles from './styles.module.scss'`
`40`	`40`
`41`	`41`	`type Props = {`
`42`		`- clones: Clone[]`
	`42`	`+ clones?: Clone[]`
`43`	`43`	`isDisabled: boolean`
`44`	`44`	`emptyStubText: string`
`45`	`45`	`}`
`@@ -62,7 +62,7 @@ export const ClonesList = (props: Props) => {`
`62`	`62`	`setIsOpenConnectionModal(false)`
`63`	`63`	`}`
`64`	`64`
`65`		`- if (!props.clones.length)`
	`65`	`+ if (!props.clones?.length)`
`66`	`66`	`return <p className={styles.emptyStub}>{props.emptyStubText}</p>`
`67`	`67`
`68`	`68`	`return (`