Skip to content

Commit 80365e3

Browse files
learningbizzlearningbizz
committed
Polish onboarding
Fixed scrolling issues, generated template for loading screen and onboarding step, and more minor fixes
1 parent 08ca466 commit 80365e3

File tree

10 files changed

+376
-168
lines changed

10 files changed

+376
-168
lines changed

‎apps/web/src/app/(onboarding)/onboarding/_components/OnboardingClient/configureTriggers/index.tsx‎

Lines changed: 91 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,70 @@ import {
1414
DocumentTriggerType,
1515
} from '@latitude-data/constants'
1616
import { ConfiguredTriggers } from './_components/ConfiguredTriggers'
17+
import { IsLoadingOnboardingItem } from '../../../lib/IsLoadingOnboardingItem'
1718

18-
export function ConfigureTriggersStep({
19+
export function ConfigureTriggersIconAndTitle() {
20+
const project = useCurrentProject()
21+
const commit = useCurrentCommit()
22+
23+
const { data: triggers } = useDocumentTriggers({
24+
projectId: project.project.id,
25+
commitUuid: commit.commit.uuid,
26+
})
27+
28+
const sortedIntegrationTriggersByPendingFirst = useMemo(() => {
29+
return triggers
30+
.filter(
31+
(trigger) => trigger.triggerType === DocumentTriggerType.Integration,
32+
)
33+
.sort((a) => {
34+
return a.triggerStatus === DocumentTriggerStatus.Pending ? -1 : 1
35+
})
36+
}, [triggers])
37+
38+
const allUnconfiguredTriggers = useMemo(() => {
39+
return sortedIntegrationTriggersByPendingFirst.filter(
40+
(trigger) => trigger.triggerStatus === DocumentTriggerStatus.Pending,
41+
)
42+
}, [sortedIntegrationTriggersByPendingFirst])
43+
44+
const allTriggersConfigured = useMemo(() => {
45+
return allUnconfiguredTriggers.length === 0
46+
}, [allUnconfiguredTriggers])
47+
48+
return (
49+
<Fragment>
50+
<div className='p-2 border-2 rounded-lg'>
51+
<Icon className='' name='wrench' size='medium' />
52+
</div>
53+
{!allTriggersConfigured ? (
54+
<>
55+
<Text.H2M color='foreground' noWrap>
56+
Configure{' '}
57+
<Text.H2M color='foregroundMuted'>
58+
{allUnconfiguredTriggers.length}
59+
</Text.H2M>{' '}
60+
agent triggers
61+
</Text.H2M>
62+
<Text.H5 color='foregroundMuted'>
63+
Some triggers may require additional configuration
64+
</Text.H5>
65+
</>
66+
) : (
67+
<>
68+
<Text.H2M color='foreground' noWrap>
69+
All triggers configured!
70+
</Text.H2M>
71+
<Text.H5 color='foregroundMuted'>
72+
You can proceed to the next step
73+
</Text.H5>
74+
</>
75+
)}
76+
</Fragment>
77+
)
78+
}
79+
80+
export function ConfigureTriggersContent({
1981
moveNextOnboardingStep,
2082
}: {
2183
moveNextOnboardingStep: () => void
@@ -24,11 +86,12 @@ export function ConfigureTriggersStep({
2486
moveNextOnboardingStep()
2587
}, [moveNextOnboardingStep])
2688

27-
const { data: integrations } = useIntegrations()
89+
const { data: integrations, isLoading: isLoadingIntegrations } =
90+
useIntegrations()
2891
const project = useCurrentProject()
2992
const commit = useCurrentCommit()
3093

31-
const { data: triggers } = useDocumentTriggers({
94+
const { data: triggers, isLoading: isLoadingTriggers } = useDocumentTriggers({
3295
projectId: project.project.id,
3396
commitUuid: commit.commit.uuid,
3497
})
@@ -54,61 +117,40 @@ export function ConfigureTriggersStep({
54117
}, [allUnconfiguredTriggers])
55118

56119
return (
57-
<div className='flex flex-col h-full items-center p-32 gap-10'>
58-
<div className='flex flex-col items-center gap-2'>
59-
<div className='p-2 border-2 rounded-lg'>
60-
<Icon className='' name='wrench' size='medium' />
61-
</div>
62-
{!allTriggersConfigured ? (
63-
<>
64-
<Text.H2M color='foreground' noWrap>
65-
Configure{' '}
66-
<Text.H2M color='foregroundMuted'>
67-
{allUnconfiguredTriggers.length}
68-
</Text.H2M>{' '}
69-
agent triggers
70-
</Text.H2M>
71-
<Text.H5 color='foregroundMuted'>
72-
Some triggers may require additional configuration
73-
</Text.H5>
74-
</>
120+
<Fragment>
121+
<div className='flex flex-col items-center gap-2 border-dashed border-2 rounded-xl p-2 w-full max-w-[600px]'>
122+
{isLoadingTriggers || isLoadingIntegrations ? (
123+
<IsLoadingOnboardingItem
124+
highlightedText='Triggers'
125+
nonHighlightedText='will appear in a moment...'
126+
/>
75127
) : (
76-
<>
77-
<Text.H2M color='foreground' noWrap>
78-
All triggers configured!
79-
</Text.H2M>
80-
<Text.H5 color='foregroundMuted'>
81-
You can proceed to the next step
82-
</Text.H5>
83-
</>
128+
sortedIntegrationTriggersByPendingFirst.map((trigger) => (
129+
<Fragment key={trigger.uuid}>
130+
{trigger.triggerStatus === DocumentTriggerStatus.Pending && (
131+
<UnconfiguredTriggers
132+
trigger={trigger}
133+
integrations={integrations}
134+
/>
135+
)}
136+
{trigger.triggerStatus === DocumentTriggerStatus.Deployed && (
137+
<ConfiguredTriggers
138+
trigger={trigger}
139+
integrations={integrations}
140+
/>
141+
)}
142+
</Fragment>
143+
))
84144
)}
85145
</div>
86-
<div className='flex flex-col items-center gap-2 border-dashed border-2 rounded-xl p-2 w-full max-w-[600px]'>
87-
{sortedIntegrationTriggersByPendingFirst.map((trigger) => (
88-
<Fragment key={trigger.uuid}>
89-
{trigger.triggerStatus === DocumentTriggerStatus.Pending && (
90-
<UnconfiguredTriggers
91-
trigger={trigger}
92-
integrations={integrations}
93-
/>
94-
)}
95-
{trigger.triggerStatus === DocumentTriggerStatus.Deployed && (
96-
<ConfiguredTriggers
97-
trigger={trigger}
98-
integrations={integrations}
99-
/>
100-
)}
101-
</Fragment>
102-
))}
103-
</div>
104146
<Button
105147
fancy
106148
onClick={handleNext}
107149
iconProps={{ name: 'chevronRight', placement: 'right' }}
108150
disabled={!allTriggersConfigured}
109151
>
110152
Next
111-
</Button>
112-
</div>
153+
</Button>{' '}
154+
</Fragment>
113155
)
114156
}

‎apps/web/src/app/(onboarding)/onboarding/_components/OnboardingClient/index.tsx‎

Lines changed: 53 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,19 @@
11
'use client'
22

33
import NocodersNavbar from '../Navbar/NocodersNavbar'
4-
import { SetupIntegrationsStep } from './setupIntegrations'
4+
import {
5+
SetupIntegrationsIconAndTitle,
6+
SetupIntegrationsContent,
7+
} from './setupIntegrations'
58
import useWorkspaceOnboarding from '$/stores/workspaceOnboarding'
69
import { OnboardingStepKey } from '@latitude-data/constants/onboardingSteps'
7-
import { ConfigureTriggersStep } from './configureTriggers'
8-
import { TriggerAgentStep } from './triggerAgent'
9-
import { useCallback, useRef, useState } from 'react'
10-
import { useAutoScroll } from '@latitude-data/web-ui/hooks/useAutoScroll'
11-
import { RunAgentStep } from './runAgent'
10+
import {
11+
ConfigureTriggersIconAndTitle,
12+
ConfigureTriggersContent,
13+
} from './configureTriggers'
14+
import { TriggerAgentIconAndTitle, TriggerAgentContent } from './triggerAgent'
15+
import { useCallback, useState } from 'react'
16+
import { RunAgentIconAndTitle, RunAgentContent } from './runAgent'
1217
import {
1318
ActiveTrigger,
1419
FAKE_DOCUMENT,
@@ -17,6 +22,7 @@ import { useRunDocument } from '$/app/(private)/projects/[projectId]/versions/[c
1722
import { useCurrentCommit } from '@latitude-data/web-ui/providers'
1823
import { usePlaygroundChat } from '$/hooks/playgroundChat/usePlaygroundChat'
1924
import { DocumentVersion } from '@latitude-data/core/schema/types'
25+
import { OnboardingStep } from '$/app/(onboarding)/onboarding/lib/OnboardingStep'
2026

2127
export function OnboardingClient() {
2228
const {
@@ -28,34 +34,37 @@ export function OnboardingClient() {
2834

2935
const currentStep = currentOnboarding?.currentStep
3036

31-
const containerRef = useRef<HTMLDivElement | null>(null)
32-
33-
useAutoScroll(containerRef, { startAtBottom: true })
34-
3537
const [activeTrigger, setActiveTrigger] = useState<ActiveTrigger>({
3638
document: FAKE_DOCUMENT,
3739
parameters: {},
3840
})
3941

4042
return (
41-
<div className='flex flex-row flex-1 items-start custom-scrollbar'>
43+
<div className='flex flex-row flex-1 items-start'>
4244
<NocodersNavbar
4345
executeCompleteOnboarding={executeCompleteOnboarding}
4446
currentStep={currentStep}
4547
isLoadingOnboarding={isLoadingOnboarding}
4648
/>
47-
<div
48-
ref={containerRef}
49-
className='flex-row flex-1 h-full overflow-y-auto'
50-
>
49+
<div className='flex-row flex-1 h-full'>
5150
{currentStep === OnboardingStepKey.SetupIntegrations && (
52-
<SetupIntegrationsStep
53-
moveNextOnboardingStep={moveNextOnboardingStep}
51+
<OnboardingStep
52+
iconAndTitle={<SetupIntegrationsIconAndTitle />}
53+
content={
54+
<SetupIntegrationsContent
55+
moveNextOnboardingStep={moveNextOnboardingStep}
56+
/>
57+
}
5458
/>
5559
)}
5660
{currentStep === OnboardingStepKey.ConfigureTriggers && (
57-
<ConfigureTriggersStep
58-
moveNextOnboardingStep={moveNextOnboardingStep}
61+
<OnboardingStep
62+
iconAndTitle={<ConfigureTriggersIconAndTitle />}
63+
content={
64+
<ConfigureTriggersContent
65+
moveNextOnboardingStep={moveNextOnboardingStep}
66+
/>
67+
}
5968
/>
6069
)}
6170
{(currentStep === OnboardingStepKey.TriggerAgent ||
@@ -88,7 +97,7 @@ function PlaygroundSteps({
8897
}) {
8998
const commit = useCurrentCommit()
9099

91-
const { runDocument, addMessages } = useRunDocument({
100+
const { runDocument, addMessages, hasActiveStream } = useRunDocument({
92101
commit: commit.commit,
93102
})
94103

@@ -124,17 +133,33 @@ function PlaygroundSteps({
124133
return (
125134
<>
126135
{currentStep === OnboardingStepKey.TriggerAgent && (
127-
<TriggerAgentStep
128-
moveNextOnboardingStep={moveNextOnboardingStep}
129-
setActiveTrigger={setActiveTrigger}
130-
playground={playground}
136+
<OnboardingStep
137+
iconAndTitle={<TriggerAgentIconAndTitle />}
138+
content={
139+
<TriggerAgentContent
140+
moveNextOnboardingStep={moveNextOnboardingStep}
141+
setActiveTrigger={setActiveTrigger}
142+
playground={playground}
143+
/>
144+
}
131145
/>
132146
)}
133147
{currentStep === OnboardingStepKey.RunAgent && (
134-
<RunAgentStep
135-
moveNextOnboardingStep={executeCompleteOnboarding}
136-
activeTrigger={activeTrigger}
137-
playground={playground}
148+
<OnboardingStep
149+
iconAndTitle={
150+
<RunAgentIconAndTitle
151+
playground={playground}
152+
hasActiveStream={hasActiveStream}
153+
/>
154+
}
155+
content={
156+
<RunAgentContent
157+
moveNextOnboardingStep={executeCompleteOnboarding}
158+
activeTrigger={activeTrigger}
159+
playground={playground}
160+
hasActiveStream={hasActiveStream}
161+
/>
162+
}
138163
/>
139164
)}
140165
</>

0 commit comments

Comments
 (0)