Soft delete of jobs and datasets. Style dialog component (#2343)

* Soft delete of jobs and datasets. Style dialog component Signed-off-by: tito12 <[email protected]> * fix unit tests Signed-off-by: tito12 <[email protected]> * fix unit tests Signed-off-by: tito12 <[email protected]> * Fix unit web tests and lint Signed-off-by: tito12 <[email protected]> * fix lint code Signed-off-by: tito12 <[email protected]> * Changes after review. Button style, i18next and else Signed-off-by: tito12 <[email protected]> * fix unit web tests Signed-off-by: tito12 <[email protected]> Signed-off-by: tito12 <[email protected]>
MarquezProject · Jan 13, 2023 · 5cae3ff · 5cae3ff
1 parent a5bd35d
commit 5cae3ff
Show file tree

Hide file tree

Showing 15 changed files with 354 additions and 75 deletions.
diff --git a/web/src/__tests__/components/Dialog.test.tsx b/web/src/__tests__/components/Dialog.test.tsx
@@ -11,7 +11,8 @@ describe('Dialog Component', () => {
   const mockProps = {
     dialogIsOpen: true,
     dialogToggle: dialogToggle,
-    ignoreWarning: ignoreWarning
+    ignoreWarning: ignoreWarning,
+    editWarningField: 'Description of dialog...'
   }
 
   const ignoreWarning = () => {
@@ -31,5 +32,4 @@ describe('Dialog Component', () => {
   it('renders a snapshot that matches previous', () => {
     expect(wrapper).toMatchSnapshot()
   })
-
 })
diff --git a/web/src/__tests__/components/__snapshots__/Dialog.test.tsx.snap b/web/src/__tests__/components/__snapshots__/Dialog.test.tsx.snap
@@ -1,29 +1,41 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Dialog Component renders a snapshot that matches previous 1`] = `
-<div>
-  <WithStyles(ForwardRef(Dialog))
-    open={true}
-  >
-    <WithStyles(ForwardRef(DialogTitle)) />
-    <WithStyles(ForwardRef(DialogContent))>
-      <WithStyles(ForwardRef(DialogContentText)) />
-    </WithStyles(ForwardRef(DialogContent))>
-    <WithStyles(ForwardRef(DialogActions))>
-      <WithStyles(ForwardRef(Button))
-        className="dialogButton"
-        color="secondary"
-      >
-        Continue
-      </WithStyles(ForwardRef(Button))>
-      <WithStyles(ForwardRef(Button))
-        className="dialogButton"
-        color="primary"
-        onClick={[Function]}
-      >
-        Cancel
-      </WithStyles(ForwardRef(Button))>
-    </WithStyles(ForwardRef(DialogActions))>
-  </WithStyles(ForwardRef(Dialog))>
-</div>
+<WithStyles(ForwardRef(Dialog))
+  open={true}
+>
+  <WithStyles(ForwardRef(DialogTitle)) />
+  <WithStyles(ForwardRef(DialogContent))>
+    <WithStyles(ForwardRef(DialogContentText))>
+      Description of dialog...
+    </WithStyles(ForwardRef(DialogContentText))>
+  </WithStyles(ForwardRef(DialogContent))>
+  <WithStyles(ForwardRef(DialogContent))>
+    <WithStyles(ForwardRef(DialogContentText))>
+      Description of dialog...
+    </WithStyles(ForwardRef(DialogContentText))>
+  </WithStyles(ForwardRef(DialogContent))>
+  <WithStyles(ForwardRef(DialogActions))>
+    <WithStyles(ForwardRef(Button))
+      className="dialogButton"
+      color="primary"
+      onClick={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#ee7b7b",
+          "color": "#fff",
+        }
+      }
+    >
+      Cancel
+    </WithStyles(ForwardRef(Button))>
+    <WithStyles(ForwardRef(Button))
+      className="dialogButton"
+      color="primary"
+      variant="outlined"
+    >
+      Continue
+    </WithStyles(ForwardRef(Button))>
+  </WithStyles(ForwardRef(DialogActions))>
+</WithStyles(ForwardRef(Dialog))>
 `;
diff --git a/web/src/__tests__/reducers/datasets.test.ts b/web/src/__tests__/reducers/datasets.test.ts
@@ -14,7 +14,12 @@ describe('datasets reducer', () => {
         datasets: datasets
       }
     }
-    expect(datasetsReducer(initialState, action)).toStrictEqual({init: true, isLoading: false, result: datasets})
+    expect(datasetsReducer(initialState, action)).toStrictEqual({
+      init: true, 
+      isLoading: false, 
+      result: datasets, 
+      deletedDatasetName: ''
+    })
   })
 
 })
diff --git a/web/src/__tests__/reducers/jobs.test.ts b/web/src/__tests__/reducers/jobs.test.ts
@@ -16,7 +16,7 @@ describe('jobs reducer', () => {
         jobs: jobs
       }
     }
-    expect(jobsReducer(initialState, action)).toStrictEqual({ isLoading: false, result: jobs, init: true })
+    expect(jobsReducer(initialState, action)).toStrictEqual({ isLoading: false, result: jobs, init: true, deletedJobName: '' })
   })
 })
 

diff --git a/web/src/components/Dialog.tsx b/web/src/components/Dialog.tsx
@@ -1,14 +1,15 @@
 // Copyright 2018-2023 contributors to the Marquez project
 // SPDX-License-Identifier: Apache-2.0
 
-import * as React from 'react'
 import { dialogToggle } from '../store/actionCreators'
+import { theme } from '../helpers/theme'
 import Button from '@material-ui/core/Button'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
+import React, { FunctionComponent } from 'react'
 
 interface IProps {
   dialogIsOpen: boolean
@@ -18,27 +19,42 @@ interface IProps {
   title?: string
 }
 
-export default function AlertDialog(props: IProps) {
-  function handleClose() {
+const AlertDialog: FunctionComponent<IProps> = props => {
+  const handleClose = () => {
     props.dialogToggle('')
   }
 
   return (
-    <div>
-      <Dialog open={props.dialogIsOpen}>
-        <DialogTitle>{props.title}</DialogTitle>
+    <Dialog open={props.dialogIsOpen}>
+      <DialogTitle>{props.title}</DialogTitle>
+      {props.editWarningField && (
         <DialogContent>
           <DialogContentText>{props.editWarningField}</DialogContentText>
         </DialogContent>
-        <DialogActions>
-          <Button className='dialogButton' color='secondary' onClick={props.ignoreWarning}>
-            Continue
-          </Button>
-          <Button className='dialogButton' color='primary' onClick={handleClose}>
-            Cancel
-          </Button>
-        </DialogActions>
-      </Dialog>
-    </div>
+      )}
+      <DialogContent>
+        <DialogContentText>{props.editWarningField}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          className='dialogButton'
+          color='primary'
+          onClick={handleClose}
+          style={{ backgroundColor: theme.palette.error.main, color: theme.palette.common.white }}
+        >
+          Cancel
+        </Button>
+        <Button
+          className='dialogButton'
+          color='primary'
+          variant='outlined'
+          onClick={props.ignoreWarning}
+        >
+          Continue
+        </Button>
+      </DialogActions>
+    </Dialog>
   )
 }
+
+export default AlertDialog
diff --git a/web/src/components/datasets/DatasetDetailPage.tsx b/web/src/components/datasets/DatasetDetailPage.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as Redux from 'redux'
-import { Box, Chip, Tab, Tabs } from '@material-ui/core'
+import { Box, Button, Chip, Tab, Tabs } from '@material-ui/core'
 import { DatasetVersion } from '../../types/api'
 import { IState } from '../../store/reducers'
 import {
@@ -12,19 +12,24 @@ import {
   withStyles
 } from '@material-ui/core/styles'
 import { LineageDataset } from '../lineage/types'
+import { alpha } from '@material-ui/core/styles'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import {
+  deleteDataset,
+  dialogToggle,
   fetchDatasetVersions,
   resetDataset,
   resetDatasetVersions
 } from '../../store/actionCreators'
+import { theme } from '../../helpers/theme'
 import { useHistory } from 'react-router-dom'
 import CircularProgress from '@material-ui/core/CircularProgress/CircularProgress'
 import CloseIcon from '@material-ui/icons/Close'
 import DatasetColumnLineage from './DatasetColumnLineage'
 import DatasetInfo from './DatasetInfo'
 import DatasetVersions from './DatasetVersions'
+import Dialog from '../Dialog'
 import IconButton from '@material-ui/core/IconButton'
 import MqText from '../core/text/MqText'
 import React, { ChangeEvent, FunctionComponent, SetStateAction, useEffect } from 'react'
@@ -45,6 +50,14 @@ const styles = ({ spacing }: ITheme) => {
       '&:not(:last-of-type)': {
         marginRight: spacing(1)
       }
+    },
+    buttonDelete: {
+      borderColor: theme.palette.error.main,
+      color: theme.palette.error.main,
+      '&:hover': {
+        borderColor: alpha(theme.palette.error.main, 0.3),
+        backgroundColor: alpha(theme.palette.error.main, 0.3)
+      }
     }
   })
 }
@@ -53,12 +66,16 @@ interface StateProps {
   lineageDataset: LineageDataset
   versions: DatasetVersion[]
   versionsLoading: boolean
+  datasets: IState['datasets']
+  display: IState['display']
 }
 
 interface DispatchProps {
   fetchDatasetVersions: typeof fetchDatasetVersions
   resetDatasetVersions: typeof resetDatasetVersions
   resetDataset: typeof resetDataset
+  deleteDataset: typeof deleteDataset
+  dialogToggle: typeof dialogToggle
 }
 
 type IProps = IWithStyles<typeof styles> & StateProps & DispatchProps
@@ -73,11 +90,16 @@ function a11yProps(index: number) {
 const DatasetDetailPage: FunctionComponent<IProps> = props => {
   const {
     classes,
+    datasets,
+    display,
     fetchDatasetVersions,
     resetDataset,
     resetDatasetVersions,
+    deleteDataset,
+    dialogToggle,
     versions,
-    versionsLoading
+    versionsLoading,
+    lineageDataset
   } = props
   const { root } = classes
   const history = useHistory()
@@ -87,6 +109,12 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
     fetchDatasetVersions(props.lineageDataset.namespace, props.lineageDataset.name)
   }, [props.lineageDataset.name])
 
+  useEffect(() => {
+    if (datasets.deletedDatasetName) {
+      history.push('/datasets')
+    }
+  }, [datasets.deletedDatasetName])
+
   // unmounting
   useEffect(
     () => () => {
@@ -148,9 +176,31 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
               />
             </Tabs>
           </Box>
-          <IconButton onClick={() => history.push('/datasets')}>
-            <CloseIcon />
-          </IconButton>
+          <Box display={'flex'} alignItems={'center'}>
+            <Box mr={1}>
+              <Button
+                variant='outlined'
+                className={classes.buttonDelete}
+                onClick={() => {
+                  props.dialogToggle('')
+                }}
+              >
+                {i18next.t('datasets.dialog_delete')}
+              </Button>
+              <Dialog
+                dialogIsOpen={display.dialogIsOpen}
+                dialogToggle={dialogToggle}
+                title={i18next.t('jobs.dialog_confirmation_title')}
+                ignoreWarning={() => {
+                  deleteDataset(lineageDataset.name, lineageDataset.namespace)
+                  props.dialogToggle('')
+                }}
+              />
+            </Box>
+            <IconButton onClick={() => history.push('/datasets')}>
+              <CloseIcon />
+            </IconButton>
+          </Box>
         </Box>
         <MqText heading font={'mono'}>
           {name}
@@ -173,7 +223,8 @@ const DatasetDetailPage: FunctionComponent<IProps> = props => {
 }
 
 const mapStateToProps = (state: IState) => ({
-  datasets: state.datasets.result,
+  datasets: state.datasets,
+  display: state.display,
   versions: state.datasetVersions.result.versions,
   versionsLoading: state.datasetVersions.isLoading
 })
@@ -183,7 +234,9 @@ const mapDispatchToProps = (dispatch: Redux.Dispatch) =>
     {
       fetchDatasetVersions: fetchDatasetVersions,
       resetDatasetVersions: resetDatasetVersions,
-      resetDataset: resetDataset
+      resetDataset: resetDataset,
+      deleteDataset: deleteDataset,
+      dialogToggle: dialogToggle
     },
     dispatch
   )