Skip to content

Commit

Permalink
feat(connect): support for domain suffix, hidden fields, default value (
Browse files Browse the repository at this point in the history 
NangoHQ#2797)

## 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

--

<img width="518" alt="Screenshot 2024-10-01 at 15 06 11"
src="https://github.com/user-attachments/assets/f27fa01e-bc86-4936-85ae-fa00f39ac0b2">
  • Loading branch information
@bodinsamuel
bodinsamuel authored Oct 2, 2024
1 parent 535c879 commit 560b80a
Show file tree
Hide file tree
Showing 7 changed files with 201 additions and 59 deletions.
1 change: 0 additions & 1 deletion docs-v2/integrations/all/algolia/connect.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,3 @@ Once you have both the **Application ID** and **Admin API Key**:
<img src="/integrations/all/algolia/form.png" style={{maxWidth: "450px" }}/>

You are now connected to Algolia.

33 changes: 33 additions & 0 deletions packages/connect-ui/src/components/CustomInput.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from 'react';

import { cn } from '@/lib/utils';

export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
prefix?: React.ReactNode;
suffix?: React.ReactNode;
fluid?: boolean;
};

// until shadcn provide before/after it's going to be custom
const CustomInput = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, prefix, suffix, fluid, ...props }, ref) => {
return (
<div className={cn('relative flex items-center bg-transparent w-full rounded border text-sm h-10 overflow-hidden')}>
{prefix && <div className="h-10 px-2 leading-10 italic text-dark-500">{prefix}</div>}
<input
ref={ref}
className={cn(
'bg-transparent border-0 h-full w-full rounded focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-1 file:border-0 file:bg-transparent file:text-sm file:font-medium outline-none disabled:text-text-light-gray disabled:cursor-not-allowed',
'text-sm px-3 py-[10px] placeholder-gray-400',
(fluid || suffix) && 'grow-0 [field-sizing:content] w-auto',
className
)}
type={type}
{...props}
/>
{suffix && <div className="h-10 px-2 leading-10 italic text-dark-500">{suffix}</div>}
</div>
);
});
CustomInput.displayName = 'Input';

export { CustomInput };
58 changes: 33 additions & 25 deletions packages/connect-ui/src/views/Go.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -83,6 +83,7 @@ export const Go: React.FC = () => {
}

const baseForm = formSchema[provider.auth_mode];
const defaultValues: Record<string, string> = {};

// 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
Expand All @@ -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
Expand Down Expand Up @@ -288,38 +292,42 @@ export const Go: React.FC = () => {
const base = name in defaultConfiguration ? defaultConfiguration[name] : undefined;

return (
<div key={name}>
<FormField
control={form.control}
name={name}
render={({ field }) => {
return (
<FormItem>
<div>
<div className="flex gap-2 items-start pb-1">
<FormLabel className="leading-4">{definition?.title || base?.title}</FormLabel>
{definition?.doc_section && (
<Link target="_blank" to={`${provider.docs_connect}${definition.doc_section}`}>
<IconInfoCircle size={16} />
</Link>
)}
</div>
{definition?.description && <FormDescription>{definition.description}</FormDescription>}
<FormField
key={name}
control={form.control}
defaultValue={definition?.default_value ?? undefined}
// disabled={Boolean(definition?.hidden)} DO NOT disable it breaks the form
name={name}
render={({ field }) => {
return (
<FormItem className={cn(definition?.hidden && 'hidden')}>
<div>
<div className="flex gap-2 items-start pb-1">
<FormLabel className="leading-4">{definition?.title || base?.title}</FormLabel>
{definition?.doc_section && (
<Link target="_blank" to={`${provider.docs_connect}${definition.doc_section}`}>
<IconInfoCircle size={16} />
</Link>
)}
</div>
{definition?.description && <FormDescription>{definition.description}</FormDescription>}
</div>
<div>
<FormControl>
<Input
<CustomInput
placeholder={definition?.example || definition?.title || base?.example}
suffix={definition?.suffix}
{...field}
autoComplete="off"
type={base?.secret ? 'password' : 'text'}
/>
</FormControl>
<FormMessage />
</FormItem>
);
}}
/>
</div>
</div>
</FormItem>
);
}}
/>
);
})}
</div>
Expand Down
Loading

0 comments on commit 560b80a

Please sign in to comment.