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

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

Author: NikolayS

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',
     },
   },
-});
+})

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>

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(

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>

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

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)

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

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'
     }

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'}

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 (