Merge remote-tracking branch 'origin/main' into ds-apiserver-with-configs

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',
+    }),
   };
 };

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)}

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)}

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)}

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) => (

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,
+          available settings and authentication methods in the next steps.
-          view the{' '}
-          <TextLink href="https://docs.influxdata.com/" external>
-            InfluxDB Docs
-          </TextLink>
-          .
         </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 : ''}