Skip to content

Commit 5cae3ff

Browse files
tito12tito12
authored
Soft delete of jobs and datasets. Style dialog component (#2343)
* Soft delete of jobs and datasets. Style dialog component Signed-off-by: tito12 <vladyslav.sedenko@gmail.com> * fix unit tests Signed-off-by: tito12 <vladyslav.sedenko@gmail.com> * fix unit tests Signed-off-by: tito12 <vladyslav.sedenko@gmail.com> * Fix unit web tests and lint Signed-off-by: tito12 <vladyslav.sedenko@gmail.com> * fix lint code Signed-off-by: tito12 <vladyslav.sedenko@gmail.com> * Changes after review. Button style, i18next and else Signed-off-by: tito12 <vladyslav.sedenko@gmail.com> * fix unit web tests Signed-off-by: tito12 <vladyslav.sedenko@gmail.com> Signed-off-by: tito12 <vladyslav.sedenko@gmail.com>
1 parent a5bd35d commit 5cae3ff

15 files changed

Lines changed: 354 additions & 75 deletions

File tree

‎web/src/__tests__/components/Dialog.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ describe('Dialog Component', () => {
1111
const mockProps = {
1212
dialogIsOpen: true,
1313
dialogToggle: dialogToggle,
14-
ignoreWarning: ignoreWarning
14+
ignoreWarning: ignoreWarning,
15+
editWarningField: 'Description of dialog...'
1516
}
1617

1718
const ignoreWarning = () => {
@@ -31,5 +32,4 @@ describe('Dialog Component', () => {
3132
it('renders a snapshot that matches previous', () => {
3233
expect(wrapper).toMatchSnapshot()
3334
})
34-
3535
})

‎web/src/__tests__/components/__snapshots__/Dialog.test.tsx.snap‎

Lines changed: 37 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,41 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`Dialog Component renders a snapshot that matches previous 1`] = `
4-
<div>
5-
<WithStyles(ForwardRef(Dialog))
6-
open={true}
7-
>
8-
<WithStyles(ForwardRef(DialogTitle)) />
9-
<WithStyles(ForwardRef(DialogContent))>
10-
<WithStyles(ForwardRef(DialogContentText)) />
11-
</WithStyles(ForwardRef(DialogContent))>
12-
<WithStyles(ForwardRef(DialogActions))>
13-
<WithStyles(ForwardRef(Button))
14-
className="dialogButton"
15-
color="secondary"
16-
>
17-
Continue
18-
</WithStyles(ForwardRef(Button))>
19-
<WithStyles(ForwardRef(Button))
20-
className="dialogButton"
21-
color="primary"
22-
onClick={[Function]}
23-
>
24-
Cancel
25-
</WithStyles(ForwardRef(Button))>
26-
</WithStyles(ForwardRef(DialogActions))>
27-
</WithStyles(ForwardRef(Dialog))>
28-
</div>
4+
<WithStyles(ForwardRef(Dialog))
5+
open={true}
6+
>
7+
<WithStyles(ForwardRef(DialogTitle)) />
8+
<WithStyles(ForwardRef(DialogContent))>
9+
<WithStyles(ForwardRef(DialogContentText))>
10+
Description of dialog...
11+
</WithStyles(ForwardRef(DialogContentText))>
12+
</WithStyles(ForwardRef(DialogContent))>
13+
<WithStyles(ForwardRef(DialogContent))>
14+
<WithStyles(ForwardRef(DialogContentText))>
15+
Description of dialog...
16+
</WithStyles(ForwardRef(DialogContentText))>
17+
</WithStyles(ForwardRef(DialogContent))>
18+
<WithStyles(ForwardRef(DialogActions))>
19+
<WithStyles(ForwardRef(Button))
20+
className="dialogButton"
21+
color="primary"
22+
onClick={[Function]}
23+
style={
24+
Object {
25+
"backgroundColor": "#ee7b7b",
26+
"color": "#fff",
27+
}
28+
}
29+
>
30+
Cancel
31+
</WithStyles(ForwardRef(Button))>
32+
<WithStyles(ForwardRef(Button))
33+
className="dialogButton"
34+
color="primary"
35+
variant="outlined"
36+
>
37+
Continue
38+
</WithStyles(ForwardRef(Button))>
39+
</WithStyles(ForwardRef(DialogActions))>
40+
</WithStyles(ForwardRef(Dialog))>
2941
`;

‎web/src/__tests__/reducers/datasets.test.ts‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@ describe('datasets reducer', () => {
1414
datasets: datasets
1515
}
1616
}
17-
expect(datasetsReducer(initialState, action)).toStrictEqual({init: true, isLoading: false, result: datasets})
17+
expect(datasetsReducer(initialState, action)).toStrictEqual({
18+
init: true,
19+
isLoading: false,
20+
result: datasets,
21+
deletedDatasetName: ''
22+
})
1823
})
1924

2025
})

‎web/src/__tests__/reducers/jobs.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ describe('jobs reducer', () => {
1616
jobs: jobs
1717
}
1818
}
19-
expect(jobsReducer(initialState, action)).toStrictEqual({ isLoading: false, result: jobs, init: true })
19+
expect(jobsReducer(initialState, action)).toStrictEqual({ isLoading: false, result: jobs, init: true, deletedJobName: '' })
2020
})
2121
})
2222

‎web/src/components/Dialog.tsx‎

Lines changed: 32 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
// Copyright 2018-2023 contributors to the Marquez project
22
// SPDX-License-Identifier: Apache-2.0
33

4-
import * as React from 'react'
54
import { dialogToggle } from '../store/actionCreators'
5+
import { theme } from '../helpers/theme'
66
import Button from '@material-ui/core/Button'
77
import Dialog from '@material-ui/core/Dialog'
88
import DialogActions from '@material-ui/core/DialogActions'
99
import DialogContent from '@material-ui/core/DialogContent'
1010
import DialogContentText from '@material-ui/core/DialogContentText'
1111
import DialogTitle from '@material-ui/core/DialogTitle'
12+
import React, { FunctionComponent } from 'react'
1213

1314
interface IProps {
1415
dialogIsOpen: boolean
@@ -18,27 +19,42 @@ interface IProps {
1819
title?: string
1920
}
2021

21-
export default function AlertDialog(props: IProps) {
22-
function handleClose() {
22+
const AlertDialog: FunctionComponent<IProps> = props => {
23+
const handleClose = () => {
2324
props.dialogToggle('')
2425
}
2526

2627
return (
27-
<div>
28-
<Dialog open={props.dialogIsOpen}>
29-
<DialogTitle>{props.title}</DialogTitle>
28+
<Dialog open={props.dialogIsOpen}>
29+
<DialogTitle>{props.title}</DialogTitle>
30+
{props.editWarningField && (
3031
<DialogContent>
3132
<DialogContentText>{props.editWarningField}</DialogContentText>
3233
</DialogContent>
33-
<DialogActions>
34-
<Button className='dialogButton' color='secondary' onClick={props.ignoreWarning}>
35-
Continue
36-
</Button>
37-
<Button className='dialogButton' color='primary' onClick={handleClose}>
38-
Cancel
39-
</Button>
40-
</DialogActions>
41-
</Dialog>
42-
</div>
34+
)}
35+
<DialogContent>
36+
<DialogContentText>{props.editWarningField}</DialogContentText>
37+
</DialogContent>
38+
<DialogActions>
39+
<Button
40+
className='dialogButton'
41+
color='primary'
42+
onClick={handleClose}
43+
style={{ backgroundColor: theme.palette.error.main, color: theme.palette.common.white }}
44+
>
45+
Cancel
46+
</Button>
47+
<Button
48+
className='dialogButton'
49+
color='primary'
50+
variant='outlined'
51+
onClick={props.ignoreWarning}
52+
>
53+
Continue
54+
</Button>
55+
</DialogActions>
56+
</Dialog>
4357
)
4458
}
59+
60+
export default AlertDialog

‎web/src/components/datasets/DatasetDetailPage.tsx‎

Lines changed: 60 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// SPDX-License-Identifier: Apache-2.0
33

44
import * as Redux from 'redux'
5-
import { Box, Chip, Tab, Tabs } from '@material-ui/core'
5+
import { Box, Button, Chip, Tab, Tabs } from '@material-ui/core'
66
import { DatasetVersion } from '../../types/api'
77
import { IState } from '../../store/reducers'
88
import {
@@ -12,19 +12,24 @@ import {
1212
withStyles
1313
} from '@material-ui/core/styles'
1414
import { LineageDataset } from '../lineage/types'
15+
import { alpha } from '@material-ui/core/styles'
1516
import { bindActionCreators } from 'redux'
1617
import { connect } from 'react-redux'
1718
import {
19+
deleteDataset,
20+
dialogToggle,
1821
fetchDatasetVersions,
1922
resetDataset,
2023
resetDatasetVersions
2124
} from '../../store/actionCreators'
25+
import { theme } from '../../helpers/theme'
2226
import { useHistory } from 'react-router-dom'
2327
import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress'
2428
import CloseIcon from '@material-ui/icons/Close'
2529
import DatasetColumnLineage from './DatasetColumnLineage'
2630
import DatasetInfo from './DatasetInfo'
2731
import DatasetVersions from './DatasetVersions'
32+
import Dialog from '../Dialog'
2833
import IconButton from '@material-ui/core/IconButton'
2934
import MqText from '../core/text/MqText'
3035
import React, { ChangeEvent, FunctionComponent, SetStateAction, useEffect } from 'react'
@@ -45,6 +50,14 @@ const styles = ({ spacing }: ITheme) => {
4550
'&:not(:last-of-type)': {
4651
marginRight: spacing(1)
4752
}
53+
},
54+
buttonDelete: {
55+
borderColor: theme.palette.error.main,
56+
color: theme.palette.error.main,
57+
'&:hover': {
58+
borderColor: alpha(theme.palette.error.main, 0.3),
59+
backgroundColor: alpha(theme.palette.error.main, 0.3)
60+
}
4861
}
4962
})
5063
}
@@ -53,12 +66,16 @@ interface StateProps {
5366
lineageDataset: LineageDataset
5467
versions: DatasetVersion[]
5568
versionsLoading: boolean
69+
datasets: IState['datasets']
70+
display: IState['display']
5671
}
5772

5873
interface DispatchProps {
5974
fetchDatasetVersions: typeof fetchDatasetVersions
6075
resetDatasetVersions: typeof resetDatasetVersions
6176
resetDataset: typeof resetDataset
77+
deleteDataset: typeof deleteDataset
78+
dialogToggle: typeof dialogToggle
6279
}
6380

6481
type IProps = IWithStyles<typeof styles> & StateProps & DispatchProps
@@ -73,11 +90,16 @@ function a11yProps(index: number) {
7390
const DatasetDetailPage: FunctionComponent<IProps> = props => {
7491
const {
7592
classes,
93+
datasets,
94+
display,
7695
fetchDatasetVersions,
7796
resetDataset,
7897
resetDatasetVersions,
98+
deleteDataset,
99+
dialogToggle,
79100
versions,
80-
versionsLoading
101+
versionsLoading,
102+
lineageDataset
81103
} = props
82104
const { root } = classes
83105
const history = useHistory()
@@ -87,6 +109,12 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
87109
fetchDatasetVersions(props.lineageDataset.namespace, props.lineageDataset.name)
88110
}, [props.lineageDataset.name])
89111

112+
useEffect(() => {
113+
if (datasets.deletedDatasetName) {
114+
history.push('/datasets')
115+
}
116+
}, [datasets.deletedDatasetName])
117+
90118
// unmounting
91119
useEffect(
92120
() => () => {
@@ -148,9 +176,31 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
148176
/>
149177
</Tabs>
150178
</Box>
151-
<IconButton onClick={() => history.push('/datasets')}>
152-
<CloseIcon />
153-
</IconButton>
179+
<Box display={'flex'} alignItems={'center'}>
180+
<Box mr={1}>
181+
<Button
182+
variant='outlined'
183+
className={classes.buttonDelete}
184+
onClick={() => {
185+
props.dialogToggle('')
186+
}}
187+
>
188+
{i18next.t('datasets.dialog_delete')}
189+
</Button>
190+
<Dialog
191+
dialogIsOpen={display.dialogIsOpen}
192+
dialogToggle={dialogToggle}
193+
title={i18next.t('jobs.dialog_confirmation_title')}
194+
ignoreWarning={() => {
195+
deleteDataset(lineageDataset.name, lineageDataset.namespace)
196+
props.dialogToggle('')
197+
}}
198+
/>
199+
</Box>
200+
<IconButton onClick={() => history.push('/datasets')}>
201+
<CloseIcon />
202+
</IconButton>
203+
</Box>
154204
</Box>
155205
<MqText heading font={'mono'}>
156206
{name}
@@ -173,7 +223,8 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
173223
}
174224

175225
const mapStateToProps = (state: IState) => ({
176-
datasets: state.datasets.result,
226+
datasets: state.datasets,
227+
display: state.display,
177228
versions: state.datasetVersions.result.versions,
178229
versionsLoading: state.datasetVersions.isLoading
179230
})
@@ -183,7 +234,9 @@ const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
183234
{
184235
fetchDatasetVersions: fetchDatasetVersions,
185236
resetDatasetVersions: resetDatasetVersions,
186-
resetDataset: resetDataset
237+
resetDataset: resetDataset,
238+
deleteDataset: deleteDataset,
239+
dialogToggle: dialogToggle
187240
},
188241
dispatch
189242
)

0 commit comments

Comments
 (0)
⚡