86 lines
2.1 KiB
TypeScript
86 lines
2.1 KiB
TypeScript
import * as React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import Menu from '@mui/material/Menu';
|
|
import type { PopoverProps } from '@mui/material/Popover';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import type { IConnection } from 'types';
|
|
|
|
import * as URLS from 'config/urls';
|
|
import useFormatMessage from 'hooks/useFormatMessage';
|
|
|
|
type Action = {
|
|
type: 'test' | 'reconnect' | 'delete' | 'viewFlows';
|
|
};
|
|
|
|
type ContextMenuProps = {
|
|
appKey: string;
|
|
connection: IConnection;
|
|
onClose: () => void;
|
|
onMenuItemClick: (event: React.MouseEvent, action: Action) => void;
|
|
anchorEl: PopoverProps['anchorEl'];
|
|
disableReconnection: boolean;
|
|
};
|
|
|
|
export default function ContextMenu(
|
|
props: ContextMenuProps
|
|
): React.ReactElement {
|
|
const {
|
|
appKey,
|
|
connection,
|
|
onClose,
|
|
onMenuItemClick,
|
|
anchorEl,
|
|
disableReconnection,
|
|
} = props;
|
|
const formatMessage = useFormatMessage();
|
|
|
|
const createActionHandler = React.useCallback(
|
|
(action: Action) => {
|
|
return function clickHandler(event: React.MouseEvent) {
|
|
onMenuItemClick(event, action);
|
|
|
|
onClose();
|
|
};
|
|
},
|
|
[onMenuItemClick, onClose]
|
|
);
|
|
|
|
return (
|
|
<Menu
|
|
open={true}
|
|
onClose={onClose}
|
|
hideBackdrop={false}
|
|
anchorEl={anchorEl}
|
|
>
|
|
<MenuItem
|
|
component={Link}
|
|
to={URLS.APP_FLOWS_FOR_CONNECTION(appKey, connection.id)}
|
|
onClick={createActionHandler({ type: 'viewFlows' })}
|
|
>
|
|
{formatMessage('connection.viewFlows')}
|
|
</MenuItem>
|
|
|
|
<MenuItem onClick={createActionHandler({ type: 'test' })}>
|
|
{formatMessage('connection.testConnection')}
|
|
</MenuItem>
|
|
|
|
<MenuItem
|
|
component={Link}
|
|
disabled={disableReconnection}
|
|
to={URLS.APP_RECONNECT_CONNECTION(
|
|
appKey,
|
|
connection.id,
|
|
connection.appAuthClientId
|
|
)}
|
|
onClick={createActionHandler({ type: 'reconnect' })}
|
|
>
|
|
{formatMessage('connection.reconnect')}
|
|
</MenuItem>
|
|
|
|
<MenuItem onClick={createActionHandler({ type: 'delete' })}>
|
|
{formatMessage('connection.delete')}
|
|
</MenuItem>
|
|
</Menu>
|
|
);
|
|
}
|