Skip to content
IONFLOW Docs

Feature Components

Feature Components

Section titled “Feature Components”

1. Introduction

Section titled “1. Introduction”

1.1 Purpose

Section titled “1.1 Purpose”

This document provides a comprehensive reference for the feature-specific components within the IONFLOW frontend, detailing their usage, location, and purpose.

1.2 Scope

Section titled “1.2 Scope”

The scope includes components related to Workflows, Connections, Executions, Webhooks, and Editors. It serves as a guide for developers implementing or maintaining these features.

2. General Description

Section titled “2. General Description”

Feature-specific components are organized by domain and handle complex business logic.

Feature Directories

Section titled “Feature Directories”
DirectoryDescription
workflow/Workflow builder and flow components
connections/Connection management
execution/Execution monitoring and display
webhook/Webhook configuration
Editor/Monaco JSON editor

Workflow Components

Section titled “Workflow Components”

Location: src/components/workflow/

Components for the visual workflow builder:

ComponentDescription
FlowBuilderMain workflow canvas
FlowNodeIndividual flow node
FlowConnectorNode connection lines
FlowToolbarBuilder toolbar
FlowSidebarNode palette

Usage

Section titled “Usage”
<template>
  <FlowBuilder
    :flow="flowData"
    @save="handleSave"
    @node-select="handleNodeSelect"
  />
</template>

Connection Components

Section titled “Connection Components”

Location: src/components/connections/

Components for managing external connections:

ComponentDescription
ConnectionListList of connections
ConnectionCardConnection display card
ConnectionFormConnection configuration

Usage

Section titled “Usage”
<template>
  <ConnectionList
    :connections="connections"
    @select="handleSelect"
    @delete="handleDelete"
  />
</template>

Execution Components

Section titled “Execution Components”

Location: src/components/execution/

Components for execution monitoring:

ComponentDescription
ExecutionListList of executions
ExecutionDetailExecution details view
ExecutionLogsExecution log viewer

Usage

Section titled “Usage”
<template>
  <ExecutionDetail
    :execution="execution"
    @retry="handleRetry"
  />
</template>

Webhook Components

Section titled “Webhook Components”

Location: src/components/webhook/

Components for webhook configuration:

ComponentDescription
WebhookFormWebhook setup form
WebhookListWebhook list

Editor Components

Section titled “Editor Components”

Location: src/components/Editor/

Monaco-based JSON editor:

JsonEditor

Section titled “JsonEditor”
<template>
  <JsonEditor
    v-model="jsonData"
    :readonly="false"
    :height="400"
  />
</template>

Web Components (Custom Elements)

Section titled “Web Components (Custom Elements)”

Some components are exported as Web Components for use in external applications:

Flow Components

Section titled “Flow Components”
'form-component'
'flow-component'
'mapper-component'
'structure-component'
'flow-raw-component'

Gateway Components

Section titled “Gateway Components”
'gt-app'
'gt-channel-list'
'gt-integration-settings'
'gt-service-list'
'gt-flow-list'
'gt-flow-workspace'
'snippet-component'
'snippet-settings-component'
'app-auth-component'
'connection-component'

Creating Feature Components

Section titled “Creating Feature Components”

When creating new feature components:

  1. Create directory in src/components/[feature]/
  2. Add index.ts for exports
  3. Add types.ts for local types
  4. Add unit tests

Directory Structure

Section titled “Directory Structure”
src/components/[feature]/
├── components/           # Sub-components
│   ├── FeatureItem.vue
│   └── FeatureList.vue
├── services/             # Feature-specific services (if needed)
├── types/                # Feature-specific types
│   └── index.ts
├── index.ts              # Exports
└── FeatureMain.vue       # Main component
Section titled “Related”