Skip to content

Commit df0dc07

Browse files
samejrsamejr
authored
New Task page deploy blank state (#2344)
* Adds a step by step deploy blank state to Tasks page * Adds links to Ask AI, docs and troubleshooting
1 parent 63857b0 commit df0dc07

File tree

3 files changed

+126
-25
lines changed

3 files changed

+126
-25
lines changed

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

Lines changed: 64 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@ import {
55
ChatBubbleLeftRightIcon,
66
ClockIcon,
77
PlusIcon,
8+
QuestionMarkCircleIcon,
89
RectangleGroupIcon,
910
RectangleStackIcon,
1011
ServerStackIcon,
1112
Squares2X2Icon,
1213
} from "@heroicons/react/20/solid";
1314
import { useLocation } from "react-use";
1415
import { BranchEnvironmentIconSmall } from "~/assets/icons/EnvironmentIcons";
15-
import { TaskIcon } from "~/assets/icons/TaskIcon";
1616
import { WaitpointTokenIcon } from "~/assets/icons/WaitpointTokenIcon";
1717
import openBulkActionsPanel from "~/assets/images/open-bulk-actions-panel.png";
1818
import selectRunsIndividually from "~/assets/images/select-runs-individually.png";
@@ -32,8 +32,9 @@ import {
3232
v3NewProjectAlertPath,
3333
v3NewSchedulePath,
3434
} from "~/utils/pathBuilder";
35+
import { AskAI } from "./AskAI";
3536
import { InlineCode } from "./code/InlineCode";
36-
import { environmentFullTitle } from "./environments/EnvironmentLabel";
37+
import { environmentFullTitle, EnvironmentIcon } from "./environments/EnvironmentLabel";
3738
import { Feedback } from "./Feedback";
3839
import { EnvironmentSelector } from "./navigation/EnvironmentSelector";
3940
import { Button, LinkButton } from "./primitives/Buttons";
@@ -42,7 +43,13 @@ import { InfoPanel } from "./primitives/InfoPanel";
4243
import { Paragraph } from "./primitives/Paragraph";
4344
import { StepNumber } from "./primitives/StepNumber";
4445
import { TextLink } from "./primitives/TextLink";
45-
import { InitCommandV3, PackageManagerProvider, TriggerDevStepV3 } from "./SetupCommands";
46+
import { SimpleTooltip } from "./primitives/Tooltip";
47+
import {
48+
InitCommandV3,
49+
PackageManagerProvider,
50+
TriggerDeployStep,
51+
TriggerDevStepV3,
52+
} from "./SetupCommands";
4653
import { StepContentContainer } from "./StepContentContainer";
4754
import { V4Badge } from "./V4Badge";
4855

@@ -87,26 +94,60 @@ export function HasNoTasksDev() {
8794

8895
export function HasNoTasksDeployed({ environment }: { environment: MinimumEnvironment }) {
8996
return (
90-
<InfoPanel
91-
title={`You don't have any deployed tasks in ${environmentFullTitle(environment)}`}
92-
icon={TaskIcon}
93-
iconClassName="text-tasks"
94-
panelClassName="max-w-full"
95-
accessory={
96-
<LinkButton
97-
to={docsPath("deployment/overview")}
98-
variant="docs/small"
99-
LeadingIcon={BookOpenIcon}
100-
>
101-
How to deploy tasks
102-
</LinkButton>
103-
}
104-
>
105-
<Paragraph spacing variant="small">
106-
Run the <TextLink to={docsPath("deployment/overview")}>CLI deploy command</TextLink> to
107-
deploy your tasks to the {environmentFullTitle(environment)} environment.
108-
</Paragraph>
109-
</InfoPanel>
97+
<PackageManagerProvider>
98+
<div>
99+
<div className="mb-6 flex items-center justify-between border-b">
100+
<div className="mb-2 flex items-center gap-2">
101+
<EnvironmentIcon environment={environment} className="-ml-1 size-8" />
102+
<Header1>Deploy your tasks to {environmentFullTitle(environment)}</Header1>
103+
</div>
104+
<div className="flex items-center">
105+
<SimpleTooltip
106+
button={
107+
<LinkButton
108+
variant="small-menu-item"
109+
LeadingIcon={BookOpenIcon}
110+
leadingIconClassName="text-blue-500"
111+
to={docsPath("deployment/overview")}
112+
/>
113+
}
114+
content="Deploy docs"
115+
/>
116+
<SimpleTooltip
117+
button={
118+
<LinkButton
119+
variant="small-menu-item"
120+
LeadingIcon={QuestionMarkCircleIcon}
121+
leadingIconClassName="text-blue-500"
122+
to={docsPath("troubleshooting#deployment")}
123+
/>
124+
}
125+
content="Troubleshooting docs"
126+
/>
127+
<AskAI />
128+
</div>
129+
</div>
130+
<StepNumber stepNumber="1a" title="Run the CLI 'deploy' command" />
131+
<StepContentContainer>
132+
<Paragraph spacing>
133+
This will deploy your tasks to the {environmentFullTitle(environment)} environment. Read
134+
the <TextLink to={docsPath("deployment/overview")}>full guide</TextLink>.
135+
</Paragraph>
136+
<TriggerDeployStep environment={environment} />
137+
</StepContentContainer>
138+
<StepNumber stepNumber="1b" title="Or deploy using GitHub Actions" />
139+
<StepContentContainer>
140+
<Paragraph spacing>
141+
Read the <TextLink to={docsPath("github-actions")}>GitHub Actions guide</TextLink> to
142+
get started.
143+
</Paragraph>
144+
</StepContentContainer>
145+
<StepNumber stepNumber="2" title="Waiting for tasks to deploy" displaySpinner />
146+
<StepContentContainer>
147+
<Paragraph>This page will automatically refresh when your tasks are deployed.</Paragraph>
148+
</StepContentContainer>
149+
</div>
150+
</PackageManagerProvider>
110151
);
111152
}
112153

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,3 +208,64 @@ export function TriggerLoginStepV3({ title }: TabsProps) {
208208
</ClientTabs>
209209
);
210210
}
211+
212+
export function TriggerDeployStep({ title, environment }: TabsProps & { environment: { type: string } }) {
213+
const triggerCliTag = useTriggerCliTag();
214+
const { activePackageManager, setActivePackageManager } = usePackageManager();
215+
216+
// Generate the environment flag based on environment type
217+
const getEnvironmentFlag = () => {
218+
switch (environment.type) {
219+
case "STAGING":
220+
return " --env staging";
221+
case "PREVIEW":
222+
return " --env preview";
223+
case "PRODUCTION":
224+
default:
225+
return "";
226+
}
227+
};
228+
229+
const environmentFlag = getEnvironmentFlag();
230+
231+
return (
232+
<ClientTabs
233+
defaultValue="npm"
234+
value={activePackageManager}
235+
onValueChange={setActivePackageManager}
236+
>
237+
<div className="flex items-center gap-4">
238+
{title && <Header3>{title}</Header3>}
239+
<ClientTabsList className={title ? "ml-auto" : ""}>
240+
<ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
241+
<ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
242+
<ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
243+
</ClientTabsList>
244+
</div>
245+
<ClientTabsContent value={"npm"}>
246+
<ClipboardField
247+
variant="secondary/medium"
248+
iconButton
249+
className="mb-4"
250+
value={`npx trigger.dev@${triggerCliTag} deploy${environmentFlag}`}
251+
/>
252+
</ClientTabsContent>
253+
<ClientTabsContent value={"pnpm"}>
254+
<ClipboardField
255+
variant="secondary/medium"
256+
iconButton
257+
className="mb-4"
258+
value={`pnpm dlx trigger.dev@${triggerCliTag} deploy${environmentFlag}`}
259+
/>
260+
</ClientTabsContent>
261+
<ClientTabsContent value={"yarn"}>
262+
<ClipboardField
263+
variant="secondary/medium"
264+
iconButton
265+
className="mb-4"
266+
value={`yarn dlx trigger.dev@${triggerCliTag} deploy${environmentFlag}`}
267+
/>
268+
</ClientTabsContent>
269+
</ClientTabs>
270+
);
271+
}

‎apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam._index/route.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,6 @@ import {
7777
type TaskActivity,
7878
type TaskListItem,
7979
taskListPresenter,
80-
TaskListPresenter,
8180
} from "~/presenters/v3/TaskListPresenter.server";
8281
import {
8382
getUsefulLinksPreference,
@@ -411,7 +410,7 @@ export default function Page() {
411410
<HasNoTasksDev />
412411
</MainCenteredContainer>
413412
) : (
414-
<MainCenteredContainer className="max-w-md">
413+
<MainCenteredContainer className="max-w-prose">
415414
<HasNoTasksDeployed environment={environment} />
416415
</MainCenteredContainer>
417416
)}

0 commit comments

Comments
 (0)