IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana/UI: Remove DismissableFeatureInfoBox and replace with LocalSt… (#30988)

Browse Source 
* Grafana/UI: Remove DismissableFeatureInfoBox and replace with LocalStorageValueProvider
This commit is contained in:
Oscar Kilhed
2021-02-08 16:12:05 +01:00
committed by GitHub
parent 907d3a2aac
commit 3a905847e8
5 changed files with 69 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/grafana-ui/src/components/InfoBox/DismissableFeatureInfoBox.tsx
View File

@@ -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<HTMLDivElement, DismissableFeatureInfoBoxProps>(
({ 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 <FeatureInfoBox onDismiss={dismiss} ref={ref} {...otherProps}></FeatureInfoBox>;
}
)
);
DismissableFeatureInfoBox.displayName = 'DismissableFeatureInfoBox';

34
packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx
View File

@@ -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<FeatureInfoBoxProps> = (args) => <FeatureInfoBox {...args}></FeatureInfoBox>;
export const featureInfoBox = FeatureInfoBoxTemplate.bind({});
featureInfoBox.args = defaultProps;
const DismissableTemplate: Story<DismissableFeatureInfoBoxProps> = (args) => {
const onResetClick = () => {
localStorage.removeItem(FEATUREINFOBOX_PERSISTENCE_ID_PREFIX.concat(args.persistenceId));
location.reload();
};
return (
<div>
<div>
<DismissableFeatureInfoBox {...args} />
</div>
<div
className={css`
margin-top: 24px;
`}
>
<Button onClick={onResetClick}>Reset DismissableFeatureInfoBox</Button>
</div>
</div>
);
};
export const dismissableFeatureInfoBox = DismissableTemplate.bind({});
dismissableFeatureInfoBox.args = defaultProps;

1
packages/grafana-ui/src/components/index.ts
View File

@@ -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';