Skip to content

Commit

Permalink
feat(connect-ui): handle generic auth method (#2754)
Browse files Browse the repository at this point in the history
## Describe your changes

Contributes to https://linear.app/nango/issue/NAN-1703/create-ui

- Handle generic auth method
API Key, Basic auth, unauth, and all auth that do not take a connection
config (e.g: google drive). If your integration is requiring a
connectionConfig it's not yet supported

- Frontend: type errors + fix a typo
- Frontend: add a way to clear SDK's state, it was annoying to do that
manually when debugging
- Frontend: slightly change the way the modal is being created
We were creating an empty popup and then changing the URL which made the
catching of popup blocker more random


## 🧪 Tests
```ts
npm i
npm run dw
npm run dwa

cd packages/connect-ui
touch .env
> VITE_LOCAL_SECRET_KEY=FILL
> VITE_LOCAL_PUBLIC_KEY=FILL
> VITE_LOCAL_HOSTNAME=http://localhost:3003


npm run connect-ui:dev:watch
```


https://github.com/user-attachments/assets/080d3746-bc1e-457e-a80b-175646fc63a4
  • Loading branch information
bodinsamuel authored and hassan254-prog committed Sep 25, 2024
1 parent f061d41 commit 475e6b8
Show file tree
Hide file tree
Showing 20 changed files with 910 additions and 87 deletions.
16 changes: 12 additions & 4 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,7 @@
"impliedStrict": true,
"jsx": true
},
"project": "tsconfig.json"
"project": "packages/connect-ui/tsconfig.json"
},
"rules": {
// unnecessary when bundling
Expand All @@ -230,6 +230,14 @@
"@typescript-eslint/no-explicit-any": "error",
"@typescript-eslint/only-throw-error": "error",
"react/prop-types": "off",
"react/jsx-sort-props": [
"error",
{
"callbacksLast": true,
"shorthandFirst": true,
"reservedFirst": true
}
],
"import/order": [
"error",
{
Expand All @@ -246,16 +254,16 @@
],
"newlines-between": "always",
"alphabetize": {
"order": "asc",
"order": "asc"
},
"warnOnUnassignedImports": true,
"pathGroups": [
{
"pattern": "@/**",
"group": "parent",
"group": "parent"
},
{
"pattern": "@nangohq/**",
"pattern": "@nangohq/*",
"group": "internal",
"position": "after"
}
Expand Down
154 changes: 142 additions & 12 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 9 additions & 3 deletions packages/connect-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,27 +9,33 @@
"preview": "vite preview"
},
"devDependencies": {
"@nangohq/frontend": "file:../frontend",
"@nangohq/types": "file:../types",
"@radix-ui/react-slot": "1.1.0",
"@tabler/icons-react": "3.17.0",
"@tanstack/react-query": "5.56.2",
"@tanstack/react-router": "1.58.3",
"@hookform/resolvers": "3.9.0",
"@radix-ui/react-label": "2.1.0",
"@types/react": "18.3.3",
"@types/react-dom": "18.3.0",
"@vitejs/plugin-react-swc": "3.5.0",
"autoprefixer": "10.4.20",
"class-variance-authority": "0.7.0",
"clsx": "2.1.1",
"globals": "15.9.0",
"lucide-react": "0.441.0",
"postcss": "8.4.45",
"react": "18.3.1",
"react-dom": "18.3.1",
"react-error-boundary": "4.0.13",
"react-hook-form": "^7.53.0",
"tailwind-merge": "2.5.2",
"tailwindcss": "3.4.11",
"tailwindcss-animate": "1.0.7",
"typescript": "5.5.3",
"vite": "5.4.6"
}
"vite": "5.4.6",
"zod": "3.23.8",
"zustand": "5.0.0-rc.2"
},
"dependencies": {}
}
12 changes: 2 additions & 10 deletions packages/connect-ui/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,10 @@
import { QueryClientProvider, QueryErrorResetBoundary } from '@tanstack/react-query';
import { RouterProvider, createRouter, createRootRoute } from '@tanstack/react-router';
import { RouterProvider } from '@tanstack/react-router';
import { ErrorBoundary } from 'react-error-boundary';

import { ErrorFallback } from './components/ErrorFallback.js';
import { queryClient } from './lib/query.js';
import { IntegrationsList } from './views/IntegrationsList.js';

const rootRoute = createRootRoute({
component: IntegrationsList
});

const routeTree = rootRoute.addChildren([]);

const router = createRouter({ routeTree });
import { router } from './lib/routes.js';

export const App: React.FC = () => {
return (
Expand Down
11 changes: 9 additions & 2 deletions packages/connect-ui/src/components/ui/button.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Slot } from '@radix-ui/react-slot';
import { IconLoader2 } from '@tabler/icons-react';
import { cva } from 'class-variance-authority';
import * as React from 'react';

Expand Down Expand Up @@ -30,11 +31,17 @@ const buttonVariants = cva(

export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
asChild?: boolean;
loading?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, ...props }, ref) => {
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, asChild = false, loading, children, ...props }, ref) => {
const Comp = asChild ? Slot : 'button';
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
return (
<Comp ref={ref} className={cn(buttonVariants({ variant, size, className }))} {...props} disabled={loading || props.disabled}>
{loading && <IconLoader2 className="mr-2 animate-spin" size={15} />}
{children}
</Comp>
);
});
Button.displayName = 'Button';

Expand Down
Loading

0 comments on commit 475e6b8

Please sign in to comment.