diff --git a/packages/grafana-ui/src/components/InfoBox/DismissableFeatureInfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/DismissableFeatureInfoBox.tsx deleted file mode 100644 index d29dd6f1a5a..00000000000 --- a/packages/grafana-ui/src/components/InfoBox/DismissableFeatureInfoBox.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; -import { useLocalStorage } from 'react-use'; -import { FeatureInfoBox, FeatureInfoBoxProps } from './FeatureInfoBox'; - -export const FEATUREINFOBOX_PERSISTENCE_ID_PREFIX = 'grafana-ui.components.InfoBox.FeatureInfoBox'; - -export interface DismissableFeatureInfoBoxProps extends FeatureInfoBoxProps { - /** Unique id under which this instance will be persisted. */ - persistenceId: string; -} - -/** - @internal - Wraps FeatureInfoBox and perists if a user has dismissed the box in local storage. - */ -export const DismissableFeatureInfoBox = React.memo( - React.forwardRef( - ({ persistenceId, onDismiss, ...otherProps }, ref) => { - const localStorageKey = FEATUREINFOBOX_PERSISTENCE_ID_PREFIX.concat(persistenceId); - - const [dismissed, setDismissed] = useLocalStorage(localStorageKey, { isDismissed: false }); - - const dismiss = () => { - setDismissed({ isDismissed: true }); - if (onDismiss) { - onDismiss(); - } - }; - - if (dismissed.isDismissed) { - return null; - } - return ; - } - ) -); -DismissableFeatureInfoBox.displayName = 'DismissableFeatureInfoBox'; diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx index b7bbdc209d2..f4c00a93b1d 100644 --- a/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx +++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx @@ -2,13 +2,6 @@ import React from 'react'; import { FeatureState } from '@grafana/data'; import { InfoBox, FeatureInfoBox } from '@grafana/ui'; import mdx from './InfoBox.mdx'; -import { - DismissableFeatureInfoBox, - DismissableFeatureInfoBoxProps, - FEATUREINFOBOX_PERSISTENCE_ID_PREFIX, -} from './DismissableFeatureInfoBox'; -import { Button } from '../Button'; -import { css } from 'emotion'; import { Story } from '@storybook/react'; import { FeatureInfoBoxProps } from './FeatureInfoBox'; import { InfoBoxProps } from './InfoBox'; @@ -35,11 +28,10 @@ export default { }, }; -const defaultProps: DismissableFeatureInfoBoxProps = { +const defaultProps: FeatureInfoBoxProps = { title: 'A title', severity: 'info', url: 'http://www.grafana.com', - persistenceId: 'storybook-feature-info-box-persist', featureState: FeatureState.beta, children: ( @@ -59,27 +51,3 @@ infoBox.args = defaultProps; const FeatureInfoBoxTemplate: Story = (args) => ; export const featureInfoBox = FeatureInfoBoxTemplate.bind({}); featureInfoBox.args = defaultProps; - -const DismissableTemplate: Story = (args) => { - const onResetClick = () => { - localStorage.removeItem(FEATUREINFOBOX_PERSISTENCE_ID_PREFIX.concat(args.persistenceId)); - location.reload(); - }; - - return ( -
-
- -
-
- -
-
- ); -}; -export const dismissableFeatureInfoBox = DismissableTemplate.bind({}); -dismissableFeatureInfoBox.args = defaultProps; diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index f6847e493a3..a67294acf1b 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -103,7 +103,6 @@ export { DataLinksContextMenu } from './DataLinks/DataLinksContextMenu'; export { SeriesIcon } from './VizLegend/SeriesIcon'; export { InfoBox } from './InfoBox/InfoBox'; export { FeatureBadge, FeatureInfoBox } from './InfoBox/FeatureInfoBox'; -export { DismissableFeatureInfoBox } from './InfoBox/DismissableFeatureInfoBox'; export { JSONFormatter } from './JSONFormatter/JSONFormatter'; export { JsonExplorer } from './JSONFormatter/json_explorer/json_explorer'; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx index c1324bed2ed..6d0e7d71694 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx @@ -6,7 +6,7 @@ import { CustomScrollbar, stylesFactory, Themeable, - DismissableFeatureInfoBox, + FeatureInfoBox, useTheme, VerticalGroup, withTheme, @@ -33,6 +33,9 @@ import { TransformationOperationRows } from './TransformationOperationRows'; import { TransformationsEditorTransformation } from './types'; import { PanelNotSupported } from '../PanelEditor/PanelNotSupported'; import { AppNotificationSeverity } from '../../../../types'; +import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider'; + +const LOCAL_STORAGE_KEY = 'dashboard.components.TransformationEditor.featureInfoBox.isDismissed'; interface TransformationsEditorProps extends Themeable { panel: PanelModel; @@ -254,22 +257,34 @@ class UnThemedTransformationsEditor extends React.PureComponent {noTransforms && ( - -

- Transformations allow you to join, calculate, re-order, hide and rename your query results before being - visualized.
- Many transforms are not suitable if you're using the Graph visualization as it currently only - supports time series.
- It can help to switch to Table visualization to understand what a transformation is doing.
-

- + storageKey={LOCAL_STORAGE_KEY} defaultValue={false}> + {(isDismissed, onDismiss) => { + if (isDismissed) { + return null; + } + + return ( + { + onDismiss(true); + }} + url={getDocsLink(DocsId.Transformations)} + > +

+ Transformations allow you to join, calculate, re-order, hide and rename your query results before + being visualized.
+ Many transforms are not suitable if you're using the Graph visualization as it currently only + supports time series.
+ It can help to switch to Table visualization to understand what a transformation is doing.
+

+ + ); + }} + )} {showPicker ? ( diff --git a/public/app/features/datasources/settings/CloudInfoBox.tsx b/public/app/features/datasources/settings/CloudInfoBox.tsx index 6a2107c4f3e..28ee4730f28 100644 --- a/public/app/features/datasources/settings/CloudInfoBox.tsx +++ b/public/app/features/datasources/settings/CloudInfoBox.tsx @@ -1,9 +1,12 @@ import { DataSourceSettings, GrafanaTheme } from '@grafana/data'; -import { DismissableFeatureInfoBox, useStyles } from '@grafana/ui'; +import { FeatureInfoBox, useStyles } from '@grafana/ui'; import { css } from 'emotion'; import React, { FC } from 'react'; import { config } from 'app/core/config'; import { GrafanaEdition } from '@grafana/data/src/types/config'; +import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider'; + +const LOCAL_STORAGE_KEY = 'datasources.settings.cloudInfoBox.isDismissed'; export interface Props { dataSource: DataSourceSettings; @@ -38,27 +41,38 @@ export const CloudInfoBox: FC = ({ dataSource }) => { } return ( - -
- Or skip the effort and get {mainDS} (and {extraDS}) as fully managed, scalable and hosted data sources from - Grafana Labs with the{' '} - - free-forever Grafana Cloud plan - - . -
- + storageKey={LOCAL_STORAGE_KEY} defaultValue={false}> + {(isDismissed, onDismiss) => { + if (isDismissed) { + return null; + } + return ( + { + onDismiss(true); + }} + > +
+ Or skip the effort and get {mainDS} (and {extraDS}) as fully managed, scalable and hosted data sources + from Grafana Labs with the{' '} + + free-forever Grafana Cloud plan + + . +
+ + ); + }} + ); };