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