ImportOneModal

A modal that lets users select a .json file, previews the parsed content using JsonViewer, and posts it to a configured API endpoint when confirmed. Only plain JSON objects (not arrays) are accepted. The floating action button is enabled only when a valid JSON object has been loaded.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | isOpen | boolean | Yes | — | Controls whether the modal is visible. | | onClose | () => void | Yes | — | Called when the modal closes. | | title | string | Yes | — | Title displayed in the modal header. | | apiBaseUrl | string | Yes | — | Base URL for the HTTP client used to POST the JSON. | | importPath | string | Yes | — | API path to POST the imported JSON object to. | | subtitle | string | No | — | Subtitle displayed in the modal header. | | useAuthToken | boolean | No | true | When true, uses the authenticated HTTP client. | | backdropStyle | React.CSSProperties | No | — | Inline styles for the modal backdrop. | | windowStyle | React.CSSProperties | No | — | Inline styles merged into the modal window. | | closeButtonStyle | React.CSSProperties | No | — | Styles for the close button. | | closeIcon | string | No | — | Icon name for the close button. | | closeIconPaths | any[] | No | — | Custom icon paths for the close button. | | closeIconSize | number | No | — | Icon size for the close button. | | zIndex | number | No | 99999 | CSS z-index of the modal overlay. | | id | string | No | — | HTML id for the modal element. | | fullScreen | boolean | No | true | When true, the modal occupies the full viewport. |

Usage

Basic

import React from 'react';
import ImportOneModal from '@/components/modals/ImportOneModal';

export default function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Import Configuration</button>
      <ImportOneModal
        isOpen={open}
        onClose={() => setOpen(false)}
        title="Import Configuration"
        subtitle="Select a .json file to import"
        apiBaseUrl="https://api.example.com"
        importPath="/v1/configurations/import"
        useAuthToken
      />
    </>
  );
}