Skip to content

Commit aa2879d

Browse files
samejrsamejr
committed
Incorporates docs button into the text and adds title to the clipboard field
1 parent 6ebcc00 commit aa2879d

File tree

2 files changed

+49
-38
lines changed

2 files changed

+49
-38
lines changed

‎apps/webapp/app/components/SetupCommands.tsx‎

Lines changed: 42 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
} from "./primitives/ClientTabs";
1111
import { ClipboardField } from "./primitives/ClipboardField";
1212
import { Paragraph } from "./primitives/Paragraph";
13+
import { Header3 } from "./primitives/Headers";
1314

1415
type PackageManagerContextType = {
1516
activePackageManager: string;
@@ -61,7 +62,12 @@ function getApiUrlArg() {
6162
return apiUrl ? `-a ${apiUrl}` : undefined;
6263
}
6364

64-
export function InitCommandV3() {
65+
// Add title prop to the component interfaces
66+
type TabsProps = {
67+
title?: string;
68+
};
69+
70+
export function InitCommandV3({ title }: TabsProps) {
6571
const project = useProject();
6672
const projectRef = project.externalRef;
6773
const apiUrlArg = getApiUrlArg();
@@ -77,30 +83,33 @@ export function InitCommandV3() {
7783
value={activePackageManager}
7884
onValueChange={setActivePackageManager}
7985
>
80-
<ClientTabsList>
81-
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
82-
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
83-
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
84-
</ClientTabsList>
86+
<div className="flex items-center gap-4">
87+
{title && <span>{title}</span>}
88+
<ClientTabsList className={title ? "ml-auto" : ""}>
89+
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
90+
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
91+
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
92+
</ClientTabsList>
93+
</div>
8594
<ClientTabsContent value={"npm"}>
8695
<ClipboardField
87-
variant="primary/medium"
96+
variant="secondary/medium"
8897
iconButton
8998
className="mb-4"
9099
value={`npx ${initCommand}`}
91100
/>
92101
</ClientTabsContent>
93102
<ClientTabsContent value={"pnpm"}>
94103
<ClipboardField
95-
variant="primary/medium"
104+
variant="secondary/medium"
96105
iconButton
97106
className="mb-4"
98107
value={`pnpm dlx ${initCommand}`}
99108
/>
100109
</ClientTabsContent>
101110
<ClientTabsContent value={"yarn"}>
102111
<ClipboardField
103-
variant="primary/medium"
112+
variant="secondary/medium"
104113
iconButton
105114
className="mb-4"
106115
value={`yarn dlx ${initCommand}`}
@@ -110,7 +119,7 @@ export function InitCommandV3() {
110119
);
111120
}
112121

113-
export function TriggerDevStepV3() {
122+
export function TriggerDevStepV3({ title }: TabsProps) {
114123
const { activePackageManager, setActivePackageManager } = usePackageManager();
115124

116125
return (
@@ -119,30 +128,33 @@ export function TriggerDevStepV3() {
119128
value={activePackageManager}
120129
onValueChange={setActivePackageManager}
121130
>
122-
<ClientTabsList>
123-
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
124-
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
125-
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
126-
</ClientTabsList>
131+
<div className="flex items-center gap-4">
132+
{title && <Header3>{title}</Header3>}
133+
<ClientTabsList className={title ? "ml-auto" : ""}>
134+
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
135+
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
136+
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
137+
</ClientTabsList>
138+
</div>
127139
<ClientTabsContent value={"npm"}>
128140
<ClipboardField
129-
variant="primary/medium"
141+
variant="secondary/medium"
130142
iconButton
131143
className="mb-4"
132144
value={`npx trigger.dev@${v3PackageTag} dev`}
133145
/>
134146
</ClientTabsContent>
135147
<ClientTabsContent value={"pnpm"}>
136148
<ClipboardField
137-
variant="primary/medium"
149+
variant="secondary/medium"
138150
iconButton
139151
className="mb-4"
140152
value={`pnpm dlx trigger.dev@${v3PackageTag} dev`}
141153
/>
142154
</ClientTabsContent>
143155
<ClientTabsContent value={"yarn"}>
144156
<ClipboardField
145-
variant="primary/medium"
157+
variant="secondary/medium"
146158
iconButton
147159
className="mb-4"
148160
value={`yarn dlx trigger.dev@${v3PackageTag} dev`}
@@ -152,7 +164,7 @@ export function TriggerDevStepV3() {
152164
);
153165
}
154166

155-
export function TriggerLoginStepV3() {
167+
export function TriggerLoginStepV3({ title }: TabsProps) {
156168
const { activePackageManager, setActivePackageManager } = usePackageManager();
157169

158170
return (
@@ -161,30 +173,33 @@ export function TriggerLoginStepV3() {
161173
value={activePackageManager}
162174
onValueChange={setActivePackageManager}
163175
>
164-
<ClientTabsList>
165-
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
166-
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
167-
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
168-
</ClientTabsList>
176+
<div className="flex items-center gap-4">
177+
{title && <span>{title}</span>}
178+
<ClientTabsList className={title ? "ml-auto" : ""}>
179+
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
180+
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
181+
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
182+
</ClientTabsList>
183+
</div>
169184
<ClientTabsContent value={"npm"}>
170185
<ClipboardField
171-
variant="primary/medium"
186+
variant="secondary/medium"
172187
iconButton
173188
className="mb-4"
174189
value={`npx trigger.dev@${v3PackageTag} login`}
175190
/>
176191
</ClientTabsContent>
177192
<ClientTabsContent value={"pnpm"}>
178193
<ClipboardField
179-
variant="primary/medium"
194+
variant="secondary/medium"
180195
iconButton
181196
className="mb-4"
182197
value={`pnpm dlx trigger.dev@${v3PackageTag} login`}
183198
/>
184199
</ClientTabsContent>
185200
<ClientTabsContent value={"yarn"}>
186201
<ClipboardField
187-
variant="primary/medium"
202+
variant="secondary/medium"
188203
iconButton
189204
className="mb-4"
190205
value={`yarn dlx trigger.dev@${v3PackageTag} login`}

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

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ import { HelpAndFeedback } from "./HelpAndFeedbackPopover";
8686
import { SideMenuHeader } from "./SideMenuHeader";
8787
import { SideMenuItem } from "./SideMenuItem";
8888
import { SideMenuSection } from "./SideMenuSection";
89+
import { InlineCode } from "../code/InlineCode";
8990

9091
type SideMenuUser = Pick<User, "email" | "admin"> & { isImpersonating: boolean };
9192
export type SideMenuProject = Pick<
@@ -546,9 +547,7 @@ export function DevConnection() {
546547
</div>
547548
<DialogContent>
548549
<DialogHeader>
549-
{isConnected
550-
? "Your dev server is connected to Trigger.dev"
551-
: "Your dev server is not connected to Trigger.dev"}
550+
{isConnected ? "Your dev server is connected" : "Your dev server is not connected"}
552551
</DialogHeader>
553552
<div className="mt-2 flex flex-col gap-3 px-2">
554553
<div className="flex flex-col items-center justify-center gap-6 px-6 py-10">
@@ -567,20 +566,17 @@ export function DevConnection() {
567566
{isConnected ? null : (
568567
<div className="space-y-3">
569568
<PackageManagerProvider>
570-
<TriggerDevStepV3 />
569+
<TriggerDevStepV3 title="Run this command to connect" />
571570
</PackageManagerProvider>
572571
<Paragraph variant="small">
573-
Run this CLI `dev` command to connect to the Trigger.dev servers to start developing
574-
locally. Keep it running while you develop to stay connected.
572+
Run this CLI <InlineCode variant="extra-small">dev</InlineCode> command to connect
573+
to the Trigger.dev servers to start developing locally. Keep it running while you
574+
develop to stay connected. Learn more in the{" "}
575+
<TextLink to={docsPath("cli-dev")}>CLI docs</TextLink>.
575576
</Paragraph>
576577
</div>
577578
)}
578579
</div>
579-
<DialogFooter>
580-
<LinkButton variant="tertiary/medium" LeadingIcon={BookOpenIcon} to={docsPath("cli-dev")}>
581-
CLI docs
582-
</LinkButton>
583-
</DialogFooter>
584580
</DialogContent>
585581
</Dialog>
586582
);

0 commit comments

Comments
 (0)