diff --git a/superset-frontend/src/features/databases/UploadDataModel/UploadDataModal.test.tsx b/superset-frontend/src/features/databases/UploadDataModel/UploadDataModal.test.tsx
index 37f1ff0b1e9..9e29c1f84ad 100644
--- a/superset-frontend/src/features/databases/UploadDataModel/UploadDataModal.test.tsx
+++ b/superset-frontend/src/features/databases/UploadDataModel/UploadDataModal.test.tsx
@@ -601,3 +601,59 @@ describe('File Extension Validation', () => {
});
});
});
+
+describe('UploadDataModal Collapse Tabs', () => {
+ it('renders the collaps tab CSV correctly and resets to default tab after closing', () => {
+ const { rerender } = render(, {
+ useRedux: true,
+ });
+ const generalInfoTab = screen.getByRole('tab', {
+ name: /expanded General information Upload a file to a database./i,
+ });
+ expect(generalInfoTab).toHaveAttribute('aria-expanded', 'true');
+ const fileSettingsTab = screen.getByRole('tab', {
+ name: /collapsed File settings Adjust how spaces, blank lines, null values are handled and other file wide settings./i,
+ });
+ userEvent.click(fileSettingsTab);
+ expect(fileSettingsTab).toHaveAttribute('aria-expanded', 'true');
+ rerender();
+ rerender();
+ expect(generalInfoTab).toHaveAttribute('aria-expanded', 'true');
+ });
+
+ it('renders the collaps tab Excel correctly and resets to default tab after closing', () => {
+ const { rerender } = render(, {
+ useRedux: true,
+ });
+ const generalInfoTab = screen.getByRole('tab', {
+ name: /expanded General information Upload a file to a database./i,
+ });
+ expect(generalInfoTab).toHaveAttribute('aria-expanded', 'true');
+ const fileSettingsTab = screen.getByRole('tab', {
+ name: /collapsed File settings Adjust how spaces, blank lines, null values are handled and other file wide settings./i,
+ });
+ userEvent.click(fileSettingsTab);
+ expect(fileSettingsTab).toHaveAttribute('aria-expanded', 'true');
+ rerender();
+ rerender();
+ expect(generalInfoTab).toHaveAttribute('aria-expanded', 'true');
+ });
+
+ it('renders the collaps tab Columnar correctly and resets to default tab after closing', () => {
+ const { rerender } = render(, {
+ useRedux: true,
+ });
+ const generalInfoTab = screen.getByRole('tab', {
+ name: /expanded General information Upload a file to a database./i,
+ });
+ expect(generalInfoTab).toHaveAttribute('aria-expanded', 'true');
+ const fileSettingsTab = screen.getByRole('tab', {
+ name: /collapsed File settings Adjust how spaces, blank lines, null values are handled and other file wide settings./i,
+ });
+ userEvent.click(fileSettingsTab);
+ expect(fileSettingsTab).toHaveAttribute('aria-expanded', 'true');
+ rerender();
+ rerender();
+ expect(generalInfoTab).toHaveAttribute('aria-expanded', 'true');
+ });
+});
diff --git a/superset-frontend/src/features/databases/UploadDataModel/index.tsx b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
index de15ffa10e4..284d837dc76 100644
--- a/superset-frontend/src/features/databases/UploadDataModel/index.tsx
+++ b/superset-frontend/src/features/databases/UploadDataModel/index.tsx
@@ -233,6 +233,7 @@ const UploadDataModal: FunctionComponent = ({
useState(false);
const [previewUploadedFile, setPreviewUploadedFile] = useState(true);
const [fileLoading, setFileLoading] = useState(false);
+ const [activeKey, setActiveKey] = useState('general');
const createTypeToEndpointMap = (databaseId: number) =>
`/api/v1/database/${databaseId}/upload/`;
@@ -538,6 +539,13 @@ const UploadDataModal: FunctionComponent = ({
}
}, [delimiter]);
+ // Reset active panel to 'general' when modal is shown
+ useEffect(() => {
+ if (show) {
+ setActiveKey('general');
+ }
+ }, [show]);
+
const validateUpload = (_: any, value: string) => {
if (fileList.length === 0) {
return Promise.reject(t('Uploading a file is required'));
@@ -599,6 +607,8 @@ const UploadDataModal: FunctionComponent = ({
setActiveKey(key)}
defaultActiveKey="general"
modalMode
items={[