Skip to content

Commit c32e88d

Browse files
milesrichardsonmilesrichardson
committed
Move embedded preview components to be shared with export panel and repo page
1 parent 140f865 commit c32e88d

11 files changed

Lines changed: 318 additions & 219 deletions

File tree

‎examples/nextjs-import-airbyte-github-export-seafowl/components/EmbeddedQuery/EmbeddedPreviews.module.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.embeddedPreviewHeading {
2+
margin-bottom: 0;
3+
}
4+
5+
.embeddedPreviewDescription {
6+
margin-bottom: 1rem;
7+
}
8+
9+
.note {
10+
font-size: small;
11+
/* color: red !important; */
12+
display: block;
13+
}

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
import styles from "./EmbeddedPreviews.module.css";
2+
import type {
3+
ExportTable,
4+
ExportQueryInput,
5+
ExportTableInput,
6+
} from "../../types";
7+
8+
import { EmbedPreviewTableOrQuery } from "../EmbeddedQuery/EmbeddedQuery";
9+
import { ComponentProps } from "react";
10+
11+
export const EmbeddedTablePreviewHeadingAndDescription = ({
12+
exportComplete,
13+
}: {
14+
exportComplete: boolean;
15+
}) => {
16+
return (
17+
<>
18+
{!exportComplete ? (
19+
<>
20+
<h2 className={styles.embeddedPreviewHeading}>Tables to Export</h2>
21+
<p className={styles.embeddedPreviewDescription}>
22+
These are the tables that we'll export from Splitgraph to Seafowl.
23+
You can query them in Splitgraph now, and then when the export is
24+
complete, you'll be able to query them in Seafowl too.
25+
</p>
26+
</>
27+
) : (
28+
<>
29+
<h2 className={styles.embeddedPreviewHeading}>Exported Tables</h2>
30+
<p className={styles.embeddedPreviewDescription}>
31+
We successfully exported the tables to Seafowl, so now you can query
32+
them in Seafowl too.
33+
</p>
34+
</>
35+
)}
36+
</>
37+
);
38+
};
39+
40+
export const EmbeddedTablePreviews = ({
41+
tablesToExport,
42+
splitgraphRepository,
43+
splitgraphNamespace,
44+
useLoadingOrCompleted,
45+
}: {
46+
tablesToExport: ExportTableInput[];
47+
splitgraphRepository: string;
48+
splitgraphNamespace: string;
49+
useLoadingOrCompleted: ComponentProps<
50+
typeof EmbedPreviewTableOrQuery
51+
>["useLoadingOrCompleted"];
52+
}) => {
53+
return (
54+
<>
55+
{tablesToExport.map((exportTable) => (
56+
<EmbedPreviewTableOrQuery
57+
key={`export-table-preview-${exportTable.table}`}
58+
exportInput={exportTable}
59+
importedRepository={{ splitgraphNamespace, splitgraphRepository }}
60+
makeQuery={({ splitgraphNamespace, splitgraphRepository, table }) =>
61+
`SELECT * FROM "${splitgraphNamespace}/${splitgraphRepository}"."${table}";`
62+
}
63+
useLoadingOrCompleted={useLoadingOrCompleted}
64+
makeMatchInputToExported={(exportTableInput) => (exportTable) => {
65+
return (
66+
exportTable.destinationSchema === exportTableInput.repository &&
67+
exportTable.destinationTable === exportTableInput.table
68+
);
69+
}}
70+
/>
71+
))}
72+
</>
73+
);
74+
};
75+
76+
export const EmbeddedQueryPreviewHeadingAndDescription = ({
77+
exportComplete,
78+
}: {
79+
exportComplete: boolean;
80+
}) => {
81+
return (
82+
<>
83+
{" "}
84+
{!exportComplete ? (
85+
<>
86+
<h2 className={styles.embeddedPreviewHeading}>Queries to Export</h2>
87+
<p className={styles.embeddedPreviewDescription}>
88+
We've prepared a few queries to export from Splitgraph to Seafowl,
89+
so that we can use them to render the charts that we want.
90+
Splitgraph will execute the query and insert its result into
91+
Seafowl. You can query them in Splitgraph now, and then when the
92+
export is complete, you'll be able to query them in Seafowl too.
93+
</p>
94+
</>
95+
) : (
96+
<>
97+
<h2 className={styles.embeddedPreviewHeading}>Exported Queries</h2>
98+
<p className={styles.embeddedPreviewDescription}>
99+
We successfully exported these queries from Splitgraph to Seafowl,
100+
so now you can query them in Seafowl too.{" "}
101+
<em className={styles.note}>
102+
Note: If some queries failed to export, it's probably because they
103+
had empty result sets (e.g. the table of issue reactions)
104+
</em>
105+
</p>
106+
</>
107+
)}
108+
</>
109+
);
110+
};
111+
112+
export const EmbeddedQueryPreviews = ({
113+
queriesToExport,
114+
splitgraphRepository,
115+
splitgraphNamespace,
116+
useLoadingOrCompleted,
117+
}: {
118+
queriesToExport: ExportQueryInput[];
119+
splitgraphRepository: string;
120+
splitgraphNamespace: string;
121+
useLoadingOrCompleted: ComponentProps<
122+
typeof EmbedPreviewTableOrQuery
123+
>["useLoadingOrCompleted"];
124+
}) => {
125+
return (
126+
<>
127+
{queriesToExport.map((exportQuery) => (
128+
<EmbedPreviewTableOrQuery
129+
key={`export-query-preview-${exportQuery.destinationTable}-${exportQuery.destinationSchema}`}
130+
exportInput={exportQuery}
131+
importedRepository={{ splitgraphNamespace, splitgraphRepository }}
132+
// This is the query we run on Splitgraph that we exported to Seafowl
133+
makeQuery={({ sourceQuery }) => sourceQuery}
134+
// But once it's exported, we can just select from its table in Seafowl (and
135+
// besides, the sourceQuery might not be compatible with Seafowl anyway)
136+
makeSeafowlQuery={({ destinationSchema, destinationTable }) =>
137+
`SELECT * FROM "${destinationSchema}"."${destinationTable}";`
138+
}
139+
useLoadingOrCompleted={useLoadingOrCompleted}
140+
makeMatchInputToExported={(exportQueryInput) =>
141+
(exportTable: ExportTable) => {
142+
return (
143+
exportTable.destinationSchema ===
144+
exportQueryInput.destinationSchema &&
145+
exportTable.destinationTable ===
146+
exportQueryInput.destinationTable
147+
);
148+
}}
149+
/>
150+
))}
151+
</>
152+
);
153+
};

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import EmbeddedQueryStyles from "./EmbeddedQuery.module.css";
2-
import type { ExportQueryInput, ExportTableInput } from "../../types";
2+
import type {
3+
ExportTable,
4+
ExportQueryInput,
5+
ExportTableInput,
6+
} from "../../types";
37
import { useState, useMemo } from "react";
48
import {
59
makeSplitgraphQueryHref,
@@ -9,24 +13,25 @@ import {
913
SplitgraphEmbeddedQuery,
1014
SeafowlEmbeddedQuery,
1115
} from "../RepositoryAnalytics/ImportedRepoMetadata";
12-
import { useStepperDebug } from "../ImportExportStepper/StepperContext";
13-
import { useFindMatchingExportTable } from "../ImportExportStepper/export-hooks";
14-
15-
import type { ExportTable } from "../ImportExportStepper/stepper-states";
1616

1717
import { LoadingBar } from "../LoadingBar";
1818

1919
import { TabButton } from "./TabButton";
20+
import { useDebug } from "../../lib/util";
2021

21-
export const ExportEmbedPreviewTableOrQuery = <
22+
export const EmbedPreviewTableOrQuery = <
2223
ExportInputShape extends ExportQueryInput | ExportTableInput
2324
>({
2425
importedRepository,
2526
exportInput,
2627
makeQuery,
2728
makeSeafowlQuery,
2829
makeMatchInputToExported,
30+
useLoadingOrCompleted,
2931
}: {
32+
useLoadingOrCompleted?: (
33+
isMatch?: (candidateTable: ExportTable) => boolean
34+
) => { loading: boolean; completed: boolean };
3035
exportInput: ExportInputShape;
3136
makeQuery: (
3237
tableOrQueryInput: ExportInputShape & {
@@ -48,7 +53,7 @@ export const ExportEmbedPreviewTableOrQuery = <
4853
splitgraphRepository: string;
4954
};
5055
}) => {
51-
const debug = useStepperDebug();
56+
const debug = useDebug();
5257

5358
const embedProps = {
5459
importedRepository,
@@ -59,7 +64,7 @@ export const ExportEmbedPreviewTableOrQuery = <
5964
makeQuery: () => makeQuery({ ...exportInput, ...importedRepository }),
6065
};
6166

62-
const { loading, completed } = useFindMatchingExportTable(
67+
const { loading, completed } = useLoadingOrCompleted(
6368
makeMatchInputToExported(exportInput)
6469
);
6570

‎examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportPanel.module.css‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,8 @@
11
.exportPanel {
2-
/* Styles for the export panel container */
32
background: inherit;
43
margin-top: 2rem;
54
}
65

7-
.querySeafowlButton {
8-
/* Styles for the query Seafowl button */
9-
background: inherit;
10-
}
11-
12-
.viewReportButton {
13-
/* Styles for the view report button */
14-
background: inherit;
15-
}
16-
176
.startExportButton {
187
color: var(--background);
198
background-color: var(--secondary);
@@ -43,17 +32,3 @@
4332
.exportInfo p {
4433
margin-bottom: 1rem;
4534
}
46-
47-
.exportPreviewHeading {
48-
margin-bottom: 0;
49-
}
50-
51-
.exportPreviewDescription {
52-
margin-bottom: 1rem;
53-
}
54-
55-
.exportNote {
56-
font-size: small;
57-
/* color: red !important; */
58-
display: block;
59-
}

0 commit comments

Comments
 (0)