When embedding Seafowl query of exported queries, select from the destinationTable

The point of exporting a query from Splitgraph to Seafowl is that once
the result is in Seafowl, we can just select from the destinationTable
and forget about the original query (which might not even be compatible
with Seafowl). So make sure that when we're embedding an exported query,
we only render the query in the embedded Splitgraph query editor, and
for the embedded Seafowl Console, we render a query that simply selects
from the destinationTable.

Author: milesrichardson

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

@@ -24,6 +24,7 @@ export const ExportEmbedPreviewTableOrQuery = <
   importedRepository,
   exportInput,
   makeQuery,
+  makeSeafowlQuery,
   makeMatchInputToExported,
 }: {
   exportInput: ExportInputShape;
@@ -33,6 +34,12 @@ export const ExportEmbedPreviewTableOrQuery = <
       splitgraphRepository: string;
     }
   ) => string;
+  makeSeafowlQuery?: (
+    tableOrQueryInput: ExportInputShape & {
+      splitgraphNamespace: string;
+      splitgraphRepository: string;
+    }
+  ) => string;
   makeMatchInputToExported: (
     tableOrQueryInput: ExportInputShape
   ) => (exported: ExportTable) => boolean;
@@ -79,7 +86,10 @@ export const ExportEmbedPreviewTableOrQuery = <
         return {
           anchor: "Open in Console",
           href: makeSeafowlQueryHref(
-            makeQuery({ ...exportInput, ...importedRepository })
+            (makeSeafowlQuery ?? makeQuery)({
+              ...exportInput,
+              ...importedRepository,
+            })
           ),
         };
     }
@@ -158,7 +168,15 @@ export const ExportEmbedPreviewTableOrQuery = <
             display: selectedTab === "splitgraph" ? "none" : "block",
           }}
         >
-          <SeafowlEmbeddedQuery {...embedProps} />
+          <SeafowlEmbeddedQuery
+            {...embedProps}
+            makeQuery={
+              makeSeafowlQuery
+                ? () =>
+                    makeSeafowlQuery({ ...exportInput, ...importedRepository })
+                : embedProps.makeQuery
+            }
+          />
         </div>
       )}
     </div>

examples/nextjs-import-airbyte-github-export-seafowl/components/ImportExportStepper/ExportPanel.tsx

@@ -323,7 +323,13 @@ const ExportPreview = ({
             key={`export-query-preview-${exportQuery.destinationTable}-${exportQuery.destinationSchema}`}
             exportInput={exportQuery}
             importedRepository={{ splitgraphNamespace, splitgraphRepository }}
+            // This is the query we run on Splitgraph that we exported to Seafowl
             makeQuery={({ sourceQuery }) => sourceQuery}
+            // But once it's exported, we can just select from its table in Seafowl (and
+            // besides, the sourceQuery might not be compatible with Seafowl anyway)
+            makeSeafowlQuery={({ destinationSchema, destinationTable }) =>
+              `SELECT * FROM "${destinationSchema}"."${destinationTable}";`
+            }
             makeMatchInputToExported={(exportQueryInput) =>
               (exportTable: ExportTable) => {
                 return (