Skip to content

Commit 8504c81

Browse files
invisalinvisal
committed
ask user to use cloud or desktop when try to creeate local mysql and postgres
1 parent 8271884 commit 8504c81

File tree

5 files changed

+173
-118
lines changed

5 files changed

+173
-118
lines changed

‎src/app/(outerbase)/local/new-base/cloud-support-only.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
"use client";
2+
import { useSession } from "@/app/(outerbase)/session-provider";
3+
import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
4+
import { Button } from "@/components/orbit/button";
5+
import { Loader } from "@/components/orbit/loader";
6+
import { getDatabaseFriendlyName } from "@/components/resource-card/utils";
7+
import {
8+
ArrowLeft,
9+
ChartBar,
10+
Folder,
11+
Icon,
12+
MagicWand,
13+
ShieldCheck,
14+
UsersThree,
15+
} from "@phosphor-icons/react";
16+
import Link from "next/link";
17+
18+
function OuterbaseHighlightCard({
19+
title,
20+
description,
21+
icon: Icon,
22+
}: {
23+
title: string;
24+
description: string;
25+
icon: Icon;
26+
}) {
27+
return (
28+
<div className="flex flex-col gap-2 py-4">
29+
<div className="mb-4">
30+
<div className="bg-muted inline-flex rounded p-4">
31+
<Icon className="h-6 w-6" />
32+
</div>
33+
</div>
34+
<h2 className="font-bold">{title}</h2>
35+
<p className="text-base">{description}</p>
36+
</div>
37+
);
38+
}
39+
40+
function SignupPromotion({ type }: { type: string }) {
41+
const { isLoading, session } = useSession();
42+
const { workspaces, loading } = useWorkspaces();
43+
44+
if (isLoading || loading) {
45+
return (
46+
<div className="flex min-h-[300px] w-1/2 flex-col items-center justify-center gap-4 p-4">
47+
<Loader size={40} />
48+
</div>
49+
);
50+
}
51+
52+
if (!session?.user) {
53+
return (
54+
<div className="flex w-1/2 flex-col p-4">
55+
<h1 className="text-2xl font-bold">Outerbase Cloud</h1>
56+
57+
<Link
58+
href="/signin"
59+
className="text-primary-foreground bg-primary my-4 rounded-lg p-4 px-4 text-center text-xl font-semibold"
60+
>
61+
Sign In To Our Cloud
62+
</Link>
63+
64+
<div className="grid grid-cols-2 gap-2">
65+
<OuterbaseHighlightCard
66+
icon={UsersThree}
67+
title="Collaboration"
68+
description="Collaborate with your team to explore and analyze the data, and share insights from the database."
69+
/>
70+
71+
<OuterbaseHighlightCard
72+
icon={MagicWand}
73+
title="AI-powered"
74+
description="Integrate AI to assist with querying, chart generation, and more."
75+
/>
76+
77+
<OuterbaseHighlightCard
78+
icon={ChartBar}
79+
title="Visual Charts"
80+
description="Create visually appealing charts from multiple data sources in minutes."
81+
/>
82+
83+
<OuterbaseHighlightCard
84+
icon={ShieldCheck}
85+
title="HIPAA Compliant"
86+
description="We protect patient health details, keeping them safe and confidential."
87+
/>
88+
</div>
89+
</div>
90+
);
91+
}
92+
93+
return (
94+
<div className="flex w-1/2 flex-col gap-2 p-4">
95+
<div className="mb-4">
96+
<h1 className="text-2xl font-bold">Outerbase Cloud</h1>
97+
<p>Please select the workspace</p>
98+
</div>
99+
100+
{(workspaces ?? []).map((workspace) => {
101+
return (
102+
<Link
103+
key={workspace.id}
104+
className="bg-secondary hover:border-primary flex cursor-pointer items-center gap-2 rounded border border-2 p-4 text-base"
105+
href={`/w/${workspace.short_name}/new-base/${type}`}
106+
>
107+
<Folder weight="bold" size={20} />
108+
{workspace.name}
109+
</Link>
110+
);
111+
})}
112+
</div>
113+
);
114+
}
115+
116+
export function CloudDriverSupportOnly({ type }: { type: string }) {
117+
return (
118+
<div className="container">
119+
<div className="my-8 flex">
120+
<Button variant="secondary" size="lg" href="/local" as="link">
121+
<ArrowLeft />
122+
Back
123+
</Button>
124+
</div>
125+
126+
<div className="mb-8 p-4 text-xl leading-8">
127+
Running {getDatabaseFriendlyName(type)} from a browser is not possible.
128+
<br /> Please use the desktop app or our cloud services instead.
129+
</div>
130+
131+
<div className="mb-8 flex">
132+
<SignupPromotion type={type} />
133+
134+
<div className="flex w-1/2 flex-col gap-4 p-4">
135+
<div>
136+
<h1 className="text-2xl font-bold">Desktop App</h1>
137+
</div>
138+
139+
<Link
140+
href="https://github.com/outerbase/studio-desktop/releases"
141+
className="relative w-full"
142+
>
143+
<img
144+
src="/outerbase-banner.jpg"
145+
alt=""
146+
className="w-full rounded-lg"
147+
/>
148+
149+
<div className="bg-opacity-50 absolute right-0 bottom-0 left-0 flex cursor-pointer flex-col gap-2 rounded-lg bg-black p-4 text-white">
150+
<div className="text-2xl font-bold">Download the desktop app</div>
151+
<p className="text-base">
152+
Outerbase Studio Desktop is a lightweight Electron wrapper for
153+
the Outerbase Studio web version. It enables support for drivers
154+
that aren&apos;t feasible in a browser environment, such as
155+
MySQL and PostgreSQL.
156+
</p>
157+
</div>
158+
</Link>
159+
</div>
160+
</div>
161+
</div>
162+
);
163+
}

‎src/app/(outerbase)/local/new-base/mysql/page.tsx‎

Lines changed: 2 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,6 @@
11
"use client";
2-
import { useSession } from "@/app/(outerbase)/session-provider";
3-
import { useWorkspaces } from "@/app/(outerbase)/workspace-provider";
4-
import { Button } from "@/components/orbit/button";
5-
import { Loader } from "@/components/orbit/loader";
6-
import { ArrowLeft, Folder } from "@phosphor-icons/react";
7-
import Link from "next/link";
8-
9-
function LocalMySQLCloudSection() {
10-
const { isLoading, session } = useSession();
11-
const { workspaces, loading } = useWorkspaces();
12-
13-
if (isLoading || loading) {
14-
return (
15-
<div className="flex min-h-[300px] w-1/2 flex-col items-center justify-center gap-4 p-4">
16-
<Loader size={40} />
17-
</div>
18-
);
19-
}
20-
21-
if (!session?.user) {
22-
return (
23-
<div className="flex w-1/2 flex-col gap-4 p-4">
24-
<h1 className="text-lg font-bold">Outerbase Cloud</h1>
25-
26-
<div>
27-
<p>Connect to our cloud services</p>
28-
<ul className="">
29-
<li>Benefit 1</li>
30-
<li>Benefit 2</li>
31-
<li>Benefit 3</li>
32-
<li>Benefit 4</li>
33-
</ul>
34-
</div>
35-
36-
<div>
37-
<Button
38-
variant="primary"
39-
className="inline-flex"
40-
size="lg"
41-
href="/signin"
42-
as="link"
43-
>
44-
Sign In
45-
</Button>
46-
</div>
47-
</div>
48-
);
49-
}
50-
51-
return (
52-
<div className="flex w-1/2 flex-col gap-2 p-4">
53-
<div className="mb-4">
54-
<h1 className="text-2xl font-bold">Outerbase Cloud</h1>
55-
<p>Please select the workspace</p>
56-
</div>
57-
58-
{(workspaces ?? []).map((workspace) => {
59-
return (
60-
<Link
61-
key={workspace.id}
62-
className="bg-secondary hover:border-primary flex cursor-pointer items-center gap-2 rounded border border-2 p-4 text-base"
63-
href={`/w/${workspace.short_name}/new-base/mysql`}
64-
>
65-
<Folder weight="bold" size={20} />
66-
{workspace.name}
67-
</Link>
68-
);
69-
})}
70-
</div>
71-
);
72-
}
2+
import { CloudDriverSupportOnly } from "../cloud-support-only";
733

744
export default function LocalMySQLNewBasePage() {
75-
return (
76-
<div className="container">
77-
<div className="my-8 flex">
78-
<Button variant="secondary" size="lg" href="/local" as="link">
79-
<ArrowLeft />
80-
Back
81-
</Button>
82-
</div>
83-
84-
<div className="mb-8 p-4 text-xl leading-8">
85-
Running MySQL from a browser is not possible.
86-
<br /> Please use the desktop app or our cloud services instead.
87-
</div>
88-
89-
<div className="mb-8 flex">
90-
<LocalMySQLCloudSection />
91-
92-
<div className="flex w-1/2 flex-col gap-4 p-4">
93-
<div>
94-
<h1 className="text-2xl font-bold">Desktop App</h1>
95-
<p>Connect locally with our desktop app</p>
96-
</div>
97-
98-
<Link
99-
href="https://github.com/outerbase/studio-desktop/releases"
100-
className="relative w-full"
101-
>
102-
<img
103-
src="/outerbase-banner.jpg"
104-
alt=""
105-
className="w-full rounded-lg"
106-
/>
107-
108-
<div className="bg-opacity-50 absolute right-0 bottom-0 left-0 flex cursor-pointer flex-col gap-2 rounded-lg bg-black p-4 text-white">
109-
<div className="text-2xl font-bold">Download the desktop app</div>
110-
<p className="text-base">
111-
Outerbase Studio Desktop is a lightweight Electron wrapper for
112-
the Outerbase Studio web version. It enables support for drivers
113-
that aren&apos;t feasible in a browser environment, such as
114-
MySQL and PostgreSQL.
115-
</p>
116-
</div>
117-
</Link>
118-
</div>
119-
</div>
120-
</div>
121-
);
5+
return <CloudDriverSupportOnly type="mysql" />;
1226
}

‎src/app/(outerbase)/local/new-base/postgres/page.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
"use client";
2+
import { CloudDriverSupportOnly } from "../cloud-support-only";
3+
4+
export default function LocalMySQLNewBasePage() {
5+
return <CloudDriverSupportOnly type="postgres" />;
6+
}

‎src/app/(outerbase)/session-provider.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export function OuterbaseSessionProvider({ children }: PropsWithChildren) {
5050
revalidateIfStale: false,
5151
revalidateOnFocus: false,
5252
revalidateOnReconnect: false,
53+
errorRetryCount: 0,
5354
}
5455
);
5556

‎src/app/(outerbase)/workspace-provider.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export function WorkspaceProvider({ children }: PropsWithChildren) {
5757
revalidateIfStale: false,
5858
revalidateOnFocus: false,
5959
revalidateOnReconnect: false,
60+
errorRetryCount: 0,
6061
}
6162
);
6263

0 commit comments

Comments
 (0)