Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

New onboarding question #1404

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

Merged
matt-aitken merged 20 commits into from
Oct 17, 2024
Merged

New onboarding question #1404

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
feede85
Updated “Twitter” to be “X (Twitter)”
samejr Oct 11, 2024
008a880
added Textarea to storybook
samejr Oct 11, 2024
6a85d58
Updated textarea styling to match input field
samejr Oct 11, 2024
30d0178
WIP adding new text field to org creation page
samejr Oct 11, 2024
7ce56fa
Added description to field
samejr Oct 12, 2024
23ceefc
Submit feedback to Plain when an org signs up
samejr Oct 12, 2024
96578bb
Formatting improvement
samejr Oct 12, 2024
575dffb
Merge remote-tracking branch 'origin/main' into onboarding-question
samejr Oct 12, 2024
fb0397a
type improvement
samejr Oct 14, 2024
1cb90bb
removed userId
samejr Oct 14, 2024
daafd5e
Moved submitting to Plain into its own file
samejr Oct 14, 2024
c791e50
Change orgName with name
samejr Oct 15, 2024
34c6e9a
use sendToPlain function for the help & feedback email form
samejr Oct 15, 2024
ec45694
use name not orgName
samejr Oct 15, 2024
071954f
import cleanup
samejr Oct 15, 2024
36bca68
Downgrading plan form uses sendToPlain
samejr Oct 15, 2024
7107119
Get the userId from requireUser only
samejr Oct 15, 2024
3898541
Added whitespace-pre-wrap to the message property on the run page
samejr Oct 17, 2024
deea7c9
use requireUserId
samejr Oct 17, 2024
43c39b1
Removed old Plain submit code
samejr Oct 17, 2024
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
6 changes: 3 additions & 3 deletions 6 apps/webapp/app/components/Feedback.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { conform, useForm } from "@conform-to/react";
import { parse } from "@conform-to/zod";
import { EnvelopeIcon, LightBulbIcon } from "@heroicons/react/24/solid";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import { EnvelopeIcon } from "@heroicons/react/24/solid";
import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react";
import { type ReactNode, useState, useEffect } from "react";
import { type ReactNode, useEffect, useState } from "react";
import { type FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback";
import { Button } from "./primitives/Buttons";
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "./primitives/Dialog";
Expand All @@ -16,7 +17,6 @@ import { Label } from "./primitives/Label";
import { Paragraph } from "./primitives/Paragraph";
import { Select, SelectItem } from "./primitives/Select";
import { TextArea } from "./primitives/TextArea";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import { TextLink } from "./primitives/TextLink";

type FeedbackProps = {
Expand Down
2 changes: 1 addition & 1 deletion 2 apps/webapp/app/components/primitives/TextArea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export function TextArea({ className, rows, ...props }: TextAreaProps) {
{...props}
rows={rows ?? 6}
className={cn(
"placeholder:text-muted-foreground w-full rounded-md border border-tertiary bg-tertiary px-3 text-sm text-text-bright transition focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 focus:border-transparent focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50",
"placeholder:text-muted-foreground w-full rounded border border-charcoal-800 bg-charcoal-750 px-3 text-sm text-text-bright transition focus-custom focus-custom file:border-0 file:bg-transparent file:text-base file:font-medium hover:border-charcoal-600 hover:bg-charcoal-650 disabled:cursor-not-allowed disabled:opacity-50",
className
)}
/>
Expand Down
120 changes: 82 additions & 38 deletions 120 apps/webapp/app/routes/_app.orgs.new/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { RadioGroup } from "@radix-ui/react-radio-group";
import type { ActionFunction, LoaderFunctionArgs } from "@remix-run/node";
import { json, redirect } from "@remix-run/node";
import { Form, useActionData, useNavigation } from "@remix-run/react";
import { uiComponent } from "@team-plain/typescript-sdk";
import { typedjson, useTypedLoaderData } from "remix-typedjson";
import { z } from "zod";
import { MainCenteredContainer } from "~/components/layout/AppLayout";
Expand All @@ -17,30 +18,33 @@ import { Input } from "~/components/primitives/Input";
import { InputGroup } from "~/components/primitives/InputGroup";
import { Label } from "~/components/primitives/Label";
import { RadioGroupItem } from "~/components/primitives/RadioButton";
import { TextArea } from "~/components/primitives/TextArea";
import { useFeatures } from "~/hooks/useFeatures";
import { createOrganization } from "~/models/organization.server";
import { NewOrganizationPresenter } from "~/presenters/NewOrganizationPresenter.server";
import { requireUserId } from "~/services/session.server";
import { logger } from "~/services/logger.server";
import { requireUser, requireUserId } from "~/services/session.server";
import { organizationPath, rootPath } from "~/utils/pathBuilder";
import { sendToPlain } from "~/utils/plain.server";

const schema = z.object({
orgName: z.string().min(3).max(50),
companySize: z.string().optional(),
whyUseUs: z.string().optional(),
Comment thread
matt-aitken marked this conversation as resolved.
});

export const loader = async ({ request }: LoaderFunctionArgs) => {
const userId = await requireUserId(request);
const presenter = new NewOrganizationPresenter();
const { hasOrganizations } = await presenter.call({ userId });
const { hasOrganizations } = await presenter.call({ userId: userId });

return typedjson({
hasOrganizations,
});
};

export const action: ActionFunction = async ({ request }) => {
const userId = await requireUserId(request);

const user = await requireUser(request);
const formData = await request.formData();
const submission = parse(formData, { schema });

Expand All @@ -51,10 +55,41 @@ export const action: ActionFunction = async ({ request }) => {
try {
const organization = await createOrganization({
title: submission.value.orgName,
userId,
userId: user.id,
companySize: submission.value.companySize ?? null,
});

const whyUseUs = formData.get("whyUseUs");

if (whyUseUs) {
try {
await sendToPlain({
userId: user.id,
email: user.email,
name: user.name ?? user.displayName ?? user.email,
title: "New org feedback",
components: [
uiComponent.text({
text: `${submission.value.orgName} just created a new organization.`,
}),
uiComponent.divider({ spacingSize: "M" }),
uiComponent.text({
size: "L",
color: "NORMAL",
text: "What problem are you trying to solve?",
}),
uiComponent.text({
size: "L",
color: "NORMAL",
text: whyUseUs.toString(),
}),
],
});
} catch (error) {
logger.error("Error sending data to Plain when creating an org:", { error });
}
}

return redirect(organizationPath(organization));
} catch (error: any) {
return json({ errors: { body: error.message } }, { status: 400 });
Expand Down Expand Up @@ -97,39 +132,48 @@ export default function NewOrganizationPage() {
<FormError id={orgName.errorId}>{orgName.error}</FormError>
</InputGroup>
{isManagedCloud && (
<InputGroup>
<Label htmlFor={"companySize"}>Number of employees</Label>
<RadioGroup name="companySize" className="flex items-center justify-between gap-2">
<RadioGroupItem
id="employees-1-5"
label="1-5"
value={"1-5"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-6-49"
label="6-49"
value={"6-49"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-50-99"
label="50-99"
value={"50-99"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-100+"
label="100+"
value={"100+"}
variant="button/small"
className="grow"
/>
</RadioGroup>
</InputGroup>
<>
<InputGroup>
<Label htmlFor={"companySize"}>Number of employees</Label>
<RadioGroup name="companySize" className="flex items-center justify-between gap-2">
<RadioGroupItem
id="employees-1-5"
label="1-5"
value={"1-5"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-6-49"
label="6-49"
value={"6-49"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-50-99"
label="50-99"
value={"50-99"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-100+"
label="100+"
value={"100+"}
variant="button/small"
className="grow"
/>
</RadioGroup>
</InputGroup>
Comment thread
matt-aitken marked this conversation as resolved.
Comment thread
matt-aitken marked this conversation as resolved.
<InputGroup>
<Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
<TextArea name="whyUseUs" rows={4} spellCheck={false} />
<Hint>
Your answer will help us understand your use case and provide better support.
</Hint>
</InputGroup>
Comment thread
matt-aitken marked this conversation as resolved.
</>
Comment on lines +135 to +176

@coderabbitai coderabbitai Bot Oct 17, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

LGTM with suggestion: Form updates for new feedback field

The changes to the form look good:

  • The new TextArea component for the whyUseUs field is correctly implemented.
  • The layout structure using a fragment to group the companySize and whyUseUs inputs is appropriate.
  • The hint text provides clear guidance to the user.

However, there's one improvement that can be made:

Add error handling for the whyUseUs field to be consistent with other form fields. Apply this change:

  <InputGroup>
    <Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
-   <TextArea name="whyUseUs" rows={4} spellCheck={false} />
+   <TextArea {...conform.textarea(whyUseUs)} rows={4} spellCheck={false} />
    <Hint>
      Your answer will help us understand your use case and provide better support.
    </Hint>
+   <FormError id={whyUseUs.errorId}>{whyUseUs.error}</FormError>
  </InputGroup>

Also, update the form hook to include whyUseUs:

- const [form, { orgName }] = useForm({
+ const [form, { orgName, whyUseUs }] = useForm({
  // ... (rest of the code remains the same)
});

These changes will ensure that any validation errors for the whyUseUs field are properly displayed to the user, maintaining consistency with other form fields.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<>
<InputGroup>
<Label htmlFor={"companySize"}>Number of employees</Label>
<RadioGroup name="companySize" className="flex items-center justify-between gap-2">
<RadioGroupItem
id="employees-1-5"
label="1-5"
value={"1-5"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-6-49"
label="6-49"
value={"6-49"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-50-99"
label="50-99"
value={"50-99"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-100+"
label="100+"
value={"100+"}
variant="button/small"
className="grow"
/>
</RadioGroup>
</InputGroup>
<InputGroup>
<Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
<TextArea name="whyUseUs" rows={4} spellCheck={false} />
<Hint>
Your answer will help us understand your use case and provide better support.
</Hint>
</InputGroup>
</>
<>
<InputGroup>
<Label htmlFor={"companySize"}>Number of employees</Label>
<RadioGroup name="companySize" className="flex items-center justify-between gap-2">
<RadioGroupItem
id="employees-1-5"
label="1-5"
value={"1-5"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-6-49"
label="6-49"
value={"6-49"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-50-99"
label="50-99"
value={"50-99"}
variant="button/small"
className="grow"
/>
<RadioGroupItem
id="employees-100+"
label="100+"
value={"100+"}
variant="button/small"
className="grow"
/>
</RadioGroup>
</InputGroup>
<InputGroup>
<Label htmlFor={"whyUseUs"}>What problem are you trying to solve?</Label>
<TextArea {...conform.textarea(whyUseUs)} rows={4} spellCheck={false} />
<Hint>
Your answer will help us understand your use case and provide better support.
</Hint>
<FormError id={whyUseUs.errorId}>{whyUseUs.error}</FormError>
</InputGroup>
</>

)}

<FormButtons
Expand Down
2 changes: 1 addition & 1 deletion 2 apps/webapp/app/routes/confirm-basic-details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@ export default function Page() {
<Label htmlFor={confirmEmail.id}>How did you hear about us?</Label>
<Input
{...conform.input(referralSource, { type: "text" })}
placeholder="Google, Twitter…?"
placeholder="Google, X (Twitter)…?"
icon="heart"
spellCheck={false}
/>
Expand Down
81 changes: 9 additions & 72 deletions 81 apps/webapp/app/routes/resources.feedback.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { z } from "zod";
import { env } from "~/env.server";
import { redirectWithSuccessMessage } from "~/models/message.server";
import { requireUser } from "~/services/session.server";
import { sendToPlain } from "~/utils/plain.server";

let client: PlainClient | undefined;

Expand All @@ -32,7 +33,7 @@ const feedbackType = z.union(
export const schema = z.object({
path: z.string(),
feedbackType,
message: z.string().min(1, "Must be at least 1 character"),
message: z.string().min(10, "Must be at least 10 characters"),
});

export async function action({ request }: ActionFunctionArgs) {
Expand All @@ -45,60 +46,12 @@ export async function action({ request }: ActionFunctionArgs) {
return json(submission);
}

const title = feedbackTypeLabel[submission.value.feedbackType as FeedbackType];
try {
if (!env.PLAIN_API_KEY) {
console.error("PLAIN_API_KEY is not set");
submission.error.message = "PLAIN_API_KEY is not set";
return json(submission);
}

client = new PlainClient({
apiKey: env.PLAIN_API_KEY,
});

const upsertCustomerRes = await client.upsertCustomer({
identifier: {
emailAddress: user.email,
},
onCreate: {
externalId: user.id,
fullName: user.name ?? "",
// TODO - Optional: set 'first name' on user
// shortName: ''
email: {
email: user.email,
isVerified: true,
},
},
onUpdate: {
externalId: { value: user.id },
fullName: { value: user.name ?? "" },
// TODO - see above
// shortName: { value: "" },
email: {
email: user.email,
isVerified: true,
},
},
});

if (upsertCustomerRes.error) {
console.error(
inspect(upsertCustomerRes.error, {
showHidden: false,
depth: null,
colors: true,
})
);
submission.error.message = upsertCustomerRes.error.message;
return json(submission);
}

const title = feedbackTypeLabel[submission.value.feedbackType as FeedbackType];
const createThreadRes = await client.createThread({
customerIdentifier: {
customerId: upsertCustomerRes.data.customer.id,
},
await sendToPlain({
userId: user.id,
email: user.email,
name: user.name ?? user.displayName ?? user.email,
title,
components: [
uiComponent.text({
Expand All @@ -123,31 +76,15 @@ export async function action({ request }: ActionFunctionArgs) {
text: submission.value.message,
}),
],
// TODO: Optional: set labels on threads here on creation
// labelTypeIds: [],

// TODO: Optional: set the priority (0 is urgent, 3 is low)
// priority: 0,
});

if (createThreadRes.error) {
console.error(
inspect(createThreadRes.error, {
showHidden: false,
depth: null,
colors: true,
})
);
submission.error.message = createThreadRes.error.message;
return json(submission);
}

return redirectWithSuccessMessage(
submission.value.path,
request,
"Thanks for your feedback! We'll get back to you soon."
);
} catch (e) {
return json(e, { status: 400 });
submission.error.message = e instanceof Error ? e.message : "Unknown error";
return json(submission);
}
}
2 changes: 1 addition & 1 deletion 2 ...rgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ function SpanBody({
<Property.Table>
<Property.Item>
<Property.Label>Message</Property.Label>
<Property.Value>{span.message}</Property.Value>
<Property.Value className="whitespace-pre-wrap">{span.message}</Property.Value>

@coderabbitai coderabbitai Bot Oct 17, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

Handle long messages to prevent layout issues

Adding className="whitespace-pre-wrap" preserves whitespace and wraps text for better readability of span.message. However, if span.message contains excessively long text, it may impact the layout or overflow the container. Consider limiting the maximum height and adding overflow handling to maintain a consistent UI.

You might apply the following change:

- <Property.Value className="whitespace-pre-wrap">{span.message}</Property.Value>
+ <Property.Value className="whitespace-pre-wrap max-h-64 overflow-auto">{span.message}</Property.Value>

This will limit the message display to a maximum height and allow scrolling if the content exceeds this height.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Property.Value className="whitespace-pre-wrap">{span.message}</Property.Value>
<Property.Value className="whitespace-pre-wrap max-h-64 overflow-auto">{span.message}</Property.Value>

</Property.Item>
{span.triggeredRuns.length > 0 && (
<Property.Item>
Expand Down
Loading
Morty Proxy This is a proxified and sanitized view of the page, visit original site.