Transformations: Remove beta notice from transformations and field overrides (#26881)

* Transformations: Remove beta badge for transformations and field overrides

* Removed imports

* Update doc links

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

@@ -107,7 +107,7 @@ const getInfoBoxStyles = stylesFactory((theme: GrafanaTheme) => ({
   `,
   docsLink: css`
     display: inline-block;
-    margin-top: ${theme.spacing.lg};
+    margin-top: ${theme.spacing.md};
     font-size: ${theme.typography.size.sm};
   `,
 }));

public/app/core/utils/docsLinks.ts

@@ -2,9 +2,10 @@ import { DocsId } from '@grafana/data';
 
 // TODO: Documentation links
 const DOCS_LINKS: Record<DocsId, string> = {
-  [DocsId.Transformations]: 'https://docs.grafana.com',
-  [DocsId.FieldConfig]: 'https://docs.grafana.com',
-  [DocsId.FieldConfigOverrides]: 'https://docs.grafana.com',
+  [DocsId.Transformations]: 'https://grafana.com/docs/grafana/latest/panels/transformations',
+  [DocsId.FieldConfig]: 'https://grafana.com/docs/grafana/latest/panels/field-configuration-options/',
+  [DocsId.FieldConfigOverrides]:
+    'https://grafana.com/docs/grafana/latest/panels/field-configuration-options/#override-a-field',
 };
 
 export const getDocsLink = (id: DocsId) => DOCS_LINKS[id];

public/app/features/dashboard/components/PanelEditor/FieldConfigEditor.tsx

@@ -2,12 +2,12 @@ import React, { useCallback, ReactNode } from 'react';
 import cloneDeep from 'lodash/cloneDeep';
 import {
   DataFrame,
-  FeatureState,
   FieldConfigPropertyItem,
   FieldConfigSource,
   PanelPlugin,
   SelectableValue,
   VariableSuggestionsScope,
+  DocsId,
 } from '@grafana/data';
 import { Container, Counter, FeatureInfoBox, Field, fieldMatchersUI, Label, useTheme, ValuePicker } from '@grafana/ui';
 import { getDataLinksVariableSuggestions } from '../../../panel/panellinks/link_srv';
@@ -16,6 +16,7 @@ import groupBy from 'lodash/groupBy';
 import { OptionsGroup } from './OptionsGroup';
 import { selectors } from '@grafana/e2e-selectors';
 import { css } from 'emotion';
+import { getDocsLink } from 'app/core/utils/docsLinks';
 
 interface Props {
   plugin: PanelPlugin;
@@ -111,13 +112,12 @@ export const OverrideFieldConfigEditor: React.FC<Props> = props => {
       {config.overrides.length === 0 && (
         <FeatureInfoBox
           title="Overrides"
-          featureState={FeatureState.beta}
-          // url={getDocsLink(DocsId.FieldConfigOverrides)}
+          url={getDocsLink(DocsId.FieldConfigOverrides)}
           className={css`
             margin: ${theme.spacing.md};
           `}
         >
-          Field options overrides give you a fine grained control over how your data is displayed.
+          Field override rules give you a fine grained control over how your data is displayed.
         </FeatureInfoBox>
       )}
 

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx

@@ -11,13 +11,13 @@ import {
 } from '@grafana/ui';
 import {
   DataTransformerConfig,
-  FeatureState,
   GrafanaTheme,
   SelectableValue,
   standardTransformersRegistry,
   transformDataFrame,
   DataFrame,
   PanelData,
+  DocsId,
 } from '@grafana/data';
 import { TransformationOperationRow } from './TransformationOperationRow';
 import { Card, CardProps } from '../../../../core/components/Card/Card';
@@ -25,6 +25,7 @@ import { css } from 'emotion';
 import { selectors } from '@grafana/e2e-selectors';
 import { Unsubscribable } from 'rxjs';
 import { PanelModel } from '../../state';
+import { getDocsLink } from 'app/core/utils/docsLinks';
 
 interface Props {
   panel: PanelModel;
@@ -170,11 +171,7 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
     return (
       <VerticalGroup spacing={'lg'}>
         <Container grow={1}>
-          <FeatureInfoBox
-            title="Transformations"
-            featureState={FeatureState.beta}
-            // url={getDocsLink(DocsId.Transformations)}
-          >
+          <FeatureInfoBox title="Transformations" url={getDocsLink(DocsId.Transformations)}>
             <p>
               Transformations allow you to join, calculate, re-order, hide and rename your query results before being
               visualized. <br />
@@ -182,7 +179,6 @@ export class TransformationsEditor extends React.PureComponent<Props, State> {
               time series. <br />
               It can help to switch to Table visualization to understand what a transformation is doing. <br />
             </p>
-            <p>Select one of the transformations below to start.</p>
           </FeatureInfoBox>
         </Container>
         <VerticalGroup>