-
Notifications
You must be signed in to change notification settings - Fork 176
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
frontend: Allow multiple deletes on ResourceTable
* allow row selection * externalize logic Signed-off-by: farodin91 <[email protected]>
- Loading branch information
Showing
41 changed files
with
4,147 additions
and
647 deletions.
There are no files selected for viewing
109 changes: 109 additions & 0 deletions
109
frontend/src/components/common/Resource/DeleteMultipleButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,109 @@ | ||
import _ from 'lodash'; | ||
import React from 'react'; | ||
import { useTranslation } from 'react-i18next'; | ||
import { useDispatch } from 'react-redux'; | ||
import { KubeObject } from '../../../lib/k8s/KubeObject'; | ||
import { CallbackActionOptions, clusterAction } from '../../../redux/clusterActionSlice'; | ||
import { | ||
EventStatus, | ||
HeadlampEventType, | ||
useEventCallback, | ||
} from '../../../redux/headlampEventSlice'; | ||
import { AppDispatch } from '../../../redux/stores/store'; | ||
import ActionButton, { ButtonStyle } from '../ActionButton'; | ||
import { ConfirmDialog } from '../Dialog'; | ||
|
||
interface DeleteMultipleButtonProps { | ||
items?: KubeObject[]; | ||
options?: CallbackActionOptions; | ||
buttonStyle?: ButtonStyle; | ||
afterConfirm?: () => void; | ||
} | ||
|
||
interface DeleteMultipleButtonDescriptionProps { | ||
items?: KubeObject[]; | ||
} | ||
|
||
function DeleteMultipleButtonDescription(props: DeleteMultipleButtonDescriptionProps) { | ||
const { t } = useTranslation(['translation']); | ||
return ( | ||
<p> | ||
{t('Are you sure you want to delete following items?')} | ||
<ul> | ||
{props.items?.map(item => ( | ||
<li key={item.metadata.uid}>{item.metadata.name}</li> | ||
))} | ||
</ul> | ||
</p> | ||
); | ||
} | ||
|
||
export default function DeleteMultipleButton(props: DeleteMultipleButtonProps) { | ||
const dispatch: AppDispatch = useDispatch(); | ||
const { items, options, afterConfirm, buttonStyle } = props; | ||
const [openAlert, setOpenAlert] = React.useState(false); | ||
const { t } = useTranslation(['translation']); | ||
const dispatchDeleteEvent = useEventCallback(HeadlampEventType.DELETE_RESOURCES); | ||
|
||
const deleteFunc = React.useCallback( | ||
(items: KubeObject[]) => { | ||
if (!items || items.length === 0) { | ||
return; | ||
} | ||
const clonedItems = _.cloneDeep(items); | ||
const itemsLength = clonedItems.length; | ||
|
||
dispatch( | ||
clusterAction( | ||
async () => { | ||
await Promise.all(items.map(item => item.delete())); | ||
}, | ||
{ | ||
startMessage: t('Deleting {{ itemsLength }} items…', { itemsLength }), | ||
cancelledMessage: t('Cancelled deletion of {{ itemsLength }} items.', { itemsLength }), | ||
successMessage: t('Deleted {{ itemsLength }} items.', { itemsLength }), | ||
errorMessage: t('Error deleting {{ itemsLength }} items.', { itemsLength }), | ||
cancelUrl: location.pathname, | ||
startUrl: location.pathname, | ||
errorUrl: location.pathname, | ||
...options, | ||
} | ||
) | ||
); | ||
}, | ||
[options] | ||
); | ||
|
||
if (!items || items.length === 0) { | ||
return null; | ||
} | ||
|
||
return ( | ||
<> | ||
<ActionButton | ||
description={t('translation|Delete items')} | ||
buttonStyle={buttonStyle} | ||
onClick={() => { | ||
setOpenAlert(true); | ||
}} | ||
icon="mdi:delete" | ||
/> | ||
<ConfirmDialog | ||
open={openAlert} | ||
title={t('translation|Delete items')} | ||
description={<DeleteMultipleButtonDescription items={items} />} | ||
handleClose={() => setOpenAlert(false)} | ||
onConfirm={() => { | ||
deleteFunc(items); | ||
dispatchDeleteEvent({ | ||
resources: items, | ||
status: EventStatus.CONFIRMED, | ||
}); | ||
if (afterConfirm) { | ||
afterConfirm(); | ||
} | ||
}} | ||
/> | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
frontend/src/components/common/Resource/ResourceTableMultiActions.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
import { Grid } from '@mui/material'; | ||
import { MRT_TableInstance } from 'material-react-table'; | ||
import { useCallback } from 'react'; | ||
import { KubeObject } from '../../../lib/k8s/KubeObject'; | ||
import DeleteMultipleButton from './DeleteMultipleButton'; | ||
|
||
export interface ResourceTableMultiActionsProps<RowItem extends Record<string, any>> { | ||
table: MRT_TableInstance<RowItem>; | ||
} | ||
|
||
export default function ResourceTableMultiActions<RowItem extends Record<string, any>>( | ||
props: ResourceTableMultiActionsProps<RowItem> | ||
) { | ||
const { table } = props; | ||
const items = table.getSelectedRowModel().rows.map(t => t.original as unknown as KubeObject); | ||
|
||
const afterConfirm = useCallback(() => { | ||
table.resetRowSelection(); | ||
}, [table]); | ||
return ( | ||
<Grid item> | ||
<Grid item container alignItems="center" justifyContent="flex-end"> | ||
<DeleteMultipleButton items={items} afterConfirm={afterConfirm} /> | ||
</Grid> | ||
</Grid> | ||
); | ||
} |
Oops, something went wrong.