feat: add/edit database modal form sections UI

superset-frontend/spec/javascripts/views/CRUD/data/database/DatabaseModal_spec.jsx

@@ -23,13 +23,32 @@ import { styledMount as mount } from 'spec/helpers/theming';
 
 import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
 import Modal from 'src/common/components/Modal';
+import Tabs from 'src/common/components/Tabs';
 
 // store needed for withToasts(DatabaseModal)
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
+const mockedProps = {
+  show: true,
+};
+
+const dbProps = {
+  show: true,
+  database: {
+    id: 10,
+    database_name: 'test',
+    sqlalchemy_uri: 'sqllite:///user:pw/test',
+  },
+};
+
 describe('DatabaseModal', () => {
-  const wrapper = mount(<DatabaseModal />, { context: { store } });
+  const wrapper = mount(<DatabaseModal {...mockedProps} />, {
+    context: { store },
+  });
+  const editWrapper = mount(<DatabaseModal {...dbProps} />, {
+    context: { store },
+  });
 
   it('renders', () => {
     expect(wrapper.find(DatabaseModal)).toExist();
@@ -38,4 +57,26 @@ describe('DatabaseModal', () => {
   it('renders a Modal', () => {
     expect(wrapper.find(Modal)).toExist();
   });
+
+  it('renders "Add Database" header when no database is included', () => {
+    expect(wrapper.find('h4').text()).toEqual('Add Database');
+  });
+
+  it('renders "Edit Database" header when database prop is included', () => {
+    expect(editWrapper.find('h4').text()).toEqual('Edit Database');
+  });
+
+  it('renders a Tabs menu', () => {
+    expect(wrapper.find(Tabs)).toExist();
+  });
+
+  it('renders five TabPanes', () => {
+    expect(wrapper.find(Tabs.TabPane)).toExist();
+    expect(wrapper.find(Tabs.TabPane)).toHaveLength(5);
+  });
+
+  it('renders input elements for Connection section', () => {
+    expect(wrapper.find('input[name="database_name"]')).toExist();
+    expect(wrapper.find('input[name="sqlalchemy_uri"]')).toExist();
+  });
 });

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

@@ -107,13 +107,15 @@ export default function Modal({
         </span>
       }
       footer={[
-        <Button key="back" onClick={onHide}>
+        <Button key="back" onClick={onHide} cta>
           {t('Cancel')}
         </Button>,
         <Button
           key="submit"
+          buttonStyle={primaryButtonType}
           disabled={disablePrimaryButton}
           onClick={onHandledPrimaryAction}
+          cta
         >
           {primaryButtonName}
         </Button>,

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

@@ -40,6 +40,7 @@ const StyledTabs = styled(AntdTabs)`
     font-size: ${({ theme }) => theme.typography.sizes.s}px;
     text-align: center;
     text-transform: uppercase;
+    user-select: none;
 
     .required {
       margin-left: ${({ theme }) => theme.gridUnit / 2}px;

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

@@ -100,14 +100,24 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       () => {
         refreshData();
         addSuccessToast(t('Deleted: %s', dbName));
+
+        // Close delete modal
+        setDatabaseCurrentlyDeleting(null);
       },
       createErrorHandler(errMsg =>
         addDangerToast(t('There was an issue deleting %s: %s', dbName, errMsg)),
       ),
     );
   }
 
+  function handleDatabaseEdit(database: DatabaseObject) {
+    // Set database and open modal
+    setCurrentDatabase(database);
+    setDatabaseModalOpen(true);
+  }
+
   const canCreate = hasPerm('can_add');
+  const canEdit = hasPerm('can_edit');
   const canDelete = hasPerm('can_delete');
 
   const menuData: SubMenuProps = {
@@ -224,12 +234,29 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
       },
       {
         Cell: ({ row: { original } }: any) => {
+          const handleEdit = () => handleDatabaseEdit(original);
           const handleDelete = () => openDatabaseDeleteModal(original);
-          if (!canDelete) {
+          if (!canEdit && !canDelete) {
             return null;
           }
           return (
             <span className="actions">
+              {canEdit && (
+                <TooltipWrapper
+                  label="edit-action"
+                  tooltip={t('Edit')}
+                  placement="bottom"
+                >
+                  <span
+                    role="button"
+                    tabIndex={0}
+                    className="action-button"
+                    onClick={handleEdit}
+                  >
+                    <Icon name="pencil" />
+                  </span>
+                </TooltipWrapper>
+              )}
               {canDelete && (
                 <span
                   role="button"
@@ -308,7 +335,7 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
         show={databaseModalOpen}
         onHide={() => setDatabaseModalOpen(false)}
         onDatabaseAdd={() => {
-          /* TODO: add database logic here */
+          refreshData();
         }}
       />
       {databaseCurrentlyDeleting && (