fix: database model Collapse state (#34126)

Author: SBIN2010

superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.test.tsx

@@ -191,4 +191,32 @@ describe('ExtraOptions Component', () => {
     fireEvent.change(input, { target: { value: '1000' } });
     expect(onExtraInputChange).toHaveBeenCalled();
   });
+
+  it('renders the collaps tab correctly and resets to default tab after closing', () => {
+    const { rerender } = renderComponent();
+    const sqlLabTab = screen.getByRole('tab', {
+      name: /SQL Lab./i,
+    });
+
+    expect(sqlLabTab).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(sqlLabTab);
+    expect(sqlLabTab).toHaveAttribute('aria-expanded', 'true');
+    const customDb = {
+      ...defaultDb,
+      expose_in_sqllab: false,
+    };
+
+    rerender(
+      <ExtraOptions
+        db={customDb as unknown as DatabaseObject}
+        onInputChange={onInputChange}
+        onTextChange={onTextChange}
+        onEditorChange={onEditorChange}
+        onExtraInputChange={onExtraInputChange}
+        onExtraEditorChange={onExtraEditorChange}
+        extraExtension={undefined}
+      />,
+    );
+    expect(sqlLabTab).toHaveAttribute('aria-expanded', 'false');
+  });
 });

superset-frontend/src/features/databases/DatabaseModal/ExtraOptions.tsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ChangeEvent, EventHandler } from 'react';
+import { ChangeEvent, EventHandler, useState, useEffect } from 'react';
 import cx from 'classnames';
 import {
   t,
@@ -88,12 +88,21 @@ const ExtraOptions = ({
   const isAllowRunAsyncDisabled = isFeatureEnabled(
     FeatureFlag.ForceSqlLabRunAsync,
   );
+  const [activeKey, setActiveKey] = useState<string[] | undefined>();
+
+  useEffect(() => {
+    if (!expandableModalIsOpen && activeKey !== undefined) {
+      setActiveKey(undefined);
+    }
+  }, [expandableModalIsOpen, activeKey]);
 
   return (
     <Collapse
       expandIconPosition="end"
       accordion
       modalMode
+      activeKey={activeKey}
+      onChange={key => setActiveKey(key)}
       items={[
         {
           key: 'sql-lab',