feat: Move Database Import option into DB Connection modal

superset-frontend/src/components/Button/index.tsx

@@ -66,6 +66,14 @@ export interface ButtonProps {
   cta?: boolean;
   loading?: boolean | { delay?: number | undefined } | undefined;
   showMarginRight?: boolean;
+  type?:
+    | 'default'
+    | 'text'
+    | 'link'
+    | 'primary'
+    | 'dashed'
+    | 'ghost'
+    | undefined;
 }
 
 export default function Button(props: ButtonProps) {

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

@@ -23,10 +23,6 @@ import configureStore from 'redux-mock-store';
 import fetchMock from 'fetch-mock';
 import { Provider } from 'react-redux';
 import { styledMount as mount } from 'spec/helpers/theming';
-import { render, screen, cleanup } from 'spec/helpers/testing-library';
-import userEvent from '@testing-library/user-event';
-import { QueryParamProvider } from 'use-query-params';
-import * as featureFlags from 'src/featureFlags';
 
 import DatabaseList from 'src/views/CRUD/data/database/DatabaseList';
 import DatabaseModal from 'src/views/CRUD/data/database/DatabaseModal';
@@ -41,17 +37,6 @@ import { act } from 'react-dom/test-utils';
 const mockStore = configureStore([thunk]);
 const store = mockStore({});
 
-const mockAppState = {
-  common: {
-    config: {
-      CSV_EXTENSIONS: ['csv'],
-      EXCEL_EXTENSIONS: ['xls', 'xlsx'],
-      COLUMNAR_EXTENSIONS: ['parquet', 'zip'],
-      ALLOWED_EXTENSIONS: ['parquet', 'zip', 'xls', 'xlsx', 'csv'],
-    },
-  },
-};
-
 const databasesInfoEndpoint = 'glob:*/api/v1/database/_info*';
 const databasesEndpoint = 'glob:*/api/v1/database/?*';
 const databaseEndpoint = 'glob:*/api/v1/database/*';
@@ -208,44 +193,3 @@ describe('DatabaseList', () => {
     );
   });
 });
-
-describe('RTL', () => {
-  async function renderAndWait() {
-    const mounted = act(async () => {
-      render(
-        <QueryParamProvider>
-          <DatabaseList user={mockUser} />
-        </QueryParamProvider>,
-        { useRedux: true },
-        mockAppState,
-      );
-    });
-
-    return mounted;
-  }
-
-  let isFeatureEnabledMock;
-  beforeEach(async () => {
-    isFeatureEnabledMock = jest
-      .spyOn(featureFlags, 'isFeatureEnabled')
-      .mockImplementation(() => true);
-    await renderAndWait();
-  });
-
-  afterEach(() => {
-    cleanup();
-    isFeatureEnabledMock.mockRestore();
-  });
-
-  it('renders an "Import Database" tooltip under import button', async () => {
-    const importButton = await screen.findByTestId('import-button');
-    userEvent.hover(importButton);
-
-    await screen.findByRole('tooltip');
-    const importTooltip = screen.getByRole('tooltip', {
-      name: 'Import databases',
-    });
-
-    expect(importTooltip).toBeInTheDocument();
-  });
-});

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

@@ -30,7 +30,6 @@ import { Tooltip } from 'src/components/Tooltip';
 import Icons from 'src/components/Icons';
 import ListView, { FilterOperator, Filters } from 'src/components/ListView';
 import { commonMenuData } from 'src/views/CRUD/data/common';
-import ImportModelsModal from 'src/components/ImportModal/index';
 import handleResourceExport from 'src/utils/export';
 import { ExtentionConfigs } from 'src/views/components/types';
 import { UserWithPermissionsAndRoles } from 'src/types/bootstrapTypes';
@@ -39,17 +38,6 @@ import DatabaseModal from './DatabaseModal';
 import { DatabaseObject } from './types';
 
 const PAGE_SIZE = 25;
-const PASSWORDS_NEEDED_MESSAGE = t(
-  'The passwords for the databases below are needed in order to ' +
-    'import them. Please note that the "Secure Extra" and "Certificate" ' +
-    'sections of the database configuration are not present in export ' +
-    'files, and should be added manually after the import if they are needed.',
-);
-const CONFIRM_OVERWRITE_MESSAGE = t(
-  'You are importing one or more databases that already exist. ' +
-    'Overwriting might cause you to lose some of your work. Are you ' +
-    'sure you want to overwrite?',
-);
 
 interface DatabaseDeleteObject extends DatabaseObject {
   chart_count: number;
@@ -103,8 +91,6 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
   const [currentDatabase, setCurrentDatabase] = useState<DatabaseObject | null>(
     null,
   );
-  const [importingDatabase, showImportModal] = useState<boolean>(false);
-  const [passwordFields, setPasswordFields] = useState<string[]>([]);
   const [preparingExport, setPreparingExport] = useState<boolean>(false);
   const { roles } = useSelector<any, UserWithPermissionsAndRoles>(
     state => state.user,
@@ -116,20 +102,6 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
     ALLOWED_EXTENSIONS,
   } = useSelector<any, ExtentionConfigs>(state => state.common.conf);
 
-  const openDatabaseImportModal = () => {
-    showImportModal(true);
-  };
-
-  const closeDatabaseImportModal = () => {
-    showImportModal(false);
-  };
-
-  const handleDatabaseImport = () => {
-    showImportModal(false);
-    refreshData();
-    addSuccessToast(t('Database imported'));
-  };
-
   const openDatabaseDeleteModal = (database: DatabaseObject) =>
     SupersetClient.get({
       endpoint: `/api/v1/database/${database.id}/related_objects/`,
@@ -245,22 +217,6 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
         },
       },
     ];
-
-    if (isFeatureEnabled(FeatureFlag.VERSIONED_EXPORT)) {
-      menuData.buttons.push({
-        name: (
-          <Tooltip
-            id="import-tooltip"
-            title={t('Import databases')}
-            placement="bottomRight"
-          >
-            <Icons.Import data-test="import-button" />
-          </Tooltip>
-        ),
-        buttonStyle: 'link',
-        onClick: openDatabaseImportModal,
-      });
-    }
   }
 
   function handleDatabaseExport(database: DatabaseObject) {
@@ -526,19 +482,6 @@ function DatabaseList({ addDangerToast, addSuccessToast }: DatabaseListProps) {
         pageSize={PAGE_SIZE}
       />
 
-      <ImportModelsModal
-        resourceName="database"
-        resourceLabel={t('database')}
-        passwordsNeededMessage={PASSWORDS_NEEDED_MESSAGE}
-        confirmOverwriteMessage={CONFIRM_OVERWRITE_MESSAGE}
-        addDangerToast={addDangerToast}
-        addSuccessToast={addSuccessToast}
-        onModelImport={handleDatabaseImport}
-        show={importingDatabase}
-        onHide={closeDatabaseImportModal}
-        passwordFields={passwordFields}
-        setPasswordFields={setPasswordFields}
-      />
       {preparingExport && <Loading />}
     </>
   );

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

@@ -19,6 +19,7 @@
 
 import React from 'react';
 import { getDatabaseDocumentationLinks } from 'src/views/CRUD/hooks';
+import { UploadFile } from 'antd/lib/upload/interface';
 import {
   EditHeaderTitle,
   EditHeaderSubtitle,
@@ -52,6 +53,7 @@ const documentationLink = (engine: string | undefined) => {
   }
   return irregularDocumentationLinks[engine];
 };
+
 const ModalHeader = ({
   isLoading,
   isEditMode,
@@ -61,6 +63,7 @@ const ModalHeader = ({
   dbName,
   dbModel,
   editNewDb,
+  fileList,
 }: {
   isLoading: boolean;
   isEditMode: boolean;
@@ -70,13 +73,19 @@ const ModalHeader = ({
   dbName: string;
   dbModel: DatabaseForm;
   editNewDb?: boolean;
+  fileList?: UploadFile[];
+  passwordFields?: string[];
+  needsOverwriteConfirm?: boolean;
 }) => {
+  const fileCheck = fileList && fileList?.length > 0;
+
   const isEditHeader = (
     <StyledFormHeader>
       <EditHeaderTitle>{db?.backend}</EditHeaderTitle>
       <EditHeaderSubtitle>{dbName}</EditHeaderSubtitle>
     </StyledFormHeader>
   );
+
   const useSqlAlchemyFormHeader = (
     <StyledFormHeader>
       <p className="helper-top"> STEP 2 OF 2 </p>
@@ -94,6 +103,7 @@ const ModalHeader = ({
       </p>
     </StyledFormHeader>
   );
+
   const hasConnectedDbHeader = (
     <StyledStickyHeader>
       <StyledFormHeader>
@@ -115,6 +125,7 @@ const ModalHeader = ({
       </StyledFormHeader>
     </StyledStickyHeader>
   );
+
   const hasDbHeader = (
     <StyledStickyHeader>
       <StyledFormHeader>
@@ -133,6 +144,7 @@ const ModalHeader = ({
       </StyledFormHeader>
     </StyledStickyHeader>
   );
+
   const noDbHeader = (
     <StyledFormHeader>
       <div className="select-db">
@@ -142,19 +154,23 @@ const ModalHeader = ({
     </StyledFormHeader>
   );
 
+  const importDbHeader = (
+    <StyledStickyHeader>
+      <StyledFormHeader>
+        <p className="helper-top"> STEP 2 OF 2 </p>
+        <h4>Enter the required {dbModel.name} credentials</h4>
+        <p className="helper-bottom">{fileCheck ? fileList[0].name : ''}</p>
+      </StyledFormHeader>
+    </StyledStickyHeader>
+  );
+
+  if (fileCheck) return importDbHeader;
   if (isLoading) return <></>;
-  if (isEditMode) {
-    return isEditHeader;
-  }
-  if (useSqlAlchemyForm) {
-    return useSqlAlchemyFormHeader;
-  }
-  if (hasConnectedDb && !editNewDb) {
-    return hasConnectedDbHeader;
-  }
-  if (db || editNewDb) {
-    return hasDbHeader;
-  }
+  if (isEditMode) return isEditHeader;
+  if (useSqlAlchemyForm) return useSqlAlchemyFormHeader;
+  if (hasConnectedDb && !editNewDb) return hasConnectedDbHeader;
+  if (db || editNewDb) return hasDbHeader;
+
   return noDbHeader;
 };
 

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

@@ -1028,7 +1028,24 @@ describe('DatabaseModal', () => {
         */
       });
     });
+
+    describe('Import database flow', () => {
+      it('imports a file', () => {
+        const importDbButton = screen.getByTestId('import-database-btn');
+        expect(importDbButton).toBeVisible();
+
+        const testFile = new File([new ArrayBuffer(1)], 'model_export.zip');
+
+        userEvent.click(importDbButton);
+        userEvent.upload(importDbButton, testFile);
+
+        expect(importDbButton.files[0]).toStrictEqual(testFile);
+        expect(importDbButton.files.item(0)).toStrictEqual(testFile);
+        expect(importDbButton.files).toHaveLength(1);
+      });
+    });
   });
+
   describe('DatabaseModal w/ Deeplinking Engine', () => {
     const renderAndWait = async () => {
       const mounted = act(async () => {