Skip to content

Commit ad51097

Browse files
milesrichardsonmilesrichardson
committed
Refactor
1 parent 42e26c8 commit ad51097

8 files changed

Lines changed: 325 additions & 297 deletions

File tree

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/EmbeddedQuery.module.css renamed to examples/nextjs-import-airbyte-github-export-seafowl/components/EmbeddedQuery/EmbeddedQuery.module.css

File renamed without changes.

‎examples/nextjs-import-airbyte-github-export-seafowl/components/EmbeddedQuery/EmbeddedQuery.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import EmbeddedQueryStyles from "./EmbeddedQuery.module.css";
2+
import type { ExportQueryInput, ExportTableInput } from "../../types";
3+
import { useState, useMemo } from "react";
4+
import {
5+
makeSplitgraphQueryHref,
6+
makeSeafowlQueryHref,
7+
} from "../RepositoryAnalytics/ImportedRepoMetadata";
8+
import {
9+
SplitgraphEmbeddedQuery,
10+
SeafowlEmbeddedQuery,
11+
} from "../RepositoryAnalytics/ImportedRepoMetadata";
12+
import {
13+
useStepperDebug,
14+
useFindMatchingExportTable,
15+
} from "../ImportExportStepper/StepperContext";
16+
17+
import type { ExportTable } from "../ImportExportStepper/stepper-states";
18+
19+
import { LoadingBar } from "../LoadingBar";
20+
21+
import { TabButton } from "./TabButton";
22+
23+
export const ExportEmbedPreviewTableOrQuery = <
24+
ExportInputShape extends ExportQueryInput | ExportTableInput
25+
>({
26+
importedRepository,
27+
exportInput,
28+
makeQuery,
29+
makeMatchInputToExported,
30+
}: {
31+
exportInput: ExportInputShape;
32+
makeQuery: (
33+
tableOrQueryInput: ExportInputShape & {
34+
splitgraphNamespace: string;
35+
splitgraphRepository: string;
36+
}
37+
) => string;
38+
makeMatchInputToExported: (
39+
tableOrQueryInput: ExportInputShape
40+
) => (exported: ExportTable) => boolean;
41+
importedRepository: {
42+
splitgraphNamespace: string;
43+
splitgraphRepository: string;
44+
};
45+
}) => {
46+
const debug = useStepperDebug();
47+
48+
const embedProps = {
49+
importedRepository,
50+
tableName:
51+
"destinationTable" in exportInput
52+
? exportInput.destinationTable
53+
: exportInput.table,
54+
makeQuery: () => makeQuery({ ...exportInput, ...importedRepository }),
55+
};
56+
57+
const { loading, completed } = useFindMatchingExportTable(
58+
makeMatchInputToExported(exportInput)
59+
);
60+
61+
const heading =
62+
"table" in exportInput
63+
? exportInput.table
64+
: `${exportInput.destinationSchema}.${exportInput.destinationTable}`;
65+
66+
const [selectedTab, setSelectedTab] = useState<"splitgraph" | "seafowl">(
67+
"splitgraph"
68+
);
69+
70+
const linkToConsole = useMemo(() => {
71+
switch (selectedTab) {
72+
case "splitgraph":
73+
return {
74+
anchor: "Open in Console",
75+
href: makeSplitgraphQueryHref(
76+
makeQuery({ ...exportInput, ...importedRepository })
77+
),
78+
};
79+
80+
case "seafowl":
81+
return {
82+
anchor: "Open in Console",
83+
href: makeSeafowlQueryHref(
84+
makeQuery({ ...exportInput, ...importedRepository })
85+
),
86+
};
87+
}
88+
}, [selectedTab]);
89+
90+
return (
91+
<div className={EmbeddedQueryStyles.embeddedQuery}>
92+
<h4 className={EmbeddedQueryStyles.heading}>
93+
<code>{heading}</code>
94+
</h4>
95+
<div className={EmbeddedQueryStyles.topBar}>
96+
<div className={EmbeddedQueryStyles.consoleFlavorButtonsAndLoadingBar}>
97+
<TabButton
98+
onClick={() => setSelectedTab("splitgraph")}
99+
active={selectedTab === "splitgraph"}
100+
style={{ marginRight: "1rem" }}
101+
title={
102+
selectedTab === "splitgraph"
103+
? ""
104+
: "Query the imported data in Splitgraph"
105+
}
106+
>
107+
data.splitgraph.com
108+
</TabButton>
109+
<TabButton
110+
onClick={() => setSelectedTab("seafowl")}
111+
active={selectedTab === "seafowl"}
112+
disabled={!completed}
113+
style={{ marginRight: "1rem" }}
114+
title={
115+
selectedTab === "seafowl"
116+
? ""
117+
: completed
118+
? "Query the exported data in Seafowl"
119+
: "Once you export the data to Seafowl, you can send the same query to Seafowl"
120+
}
121+
>
122+
demo.seafowl.cloud
123+
</TabButton>
124+
{loading && (
125+
<LoadingBar
126+
formatTimeElapsed={(seconds) =>
127+
`Export to Seafowl: Started ${seconds} seconds ago...`
128+
}
129+
/>
130+
)}
131+
</div>
132+
<div className={EmbeddedQueryStyles.embedControls}>
133+
<a
134+
href={linkToConsole.href}
135+
target="_blank"
136+
rel="noopener"
137+
className={EmbeddedQueryStyles.openInConsoleLink}
138+
>
139+
<IconOpenInConsole size={14} />
140+
{linkToConsole.anchor}
141+
</a>
142+
</div>
143+
</div>
144+
145+
{debug && <pre>{JSON.stringify({ completed, loading }, null, 2)}</pre>}
146+
{
147+
<div
148+
style={{
149+
visibility: selectedTab === "splitgraph" ? "visible" : "hidden",
150+
display: selectedTab === "seafowl" ? "none" : "block",
151+
}}
152+
>
153+
<SplitgraphEmbeddedQuery {...embedProps} />
154+
</div>
155+
}
156+
{completed && (
157+
<div
158+
style={{
159+
visibility: selectedTab === "seafowl" ? "visible" : "hidden",
160+
display: selectedTab === "splitgraph" ? "none" : "block",
161+
}}
162+
>
163+
<SeafowlEmbeddedQuery {...embedProps} />
164+
</div>
165+
)}
166+
</div>
167+
);
168+
};
169+
170+
export const IconOpenInConsole = ({ size }: { size: number | string }) => (
171+
<svg
172+
width={size}
173+
height={size}
174+
viewBox="0 0 20 20"
175+
fill="none"
176+
xmlns="http://www.w3.org/2000/svg"
177+
>
178+
<path
179+
d="M10.625 2.5H3.75C2.36929 2.5 1.25 3.61929 1.25 5V15C1.25 16.3807 2.36929 17.5 3.75 17.5H16.25C17.6307 17.5 18.75 16.3807 18.75 15V10.625"
180+
stroke="currentColor"
181+
strokeWidth="1.25"
182+
/>
183+
<path
184+
d="M18.7501 8.2291L18.7501 2.49946M13.213 2.49961L18.7501 2.49946M18.7501 2.49946L12.5712 8.67797"
185+
stroke="currentColor"
186+
strokeWidth="1.25"
187+
/>
188+
<path
189+
d="M5 6.875L8.125 10L5 13.125"
190+
stroke="currentColor"
191+
strokeWidth="1.25"
192+
/>
193+
<path d="M10.625 13.125H15" stroke="currentColor" strokeWidth="1.25" />
194+
</svg>
195+
);

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/TabButton.module.css renamed to examples/nextjs-import-airbyte-github-export-seafowl/components/EmbeddedQuery/TabButton.module.css

File renamed without changes.

‎examples/nextjs-import-airbyte-github-export-seafowl/components/EmbeddedQuery/TabButton.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { ButtonHTMLAttributes } from "react";
2+
3+
import TabButtonStyle from "./TabButton.module.css";
4+
5+
interface TabButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
6+
active: boolean;
7+
onClick: () => void;
8+
}
9+
10+
export const TabButton = ({
11+
active,
12+
onClick,
13+
disabled: alwaysDisabled,
14+
children,
15+
...rest
16+
}: React.PropsWithChildren<TabButtonProps>) => {
17+
const className = [
18+
TabButtonStyle["tab-button"],
19+
...(active
20+
? [TabButtonStyle["tab-button-active"]]
21+
: [TabButtonStyle["tab-button-inactive"]]),
22+
...(alwaysDisabled ? [TabButtonStyle["tab-button-disabled"]] : []),
23+
].join(" ");
24+
25+
return (
26+
<button
27+
onClick={onClick}
28+
disabled={active || alwaysDisabled}
29+
className={className}
30+
{...rest}
31+
>
32+
{children}
33+
</button>
34+
);
35+
};

0 commit comments

Comments
 (0)