# 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

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

@@ -319,5 +319,72 @@ describe('DatabaseModal', () => {
       const todoText = screen.getAllByText(/todo/i);
       expect(todoText[0]).toBeVisible();
     });
+
+    describe('create database', () => {
+      it('should show a form when dynamic_form is selected', async () => {
+        const props = {
+          ...dbProps,
+          databaseId: null,
+          database_name: null,
+          sqlalchemy_uri: null,
+        };
+        render(<DatabaseModal {...props} />, { useRedux: true });
+        // it should have the correct header text
+        const headerText = screen.getByText(/connect a database/i);
+        expect(headerText).toBeVisible();
+
+        await screen.findByText(/display name/i);
+
+        // it does not fetch any databases if no id is passed in
+        expect(fetchMock.calls().length).toEqual(0);
+
+        // todo we haven't hooked this up to load dynamically yet so
+        // we can't currently test it
+      });
+    });
+
+    describe('edit database', () => {
+      it('renders the sqlalchemy form when the sqlalchemy_form configuration method is set', async () => {
+        render(<DatabaseModal {...dbProps} />, { useRedux: true });
+
+        // it should have tabs
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs.length).toEqual(2);
+        expect(tabs[0]).toHaveTextContent('Basic');
+        expect(tabs[1]).toHaveTextContent('Advanced');
+
+        // it should have the correct header text
+        const headerText = screen.getByText(/edit database/i);
+        expect(headerText).toBeVisible();
+
+        // todo add more when this form is built out
+      });
+      it('renders the dynamic form when the dynamic_form configuration method is set', async () => {
+        fetchMock.get(DATABASE_FETCH_ENDPOINT, {
+          result: {
+            id: 10,
+            database_name: 'my database',
+            expose_in_sqllab: false,
+            allow_ctas: false,
+            allow_cvas: false,
+            configuration_method: 'dynamic_form',
+            parameters: {
+              database: 'mydatabase',
+            },
+          },
+        });
+        render(<DatabaseModal {...dbProps} />, { useRedux: true });
+
+        await screen.findByText(/todo/i);
+
+        // // it should have tabs
+        const tabs = screen.getAllByRole('tab');
+        expect(tabs.length).toEqual(2);
+
+        // it should show a TODO for now
+        const todoText = screen.getAllByText(/todo/i);
+        expect(todoText[0]).toBeVisible();
+      });
+    });
   });
 });