npm package: @ingestro/pipelines-react
Description: <!-- markdownlint-disable --> <p align="center">   <a href="https://ingestro.com/" rel="noopener" target="_blank"><img width="150" src="https://s3.eu-central-1.amazonaws.com/general-upload.ingestro.com/ingestro_logo_darkblue.svg" alt="Ingestro logo"></a> 
Latest version: 1.5.1

<!-- markdownlint-disable -->
<p align="center">
  <a href="https://ingestro.com/" rel="noopener" target="_blank"><img width="150" src="https://s3.eu-central-1.amazonaws.com/general-upload.ingestro.com/ingestro_logo_darkblue.svg" alt="Ingestro logo"></a>
</p>
<h1 align="center">@ingestro/pipelines-react</h1>

<div align="center">
Embeddable React Components for Ingestro Data Pipelines

[![API status](https://img.shields.io/uptimerobot/ratio/m792354517-acd98c6100961072cc093759?color=2fa659&label=uptime)](https://status.ingestro.com/)
[![npm latest package](https://img.shields.io/npm/v/@ingestro%2Fpipelines-react?color=5c8ef2&label=npm@latest)](https://badge.fury.io/js/@ingestro%2Fpipelines-react)

A React component library that lets your users embed UI workflows for creating and managing Ingestro Data Pipelines directly into your applications.

</div>

## Table of Contents

- [What is Ingestro Data Pipelines](#what-is-ingestro-data-pipelines)
- [Features & Components](#features--components)
- [Authentication](#authentication)
- [Getting Started](#getting-started)
- [Embeddables Usage](#embeddables-usage)
- [Using the API Directly](#using-the-api-directly)
- [Configuration & Props](#configuration--props-general)
- [Further Resources](#further-resources)

## What is Ingestro Data Pipelines

Ingestro Data Pipelines is a full pipeline product that enables you to build, deploy, monitor and manage automated data ingestion workflows. Key capabilities include:

- Defining **connectors** (inputs/outputs) for various sources/destinations
- Specifying **target data models** (TDMs) to shape output schema
- Building & running **pipelines**, including scheduling, execution history, error tracking
- Embeddable React UI components ("embeddables") so you can embed parts of the workflow in your own app
- A REST API for full programmatic control

## Features & Components

Here are the main components/ embeddables available in this package. Use them to provide UI workflows for your users inside your application. For full docs, see the [Embeddables Guide](https://docs.ingestro.com/dp/embeddables/).

| Embeddable               | Purpose                                                       |
| ------------------------ | ------------------------------------------------------------- |
| `CreatePipeline`         | UI to create a new pipeline workflow within your app          |
| `PipelineDetails`        | View / edit a specific pipeline                               |
| `PipelineList`           | Show a list of all pipelines                                  |
| `ExecutionDetails`       | View, inspect and optionally rerun a particular execution run |
| `ExecutionList`          | List of executions for one pipeline                           |
| `CreateConnector`        | UI to add a new connector (input/output) for your pipelines   |
| `ConnectorDetails`       | Inspect/ modify a connector                                   |
| `ConnectorList`          | List available connectors                                     |
| `CreateTargetDataModel`  | UI to create a target data model (TDM)                        |
| `TargetDataModelDetails` | View or edit one TDM                                          |
| `TargetDataModelList`    | Listing of TDMs                                               |

## Authentication

To use the embeddables or call the API directly, you’ll need an **access token**. The flow is:

1. Get your **license key** (from dashboard.ingestro.com)
2. You authenticate using the license key + an identifier (either a user email or a sub-organization identifier). ([Authentication API guide](https://docs.ingestro.com/dp/authentication-api/))
3. You receive an `access_token` which you include in subsequent requests

**Example: Get an access token**

```bash
curl -X POST "https://api-gateway.ingestro.com/dp/api/v1/access/token"
  -H "Accept: application/json"
  -H "Content-Type: application/json"
  -d '{
    "license_key": "YOUR_LICENSE_KEY",
    "auth": {
      "identifier": "user@example.com",  # or sub-org identifier
      "type": "USER"                     # or "SUB_ORG"
    }
  }'
```

Response:

```json
{
  "access_token": "YOUR_ACCESS_TOKEN"
}
```

## Getting Started

Install the package:

```bash
npm install @ingestro/pipelines-react
# or
yarn add @ingestro/pipelines-react
```

Include required CSS:

```jsx
import '@ingestro/pipelines-react/index.css';
```

## Embeddables Usage

Here’s how to embed a component in your React app. All embeddables accept props such as `accessToken`, `settings`, and callbacks (e.g. `onClose`, `onCreate`, etc.). Always consult the specific guide for the embeddable you're using in the [Embeddables docs](https://docs.ingestro.com/dp/embeddables/).

**Example for `CreatePipeline`:**

```jsx
import React, { useEffect, useState } from 'react';
import { CreatePipeline } from '@ingestro/pipelines-react';
import '@ingestro/pipelines-react/index.css';

function MyCreatePipelineWidget({ licenseKey, userEmail }) {
  const [accessToken, setAccessToken] = useState(null);

  useEffect(() => {
    async function fetchToken() {
      const resp = await fetch('<https://api-gateway.ingestro.com/dp/api/v1/access/token>', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          license_key: licenseKey,
          auth: { identifier: userEmail, type: 'USER' },
        }),
      });
      const data = await resp.json();
      setAccessToken(data.access_token);
    }

    fetchToken();
  }, [licenseKey, userEmail]);

  if (!accessToken) return <div>Loading...</div>;

  return (
    <CreatePipeline
      accessToken={accessToken}
      settings={{
        language: 'en',
        modal: false,
      }}
      onClose={() => console.log('Closed CreatePipeline')}
      onPipelineCreate={({ pipeline }) => {
        console.log('Pipeline created:', pipeline);
      }}
    />
  );
}

export default MyCreatePipelineWidget;
```

## Using the API Directly

If you want full control (e.g. automated processes, server-side integrations, or custom UI), you can use the REST API. See the [REST API guide](https://docs.ingestro.com/dp/guide-api/) and relevant sub-APIs.

**Example: Get all pipelines**

```bash
curl -X GET "https://api-gateway.ingestro.com/dp/api/v1/pipeline/"
  -H "Accept: application/json"
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"

```

**Example: Update a pipeline**

```bash
curl -X PUT "<https://api-gateway.ingestro.com/dp/api/v1/pipeline/{pipelineId}>"
  -H "Accept: application/json"
  -H "Authorization: Bearer YOUR_ACCESS_TOKEN"
  -H "Content-Type: application/json"
  -d '{
    "name": "New pipeline name",
    "configuration": {},
    "input_connectors": [],
    "output_connectors": [],
    "mapping_config": {}
  }'

```

## Configuration & Props (General)

Some common props/settings across embeddables:

| Prop / Setting  | Description                                                               |
| --------------- | ------------------------------------------------------------------------- |
| `accessToken`   | Token obtained via authentication API (must be passed to all embeddables) |
| `settings`      | UI settings like language, modal behavior, translations etc.              |
| `configuration` | Embeddable-specific configuration options (defaults, initial values)      |
| Callbacks       | Events such as `onClose`, `onCreate`, `onUpdate`, `onError` etc.          |

## Further Resources

- [Authentication API guide](https://docs.ingestro.com/dp/authentication-api/)
- [Embeddables documentation](https://docs.ingestro.com/dp/embeddables/)
- [REST API guide](https://docs.ingestro.com/dp/guide-api/)
- [Connector API docs](https://docs.ingestro.com/dp/connector-api/)
- [Target Data Model API docs](https://docs.ingestro.com/dp/tdm-api/)