fix: Database Connection Modal - corrected tooltip alignment and info alert width (#15612)

* Added margins to info alerts

* Tooltips aligned
This commit is contained in:
Lyndsi Kay Williams 2021-07-09 12:01:16 -05:00 committed by GitHub
parent cc765b51c7
commit b5fc03f964
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 26 deletions

View File

@ -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>
);

View File

@ -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 */}