From b5fc03f964907cc43eb4393efcee8bd4d8c5d07f Mon Sep 17 00:00:00 2001
From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com>
Date: Fri, 9 Jul 2021 12:01:16 -0500
Subject: [PATCH] fix: Database Connection Modal - corrected tooltip alignment
 and info alert width (#15612)

* Added margins to info alerts

* Tooltips aligned
---
 .../DatabaseModal/DatabaseConnectionForm.tsx  |  2 +-
 .../data/database/DatabaseModal/index.tsx     | 52 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
index ca4fd3a3af..d114ba06c0 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
@@ -360,7 +360,7 @@ const forceSSLField = ({
     <InfoTooltip
       tooltip={t('SSL Mode "require" will be used.')}
       placement="right"
-      viewBox="0 0 24 24"
+      viewBox="0 -5 24 24"
     />
   </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
index 79daf3b410..b0e6ea51b7 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx
@@ -904,7 +904,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     tooltip={t(
                       'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.',
                     )}
-                    viewBox="0 0 24 24"
+                    viewBox="0 -6 24 24"
                   />
                 </div>
               )}
@@ -934,29 +934,31 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
             />
           )}
           {!isEditMode && (
-            <Alert
-              closable={false}
-              css={(theme: SupersetTheme) => antDAlertStyles(theme)}
-              message="Additional fields may be required"
-              showIcon
-              description={
-                <>
-                  Select databases require additional fields to be completed in
-                  the Advanced tab to successfully connect the database. Learn
-                  what requirements your databases has{' '}
-                  <a
-                    href={DOCUMENTATION_LINK}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="additional-fields-alert-description"
-                  >
-                    here
-                  </a>
-                  .
-                </>
-              }
-              type="info"
-            />
+            <StyledAlertMargin>
+              <Alert
+                closable={false}
+                css={(theme: SupersetTheme) => antDAlertStyles(theme)}
+                message="Additional fields may be required"
+                showIcon
+                description={
+                  <>
+                    Select databases require additional fields to be completed
+                    in the Advanced tab to successfully connect the database.
+                    Learn what requirements your databases has{' '}
+                    <a
+                      href={DOCUMENTATION_LINK}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="additional-fields-alert-description"
+                    >
+                      here
+                    </a>
+                    .
+                  </>
+                }
+                type="info"
+              />
+            </StyledAlertMargin>
           )}
         </Tabs.TabPane>
         <Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
@@ -1116,7 +1118,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
                     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 4 24 24"
+                    viewBox="0 -6 24 24"
                   />
                 </div>
                 {/* Step 2 */}