feat(ui): new create connection page #3072

bodinsamuel · 2024-11-27T14:23:15Z

😘 Changes

Fixes https://linear.app/nango/issue/NAN-2188/test-connection-ui

UI: New create connection page
~~The goal is to give the opportunity for customers to change the EndUser (also education time) and display links to documentation. It's one more click but yeah.~~
UI: Keep the legacy page to a new endpoint for a moment
UI: add new style for Button, Input, Select
https://www.figma.com/design/pMnSC7rhSM79Dqwhm7MFhd
POST /api/v1/connect/sessions now accepts the same payload as the public one
GET /api/v1/meta expose user UUID
~~Not sure what the use of id but it's handy to have static-random id for the endUser profile without exposing our auto-incremented number.~~ unused in the end

🧪 Tests

Go to UI > Connections > Create
Also go to Integrations > any > Add connection

bodinsamuel · 2024-11-27T14:27:54Z

packages/webapp/src/pages/Connection/Create.tsx

The diff is incorrect, it's a brand new file

bodinsamuel · 2024-11-27T14:28:53Z

tests/setupFiles.ts

-const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{1,6}Z$/;
-const dateRegexWithTZ = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{1,6}\+\d{2}:\d{2}$/;
+const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(.\d{1,6})?Z$/;
+const dateRegexWithTZ = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(.\d{1,6})?\+\d{2}:\d{2}$/;


Had an issue with integrations tests, if you are very unlucky and the test is on the clock there will be no microsecond

linear · 2024-11-27T14:44:35Z

NAN-2188 Test connection UI

nalanj · 2024-11-27T18:26:38Z

This is a textual nitpick, but would "All configured integrations" make more sense here?

nalanj · 2024-11-27T18:29:02Z

And another textual nitpick?

"Add to your app directly" feels like it skips on what you're adding. Would something like "Connect from your app" be clearer?

nalanj · 2024-11-27T18:30:06Z

😄 Just ran though the UI (haven't read the code yet) but wanted to say that I really like this change!

nalanj

👍

nalanj · 2024-11-27T18:31:59Z

packages/server/lib/controllers/v1/connect/sessions/postConnectSessions.ts

@@ -1,12 +1,14 @@
 import { asyncWrapper } from '../../../../utils/asyncWrapper.js';
 import { requireEmptyQuery, zodErrorToHTTP } from '@nangohq/utils';
 import type { PostConnectSessions, PostInternalConnectSessions } from '@nangohq/types';
-import { postConnectSessions } from '../../../connect/postSessions.js';
+import { bodySchema as originalBodySchema, postConnectSessions } from '../../../connect/postSessions.js';


I'm not completely sure, but would postConnectBodySchema be clearer here?

TBonnin

looks good from a code point of view.
UX wise I find 2 things a bit confusing:

The Integration ID and dropdown is the first thing I see but even for me who know what it is about it is not clear why I am asked about it first and what it means. Since it is kind of optional I would put it below the create test connection with an explanation about what it is. Same thing about the test user info
I understand it is here for educational purpose but in this context it doesn't make much sense since me, the user, is the same person selecting the integration constraint and actually logging in. I think it is more confusing than anything and I would even vote in favor of not showing this option.
on the right part, the 3 components (docs button, outer Connect/Custom UI and the bulb/tag) all look like different clickable buttons but they all lead to the same url, the docs. I find that confusing

bodinsamuel · 2024-11-28T10:10:08Z

Putting in draft until we improve the UX

bodinsamuel · 2024-12-02T12:23:56Z

We have revamped the revamp: removed the end user profile (it's not entirely disabled just in case we change our mind again), clarify docs cards, improved the wording

TBonnin · 2024-12-02T17:11:03Z

We have revamped the revamp: removed the end user profile (it's not entirely disabled just in case we change our mind again), clarify docs cards, improved the wording

It is definitely better.
The info block is quite big though. Maybe we could have a simple Test connection user: user info is automatically populated with your Nango account details. and have the rest as a (?) button hover.

Also I feel like the dropdown and the authorize button should be next to each other or at least close. Right now drop down and authorize button are quite far away even though they are related while the 2 authorize buttons are close to each other even though they are not (OR situation). What about something like to mark the difference between new and old flow:

Create a test connection
Pick an integration
|------------------------|  |-----------| 
|      dropdown          |  | Authorize |
|------------------------|  |-----------|

(i) For test connections, the user info is automatically populated with your Nango account details. (?)

OR DEPRECATED FLOW
|-----------| 
| Authorize |
|-----------|

## Context Extracted from #3072 - Clarify our use of user's session `req.user` is painful because session can be out of date, and it's hard to add/remove fields from session. It's easier to always use `res.locals[user] that's always fresh. - Pass UUID, will be used later - Fix regex for integration tests

bodinsamuel · 2024-12-02T21:37:57Z

@bastienbeurier for the UX feedback

bastienbeurier · 2024-12-02T21:52:04Z

We have revamped the revamp: removed the end user profile (it's not entirely disabled just in case we change our mind again), clarify docs cards, improved the wording

It is definitely better. The info block is quite big though. Maybe we could have a simple Test connection user: user info is automatically populated with your Nango account details. and have the rest as a (?) button hover.

Also I feel like the dropdown and the authorize button should be next to each other or at least close. Right now drop down and authorize button are quite far away even though they are related while the 2 authorize buttons are close to each other even though they are not (OR situation). What about something like to mark the difference between new and old flow:
Create a test connection
Pick an integration
|------------------------|  |-----------| 
|      dropdown          |  | Authorize |
|------------------------|  |-----------|

(i) For test connections, the user info is automatically populated with your Nango account details. (?)

OR DEPRECATED FLOW
|-----------| 
| Authorize |
|-----------|

Haha, @TBonnin, you're going to have to be involved in the design phase.

TBonnin · 2024-12-03T02:04:52Z

Haha, @TBonnin, you're going to have to be involved in the design phase.

No please no! 🤣

bastienbeurier · 2024-12-03T12:26:03Z

Haha, @TBonnin, you're going to have to be involved in the design phase.

No please no! 🤣

@TBonnin @bodinsamuel the latest design proposal: https://www.figma.com/proto/hKL3cmI9vBwDoZyRahQnsq/Connections-Tab?node-id=4702-27943&node-type=instance&viewport=-3125%2C312%2C0.41&t=b11nWvdOcBhhizyh-0&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=4702%3A27943&show-proto-sidebar=1

TBonnin

🚢

feat(ui): new create connection page

7e6001b

bodinsamuel self-assigned this Nov 27, 2024

bodinsamuel added 2 commits November 27, 2024 15:23

self review

fe1f07a

Merge branch 'master' into sam/24_11_17/feat/connection-create-v2

f9a6d73

bodinsamuel commented Nov 27, 2024

View reviewed changes

bodinsamuel requested a review from a team November 27, 2024 14:44

last minute change

c318f64

nalanj approved these changes Nov 27, 2024

View reviewed changes

TBonnin reviewed Nov 27, 2024

View reviewed changes

Merge branch 'master' into sam/24_11_17/feat/connection-create-v2

9530d0b

bodinsamuel marked this pull request as draft November 28, 2024 10:10

bodinsamuel mentioned this pull request Nov 28, 2024

fix(api): improve user model usage #3076

Merged

bodinsamuel added 4 commits December 2, 2024 11:10

Merge branch 'master' into sam/24_11_17/feat/connection-create-v2

e463796

revamp

eb73219

use simpler user id

83a302e

Merge branch 'master' into sam/24_11_17/feat/connection-create-v2

e98e98b

bodinsamuel marked this pull request as ready for review December 2, 2024 12:23

bodinsamuel requested review from TBonnin and nalanj December 2, 2024 12:23

bodinsamuel added 2 commits December 3, 2024 15:35

Merge branch 'master' into sam/24_11_17/feat/connection-create-v2

ff7f4f2

revamp of the revamp of the revamp

6888eb4

TBonnin reviewed Dec 3, 2024

View reviewed changes

TBonnin approved these changes Dec 3, 2024

View reviewed changes

bodinsamuel added 2 commits December 4, 2024 10:19

last one

2c4847e

Merge branch 'master' into sam/24_11_17/feat/connection-create-v2

7c4f0e6

bodinsamuel merged commit 7b0a7c2 into master Dec 4, 2024
21 checks passed

bodinsamuel deleted the sam/24_11_17/feat/connection-create-v2 branch December 4, 2024 09:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): new create connection page #3072

feat(ui): new create connection page #3072

bodinsamuel commented Nov 27, 2024 •

edited

Loading

bodinsamuel Nov 27, 2024

bodinsamuel Nov 27, 2024

linear bot commented Nov 27, 2024

nalanj commented Nov 27, 2024

nalanj commented Nov 27, 2024

nalanj commented Nov 27, 2024

nalanj left a comment

nalanj Nov 27, 2024

TBonnin left a comment

bodinsamuel commented Nov 28, 2024

bodinsamuel commented Dec 2, 2024

TBonnin commented Dec 2, 2024 •

edited

Loading

bodinsamuel commented Dec 2, 2024

bastienbeurier commented Dec 2, 2024

TBonnin commented Dec 3, 2024

bastienbeurier commented Dec 3, 2024

TBonnin left a comment

feat(ui): new create connection page #3072

feat(ui): new create connection page #3072

Conversation

bodinsamuel commented Nov 27, 2024 • edited Loading

😘 Changes

🧪 Tests

bodinsamuel Nov 27, 2024

Choose a reason for hiding this comment

bodinsamuel Nov 27, 2024

Choose a reason for hiding this comment

linear bot commented Nov 27, 2024

nalanj commented Nov 27, 2024

nalanj commented Nov 27, 2024

nalanj commented Nov 27, 2024

nalanj left a comment

Choose a reason for hiding this comment

nalanj Nov 27, 2024

Choose a reason for hiding this comment

TBonnin left a comment

Choose a reason for hiding this comment

bodinsamuel commented Nov 28, 2024

bodinsamuel commented Dec 2, 2024

TBonnin commented Dec 2, 2024 • edited Loading

bodinsamuel commented Dec 2, 2024

bastienbeurier commented Dec 2, 2024

TBonnin commented Dec 3, 2024

bastienbeurier commented Dec 3, 2024

TBonnin left a comment

Choose a reason for hiding this comment

bodinsamuel commented Nov 27, 2024 •

edited

Loading

TBonnin commented Dec 2, 2024 •

edited

Loading