mirror of https://github.com/grafana/grafana
Transformations: State feature (alpha/beta) and more (#36630)
* Adding plugin state feature to transforms * initial help box * New HelpBox component * More progress * Testing * Removing HelpBox, simple new design, new active state for OperationRowAction * Updated tests * Fixed typing issue * Removed AlphaNotice * Made focus and enter key trigger OnClick and sorted transformations * Fixed e2e testspull/36675/head
Torkel Ödegaard
5 years ago
committed by
GitHub
parent
5e62bddd1d
commit
863b412d54
@ -1,10 +0,0 @@ |
||||
import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; |
||||
import { AlphaNotice } from './AlphaNotice'; |
||||
|
||||
<Meta title="MDX|AlphaNotice" component={AlphaNotice} /> |
||||
|
||||
# AlphaNotice |
||||
|
||||
Used to indicate plugin state - Alpha, Beta or Deprecated. |
||||
|
||||
<Props of={AlphaNotice}/> |
||||
@ -1,20 +0,0 @@ |
||||
import React from 'react'; |
||||
import { PluginState } from '@grafana/data'; |
||||
import { AlphaNotice } from './AlphaNotice'; |
||||
import { withCenteredStory, withHorizontallyCenteredStory } from '../../utils/storybook/withCenteredStory'; |
||||
import mdx from './AlphaNotice.mdx'; |
||||
|
||||
export default { |
||||
title: 'Overlays/AlphaNotice', |
||||
component: AlphaNotice, |
||||
decorators: [withCenteredStory, withHorizontallyCenteredStory], |
||||
parameters: { |
||||
docs: { |
||||
page: mdx, |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
export const basic = () => { |
||||
return <AlphaNotice state={PluginState.alpha} text="This is an alpha feature" />; |
||||
}; |
||||
@ -1,37 +0,0 @@ |
||||
import React, { FC, useContext } from 'react'; |
||||
import { css, cx } from '@emotion/css'; |
||||
import { ThemeContext } from '../../index'; |
||||
import { PluginState } from '@grafana/data'; |
||||
import { Icon } from '../Icon/Icon'; |
||||
|
||||
export interface Props { |
||||
state?: PluginState; |
||||
text?: string; |
||||
className?: string; |
||||
} |
||||
|
||||
export const AlphaNotice: FC<Props> = ({ state, text, className }) => { |
||||
const tooltipContent = text || 'This feature is a work in progress and updates may include breaking changes'; |
||||
const theme = useContext(ThemeContext); |
||||
|
||||
const styles = cx( |
||||
className, |
||||
css` |
||||
background: ${theme.colors.primary.transparent}; |
||||
color: ${theme.colors.text.secondary}; |
||||
white-space: nowrap; |
||||
border-radius: 3px; |
||||
text-shadow: none; |
||||
font-size: ${theme.typography.size.sm}; |
||||
padding: 0 8px; |
||||
cursor: help; |
||||
display: inline-block; |
||||
` |
||||
); |
||||
|
||||
return ( |
||||
<div className={styles} title={tooltipContent}> |
||||
<Icon name="exclamation-triangle" /> {state} |
||||
</div> |
||||
); |
||||
}; |
||||
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 25 KiB |
@ -0,0 +1,8 @@ |
||||
import { css } from '@emotion/react'; |
||||
import { GrafanaTheme2 } from '@grafana/data'; |
||||
|
||||
export function getMarkdownStyles(theme: GrafanaTheme2) { |
||||
return css` |
||||
// TODO copy from _utils.scss
|
||||
`;
|
||||
} |
||||
@ -0,0 +1,45 @@ |
||||
import React from 'react'; |
||||
import { css, cx } from '@emotion/css'; |
||||
import { GrafanaTheme2, renderMarkdown } from '@grafana/data'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
|
||||
export interface Props extends React.HTMLAttributes<HTMLDivElement> { |
||||
children?: React.ReactNode; |
||||
markdown?: string; |
||||
onRemove?: () => void; |
||||
} |
||||
|
||||
export const OperationRowHelp = React.memo( |
||||
React.forwardRef<HTMLDivElement, Props>(({ className, children, markdown, onRemove, ...otherProps }, ref) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
return ( |
||||
<div className={cx(styles.wrapper, className)} {...otherProps} ref={ref}> |
||||
{markdown && markdownHelper(markdown)} |
||||
{children} |
||||
</div> |
||||
); |
||||
}) |
||||
); |
||||
|
||||
function markdownHelper(markdown: string) { |
||||
const helpHtml = renderMarkdown(markdown); |
||||
return <div className="markdown-html" dangerouslySetInnerHTML={{ __html: helpHtml }} />; |
||||
} |
||||
|
||||
OperationRowHelp.displayName = 'OperationRowHelp'; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => { |
||||
const borderRadius = theme.shape.borderRadius(); |
||||
|
||||
return { |
||||
wrapper: css` |
||||
padding: ${theme.spacing(2)}; |
||||
border: 2px solid ${theme.colors.background.secondary}; |
||||
border-top: none; |
||||
border-radius: 0 0 ${borderRadius} ${borderRadius}; |
||||
position: relative; |
||||
top: -4px; |
||||
`,
|
||||
}; |
||||
}; |
||||
@ -1,29 +1,50 @@ |
||||
import React, { FC } from 'react'; |
||||
import { AlphaNotice } from '@grafana/ui'; |
||||
import { Badge, BadgeProps } from '@grafana/ui'; |
||||
import { PluginState } from '@grafana/data'; |
||||
|
||||
interface Props { |
||||
state?: PluginState; |
||||
} |
||||
|
||||
function getPluginStateInfoText(state?: PluginState): string | null { |
||||
switch (state) { |
||||
case PluginState.alpha: |
||||
return 'Alpha Plugin: This plugin is a work in progress and updates may include breaking changes'; |
||||
case PluginState.beta: |
||||
return 'Beta Plugin: There could be bugs and minor breaking changes to this plugin'; |
||||
} |
||||
return null; |
||||
} |
||||
|
||||
const PluginStateinfo: FC<Props> = (props) => { |
||||
const text = getPluginStateInfoText(props.state); |
||||
export const PluginStateInfo: FC<Props> = (props) => { |
||||
const display = getFeatureStateInfo(props.state); |
||||
|
||||
if (!text) { |
||||
if (!display) { |
||||
return null; |
||||
} |
||||
|
||||
return <AlphaNotice state={props.state} text={text} />; |
||||
return ( |
||||
<Badge |
||||
color={display.color} |
||||
title={display.tooltip} |
||||
text={display.text} |
||||
icon={display.icon} |
||||
tooltip={display.tooltip} |
||||
/> |
||||
); |
||||
}; |
||||
|
||||
export default PluginStateinfo; |
||||
function getFeatureStateInfo(state?: PluginState): BadgeProps | null { |
||||
switch (state) { |
||||
case PluginState.deprecated: |
||||
return { |
||||
text: 'Deprecated', |
||||
color: 'red', |
||||
tooltip: `This feature is deprecated and will be removed in a future release`, |
||||
}; |
||||
case PluginState.alpha: |
||||
return { |
||||
text: 'Alpha', |
||||
color: 'blue', |
||||
tooltip: `This feature is experimental and future updates might not be backward compatible`, |
||||
}; |
||||
case PluginState.beta: |
||||
return { |
||||
text: 'Beta', |
||||
color: 'blue', |
||||
tooltip: `This feature is close to complete but not fully tested`, |
||||
}; |
||||
default: |
||||
return null; |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue