mirror of https://github.com/apache/superset.git
chore: update text for dbconn modal (#20773)
* chore: update text for dbconn modal * fix text and close opts for adddataset modal * update loading state, add state change for cta btns, and styling * remove space
This commit is contained in:
parent
463406ff09
commit
e214e1ace6
|
@ -108,19 +108,10 @@ const ModalHeader = ({
|
|||
<StyledStickyHeader>
|
||||
<StyledFormHeader>
|
||||
<p className="helper-top"> STEP 3 OF 3 </p>
|
||||
<h4 className="step-3-text">
|
||||
Your database was successfully connected! Create a dataset to begin
|
||||
visualizing your data as a chart or go to SQL Lab to query your data.
|
||||
</h4>
|
||||
<p className="helper-bottom">
|
||||
Need help? Learn more about{' '}
|
||||
<a
|
||||
href={documentationLink(db?.engine)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
connecting to {dbModel.name}.
|
||||
</a>
|
||||
<h4 className="step-3-text">Database connected</h4>
|
||||
<p className="subheader-text">
|
||||
Create a dataset to begin visualizing your data as a chart or go to
|
||||
SQL Lab to query your data.
|
||||
</p>
|
||||
</StyledFormHeader>
|
||||
</StyledStickyHeader>
|
||||
|
|
|
@ -445,6 +445,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||
const [validationErrors, getValidation, setValidationErrors] =
|
||||
useDatabaseValidation();
|
||||
const [hasConnectedDb, setHasConnectedDb] = useState<boolean>(false);
|
||||
const [showCTAbtns, setShowCTAbtns] = useState(false);
|
||||
const [dbName, setDbName] = useState('');
|
||||
const [editNewDb, setEditNewDb] = useState<boolean>(false);
|
||||
const [isLoading, setLoading] = useState<boolean>(false);
|
||||
|
@ -666,6 +667,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||
}
|
||||
}
|
||||
|
||||
setShowCTAbtns(true);
|
||||
setEditNewDb(false);
|
||||
setLoading(false);
|
||||
};
|
||||
|
@ -808,6 +810,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||
if (dbFetched) {
|
||||
fetchResource(dbFetched.id as number);
|
||||
}
|
||||
setShowCTAbtns(false);
|
||||
setEditNewDb(true);
|
||||
};
|
||||
|
||||
|
@ -1156,24 +1159,25 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||
<StyledBtns>
|
||||
<Button
|
||||
// eslint-disable-next-line no-return-assign
|
||||
buttonStyle="default"
|
||||
buttonStyle="secondary"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
fetchAndSetDB();
|
||||
window.location.href = '/tablemodelview/list';
|
||||
window.location.href = '/tablemodelview/list#create';
|
||||
}}
|
||||
>
|
||||
{' '}
|
||||
{t('CREATE A DATASET')}{' '}
|
||||
{t('CREATE DATASET')}
|
||||
</Button>
|
||||
<Button
|
||||
buttonStyle="default"
|
||||
buttonStyle="secondary"
|
||||
// eslint-disable-next-line no-return-assign
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
fetchAndSetDB();
|
||||
window.location.href = `/superset/sqllab/?db=true`;
|
||||
}}
|
||||
>
|
||||
{t('QUERY DATA IN SQL LAB')}{' '}
|
||||
{t('QUERY DATA IN SQL LAB')}
|
||||
</Button>
|
||||
</StyledBtns>
|
||||
);
|
||||
|
@ -1498,7 +1502,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||
title={<h4>{t('Connect a database')}</h4>}
|
||||
footer={renderModalFooter()}
|
||||
>
|
||||
{hasConnectedDb ? (
|
||||
{!isLoading && hasConnectedDb ? (
|
||||
<>
|
||||
<ModalHeader
|
||||
isLoading={isLoading}
|
||||
|
@ -1510,7 +1514,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
|
|||
dbModel={dbModel}
|
||||
editNewDb={editNewDb}
|
||||
/>
|
||||
{renderCTABtns()}
|
||||
{showCTAbtns && renderCTABtns()}
|
||||
{renderFinishState()}
|
||||
</>
|
||||
) : (
|
||||
|
|
|
@ -51,6 +51,10 @@ export const StyledFormHeader = styled.header`
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.subheader-text {
|
||||
line-height: ${({ theme }) => theme.gridUnit * 4.25}px;
|
||||
}
|
||||
|
||||
.helper-bottom {
|
||||
padding-top: 0;
|
||||
color: ${({ theme }) => theme.colors.grayscale.base};
|
||||
|
|
Loading…
Reference in New Issue