Fix: Close editor and import dialog after successful API Definition i…

[ranuka-laksika]

Fixes https://github.com/wso2/api-manager/issues/4541

Issue URL: https://github.com/wso2/api-manager/issues/4541

Problem

When importing an OpenAPI Definition for an existing API using the "Edit and Import" option in the Publisher Portal, the editor and import dialog remained open even after successfully saving the definition. This forced users to manually close both dialogs, creating a poor user experience.

Solution

Implemented a callback mechanism to properly manage dialog state between parent and child components. After a successful import save:

1. The editor automatically closes
2. The import dialog automatically closes
3. The isImporting state is properly reset

Changes Made

• Modified: portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/ImportDefinition.jsx

  • Added onImportDialogClose prop to receive close callback from parent
  • Imported useEffect hook
  • Added useEffect to expose close dialog function to parent component

• Modified: portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/APIDefinition.jsx

  • Added closeImportDialog state variable to store the close function
  • Added setImportDialogClose method to receive the close function from child component
  • Modified updateSwaggerDefinition method to close editor and import dialog after successful import
  • Updated ImportDefinition component usage to pass onImportDialogClose callback prop

Build Information

• Java 11 (Temurin-Hotspot at /opt/hostedtoolcache/Java_Temurin-Hotspot_jdk/11.0.29-7/x64)
• Maven 3.6.3
• Built component: portals/publisher
• Generated artifact: portals/publisher/target/publisher.war (33 MB)

Artifacts Replaced

• Frontend: Replaced publisher folder in wso2am-4.6.0/repository/deployment/server/webapps/
  1. Removed existing publisher folder
  2. Copied new publisher.war from build output
  3. Extracted to create new publisher folder

Testing

No testing required for frontend changes (as per workflow guidelines).

Modified wso2am Pack Download

The complete modified wso2am-4.6.0 pack is available as a GitHub Actions artifact.

🔗 Download from GitHub Actions

Artifact Details:

• Name: wso2am-4.6.0-issue-52.zip
• Size: 508 MB
• How to Download:
  1. Click the link above
  2. Scroll to "Artifacts" section
  3. Download the zip file
  4. Extract and use directly

Contents: Complete wso2am pack with the updated Publisher portal artifact ready to use.

Summary by CodeRabbit

New Features

• Import dialogs now automatically close after successful API definition import or update operations, streamlining the workflow and eliminating manual dialog dismissal steps for a more seamless user experience.

[coderabbitai[bot]]

Walkthrough

Modified APIDefinition and ImportDefinition components to establish bidirectional communication for managing the import dialog lifecycle. APIDefinition now passes a callback setter to ImportDefinition, which registers a cancel function. Upon successful import/update, the stored callback is invoked to automatically close the import dialog.

Changes

Cohort / File(s)	Summary
Import Dialog Lifecycle Management portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/APIDefinition.jsx	Added state field closeImportDialog to store dialog close callback. Introduced setImportDialogClose method (bound in constructor) to capture the close function from child component. Pass onImportDialogClose={this.setImportDialogClose} prop to ImportDefinition. After successful import/update, invoke stored closeImportDialog callback if available. In update Swagger flow, close editor and trigger import dialog close callback when import is in progress.
Import Dialog Cancellation Hook portals/publisher/src/main/webapp/source/src/app/components/Apis/Details/APIDefinition/ImportDefinition.jsx	Added useEffect to React imports. Added new prop onImportDialogClose to component signature. Introduced useEffect hook to register handleAPIDefinitionImportCancel callback via onImportDialogClose when provided, enabling parent-initiated dialog cancellation.

Sequence Diagram(s)

sequenceDiagram
    participant Parent as APIDefinition
    participant Child as ImportDefinition
    participant User as User

    User->>Parent: Click "Import Definition"
    Parent->>Child: Render with onImportDialogClose callback
    Child->>Child: useEffect: Register cancel function
    Child->>Parent: onImportDialogClose(handleAPIDefinitionImportCancel)
    Parent->>Parent: Store callback in closeImportDialog state
    
    User->>Child: Select "Edit and Import"
    User->>User: Make changes in editor
    User->>Child: Click "Import Content"
    Child->>Parent: Submit definition
    Parent->>Parent: Process import successfully
    Parent->>Parent: Invoke closeImportDialog callback
    Parent->>Child: Trigger handleAPIDefinitionImportCancel
    Child->>Child: Close import dialog
    Parent->>Parent: Close editor

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Straightforward callback registration pattern with minimal logic changes
• Limited scope affecting two tightly-coupled components
• Clear, repetitive pattern of parent-child state synchronization
• Verify useEffect dependency array is correct in ImportDefinition
• Confirm closeImportDialog callback is always safely invoked (null-check present)

Possibly related PRs

• #1219: Both PRs modify the API definition import/update flow in APIDefinition and ImportDefinition components, addressing active import state management and its effects on save/deploy operations and dialog closing behavior.

Suggested reviewers

• lasanthaS
• Krishanx92
• tharikaGitHub
• piyumaldk

Poem

🐰 A dialog that wanders, now finds its way home, When "Edit and Import" completes, no more to roam— Parent calls child with callbacks so neat, Import dialog closes, the user's retreat! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix: closing the editor and import dialog after successful API definition import, which directly addresses the PR's primary objective.
Linked Issues check	✅ Passed	The PR successfully implements both objectives from issue #4541: closing the editor after successful import and automatically closing the import dialog when the editor closes.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the import dialog and editor closure flow; no unrelated modifications were introduced.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud[bot]]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud