Transformations: State feature (alpha/beta) and more (#36630)

* Adding plugin state feature to transforms

* initial help box

* New HelpBox component

* More progress

* Testing

* Removing HelpBox, simple new design, new active state for OperationRowAction

* Updated tests

* Fixed typing issue

* Removed AlphaNotice

* Made focus and enter key trigger OnClick and sorted transformations

* Fixed e2e tests

public/app/features/datasources/settings/DataSourceSettingsPage.test.tsx

@@ -61,9 +61,7 @@ describe('Render', () => {
 
     render(<DataSourceSettingsPage {...mockProps} />);
 
-    expect(
-      screen.getByTitle('Beta Plugin: There could be bugs and minor breaking changes to this plugin')
-    ).toBeInTheDocument();
+    expect(screen.getByTitle('This feature is close to complete but not fully tested')).toBeInTheDocument();
   });
 
   it('should render alpha info text if plugin state is alpha', () => {
@@ -73,7 +71,7 @@ describe('Render', () => {
     render(<DataSourceSettingsPage {...mockProps} />);
 
     expect(
-      screen.getByTitle('Alpha Plugin: This plugin is a work in progress and updates may include breaking changes')
+      screen.getByTitle('This feature is experimental and future updates might not be backward compatible')
     ).toBeInTheDocument();
   });
 

public/app/features/datasources/settings/DataSourceSettingsPage.tsx

@@ -23,7 +23,7 @@ import { StoreState } from 'app/types/';
 import { DataSourceSettings } from '@grafana/data';
 import { Alert, Button, LinkButton } from '@grafana/ui';
 import { getDataSourceLoadingNav, buildNavModel, getDataSourceNav } from '../state/navModel';
-import PluginStateinfo from 'app/features/plugins/PluginStateInfo';
+import { PluginStateInfo } from 'app/features/plugins/PluginStateInfo';
 import { dataSourceLoaded, setDataSourceName, setIsDefault } from '../state/reducers';
 import { selectors } from '@grafana/e2e-selectors';
 import { CloudInfoBox } from './CloudInfoBox';
@@ -229,7 +229,7 @@ export class DataSourceSettingsPage extends PureComponent<Props> {
           <div className="gf-form">
             <label className="gf-form-label width-10">Plugin state</label>
             <label className="gf-form-label gf-form-label--transparent">
-              <PluginStateinfo state={dataSourceMeta.state} />
+              <PluginStateInfo state={dataSourceMeta.state} />
             </label>
           </div>
         )}