feat: Data pipelines unsubscribe modal (#19334)

* feat: Exports unsubscribe modal

* Changes

* Fix query

* Make modal work for plugin configs

* plugins part should work now

* wip batch exports

* batch exports finished + modal access listeners

* fix name and description to be writable

* rename and move table to main billing unsub modal

* add text and disabled reason

* improve disabled state

* Update UI snapshots for `chromium` (1)

* move into billing

* use correct product name

* stories

* fix

* make images smaller

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

* Update frontend/src/scenes/plugins/plugin/PluginImage.tsx

Co-authored-by: Bianca Yang <[email protected]>

* remove old logic

* fix

* fix

* fix overlap

* Update UI snapshots for `chromium` (1)

* delete snapshots so they are regenerated

* Update UI snapshots for `chromium` (1)

* fix test

* unfix?

* project not team

* reorder columns

* Update UI snapshots for `chromium` (1)

* Update UI snapshots for `chromium` (1)

---------

Co-authored-by: Michael Matloka <[email protected]>
Co-authored-by: Raquel Smith <[email protected]>
Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Bianca Yang <[email protected]>

frontend/src/mocks/fixtures/api/organizations/@current/@current.json

@@ -0,0 +1,22 @@
+{
+    "id": "0178a3ab-d163-0000-4b55-bceadebb03fa",
+    "name": "Hogflix Movies",
+    "created_at": "2021-04-05T20:14:09.763753Z",
+    "updated_at": "2021-04-05T20:14:25.443181Z",
+    "membership_level": 15,
+    "plugins_access_level": 9,
+    "teams": [
+        {
+            "id": 2,
+            "uuid": "0178a3ab-d1e5-0000-c5ca-da746c68f506",
+            "organization": "0178a3ab-d163-0000-4b55-bceadebb03fa",
+            "api_token": "tJy-b6mTLwvNP_ZJHrfgn99pQCYOGFE3-nwpb8utFa8",
+            "name": "Hogflix Demo App",
+            "completed_snippet_onboarding": true,
+            "ingested_event": true,
+            "is_demo": true,
+            "timezone": "Europe/Kiev"
+        }
+    ],
+    "available_features": []
+}

frontend/src/mocks/fixtures/api/organizations/@current/batchExports.json

@@ -0,0 +1,34 @@
+{
+    "count": 1,
+    "next": null,
+    "previous": null,
+    "results": [
+        {
+            "id": "018c8dcd-1598-0001-a082-fa2d1e2dbb74",
+            "team_id": 2,
+            "name": "my export",
+            "destination": {
+                "type": "Postgres",
+                "config": {
+                    "host": "sdsdd.domc.com",
+                    "port": 5432,
+                    "user": "sdssd",
+                    "schema": "sddd",
+                    "database": "sdsd",
+                    "password": "sdsdsd",
+                    "table_name": "ssss",
+                    "exclude_events": ["sdd"],
+                    "include_events": ["sdddddd"]
+                }
+            },
+            "interval": "day",
+            "paused": false,
+            "created_at": "2023-12-21T19:14:37.135878Z",
+            "last_updated_at": "2023-12-22T18:42:43.863292Z",
+            "last_paused_at": "2023-12-22T18:41:50.122946Z",
+            "start_at": null,
+            "end_at": "2023-12-30T08:00:00Z",
+            "latest_runs": []
+        }
+    ]
+}

frontend/src/mocks/fixtures/api/organizations/@current/plugins/exportsUnsubscribeConfigs.json

@@ -0,0 +1,24 @@
+[
+    {
+        "id": 2,
+        "plugin": 4,
+        "enabled": true,
+        "order": 2,
+        "config": {
+            "host": "eu.posthog.com",
+            "replication": "1",
+            "disable_geoip": "No",
+            "project_api_key": "sdsdd",
+            "events_to_ignore": ""
+        },
+        "error": null,
+        "team_id": 2,
+        "plugin_info": null,
+        "delivery_rate_24h": null,
+        "created_at": "2023-12-22T18:23:03.907137Z",
+        "updated_at": "2023-12-22T18:42:54.074571Z",
+        "name": "Replicator",
+        "description": "Replicate PostHog event stream in another PostHog instance",
+        "deleted": false
+    }
+]

frontend/src/mocks/fixtures/api/organizations/@current/plugins/plugins.json

@@ -0,0 +1,219 @@
+{
+    "count": 4,
+    "next": null,
+    "previous": null,
+    "results": [
+        {
+            "id": 4,
+            "plugin_type": "custom",
+            "name": "Replicator",
+            "description": "Replicate PostHog event stream in another PostHog instance",
+            "url": "https://github.com/PostHog/posthog-plugin-replicator",
+            "icon": null,
+            "config_schema": [
+                {
+                    "key": "host",
+                    "hint": "E.g. posthog.yourcompany.com",
+                    "name": "Host",
+                    "type": "string",
+                    "required": true
+                },
+                {
+                    "key": "project_api_key",
+                    "hint": "Grab it from e.g. https://posthog.yourcompany.com/project/settings",
+                    "name": "Project API Key",
+                    "type": "string",
+                    "required": true
+                },
+                {
+                    "key": "replication",
+                    "hint": "How many times should each event be sent",
+                    "name": "Replication",
+                    "type": "string",
+                    "default": "1",
+                    "required": false
+                },
+                {
+                    "key": "events_to_ignore",
+                    "hint": "Comma-separated list of events to ignore, e.g. $pageleave, purchase",
+                    "name": "Events to ignore",
+                    "type": "string",
+                    "default": "",
+                    "required": false
+                },
+                {
+                    "key": "disable_geoip",
+                    "hint": "Add $disable_geoip so that the receiving PostHog instance doesn't try to resolve the IP address.",
+                    "name": "Disable Geo IP?",
+                    "type": "choice",
+                    "choices": ["Yes", "No"],
+                    "default": "No",
+                    "required": false
+                }
+            ],
+            "tag": "cec29cd0dea20465839dd301894e4798d6dd6356",
+            "latest_tag": "cec29cd0dea20465839dd301894e4798d6dd6356",
+            "is_global": false,
+            "organization_id": "018aaa96-00d3-0000-b845-8eb60884ff76",
+            "organization_name": "test 123",
+            "capabilities": {},
+            "metrics": {},
+            "public_jobs": {}
+        },
+        {
+            "id": 3,
+            "plugin_type": "custom",
+            "name": "GeoIP",
+            "description": "Enrich PostHog events and persons with IP location data",
+            "url": "https://github.com/PostHog/posthog-plugin-geoip",
+            "icon": null,
+            "config_schema": [],
+            "tag": "2dd67e1dec9c8b5febd7a6d9235c51072950cd37",
+            "latest_tag": "2dd67e1dec9c8b5febd7a6d9235c51072950cd37",
+            "is_global": false,
+            "organization_id": "018aaa96-00d3-0000-b845-8eb60884ff76",
+            "organization_name": "test 123",
+            "capabilities": {},
+            "metrics": {},
+            "public_jobs": {}
+        },
+        {
+            "id": 2,
+            "plugin_type": "custom",
+            "name": "Customer.io",
+            "description": "Send event data and emails into Customer.io.",
+            "url": "https://github.com/PostHog/customerio-plugin",
+            "icon": null,
+            "config_schema": [
+                {
+                    "key": "customerioSiteId",
+                    "hint": "Provided during Customer.io setup.",
+                    "name": "Customer.io Site ID",
+                    "type": "string",
+                    "secret": true,
+                    "default": "",
+                    "required": true
+                },
+                {
+                    "key": "customerioToken",
+                    "hint": "Provided during Customer.io setup.",
+                    "name": "Customer.io API Key",
+                    "type": "string",
+                    "secret": true,
+                    "default": "",
+                    "required": true
+                },
+                {
+                    "key": "host",
+                    "hint": "Use the EU variant if your Customer.io account is based in the EU region.",
+                    "name": "Tracking Endpoint",
+                    "type": "choice",
+                    "choices": ["track.customer.io", "track-eu.customer.io"],
+                    "default": "track.customer.io"
+                },
+                {
+                    "key": "identifyByEmail",
+                    "hint": "If enabled, the plugin will identify users by email instead of ID, whenever an email is available.",
+                    "name": "Identify by email",
+                    "type": "choice",
+                    "choices": ["Yes", "No"],
+                    "default": "No"
+                },
+                {
+                    "key": "sendEventsFromAnonymousUsers",
+                    "hint": "Customer.io pricing is based on the number of customers. This is an option to only send events from users that have been identified. Take into consideration that merging after identification won't work (as those previously anonymous events won't be there).",
+                    "name": "Filtering of Anonymous Users",
+                    "type": "choice",
+                    "choices": [
+                        "Send all events",
+                        "Only send events from users that have been identified",
+                        "Only send events from users with emails"
+                    ],
+                    "default": "Send all events"
+                },
+                {
+                    "key": "eventsToSend",
+                    "hint": "If this is set, only the specified events (comma-separated) will be sent to Customer.io.",
+                    "name": "PostHog Event Allowlist",
+                    "type": "string"
+                }
+            ],
+            "tag": "0b86074d53aa11617290f12501b56cfc27c7abde",
+            "latest_tag": "0b86074d53aa11617290f12501b56cfc27c7abde",
+            "is_global": false,
+            "organization_id": "018aaa96-00d3-0000-b845-8eb60884ff76",
+            "organization_name": "test 123",
+            "capabilities": {},
+            "metrics": {},
+            "public_jobs": {}
+        },
+        {
+            "id": 1,
+            "plugin_type": "custom",
+            "name": "BigQuery Export",
+            "description": "Sends events to a BigQuery database on ingestion.",
+            "url": "https://github.com/PostHog/bigquery-plugin",
+            "icon": null,
+            "config_schema": [
+                {
+                    "key": "googleCloudKeyJson",
+                    "name": "JSON file with your google cloud key",
+                    "type": "attachment",
+                    "secret": true,
+                    "required": true
+                },
+                {
+                    "key": "datasetId",
+                    "hint": "In case Google Cloud tells you \"my-project-123245:Something\", use \"Something\" as the ID.",
+                    "name": "Dataset ID",
+                    "type": "string",
+                    "required": true
+                },
+                {
+                    "key": "tableId",
+                    "hint": "A table will be created if it does not exist.",
+                    "name": "Table ID",
+                    "type": "string",
+                    "required": true
+                },
+                {
+                    "key": "exportEventsToIgnore",
+                    "hint": "Comma separated list of events to ignore",
+                    "name": "Events to ignore",
+                    "type": "string",
+                    "default": "$feature_flag_called,$autocapture"
+                },
+                {
+                    "key": "exportEventsBufferBytes",
+                    "hint": "Default 1MB. Upload events after buffering this many of them. The value must be between 1 MB and 10 MB.",
+                    "name": "Maximum upload size in bytes",
+                    "type": "string",
+                    "default": "1048576"
+                },
+                {
+                    "key": "exportEventsBufferSeconds",
+                    "hint": "Default 30 seconds. If there are events to upload and this many seconds has passed since the last upload, then upload the queued events. The value must be between 1 and 600 seconds.",
+                    "name": "Export events at least every X seconds",
+                    "type": "string",
+                    "default": "30"
+                },
+                {
+                    "key": "exportElementsOnAnyEvent",
+                    "hint": "Advanced",
+                    "name": "Export the property $elements on events that aren't called `$autocapture`?",
+                    "type": "choice",
+                    "choices": ["Yes", "No"],
+                    "default": "No"
+                }
+            ],
+            "tag": "5f5dcbc2f6a36ea7e9700ab36cc9397d92742ca3",
+            "latest_tag": "5f5dcbc2f6a36ea7e9700ab36cc9397d92742ca3",
+            "is_global": false,
+            "organization_id": "018aaa96-00d3-0000-b845-8eb60884ff76",
+            "organization_name": "test 123",
+            "capabilities": {},
+            "metrics": {},
+            "public_jobs": {}
+        }
+    ]
+}

frontend/src/scenes/batch_exports/BatchExports.stories.tsx

@@ -25,6 +25,7 @@ export default {
             createExportServiceHandlers({
                 1: {
                     id: '1',
+                    team_id: 1,
                     name: 'My S3 Exporter',
                     destination: {
                         type: 'S3',

frontend/src/scenes/batch_exports/batchExportEditLogic.ts

@@ -174,7 +174,7 @@ export const batchExportsEditLogic = kea<batchExportsEditLogicType>([
                               config: config,
                           } as unknown as BatchExportDestinationSnowflake)
 
-                const data: Omit<BatchExportConfiguration, 'id' | 'created_at'> = {
+                const data: Omit<BatchExportConfiguration, 'id' | 'created_at' | 'team_id'> = {
                     paused,
                     name,
                     interval,

frontend/src/scenes/billing/Billing.stories.tsx

@@ -4,8 +4,14 @@ import { mswDecorator, useStorybookMocks } from '~/mocks/browser'
 import billingJson from '~/mocks/fixtures/_billing_v2.json'
 import billingJsonWithDiscount from '~/mocks/fixtures/_billing_v2_with_discount.json'
 import preflightJson from '~/mocks/fixtures/_preflight.json'
+import organizationCurrent from '~/mocks/fixtures/api/organizations/@current/@current.json'
+import batchExports from '~/mocks/fixtures/api/organizations/@current/batchExports.json'
+import exportsUnsubscribeConfigs from '~/mocks/fixtures/api/organizations/@current/plugins/exportsUnsubscribeConfigs.json'
+import organizationPlugins from '~/mocks/fixtures/api/organizations/@current/plugins/plugins.json'
+import { BillingProductV2Type } from '~/types'
 
 import { Billing } from './Billing'
+import { UnsubscribeSurveyModal } from './UnsubscribeSurveyModal'
 
 const meta: Meta = {
     title: 'Scenes-Other/Billing v2',
@@ -50,3 +56,59 @@ export const BillingV2WithDiscount = (): JSX.Element => {
 
     return <Billing />
 }
+
+export const BillingUnsubscribeModal = (): JSX.Element => {
+    useStorybookMocks({
+        get: {
+            '/api/billing-v2/': {
+                ...billingJson,
+            },
+        },
+    })
+
+    return <UnsubscribeSurveyModal product={billingJson.products[0] as BillingProductV2Type} />
+}
+export const BillingUnsubscribeModal_DataPipelines = (): JSX.Element => {
+    useStorybookMocks({
+        get: {
+            '/api/billing-v2/': {
+                ...billingJson,
+            },
+            '/api/organizations/@current/plugins/exports_unsubscribe_configs/': exportsUnsubscribeConfigs,
+            '/api/organizations/@current/batch_exports': batchExports,
+            '/api/organizations/@current/plugins': {
+                ...organizationPlugins,
+            },
+            '/api/organizations/@current/': {
+                ...organizationCurrent,
+            },
+        },
+    })
+    const product = billingJson.products[0] as BillingProductV2Type
+    product.addons = [
+        {
+            type: 'data_pipelines',
+            subscribed: true,
+            name: 'Data Pipelines',
+            description: 'Add-on description',
+            price_description: 'Add-on price description',
+            image_url: 'Add-on image URL',
+            docs_url: 'Add-on documentation URL',
+            tiers: [],
+            tiered: false,
+            unit: '',
+            unit_amount_usd: '0',
+            current_amount_usd: '0',
+            current_usage: 0,
+            projected_usage: 0,
+            projected_amount_usd: '0',
+            plans: [],
+            usage_key: '',
+        },
+    ]
+
+    return <UnsubscribeSurveyModal product={product} />
+}
+BillingUnsubscribeModal_DataPipelines.parameters = {
+    testOptions: { waitForSelector: '.LemonTable__content' },
+}