Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Dynamic Form for edit DB Modal #14845

Merged
merged 35 commits into from
Jun 3, 2021
Merged

feat: Dynamic Form for edit DB Modal #14845

Show file tree
Hide file tree
Changes from 31 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
05a1bb7
split db modal file
eschutho Apr 21, 2021
a8afce9
split db modal file
eschutho Apr 21, 2021
b69bf16
hook up available databases
eschutho Apr 28, 2021
6eae68c
add comment
eschutho May 18, 2021
e8cd4f4
split db modal file
eschutho Apr 21, 2021
95917e4
hook up available databases
eschutho Apr 28, 2021
e764072
use new validation component
eschutho May 21, 2021
842f856
first draft
AAfghahi May 25, 2021
7cb4098
use new validation component
eschutho May 21, 2021
253053b
first draft
AAfghahi May 26, 2021
a47d52d
first draft
AAfghahi May 26, 2021
8cec32b
merge
AAfghahi May 26, 2021
5a785d7
Merge branch 'master' of https://github.com/apache/superset into pexd…
hughhhh May 27, 2021
92d81b9
using paxdax feature branch
AAfghahi May 28, 2021
19a4c3a
get tests passing
AAfghahi Jun 1, 2021
e7f0dbb
split db modal file
eschutho Apr 21, 2021
b57d090
hook up available databases
eschutho Apr 28, 2021
271c6e9
use new validation component
eschutho May 21, 2021
ef63e3c
feat(db-connection-ui): Allow users to pick engine (#14884)
hughhhh Jun 1, 2021
013674b
Merge branch 'pexdax/db-connection-ui' into ch6732_editDBModal
AAfghahi Jun 1, 2021
9246710
revisions
AAfghahi Jun 1, 2021
0457bfe
fix conflicts
hughhhh Jun 1, 2021
502abec
fix package-lock.json
hughhhh Jun 1, 2021
25b435b
Merge branch 'pexdax/db-connection-ui' of ssh://github.com/apache/sup…
AAfghahi Jun 1, 2021
29a899d
# This is a combination of 6 commits.
eschutho Jun 1, 2021
f45cae2
fix test for db modal
hughhhh Jun 2, 2021
1aae834
feat(db-connection-ui): Allow users to pick engine (#14884)
hughhhh Jun 1, 2021
a380629
Merge branch 'master' into pexdax/db-connection-ui
hughhhh Jun 2, 2021
c4125fb
pulling feature branch
AAfghahi Jun 2, 2021
95c7f66
more revisions
AAfghahi Jun 2, 2021
e539834
used db.backend
AAfghahi Jun 2, 2021
47c30cb
added engine to model
AAfghahi Jun 2, 2021
9fac1eb
elizabeth revisions
AAfghahi Jun 2, 2021
78d7edb
elizabeth revisions
AAfghahi Jun 3, 2021
fc6d5d9
Merge branch 'pexdax/db-connection-ui' into ch6732_editDBModal
AAfghahi Jun 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 60 additions & 60 deletions superset-frontend/cypress-base/cypress/integration/database/modal.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,76 +16,76 @@
* specific language governing permissions and limitations
* under the License.
*/
import { DATABASE_LIST } from './helper';
// import { DATABASE_LIST } from './helper';
// TODO: Add new tests with the modal
// describe('Add database', () => {
// beforeEach(() => {
// cy.login();
// });

describe('Add database', () => {
beforeEach(() => {
cy.login();
});
// it('should keep create modal open when error', () => {
AAfghahi marked this conversation as resolved.
Show resolved Hide resolved
// cy.visit(DATABASE_LIST);

it('should keep create modal open when error', () => {
cy.visit(DATABASE_LIST);
// // open modal
// cy.get('[data-test="btn-create-database"]').click();

// open modal
cy.get('[data-test="btn-create-database"]').click();
// // values should be blank
// cy.get('[data-test="database-modal"] input[name="database_name"]').should(
// 'have.value',
// '',
// );
// cy.get('[data-test="database-modal"] input[name="sqlalchemy_uri"]').should(
// 'have.value',
// '',
// );

// values should be blank
cy.get('[data-test="database-modal"] input[name="database_name"]').should(
'have.value',
'',
);
cy.get('[data-test="database-modal"] input[name="sqlalchemy_uri"]').should(
'have.value',
'',
);
// // type values
// cy.get('[data-test="database-modal"] input[name="database_name"]')
// .focus()
// .type('cypress');
// cy.get('[data-test="database-modal"] input[name="sqlalchemy_uri"]')
// .focus()
// .type('bad_db_uri');

// type values
cy.get('[data-test="database-modal"] input[name="database_name"]')
.focus()
.type('cypress');
cy.get('[data-test="database-modal"] input[name="sqlalchemy_uri"]')
.focus()
.type('bad_db_uri');
// // click save
// cy.get('[data-test="modal-confirm-button"]:not(:disabled)').click();

// click save
cy.get('[data-test="modal-confirm-button"]:not(:disabled)').click();
// // should show error alerts and keep modal open
// cy.get('.toast').contains('error');
// cy.wait(1000); // wait for potential (incorrect) closing annimation
// cy.get('[data-test="database-modal"]').should('be.visible');

// should show error alerts and keep modal open
cy.get('.toast').contains('error');
cy.wait(1000); // wait for potential (incorrect) closing annimation
cy.get('[data-test="database-modal"]').should('be.visible');
// // should be able to close modal
// cy.get('[data-test="modal-cancel-button"]').click();
// cy.get('[data-test="database-modal"]').should('not.be.visible');
// });

// should be able to close modal
cy.get('[data-test="modal-cancel-button"]').click();
cy.get('[data-test="database-modal"]').should('not.be.visible');
});
// it('should keep update modal open when error', () => {
// // open modal
// cy.get('[data-test="database-edit"]:last').click();

it('should keep update modal open when error', () => {
// open modal
cy.get('[data-test="database-edit"]:last').click();
// // it should show saved values
// cy.get('[data-test="database-modal"]:last input[name="sqlalchemy_uri"]')
// .invoke('val')
// .should('not.be.empty');
// cy.get('[data-test="database-modal"] input[name="database_name"]')
// .invoke('val')
// .should('not.be.empty');

// it should show saved values
cy.get('[data-test="database-modal"]:last input[name="sqlalchemy_uri"]')
.invoke('val')
.should('not.be.empty');
cy.get('[data-test="database-modal"] input[name="database_name"]')
.invoke('val')
.should('not.be.empty');
// cy.get('[data-test="database-modal"]:last input[name="sqlalchemy_uri"]')
// .focus()
// .dblclick()
// .type('{selectall}{backspace}bad_uri');

cy.get('[data-test="database-modal"]:last input[name="sqlalchemy_uri"]')
.focus()
.dblclick()
.type('{selectall}{backspace}bad_uri');
// // click save
// cy.get('[data-test="modal-confirm-button"]:not(:disabled)').click();

// click save
cy.get('[data-test="modal-confirm-button"]:not(:disabled)').click();
// // should show error alerts
// // TODO(hugh): Update this test
// // cy.get('.toast').contains('error').should('be.visible');

// should show error alerts
// TODO(hugh): Update this test
// cy.get('.toast').contains('error').should('be.visible');

// modal should still be open
// cy.wait(1000); // wait for potential (incorrect) closing annimation
// cy.get('[data-test="database-modal"]').should('be.visible');
});
});
// // modal should still be open
// // cy.wait(1000); // wait for potential (incorrect) closing annimation
// // cy.get('[data-test="database-modal"]').should('be.visible');
// });
// });
37 changes: 29 additions & 8 deletions superset-frontend/src/views/CRUD/data/database/DatabaseModal/DatabaseConnectionForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import {
formScrollableStyles,
validatedFormStyles,
} from './styles';
import { DatabaseForm } from '../types';
import { DatabaseForm, DatabaseObject } from '../types';

export const FormFieldOrder = [
'host',
Expand All @@ -43,17 +43,20 @@ interface FieldPropTypes {
};
validationErrors: JsonObject | null;
getValidation: () => void;
db?: DatabaseObject;
}

const hostField = ({
required,
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="host"
name="host"
value={db?.parameters?.host || ''}
required={required}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.host}
Expand All @@ -68,11 +71,13 @@ const portField = ({
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="port"
name="port"
required={required}
value={db?.parameters?.port || ''}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.port}
placeholder="e.g. 5432"
Expand All @@ -86,29 +91,33 @@ const databaseField = ({
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="database"
name="database"
required={required}
value={db?.parameters?.database || ''}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.database}
placeholder="e.g. world_population"
label="Database name"
onChange={changeMethods.onParametersChange}
helpText="Copy the name of the PostgreSQL database you are trying to connect to."
helpText="Copy the name of the database you are trying to connect to."
/>
);
const usernameField = ({
required,
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="username"
name="username"
required={required}
value={db?.parameters?.username || ''}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.username}
placeholder="e.g. Analytics"
Expand All @@ -121,11 +130,14 @@ const passwordField = ({
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="password"
name="password"
required={required}
type="password"
value={db?.parameters?.password || ''}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.password}
placeholder="e.g. ********"
Expand All @@ -138,11 +150,13 @@ const displayField = ({
changeMethods,
getValidation,
validationErrors,
db,
}: FieldPropTypes) => (
<ValidatedInput
id="database_name"
name="database_name"
required={required}
value={db?.database_name || ''}
validationMethods={{ onBlur: getValidation }}
errorMessage={validationErrors?.database_name}
placeholder=""
Expand All @@ -167,8 +181,12 @@ const DatabaseConnectionForm = ({
onChange,
validationErrors,
getValidation,
db,
isEditMode = false,
}: {
isEditMode?: boolean;
dbModel: DatabaseForm;
db: Partial<DatabaseObject> | null;
onParametersChange: (
event: FormEvent<InputProps> | { target: HTMLInputElement },
) => void;
Expand All @@ -179,12 +197,14 @@ const DatabaseConnectionForm = ({
getValidation: () => void;
}) => (
<>
<StyledFormHeader>
<h4>Enter the required {name} credentials</h4>
<p className="helper">
Need help? Learn more about connecting to {name}.
</p>
</StyledFormHeader>
{!isEditMode && (
AAfghahi marked this conversation as resolved.
Show resolved Hide resolved
<StyledFormHeader>
<h4>Enter the required {name} credentials</h4>
<p className="helper">
Need help? Learn more about connecting to {name}.
</p>
</StyledFormHeader>
)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can move the header out to the index file like we did here:

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

Line 367 in e539834

{isEditMode ? (

<div
// @ts-ignore
css={(theme: SupersetTheme) => [
Expand All @@ -203,6 +223,7 @@ const DatabaseConnectionForm = ({
changeMethods: { onParametersChange, onChange },
validationErrors,
getValidation,
db,
key: field,
}),
)}
Expand Down
Loading