UI cleanup and apply readOnly to default datasource switch

public/app/features/datasources/components/DataSourceDefaultSwitch.tsx

@@ -1,16 +1,19 @@
+import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';
 
-import { DataSourceSettings } from '@grafana/data';
-import { InlineSwitch } from '@grafana/ui';
+import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data';
+import { InlineSwitch, Tooltip, useStyles2 } from '@grafana/ui';
 
 interface Props {
   dataSource: DataSourceSettings;
   isDefault: boolean;
+  readOnly: boolean;
   onUpdate: (dataSource: DataSourceSettings) => Promise<DataSourceSettings>;
 }
 
-export function DataSourceDefaultSwitch({ dataSource, isDefault, onUpdate }: Props) {
+export function DataSourceDefaultSwitch({ dataSource, isDefault, readOnly, onUpdate }: Props) {
   const [initialDataSource, setInitialDataSource] = useState<DataSourceSettings>(dataSource);
+  const styles = useStyles2(getStyles);
 
   const handleDefaultDataSourceChange = async (checked: boolean) => {
     try {
@@ -26,12 +29,47 @@ export function DataSourceDefaultSwitch({ dataSource, isDefault, onUpdate }: Pro
     setInitialDataSource(dataSource);
   }, [dataSource]);
 
+  if (readOnly) {
+    return (
+      <Tooltip
+        placement="top"
+        content="This data source was added by config and cannot be modified using the UI"
+        theme="info"
+      >
+        <div className={styles.div}>
+          <InlineSwitch
+            id="basic-settings-default"
+            transparent={true}
+            value={isDefault || false}
+            className={styles.switch}
+            disabled={true}
+          />
+        </div>
+      </Tooltip>
+    );
+  }
+
   return (
     <InlineSwitch
       id="basic-settings-default"
       transparent={true}
       value={isDefault || false}
       onChange={(evt: React.FormEvent<HTMLInputElement>) => handleDefaultDataSourceChange(evt.currentTarget.checked)}
+      className={styles.switch}
+      disabled={readOnly}
     />
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    div: css({
+      div: {
+        backgroundColor: 'transparent',
+      },
+    }),
+    switch: css({
+      padding: '0',
+    }),
+  };
+};

public/app/features/datasources/components/DataSourceTabPage.tsx

@@ -21,6 +21,7 @@ export function DataSourceTabPage({ uid, pageId, navId }: Props) {
     dataSource: nav.dataSource,
     dataSourcePluginName: nav.main.dataSourcePluginName,
     isDefault: nav.dataSource.isDefault,
+    isReadOnly: nav.dataSource.readOnly,
     alertingSupported: nav.dataSourceHeader.alertingSupported,
     onUpdate: nav.dataSourceHeader.onUpdate,
   });

public/app/features/datasources/components/EditDataSourceTitle.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 
 import { DataSourceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { IconButton, useStyles2, Input } from '@grafana/ui';
+import { IconButton, useStyles2, Input, Tooltip } from '@grafana/ui';
 
 interface Props {
   dataSource: DataSourceSettings;
@@ -48,14 +48,16 @@ export function EditDataSourceTitle({ dataSource, title, readOnly, onUpdate }: P
         <div className={styles.titleContainer}>
           <h1 className={styles.title}>{name}</h1>
           {!readOnly && (
-            <IconButton
-              name="pen"
-              onClick={toggleEditMode}
-              size="lg"
-              title="Change data source name"
-              className={styles.editIcon}
-              data-testid={selectors.pages.DataSource.nameEditIcon}
-            />
+            <Tooltip placement="top" content="Edit data source name" theme="info">
+              <IconButton
+                name="pen"
+                onClick={toggleEditMode}
+                size="lg"
+                title="Change data source name"
+                className={styles.editIcon}
+                data-testid={selectors.pages.DataSource.nameEditIcon}
+              />
+            </Tooltip>
           )}
         </div>
       ) : (
@@ -92,7 +94,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     title: css({
       margin: '0 0 0 0',
-      maxWidth: '500px',
+      maxWidth: '40vw',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
@@ -100,12 +102,14 @@ const getStyles = (theme: GrafanaTheme2) => {
     datasourceNameInput: css({
       input: {
         fontSize: theme.typography.h1.fontSize,
+        width: '40vw',
         padding: '6px 8px',
         height: '40px',
       },
     }),
     editIcon: css({
       marginLeft: theme.spacing(1),
+      color: theme.colors.text.secondary,
     }),
   };
 };

public/app/features/datasources/components/useDataSourceInfo.tsx

@@ -21,9 +21,9 @@ export const useDataSourceInfo = (dataSourceInfo: DataSourceInfo): PageInfoItem[
 
   info.push({
     label: (
-      <Tooltip placement="top" content="The default data source is preselected in new panels." theme="info">
+      <Tooltip placement="top" content="The default data source is preselected in Explore." theme="info">
         <div className="gf-form-help-icon gf-form-help-icon--right-normal">
-          Deault
+          Default
           <Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
         </div>
       </Tooltip>
@@ -33,6 +33,7 @@ export const useDataSourceInfo = (dataSourceInfo: DataSourceInfo): PageInfoItem[
         dataSource={dataSourceInfo.dataSource}
         isDefault={dataSourceInfo.isDefault}
         onUpdate={dataSourceInfo.onUpdate}
+        readOnly={dataSourceInfo.isReadOnly}
       ></DataSourceDefaultSwitch>
     ),
   });

public/app/features/datasources/types.ts

@@ -21,6 +21,7 @@ export type DataSourceInfo = {
   dataSource: DataSourceSettings;
   dataSourcePluginName: string;
   isDefault: boolean;
+  isReadOnly: boolean;
   alertingSupported: boolean;
   onUpdate: (dataSource: DataSourceSettings) => Promise<DataSourceSettings>;
 };