chore: Add tooltips and button to Connect Postgresql DB Modal Form

superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx

@@ -20,29 +20,26 @@ import React, { useState } from 'react';
 import LabeledErrorBoundInput, {
   LabeledErrorBoundInputProps,
 } from './LabeledErrorBoundInput';
-
 export default {
   title: 'LabeledErrorBoundInput',
   component: LabeledErrorBoundInput,
 };
-
 export const InteractiveLabeledErrorBoundInput = ({
   name,
   value,
   placeholder,
   type,
   id,
+  tooltipText,
 }: LabeledErrorBoundInputProps) => {
   const [currentValue, setCurrentValue] = useState(value);
-
   const validateFunctionality: (value: any) => string = value => {
     setCurrentValue(value.target.value);
     if (value.target.value.includes('success')) {
       return 'success';
     }
     return 'error';
   };
-
   return (
     <LabeledErrorBoundInput
       id={id}
@@ -58,16 +55,17 @@ export const InteractiveLabeledErrorBoundInput = ({
       placeholder={placeholder}
       type={type}
       required
+      hasTooltip
+      tooltipText={tooltipText}
     />
   );
 };
-
 InteractiveLabeledErrorBoundInput.args = {
   name: 'Username',
   placeholder: 'Example placeholder text...',
   id: 1,
+  tooltipText: 'This is a tooltip',
 };
-
 InteractiveLabeledErrorBoundInput.argTypes = {
   type: {
     defaultValue: 'textbox',

superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx

@@ -19,9 +19,9 @@
 import React from 'react';
 import { Input } from 'antd';
 import { styled, css, SupersetTheme } from '@superset-ui/core';
+import InfoTooltip from 'src/components/InfoTooltip';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
-
 export interface LabeledErrorBoundInputProps {
   label?: string;
   validationMethods:
@@ -30,23 +30,22 @@ export interface LabeledErrorBoundInputProps {
   errorMessage: string | null;
   helpText?: string;
   required?: boolean;
+  hasTooltip?: boolean;
+  tooltipText?: string | null;
   id?: string;
   classname?: string;
   [x: string]: any;
 }
-
 const StyledInput = styled(Input)`
   margin: ${({ theme }) => `${theme.gridUnit}px 0 ${theme.gridUnit * 2}px`};
 `;
-
 const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
   .ant-form-item-children-icon {
     display: none;
   }
   ${hasError &&
   `.ant-form-item-control-input-content {
       position: relative;
-
       &:after {
         content: ' ';
         display: inline-block;
@@ -72,21 +71,38 @@ const StyledFormGroup = styled('div')`
     margin-bottom: 0;
   }
 `;
-
+const infoTooltip = (theme: SupersetTheme) => css`
+  svg {
+    vertical-align: bottom;
+    margin-bottom: ${theme.gridUnit * 0.25}px;
+  }
+`;
 const LabeledErrorBoundInput = ({
   label,
   validationMethods,
   errorMessage,
   helpText,
   required = false,
+  hasTooltip = false,
+  tooltipText,
   id,
   className,
   ...props
 }: LabeledErrorBoundInputProps) => (
   <StyledFormGroup className={className}>
-    <FormLabel htmlFor={id} required={required}>
+    <FormLabel
+      htmlFor={id}
+      required={required}
+      css={(theme: SupersetTheme) => infoTooltip(theme)}
+    >
       {label}
     </FormLabel>
+    {hasTooltip && (
+      <span>
+        {' '}
+        <InfoTooltip tooltip={`${tooltipText}`} />
+      </span>
+    )}
     <FormItem
       css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
       validateTrigger={Object.keys(validationMethods)}
@@ -98,5 +114,4 @@ const LabeledErrorBoundInput = ({
     </FormItem>
   </StyledFormGroup>
 );
-
 export default LabeledErrorBoundInput;

superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx

@@ -51,6 +51,8 @@ export const FormFieldOrder = [
 
 interface FieldPropTypes {
   required: boolean;
+  hasTooltip: boolean;
+  tooltipText: (valuse: any) => string;
   onParametersChange: (value: any) => string;
   onParametersUploadFileChange: (value: any) => string;
   changeMethods: { onParametersChange: (value: any) => string } & {
@@ -106,8 +108,23 @@ const CredentialsInfo = ({ changeMethods, isEditMode, db }: FieldPropTypes) => {
           </span>
         </div>
       ) : (
-        <div className="input-container">
-          <span className="label-select">Upload Credentials</span>
+        <div
+          className="input-container"
+          css={(theme: SupersetTheme) => infoTooltip(theme)}
+        >
+          {/*This is missing a reqired marker. Need clarification what element to add reqired to.*/}
+          <span
+            css={{ display: 'flex', alignItems: 'center' }}
+            className="label-select"
+          >
+            Upload Credentials{' '}
+            <InfoTooltip
+              tooltip={t(
+                'Use the JSON file you automatically downloaded when creating your service account in Google BigQuery.',
+              )}
+            />
+          </span>
+
           {!fileToUpload && (
             <Button
               className="input-upload-btn"
@@ -167,13 +184,19 @@ const hostField = ({
   changeMethods,
   getValidation,
   validationErrors,
+  hasTooltip,
+  tooltipText,
   db,
 }: FieldPropTypes) => (
   <ValidatedInput
     id="host"
     name="host"
     value={db?.parameters?.host}
     required={required}
+    hasTooltip={true}
+    tooltipText={t(
+      'This can be either an IP address (e.g. 127.0.0.1) or a domain name (e.g. mydatabase.com).',
+    )}
     validationMethods={{ onBlur: getValidation }}
     errorMessage={validationErrors?.host}
     placeholder="e.g. 127.0.0.1"
@@ -327,7 +350,7 @@ const forceSSLField = ({
     />
     <span css={toggleStyle}>SSL</span>
     <InfoTooltip
-      tooltip={t('SSL will be enabled in the database connection')}
+      tooltip={t('SSL Mode "require" will be used.')}
       placement="bottomRight"
     />
   </div>

superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

@@ -1,7 +1,7 @@
 /**
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
+ * placement distributed with this work for additional information
  * regarding copyright ownership.  The ASF licenses this file
  * to you under the Apache License, Version 2.0 (the
  * "License"); you may not use this file except in compliance
@@ -34,6 +34,7 @@ import { Alert, Select } from 'src/common/components';
 import Modal from 'src/components/Modal';
 import Button from 'src/components/Button';
 import IconButton from 'src/components/IconButton';
+import InfoTooltip from 'src/components/InfoTooltip';
 import withToasts from 'src/messageToasts/enhancers/withToasts';
 import {
   testDatabaseConnection,
@@ -65,6 +66,7 @@ import {
   formStyles,
   StyledBasicTab,
   SelectDatabaseStyles,
+  infoTooltip,
   StyledFooterButton,
   StyledStickyHeader,
 } from './styles';
@@ -670,22 +672,30 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                 isEditMode={isEditMode}
               />
               {isDynamic(db?.backend || db?.engine) && (
-                <Button
-                  buttonStyle="link"
-                  onClick={() =>
-                    setDB({
-                      type: ActionType.configMethodChange,
-                      payload: {
-                        database_name: db?.database_name,
-                        configuration_method: CONFIGURATION_METHOD.DYNAMIC_FORM,
-                        engine: db?.engine,
-                      },
-                    })
-                  }
-                  css={theme => alchemyButtonLinkStyles(theme)}
-                >
-                  Connect this database using the dynamic form instead
-                </Button>
+                <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+                  <Button
+                    buttonStyle="link"
+                    onClick={() =>
+                      setDB({
+                        type: ActionType.configMethodChange,
+                        payload: {
+                          database_name: db?.database_name,
+                          configuration_method:
+                            CONFIGURATION_METHOD.DYNAMIC_FORM,
+                          engine: db?.engine,
+                        },
+                      })
+                    }
+                    css={theme => alchemyButtonLinkStyles(theme)}
+                  >
+                    Connect this database using the dynamic form instead
+                    <InfoTooltip
+                      tooltip={t(
+                        'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.',
+                      )}
+                    />
+                  </Button>
+                </div>
               )}
             </>
           ) : (
@@ -896,24 +906,30 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                   getValidation={() => getValidation(db)}
                   validationErrors={validationErrors}
                 />
-
-                <Button
-                  buttonStyle="link"
-                  onClick={() =>
-                    setDB({
-                      type: ActionType.configMethodChange,
-                      payload: {
-                        engine: db.engine,
-                        configuration_method:
-                          CONFIGURATION_METHOD.SQLALCHEMY_URI,
-                        database_name: db.database_name,
-                      },
-                    })
-                  }
-                  css={buttonLinkStyles}
-                >
-                  Connect this database with a SQLAlchemy URI string instead
-                </Button>
+                <div css={(theme: SupersetTheme) => infoTooltip(theme)}>
+                  <Button
+                    buttonStyle="link"
+                    onClick={() =>
+                      setDB({
+                        type: ActionType.configMethodChange,
+                        payload: {
+                          engine: db.engine,
+                          configuration_method:
+                            CONFIGURATION_METHOD.SQLALCHEMY_URI,
+                          database_name: db.database_name,
+                        },
+                      })
+                    }
+                    css={buttonLinkStyles}
+                  >
+                    Connect this database with a SQLAlchemy URI string instead
+                    <InfoTooltip
+                      tooltip={t(
+                        'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.',
+                      )}
+                    />
+                  </Button>
+                </div>
                 {/* Step 2 */}
               </>
             ))}