Add cypress tests

superset-frontend/cypress-base/cypress/integration/database/helper.ts

@@ -0,0 +1,19 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export const DATABASE_LIST = '/databaseview/list';

superset-frontend/cypress-base/cypress/integration/database/modal.test.ts

@@ -0,0 +1,73 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { DATABASE_LIST } from './helper';
+
+describe('Add database', () => {
+  beforeEach(() => {
+    cy.server();
+    cy.login();
+  });
+
+  it('should keep create modal open when error', () => {
+    cy.visit(DATABASE_LIST);
+
+    // open modal
+    cy.get('[data-test="btn-create-database"]').click();
+
+    // 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();
+
+    // 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');
+  });
+
+  it('should keep update modal open when error', () => {
+    // open modal
+    cy.get('[data-test="database-edit"]:last').click();
+
+    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();
+
+    // should show error alerts
+    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');
+  });
+});

superset-frontend/src/common/components/Modal/Modal.tsx

@@ -32,6 +32,7 @@ interface ModalProps {
   primaryButtonName?: string;
   primaryButtonType?: 'primary' | 'danger';
   show: boolean;
+  name?: string;
   title: React.ReactNode;
   width?: string;
   maxWidth?: string;
@@ -114,6 +115,7 @@ const CustomModal = ({
   primaryButtonName = t('OK'),
   primaryButtonType = 'primary',
   show,
+  name,
   title,
   width,
   maxWidth,
@@ -159,7 +161,7 @@ const CustomModal = ({
         </span>
       }
       footer={!hideFooter ? modalFooter : null}
-      wrapProps={{ 'data-test': `${title}-modal`, ...wrapProps }}
+      wrapProps={{ 'data-test': `${name || title}-modal`, ...wrapProps }}
       {...rest}
     >
       {children}

superset-frontend/src/utils/getClientErrorObject.ts

@@ -31,7 +31,7 @@ export type ClientErrorObject = {
   link?: string;
   // marshmallow field validation returns the error mssage in the format
   // of { field: [msg1, msg2] }
-  message?: string | Record<string, string[]>;
+  message?: string;
   severity?: string;
   stacktrace?: string;
 } & Partial<SupersetClientResponse>;

superset-frontend/src/views/CRUD/data/database/DatabaseList.tsx

@@ -132,6 +132,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   if (canCreate) {
     menuData.buttons = [
       {
+        'data-test': 'btn-create-database',
         name: (
           <>
             <i className="fa fa-plus" /> {t('Database')}{' '}
@@ -295,6 +296,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
                 >
                   <span
                     role="button"
+                    data-test="database-edit"
                     tabIndex={0}
                     className="action-button"
                     onClick={handleEdit}

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

@@ -179,7 +179,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
               ? `${t('ERROR: ')}${
                   typeof error.message === 'string'
                     ? error.message
-                    : error.message.sqlalchemy_uri
+                    : (error.message as Record<string, string[]>).sqlalchemy_uri
                 }`
               : t('ERROR: Connection failed. '),
           );
@@ -315,6 +315,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
 
   return (
     <Modal
+      name="database"
       className="database-modal"
       disablePrimaryButton={disableSave}
       onHandledPrimaryAction={onSave}

superset/databases/schemas.py

@@ -131,7 +131,7 @@ def sqlalchemy_uri_validator(value: str) -> str:
     """
     try:
         make_url(value.strip())
-    except (ArgumentError, AttributeError):
+    except (ArgumentError, AttributeError, ValueError):
         raise ValidationError(
             [
                 _(

superset/models/core.py

@@ -649,9 +649,10 @@ def get_schema_access_for_csv_upload(  # pylint: disable=invalid-name
     def sqlalchemy_uri_decrypted(self) -> str:
         try:
             conn = sqla.engine.url.make_url(self.sqlalchemy_uri)
-        except ArgumentError:
+        except (ArgumentError, ValueError):
             # if the URI is invalid, ignore and return a placeholder url
-            return "dialect://host"
+            # (so users see 500 less often)
+            return "dialect://invalid_uri"
         if custom_password_store:
             conn.password = custom_password_store(conn)
         else: