DataSourceSettings: Fix recent changes to HttpDataSourceSettings (#67436)

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -73,11 +73,13 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
     azureAuthSettings,
     renderSigV4Editor,
     secureSocksDSProxyEnabled,
-    connectionElements,
+    urlLabel,
+    urlDocs,
   } = props;
-  let urlTooltip;
+
   const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
   const theme = useTheme2();
+  let urlTooltip;
 
   const onSettingsChange = useCallback(
     (change: Partial<DataSourceSettings<any, any>>) => {
@@ -94,7 +96,7 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
       urlTooltip = (
         <>
           Your access method is <em>Browser</em>, this means the URL needs to be accessible from the browser.
-          {connectionElements?.tooltip}
+          {urlDocs}
         </>
       );
       break;
@@ -103,12 +105,12 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
         <>
           Your access method is <em>Server</em>, this means the URL needs to be accessible from the grafana
           backend/server.
-          {connectionElements?.tooltip}
+          {urlDocs}
         </>
       );
       break;
     default:
-      urlTooltip = <>Specify a complete HTTP URL (for example http://your_server:8080) {connectionElements?.tooltip}</>;
+      urlTooltip = <>Specify a complete HTTP URL (for example http://your_server:8080) {urlDocs}</>;
   }
 
   const accessSelect = (
@@ -146,24 +148,20 @@ export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
   const azureAuthEnabled: boolean =
     (azureAuthSettings?.azureAuthSupported && azureAuthSettings.getAzureAuthEnabled(dataSourceConfig)) || false;
 
-  const connectionLabel = connectionElements?.label ? connectionElements?.label : 'URL';
-
   return (
     <div className="gf-form-group">
       <>
         <h3 className="page-heading">HTTP</h3>
         <div className="gf-form-group">
-          {defaultUrl && (
-            <div className="gf-form">
-              <FormField
-                interactive={connectionElements?.tooltip ? true : false}
-                label={connectionLabel}
-                labelWidth={13}
-                tooltip={urlTooltip}
-                inputEl={urlInput}
-              />
-            </div>
-          )}
+          <div className="gf-form">
+            <FormField
+              interactive={urlDocs ? true : false}
+              label={urlLabel ?? 'URL'}
+              labelWidth={13}
+              tooltip={urlTooltip}
+              inputEl={urlInput}
+            />
+          </div>
 
           {showAccessOptions && (
             <>

packages/grafana-ui/src/components/DataSourceSettings/types.ts

@@ -30,7 +30,11 @@ export interface HttpSettingsBaseProps<JSONData extends DataSourceJsonData = any
 
 export interface HttpSettingsProps extends HttpSettingsBaseProps {
   /** The default url for the data source */
-  defaultUrl?: string;
+  defaultUrl: string;
+  /** Set label for url option */
+  urlLabel?: string;
+  /** Added to default url tooltip */
+  urlDocs?: React.ReactNode;
   /** Show the http access help box */
   showAccessOptions?: boolean;
   /** Show the SigV4 auth toggle option */
@@ -41,9 +45,4 @@ export interface HttpSettingsProps extends HttpSettingsBaseProps {
   renderSigV4Editor?: React.ReactNode;
   /** Show the Secure Socks Datasource Proxy toggle option */
   secureSocksDSProxyEnabled?: boolean;
-  /** connection URL label and tooltip */
-  connectionElements?: {
-    label?: string;
-    tooltip?: React.ReactNode;
-  };
 }

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

@@ -49,10 +49,8 @@ export const ConfigEditor = (props: Props) => {
         azureAuthSettings={azureAuthSettings}
         renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
         secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
-        connectionElements={{
-          label: 'Prometheus server URL',
-          tooltip: docsTip(),
-        }}
+        urlLabel="Prometheus server URL"
+        urlDocs={docsTip()}
       />
       <>
         <hr className={styles.hrTopSpace} />