From b0c2cdd5dd4654367957fdd4d20d15b9e295e7cc Mon Sep 17 00:00:00 2001
From: ranuka-laksika <ranukalaksika@gmail.com>
Date: Mon, 10 Nov 2025 03:39:18 +0000
Subject: [PATCH] Fix: Close editor and import dialog after successful API
 Definition import

- Added mechanism to close ImportDefinition dialog from parent component
- Modified ImportDefinition.jsx to expose close function via onImportDialogClose prop
- Updated APIDefinition.jsx to store and call the close dialog function
- After successful import save, both editor and import dialog now close automatically
- Reset isImporting state to prevent subsequent issues

Fixes #52
---
 .../Details/APIDefinition/APIDefinition.jsx   | 23 +++++++++++++++++--
 .../APIDefinition/ImportDefinition.jsx        | 13 +++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/APIDefinition.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/APIDefinition.jsx
index 8904568d95d..0ffdd462afe 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/APIDefinition.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/APIDefinition.jsx
@@ -171,6 +171,7 @@ class APIDefinition extends React.Component {
             linterSelectedSeverity: null,
             linterSelectedLine: null,
             isImporting: false,
+            closeImportDialog: null,
         };
         this.handleNo = this.handleNo.bind(this);
         this.handleSave = this.handleSave.bind(this);
@@ -187,6 +188,7 @@ class APIDefinition extends React.Component {
         this.updateSwaggerDefinition = this.updateSwaggerDefinition.bind(this);
         this.updateAsyncAPIDefinitionAndDeploy = this.updateAsyncAPIDefinitionAndDeploy.bind(this);
         this.onChangeSwaggerContent = this.onChangeSwaggerContent.bind(this);
+        this.setImportDialogClose = this.setImportDialogClose.bind(this);
         this.updateAsyncAPIDefinition = this.updateAsyncAPIDefinition.bind(this);
         this.onChangeAsyncAPIContent = this.onChangeAsyncAPIContent.bind(this);
         this.setErrors = this.setErrors.bind(this);
@@ -521,6 +523,14 @@ class APIDefinition extends React.Component {
         }
     }
 
+    /**
+     * Stores the function to close the import dialog from child component.
+     * @param {function} closeFn Function to close the import dialog
+     * */
+    setImportDialogClose(closeFn) {
+        this.setState({ closeImportDialog: closeFn });
+    }
+
     /**
      * Handles the transition of the drawer.
      * @param {object} props list of props
@@ -597,6 +607,14 @@ class APIDefinition extends React.Component {
                              */
                             updateAPI();
                             this.setState({ isUpdating: false });
+
+                            // Close editor and import dialog after successful import
+                            if (this.state.isImporting) {
+                                this.setState({ openEditor: false, isImporting: false });
+                                if (this.state.closeImportDialog) {
+                                    this.state.closeImportDialog();
+                                }
+                            }
                         })
                         .catch((err) => {
                             console.log(err);
@@ -850,8 +868,9 @@ class APIDefinition extends React.Component {
                         )
                     )}
                     {(!api.initiatedFromGateway && !isApiProduct) && (
-                        <ImportDefinition setSchemaDefinition={this.setSchemaDefinition} 
-                            editAndImport={this.openEditorToImport}/>
+                        <ImportDefinition setSchemaDefinition={this.setSchemaDefinition}
+                            editAndImport={this.openEditorToImport}
+                            onImportDialogClose={this.setImportDialogClose}/>
                     )}
                     {(api.serviceInfo && api.serviceInfo.outdated && api.type !== 'SOAP') && (
                         <DefinitionOutdated
diff --git a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/ImportDefinition.jsx b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/ImportDefinition.jsx
index 3bb0faac0a4..9c162759ff4 100644
--- a/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/ImportDefinition.jsx
+++ b/portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/ImportDefinition.jsx
@@ -15,7 +15,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useReducer, useState } from 'react';
+import React, { useReducer, useState, useEffect } from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
@@ -63,7 +63,7 @@ const Root = styled('div')(() => ({
  * @returns
  */
 export default function ImportDefinition(props) {
-    const { setSchemaDefinition, editAndImport } = props;
+    const { setSchemaDefinition, editAndImport, onImportDialogClose } = props;
     const { settings } = useAppContext();
     const [openAPIDefinitionImport, setOpenAPIDefinitionImport] = useState(false);
     const [isImporting, setIsImporting] = useState(false);
@@ -117,6 +117,15 @@ export default function ImportDefinition(props) {
         // isWebSocket || isWebSub ? setAsyncAPIDefinitionImport(false) : setOpenAPIDefinitionImport(false);
     };
 
+    // Expose close dialog function to parent component
+    useEffect(() => {
+        if (onImportDialogClose) {
+            onImportDialogClose(() => {
+                handleAPIDefinitionImportCancel();
+            });
+        }
+    }, [onImportDialogClose]);
+
     const handleAPIDefinitionEditAndImport = () => {
         const {
             importingContent,