From 1cb90cd3b20b2b7ad4161e6e3d5c33e34f7da64e Mon Sep 17 00:00:00 2001
From: Alyssa Joyner <58453566+alyssajoyner@users.noreply.github.com>
Date: Fri, 22 Aug 2025 11:05:45 -0600
Subject: [PATCH] [InfluxDB]: Design quick wins (#109680)

---
 .../components/editor/config-v2/ConfigEditor.tsx  | 14 ++++++++++++--
 .../editor/config-v2/InfluxFluxDBConnection.tsx   |  6 +++---
 .../config-v2/InfluxInfluxQLDBConnection.tsx      | 12 +++++++++---
 .../editor/config-v2/InfluxSQLDBConnection.tsx    |  4 ++--
 .../components/editor/config-v2/LeftSideBar.tsx   |  1 +
 .../config-v2/UrlAndAuthenticationSection.tsx     | 15 +++++----------
 6 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/public/app/plugins/datasource/influxdb/components/editor/config-v2/ConfigEditor.tsx b/public/app/plugins/datasource/influxdb/components/editor/config-v2/ConfigEditor.tsx
index dd191d35846..fd107fb15ad 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config-v2/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config-v2/ConfigEditor.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Alert, Box, Stack, TextLink, useStyles2 } from '@grafana/ui';
+import { Alert, Box, Stack, TextLink, Text, useStyles2 } from '@grafana/ui';
 
 import { DatabaseConnectionSection } from './DatabaseConnectionSection';
 import { LeftSideBar } from './LeftSideBar';
@@ -22,7 +22,11 @@ export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }: Prop
       </div>
       <Box width="60%" flex="1 1 auto" minWidth={CONTAINER_MIN_WIDTH}>
         <Stack direction="column">
-          <Alert severity="info" title="You are viewing a new design for the InfluxDB configuration settings.">
+          <Alert
+            severity="info"
+            title="You are viewing a new design for the InfluxDB configuration settings."
+            className={styles.alertHeight}
+          >
             <>
               <TextLink
                 href="https://docs.google.com/forms/d/e/1FAIpQLSdi-zyX3c51vh937UKhNYYxhljUnFi6dQSlZv50mES9NrK-ig/viewform"
@@ -34,6 +38,9 @@ export const ConfigEditor: React.FC<Props> = ({ onOptionsChange, options }: Prop
               to help us make it even better.
             </>
           </Alert>
+          <Text color="secondary" element="p" italic>
+            Fields marked with * are required
+          </Text>
           <UrlAndAuthenticationSection options={options} onOptionsChange={onOptionsChange} />
           <DatabaseConnectionSection options={options} onOptionsChange={onOptionsChange} />
         </Stack>
@@ -54,5 +61,8 @@ const getStyles = (theme: GrafanaTheme2) => {
         display: 'none',
       },
     }),
+    alertHeight: css({
+      width: '100px',
+    }),
   };
 };
diff --git a/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxFluxDBConnection.tsx b/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxFluxDBConnection.tsx
index affb5a0e95b..fda130a1d8b 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxFluxDBConnection.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxFluxDBConnection.tsx
@@ -21,7 +21,7 @@ export const InfluxFluxDBConnection = (props: Props) => {
   return (
     <>
       <InlineFieldRow>
-        <InlineField label="Organization" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="Organization" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
           <Input
             id="organization"
             placeholder="myorg"
@@ -32,7 +32,7 @@ export const InfluxFluxDBConnection = (props: Props) => {
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
-        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Default Bucket" grow>
+        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Default Bucket" grow required>
           <Input
             id="default-bucket"
             onBlur={trackInfluxDBConfigV2FluxDBDetailsDefaultBucketInputField}
@@ -43,7 +43,7 @@ export const InfluxFluxDBConnection = (props: Props) => {
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
-        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow>
+        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow required>
           <SecretInput
             id="token"
             isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
diff --git a/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxInfluxQLDBConnection.tsx b/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxInfluxQLDBConnection.tsx
index cd47977d2c2..5aae170aeae 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxInfluxQLDBConnection.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxInfluxQLDBConnection.tsx
@@ -20,7 +20,7 @@ export const InfluxInfluxQLDBConnection = (props: Props) => {
   return (
     <>
       <InlineFieldRow>
-        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
           <Input
             id="database"
             placeholder="mydb"
@@ -31,7 +31,7 @@ export const InfluxInfluxQLDBConnection = (props: Props) => {
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
-        <InlineField label="User" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="User" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
           <Input
             id="user"
             placeholder="myuser"
@@ -42,7 +42,13 @@ export const InfluxInfluxQLDBConnection = (props: Props) => {
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
-        <InlineField label="Password" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField
+          label="Password"
+          labelWidth={DB_SETTINGS_LABEL_WIDTH}
+          tooltip="Enter the token used to query the database. You can find this on the Tokens page in the InfluxDB UI."
+          grow
+          required
+        >
           <SecretInput
             id="password"
             isConfigured={Boolean(options.secureJsonFields && options.secureJsonFields.password)}
diff --git a/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxSQLDBConnection.tsx b/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxSQLDBConnection.tsx
index 06deb301a53..6d77a4c8d7c 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxSQLDBConnection.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config-v2/InfluxSQLDBConnection.tsx
@@ -19,7 +19,7 @@ export const InfluxSQLDBConnection = (props: Props) => {
   return (
     <>
       <InlineFieldRow>
-        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow>
+        <InlineField label="Database" labelWidth={DB_SETTINGS_LABEL_WIDTH} grow required>
           <Input
             id="database"
             placeholder="mydb"
@@ -30,7 +30,7 @@ export const InfluxSQLDBConnection = (props: Props) => {
         </InlineField>
       </InlineFieldRow>
       <InlineFieldRow>
-        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow>
+        <InlineField labelWidth={DB_SETTINGS_LABEL_WIDTH} label="Token" grow required>
           <SecretInput
             id="token"
             isConfigured={Boolean(secureJsonFields && secureJsonFields.token)}
diff --git a/public/app/plugins/datasource/influxdb/components/editor/config-v2/LeftSideBar.tsx b/public/app/plugins/datasource/influxdb/components/editor/config-v2/LeftSideBar.tsx
index 68d68795fc4..cc970f35575 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config-v2/LeftSideBar.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config-v2/LeftSideBar.tsx
@@ -11,6 +11,7 @@ export const LeftSideBar = ({ pdcInjected }: LeftSideBarProps) => {
   return (
     <Stack>
       <Box flex={1} marginY={10}>
+        <Box height="75px"></Box>
         <Text element="h4">InfluxDB</Text>
         <Box paddingTop={2}>
           {headers.map((header, index) => (
diff --git a/public/app/plugins/datasource/influxdb/components/editor/config-v2/UrlAndAuthenticationSection.tsx b/public/app/plugins/datasource/influxdb/components/editor/config-v2/UrlAndAuthenticationSection.tsx
index be726a65f54..f489be1aa7c 100644
--- a/public/app/plugins/datasource/influxdb/components/editor/config-v2/UrlAndAuthenticationSection.tsx
+++ b/public/app/plugins/datasource/influxdb/components/editor/config-v2/UrlAndAuthenticationSection.tsx
@@ -80,19 +80,14 @@ export const UrlAndAuthenticationSection = (props: Props) => {
       >
         <Text color="secondary">
           Enter the URL of your InfluxDB instance, then select your product and query language. This will determine the
-          available settings and authentication methods in the next steps. If you are unsure what product you are using,
-          view the{' '}
-          <TextLink href="https://docs.influxdata.com/" external>
-            InfluxDB Docs
-          </TextLink>
-          .
+          available settings and authentication methods in the next steps.
         </Text>
 
         <Box direction="column" gap={2} marginTop={3}>
-          <Field label={<div style={{ marginBottom: '5px' }}>URL</div>} noMargin>
+          <Field label={<div style={{ marginBottom: '5px' }}>URL *</div>} noMargin required>
             <Input
               data-testid="influxdb-v2-config-url-input"
-              placeholder="http://localhost:8086/"
+              placeholder="example: http://localhost:8086/"
               onChange={onUrlChange}
               value={options.url || ''}
               onBlur={trackInfluxDBConfigV2URLInputField}
@@ -102,7 +97,7 @@ export const UrlAndAuthenticationSection = (props: Props) => {
           <Box marginTop={2}>
             <Stack direction="row" gap={2}>
               <Box flex={1}>
-                <Field label={<div style={{ marginBottom: '5px' }}>Product</div>} noMargin>
+                <Field label={<div style={{ marginBottom: '5px' }}>Product *</div>} noMargin required>
                   <Combobox
                     data-testid="influxdb-v2-config-product-select"
                     value={options.jsonData.product}
@@ -112,7 +107,7 @@ export const UrlAndAuthenticationSection = (props: Props) => {
                 </Field>
               </Box>
               <Box flex={1}>
-                <Field label={<div style={{ marginBottom: '5px' }}>Query language</div>} noMargin>
+                <Field label={<div style={{ marginBottom: '5px' }}>Query language *</div>} noMargin>
                   <Combobox
                     data-testid="influxdb-v2-config-query-language-select"
                     value={options.jsonData.product !== '' ? options.jsonData.version : ''}