AlphaNotice: replaced big popover tooltip with native tooltip (#18997)

packages/grafana-ui/src/components/AlphaNotice/AlphaNotice.tsx

@@ -1,22 +1,15 @@
 import React, { FC, useContext } from 'react';
 import { css, cx } from 'emotion';
 import { PluginState, ThemeContext } from '../../index';
-import { Tooltip } from '../index';
 
 interface Props {
   state?: PluginState;
-  text?: JSX.Element;
+  text?: string;
   className?: string;
 }
 
 export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
-  const tooltipContent = text || (
-    <div>
-      <h5>Alpha Feature</h5>
-      <p>This feature is a work in progress and updates may include breaking changes.</p>
-    </div>
-  );
-
+  const tooltipContent = text || 'This feature is a work in progress and updates may include breaking changes';
   const theme = useContext(ThemeContext);
 
   const styles = cx(
@@ -35,10 +28,8 @@ export const AlphaNotice: FC<Props> = ({ state, text, className }) => {
   );
 
   return (
-    <Tooltip content={tooltipContent} theme={'info'} placement={'top'}>
-      <div className={styles}>
-        <i className="fa fa-warning" /> {state}
-      </div>
-    </Tooltip>
+    <div className={styles} title={tooltipContent}>
+      <i className="fa fa-warning" /> {state}
+    </div>
   );
 };

public/app/features/dashboard/panel_editor/QueriesTab.tsx

@@ -287,7 +287,7 @@ export class QueriesTab extends PureComponent<Props, State> {
             <PanelOptionsGroup
               title={
                 <>
-                  Transform query results
+                  Query results
                   <AlphaNotice
                     state={PluginState.alpha}
                     className={css`

public/app/features/dashboard/panel_editor/QueryOptions.tsx

@@ -168,9 +168,11 @@ export class QueryOptions extends PureComponent<Props, State> {
     return Object.keys(this.allOptions).map(key => {
       const options = this.allOptions[key];
       const panelKey = options.panelKey || key;
+
       // @ts-ignore
       const value = this.state[panelKey];
-      if (value || queryOptions[key]) {
+
+      if (queryOptions[key]) {
         return (
           <DataSourceOption
             key={key}

public/app/features/plugins/PluginStateInfo.tsx

@@ -6,23 +6,12 @@ interface Props {
   state?: PluginState;
 }
 
-function getPluginStateInfoText(state?: PluginState): JSX.Element | null {
+function getPluginStateInfoText(state?: PluginState): string | null {
   switch (state) {
     case PluginState.alpha:
-      return (
-        <div>
-          <h5>Alpha Plugin</h5>
-          <p>This plugin is a work in progress and updates may include breaking changes.</p>
-        </div>
-      );
-
+      return 'Alpha Plugin: This plugin is a work in progress and updates may include breaking changes';
     case PluginState.beta:
-      return (
-        <div>
-          <h5>Beta Plugin</h5>
-          <p>There could be bugs and minor breaking changes to this plugin.</p>
-        </div>
-      );
+      return 'Beta Plugin: There could be bugs and minor breaking changes to this plugin';
   }
   return null;
 }