Merge branch 'globalize-tabs' into 'dle-4-0'

bogdan-ts · bogdan-ts · commit 63645d4665d9 · 2025-04-21T17:10:33.000Z
feat(ui): propagate tabs across entire site

See merge request postgres-ai/database-lab!1018
diff --git a/ui/packages/shared/pages/Branches/Branch/index.tsx b/ui/packages/shared/pages/Branches/Branch/index.tsx
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router'
 import { observer } from 'mobx-react-lite'
 import copyToClipboard from 'copy-to-clipboard'
@@ -41,8 +41,9 @@ import {
 import { useCreatedStores } from './useCreatedStores'
 import { Host } from './context'
 import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
+import { InstanceTabs, TABS_INDEX } from "../../Instance/Tabs";
 
-type Props = Host
+type Props = Host & { isPlatform?: boolean }
 
 const useStyles = makeStyles(
   () => ({
@@ -61,6 +62,10 @@ const useStyles = makeStyles(
     marginTop: {
       marginTop: '16px',
     },
+    title: {
+      marginTop: '8px',
+      lineHeight: '26px'
+    },
     container: {
       maxWidth: '100%',
       flex: '1 1 0',
@@ -173,11 +178,17 @@ export const BranchesPage = observer((props: Props) => {
       {props.elements.breadcrumbs}
 
       <SectionTitle
-        className={classes.marginTop}
+        className={classes.title}
         tag="h1"
         level={1}
         text={`Branch ${props.branchId}`}
-      />
+      >
+        <InstanceTabs
+          tab={TABS_INDEX.BRANCHES}
+          isPlatform={props.isPlatform}
+          instanceId={props.instanceId}
+        />
+      </SectionTitle>
     </>
   )
 
diff --git a/ui/packages/shared/pages/Clone/index.tsx b/ui/packages/shared/pages/Clone/index.tsx
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { useHistory } from 'react-router-dom'
 import copyToClipboard from 'copy-to-clipboard'
@@ -36,7 +36,6 @@ import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
 import { icons } from '@postgres.ai/shared/styles/icons'
 import { styles } from '@postgres.ai/shared/styles/styles'
 import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight'
-import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
 
 import { Status } from './Status'
 import { useCreatedStores } from './useCreatedStores'
@@ -47,6 +46,7 @@ import {
   getCliResetCloneCommand,
   getCreateSnapshotCommand,
 } from './utils'
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
 
 const textFieldWidth = 525
 
@@ -65,7 +65,8 @@ const useStyles = makeStyles(
       },
     },
     title: {
-      marginTop: '16px',
+      marginTop: '8px',
+      lineHeight: '26px'
     },
     tooltip: {
       marginTop: '8px',
@@ -187,7 +188,7 @@ const useStyles = makeStyles(
   { index: 1 },
 )
 
-type Props = Host
+type Props = Host & { isPlatform?: boolean }
 
 export const Clone = observer((props: Props) => {
   const classes = useStyles()
@@ -227,7 +228,13 @@ export const Clone = observer((props: Props) => {
         tag="h1"
         level={1}
         text={`Clone ${props.cloneId}`}
-      />
+      >
+        <InstanceTabs
+          tab={TABS_INDEX.CLONES}
+          isPlatform={props.isPlatform}
+          instanceId={props.instanceId}
+        />
+      </SectionTitle>
     </>
   )
 
diff --git a/ui/packages/shared/pages/CreateBranch/index.tsx b/ui/packages/shared/pages/CreateBranch/index.tsx
@@ -8,7 +8,7 @@
 import cn from 'classnames'
 import { useHistory } from 'react-router'
 import { observer } from 'mobx-react-lite'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { TextField, makeStyles } from '@material-ui/core'
 
 import { Button } from '@postgres.ai/shared/components/Button'
@@ -26,6 +26,7 @@ import { MainStoreApi } from './stores/Main'
 import { useCreatedStores } from './useCreatedStores'
 import { getCliBranchListCommand, getCliCreateBranchCommand } from './utils'
 import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
 
 interface CreateBranchProps {
   instanceId: string
@@ -36,6 +37,7 @@ interface CreateBranchProps {
   elements: {
     breadcrumbs: React.ReactNode
   }
+  isPlatform?: boolean
 }
 
 const useStyles = makeStyles(
@@ -78,6 +80,10 @@ const useStyles = makeStyles(
     marginTop: {
       marginTop: '8px',
     },
+    title: {
+      marginTop: '8px',
+      lineHeight: '26px'
+    },
     form: {
       marginTop: '16px',
     },
@@ -95,7 +101,7 @@ const useStyles = makeStyles(
 )
 
 export const CreateBranchPage = observer(
-  ({ instanceId, api, elements, routes }: CreateBranchProps) => {
+  ({ instanceId, api, elements, routes, isPlatform }: CreateBranchProps) => {
     const stores = useCreatedStores(api)
     const classes = useStyles()
     const history = useHistory()
@@ -155,9 +161,15 @@ export const CreateBranchPage = observer(
     return (
       <>
         {elements.breadcrumbs}
+        <SectionTitle tag="h1" level={1} text="Create branch" className={classes.title}>
+          <InstanceTabs
+            tab={TABS_INDEX.BRANCHES}
+            isPlatform={isPlatform}
+            instanceId={instanceId}
+          />
+        </SectionTitle>
         <div className={classes.wrapper}>
           <div className={classes.container}>
-            <SectionTitle tag="h1" level={1} text="Create branch" />
             {(snapshotsError || getBranchesError) && (
               <div className={classes.marginTop}>
                 <ErrorStub
diff --git a/ui/packages/shared/pages/CreateClone/index.tsx b/ui/packages/shared/pages/CreateClone/index.tsx
@@ -1,5 +1,5 @@
 import cn from 'classnames'
-import { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useHistory } from 'react-router-dom'
 import { observer } from 'mobx-react-lite'
 import { useTimer } from 'use-timer'
@@ -29,6 +29,7 @@ import { getCliCloneStatus, getCliCreateCloneCommand } from './utils'
 import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot'
 
 import styles from './styles.module.scss'
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
 
 type Host = {
   instanceId: string
@@ -41,7 +42,7 @@ type Host = {
   }
 }
 
-type Props = Host
+type Props = Host & { isPlatform?: boolean }
 
 export const CreateClone = observer((props: Props) => {
   const history = useHistory()
@@ -150,6 +151,13 @@ export const CreateClone = observer((props: Props) => {
       <style>{'p { margin: 0; }'}</style>
 
       {props.elements.breadcrumbs}
+      <SectionTitle tag="h1" level={1} text="Create clone"  className={styles.pageTitle}>
+        <InstanceTabs
+          tab={TABS_INDEX.CLONES}
+          isPlatform={props.isPlatform}
+          instanceId={props.instanceId}
+        />
+      </SectionTitle>
     </>
   )
 
@@ -195,7 +203,6 @@ export const CreateClone = observer((props: Props) => {
       {headRendered}
       <div className={styles.container}>
         <div className={styles.form}>
-          <SectionTitle tag="h1" level={1} text="Create clone" />
           <div className={styles.section}>
             {branchesList && branchesList.length > 0 && (
               <Select
diff --git a/ui/packages/shared/pages/CreateClone/styles.module.scss b/ui/packages/shared/pages/CreateClone/styles.module.scss
@@ -107,3 +107,8 @@
   word-wrap: break-word;
   white-space: initial;
 }
+
+.pageTitle {
+  margin-top: 8px;
+  line-height: 26px;
+}
diff --git a/ui/packages/shared/pages/CreateSnapshot/index.tsx b/ui/packages/shared/pages/CreateSnapshot/index.tsx
@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 import { useHistory } from 'react-router'
 import { observer } from 'mobx-react-lite'
 import { makeStyles } from '@material-ui/core'
@@ -24,6 +24,7 @@ import { FormValues, useForm } from './useForm'
 import { MainStoreApi } from './stores/Main'
 import { useCreatedStores } from './useCreatedStores'
 import { getCliCreateSnapshotCommand } from './utils'
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
 
 interface CreateSnapshotProps {
   instanceId: string
@@ -34,6 +35,7 @@ interface CreateSnapshotProps {
   elements: {
     breadcrumbs: React.ReactNode
   }
+  isPlatform?: boolean
 }
 
 const useStyles = makeStyles(
@@ -83,12 +85,16 @@ const useStyles = makeStyles(
       marginLeft: '8px',
       color: '#fff',
     },
+    title: {
+      marginTop: '8px',
+      lineHeight: '26px'
+    },
   },
   { index: 1 },
 )
 
 export const CreateSnapshotPage = observer(
-  ({ instanceId, api, elements, routes }: CreateSnapshotProps) => {
+  ({ instanceId, api, elements, routes, isPlatform }: CreateSnapshotProps) => {
     const stores = useCreatedStores(api)
     const classes = useStyles()
     const history = useHistory()
@@ -147,9 +153,15 @@ export const CreateSnapshotPage = observer(
     return (
       <>
         {elements.breadcrumbs}
+        <SectionTitle tag="h1" level={1} text="Create snapshot" className={classes.title}>
+          <InstanceTabs
+            tab={TABS_INDEX.SNAPSHOTS}
+            isPlatform={isPlatform}
+            instanceId={instanceId}
+          />
+        </SectionTitle>
         <div className={classes.wrapper}>
           <div className={classes.container}>
-            <SectionTitle tag="h1" level={1} text="Create Snapshot" />
             <div className={classes.marginTop2x}>
               <strong>Clone ID</strong>
               <p className={classes.marginTop}>
diff --git a/ui/packages/shared/pages/Instance/Tabs/index.tsx b/ui/packages/shared/pages/Instance/Tabs/index.tsx
@@ -11,6 +11,10 @@ import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core'
 
 import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL'
 import { useTabsStyles } from './styles'
+import { PlatformTabs } from "./PlatformTabs";
+import { useCreatedStores } from "../useCreatedStores";
+import { Host } from '../context'
+import { initWS } from "@postgres.ai/ce/src/api/engine/initWS";
 
 export const TABS_INDEX = {
   OVERVIEW: 0,
@@ -95,3 +99,39 @@ export const Tabs = ({
     </TabsComponent>
   )
 }
+
+type InstanceTabProps = {
+  tab: number
+  isPlatform?: boolean
+  onTabChange?: (tabID: number) => void
+  instanceId: string
+}
+
+export const InstanceTabs = (props: InstanceTabProps) => {
+  const stores = useCreatedStores({} as unknown as Host)
+  const {
+    load,
+  } = stores.main
+
+  const switchTab = (_: React.ChangeEvent<{}> | null, tabID: number) => {
+    const contentElement = document.getElementById('content-container')
+    if (props.onTabChange) {
+      props.onTabChange(tabID)
+    }
+
+    if (tabID === 0) {
+      load(props.instanceId)
+    }
+
+    contentElement?.scrollTo(0, 0)
+  }
+
+  const tabProps = {
+    value: props.tab,
+    handleChange: switchTab,
+    hasLogs: initWS !== undefined,
+    hideInstanceTabs: false,
+  }
+
+  return props.isPlatform ? <PlatformTabs {...tabProps} /> : <Tabs {...tabProps} />
+}
diff --git a/ui/packages/shared/pages/Instance/index.tsx b/ui/packages/shared/pages/Instance/index.tsx
@@ -14,8 +14,7 @@ import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner'
 import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
 
-import { TABS_INDEX, Tabs, TabsProps } from './Tabs'
-import { PlatformTabs } from './Tabs/PlatformTabs'
+import { TABS_INDEX, InstanceTabs } from './Tabs'
 import { Logs } from '../Logs'
 import { Clones } from './Clones'
 import { Info } from './Info'
@@ -98,9 +97,6 @@ export const Instance = observer((props: Props) => {
 
   const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
 
-  const InstanceTab = (props: TabsProps) =>
-    isPlatform ? <PlatformTabs {...props} /> : <Tabs {...props} />
-
   useEffect(() => {
     load(instanceId, isPlatform)
   }, [instanceId])
@@ -142,10 +138,11 @@ export const Instance = observer((props: Props) => {
           }
         >
           {isInstanceIntegrated && (
-            <InstanceTab
-              value={activeTab}
-              handleChange={switchTab}
-              hasLogs={api.initWS != undefined}
+            <InstanceTabs
+              instanceId={props.instanceId}
+              tab={activeTab}
+              onTabChange={(tabID) =>  setActiveTab(tabID)}
+              isPlatform={isPlatform!}
             />
           )}
         </SectionTitle>
diff --git a/ui/packages/shared/pages/Snapshots/Snapshot/index.tsx b/ui/packages/shared/pages/Snapshots/Snapshot/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -107,3 +107,8 @@`
`107`	`107`	`word-wrap: break-word;`
`108`	`108`	`white-space: initial;`
`109`	`109`	`}`
	`110`	`+`
	`111`	`+.pageTitle {`
	`112`	`+ margin-top: 8px;`
	`113`	`+ line-height: 26px;`
	`114`	`+}`