feat: support for import/export masked_encrypted_extra (frontend)

[Vitor-Avila]

SUMMARY

This PR adds support for exporting/importing masked_encrypted_extra info from DB connections. This is useful for:

• BQ connections
• GSheets connection
• OAuth connections
• Any DB connection that includes sensitive info in secure_extra

Stacked diffs implementation

The feature was split into 3 PRs:

• feat: Labels for encrypted fields #38075: Labels for encrypted fields.
• feat: support for import/export masked_encrypted_extra (backend) #38077: Backend implementation.
• feat: support for import/export masked_encrypted_extra (frontend) #38078 (this one): Frontend implementation.

#38075 can be merged now. Once it gets merged, #38077 can get merged as well (shouldn't impact the frontend) and this one can be merged last. As they get merged I'll update the PRs to point to master.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Export demo
During the export, Superset checks if there's any diff between encrypted_extra and masked_encrypted_extra:

• In case there is, it exports masked_encrypted_extra with fields properly masked.
• If not, it exports encrypted_extra directly. Note that the import already supports encrypted_extra (not part of this PR).

Export.Flow.mov

Import demo
During the import, the modal prompts users to provide masked fields:

Import.Flow.mov

I also forced a test connection to prompt both for password and secure extra info:

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Bito Automatic Review Skipped - Branch Excluded

Bito didn't auto-review because the source or target branch is excluded from automatic reviews.
No action is needed if you didn't intend for the agent to review it. Otherwise, to manually trigger a review, type /review in a comment and save.
You can change the branch exclusion settings here, or contact your Bito workspace admin at evan@preset.io.

[codeant-ai-for-open-source]

Sequence Diagram

Shows how the frontend collects masked_encrypted_extra secrets during import and sends them to the import API, and the alternate path where the API requests missing encrypted fields which the frontend then renders for the user to fill.

sequenceDiagram
    participant User
    participant Frontend as "Import / Database Modal"
    participant Hook as "useImportResource"
    participant API as "Superset Import API"

    User->>Frontend: Select import bundle + enter encrypted_extra secrets
    Frontend->>Hook: onUpload/onDbImport(bundle, ..., encryptedExtraSecrets)
    Hook->>API: POST /api/v1/<resource>/import/ (formData includes encrypted_extra_secrets)
    alt API accepts secrets (success)
        API-->>Hook: 200 OK (import succeeded)
        Hook-->>Frontend: update state (clear needs), return success
        Frontend-->>User: show success (toast / close modal)
    else API needs encrypted fields (missing/secrets masked)
        API-->>Hook: 400 validation error (masked_encrypted_extra messages)
        Hook-->>Frontend: set encryptedExtraFieldsNeeded (file+paths+labels)
        Frontend-->>User: render encrypted extra input fields for those files
    end

Loading

---

Generated by CodeAnt AI

[netlify]

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	cd779ef
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/69961daf7b02ec00084d5ff6
😎 Deploy Preview	https://deploy-preview-38078--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[kgabryje]

It looks like this type is repeated in a few places, can we extract it to some shared interface?

[bito-code-review]

Yes, extracting this type to a shared interface would be a good idea for maintainability. The type { fileName: string; fields: { path: string; label: string }[] }[] appears in DatabaseModal, ImportModal types, and hooks. You could define it as EncryptedExtraFields[] in a shared types file, leveraging the existing EncryptedExtraField interface from utils.tsx.

superset-frontend/src/views/CRUD/types.ts

import { EncryptedExtraField } from './utils';

export type EncryptedExtraFields = {
  fileName: string;
  fields: EncryptedExtraField[];
}[];

[kgabryje]

Do we want to repeat that alert multiple times for each encryptedExtraField? Perhaps we should just display it once at the top?