index.tsx

Overview

index.tsx defines a React functional component named SingleDebugDrawer. This component provides a full-screen bottom drawer UI to facilitate debugging of a single component within a flow or application. It allows users to:

• Fetch and display input parameters for the component to be debugged.

• Trigger a debug run with specified input parameters.

• View the resulting debug output in a formatted JSON viewer.

• Copy the debug output JSON to clipboard.

The drawer leverages hooks to fetch input elements and perform debugging, and uses a combination of Ant Design UI components and custom components to render the interface.

Component: SingleDebugDrawer

Description

SingleDebugDrawer is a modal drawer designed to debug a single component instance identified by the componentId. It fetches input elements, allows the user to run a debug process with those inputs, and displays the debug output in a user-friendly JSON format.

The drawer is intended to be shown or hidden based on the visible prop and can be dismissed via the hideModal callback.

Props

interface IProps {
  componentId?: string;            // Optional ID of the component to debug
}

interface IModalProps<T> {
  visible: boolean;                // Controls drawer visibility
  hideModal: () => void;           // Callback to hide the drawer
}

SingleDebugDrawer accepts props that combine IModalProps<any> and IProps:

Internal Hooks and Data

• useTranslation (from react-i18next): Provides localization for UI strings.

• useFetchInputElements(componentId): Custom hook that fetches the input parameters (list) needed for debugging the component.

• useDebugSingle(): Custom hook that provides:

  • debugSingle: function to trigger debugging with given parameters.

  • data: debug output data returned from backend.

  • loading: boolean indicating debug request in progress.

Functions / Methods

onOk

const onOk = useCallback(
  (nextValues: any[]) => {
    if (componentId) {
      debugSingle({ component_id: componentId, params: nextValues });
    }
  },
  [componentId, debugSingle],
);

• Purpose: Callback to trigger the debug process with new input parameter values.

• Parameters:

  • nextValues - an array of input parameters to pass to the debug function.

• Returns: void

• Usage: Passed down to DebugContent component as the submit handler.

Rendered UI and Components

• Drawer (Ant Design): The main container, styled to appear from the bottom of the screen, occupying 95% height and full width.

  • Title bar with localized "test run" label and a close icon (CloseOutlined) that triggers hideModal.

• DebugContent: A child component that receives input parameters (list), submit handler (onOk), loading status, and controls the submission button's disabled state.

• JSON Display Section (conditional):

  • Displayed only if data is not empty.

  • Contains a header with label "JSON" and a CopyToClipboard button to copy the JSON stringified debug output.

  • Uses JsonView component to render the debug output in a collapsible, syntax-highlighted JSON format.

Usage Example

import SingleDebugDrawer from './index';

function ParentComponent() {
  const [visible, setVisible] = React.useState(false);
  const componentId = 'component-123';

  return (
    <>
      <button onClick={() => setVisible(true)}>Open Debug Drawer</button>
      <SingleDebugDrawer
        visible={visible}
        hideModal={() => setVisible(false)}
        componentId={componentId}
      />
    </>
  );
}

Important Implementation Details

• The drawer uses getContainer={false} and mask={false} to render inline without portal, likely to integrate smoothly within complex layouts.

• The drawer is positioned at the bottom (placement="bottom"), with a height of 95% of the viewport, providing a nearly full-screen debugging experience.

• The JSON viewer (JsonView) is configured to avoid collapsing strings by setting an extremely high collapseStringsAfterLength value.

• The submitButtonDisabled condition prevents debug execution if the input parameter list is empty.

• The CopyToClipboard component allows easy copying of debug results, enhancing user convenience.

• Uses React hooks with memoization (useCallback) to prevent unnecessary re-renders.

Interaction with Other Parts of the Application

• Hooks:

  • useFetchInputElements retrieves input parameter definitions for the component being debugged.

  • useDebugSingle handles the debug API call and returns results.

• Components:

  • DebugContent renders input forms and submit controls for debugging.

  • CopyToClipboard enables copying debug results.

  • JsonView visualizes JSON debug output.

• UI Framework:

  • Ant Design's Drawer and icon components (CloseOutlined) are used for UI structure and interactions.

• i18n:

  • Text strings are localized using react-i18next.

• Utility:

  • lodash's isEmpty utility is used to conditionally render debug output.

Together, these integrations position SingleDebugDrawer as a specialized debugging tool embedded in a larger flow or UI system for testing component behavior interactively.

Mermaid Component Diagram

componentDiagram
    component SingleDebugDrawer {
      +componentId?: string
      +visible: boolean
      +hideModal(): void
    }
    component DebugContent {
      +parameters: any[]
      +ok(nextValues: any[]): void
      +isNext: boolean
      +loading: boolean
      +submitButtonDisabled: boolean
    }
    component Drawer
    component CopyToClipboard {
      +text: string
    }
    component JsonView {
      +src: object
      +displaySize: boolean
      +collapseStringsAfterLength: number
    }
    component useFetchInputElements
    component useDebugSingle
    component useTranslation

    SingleDebugDrawer --> Drawer : renders
    SingleDebugDrawer --> useFetchInputElements : fetches input list
    SingleDebugDrawer --> useDebugSingle : triggers debug & gets data
    SingleDebugDrawer --> useTranslation : localization
    Drawer --> DebugContent : renders input form
    Drawer --> CopyToClipboard : copies JSON output
    Drawer --> JsonView : shows JSON output

Summary

The index.tsx file exports a React component SingleDebugDrawer which provides a bottom drawer UI for debugging a single component instance by fetching input parameters, running debug executions, and displaying formatted JSON output interactively. It integrates with custom hooks, UI components, and internationalization utilities to offer a streamlined debugging experience within the application.

This component is designed to be embedded into a larger flow or UI system and facilitates quick testing and inspection of component behavior.