ConfigDescriptionLink: Replace with component from `@grafana/experimental` (#80144)

ConfigDescriptionLink: Replace with component from grafana/experimental

public/app/core/components/ConfigDescriptionLink.tsx

@@ -1,47 +0,0 @@
-import { css } from '@emotion/css';
-import React from 'react';
-
-import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2 } from '@grafana/ui';
-
-type Props = {
-  description: string;
-  suffix: string;
-  feature: string;
-};
-
-export function ConfigDescriptionLink(props: Props) {
-  const { description, suffix, feature } = props;
-  const text = `Learn more about ${feature}`;
-  const styles = useStyles2(getStyles);
-
-  return (
-    <span className={styles.container}>
-      {description}
-      <a
-        aria-label={text}
-        href={`https://grafana.com/docs/grafana/next/datasources/${suffix}`}
-        rel="noreferrer"
-        target="_blank"
-      >
-        {text}
-      </a>
-    </span>
-  );
-}
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    container: css({
-      color: theme.colors.text.secondary,
-      a: css({
-        color: theme.colors.text.link,
-        textDecoration: 'underline',
-        marginLeft: '5px',
-        '&:hover': {
-          textDecoration: 'none',
-        },
-      }),
-    }),
-  };
-};

public/app/core/components/NodeGraphSettings.tsx

@@ -7,11 +7,9 @@ import {
   GrafanaTheme2,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
 
-import { ConfigDescriptionLink } from './ConfigDescriptionLink';
-
 export interface NodeGraphOptions {
   enabled?: boolean;
 }

public/app/core/components/TraceToLogs/TraceToLogsSettings.tsx

@@ -2,9 +2,8 @@ import { css } from '@emotion/css';
 import React, { useCallback, useMemo } from 'react';
 
 import { DataSourceJsonData, DataSourceInstanceSettings, DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSection } from '@grafana/experimental';
 import { InlineField, InlineFieldRow, Input, InlineSwitch } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 
 import { IntervalInput } from '../IntervalInput/IntervalInput';

public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx

@@ -8,11 +8,10 @@ import {
   GrafanaTheme2,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSection } from '@grafana/experimental';
 import { Button, InlineField, InlineFieldRow, Input, useStyles2 } from '@grafana/ui';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 
-import { ConfigDescriptionLink } from '../ConfigDescriptionLink';
 import { IntervalInput } from '../IntervalInput/IntervalInput';
 import { TagMappingInput } from '../TraceToLogs/TagMappingInput';
 import { getTimeShiftLabel, getTimeShiftTooltip, invalidTimeShiftError } from '../TraceToLogs/TraceToLogsSettings';

public/app/core/components/TraceToProfiles/TraceToProfilesSettings.tsx

@@ -8,10 +8,9 @@ import {
   DataSourcePluginOptionsEditorProps,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConfigSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSection } from '@grafana/experimental';
 import { getDataSourceSrv } from '@grafana/runtime';
 import { InlineField, InlineFieldRow, Input, InlineSwitch } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker';
 import { ProfileTypesCascader } from 'app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/ProfileTypesCascader';
 import { PyroscopeDataSource } from 'app/plugins/datasource/grafana-pyroscope-datasource/datasource';

public/app/features/explore/TraceView/components/settings/SpanBarSettings.tsx

@@ -8,9 +8,8 @@ import {
   toOption,
   updateDatasourcePluginJsonDataOption,
 } from '@grafana/data';
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { InlineField, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 export interface SpanBarOptions {
   type?: string;

public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx

@@ -2,9 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { Button, useStyles2 } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 import { DataLinkConfig } from '../types';
 

public/app/plugins/datasource/elasticsearch/configuration/ElasticDetails.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { DataSourceSettings, SelectableValue } from '@grafana/data';
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { InlineField, Input, Select, InlineSwitch } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 import { ElasticsearchOptions, Interval } from '../types';
 

public/app/plugins/datasource/elasticsearch/configuration/LogsConfig.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { Input, InlineField } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 import { ElasticsearchOptions } from '../types';
 

public/app/plugins/datasource/loki/configuration/AlertingSettings.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { InlineField, InlineSwitch } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 export function AlertingSettings({
   options,

public/app/plugins/datasource/loki/configuration/DerivedFields.tsx

@@ -2,9 +2,8 @@ import { css } from '@emotion/css';
 import React, { useCallback, useState } from 'react';
 
 import { GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { Button, useTheme2 } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 import { DerivedFieldConfig } from '../types';
 

public/app/plugins/datasource/loki/configuration/QuerySettings.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 
-import { ConfigSubSection } from '@grafana/experimental';
+import { ConfigDescriptionLink, ConfigSubSection } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import { Badge, InlineField, InlineFieldRow, Input } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 
 type Props = {
   maxLines: string;

public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx

@@ -5,6 +5,7 @@ import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data
 import {
   AdvancedHttpSettings,
   Auth,
+  ConfigDescriptionLink,
   ConfigSection,
   ConfigSubSection,
   ConnectionSettings,
@@ -13,7 +14,6 @@ import {
 } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import { SecureSocksProxySettings, useStyles2 } from '@grafana/ui';
-import { ConfigDescriptionLink } from 'app/core/components/ConfigDescriptionLink';
 import { Divider } from 'app/core/components/Divider';
 import { NodeGraphSection } from 'app/core/components/NodeGraphSettings';
 import { TraceToLogsSection } from 'app/core/components/TraceToLogs/TraceToLogsSettings';