Skip to content

Commit

Permalink
chore: update text for dbconn modal (#20773)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
pkdotson authored Aug 5, 2022
1 parent 463406f commit e214e1a
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -666,6 +667,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
}
}

setShowCTAbtns(true);
setEditNewDb(false);
setLoading(false);
};
Expand Down Expand Up @@ -808,6 +810,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
if (dbFetched) {
fetchResource(dbFetched.id as number);
}
setShowCTAbtns(false);
setEditNewDb(true);
};

Expand Down Expand Up @@ -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>
);
Expand Down Expand Up @@ -1498,7 +1502,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
title={<h4>{t('Connect a database')}</h4>}
footer={renderModalFooter()}
>
{hasConnectedDb ? (
{!isLoading && hasConnectedDb ? (
<>
<ModalHeader
isLoading={isLoading}
Expand All @@ -1510,7 +1514,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
dbModel={dbModel}
editNewDb={editNewDb}
/>
{renderCTABtns()}
{showCTAbtns && renderCTABtns()}
{renderFinishState()}
</>
) : (
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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};
Expand Down

0 comments on commit e214e1a

Please sign in to comment.