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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 69 additions and 110 deletions
Show Stats 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';

27
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
View File

@ -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<TransformationsE
<>
{noTransforms && (
<Container grow={1}>
<DismissableFeatureInfoBox
<LocalStorageValueProvider<boolean> storageKey={LOCAL_STORAGE_KEY} defaultValue={false}>
{(isDismissed, onDismiss) => {
if (isDismissed) {
return null;
}
return (
<FeatureInfoBox
title="Transformations"
className={css`
margin-bottom: ${this.props.theme.spacing.lg};
`}
persistenceId="transformationsFeaturesInfoBox"
onDismiss={() => {
onDismiss(true);
}}
url={getDocsLink(DocsId.Transformations)}
>
<p>
Transformations allow you to join, calculate, re-order, hide and rename your query results before being
visualized. <br />
Transformations allow you to join, calculate, re-order, hide and rename your query results before
being visualized. <br />
Many transforms are not suitable if you&apos;re using the Graph visualization as it currently only
supports time series. <br />
It can help to switch to Table visualization to understand what a transformation is doing. <br />
</p>
</DismissableFeatureInfoBox>
</FeatureInfoBox>
);
}}
</LocalStorageValueProvider>
</Container>
)}
{showPicker ? (

26
public/app/features/datasources/settings/CloudInfoBox.tsx
View File

@ -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,15 +41,23 @@ export const CloudInfoBox: FC<Props> = ({ dataSource }) => {
}
return (
<DismissableFeatureInfoBox
<LocalStorageValueProvider<boolean> storageKey={LOCAL_STORAGE_KEY} defaultValue={false}>
{(isDismissed, onDismiss) => {
if (isDismissed) {
return null;
}
return (
<FeatureInfoBox
title={`Configure your ${mainDS} data source below`}
persistenceId="data-source-settings-cloud-info-box"
className={styles.box}
branded={false}
onDismiss={() => {
onDismiss(true);
}}
>
<div className={styles.text}>
Or skip the effort and get {mainDS} (and {extraDS}) as fully managed, scalable and hosted data sources from
Grafana Labs with the{' '}
Or skip the effort and get {mainDS} (and {extraDS}) as fully managed, scalable and hosted data sources
from Grafana Labs with the{' '}
<a
className="external-link"
href={`https://grafana.com/signup/cloud/connect-account?src=grafana-oss&cnt=${dataSource.type}-settings`}
@ -58,7 +69,10 @@ export const CloudInfoBox: FC<Props> = ({ dataSource }) => {
</a>
.
</div>
</DismissableFeatureInfoBox>
</FeatureInfoBox>
);
}}
</LocalStorageValueProvider>
);
};