Skip to content

Commit a4b8d10

Browse files
agneumagneum
committed
Merge branch 'dle-4-0-ui-issues' into 'dle-4-0'
fix(ui): resolve UI issues for dle-4-0 See merge request postgres-ai/database-lab!841
2 parents cd14db1 + 8e65d33 commit a4b8d10

File tree

27 files changed

+614
-1543
lines changed

27 files changed

+614
-1543
lines changed

‎ui/packages/shared/components/ResetCloneModal/index.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,11 @@ export const ResetCloneModal = (props: Props) => {
112112
children: (
113113
<>
114114
{snapshot.dataStateAt} (
115-
{isValidDate(snapshot.dataStateAtDate) &&
115+
{isValidDate(snapshot.dataStateAtDate) &&
116116
formatDistanceToNowStrict(snapshot.dataStateAtDate, {
117117
addSuffix: true,
118118
})}
119+
)
119120
{isLatest && (
120121
<span className={classes.snapshotTag}>Latest</span>
121122
)}

‎ui/packages/shared/icons/ArrowDropDown/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import React from 'react'
99

1010
type Props = {
1111
className?: string
12+
onClick?: () => void
1213
}
1314

1415
export const ArrowDropDownIcon = (props: Props) => {
@@ -18,6 +19,7 @@ export const ArrowDropDownIcon = (props: Props) => {
1819
viewBox="0 0 8 6"
1920
fill="none"
2021
xmlns="http://www.w3.org/2000/svg"
22+
onClick={props.onClick}
2123
>
2224
<path
2325
// eslint-disable-next-line max-len

‎ui/packages/shared/pages/Branches/components/BranchesTable/index.tsx

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

8+
import cn from 'classnames'
89
import { useState } from 'react'
910
import copy from 'copy-to-clipboard'
1011
import { makeStyles } from '@material-ui/core'
1112
import { useHistory } from 'react-router-dom'
1213

14+
import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown'
1315
import { GetBranchesResponseType } from '@postgres.ai/shared/types/api/endpoints/getBranches'
1416
import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer'
1517
import {
@@ -37,9 +39,19 @@ const useStyles = makeStyles(
3739
marginLeft: '8px',
3840
width: '10px',
3941
},
42+
interactiveRow: {
43+
cursor: 'pointer',
44+
},
45+
verticalCentered: {
46+
display: 'flex',
47+
alignItems: 'center',
48+
},
4049
marginTop: {
4150
marginTop: '16px',
4251
},
52+
sortIconUp: {
53+
transform: 'rotate(180deg)',
54+
},
4355
},
4456
{ index: 1 },
4557
)
@@ -58,10 +70,31 @@ export const BranchesTable = ({
5870
const history = useHistory()
5971
const classes = useStyles()
6072

73+
const [state, setState] = useState({
74+
sortByParent: 'desc',
75+
branches: branchesData ?? [],
76+
})
6177
const [branchId, setBranchId] = useState('')
6278
const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false)
6379

64-
if (!branchesData.length) {
80+
const handlesortByParent = () => {
81+
const sortByParent = state.sortByParent === 'desc' ? 'asc' : 'desc'
82+
83+
const sortedBranches = [...state.branches].sort((a, b) => {
84+
if (sortByParent === 'asc') {
85+
return a.parent.localeCompare(b.parent)
86+
} else {
87+
return b.parent.localeCompare(a.parent)
88+
}
89+
})
90+
91+
setState({
92+
sortByParent,
93+
branches: sortedBranches,
94+
})
95+
}
96+
97+
if (!state.branches.length) {
6598
return <p className={classes.marginTop}>{emptyTableText}</p>
6699
}
67100

@@ -72,13 +105,26 @@ export const BranchesTable = ({
72105
<TableRow>
73106
<TableHeaderCell />
74107
<TableHeaderCell>Branch</TableHeaderCell>
75-
<TableHeaderCell>Parent</TableHeaderCell>
108+
<TableHeaderCell>
109+
<div
110+
onClick={handlesortByParent}
111+
className={cn(classes.interactiveRow, classes.verticalCentered)}
112+
>
113+
Parent
114+
<ArrowDropDownIcon
115+
className={cn(
116+
state.sortByParent === 'asc' && classes.sortIconUp,
117+
classes.sortIcon,
118+
)}
119+
/>
120+
</div>
121+
</TableHeaderCell>
76122
<TableHeaderCell>Data state time</TableHeaderCell>
77123
<TableHeaderCell>Snapshot ID</TableHeaderCell>
78124
</TableRow>
79125
</TableHead>
80126
<TableBody>
81-
{branchesData?.map((branch) => (
127+
{state.branches?.map((branch) => (
82128
<TableRow
83129
key={branch.name}
84130
hover

‎ui/packages/shared/pages/Branches/components/Modals/DeleteBranchModal/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ export const DeleteBranchModal = ({
6969
text: 'Destroy branch',
7070
variant: 'primary',
7171
onClick: handleSubmit,
72+
isDisabled: branchName === 'main',
7273
},
7374
]}
7475
/>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,9 @@ export const Branches = observer((): React.ReactElement => {
102102

103103
{!branchesList.length && (
104104
<Tooltip content="No existing branch">
105-
<InfoIcon className={classes.infoIcon} />
105+
<div>
106+
<InfoIcon className={classes.infoIcon} />
107+
</div>
106108
</Tooltip>
107109
)}
108110
</>

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

Lines changed: 51 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ 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'
3940

4041
import { Status } from './Status'
4142
import { useCreatedStores } from './useCreatedStores'
@@ -53,7 +54,7 @@ const useStyles = makeStyles(
5354
(theme) => ({
5455
wrapper: {
5556
display: 'flex',
56-
gap: '60px',
57+
gap: '40px',
5758
maxWidth: '1200px',
5859
fontSize: '14px !important',
5960
marginTop: '20px',
@@ -77,13 +78,13 @@ const useStyles = makeStyles(
7778
marginTop: '4px',
7879
},
7980
errorStub: {
80-
marginTop: '24px',
81+
margin: '24px 0',
8182
},
8283
spinner: {
8384
marginLeft: '8px',
8485
},
8586
summary: {
86-
flex: '1 1 0',
87+
flex: '1.5 1 0',
8788
minWidth: 0,
8889
},
8990
snippetContainer: {
@@ -124,7 +125,7 @@ const useStyles = makeStyles(
124125
marginBottom: '20px',
125126
},
126127
actionButton: {
127-
marginRight: '16px',
128+
marginRight: '10px',
128129
},
129130
remark: {
130131
fontSize: '12px',
@@ -230,26 +231,17 @@ export const Clone = observer((props: Props) => {
230231
</>
231232
)
232233

233-
// Getting instance error.
234-
if (stores.main.instanceError)
235-
return (
236-
<>
237-
{headRendered}
238-
239-
<ErrorStub
240-
title={stores.main.instanceError.title}
241-
message={stores.main.instanceError.message}
242-
/>
243-
</>
244-
)
234+
const cloneErrorMessage =
235+
stores.main.instanceError?.message || stores.main.cloneError?.message
236+
const cloneErrorTitle =
237+
stores.main.instanceError?.title || stores.main.cloneError?.title
245238

246-
// Getting clone error.
247-
if (stores.main.cloneError)
239+
if (cloneErrorMessage && cloneErrorTitle)
248240
return (
249241
<>
250242
{headRendered}
251243

252-
<ErrorStub {...stores.main.cloneError} />
244+
<ErrorStub title={cloneErrorTitle} message={cloneErrorMessage} />
253245
</>
254246
)
255247

@@ -283,6 +275,16 @@ export const Clone = observer((props: Props) => {
283275
if (isSuccess) history.push(props.routes.instance())
284276
}
285277

278+
const createSnapshot = async () => {
279+
await snapshots.createSnapshot(props.cloneId).then((snapshot) => {
280+
if (snapshot && generateSnapshotPageId(snapshot.snapshotID)) {
281+
history.push(
282+
`/instance/snapshots/${generateSnapshotPageId(snapshot.snapshotID)}`,
283+
)
284+
}
285+
})
286+
}
287+
286288
// Clone reload.
287289
const reloadClone = () => stores.main.reload()
288290

@@ -309,22 +311,6 @@ export const Clone = observer((props: Props) => {
309311
<>
310312
{headRendered}
311313
<div className={classes.wrapper}>
312-
{stores.main.resetCloneError && (
313-
<ErrorStub
314-
title="Resetting error"
315-
message={stores.main.resetCloneError}
316-
className={classes.errorStub}
317-
/>
318-
)}
319-
320-
{stores.main.destroyCloneError && (
321-
<ErrorStub
322-
title="Destroying error"
323-
message={stores.main.destroyCloneError}
324-
className={classes.errorStub}
325-
/>
326-
)}
327-
328314
<div className={classes.summary}>
329315
<div className={classes.actions}>
330316
<Button
@@ -353,6 +339,19 @@ export const Clone = observer((props: Props) => {
353339
<Spinner size="sm" className={classes.spinner} />
354340
)}
355341
</Button>
342+
<Button
343+
variant="contained"
344+
color="primary"
345+
onClick={createSnapshot}
346+
disabled={isDisabledControls}
347+
title={'Destroy this clone'}
348+
className={classes.actionButton}
349+
>
350+
Create snapshot
351+
{snapshots.snapshotDataLoading && (
352+
<Spinner size="sm" className={classes.spinner} />
353+
)}
354+
</Button>
356355
<Button
357356
variant="outlined"
358357
color="secondary"
@@ -365,7 +364,22 @@ export const Clone = observer((props: Props) => {
365364
{isReloading && <Spinner size="sm" className={classes.spinner} />}
366365
</Button>
367366
</div>
367+
{stores.main.destroyCloneError ||
368+
(stores.main.resetCloneError && (
369+
<ErrorStub
370+
title={'test' ? 'Destroying error' : 'Resetting error'}
371+
message={'test' || stores.main.resetCloneError}
372+
className={classes.errorStub}
373+
/>
374+
))}
368375
<div>
376+
<p>
377+
<strong>Branch</strong>
378+
</p>
379+
<p className={classes.text}>{clone.branch}</p>
380+
</div>
381+
382+
<div className={classes.title}>
369383
<p>
370384
<strong>Created</strong>
371385
</p>
@@ -651,8 +665,8 @@ export const Clone = observer((props: Props) => {
651665
text={'Toggle deletion protection using CLI'}
652666
/>
653667
<p className={classes.tooltip}>
654-
You can toggle deletion protection using CLI for this clone
655-
using the following command:
668+
You can toggle deletion protection using CLI for this clone using
669+
the following command:
656670
</p>
657671
<SyntaxHighlight content={getCliProtectedCloneCommand(true)} />
658672

0 commit comments

Comments
 (0)