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={[