index.tsx

Overview

This file defines React components and hooks to display and interact with historical versions of a workflow or flow design in a modal dialog. It enables users to view a list of saved versions, select a version to inspect its details, visualize the flow graphically, and download the flow definition as a JSON file.

Key functionalities include:

Managing the visibility state of the history version modal.
Fetching and displaying a paginated list of flow versions.
Showing detailed information about the selected version.
Rendering the flow's graph structure using ReactFlow.
Allowing the user to download the selected version's flow data as a JSON file.

This component is typically used as part of a larger application that manages flows or workflows and their version histories.

Detailed Explanation

`useHistoryVersionModal`

function useHistoryVersionModal(): {
  visibleHistoryVersionModal: boolean;
  setVisibleHistoryVersionModal: React.Dispatch<React.SetStateAction<boolean>>;
}

Purpose: A custom React hook to manage the visibility state of the history version modal.
Returns: An object containing:
- visibleHistoryVersionModal: Boolean state indicating if the modal is visible.
- setVisibleHistoryVersionModal: Setter function to update the visibility.
Usage example:

const { visibleHistoryVersionModal, setVisibleHistoryVersionModal } = useHistoryVersionModal();

return (
  <>
    <button onClick={() => setVisibleHistoryVersionModal(true)}>Show Versions</button>
    <HistoryVersionModal
      visible={visibleHistoryVersionModal}
      hideModal={() => setVisibleHistoryVersionModal(false)}
      id="flowId123"
    />
  </>
);

`HistoryVersionModal`

type HistoryVersionModalProps = {
  visible: boolean;
  hideModal: () => void;
  id: string;
};

function HistoryVersionModal({
  visible,
  hideModal,
  id,
}: HistoryVersionModalProps): JSX.Element

Purpose: React component rendering a modal dialog that shows a list of historical flow versions and details of the selected version.
Props:
- visible: Controls the visibility of the modal.
- hideModal: Callback function to close/hide the modal.
- id: The identifier of the flow whose versions are being fetched.
Returns: JSX element representing the modal UI.

Internal Logic and Behavior

Uses useFetchListVersion(id) hook to fetch the list of versions for the given flow ID.
Maintains a local state selectedVersion to track which version is currently selected.
Uses useFetchVersion(selectedVersion?.id) to fetch detailed data for the selected version.
Automatically selects the first version when the data loads and no version is selected.
Provides a download feature (downloadfile callback) to export the selected version's flow graph as a formatted JSON file.
Displays:
- Left panel: List of versions with pagination.
- Right panel: Details about the selected version including a graphical flow visualization and metadata.
The flow graph is rendered using ReactFlow inside a ReactFlowProvider.
Supports loading states with Ant Design's Spin component.
Shows empty states with Empty component from Ant Design when no data is available.

Parameters Description

Parameter	Type	Description
visible	boolean	Indicates whether the modal is open or closed.
hideModal	function	Function to close the modal.
id	string	The unique identifier of the flow to fetch versions for.

Return Value

JSX for rendering the modal interface and contents.

Usage Example

<HistoryVersionModal
  visible={true}
  hideModal={() => console.log('Modal closed')}
  id="flow-123"
/>

Important Implementation Details

Flow Version Fetching: The component depends on two custom hooks:
- useFetchListVersion(id) to fetch an array of version metadata.
- useFetchVersion(versionId) to fetch the detailed flow data for a selected version.
Version Selection: Automatically selects the first version once the list is loaded.
Download Functionality: Serializes the flow graph to JSON and triggers a client-side download with a filename composed of the version's filename and ID.
Flow Visualization:
- Uses ReactFlow from @xyflow/react to render nodes and edges.
- ConnectionMode.Loose allows flexible connections.
- Zoom and pan interactions are enabled except zoom on double-click.
- Custom nodeTypes imported from '../canvas' define node renderers.
UI Layout: Uses Ant Design's grid system (Row and Col) to split the modal into two panels (versions list and details panel).
Localization: Uses a translation hook useTranslate('flow') for text labels, supporting internationalization.
Performance: The flow graph is wrapped in a ReactFlowProvider with a dynamic key to reset the state when the selected version changes.

Interaction with Other Parts of the System

Hooks:
- useFetchListVersion and useFetchVersion are custom hooks likely interacting with an API or data store to retrieve version data.
Flow Graph Rendering:
- Imports nodeTypes from a sibling module (../canvas) which defines how nodes appear in the flow.
UI Components:
- Relies on Ant Design (antd) for modal, list, cards, loading spinners, typography, and layout.
Localization:
- Uses a translation hook (useTranslate) for retrieving localized strings.
ReactFlow Library:
- Uses a fork or variant of ReactFlow (@xyflow/react) for graph visualization.

Visual Diagram

The following Mermaid component diagram illustrates the main components and hooks defined in this file and their interactions:

componentDiagram
    component useHistoryVersionModal {
        +visibleHistoryVersionModal: boolean
        +setVisibleHistoryVersionModal(boolean): void
    }
    component HistoryVersionModal {
        +props.visible: boolean
        +props.hideModal: function
        +props.id: string
        +Renders Modal with:
          - VersionListPanel
          - VersionDetailsPanel
        +Uses useFetchListVersion(id)
        +Uses useFetchVersion(versionId)
        +Uses ReactFlow for flow visualization
        +Provides downloadfile()
    }
    component ReactFlowProvider
    component ReactFlow
    component nodeTypes

    useHistoryVersionModal <|.. HistoryVersionModal : "Visibility state"
    HistoryVersionModal --> useFetchListVersion : "Fetch version list"
    HistoryVersionModal --> useFetchVersion : "Fetch version details"
    HistoryVersionModal --> ReactFlowProvider : "Wrap flow graph"
    ReactFlowProvider --> ReactFlow : "Render nodes & edges"
    ReactFlow --> nodeTypes : "Custom node renderers"

Summary

This file provides a modal UI to explore historical versions of a flow, visualize selected versions graphically, and download the flow definitions. It leverages React hooks for state and data fetching, ReactFlow for graph rendering, and Ant Design components for polished UI/UX. It plays a critical role in version management and visualization within a flow-based application.

If you require documentation on the related hooks (useFetchListVersion, useFetchVersion) or nodeTypes definitions, please request those files specifically.