import { deletePipelineGraphics } from '@/services/data/tuples/pipeline' ; import { Button } from '@/widgets/basic/button' ; import { ICON_THROW_AWAY } from '@/widgets/basic/constants' ; import { PageHeaderButton } from '@/widgets/basic/page-header-buttons' ; import { ButtonInk } from '@/widgets/basic/types' ; import { DialogBody , DialogFooter , DialogLabel } from '@/widgets/dialog/widgets' ; import { useEventBus } from '@/widgets/events/event-bus' ; import { EventTypes } from '@/widgets/events/types' ; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' ; import React from 'react' ; import styled from 'styled-components' ; import { useAdminCacheEventBus } from '../../../cache/cache-event-bus' ; import { AdminCacheEventTypes } from '../../../cache/cache-event-bus-types' ; import { useCatalogEventBus } from '../catalog-event-bus' ; import { CatalogEventTypes } from '../catalog-event-bus-types' ; import { AssembledPipelinesGraphics } from '../types' ; const DeleteDialogBody = styled ( DialogBody ) `
	flex-direction : column;
	margin-bottom  : var(--margin);
` ; const NameUrl = styled . div `
	color       : var(--info-color);
	font-weight : var(--font-bold);
	padding-top : calc(var(--margin) / 2);
	word-break  : break-all;
	line-height : var(--line-height);
` ; const PipelineGraphicsDelete = ( props ) => { const { graphics , onRemoved } = props ; const { fire } = useEventBus ( ) ; const onDeleteClicked = async ( ) => { fire ( EventTypes . HIDE_DIALOG ) ; fire ( EventTypes . INVOKE_REMOTE_REQUEST , async ( ) => await deletePipelineGraphics ( graphics . pipelineGraphId ) , async ( ) => onRemoved ( ) ) ; } ; const onCancelClicked = ( ) => { fire ( EventTypes . HIDE_DIALOG ) ; } ; return < > < DeleteDialogBody > < DialogLabel > Are you sure to delete pipeline group ? Please note that deletion cannot be recovered . < /DialogLabel> < NameUrl > { graphics . name } < /NameUrl> < /DeleteDialogBody> < DialogFooter > < Button ink = { ButtonInk . DANGER } onClick = { onDeleteClicked } > Delete < /Button> < Button ink = { ButtonInk . PRIMARY } onClick = { onCancelClicked } > Cancel < /Button> < /DialogFooter> < />; } ; export const HeaderDeleteMeButton = ( props ) => { const { graphics } = props ; const { fire : fireGlobal } = useEventBus ( ) ; const { fire : fireCache } = useAdminCacheEventBus ( ) ; const { fire } = useCatalogEventBus ( ) ; const onDeleted = async ( ) => { fireCache ( AdminCacheEventTypes . REMOVE_PIPELINES_GRAPHICS , graphics . pipelineGraphId ) ; fire ( CatalogEventTypes . GRAPHICS_REMOVED , graphics ) ; } ; const onDeleteClicked = ( ) => { fireGlobal ( EventTypes . SHOW_DIALOG , < PipelineGraphicsDelete graphics = { graphics } onRemoved = { onDeleted } / > ) ; } ; return < PageHeaderButton tooltip = "Delete Me" onClick = { onDeleteClicked } > < FontAwesomeIcon icon = { ICON_THROW_AWAY } /> < /PageHeaderButton>; } ;