Setting Up a Google Drive to GCS Migration - Widget

Use this guide to build a widget in Fastn that allows users to authenticate with Google Drive, configure file selection, and schedule automated syncs to Google Cloud Storage (GCS).

Each of these flows corresponds to an action button or event from your Google Drive 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 Google Drive. 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}}"

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'].

Loop over Webhook IDs:

Use a Loop step to iterate over webhookIds

Inside the loop, add a Delete Webhook step that deletes each of the webhooks fetched through there IDs as long as the flow runs.

Return Success Message:

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

Configuration Flow (driveConfigFlow)

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:
files: List of available files

In the mapping step, users can click the three dots next to fields like Files and Sync Frequency to access Configuration Field Options.

For both Files 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.

In the Selections section for Files, you can:

Enable or disable Selection
Set the Selection Type as Custom, Static, or Dynamic
Choose the Selector for your Widget

Map Schedule:

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

syncFrequency is an object with dropdown values, left empty in the flow initially and populates dynamically.

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

Sync Flow Breakdown (activate)

The sync flow fetches selected files from Google Drive and migrates them to a specified Google Cloud Storage (GCS) bucket. It handles file processing, formatting, and storage while respecting user-configured preferences.

Initialize flow variables

Switch

In the switch statement, the Data Mapper:

Takes values from the respective config flow
Initializes a sync-specific variable based on flow output
If the connector is Google Drive:
- Calls driveConfigFlow for schedule info

If Redshift:
- Calls RedShiftconfigflow for schedule info

Initializing Flow Variables

In the next step, variables are initialized for both Drive and Redshift mapped outputs respectively.

Else:
- Ends the flow
Parse Sync Frequency

A JavaScript step (parseSyncFrequency) extracts and formats frequency info

function handler(params) {
  const frequencyString = params.data.var.configs.syncFrequency.value;
  const [rate, ...unitParts] = frequencyString.split(" ");
  const unitTime = unitParts.join(" ");

  return {
    rate: rate,
    unitTime: unitTime.trim()
  };
}

Switch
- If tenant doesn’t exist → return error
- Else → proceed to Loop Over Templates

Loop Over Templates
- Fetches APIs for each project ID involved

Loop Over Webhooks
- If webhooks exist:
  - Fetch scheduler values
- If not:
  - Create webhooks using:
    projectID in headers
    unitRate and unitTime from parseSyncFrequency

The flow returns Success Message after successful execution.

You'll create a Fastn widget with Google Drive 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

1. Connect Action

Visibility: Pre-Auth
Flow Triggered: Activator
Behavior:
- This is the first action users will see.
- The flow prepares the widget for authentication.
- Once activated, users authenticate their Google account to connect.

2. Disconnect Action

Visibility: Post-Auth
Flow Triggered: deactivate
Behavior:
- Lets users disconnect their Google Drive from the widget.
- This action deactivates the widget and clears any saved data or context.

3. Configure Action

Visibility: Post-Auth
Flow Triggered: driveConfigFlow
Behavior:
- Appears once the user has connected their Google account.
- Allows the user to select files or folders from their Drive.
- Stores this configuration for the sync process.

This button is not visible Pre-Auth.

4. Sync Action

Visibility: Post-auth and post-config
Flow Triggered: activate

The Sync Action also takes the drive_to_gcs flow as a source input in Payload.

{
  "source": "drive_to_gcs"
}

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