From 9e7b07d0311cd1203accb98d9ae79fd0416eac91 Mon Sep 17 00:00:00 2001 From: James Ritchie Date: Sun, 29 Sep 2024 15:35:40 +0100 Subject: [PATCH 01/20] Added a new dropdown help and feedback menu to the side menu --- .../components/navigation/AccountSideMenu.tsx | 4 +- .../app/components/navigation/SideMenu.tsx | 339 +++++++++++++++--- .../components/navigation/SideMenuItem.tsx | 30 +- .../app/components/primitives/Buttons.tsx | 6 +- .../app/components/primitives/InfoPanel.tsx | 6 +- .../app/components/primitives/Popover.tsx | 20 ++ .../app/components/primitives/Select.tsx | 6 +- apps/webapp/app/routes/resources.feedback.ts | 2 +- 8 files changed, 327 insertions(+), 86 deletions(-) diff --git a/apps/webapp/app/components/navigation/AccountSideMenu.tsx b/apps/webapp/app/components/navigation/AccountSideMenu.tsx index 2f96629e2c..d77acaa6b9 100644 --- a/apps/webapp/app/components/navigation/AccountSideMenu.tsx +++ b/apps/webapp/app/components/navigation/AccountSideMenu.tsx @@ -38,7 +38,7 @@ export function AccountSideMenu({ user }: { user: User }) { @@ -49,7 +49,7 @@ export function AccountSideMenu({ user }: { user: User }) { diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx index 67faa95af7..67942ce17e 100644 --- a/apps/webapp/app/components/navigation/SideMenu.tsx +++ b/apps/webapp/app/components/navigation/SideMenu.tsx @@ -1,23 +1,30 @@ import { AcademicCapIcon, ArrowRightOnRectangleIcon, + ArrowUpRightIcon, BeakerIcon, BellAlertIcon, + CalendarDaysIcon, ChartBarIcon, + ChatBubbleLeftEllipsisIcon, ClockIcon, CreditCardIcon, CursorArrowRaysIcon, + EnvelopeIcon, IdentificationIcon, + InformationCircleIcon, KeyIcon, + LifebuoyIcon, + LightBulbIcon, RectangleStackIcon, ServerStackIcon, ShieldCheckIcon, SignalIcon, } from "@heroicons/react/20/solid"; import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid"; -import { useNavigation } from "@remix-run/react"; +import { Form, useActionData, useLocation, useNavigation } from "@remix-run/react"; import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons"; -import { Fragment, useEffect, useRef, useState } from "react"; +import { Fragment, ReactNode, useEffect, useRef, useState } from "react"; import { TaskIcon } from "~/assets/icons/TaskIcon"; import { useFeatures } from "~/hooks/useFeatures"; import { type MatchedOrganization } from "~/hooks/useOrganizations"; @@ -77,11 +84,23 @@ import { PopoverCustomTrigger, PopoverMenuItem, PopoverSectionHeader, + PopoverSideMenuTrigger, } from "../primitives/Popover"; import { StepNumber } from "../primitives/StepNumber"; import { TextLink } from "../primitives/TextLink"; import { SideMenuHeader } from "./SideMenuHeader"; import { SideMenuItem } from "./SideMenuItem"; +import { Fieldset } from "../primitives/Fieldset"; +import { conform, useForm } from "@conform-to/react"; +import { Select, SelectItem } from "../primitives/Select"; +import { InputGroup } from "../primitives/InputGroup"; +import { FormError } from "../primitives/FormError"; +import { Label } from "../primitives/Label"; +import { TextArea } from "../primitives/TextArea"; +import { FormButtons } from "../primitives/FormButtons"; +import { FeedbackType, feedbackTypeLabel, schema } from "~/routes/resources.feedback"; +import { parse } from "@conform-to/zod"; +import { InfoPanel } from "../primitives/InfoPanel"; type SideMenuUser = Pick & { isImpersonating: boolean }; type SideMenuProject = Pick; @@ -91,6 +110,8 @@ type SideMenuProps = { project: SideMenuProject; organization: MatchedOrganization; organizations: MatchedOrganization[]; + button: ReactNode; + defaultValue?: FeedbackType; }; export function SideMenu({ user, project, organization, organizations }: SideMenuProps) { @@ -171,7 +192,7 @@ export function SideMenu({ user, project, organization, organizations }: SideMen name="Team" icon={UserGroupIcon} to={organizationTeamPath(organization)} - iconColor="text-amber-500" + activeIconColor="text-amber-500" data-action="team" /> {organization.projects.some((proj) => proj.version === "V3") && isManagedCloud && ( @@ -180,14 +201,14 @@ export function SideMenu({ user, project, organization, organizations }: SideMen name="Usage" icon={ChartBarIcon} to={v3UsagePath(organization)} - iconColor="text-green-600" + activeIconColor="text-green-600" data-action="usage" /> )} @@ -287,34 +308,8 @@ export function SideMenu({ user, project, organization, organizations }: SideMen )} - - - - + + (defaultValue); + + const [form, { path, feedbackType, message }] = useForm({ + id: "accept-invite", + // TODO: type this + lastSubmission: lastSubmission as any, + onValidate({ formData }) { + return parse(formData, { schema }); + }, + }); + + return ( + setHelpMenuOpen(open)}> + + + Help & Feedback + + + +
+ + + + +
+
+ {currentPlan?.v3Subscription?.plan?.limits.support !== "slack" && ( + + + + + + Join our Slack +
+
+ + + As a subscriber, you have access to a dedicated Slack channel for 1-to-1 + support with the Trigger.dev team. + +
+
+
+ + + + Send us an email to this address from your Trigger.dev account email + address: + + + + + + + As soon as we can, we'll setup a Slack Connect channel and say hello! + + +
+
+ + + )} + + + + + + + + + Contact us +
+
+ + + How can we help? We read every message and will respond as quickly as we can. + +
+
+
+
+ + + {type === "feature" && ( + + All our feature requests are public and voted on by the community. The + best way to submit your feature request is to post it to our Feedback + Forum. + + )} + + {feedbackType.error} + + + +