From 560b80a9f70f673997a15d3dce1cc9716c06930a Mon Sep 17 00:00:00 2001 From: Samuel Bodin <1637651+bodinsamuel@users.noreply.github.com> Date: Wed, 2 Oct 2024 10:13:46 +0200 Subject: [PATCH] feat(connect): support for domain suffix, hidden fields, default value (#2797) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Describe your changes Fixes https://linear.app/nango/issue/NAN-1834/support-for-domain-suffix-hidden-fields-default-value - Support for domain suffix - Support for hidden fields For fields that are going to be shown in the UI (because they have a default value). Will be useful when I get session token values - Support for default value It's useful for some providers with static values (e.g: Freshdesk has a static password because they choose to use basic auth with an api key 🤦🏻 ). Will also be useful when I get session token values - Backfill domain suffix - Add some warnings in `validate.ts` so I can track progress -- Screenshot 2024-10-01 at 15 06 11 --- docs-v2/integrations/all/algolia/connect.mdx | 1 - .../connect-ui/src/components/CustomInput.tsx | 33 +++++ packages/connect-ui/src/views/Go.tsx | 58 ++++---- packages/shared/providers.yaml | 138 ++++++++++++++---- packages/types/lib/providers/provider.ts | 3 + scripts/validation/providers/schema.json | 12 ++ scripts/validation/providers/validate.ts | 15 +- 7 files changed, 201 insertions(+), 59 deletions(-) create mode 100644 packages/connect-ui/src/components/CustomInput.tsx diff --git a/docs-v2/integrations/all/algolia/connect.mdx b/docs-v2/integrations/all/algolia/connect.mdx index 750e34433ae..2278d22b966 100644 --- a/docs-v2/integrations/all/algolia/connect.mdx +++ b/docs-v2/integrations/all/algolia/connect.mdx @@ -46,4 +46,3 @@ Once you have both the **Application ID** and **Admin API Key**: You are now connected to Algolia. - diff --git a/packages/connect-ui/src/components/CustomInput.tsx b/packages/connect-ui/src/components/CustomInput.tsx new file mode 100644 index 00000000000..aceb26801a9 --- /dev/null +++ b/packages/connect-ui/src/components/CustomInput.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +export type InputProps = React.InputHTMLAttributes & { + prefix?: React.ReactNode; + suffix?: React.ReactNode; + fluid?: boolean; +}; + +// until shadcn provide before/after it's going to be custom +const CustomInput = React.forwardRef(({ className, type, prefix, suffix, fluid, ...props }, ref) => { + return ( +
+ {prefix &&
{prefix}
} + + {suffix &&
{suffix}
} +
+ ); +}); +CustomInput.displayName = 'Input'; + +export { CustomInput }; diff --git a/packages/connect-ui/src/views/Go.tsx b/packages/connect-ui/src/views/Go.tsx index 9485abd35f2..2150e139e32 100644 --- a/packages/connect-ui/src/views/Go.tsx +++ b/packages/connect-ui/src/views/Go.tsx @@ -9,14 +9,14 @@ import { z } from 'zod'; import type { AuthResult } from '@nangohq/frontend'; import type { AuthModeType } from '@nangohq/types'; +import { CustomInput } from '@/components/CustomInput'; import { Layout } from '@/components/Layout'; import { Button } from '@/components/ui/button'; import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'; -import { Input } from '@/components/ui/input'; import { triggerClose, triggerConnection } from '@/lib/events'; import { nango } from '@/lib/nango'; import { useGlobal } from '@/lib/store'; -import { jsonSchemaToZod } from '@/lib/utils'; +import { cn, jsonSchemaToZod } from '@/lib/utils'; import type { Resolver } from 'react-hook-form'; @@ -83,6 +83,7 @@ export const Go: React.FC = () => { } const baseForm = formSchema[provider.auth_mode]; + const defaultValues: Record = {}; // To order fields we use incremented int starting high because we don't know yet which fields will be sorted // It's a lazy algorithm that works most of the time @@ -98,6 +99,9 @@ export const Go: React.FC = () => { // Modify base form with credentials specific for (const [name, schema] of Object.entries(provider.credentials || [])) { baseForm.shape[name] = jsonSchemaToZod(schema); + if (schema.default_value) { + defaultValues[`credentials.${name}`] = schema.default_value; + } } // Append connectionConfig object @@ -288,38 +292,42 @@ export const Go: React.FC = () => { const base = name in defaultConfiguration ? defaultConfiguration[name] : undefined; return ( -
- { - return ( - -
-
- {definition?.title || base?.title} - {definition?.doc_section && ( - - - - )} -
- {definition?.description && {definition.description}} + { + return ( + +
+
+ {definition?.title || base?.title} + {definition?.doc_section && ( + + + + )}
+ {definition?.description && {definition.description}} +
+
- - - ); - }} - /> -
+
+ + ); + }} + /> ); })}
diff --git a/packages/shared/providers.yaml b/packages/shared/providers.yaml index 49f3f2b94eb..5e43f5bc662 100644 --- a/packages/shared/providers.yaml +++ b/packages/shared/providers.yaml @@ -20,9 +20,11 @@ accelo: connection_config: subdomain: type: string - title: Subdomain + title: Accelo Domain description: The subdomain of your Accelo account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .api.accelo.com adobe: display_name: Adobe @@ -327,9 +329,11 @@ auth0: connection_config: subdomain: type: string - title: Subdomain + title: Auth0 Domain description: The subdomain of your Auth0 account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .auth0.com avalara: display_name: Avalara @@ -393,13 +397,15 @@ aws: connection_config: subdomain: type: string - title: Subdomain - description: The subdomain of your Auth0 account + title: AWS Domain + description: The subdomain of your AWS account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .amazoncognito.com extension: type: string title: Domain Extension - description: The domain extension of your Auth0 account + description: The domain extension of your AWS account example: com pattern: '^[a-z.]+$' @@ -422,9 +428,11 @@ bamboohr: connection_config: subdomain: type: string - title: Subdomain + title: BambooHR Domain description: The subdomain of your BambooHR account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .bamboohr.com bamboohr-basic: display_name: BambooHR (basic auth) @@ -440,9 +448,11 @@ bamboohr-basic: connection_config: subdomain: type: string - title: Subdomain + title: BambooHR Domain description: The subdomain of your BambooHR account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .bamboohr.com battlenet: display_name: Battle.net @@ -870,9 +880,11 @@ chargebee: connection_config: subdomain: type: string - title: Subdomain + title: Chargebee Domain description: The subdomain of your Chargebee account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .chargebee.com checkr-partner: display_name: Checkr Partner @@ -1128,9 +1140,11 @@ contentful: connection_config: subdomain: type: string - title: Subdomain + title: Contentful Domain description: The subdomain of your Contentful account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .contentful.com contentstack: display_name: Contentstack @@ -1143,13 +1157,16 @@ contentstack: connection_config: subdomain: type: string - title: Subdomain + title: Contentstack Domain description: The subdomain of your Contentstack account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .contentstack.com appId: type: string title: App ID description: The app ID of your Contentstack account + order: 1 coros: display_name: Coros @@ -1426,9 +1443,11 @@ egnyte: connection_config: subdomain: type: string - title: Subdomain + title: Egnyte Domain description: The subdomain of your Egnyte account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .egnyte.com entrata: display_name: Entrata @@ -1441,9 +1460,11 @@ entrata: connection_config: subdomain: type: string - title: Subdomain + title: Entrata Domain description: The subdomain of your Entrata account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .entrata.com envoy: display_name: Envoy @@ -1715,13 +1736,28 @@ freshdesk: auth_mode: BASIC proxy: base_url: https://${connectionConfig.subdomain}.freshdesk.com + verification: + endpoint: /api/v2/settings/helpdesk docs: https://docs.nango.dev/integrations/all/freshdesk + credentials: + username: + type: string + title: FreshDesk API Key + description: The API Key of your FreshDesk account + password: + type: string + title: '' + description: '' + default_value: X + hidden: true connection_config: subdomain: type: string - title: Subdomain + title: FreshDesk Domain description: The subdomain of your FreshDesk account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .freshdesk.com freshsales: display_name: FreshSales @@ -1738,9 +1774,11 @@ freshsales: connection_config: subdomain: type: string - title: Subdomain + title: FreshSales Domain description: The subdomain of your FreshSales account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .freshsales.io credentials: apiKey: type: string @@ -1758,9 +1796,11 @@ freshservice: connection_config: subdomain: type: string - title: Subdomain + title: FreshService Domain description: The subdomain of your FreshService account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .freshservice.com front: display_name: Front @@ -2068,9 +2108,11 @@ gorgias: connection_config: subdomain: type: string - title: Subdomain + title: Gorgias Domain description: The subdomain of your Gorgias account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .gorgias.com greenhouse: display_name: Greenhouse @@ -2091,9 +2133,11 @@ greenhouse: connection_config: resource: type: string - title: Subdomain + title: Greenhouse Domain description: The subdomain of your Greenhouse account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .greenhouse.io greenhouse-basic: display_name: Greenhouse (basic auth) @@ -2112,9 +2156,11 @@ greenhouse-basic: connection_config: resource: type: string - title: Subdomain + title: Greenhouse Domain description: The subdomain of your Greenhouse account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .greenhouse.io gumroad: display_name: Gumroad @@ -2321,9 +2367,11 @@ insightly: connection_config: pod: type: string - title: Subdomain + title: Insightly Domain description: The subdomain of your Insightly account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .insightly.com instantly: display_name: Instantly @@ -2420,9 +2468,11 @@ jira-basic: connection_config: subdomain: type: string - title: Subdomain + title: Jira Domain description: The subdomain of your Jira account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .atlassian.net jira-data-center: display_name: Jira Data Center @@ -2584,9 +2634,11 @@ kustomer: connection_config: extension: type: string - title: Subdomain + title: Kustomer Domain description: The subdomain of your Kustomer account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .kustomerapp.com credentials: apiKey: type: string @@ -3163,9 +3215,11 @@ okta: connection_config: subdomain: type: string - title: Subdomain + title: Okta Domain description: The subdomain of your Okta account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .okta.com one-drive: display_name: One Drive @@ -3599,9 +3653,11 @@ posthog: connection_config: subdomain: type: string - title: Subdomain + title: PostHog Domain description: The subdomain of your PostHog account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .posthog.com credentials: apiKey: type: string @@ -3641,9 +3697,11 @@ qualtrics: connection_config: subdomain: type: string - title: Subdomain + title: Qualtrics Domain description: The subdomain of your Qualtrics account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .qualtrics.com quickbooks: display_name: Quickbooks @@ -3853,9 +3911,11 @@ salesforce-experience-cloud: connection_config: subdomain: type: string - title: Subdomain + title: Salesforce Domain description: The subdomain of your Salesforce Experience Cloud account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .my.site.com instance_url: type: string title: Instance URL @@ -3958,9 +4018,11 @@ servicenow: connection_config: subdomain: type: string - title: Subdomain + title: ServiceNow Domain description: The subdomain of your ServiceNow account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .service-now.com sharepoint-online: display_name: SharePoint Online @@ -3999,9 +4061,11 @@ shopify: connection_config: subdomain: type: string - title: Subdomain + title: Shopify Domain description: The subdomain of your Shopify account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .myshopify.com shortcut: display_name: Shortcut @@ -4374,9 +4438,11 @@ teamtailor: connection_config: extension: type: string - title: Subdomain + title: Teamtailor Domain description: The subdomain of your Teamtailor instance pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .teamtailor.com credentials: apiKey: type: string @@ -4845,9 +4911,11 @@ wildix-pbx: connection_config: subdomain: type: string - title: Subdomain + title: Wildix Domain description: The subdomain of your Wildix instance pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .wildixin.com wordpress: display_name: WordPress @@ -4899,9 +4967,11 @@ workable: connection_config: subdomain: type: string - title: Subdomain + title: Workable Domain description: The subdomain of your Workable account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .workable.com credentials: apiKey: type: string @@ -4919,9 +4989,11 @@ workday: connection_config: subdomain: type: string - title: Subdomain + title: Workday Domain description: The subdomain of your Workday account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .workday.com wrike: display_name: Wrike @@ -5027,9 +5099,11 @@ zendesk: connection_config: subdomain: type: string - title: Subdomain + title: Zendesk Domain description: The subdomain of your Zendesk account pattern: '^[a-z0-9_-]+$' + example: domain + suffix: .zendesk.com zenefits: display_name: Zenefits diff --git a/packages/types/lib/providers/provider.ts b/packages/types/lib/providers/provider.ts index 65c77eaab84..a679e6fa8ce 100644 --- a/packages/types/lib/providers/provider.ts +++ b/packages/types/lib/providers/provider.ts @@ -29,6 +29,9 @@ export interface SimplifiedJSONSchema { pattern?: string; format?: string; order: number; + default_value?: string; + hidden?: string; + suffix?: string; doc_section?: string; } diff --git a/scripts/validation/providers/schema.json b/scripts/validation/providers/schema.json index 430b5f60d3b..7fa9a2bae4b 100644 --- a/scripts/validation/providers/schema.json +++ b/scripts/validation/providers/schema.json @@ -353,6 +353,9 @@ "order": { "type": "number" }, + "suffix": { + "type": "string" + }, "doc_section": { "type": "string", "pattern": "^#[a-z0-9-]+$" @@ -389,6 +392,15 @@ "format": { "type": "string" }, + "default_value": { + "type": "string" + }, + "hidden": { + "type": "boolean" + }, + "suffix": { + "type": "string" + }, "doc_section": { "type": "string" } diff --git a/scripts/validation/providers/validate.ts b/scripts/validation/providers/validate.ts index 7d7fbd5b39c..8c13c823693 100644 --- a/scripts/validation/providers/validate.ts +++ b/scripts/validation/providers/validate.ts @@ -117,10 +117,23 @@ function validateProvider(providerKey: string, provider: Provider) { } if (provider.auth_mode === 'API_KEY') { - if (!provider?.credentials?.['apiKey']) { + if (!provider.credentials?.['apiKey']) { console.error(chalk.red('error'), chalk.blue(providerKey), `"credentials" > "apiKey" is not defined`); error = true; } + if (!provider.proxy?.verification) { + console.warn(chalk.yellow('warning'), chalk.blue(providerKey), `do not have "proxy" > "verification" set`); + } + } else if (provider.auth_mode === 'BASIC') { + if (!provider.credentials?.['username']) { + console.warn(chalk.yellow('warning'), chalk.blue(providerKey), `"credentials" > "username" is not defined`); + } + if (!provider.credentials?.['password']) { + console.warn(chalk.yellow('warning'), chalk.blue(providerKey), `"credentials" > "password" is not defined`); + } + if (!provider.proxy?.verification) { + console.warn(chalk.yellow('warning'), chalk.blue(providerKey), `do not have "proxy" > "verification" set`); + } } else { if (provider.credentials) { console.error(chalk.red('error'), chalk.blue(providerKey), `"credentials" is defined but not required`);