Skip to content

Commit b5f8af4

Browse files
samejr0ski
samejr
authored and
0ski
committed
Show the 3 deploy options in tabs instead
1 parent 7a4d45d commit b5f8af4

1 file changed

Lines changed: 99 additions & 126 deletions

File tree

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

Lines changed: 99 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@ import {
5353
import { StepContentContainer } from "./StepContentContainer";
5454
import { V4Badge } from "./V4Badge";
5555
import { GitHubConnectionPrompt } from "~/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.settings/route";
56+
import SegmentedControl from "./primitives/SegmentedControl";
57+
import { useState } from "react";
58+
import {
59+
ClientTabs,
60+
ClientTabsContent,
61+
ClientTabsList,
62+
ClientTabsTrigger,
63+
} from "./primitives/ClientTabs";
5664

5765
export function HasNoTasksDev() {
5866
return (
@@ -94,62 +102,7 @@ export function HasNoTasksDev() {
94102
}
95103

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

155108
export function SchedulesNoPossibleTaskPanel() {
@@ -267,76 +220,7 @@ export function TestHasNoTasks() {
267220
}
268221

269222
export function DeploymentsNone() {
270-
const environment = useEnvironment();
271-
272-
return (
273-
<PackageManagerProvider>
274-
<div className="mb-6 flex items-center justify-between border-b">
275-
<div className="mb-2 flex items-center gap-2">
276-
<ServerStackIcon className="-ml-1 size-8 text-deployments" />
277-
<Header1>Deploy your tasks</Header1>
278-
</div>
279-
<div className="flex items-center">
280-
<SimpleTooltip
281-
button={
282-
<LinkButton
283-
variant="small-menu-item"
284-
LeadingIcon={BookOpenIcon}
285-
leadingIconClassName="text-blue-500"
286-
to={docsPath("deployment/overview")}
287-
/>
288-
}
289-
content="Deploy docs"
290-
/>
291-
<SimpleTooltip
292-
button={
293-
<LinkButton
294-
variant="small-menu-item"
295-
LeadingIcon={QuestionMarkCircleIcon}
296-
leadingIconClassName="text-blue-500"
297-
to={docsPath("troubleshooting#deployment")}
298-
/>
299-
}
300-
content="Troubleshooting docs"
301-
/>
302-
<AskAI />
303-
</div>
304-
</div>
305-
<StepNumber stepNumber="1a" title="Connect your GitHub repository" />
306-
<StepContentContainer>
307-
<Paragraph spacing>
308-
Connect your GitHub repository to automatically deploy whenever you push.
309-
</Paragraph>
310-
<div className="w-fit">
311-
<GitHubConnectionPrompt
312-
gitHubAppInstallations={[]}
313-
organizationSlug={""}
314-
projectSlug={""}
315-
environmentSlug={""}
316-
/>
317-
</div>
318-
</StepContentContainer>
319-
<StepNumber stepNumber="1b" title="Or run the CLI 'deploy' command" />
320-
<StepContentContainer>
321-
<Paragraph spacing>
322-
This will deploy your tasks to the {environmentFullTitle(environment)} environment. Read
323-
the <TextLink to={docsPath("deployment/overview")}>full guide</TextLink>.
324-
</Paragraph>
325-
<TriggerDeployStep environment={environment} />
326-
</StepContentContainer>
327-
<StepNumber stepNumber="1c" title="Or deploy using GitHub Actions" />
328-
<StepContentContainer>
329-
<Paragraph spacing>
330-
Read the <TextLink to={docsPath("github-actions")}>GitHub Actions guide</TextLink> to get
331-
started.
332-
</Paragraph>
333-
</StepContentContainer>
334-
<StepNumber stepNumber="2" title="Waiting for tasks to deploy" displaySpinner />
335-
<StepContentContainer>
336-
<Paragraph>This page will automatically refresh when your tasks are deployed.</Paragraph>
337-
</StepContentContainer>
338-
</PackageManagerProvider>
339-
);
223+
return <DeploymentOnboardingSteps />;
340224
}
341225

342226
export function DeploymentsNoneDev() {
@@ -702,3 +586,92 @@ export function BulkActionsNone() {
702586
</div>
703587
);
704588
}
589+
590+
function DeploymentOnboardingSteps() {
591+
const environment = useEnvironment();
592+
593+
return (
594+
<PackageManagerProvider>
595+
<div className="mb-6 flex items-center justify-between border-b">
596+
<div className="mb-2 flex items-center gap-2">
597+
<EnvironmentIcon environment={environment} className="-ml-1 size-8" />
598+
<Header1>Deploy your tasks to {environmentFullTitle(environment)}</Header1>
599+
</div>
600+
<div className="flex items-center">
601+
<SimpleTooltip
602+
button={
603+
<LinkButton
604+
variant="small-menu-item"
605+
LeadingIcon={BookOpenIcon}
606+
leadingIconClassName="text-blue-500"
607+
to={docsPath("deployment/overview")}
608+
/>
609+
}
610+
content="Deploy docs"
611+
/>
612+
<SimpleTooltip
613+
button={
614+
<LinkButton
615+
variant="small-menu-item"
616+
LeadingIcon={QuestionMarkCircleIcon}
617+
leadingIconClassName="text-blue-500"
618+
to={docsPath("troubleshooting#deployment")}
619+
/>
620+
}
621+
content="Troubleshooting docs"
622+
/>
623+
<AskAI />
624+
</div>
625+
</div>
626+
<ClientTabs defaultValue="github">
627+
<div className="flex items-center gap-4">
628+
<ClientTabsList>
629+
<ClientTabsTrigger value={"github"}>GitHub</ClientTabsTrigger>
630+
<ClientTabsTrigger value={"cli"}>CLI</ClientTabsTrigger>
631+
<ClientTabsTrigger value={"github-actions"}>GitHub Actions</ClientTabsTrigger>
632+
</ClientTabsList>
633+
</div>
634+
<ClientTabsContent value={"github"}>
635+
<StepNumber stepNumber="1" title="Connect your GitHub repository" />
636+
<StepContentContainer>
637+
<Paragraph spacing>
638+
Connect your GitHub repository to automatically deploy whenever you push.
639+
</Paragraph>
640+
<div className="w-fit">
641+
<GitHubConnectionPrompt
642+
gitHubAppInstallations={[]}
643+
organizationSlug={""}
644+
projectSlug={""}
645+
environmentSlug={""}
646+
/>
647+
</div>
648+
</StepContentContainer>
649+
</ClientTabsContent>
650+
<ClientTabsContent value={"cli"}>
651+
<StepNumber stepNumber="1" title="Run the CLI 'deploy' command" />
652+
<StepContentContainer>
653+
<Paragraph spacing>
654+
This will deploy your tasks to the {environmentFullTitle(environment)} environment.
655+
Read the <TextLink to={docsPath("deployment/overview")}>full guide</TextLink>.
656+
</Paragraph>
657+
<TriggerDeployStep environment={environment} />
658+
</StepContentContainer>
659+
</ClientTabsContent>
660+
<ClientTabsContent value={"github-actions"}>
661+
<StepNumber stepNumber="1" title="Deploy using GitHub Actions" />
662+
<StepContentContainer>
663+
<Paragraph spacing>
664+
Read the <TextLink to={docsPath("github-actions")}>GitHub Actions guide</TextLink> to
665+
get started.
666+
</Paragraph>
667+
</StepContentContainer>
668+
</ClientTabsContent>
669+
</ClientTabs>
670+
671+
<StepNumber stepNumber="2" title="Waiting for tasks to deploy" displaySpinner />
672+
<StepContentContainer>
673+
<Paragraph>This page will automatically refresh when your tasks are deployed.</Paragraph>
674+
</StepContentContainer>
675+
</PackageManagerProvider>
676+
);
677+
}

0 commit comments

Comments
 (0)