Improved v3 feedback button (#959)

* Removed feedback button from PageHeader

* Show a different feedback button in the side menu for v3 projects

* Fixed issue with button wrapping on smaller width browser

Author: samejr

apps/webapp/app/components/Feedback.tsx

@@ -117,7 +117,7 @@ export function Feedback({ button, defaultValue = "bug" }: FeedbackProps) {
           <Paragraph className="mb-4">
             If you're having trouble, check out our documentation or the Trigger.dev Status page.
           </Paragraph>
-          <div className="flex gap-x-2">
+          <div className="flex flex-wrap gap-2">
             <LinkButton to={docsPath("")} variant="tertiary/medium" LeadingIcon={BookOpenIcon}>
               Docs
             </LinkButton>

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -14,6 +14,7 @@ import { UserGroupIcon, UserPlusIcon } from "@heroicons/react/24/solid";
 import { useNavigation } from "@remix-run/react";
 import { DiscordIcon, SlackIcon } from "@trigger.dev/companyicons";
 import { Fragment, useEffect, useRef, useState } from "react";
+import { TaskIcon } from "~/assets/icons/TaskIcon";
 import { useFeatures } from "~/hooks/useFeatures";
 import { MatchedOrganization } from "~/hooks/useOrganizations";
 import { MatchedProject } from "~/hooks/useProject";
@@ -54,6 +55,7 @@ import { LogoIcon } from "../LogoIcon";
 import { StepContentContainer } from "../StepContentContainer";
 import { UserProfilePhoto } from "../UserProfilePhoto";
 import { FreePlanUsage } from "../billing/FreePlanUsage";
+import { Badge } from "../primitives/Badge";
 import { Button } from "../primitives/Buttons";
 import { ClipboardField } from "../primitives/ClipboardField";
 import { Dialog, DialogContent, DialogHeader, DialogTrigger } from "../primitives/Dialog";
@@ -70,8 +72,6 @@ import {
 import { StepNumber } from "../primitives/StepNumber";
 import { SideMenuHeader } from "./SideMenuHeader";
 import { MenuCount, SideMenuItem } from "./SideMenuItem";
-import { Badge } from "../primitives/Badge";
-import { TaskIcon } from "~/assets/icons/TaskIcon";
 
 type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
 type SideMenuProject = Pick<
@@ -269,28 +269,44 @@ export function SideMenu({ user, project, organization, organizations }: SideMen
               target="_blank"
             />
           )}
-
           <SideMenuItem
             name="Changelog"
             icon="star"
             to="https://trigger.dev/changelog"
             data-action="changelog"
             target="_blank"
           />
-
-          <Feedback
-            button={
-              <Button
-                variant="small-menu-item"
-                LeadingIcon="log"
-                data-action="help & feedback"
-                fullWidth
-                textAlignLeft
-              >
-                Help & Feedback
-              </Button>
-            }
-          />
+          {project.version === "V2" ? (
+            <Feedback
+              button={
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon="log"
+                  data-action="help & feedback"
+                  fullWidth
+                  textAlignLeft
+                >
+                  Help & Feedback
+                </Button>
+              }
+            />
+          ) : (
+            <Feedback
+              defaultValue="developer preview"
+              button={
+                <Button
+                  variant="small-menu-item"
+                  LeadingIcon="log"
+                  leadingIconClassName="text-primary"
+                  data-action="help & feedback"
+                  fullWidth
+                  textAlignLeft
+                >
+                  <span className="text-primary">Give feedback on v3</span>
+                </Button>
+              }
+            />
+          )}
           {currentPlan && !currentPlan.subscription?.isPaying && currentPlan.usage.runCountCap && (
             <FreePlanUsage
               to={organizationBillingPath(organization)}

apps/webapp/app/components/primitives/PageHeader.tsx

@@ -1,18 +1,17 @@
 import { ArrowUpRightIcon } from "@heroicons/react/20/solid";
 import { Link, useNavigation } from "@remix-run/react";
 import { useOptionalOrganization } from "~/hooks/useOrganizations";
+import { useOptionalProject } from "~/hooks/useProject";
 import { cn } from "~/utils/cn";
 import { plansPath } from "~/utils/pathBuilder";
 import { UpgradePrompt, useShowUpgradePrompt } from "../billing/UpgradePrompt";
 import { BreadcrumbIcon } from "./BreadcrumbIcon";
-import { Button, LinkButton } from "./Buttons";
+import { LinkButton } from "./Buttons";
 import { Header2 } from "./Headers";
 import { LoadingBarDivider } from "./LoadingBarDivider";
 import { NamedIcon } from "./NamedIcon";
 import { Paragraph } from "./Paragraph";
 import { Tabs, TabsProps } from "./Tabs";
-import { useOptionalProject } from "~/hooks/useProject";
-import { Feedback } from "../Feedback";
 
 type WithChildren = {
   children: React.ReactNode;
@@ -24,29 +23,11 @@ export function NavBar({ children }: WithChildren) {
   const navigation = useNavigation();
   const isLoading = navigation.state === "loading" || navigation.state === "submitting";
   const project = useOptionalProject();
-  const isV3Project = project?.version === "V3";
 
   return (
     <div>
       <div className="grid h-10 w-full grid-rows-[auto_1px] bg-background-bright">
-        <div className="flex w-full items-center justify-between pl-3 pr-1">
-          {children}
-          {isV3Project && (
-            <Feedback
-              defaultValue="developer preview"
-              button={
-                <Button
-                  variant="secondary/small"
-                  LeadingIcon="log"
-                  leadingIconClassName="text-primary"
-                  data-action="help & feedback"
-                >
-                  Developer preview feedback
-                </Button>
-              }
-            />
-          )}
-        </div>
+        <div className="flex w-full items-center justify-between pl-3 pr-1">{children}</div>
         <LoadingBarDivider isLoading={isLoading} />
       </div>
       {showUpgradePrompt.shouldShow && organization && (