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 <InfoTooltip
tooltip={t('SSL Mode "require" will be used.')} tooltip={t('SSL Mode "require" will be used.')}
placement="right" placement="right"
viewBox="0 0 24 24" viewBox="0 -5 24 24"
/> />
</div> </div>
); );

View File

@ -904,7 +904,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
tooltip={t( tooltip={t(
'Click this link to switch to an alternate form that exposes only the required fields needed to connect this database.', '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> </div>
)} )}
@ -934,29 +934,31 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
/> />
)} )}
{!isEditMode && ( {!isEditMode && (
<Alert <StyledAlertMargin>
closable={false} <Alert
css={(theme: SupersetTheme) => antDAlertStyles(theme)} closable={false}
message="Additional fields may be required" css={(theme: SupersetTheme) => antDAlertStyles(theme)}
showIcon message="Additional fields may be required"
description={ showIcon
<> description={
Select databases require additional fields to be completed in <>
the Advanced tab to successfully connect the database. Learn Select databases require additional fields to be completed
what requirements your databases has{' '} in the Advanced tab to successfully connect the database.
<a Learn what requirements your databases has{' '}
href={DOCUMENTATION_LINK} <a
target="_blank" href={DOCUMENTATION_LINK}
rel="noopener noreferrer" target="_blank"
className="additional-fields-alert-description" rel="noopener noreferrer"
> className="additional-fields-alert-description"
here >
</a> here
. </a>
</> .
} </>
type="info" }
/> type="info"
/>
</StyledAlertMargin>
)} )}
</Tabs.TabPane> </Tabs.TabPane>
<Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2"> <Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
@ -1116,7 +1118,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
tooltip={t( tooltip={t(
'Click this link to switch to an alternate form that allows you to input the SQLAlchemy URL for this database manually.', '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> </div>
{/* Step 2 */} {/* Step 2 */}