Skip to content

Commit

Permalink
fix: Database connection R6 fixes (apache#15486)
Browse files Browse the repository at this point in the history
* split db modal file

* split db modal file

* hook up available databases

* add comment

* split db modal file

* hook up available databases

* use new validation component

* first draft

* use new validation component

* Creating IconButton

* Changed naming: logo is now icon

* Hard-coded inset values for ellipses

* Removed default SVG

* Fixed test

* get tests passing

* Removed logo from test

* split db modal file

* hook up available databases

* use new validation component

* feat(db-connection-ui): Allow users to pick engine (apache#14884)

* poc picker for db selection

* working select

* setup is loading for available dbs and step1 view

* fix on close

* update on fetch

* remove unneeded code

* add some styls

* saving for now

* revisions

* fix package-lock.json

* update styles

* save

* # This is a combination of 6 commits.
# This is the 1st commit message:

feat: validation db modal (apache#14832)

* split db modal file

* hook up available databases

* use new validation component
# This is the commit message #2:

feat: Icon Button (apache#14818)

* Creating IconButton

* Changed naming: logo is now icon

* Hard-coded inset values for ellipses

* Removed default SVG

* Fixed test

* Removed logo from test
# This is the commit message #3:

chore: Improves the native filters UI/UX - iteration 6 (apache#14932)


# This is the commit message #4:

fix: is_temporal should overwrite is_dttm (apache#14894)

* fix: is_temporal should overwrite is_dttm

* move up
# This is the commit message #5:

fix: time parser truncate to first day of year/month (apache#14945)


# This is the commit message #6:

hook up available databases

* fix test for db modal

* feat(db-connection-ui): Allow users to pick engine (apache#14884)

* poc picker for db selection

* working select

* setup is loading for available dbs and step1 view

* fix on close

* update on fetch

* remove unneeded code

* add some styls

* more revisions

* create 1 function for setting the DB

* add function to preferred section

* small refactor and added styling

* used db.backend

* add new footer buttons

* add finsh buttong

* refactor db modal render

* fix comments issue

* added engine to model

* elizabeth revisions

* add header

* add bottom footer to sqlalchemy form

* # This is a combination of 6 commits.
# This is the 1st commit message:

feat: validation db modal (apache#14832)

* split db modal file

* hook up available databases

* use new validation component
# This is the commit message #2:

feat: Icon Button (apache#14818)

* Creating IconButton

* Changed naming: logo is now icon

* Hard-coded inset values for ellipses

* Removed default SVG

* Fixed test

* Removed logo from test
# This is the commit message #3:

chore: Improves the native filters UI/UX - iteration 6 (apache#14932)


# This is the commit message #4:

fix: is_temporal should overwrite is_dttm (apache#14894)

* fix: is_temporal should overwrite is_dttm

* move up
# This is the commit message #5:

fix: time parser truncate to first day of year/month (apache#14945)


# This is the commit message #6:

hook up available databases

* fix test for db modal

* feat(db-connection-ui): Allow users to pick engine (apache#14884)

* poc picker for db selection

* working select

* setup is loading for available dbs and step1 view

* fix on close

* update on fetch

* remove unneeded code

* add some styls

* elizabeth revisions

* add back headers

* add step

* feat: Dynamic Form for edit DB Modal (apache#14845)

* split db modal file

* split db modal file

* hook up available databases

* add comment

* split db modal file

* hook up available databases

* use new validation component

* first draft

* use new validation component

* get tests passing

* split db modal file

* hook up available databases

* use new validation component

* feat(db-connection-ui): Allow users to pick engine (apache#14884)

* poc picker for db selection

* working select

* setup is loading for available dbs and step1 view

* fix on close

* update on fetch

* remove unneeded code

* add some styls

* revisions

* fix package-lock.json

* # This is a combination of 6 commits.
# This is the 1st commit message:

feat: validation db modal (apache#14832)

* split db modal file

* hook up available databases

* use new validation component
# This is the commit message #2:

feat: Icon Button (apache#14818)

* Creating IconButton

* Changed naming: logo is now icon

* Hard-coded inset values for ellipses

* Removed default SVG

* Fixed test

* Removed logo from test
# This is the commit message #3:

chore: Improves the native filters UI/UX - iteration 6 (apache#14932)


# This is the commit message #4:

fix: is_temporal should overwrite is_dttm (apache#14894)

* fix: is_temporal should overwrite is_dttm

* move up
# This is the commit message #5:

fix: time parser truncate to first day of year/month (apache#14945)


# This is the commit message #6:

hook up available databases

* fix test for db modal

* feat(db-connection-ui): Allow users to pick engine (apache#14884)

* poc picker for db selection

* working select

* setup is loading for available dbs and step1 view

* fix on close

* update on fetch

* remove unneeded code

* add some styls

* more revisions

* used db.backend

* added engine to model

* elizabeth revisions

* elizabeth revisions

Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>
Co-authored-by: hughhhh <hughmil3s@gmail.com>

* address comments

* oops

* # This is a combination of 6 commits.
# This is the 1st commit message:

feat: validation db modal (apache#14832)

* split db modal file

* hook up available databases

* use new validation component
# This is the commit message #2:

feat: Icon Button (apache#14818)

* Creating IconButton

* Changed naming: logo is now icon

* Hard-coded inset values for ellipses

* Removed default SVG

* Fixed test

* Removed logo from test
# This is the commit message #3:

chore: Improves the native filters UI/UX - iteration 6 (apache#14932)


# This is the commit message #4:

fix: is_temporal should overwrite is_dttm (apache#14894)

* fix: is_temporal should overwrite is_dttm

* move up
# This is the commit message #5:

fix: time parser truncate to first day of year/month (apache#14945)


# This is the commit message #6:

hook up available databases

* fix test for db modal

* feat(db-connection-ui): Allow users to pick engine (apache#14884)

* poc picker for db selection

* working select

* setup is loading for available dbs and step1 view

* fix on close

* update on fetch

* remove unneeded code

* add some styls

* remove merge conflicts

* small fix on blocking creating

* feat(db-connection-ui): Big Query Add Database Form (apache#14829)

* fix(native-filters): Manage default value of filters by superset (apache#14785)

* fix:fix get permission function

* feat: manage default value in superset

* fix(native-filters): loop bug by simplify state handling (apache#14788)

* fix: set table name width to not hide icons when name is too long (apache#14489)

* fix: set table name width to now hide icons when name is too long

* fix: table style

Co-authored-by: einatnielsen <einat.bertenthal@nielsen.com>

* feat(explore): Remove default for time range filter and Metrics (apache#14661)

* feat(explore): Remove default for time range filter and Metrics

* Merge errors with same messages

* Fix e2e test

* Rename a variable

* Bump packages

* Fix unit tests

* feat: chart gallery search improvement (apache#14484)

* feat: chart gallery search improvement

* test: adding unit test for VizTypeControl

* fix: lint errors

Co-authored-by: einatnielsen <einat.bertenthal@nielsen.com>

* Update schemas.py

* Update bigquery.py

* Fix tests

* big query form is appearing on the screen

* add name to allow for actions to get picked up

* working post for saving db via paste

* working file upload

* switch to textare

* better styles

* add delete buttong

* save formating

* wrap encrypted_extra

* formatting component

* clear out file input before reloading

* remove default driver

* address comments

* fix things off rebase

* small refactore

* more patches

* checkout space file

* fix variable ref

Co-authored-by: simcha90 <56388545+simcha90@users.noreply.github.com>
Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Co-authored-by: Einat Bertenthal <einatbar@users.noreply.github.com>
Co-authored-by: einatnielsen <einat.bertenthal@nielsen.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>

* feat: adding SSL Toggle to Create Database Modal (apache#14976)

* first draft of SSL Toggle

* added payload data

* Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx

Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>

* changed tooltips based on stephen advice

Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>
Co-authored-by: Hugh A. Miles II <hughmil3s@gmail.com>

* feat(database-connection-ui) Allow configuration of Database Images from SupersetText (apache#15023)

* saving this for now

* fix some styles

* add database images

* fix

* enforce only numbers

* add default iamge

* fix bug

* additional params to the DatabaseConnectionForm (apache#15071)

* additional params to the DatabaseConnectionForm

* save passing params up to api

* feat: Added Steps and centralized Headers (apache#15041)

* fix superset_text issue (apache#15095)

* fix edit issue by returning parameters properly (apache#15101)

* feat: added alerts (apache#15103)

* added alerts

* revisions

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* Update superset-frontend/src/views/CRUD/data/database/DatabaseModal/index.tsx

Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com>

* fix: fixing api tests for database connections (apache#15124)

* fixing api tests

* added test for no config method on create

* added config method to validation tests

* fix(db-connection-ui): Additional Query Parameters render (apache#15150)

* working query params

* move condition out before update or create

* fix type script issues

* feat(db-connection-ui): Move fields from Extra section and split engine and metadata (apache#15143)

* working edit extra options

* acquired most of json

* recontruct json

* add schema array

* add proper styles

* fix tslint issues

* remove console.log

* this is working

* style: Database connect UI Polish - Step 1 (apache#15119)

* save avg

* Styled step 1

* Remove Alert

* Finished styling, added ellipsis library to IconButton

* Fixed text margin

Co-authored-by: hughhhh <hughmil3s@gmail.com>

* fix app from merge

* fix tslint issues

* fix all tslint issue on feature branch

* catch errors for dialects with no driver set

* fix dremio issue

* fix dialect issue without driver attr

* Styled step 3 (apache#15187)

* feat: adding server-side validation and unmasked password on create (apache#15151)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* validation and password masking

* revisions and validation range

* revisions

* added beto revisions

* added tests for port range

* added config to available

* testing, rtl

* made tests always pass

* feat: add Close/Finish buttons to DBModal on Edit (apache#15199)

* fix(db-connection-ui): Allow Dynamic Big Query Edits (apache#15185)

* working big query edits

* fix big stoping users from moving to next step

* fix default

* save defaults

* fix tslint

* remove object

* fix styling

* fix: Connect on DB Connection wasn't working (apache#15201)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* fixed the connect button

* make available alphabetically sort

* make available alphabetically sort II

* fix selection

* remove console.log

* fix styling

* fix: fix api_test and typeScript error (apache#15202)

* fix big query issue

* allow for query params

* feat: Added Dynamic form link to SQL Alchemy Form (apache#15208)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* added dynamic form link

* fix: fix api tests for test_available (apache#15210)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* fixes api tests

* feat: added Spinner to DB Modal (apache#15229)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* spinner

* Made header sticky (apache#15204)

* fix: make Edit DB modal look similar to create Modal (apache#15231)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* spinner

* changed edit

* fix: DB Connection UI R2 Fixes (apache#15232)

* fix display name refill

* fix order of additional params to always be at the bottom

* remove schema check on validation

* make encryption last

* fix json file upload

* fix additional params issue

* remove comments

* add back validation

* small fixes on bigquery edit

* only wrap encrypted with bigquery

* specific conditions for wrapping big query items

* dix additional params

* fix allow display name in sqlalchemy form

* backend before engine

* fix: do not use Marshmallow validation in partial params validation (apache#15236)

* fix: do not use Marshmallow validation in partial params validation

* Fix lint

* Update test

* make display name required

* reset validation errors onClose (apache#15243)

* fix: Edit for all dynamic forms (apache#15244)

* fix edit for dynamic forms

* fix linting

* fix edit on sqlalchemy forms

* fix big query reference

* remove extra if

* wrap configuration method (apache#15274)

* add more specific engine elastic search (apache#15287)

* do a deep copy of obj before POST (apache#15298)

* feat: add Back button to extra options (apache#15300)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* spinner

* first draft

* working

* added back button to create modal

* revisions and testing

* chore: Add tooltips and button to Connect Postgresql DB Modal Form (apache#15179)

* Added tooltips. Still need to place in the right spot.

* Revert to where I started.

* Added 3 tooltips, 1 Button(need link config). BigQuery not added yet.

* Added tooltip BigOuery modal. `span` above upload btn missing `*`

* Added tooltip to `Host` field. Alignment needs to be fixed.

* Stuck trying to add conditional render of tooltip to LabeledErrorBoundInput

* Clean commit for review

* Dynamic tooltip componet created. Needs alignment of SVG still.

* Fixed typo.

* Added line spacing back in

* Changed required props to optional/Remove comment

* Fixed alignment of tooltips & moved 2tooltips outside of Btn

* Added one more line space back in

* Removed Typo

* Removed another typo

* Flixed linter error

* Created test for tooltip.

* Added expectation for visible tooltipIcon

Co-authored-by: andrewbastian <andrewbastian@hosaka-deck.lan>

* style: Database Modal UI Polish (apache#15234)

* Corrected polishing tasks from Clubhouse ticket

* More UI polish

* Added more polish

* Moved encryption field and created constant value for viewBox in InfoToolTip

* feat: allow editing (apache#15308)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* spinner

* elizabeth fixed the edit issue

* feat: Added error alert for DB connection Modal  (apache#15242)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* spinner

* added errorAlert

* added revisions

* current work

* revisions

* fix: validation on edit (apache#15310)

* fix: Big Query Error messaging (apache#15334)

* remove validation check

* remove validation check

* fix error messaging

* stop validation on big query

* add condition for skipping specific engines for validation

* if no params

* update styles

* feat: big Query using back button (apache#15338)

* fix: password errors on validation (apache#15372)

* filter out password supply for validation

* filter password

* feat: updated Error Alert (apache#15377)

* Updated styling (apache#15379)

* fix password error filter

* feat: Arash/password field error (apache#15388)

* fix: Back Button on Create for DB conncetion (apache#15389)

* fix: add icons (apache#15122)

* added alerts

* revisions

* added icon

* spinner

* fixing backButton on Create

* fix doc (apache#15393)

* style: Database Connection Modal UI Polish R5 (apache#15412)

* Fixed inconsistent header spacing in step 1

* Touched up tooltips

* Added red *s to BigQuery form

* Centered modal window

* make alerts configurable (apache#15404)

* fix: Allow users to override database connection docs (apache#15434)

* allow users to override docs

* fix linting issue

* fix: Error Icon not showing up on  errored input fieds on validation (apache#15431)

* Fixed now-show error icon

Signed-off-by: andrewbastian <andrew.bastian@gmail.com>

* Changed `%` to `px`

* Fixed lint error

* Changed units to `theme.gridUnit`

* test: RTL testing on DatabaseModal (apache#15394)

* RTL testing on DatabaseModal

* Continued RTL testing on DatabaseModal

* Code cleanup

* Removed a comment that missed my radar

* test: Add e2e testing (apache#15376)

* create boilerplate for cypress test

* added 1 more test

* add more test cases

* saving this for development

* lit

* remove name

* update pass

* remove unused test

* fix merge conflicts

* Fixed "connetion" typo (apache#15458)

* fix: Database connection modal touch up (apache#15463)

* Removed unnecessary TODO and named the remaining ones

* Added translation functionality

* Fixed typo in Database Modal RTL test

* Update modal.test.ts

* fix: Showing errors for SQLA forms (apache#15462)

* fix documentation links

* fix sqlalchemy onCreate

* Fixing SQLA error messaging

* fix logic for extra save

* fix this issue

* fix: Update Invalid Port SIP-40 Reference (apache#15464)

* Fixed jumpy header text

* fix: Edit Modal not saving properly (apache#15468)

* Aligned info icons on dynamic form

* fix: merge conflict (apache#15479)

* chore: simplify errors and issue codes (apache#15437)

* Fix issue number

* Fix test

* Fixed line-height in header, also fixed translation functions in BigQuery

* Updated placeholder text in additional params field

* Fixed padding in edit form

* Corrected placeholder text in BigQuery > Service Account field

* Make linter happy

Co-authored-by: Elizabeth Thompson <eschutho@gmail.com>
Co-authored-by: Arash <arash.afghahi@gmail.com>
Co-authored-by: hughhhh <hughmil3s@gmail.com>
Co-authored-by: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
Co-authored-by: simcha90 <56388545+simcha90@users.noreply.github.com>
Co-authored-by: Ville Brofeldt <33317356+villebro@users.noreply.github.com>
Co-authored-by: Einat Bertenthal <einatbar@users.noreply.github.com>
Co-authored-by: einatnielsen <einat.bertenthal@nielsen.com>
Co-authored-by: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Co-authored-by: Beto Dealmeida <roberto@dealmeida.net>
Co-authored-by: Andrew Bastian <50464395+andrewbastian@users.noreply.github.com>
Co-authored-by: andrewbastian <andrewbastian@hosaka-deck.lan>
  • Loading branch information
13 people authored and cccs-RyanS committed Dec 17, 2021
1 parent d69cae3 commit f7549c6
Show file tree
Hide file tree
Showing 6 changed files with 59 additions and 55 deletions.
30 changes: 15 additions & 15 deletions superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,13 @@ const StyledFormGroup = styled('div')`
}
`;

const infoTooltip = (theme: SupersetTheme) => css`
svg {
vertical-align: bottom;
margin-bottom: ${theme.gridUnit * 0.25}px;
}
const StyledAlignment = styled.div`
display: flex;
align-items: center;
`;

const StyledFormLabel = styled(FormLabel)`
margin-bottom: 0;
`;

const LabeledErrorBoundInput = ({
Expand All @@ -97,16 +99,14 @@ const LabeledErrorBoundInput = ({
...props
}: LabeledErrorBoundInputProps) => (
<StyledFormGroup className={className}>
<FormLabel
htmlFor={id}
required={required}
css={(theme: SupersetTheme) => infoTooltip(theme)}
>
{label}
</FormLabel>
{hasTooltip && (
<InfoTooltip tooltip={`${tooltipText}`} viewBox="0 -6 24 24" />
)}
<StyledAlignment>
<StyledFormLabel htmlFor={id} required={required}>
{label}
</StyledFormLabel>
{hasTooltip && (
<InfoTooltip tooltip={`${tooltipText}`} viewBox="0 -1 24 24" />
)}
</StyledAlignment>
<FormItem
css={(theme: SupersetTheme) => alertIconStyles(theme, !!errorMessage)}
validateTrigger={Object.keys(validationMethods)}
Expand Down
3 changes: 2 additions & 1 deletion superset-frontend/src/components/InfoTooltip/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ export default function InfoTooltip({
trigger = 'hover',
overlayStyle = defaultOverlayStyle,
bgColor = defaultColor,
viewBox = '0 -2 24 24',
}: InfoTooltipProps) {
return (
<StyledTooltip
Expand All @@ -74,7 +75,7 @@ export default function InfoTooltip({
overlayStyle={overlayStyle}
color={bgColor}
>
<Icons.InfoSolidSmall className="info-solid-small" />
<Icons.InfoSolidSmall className="info-solid-small" viewBox={viewBox} />
</StyledTooltip>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -85,19 +85,19 @@ const CredentialsInfo = ({
{!isEditMode && (
<>
<FormLabel required>
{`${t('How do you want to enter service account credentials?')}`}
{t('How do you want to enter service account credentials?')}
</FormLabel>
<Select
defaultValue={uploadOption}
style={{ width: '100%' }}
onChange={option => setUploadOption(option)}
>
<Select.Option value={CredentialInfoOptions.jsonUpload}>
{`${t('Upload JSON file')}`}
{t('Upload JSON file')}
</Select.Option>

<Select.Option value={CredentialInfoOptions.copyPaste}>
{`${t('Copy and Paste JSON credentials')}`}
{t('Copy and Paste JSON credentials')}
</Select.Option>
</Select>
</>
Expand All @@ -106,22 +106,16 @@ const CredentialsInfo = ({
isEditMode ||
editNewDb ? (
<div className="input-container">
<FormLabel required>{`${t('Service Account')}`}</FormLabel>
<FormLabel required>{t('Service Account')}</FormLabel>
<textarea
className="input-form"
name="credentials_info"
value={db?.parameters?.credentials_info}
onChange={changeMethods.onParametersChange}
placeholder={JSON.stringify(
{
credentials_info: '<contents of credentials JSON file>',
},
null,
' ',
)}
placeholder="Paste content of service credentials JSON file here"
/>
<span className="label-paste">
`${t('Copy and paste the entire service account .json file here')}`
{t('Copy and paste the entire service account .json file here')}
</span>
</div>
) : (
Expand All @@ -130,7 +124,7 @@ const CredentialsInfo = ({
css={(theme: SupersetTheme) => infoTooltip(theme)}
>
<div css={{ display: 'flex', alignItems: 'center' }}>
<FormLabel required>{`${t('Upload Credentials')}`}</FormLabel>
<FormLabel required>{t('Upload Credentials')}</FormLabel>
<InfoTooltip
tooltip={t(
'Use the JSON file you automatically downloaded when creating your service account in Google BigQuery.',
Expand All @@ -144,7 +138,7 @@ const CredentialsInfo = ({
className="input-upload-btn"
onClick={() => document?.getElementById('selectedFile')?.click()}
>
{`${t('Choose File')}`}
{t('Choose File')}
</Button>
)}
{fileToUpload && (
Expand Down Expand Up @@ -173,7 +167,6 @@ const CredentialsInfo = ({
if (event.target.files) {
file = event.target.files[0];
}

setFileToUpload(file?.name);
changeMethods.onParametersChange({
target: {
Expand Down Expand Up @@ -335,7 +328,7 @@ const queryField = ({
value={db?.parameters?.query}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.query}
placeholder="e.g. param1=value&param2=value2"
placeholder="e.g. param1=value1&param2=value2"
label="Additional Parameters"
onChange={changeMethods.onParametersChange}
helpText={t('Add additional custom parameters')}
Expand Down Expand Up @@ -367,6 +360,7 @@ const forceSSLField = ({
<InfoTooltip
tooltip={t('SSL Mode "require" will be used.')}
placement="right"
viewBox="0 0 24 24"
/>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,6 @@ import { getDatabaseDocumentationLinks } from 'src/views/CRUD/hooks';
import {
EditHeaderTitle,
EditHeaderSubtitle,
CreateHeaderTitle,
CreateHeaderSubtitle,
StyledFormHeader,
StyledStickyHeader,
} from './styles';
Expand Down Expand Up @@ -79,9 +77,9 @@ const ModalHeader = ({
);
const useSqlAlchemyFormHeader = (
<StyledFormHeader>
<p className="helper"> STEP 2 OF 2 </p>
<CreateHeaderTitle>Enter Primary Credentials</CreateHeaderTitle>
<CreateHeaderSubtitle>
<p className="helper-top"> STEP 2 OF 2 </p>
<h4>Enter Primary Credentials</h4>
<p className="helper-bottom">
Need help? Learn how to connect your database{' '}
<a
href={supersetTextDocs?.default || DOCUMENTATION_LINK}
Expand All @@ -91,18 +89,18 @@ const ModalHeader = ({
here
</a>
.
</CreateHeaderSubtitle>
</p>
</StyledFormHeader>
);
const hasConnectedDbHeader = (
<StyledStickyHeader>
<StyledFormHeader>
<p className="helper"> STEP 3 OF 3 </p>
<h4>
<p className="helper-top"> STEP 3 OF 3 </p>
<h4 className="step-3-text">
Your database was successfully connected! Here are some optional
settings for your database
</h4>
<p className="helper">
<p className="helper-bottom">
Need help? Learn more about{' '}
<a
href={documentationLink(db?.engine)}
Expand All @@ -118,9 +116,9 @@ const ModalHeader = ({
const hasDbHeader = (
<StyledStickyHeader>
<StyledFormHeader>
<p className="helper"> STEP 2 OF 3 </p>
<p className="helper-top"> STEP 2 OF 3 </p>
<h4>Enter the required {dbModel.name} credentials</h4>
<p className="helper">
<p className="helper-bottom">
Need help? Learn more about{' '}
<a
href={documentationLink(db?.engine)}
Expand All @@ -136,7 +134,7 @@ const ModalHeader = ({
const noDbHeader = (
<StyledFormHeader>
<div className="select-db">
<p className="helper"> STEP 1 OF 3 </p>
<p className="helper-top"> STEP 1 OF 3 </p>
<h4>Select a database to connect</h4>
</div>
</StyledFormHeader>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ import {
TabHeader,
formHelperStyles,
formStyles,
StyledBasicTab,
StyledAlignment,
SelectDatabaseStyles,
infoTooltip,
StyledFooterButton,
Expand Down Expand Up @@ -864,9 +864,9 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
onTabClick={tabChange}
animated={{ inkBar: true, tabPane: true }}
>
<StyledBasicTab tab={<span>{t('Basic')}</span>} key="1">
<Tabs.TabPane tab={<span>{t('Basic')}</span>} key="1">
{useSqlAlchemyForm ? (
<>
<StyledAlignment>
<SqlAlchemyForm
db={db as DatabaseObject}
onInputChange={({ target }: { target: HTMLInputElement }) =>
Expand Down Expand Up @@ -908,7 +908,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
/>
</div>
)}
</>
</StyledAlignment>
) : (
<DatabaseConnectionForm
isEditMode
Expand Down Expand Up @@ -958,7 +958,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
type="info"
/>
)}
</StyledBasicTab>
</Tabs.TabPane>
<Tabs.TabPane tab={<span>{t('Advanced')}</span>} key="2">
<ExtraOptions
db={db as DatabaseObject}
Expand Down Expand Up @@ -1116,7 +1116,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 3 24 24"
viewBox="6 4 24 24"
/>
</div>
{/* Step 2 */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import { styled, css, SupersetTheme } from '@superset-ui/core';
import { JsonEditor } from 'src/components/AsyncAceEditor';
import Tabs from 'src/components/Tabs';
import Button from 'src/components/Button';

const CTAS_CVAS_SCHEMA_FORM_HEIGHT = 102;
Expand All @@ -42,26 +41,38 @@ export const StyledFormHeader = styled.header`
padding: ${({ theme }) => theme.gridUnit * 2}px
${({ theme }) => theme.gridUnit * 4}px;
line-height: ${({ theme }) => theme.gridUnit * 6}px;
.helper {
.helper-top {
padding-bottom: 0;
color: ${({ theme }) => theme.colors.grayscale.base};
font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
margin: 0;
}
.helper-bottom {
padding-top: 0;
color: ${({ theme }) => theme.colors.grayscale.base};
font-size: ${({ theme }) => theme.typography.sizes.s - 1}px;
margin: 0;
}
h4 {
color: ${({ theme }) => theme.colors.grayscale.dark2};
font-weight: bold;
font-size: ${({ theme }) => theme.typography.sizes.l}px;
margin: 0;
padding: 0;
line-height: ${({ theme }) => theme.gridUnit * 8}px;
}
.select-db {
padding: ${({ theme }) => theme.gridUnit}px;
padding-bottom: ${({ theme }) => theme.gridUnit * 2}px;
.helper {
margin: 0;
}
h4 {
margin: 0 0 ${({ theme }) => theme.gridUnit * 6}px;
margin: 0 0 ${({ theme }) => theme.gridUnit * 4}px;
}
}
`;
Expand Down Expand Up @@ -377,7 +388,7 @@ export const StyledExpandableForm = styled.div`
}
`;

export const StyledBasicTab = styled(Tabs.TabPane)`
export const StyledAlignment = styled.div`
padding: 0 ${({ theme }) => theme.gridUnit * 4}px;
margin-top: ${({ theme }) => theme.gridUnit * 6}px;
`;
Expand Down

0 comments on commit f7549c6

Please sign in to comment.