Skip to content

chore(onboarding): Inbox onboarding UI improvements #1277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Twixes wants to merge 1 commit into
base: main
Choose a base branch
from
+11 −16
Open

chore(onboarding): Inbox onboarding UI improvements #1277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 6 additions & 11 deletions apps/code/src/renderer/features/inbox/components/DataSourceSetup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ function GitHubSetup({ onComplete, onCancel }: SetupFormProps) {

if (!githubIntegration) {
return (
<SetupFormContainer title="Connect GitHub" onCancel={onCancel}>
<SetupFormContainer title="Connect GitHub">
<Text size="2" style={{ color: "var(--gray-11)" }}>
No GitHub integration found. Please connect GitHub during onboarding
first.
Expand All @@ -95,7 +95,7 @@ function GitHubSetup({ onComplete, onCancel }: SetupFormProps) {
}

return (
<SetupFormContainer title="Connect GitHub" onCancel={onCancel}>
<SetupFormContainer title="Connect GitHub">
<Flex direction="column" gap="3">
<GitHubRepoPicker
value={repo}
Expand All @@ -122,7 +122,7 @@ function GitHubSetup({ onComplete, onCancel }: SetupFormProps) {
const POLL_INTERVAL_MS = 3_000;
const POLL_TIMEOUT_MS = 300_000; // 5 minutes

function LinearSetup({ onComplete, onCancel }: SetupFormProps) {
function LinearSetup({ onComplete }: SetupFormProps) {
const cloudRegion = useAuthStore((s) => s.cloudRegion);
const projectId = useAuthStore((s) => s.projectId);
const client = useAuthStore((s) => s.client);
Expand Down Expand Up @@ -210,7 +210,7 @@ function LinearSetup({ onComplete, onCancel }: SetupFormProps) {
}, [projectId, client, onComplete]);

return (
<SetupFormContainer title="Connect Linear" onCancel={onCancel}>
<SetupFormContainer title="Connect Linear">
<Flex direction="column" gap="3">
<Button
size="2"
Expand All @@ -222,7 +222,7 @@ function LinearSetup({ onComplete, onCancel }: SetupFormProps) {
? "Linear connected"
: loading
? "Waiting for authorization..."
: "Connect Linear"}
: "Log into Linear to continue"}
</Button>

{pollError && (
Expand Down Expand Up @@ -285,7 +285,7 @@ function ZendeskSetup({ onComplete, onCancel }: SetupFormProps) {
const canSubmit = subdomain.trim() && apiKey.trim() && email.trim();

return (
<SetupFormContainer title="Connect Zendesk" onCancel={onCancel}>
<SetupFormContainer title="Connect Zendesk">
<Flex direction="column" gap="3">
<TextField.Root
placeholder="Subdomain (e.g. mycompany)"
Expand Down Expand Up @@ -324,11 +324,9 @@ function ZendeskSetup({ onComplete, onCancel }: SetupFormProps) {

function SetupFormContainer({
title,
onCancel,
children,
}: {
title: string;
onCancel: () => void;
children: React.ReactNode;
}) {
return (
Expand All @@ -344,9 +342,6 @@ function SetupFormContainer({
<Text size="2" weight="medium" style={{ color: "var(--gray-12)" }}>
{title}
</Text>
<Button size="1" variant="ghost" onClick={onCancel}>
Cancel
</Button>
</Flex>
{children}
</Flex>
Expand Down
10 changes: 5 additions & 5 deletions apps/code/src/renderer/features/inbox/components/SignalSourceToggles.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ export function SignalSourceToggles({
<SignalSourceToggleCard
icon={<VideoIcon size={20} />}
label="Session replay"
description="Let PostHog watch session recordings for you, and identify problem patterns."
description="Let PostHog watch session recordings for you, and spot UX issues."
checked={value.session_replay}
onCheckedChange={(checked) =>
onChange({ ...value, session_replay: checked })
Expand All @@ -127,7 +127,7 @@ export function SignalSourceToggles({
<SignalSourceToggleCard
icon={<BrainIcon size={20} />}
label="LLM analytics"
description="Let PostHog evaluate live LLM traces for you, and identify problem patterns."
description="Let PostHog evaluate live LLM traces for you, and flag anomalies."
checked={value.llm_analytics}
onCheckedChange={(checked) =>
onChange({ ...value, llm_analytics: checked })
Expand All @@ -137,7 +137,7 @@ export function SignalSourceToggles({
<SignalSourceToggleCard
icon={<GithubLogoIcon size={20} />}
label="GitHub"
description="Let PostHog read GitHub issues for you, and surface action items."
description="Let PostHog read GitHub issues for you, and highlight what needs attention."
checked={value.github}
onCheckedChange={(checked) => onChange({ ...value, github: checked })}
disabled={disabled}
Expand All @@ -148,7 +148,7 @@ export function SignalSourceToggles({
<SignalSourceToggleCard
icon={<KanbanIcon size={20} />}
label="Linear"
description="Let PostHog read Linear issues for you, and surface action items."
description="Let PostHog read Linear issues for you, and pick out priorities."
checked={value.linear}
onCheckedChange={(checked) => onChange({ ...value, linear: checked })}
disabled={disabled}
Expand All @@ -159,7 +159,7 @@ export function SignalSourceToggles({
<SignalSourceToggleCard
icon={<TicketIcon size={20} />}
label="Zendesk"
description="Let PostHog investigate support tickets for you, and surface action items."
description="Let PostHog investigate support tickets for you, and find follow-ups."
checked={value.zendesk}
onCheckedChange={(checked) => onChange({ ...value, zendesk: checked })}
disabled={disabled}
Expand Down
Loading