Skip to content

Commit 7ffe00c

Browse files
author
Bogdan Tsechoev
committed
feat(ui): propagate tabs across entire site
1 parent bc224c9 commit 7ffe00c

File tree

9 files changed

+133
-31
lines changed

9 files changed

+133
-31
lines changed

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

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
import { useEffect, useState } from 'react'
8+
import React, { useEffect, useState } from 'react'
99
import { useHistory } from 'react-router'
1010
import { observer } from 'mobx-react-lite'
1111
import copyToClipboard from 'copy-to-clipboard'
@@ -41,8 +41,9 @@ import {
4141
import { useCreatedStores } from './useCreatedStores'
4242
import { Host } from './context'
4343
import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch'
44+
import { InstanceTabs, TABS_INDEX } from "../../Instance/Tabs";
4445

45-
type Props = Host
46+
type Props = Host & { isPlatform?: boolean }
4647

4748
const useStyles = makeStyles(
4849
() => ({
@@ -61,6 +62,10 @@ const useStyles = makeStyles(
6162
marginTop: {
6263
marginTop: '16px',
6364
},
65+
title: {
66+
marginTop: '8px',
67+
lineHeight: '26px'
68+
},
6469
container: {
6570
maxWidth: '100%',
6671
flex: '1 1 0',
@@ -173,11 +178,17 @@ export const BranchesPage = observer((props: Props) => {
173178
{props.elements.breadcrumbs}
174179

175180
<SectionTitle
176-
className={classes.marginTop}
181+
className={classes.title}
177182
tag="h1"
178183
level={1}
179184
text={`Branch ${props.branchId}`}
180-
/>
185+
>
186+
<InstanceTabs
187+
tab={TABS_INDEX.BRANCHES}
188+
isPlatform={props.isPlatform}
189+
instanceId={props.instanceId}
190+
/>
191+
</SectionTitle>
181192
</>
182193
)
183194

‎ui/packages/shared/pages/Clone/index.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
import { useEffect, useState } from 'react'
8+
import React, { useEffect, useState } from 'react'
99
import { observer } from 'mobx-react-lite'
1010
import { useHistory } from 'react-router-dom'
1111
import copyToClipboard from 'copy-to-clipboard'
@@ -36,7 +36,6 @@ import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
3636
import { icons } from '@postgres.ai/shared/styles/icons'
3737
import { styles } from '@postgres.ai/shared/styles/styles'
3838
import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight'
39-
import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils'
4039

4140
import { Status } from './Status'
4241
import { useCreatedStores } from './useCreatedStores'
@@ -47,6 +46,7 @@ import {
4746
getCliResetCloneCommand,
4847
getCreateSnapshotCommand,
4948
} from './utils'
49+
import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
5050

5151
const textFieldWidth = 525
5252

@@ -65,7 +65,8 @@ const useStyles = makeStyles(
6565
},
6666
},
6767
title: {
68-
marginTop: '16px',
68+
marginTop: '8px',
69+
lineHeight: '26px'
6970
},
7071
tooltip: {
7172
marginTop: '8px',
@@ -187,7 +188,7 @@ const useStyles = makeStyles(
187188
{ index: 1 },
188189
)
189190

190-
type Props = Host
191+
type Props = Host & { isPlatform?: boolean }
191192

192193
export const Clone = observer((props: Props) => {
193194
const classes = useStyles()
@@ -227,7 +228,13 @@ export const Clone = observer((props: Props) => {
227228
tag="h1"
228229
level={1}
229230
text={`Clone ${props.cloneId}`}
230-
/>
231+
>
232+
<InstanceTabs
233+
tab={TABS_INDEX.CLONES}
234+
isPlatform={props.isPlatform}
235+
instanceId={props.instanceId}
236+
/>
237+
</SectionTitle>
231238
</>
232239
)
233240

‎ui/packages/shared/pages/CreateBranch/index.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
import cn from 'classnames'
99
import { useHistory } from 'react-router'
1010
import { observer } from 'mobx-react-lite'
11-
import { useEffect, useState } from 'react'
11+
import React, { useEffect, useState } from 'react'
1212
import { TextField, makeStyles } from '@material-ui/core'
1313

1414
import { Button } from '@postgres.ai/shared/components/Button'
@@ -26,6 +26,7 @@ import { MainStoreApi } from './stores/Main'
2626
import { useCreatedStores } from './useCreatedStores'
2727
import { getCliBranchListCommand, getCliCreateBranchCommand } from './utils'
2828
import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot'
29+
import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
2930

3031
interface CreateBranchProps {
3132
instanceId: string
@@ -36,6 +37,7 @@ interface CreateBranchProps {
3637
elements: {
3738
breadcrumbs: React.ReactNode
3839
}
40+
isPlatform?: boolean
3941
}
4042

4143
const useStyles = makeStyles(
@@ -78,6 +80,10 @@ const useStyles = makeStyles(
7880
marginTop: {
7981
marginTop: '8px',
8082
},
83+
title: {
84+
marginTop: '8px',
85+
lineHeight: '26px'
86+
},
8187
form: {
8288
marginTop: '16px',
8389
},
@@ -95,7 +101,7 @@ const useStyles = makeStyles(
95101
)
96102

97103
export const CreateBranchPage = observer(
98-
({ instanceId, api, elements, routes }: CreateBranchProps) => {
104+
({ instanceId, api, elements, routes, isPlatform }: CreateBranchProps) => {
99105
const stores = useCreatedStores(api)
100106
const classes = useStyles()
101107
const history = useHistory()
@@ -155,9 +161,15 @@ export const CreateBranchPage = observer(
155161
return (
156162
<>
157163
{elements.breadcrumbs}
164+
<SectionTitle tag="h1" level={1} text="Create branch" className={classes.title}>
165+
<InstanceTabs
166+
tab={TABS_INDEX.BRANCHES}
167+
isPlatform={isPlatform}
168+
instanceId={instanceId}
169+
/>
170+
</SectionTitle>
158171
<div className={classes.wrapper}>
159172
<div className={classes.container}>
160-
<SectionTitle tag="h1" level={1} text="Create branch" />
161173
{(snapshotsError || getBranchesError) && (
162174
<div className={classes.marginTop}>
163175
<ErrorStub

‎ui/packages/shared/pages/CreateClone/index.tsx

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import cn from 'classnames'
2-
import { useEffect, useState } from 'react'
2+
import React, { useEffect, useState } from 'react'
33
import { useHistory } from 'react-router-dom'
44
import { observer } from 'mobx-react-lite'
55
import { useTimer } from 'use-timer'
@@ -29,6 +29,7 @@ import { getCliCloneStatus, getCliCreateCloneCommand } from './utils'
2929
import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot'
3030

3131
import styles from './styles.module.scss'
32+
import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
3233

3334
type Host = {
3435
instanceId: string
@@ -41,7 +42,7 @@ type Host = {
4142
}
4243
}
4344

44-
type Props = Host
45+
type Props = Host & { isPlatform?: boolean }
4546

4647
export const CreateClone = observer((props: Props) => {
4748
const history = useHistory()
@@ -137,6 +138,13 @@ export const CreateClone = observer((props: Props) => {
137138
<style>{'p { margin: 0; }'}</style>
138139

139140
{props.elements.breadcrumbs}
141+
<SectionTitle tag="h1" level={1} text="Create clone" className={styles.pageTitle}>
142+
<InstanceTabs
143+
tab={TABS_INDEX.CLONES}
144+
isPlatform={props.isPlatform}
145+
instanceId={props.instanceId}
146+
/>
147+
</SectionTitle>
140148
</>
141149
)
142150

@@ -182,7 +190,6 @@ export const CreateClone = observer((props: Props) => {
182190
{headRendered}
183191
<div className={styles.container}>
184192
<div className={styles.form}>
185-
<SectionTitle tag="h1" level={1} text="Create clone" />
186193
<div className={styles.section}>
187194
{branchesList && branchesList.length > 0 && (
188195
<Select

‎ui/packages/shared/pages/CreateClone/styles.module.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,8 @@
107107
word-wrap: break-word;
108108
white-space: initial;
109109
}
110+
111+
.pageTitle {
112+
margin-top: 8px;
113+
line-height: 26px;
114+
}

‎ui/packages/shared/pages/CreateSnapshot/index.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*--------------------------------------------------------------------------
66
*/
77

8-
import { useEffect } from 'react'
8+
import React, { useEffect } from 'react'
99
import { useHistory } from 'react-router'
1010
import { observer } from 'mobx-react-lite'
1111
import { makeStyles } from '@material-ui/core'
@@ -24,6 +24,7 @@ import { FormValues, useForm } from './useForm'
2424
import { MainStoreApi } from './stores/Main'
2525
import { useCreatedStores } from './useCreatedStores'
2626
import { getCliCreateSnapshotCommand } from './utils'
27+
import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
2728

2829
interface CreateSnapshotProps {
2930
instanceId: string
@@ -34,6 +35,7 @@ interface CreateSnapshotProps {
3435
elements: {
3536
breadcrumbs: React.ReactNode
3637
}
38+
isPlatform?: boolean
3739
}
3840

3941
const useStyles = makeStyles(
@@ -83,12 +85,16 @@ const useStyles = makeStyles(
8385
marginLeft: '8px',
8486
color: '#fff',
8587
},
88+
title: {
89+
marginTop: '8px',
90+
lineHeight: '26px'
91+
},
8692
},
8793
{ index: 1 },
8894
)
8995

9096
export const CreateSnapshotPage = observer(
91-
({ instanceId, api, elements, routes }: CreateSnapshotProps) => {
97+
({ instanceId, api, elements, routes, isPlatform }: CreateSnapshotProps) => {
9298
const stores = useCreatedStores(api)
9399
const classes = useStyles()
94100
const history = useHistory()
@@ -147,9 +153,15 @@ export const CreateSnapshotPage = observer(
147153
return (
148154
<>
149155
{elements.breadcrumbs}
156+
<SectionTitle tag="h1" level={1} text="Create snapshot" className={classes.title}>
157+
<InstanceTabs
158+
tab={TABS_INDEX.SNAPSHOTS}
159+
isPlatform={isPlatform}
160+
instanceId={instanceId}
161+
/>
162+
</SectionTitle>
150163
<div className={classes.wrapper}>
151164
<div className={classes.container}>
152-
<SectionTitle tag="h1" level={1} text="Create Snapshot" />
153165
<div className={classes.marginTop2x}>
154166
<strong>Clone ID</strong>
155167
<p className={classes.marginTop}>

‎ui/packages/shared/pages/Instance/Tabs/index.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core'
1111

1212
import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL'
1313
import { useTabsStyles } from './styles'
14+
import { PlatformTabs } from "./PlatformTabs";
15+
import { useCreatedStores } from "../useCreatedStores";
16+
import { Host } from '../context'
17+
import { initWS } from "@postgres.ai/ce/src/api/engine/initWS";
1418

1519
export const TABS_INDEX = {
1620
OVERVIEW: 0,
@@ -95,3 +99,39 @@ export const Tabs = ({
9599
</TabsComponent>
96100
)
97101
}
102+
103+
type InstanceTabProps = {
104+
tab: number
105+
isPlatform?: boolean
106+
onTabChange?: (tabID: number) => void
107+
instanceId: string
108+
}
109+
110+
export const InstanceTabs = (props: InstanceTabProps) => {
111+
const stores = useCreatedStores({} as unknown as Host)
112+
const {
113+
load,
114+
} = stores.main
115+
116+
const switchTab = (_: React.ChangeEvent<{}> | null, tabID: number) => {
117+
const contentElement = document.getElementById('content-container')
118+
if (props.onTabChange) {
119+
props.onTabChange(tabID)
120+
}
121+
122+
if (tabID === 0) {
123+
load(props.instanceId)
124+
}
125+
126+
contentElement?.scrollTo(0, 0)
127+
}
128+
129+
const tabProps = {
130+
value: props.tab,
131+
handleChange: switchTab,
132+
hasLogs: initWS !== undefined,
133+
hideInstanceTabs: false,
134+
}
135+
136+
return props.isPlatform ? <PlatformTabs {...tabProps} /> : <Tabs {...tabProps} />
137+
}

‎ui/packages/shared/pages/Instance/index.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,7 @@ import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner'
1414
import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle'
1515
import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub'
1616

17-
import { TABS_INDEX, Tabs, TabsProps } from './Tabs'
18-
import { PlatformTabs } from './Tabs/PlatformTabs'
17+
import { TABS_INDEX, InstanceTabs } from './Tabs'
1918
import { Logs } from '../Logs'
2019
import { Clones } from './Clones'
2120
import { Info } from './Info'
@@ -98,9 +97,6 @@ export const Instance = observer((props: Props) => {
9897

9998
const isConfigurationActive = instanceRetrieval?.mode !== 'physical'
10099

101-
const InstanceTab = (props: TabsProps) =>
102-
isPlatform ? <PlatformTabs {...props} /> : <Tabs {...props} />
103-
104100
useEffect(() => {
105101
load(instanceId, isPlatform)
106102
}, [instanceId])
@@ -142,10 +138,11 @@ export const Instance = observer((props: Props) => {
142138
}
143139
>
144140
{isInstanceIntegrated && (
145-
<InstanceTab
146-
value={activeTab}
147-
handleChange={switchTab}
148-
hasLogs={api.initWS != undefined}
141+
<InstanceTabs
142+
instanceId={props.instanceId}
143+
tab={activeTab}
144+
onTabChange={(tabID) => setActiveTab(tabID)}
145+
isPlatform={isPlatform!}
149146
/>
150147
)}
151148
</SectionTitle>

0 commit comments

Comments
 (0)