# Setting Up an AWS Redshift to GCS Migration - Widget

## Setting Up Flows for the Widget

Each of these flows corresponds to an action button or event from your Redshift widget. You can define steps inside the flow that should be triggered when the respective action occurs.

### Activation Flow

This flow will be triggered by the activation button in your widget for Redshift. You can return a success message from flow components or add any additional steps in this flow that you want to be triggered when your connector is activated.

**Steps:**

* In this case, we simply return a static success message like:\
  `"Activation successful for {{input.source}}"`

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2Fe3HrbnM820KQYQsJlSbU%2Fimage.png?alt=media&#x26;token=e1744919-e352-4fec-bb35-f2742bb162da" alt=""><figcaption></figcaption></figure>

### Deactivation Flow

This flow handles deactivation logic, such as deleting registered webhooks.

**Steps:**

* **Initialize Flow Variables:**

The deactivation flow begins with initializing the variables `webhookIds` and `tenantId`. The `webhookIds` have a value of `{{input.source}}`, while `tenantId` is obtained from the request headers as `headers['x-fastn-space-tenantid']`.

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FtigEV7dypzG99hzosgiy%2Fimage.png?alt=media&#x26;token=74c74d86-eba2-4b5a-bb28-88f4007e6f4a" alt=""><figcaption></figcaption></figure>

2. **Loop over Webhook IDs:**

* Use a Loop step to iterate over `webhookIds`

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FllWVVpjYG65jWGGgtbl3%2Fimage.png?alt=media&#x26;token=ef6a9156-6972-487e-8699-ca2def699b98" alt=""><figcaption></figcaption></figure>

* Inside the loop, add a `Delete Webhook` step

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FLtnOWkPOJ9GNzvdUD1oM%2Fimage.png?alt=media&#x26;token=5357eade-e9ed-4162-ad98-91bd5ea7c87e" alt=""><figcaption></figcaption></figure>

3. **Return Success Message:**

* After loop, return a success message like:\
  `"Deactivation completed for {{tenantId}}"`

### Configuration Flow

This flow is used to prepopulate options for user configuration in the widget, such as choosing files and sync frequency.

**Steps:**

* **Map Data:**

  * Maps values for:

  `tables`: List of available tables from Redshift storage

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FTMJ0EQoGWbISTm4c0UYb%2Fimage.png?alt=media&#x26;token=c8b47422-dd80-48c7-bb79-e1a26e176670" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
In the **mapping step**, users can click the three dots next to fields like **Tables** and **Sync Frequency** to access **Configuration Field Options**.
{% endhint %}

For both **Tables** and **Sync Frequency**, users can configure settings like setting a label, hiding the field in the config pop-up or based on the config Field.

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FSeN6liO0oupOexfQYpCn%2Fimage.png?alt=media&#x26;token=21d99ed3-6307-4849-953b-805253f04320" alt=""><figcaption></figcaption></figure>

In the **Selections** section for **Files**, you can:

* Enable or disable Selection
* Set the Selection Type as Custom, Static, or Dynamic
* Choose the Pagination Type and limit for your data

{% hint style="info" %}
Pagination in data storage refers to the process of dividing a large dataset into smaller, more manageable "pages" for efficient retrieval and display, particularly in web applications and APIs. You can learn more about setting up Pagination with Fastn [here](https://docs.fastn.ai/flows/tutorials/flow-customization-and-operations/how-to-set-up-pagination-in-your-flow).
{% endhint %}

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2Fqum9dm5UoJYQtLdag4Eh%2Fimage.png?alt=media&#x26;token=dfd933e2-b055-4844-be9c-e215a0f7b3e4" alt=""><figcaption></figcaption></figure>

* **Map Schedule:**

`syncFrequency`: Frequency options (daily, hourly, etc.)

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2F0jsXNl4GUkFvTadr9nPo%2Fimage.png?alt=media&#x26;token=bb9a8fe1-4519-42b3-9d26-9ded1ca7d5db" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
`syncFrequency` is an object with dropdown values, left empty in the flow initially and populates dynamically.
{% endhint %}

In the **Selections** section for **Sync Frequency**, you can:

* Set the Selection Type as Custom, Static, or Dynamic
* Enable or disable Selection
* Option Items for your drop-down of Sync Frequency in the Widget with the value for each sync and its respective label

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FlYHUB9kcgOY1Sh0Yft1x%2Fimage.png?alt=media&#x26;token=9e203392-a4ba-490f-9adf-a8c916e50349" alt=""><figcaption></figcaption></figure>

### Sync Flow Breakdown

The sync flow fetches selected data from AWS Redshift and migrates them to a specified Google Cloud Storage (GCS) bucket. It handles file processing, formatting, and storage while respecting user-configured preferences. [View complete flow breakdown](https://docs.fastn.ai/flows/tutorials/setting-up-a-google-drive-to-gcs-migration-widget#sync-flow-breakdown-activate)

## Widget Setup Overview

You'll create a Fastn widget with **AWS Redshift** as the dependency connector.\
The widget will support the following actions:

* **Connect:** Activates and authenticates the widget
* **Disconnect:** Deactivates the connection
* **Configure:** Allows file selection from Drive
* **Sync:** Schedules and runs the migration

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FGQ4raraxiUxVE1xZsjuy%2Fimage.png?alt=media&#x26;token=4c41f796-5738-4a6a-91a0-698f84837568" alt=""><figcaption></figcaption></figure>

### 1. Connect Action

* **Visibility**: Pre-Auth
* **Flow Triggered**: [Activator](#activation-flow)
* **Behavior**:
  * This is the first action users will see.
  * The flow prepares the widget for authentication.
  * Once activated, users authenticate their AWS account to connect.

### 2. Disconnect Action

* **Visibility**: Post-Auth
* **Flow Triggered**: [deactivate](#deactivation-flow)
* **Behavior**:
  * Lets users disconnect their AWS account from the widget.
  * This action deactivates the widget and clears any saved data or context.

### 3. Configure Action

* **Visibility**: Post-Auth
* **Flow Triggered**: [redshiftConfigFlow](#configuration-flow)
* **Behavior**:
  * Appears once the user has connected their AWS account.
  * Allows the user to select files or folders from their Redshift.
  * Stores this configuration for the sync process.

{% hint style="info" %}
This button is not visible Pre-Auth.
{% endhint %}

### 4. Sync Action

* **Visibility**: Post-auth and post-config
* **Flow Triggered**: [activate](#sync-flow-breakdown)

The Sync Action also takes the [redshift\_to\_gcs](https://docs.fastn.ai/flows/tutorials/data-migrations/setting-up-a-redshift-to-gcs-migration-flow) flow as a source input in Payload.

```
{
  "source": "redshift_to_gcs"
}
```

* **Behavior**:
  * Starts the migration process based on the Redshift config.
  * Triggers a structured flow with logic for both Google Drive and Redshift cases.

## User Experience in the Widget

* User sees the **Connect** button → clicks to authenticate with AWS.

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FpJQmQ5Yb7fRmgzWOmn7N%2Fimage.png?alt=media&#x26;token=7c1ed00e-32d8-45a6-bde4-312b13d87111" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FfHFVEeYqVDeXGOgaMiK1%2Fimage.png?alt=media&#x26;token=c50db237-9e04-4b90-9b81-b26c264b011d" alt=""><figcaption></figcaption></figure>

* On success, **Deactivate** and **Configure** buttons appear.

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2F1twTEoLzkCf8nQduEDyM%2Fimage.png?alt=media&#x26;token=a4c78fac-7f16-4d04-91cb-bda821f249e4" alt=""><figcaption></figcaption></figure>

* User clicks **Configure** to:
  * Browse through AWS Redshift and select source tables and enter the relevant query.

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FmDFwf9uujRzhS0d9yNrY%2Fimage.png?alt=media&#x26;token=7473b14b-12b3-40bf-8ccf-f3d964a726d7" alt=""><figcaption></figcaption></figure>

* User selects sync frequency from dropdown.

<figure><img src="https://1255842839-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iSr2Tx8FvvuoLPncziH%2Fuploads%2FmxHxL8vIfwBA61YuZMRP%2Fimage.png?alt=media&#x26;token=865fe551-2857-4880-b15f-417e2f0d3ed1" alt=""><figcaption></figcaption></figure>

* User will now be able to see the **Sync** button that can be used to start a scheduled migration to GCS.
* The **Deactivate** button allows you to disconnect your Widget.

## Final Outcome

Once set up, this Fastn widget gives your users a seamless experience to:

* Connect their AWS Redshift
* Configure what to sync
* Schedule automated migrations
* Push selected data to AWS Redshift Storage reliably
