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

…15179) * Added tooltips. Still need to place in the right spot. * Revert to where I started. * Added 3 tooltips, 1 Button(need link config). BigQuery not added yet. * Added tooltip BigOuery modal. `span` above upload btn missing `*` * Added tooltip to `Host` field. Alignment needs to be fixed. * Stuck trying to add conditional render of tooltip to LabeledErrorBoundInput * Clean commit for review * Dynamic tooltip componet created. Needs alignment of SVG still. * Fixed typo. * Added line spacing back in * Changed required props to optional/Remove comment * Fixed alignment of tooltips & moved 2tooltips outside of Btn * Added one more line space back in * Removed Typo * Removed another typo * Flixed linter error * Created test for tooltip. * Added expectation for visible tooltipIcon Co-authored-by: andrewbastian <[email protected]>
apache · Jun 22, 2021 · b6138cf · b6138cf
1 parent e7f71f3
commit b6138cf
Show file tree

Hide file tree

Showing 6 changed files with 122 additions and 42 deletions.
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.stories.tsx
@@ -32,6 +32,7 @@ export const InteractiveLabeledErrorBoundInput = ({
   placeholder,
   type,
   id,
+  tooltipText,
 }: LabeledErrorBoundInputProps) => {
   const [currentValue, setCurrentValue] = useState(value);
 
@@ -58,6 +59,8 @@ export const InteractiveLabeledErrorBoundInput = ({
       placeholder={placeholder}
       type={type}
       required
+      hasTooltip
+      tooltipText={tooltipText}
     />
   );
 };
@@ -66,6 +69,7 @@ InteractiveLabeledErrorBoundInput.args = {
   name: 'Username',
   placeholder: 'Example placeholder text...',
   id: 1,
+  tooltipText: 'This is a tooltip',
 };
 
 InteractiveLabeledErrorBoundInput.argTypes = {

diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.test.jsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen } from 'spec/helpers/testing-library';
+import { render, fireEvent, screen } from 'spec/helpers/testing-library';
 import LabeledErrorBoundInput from 'src/components/Form/LabeledErrorBoundInput';
 
 const defaultProps = {
@@ -27,6 +27,8 @@ const defaultProps = {
   validationMethods: () => {},
   errorMessage: '',
   helpText: 'This is a line of example help text',
+  hasTooltip: false,
+  tooltipText: 'This is a tooltip',
   value: '',
   placeholder: 'Example placeholder text...',
   type: 'textbox',
@@ -58,4 +60,19 @@ describe('LabeledErrorBoundInput', () => {
     expect(textboxInput).toBeVisible();
     expect(errorText).toBeVisible();
   });
+  it('renders a LabledErrorBoundInput with a InfoTooltip', async () => {
+    defaultProps.hasTooltip = true;
+    render(<LabeledErrorBoundInput {...defaultProps} />);
+
+    const label = screen.getByText(/username/i);
+    const textboxInput = screen.getByRole('textbox');
+    const tooltipIcon = screen.getByTestId('info-solid-small');
+
+    fireEvent.mouseOver(tooltipIcon);
+
+    expect(tooltipIcon).toBeVisible();
+    expect(label).toBeVisible();
+    expect(textboxInput).toBeVisible();
+    expect(await screen.findByText('This is a tooltip')).toBeInTheDocument();
+  });
 });
diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
@@ -19,6 +19,7 @@
 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';
 
@@ -30,6 +31,8 @@ export interface LabeledErrorBoundInputProps {
   errorMessage: string | null;
   helpText?: string;
   required?: boolean;
+  hasTooltip?: boolean;
+  tooltipText?: string | null;
   id?: string;
   classname?: string;
   [x: string]: any;
@@ -61,6 +64,7 @@ const alertIconStyles = (theme: SupersetTheme, hasError: boolean) => css`
       }
     }`}
 `;
+
 const StyledFormGroup = styled('div')`
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
@@ -73,20 +77,36 @@ const StyledFormGroup = styled('div')`
   }
 `;
 
+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 && (
+      <InfoTooltip tooltip={`${tooltipText}`} viewBox="0 -6 24 24" />
+    )}
     <FormItem
       css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
       validateTrigger={Object.keys(validationMethods)}

diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -42,11 +42,11 @@ export interface InfoTooltipProps {
   trigger?: string | Array<string>;
   overlayStyle?: any;
   bgColor?: string;
+  viewBox?: string;
 }
 
 const StyledTooltip = styled(Tooltip)`
   cursor: pointer;
-
   path:first-of-type {
     fill: #999999;
   }
@@ -65,6 +65,7 @@ export default function InfoTooltip({
   trigger = 'hover',
   overlayStyle = defaultOverlayStyle,
   bgColor = defaultColor,
+  viewBox,
 }: InfoTooltipProps) {
   return (
     <StyledTooltip
@@ -74,7 +75,7 @@ export default function InfoTooltip({
       overlayStyle={overlayStyle}
       color={bgColor}
     >
-      <Icon name="info-solid-small" />
+      <Icon name="info-solid-small" viewBox={viewBox} />
     </StyledTooltip>
   );
 }
diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/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 } & {
@@ -107,8 +109,22 @@ 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)}
+        >
+          <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"
@@ -175,6 +191,10 @@ const hostField = ({
     name="host"
     value={db?.parameters?.host}
     required={required}
+    hasTooltip
+    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"
@@ -328,8 +348,8 @@ const forceSSLField = ({
     />
     <span css={toggleStyle}>SSL</span>
     <InfoTooltip
-      tooltip={t('SSL will be enabled in the database connection')}
-      placement="bottomRight"
+      tooltip={t('SSL Mode "require" will be used.')}
+      placement="right"
     />
   </div>
 );

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -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';
@@ -763,22 +765,31 @@ 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
+                  </Button>
+                  <InfoTooltip
+                    tooltip={t(
+                      'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.',
+                    )}
+                    viewBox="0 -3 24 24"
+                  />
+                </div>
               )}
             </>
           ) : (
@@ -959,24 +970,31 @@ 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
+                  </Button>
+                  <InfoTooltip
+                    tooltip={t(
+                      'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.',
+                    )}
+                    viewBox="6 3 24 24"
+                  />
+                </div>
                 {/* Step 2 */}
               </>
             ))}