Merge branch 'pexdax/db-connection-ui' into lyndsi/bug-ui-polish

apache · Jun 22, 2021 · 87de820 · 87de820
2 parents d9ec9e6 + b6138cf
commit 87de820
Show file tree

Hide file tree

Showing 10 changed files with 303 additions and 136 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
@@ -47,7 +47,6 @@ export interface InfoTooltipProps {
 
 const StyledTooltip = styled(Tooltip)`
   cursor: pointer;
-
   path:first-of-type {
     fill: #999999;
   }

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/ModalHeader.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/ModalHeader.tsx
@@ -51,6 +51,7 @@ const ModalHeader = ({
   db,
   dbName,
   dbModel,
+  editNewDb,
 }: {
   isLoading: boolean;
   isEditMode: boolean;
@@ -59,6 +60,7 @@ const ModalHeader = ({
   db: Partial<DatabaseObject> | null;
   dbName: string;
   dbModel: DatabaseForm;
+  editNewDb?: boolean;
 }) => {
   const isEditHeader = (
     <StyledFormHeader>
@@ -101,10 +103,17 @@ const ModalHeader = ({
   const hasDbHeader = (
     <StyledStickyHeader>
       <StyledFormHeader>
-        <p className="helper"> STEP 2 OF 3 </p>
+        <p className="helper"> Step 2 of 3 </p>
         <h4>Enter the required {dbModel.name} credentials</h4>
         <p className="helper">
-          Need help? Learn more about connecting to {dbModel.name}.
+          Need help? Learn more about{' '}
+          <a
+            href={documentationLink(db?.engine)}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            connecting to {dbModel.name}.
+          </a>
         </p>
       </StyledFormHeader>
     </StyledStickyHeader>
@@ -125,10 +134,10 @@ const ModalHeader = ({
   if (useSqlAlchemyForm) {
     return useSqlAlchemyFormHeader;
   }
-  if (hasConnectedDb) {
+  if (hasConnectedDb && !editNewDb) {
     return hasConnectedDbHeader;
   }
-  if (db) {
+  if (db || editNewDb) {
     return hasDbHeader;
   }
   return noDbHeader;