# Setting Up a Google Drive to GCS Migration - Widget
## Setting Up Flows for the Widget
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']`.
2. **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.
3. **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
{% hint style="info" %}
In the **mapping step**, users can click the three dots next to fields like **Files** and **Sync Frequency** to access **Configuration Field Options**.
{% endhint %}
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.)
{% 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
### 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.
## Widget Setup Overview
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](#activation-flow)
* **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](#deactivation-flow)
* **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](#configuration-flow-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.
{% 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-activate)
The Sync Action also takes the [drive\_to\_gcs](https://docs.fastn.ai/flows/tutorials/data-migrations/setting-up-a-google-drive-to-gcs-migration-flow) 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.
## User Experience in the Widget
* User sees the **Connect** button → clicks to authenticate with Google
* On success, **Disconnect** and **Configure** buttons appear.
* User clicks **Configure** to:
* Browse through Google Drive and select source files.
* User selects sync frequency from the dropdown.
* User will now be able to see the **Sync** button, which you can use to start a scheduled migration to GCS.
* The **Disconnect** button allows you to disconnect your Widget.
## Final Outcome
Once set up, this Fastn widget gives your users a seamless experience to:
* Connect their Google Drive
* Configure what to sync
* Schedule automated migrations
* Push selected data to Google Cloud Storage reliably
.png?alt=media&token=7638842d-1a85-4cd9-b9b1-8c60c2a2276c)
.png?alt=media&token=e54c0c9a-a133-45bb-ba98-0c9cb23893ac)
.png?alt=media&token=c38d304e-bc25-43c7-b4c0-c22d0448b97c)
.png?alt=media&token=25b47b71-718b-4e6e-ab62-88832074c38a)