From 729a0ab43fc917615ef05b87bbd9b37291c2301d Mon Sep 17 00:00:00 2001 From: Lyndsi Kay Williams <55605634+lyndsiWilliams@users.noreply.github.com> Date: Fri, 2 Jul 2021 12:19:26 -0500 Subject: [PATCH] fix: Database connection R6 fixes (#15486) * 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 (#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 (#14832) * split db modal file * hook up available databases * use new validation component # This is the commit message #2: feat: Icon Button (#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 (#14932) # This is the commit message #4: fix: is_temporal should overwrite is_dttm (#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 (#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 (#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 (#14832) * split db modal file * hook up available databases * use new validation component # This is the commit message #2: feat: Icon Button (#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 (#14932) # This is the commit message #4: fix: is_temporal should overwrite is_dttm (#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 (#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 (#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 (#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 (#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 (#14832) * split db modal file * hook up available databases * use new validation component # This is the commit message #2: feat: Icon Button (#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 (#14932) # This is the commit message #4: fix: is_temporal should overwrite is_dttm (#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 (#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 (#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 Co-authored-by: hughhhh * address comments * oops * # This is a combination of 6 commits. # This is the 1st commit message: feat: validation db modal (#14832) * split db modal file * hook up available databases * use new validation component # This is the commit message #2: feat: Icon Button (#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 (#14932) # This is the commit message #4: fix: is_temporal should overwrite is_dttm (#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 (#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 (#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 (#14829) * fix(native-filters): Manage default value of filters by superset (#14785) * fix:fix get permission function * feat: manage default value in superset * fix(native-filters): loop bug by simplify state handling (#14788) * fix: set table name width to not hide icons when name is too long (#14489) * fix: set table name width to now hide icons when name is too long * fix: table style Co-authored-by: einatnielsen * feat(explore): Remove default for time range filter and Metrics (#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 (#14484) * feat: chart gallery search improvement * test: adding unit test for VizTypeControl * fix: lint errors Co-authored-by: einatnielsen * 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 Co-authored-by: einatnielsen Co-authored-by: Kamil Gabryjelski Co-authored-by: Beto Dealmeida * feat: adding SSL Toggle to Create Database Modal (#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 * changed tooltips based on stephen advice Co-authored-by: Beto Dealmeida Co-authored-by: Hugh A. Miles II * feat(database-connection-ui) Allow configuration of Database Images from SupersetText (#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 (#15071) * additional params to the DatabaseConnectionForm * save passing params up to api * feat: Added Steps and centralized Headers (#15041) * fix superset_text issue (#15095) * fix edit issue by returning parameters properly (#15101) * feat: added alerts (#15103) * added alerts * revisions * fix: add icons (#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 (#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 (#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 (#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 (#15119) * save avg * Styled step 1 * Remove Alert * Finished styling, added ellipsis library to IconButton * Fixed text margin Co-authored-by: hughhhh * 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 (#15187) * feat: adding server-side validation and unmasked password on create (#15151) * fix: add icons (#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 (#15199) * fix(db-connection-ui): Allow Dynamic Big Query Edits (#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 (#15201) * fix: add icons (#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 (#15202) * fix big query issue * allow for query params * feat: Added Dynamic form link to SQL Alchemy Form (#15208) * fix: add icons (#15122) * added alerts * revisions * added icon * added dynamic form link * fix: fix api tests for test_available (#15210) * fix: add icons (#15122) * added alerts * revisions * added icon * fixes api tests * feat: added Spinner to DB Modal (#15229) * fix: add icons (#15122) * added alerts * revisions * added icon * spinner * Made header sticky (#15204) * fix: make Edit DB modal look similar to create Modal (#15231) * fix: add icons (#15122) * added alerts * revisions * added icon * spinner * changed edit * fix: DB Connection UI R2 Fixes (#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 (#15236) * fix: do not use Marshmallow validation in partial params validation * Fix lint * Update test * make display name required * reset validation errors onClose (#15243) * fix: Edit for all dynamic forms (#15244) * fix edit for dynamic forms * fix linting * fix edit on sqlalchemy forms * fix big query reference * remove extra if * wrap configuration method (#15274) * add more specific engine elastic search (#15287) * do a deep copy of obj before POST (#15298) * feat: add Back button to extra options (#15300) * fix: add icons (#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 (#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 * style: Database Modal UI Polish (#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 (#15308) * fix: add icons (#15122) * added alerts * revisions * added icon * spinner * elizabeth fixed the edit issue * feat: Added error alert for DB connection Modal (#15242) * fix: add icons (#15122) * added alerts * revisions * added icon * spinner * added errorAlert * added revisions * current work * revisions * fix: validation on edit (#15310) * fix: Big Query Error messaging (#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 (#15338) * fix: password errors on validation (#15372) * filter out password supply for validation * filter password * feat: updated Error Alert (#15377) * Updated styling (#15379) * fix password error filter * feat: Arash/password field error (#15388) * fix: Back Button on Create for DB conncetion (#15389) * fix: add icons (#15122) * added alerts * revisions * added icon * spinner * fixing backButton on Create * fix doc (#15393) * style: Database Connection Modal UI Polish R5 (#15412) * Fixed inconsistent header spacing in step 1 * Touched up tooltips * Added red *s to BigQuery form * Centered modal window * make alerts configurable (#15404) * fix: Allow users to override database connection docs (#15434) * allow users to override docs * fix linting issue * fix: Error Icon not showing up on errored input fieds on validation (#15431) * Fixed now-show error icon Signed-off-by: andrewbastian * Changed `%` to `px` * Fixed lint error * Changed units to `theme.gridUnit` * test: RTL testing on DatabaseModal (#15394) * RTL testing on DatabaseModal * Continued RTL testing on DatabaseModal * Code cleanup * Removed a comment that missed my radar * test: Add e2e testing (#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 (#15458) * fix: Database connection modal touch up (#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 (#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 (#15464) * Fixed jumpy header text * fix: Edit Modal not saving properly (#15468) * Aligned info icons on dynamic form * fix: merge conflict (#15479) * chore: simplify errors and issue codes (#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 Co-authored-by: Arash Co-authored-by: hughhhh 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 Co-authored-by: einatnielsen Co-authored-by: Kamil Gabryjelski Co-authored-by: Beto Dealmeida Co-authored-by: Andrew Bastian <50464395+andrewbastian@users.noreply.github.com> Co-authored-by: andrewbastian --- .../Form/LabeledErrorBoundInput.tsx | 30 +++++++++---------- .../src/components/InfoTooltip/index.tsx | 3 +- .../DatabaseModal/DatabaseConnectionForm.tsx | 26 +++++++--------- .../database/DatabaseModal/ModalHeader.tsx | 22 +++++++------- .../data/database/DatabaseModal/index.tsx | 12 ++++---- .../data/database/DatabaseModal/styles.ts | 21 +++++++++---- 6 files changed, 59 insertions(+), 55 deletions(-) diff --git a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx index f654c4f5dc92..ac94d947184e 100644 --- a/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx +++ b/superset-frontend/src/components/Form/LabeledErrorBoundInput.tsx @@ -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 = ({ @@ -97,16 +99,14 @@ const LabeledErrorBoundInput = ({ ...props }: LabeledErrorBoundInputProps) => ( - infoTooltip(theme)} - > - {label} - - {hasTooltip && ( - - )} + + + {label} + + {hasTooltip && ( + + )} + alertIconStyles(theme, !!errorMessage)} validateTrigger={Object.keys(validationMethods)} diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx b/superset-frontend/src/components/InfoTooltip/index.tsx index 7aa9afaebd84..968f5df71598 100644 --- a/superset-frontend/src/components/InfoTooltip/index.tsx +++ b/superset-frontend/src/components/InfoTooltip/index.tsx @@ -65,6 +65,7 @@ export default function InfoTooltip({ trigger = 'hover', overlayStyle = defaultOverlayStyle, bgColor = defaultColor, + viewBox = '0 -2 24 24', }: InfoTooltipProps) { return ( - + ); } diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx index 9125d4a02ec0..ca4fd3a3af54 100644 --- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx +++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx @@ -85,7 +85,7 @@ const CredentialsInfo = ({ {!isEditMode && ( <> - {`${t('How do you want to enter service account credentials?')}`} + {t('How do you want to enter service account credentials?')} @@ -106,22 +106,16 @@ const CredentialsInfo = ({ isEditMode || editNewDb ? (
- {`${t('Service Account')}`} + {t('Service Account')}