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

* Grafana/UI: Remove DismissableFeatureInfoBox and replace with LocalStorageValueProvider

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<TransformationsE
       <>
         {noTransforms && (
           <Container grow={1}>
-            <DismissableFeatureInfoBox
-              title="Transformations"
-              className={css`
-                margin-bottom: ${this.props.theme.spacing.lg};
-              `}
-              persistenceId="transformationsFeaturesInfoBox"
-              url={getDocsLink(DocsId.Transformations)}
-            >
-              <p>
-                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>
+            <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};
+                    `}
+                    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 />
+                      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>
+                  </FeatureInfoBox>
+                );
+              }}
+            </LocalStorageValueProvider>
           </Container>
         )}
         {showPicker ? (

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<Props> = ({ dataSource }) => {
   }
 
   return (
-    <DismissableFeatureInfoBox
-      title={`Configure your ${mainDS} data source below`}
-      persistenceId="data-source-settings-cloud-info-box"
-      className={styles.box}
-      branded={false}
-    >
-      <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{' '}
-        <a
-          className="external-link"
-          href={`https://grafana.com/signup/cloud/connect-account?src=grafana-oss&cnt=${dataSource.type}-settings`}
-          target="_blank"
-          rel="noreferrer"
-          title="The free plan includes 10k active metrics and 50gb storage."
-        >
-          free-forever Grafana Cloud plan
-        </a>
-        .
-      </div>
-    </DismissableFeatureInfoBox>
+    <LocalStorageValueProvider<boolean> storageKey={LOCAL_STORAGE_KEY} defaultValue={false}>
+      {(isDismissed, onDismiss) => {
+        if (isDismissed) {
+          return null;
+        }
+        return (
+          <FeatureInfoBox
+            title={`Configure your ${mainDS} data source below`}
+            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{' '}
+              <a
+                className="external-link"
+                href={`https://grafana.com/signup/cloud/connect-account?src=grafana-oss&cnt=${dataSource.type}-settings`}
+                target="_blank"
+                rel="noreferrer"
+                title="The free plan includes 10k active metrics and 50gb storage."
+              >
+                free-forever Grafana Cloud plan
+              </a>
+              .
+            </div>
+          </FeatureInfoBox>
+        );
+      }}
+    </LocalStorageValueProvider>
   );
 };