|
|
|
@ -3,7 +3,7 @@ import React, { useMemo } from 'react'; |
|
|
|
|
|
|
|
|
|
import { GrafanaTheme2, SelectableValue } from '@grafana/data'; |
|
|
|
|
import { AccessoryButton } from '@grafana/experimental'; |
|
|
|
|
import { MenuGroup, MenuItem, useTheme2, WithContextMenu } from '@grafana/ui'; |
|
|
|
|
import { useTheme2 } from '@grafana/ui'; |
|
|
|
|
|
|
|
|
|
import { toSelectableValue } from '../utils/toSelectableValue'; |
|
|
|
|
import { unwrap } from '../utils/unwrap'; |
|
|
|
@ -27,31 +27,11 @@ type Props = { |
|
|
|
|
onAddNewPart: (type: string) => void; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const renderRemovableNameMenuItems = (onClick: () => void) => { |
|
|
|
|
return ( |
|
|
|
|
<MenuGroup label=""> |
|
|
|
|
<MenuItem label="remove" onClick={onClick} /> |
|
|
|
|
</MenuGroup> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const noRightMarginPaddingClass = css({ |
|
|
|
|
paddingRight: '0', |
|
|
|
|
marginRight: '0', |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const RemovableName = ({ name, onRemove }: { name: string; onRemove: () => void }) => { |
|
|
|
|
return ( |
|
|
|
|
<WithContextMenu renderMenuItems={() => renderRemovableNameMenuItems(onRemove)}> |
|
|
|
|
{({ openMenu }) => ( |
|
|
|
|
<button className={cx('gf-form-label', noRightMarginPaddingClass)} onClick={openMenu}> |
|
|
|
|
{name} |
|
|
|
|
</button> |
|
|
|
|
)} |
|
|
|
|
</WithContextMenu> |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
type PartProps = { |
|
|
|
|
name: string; |
|
|
|
|
params: PartParams; |
|
|
|
@ -79,7 +59,7 @@ const getPartClass = (theme: GrafanaTheme2) => { |
|
|
|
|
); |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
const Part = ({ name, params, onChange, onRemove }: PartProps): JSX.Element => { |
|
|
|
|
const Part = ({ name, params, onChange }: PartProps): JSX.Element => { |
|
|
|
|
const theme = useTheme2(); |
|
|
|
|
const partClass = useMemo(() => getPartClass(theme), [theme]); |
|
|
|
|
|
|
|
|
@ -90,7 +70,7 @@ const Part = ({ name, params, onChange, onRemove }: PartProps): JSX.Element => { |
|
|
|
|
}; |
|
|
|
|
return ( |
|
|
|
|
<div className={partClass}> |
|
|
|
|
<RemovableName name={name} onRemove={onRemove} />( |
|
|
|
|
<button className={cx('gf-form-label', noRightMarginPaddingClass)}>{name}</button>( |
|
|
|
|
{params.map((p, i) => { |
|
|
|
|
const { value, options } = p; |
|
|
|
|
const isLast = i === params.length - 1; |
|
|
|
|