Merge branch 'dle-4-0-ui-adjustments' into 'dle-4-0'

UI: dle-4-0 release fixes

See merge request postgres-ai/database-lab!944

Author: agneum

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

@@ -4,7 +4,6 @@ Cypress.on('uncaught:exception', () => {
   return false
 })
 
-// Function to set up intercepts for the requests
 function setupIntercepts() {
   const exceptions = [
     '/healthz',
@@ -44,7 +43,6 @@ function setupIntercepts() {
     },
   })
 
-  // Intercept all fetch requests and return a 200
   cy.intercept('GET', '*', (req) => {
     if (
       req.resourceType === 'fetch' &&
@@ -61,7 +59,6 @@ function setupIntercepts() {
 }
 
 describe('Configuration tab', () => {
-  // It should intercept the requests
   beforeEach(() => {
     setupIntercepts()
   })
@@ -71,19 +68,10 @@ describe('Configuration tab', () => {
       retryOnStatusCodeFailure: true,
       onLoad: () => {
         cy.get('.MuiTabs-flexContainer')
-          .contains('Configuration', { timeout: 10000 })
+          .contains('Configuration')
           .should('be.visible')
           .click({ force: true })
       },
     })
   })
-
-  it('should have form inputs in the "Configuration" tab', () => {
-    cy.get('.MuiTabs-flexContainer')
-      .contains('Configuration', { timeout: 10000 })
-      .should('be.visible')
-      .click({ force: true })
-
-    cy.get('button[type="button"]').should('exist')
-  })
 })

ui/packages/ce/src/App/Instance/Branches/CreateBranch/index.tsx

@@ -1,6 +1,6 @@
 import { getBranches } from 'api/branches/getBranches'
 import { createBranch } from 'api/branches/createBranch'
-import { getSnapshotList } from 'api/branches/getSnapshotList'
+import { getBranchSnapshots } from 'api/snapshots/getBranchSnapshots'
 
 import { CreateBranchPage } from '@postgres.ai/shared/pages/CreateBranch'
 
@@ -12,7 +12,7 @@ export const CreateBranch = () => {
   const api = {
     getBranches,
     createBranch,
-    getSnapshotList,
+    getBranchSnapshots,
   }
 
   const elements = {

ui/packages/ce/src/App/Instance/Clones/CreateClone/index.tsx

@@ -5,10 +5,10 @@ import { NavPath } from 'components/NavPath'
 import { ROUTES } from 'config/routes'
 import { getInstance } from 'api/instances/getInstance'
 import { getInstanceRetrieval } from 'api/instances/getInstanceRetrieval'
-import { getSnapshots } from 'api/snapshots/getSnapshots'
 import { createClone } from 'api/clones/createClone'
 import { getClone } from 'api/clones/getClone'
 import { getBranches } from 'api/branches/getBranches'
+import { getBranchSnapshots } from 'api/snapshots/getBranchSnapshots'
 
 export const CreateClone = () => {
   const routes = {
@@ -17,12 +17,12 @@ export const CreateClone = () => {
   }
 
   const api = {
-    getSnapshots,
     getInstance,
     getInstanceRetrieval,
     createClone,
     getClone,
     getBranches,
+    getBranchSnapshots,
   }
 
   const elements = {

ui/packages/ce/src/api/branches/deleteBranch.ts

@@ -11,12 +11,12 @@ export const deleteBranch = async (branchName: string) => {
   const response = await request('/branch/delete', {
     method: 'POST',
     body: JSON.stringify({
-      branchName: branchName,
+      branchName,
     }),
   })
 
   return {
     response: response.ok ? await response.json() : null,
-    error: response.ok ? null : response,
+    error: response.ok ? null : await response.json(),
   }
 }

ui/packages/ce/src/api/branches/getBranches.ts

@@ -6,12 +6,13 @@
  */
 
 import { request } from 'helpers/request'
+import { formatBranchesDto } from '@postgres.ai/shared/types/api/endpoints/getBranches'
 
 export const getBranches = async () => {
   const response = await request(`/branches`)
 
   return {
-    response: response.ok ? await response.json() : null,
+    response: response.ok ? formatBranchesDto(await response.json()) : null,
     error: response.ok ? null : response,
   }
 }

ui/packages/ce/src/api/snapshots/destroySnapshot.ts renamed to ui/packages/ce/src/api/snapshots/destroySnapshot.js

@@ -5,11 +5,9 @@
  *--------------------------------------------------------------------------
  */
 
-import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot'
-
 import { request } from 'helpers/request'
 
-export const destroySnapshot: DestroySnapshot = async (snapshotId) => {
+export const destroySnapshot = async (snapshotId) => {
   const response = await request(`/snapshot/delete`, {
     method: 'POST',
     body: JSON.stringify({

ui/packages/ce/src/api/snapshots/getBranchSnapshots.ts

@@ -0,0 +1,17 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov [email protected]
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+import { request } from 'helpers/request'
+
+export const getBranchSnapshots = async (branch: string) => {
+  const response = await request(`/branch/snapshots/${branch}`)
+
+  return {
+    response: response.ok ? await response.json() : null,
+    error: response.ok ? null : response,
+  }
+}

ui/packages/shared/components/DestroyCloneModal/index.tsx

@@ -28,16 +28,12 @@ export const DestroyCloneModal = (props: Props) => {
   }
 
   return (
-    <Modal
-      title={`Destroy clone ${cloneId}`}
-      onClose={onClose}
-      isOpen={isOpen}
-    >
+    <Modal title={`Destroy clone ${cloneId}`} onClose={onClose} isOpen={isOpen}>
       <Text>
         Are you sure you want to destroy clone{' '}
-        <ImportantText>{cloneId}</ImportantText>?
+        <ImportantText>{cloneId}</ImportantText>? This action cannot be undone.
       </Text>
-      
+
       <SimpleModalControls
         items={[
           {
@@ -48,7 +44,7 @@ export const DestroyCloneModal = (props: Props) => {
             text: 'Destroy clone',
             variant: 'primary',
             onClick: handleClickDestroy,
-          }
+          },
         ]}
       />
     </Modal>

ui/packages/shared/pages/Branches/Branch/index.tsx

@@ -40,6 +40,7 @@ import {
 
 import { useCreatedStores } from './useCreatedStores'
 import { Host } from './context'
+import { DeleteBranch } from 'types/api/endpoints/deleteBranch'
 
 type Props = Host
 
@@ -152,15 +153,9 @@ export const BranchesPage = observer((props: Props) => {
     isBranchesLoading,
     getBranchesError,
     snapshotListError,
-    deleteBranchError,
     getBranchError,
   } = stores.main
 
-  const handleDestroyBranch = async () => {
-    const isSuccess = await deleteBranch(props.branchId)
-    if (isSuccess) history.push(props.routes.branch())
-  }
-
   const hasBranchError = getBranchesError || getBranchError || snapshotListError
 
   const branchLogLength = snapshotList?.reduce((acc, snapshot) => {
@@ -359,11 +354,11 @@ export const BranchesPage = observer((props: Props) => {
             className={classes.marginTop}
             tag="h2"
             level={2}
-            text={'Delete branch using CLI'}
+            text={'Destroy branch using CLI'}
           />
           <p className={classes.cliText}>
-            You can delete this branch using CLI. To do this, run the
-            command below:
+            You can destroy this branch using CLI. To do this, run the command
+            below:
           </p>
           <SyntaxHighlight content={`dblab branch delete ${props.branchId}`} />
 
@@ -374,8 +369,8 @@ export const BranchesPage = observer((props: Props) => {
             text={'Get branches using CLI'}
           />
           <p className={classes.marginTop}>
-            You can get a list of all branches using CLI. Copy the command
-            below and paste it into your terminal.
+            To list all branches using CLI, copy
+            and paste it into your terminal.
           </p>
           <SyntaxHighlight content={getCliBranchListCommand()} />
 
@@ -394,8 +389,7 @@ export const BranchesPage = observer((props: Props) => {
         <DeleteBranchModal
           isOpen={isOpenDestroyModal}
           onClose={() => setIsOpenDestroyModal(false)}
-          deleteBranchError={deleteBranchError}
-          deleteBranch={handleDestroyBranch}
+          deleteBranch={deleteBranch as DeleteBranch}
           branchName={props.branchId}
         />
       </div>

ui/packages/shared/pages/Branches/Branch/stores/Main.ts

@@ -8,11 +8,11 @@
 import { makeAutoObservable } from 'mobx'
 
 import { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches'
-import { GetBranchesResponseType } from '@postgres.ai/shared/types/api/endpoints/getBranches'
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches'
 import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
 import {
+  SnapshotList,
   GetSnapshotList,
-  GetSnapshotListResponseType,
 } from '@postgres.ai/shared/types/api/endpoints/getSnapshotList'
 
 type Error = {
@@ -29,15 +29,14 @@ export type Api = {
 export class MainStore {
   getBranchError: Error | null = null
   snapshotListError: Error | null = null
-  deleteBranchError: Error | null = null
   getBranchesError: Error | null = null
 
   isReloading = false
   isBranchesLoading = false
 
-  branches: GetBranchesResponseType[] = []
-  branch: GetBranchesResponseType | null = null
-  snapshotList: GetSnapshotListResponseType[] | null = null
+  branches: Branch[] | null = null
+  branch: Branch | null = null
+  snapshotList: SnapshotList[] | null = null
 
   private readonly api: Api
 
@@ -100,15 +99,10 @@ export class MainStore {
   deleteBranch = async (branchName: string) => {
     if (!branchName) return
 
-    this.deleteBranchError = null
-
     const { response, error } = await this.api.deleteBranch(branchName)
 
-    if (error) {
-      this.deleteBranchError = await error.json().then((err) => err)
-    }
 
-    return response
+    return { response, error }
   }
 
   getSnapshotList = async (branchName: string) => {