@malloy-publisher/sdk 0.0.34 → 0.0.36

package/src/components/Project/ConnectionExplorer.tsx

@@ -12,36 +12,33 @@ import {
    DialogContent,
    DialogTitle,
    IconButton,
+   Switch,
+   FormControlLabel,
    Table,
    TableBody,
    TableCell,
    TableContainer,
    TableHead,
    TableRow,
-   Switch,
-   FormControlLabel,
 } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
 import { ConnectionsApi } from "../../client/api";
 import { Configuration } from "../../client/configuration";
-import TablesInSchema from "./TablesInSchema";
+import { useProject } from "./Project";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const connectionsApi = new ConnectionsApi(new Configuration());
 const queryClient = new QueryClient();
 
 interface ConnectionExplorerProps {
-   server?: string;
-   projectName: string;
    connectionName: string;
-   accessToken?: string;
 }
 
 export default function ConnectionExplorer({
-   server,
-   projectName,
    connectionName,
-   accessToken,
 }: ConnectionExplorerProps) {
+   const { server, projectName, accessToken } = useProject();
+
    const [selectedTable, setSelectedTable] = React.useState<string | undefined>(
       undefined,
    );
@@ -61,6 +58,7 @@ export default function ConnectionExplorer({
                },
             }),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -100,9 +98,10 @@ export default function ConnectionExplorer({
                      </Typography>
                   )}
                   {isError && (
-                     <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                        {`${projectName} > ${connectionName} - ${error.message}`}
-                     </Typography>
+                     <ApiErrorDisplay
+                        error={error}
+                        context={`${projectName} > ${connectionName}`}
+                     />
                   )}
                   {isSuccess && data.data.length === 0 && (
                      <Typography variant="body2">No Schemas</Typography>
@@ -142,11 +141,8 @@ export default function ConnectionExplorer({
             {selectedSchema && (
                <Paper sx={{ p: 2 }}>
                   <TablesInSchema
-                     server={server}
-                     projectName={projectName}
                      connectionName={connectionName}
                      schemaName={selectedSchema}
-                     accessToken={accessToken}
                      onTableClick={(tableName) => {
                         setSelectedTable(tableName);
                      }}
@@ -156,12 +152,9 @@ export default function ConnectionExplorer({
          </Grid>
          {selectedTable && (
             <TableViewer
-               server={server}
-               projectName={projectName}
                connectionName={connectionName}
                schemaName={selectedSchema}
                tableName={selectedTable}
-               accessToken={accessToken}
                onClose={() => setSelectedTable(undefined)}
             />
          )}
@@ -170,23 +163,20 @@ export default function ConnectionExplorer({
 }
 
 type TableViewerProps = {
-   server: string;
-   projectName: string;
    connectionName: string;
    schemaName: string;
    tableName: string;
-   accessToken: string;
    onClose: () => void;
 };
+
 function TableViewer({
-   server,
-   projectName,
    connectionName,
    schemaName,
    tableName,
-   accessToken,
    onClose,
 }: TableViewerProps) {
+   const { server, projectName, accessToken } = useProject();
+
    const { data, isSuccess, isError, error, isLoading } = useQuery(
       {
          queryKey: [
@@ -212,15 +202,17 @@ function TableViewer({
                },
             ),
          retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
+
    if (isSuccess && data) {
       console.log(data);
    }
+
    return (
-      // TODO(jjs) - Add a min height to the dialog, so when it loads the UI is not so jarring.
-      <Dialog open={true} onClose={onclose} maxWidth="sm" fullWidth>
+      <Dialog open={true} onClose={onClose} maxWidth="sm" fullWidth>
          <DialogTitle>
             Table: {schemaName}.{tableName}
             <Typography
@@ -228,7 +220,9 @@ function TableViewer({
                variant="body2"
                fontFamily="monospace"
                component="span"
-            ></Typography>
+            >
+               {tableName}
+            </Typography>
             <IconButton
                aria-label="close"
                onClick={onClose}
@@ -248,32 +242,117 @@ function TableViewer({
             </IconButton>
          </DialogTitle>
          <DialogContent>
-            <TableContainer>
-               <Table
-                  size="small"
-                  sx={{ "& .MuiTableCell-root": { padding: "10px" } }}
-               >
-                  <TableHead>
-                     <TableRow>
-                        <TableCell>NAME</TableCell>
-                        <TableCell>TYPE</TableCell>
-                     </TableRow>
-                  </TableHead>
-                  <TableBody>
-                     {isSuccess &&
-                        data &&
-                        data.data.columns.map((row) => (
-                           <TableRow key={row.name}>
-                              <TableCell>{row.name}</TableCell>
-                              <TableCell>{row.type}</TableCell>
-                           </TableRow>
-                        ))}
-                     {isLoading && <div>Loading...</div>}
-                     {isError && <div>Error: {error.message}</div>}
-                  </TableBody>
-               </Table>
-            </TableContainer>
+            {isLoading && (
+               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                  Fetching Table Details...
+               </Typography>
+            )}
+            {isError && (
+               <ApiErrorDisplay
+                  error={error}
+                  context={`${projectName} > ${connectionName} > ${schemaName}.${tableName}`}
+               />
+            )}
+            {isSuccess && data && (
+               <TableContainer>
+                  <Table
+                     size="small"
+                     sx={{ "& .MuiTableCell-root": { padding: "10px" } }}
+                  >
+                     <TableHead>
+                        <TableRow>
+                           <TableCell>NAME</TableCell>
+                           <TableCell>TYPE</TableCell>
+                        </TableRow>
+                     </TableHead>
+                     <TableBody>
+                        {data.data.columns?.map(
+                           (column: { name: string; type: string }) => (
+                              <TableRow key={column.name}>
+                                 <TableCell>{column.name}</TableCell>
+                                 <TableCell>{column.type}</TableCell>
+                              </TableRow>
+                           ),
+                        )}
+                     </TableBody>
+                  </Table>
+               </TableContainer>
+            )}
          </DialogContent>
       </Dialog>
    );
 }
+
+interface TablesInSchemaProps {
+   connectionName: string;
+   schemaName: string;
+   onTableClick: (tableName: string) => void;
+}
+
+function TablesInSchema({
+   connectionName,
+   schemaName,
+   onTableClick,
+}: TablesInSchemaProps) {
+   const { server, projectName, accessToken } = useProject();
+
+   const { data, isSuccess, isError, error, isLoading } = useQuery(
+      {
+         queryKey: [
+            "tablesInSchema",
+            server,
+            projectName,
+            connectionName,
+            schemaName,
+         ],
+         queryFn: () =>
+            connectionsApi.listTables(projectName, connectionName, schemaName, {
+               baseURL: server,
+               withCredentials: !accessToken,
+               headers: {
+                  Authorization: accessToken && `Bearer ${accessToken}`,
+               },
+            }),
+         retry: false,
+         throwOnError: false,
+      },
+      queryClient,
+   );
+
+   return (
+      <>
+         <Typography variant="overline" fontWeight="bold">
+            Tables in {schemaName}
+         </Typography>
+         <Divider />
+         <Box sx={{ mt: "10px", maxHeight: "600px", overflowY: "auto" }}>
+            {isLoading && (
+               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
+                  Fetching Tables...
+               </Typography>
+            )}
+            {isError && (
+               <ApiErrorDisplay
+                  error={error}
+                  context={`${projectName} > ${connectionName} > ${schemaName}`}
+               />
+            )}
+            {isSuccess && data.data.length === 0 && (
+               <Typography variant="body2">No Tables</Typography>
+            )}
+            {isSuccess && data.data.length > 0 && (
+               <List dense disablePadding>
+                  {data.data.map((tableName: string) => (
+                     <ListItemButton
+                        key={tableName}
+                        onClick={() => onTableClick(tableName)}
+                     >
+                        <ListItemText primary={tableName} />
+                     </ListItemButton>
+                  ))}
+               </List>
+            )}
+         </Box>
+      </>
+   );
+}

package/src/components/Project/Packages.tsx

@@ -2,23 +2,19 @@ import { Box, Divider, Grid, Typography } from "@mui/material";
 import { Configuration, PackagesApi } from "../../client";
 import { StyledCard, StyledCardContent, StyledCardMedia } from "../styles";
 import { QueryClient, useQuery } from "@tanstack/react-query";
+import { useProject } from "./Project";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const packagesApi = new PackagesApi(new Configuration());
 const queryClient = new QueryClient();
 
-interface ProjectProps {
-   server?: string;
-   projectName: string;
+interface PackagesProps {
    navigate: (to: string, event?: React.MouseEvent) => void;
-   accessToken?: string;
 }
 
-export default function Project({
-   server,
-   projectName,
-   navigate,
-   accessToken,
-}: ProjectProps) {
+export default function Packages({ navigate }: PackagesProps) {
+   const { server, projectName, accessToken } = useProject();
+
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: ["packages", server, projectName],
@@ -30,6 +26,8 @@ export default function Project({
                   Authorization: accessToken && `Bearer ${accessToken}`,
                },
             }),
+         retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -100,9 +98,10 @@ export default function Project({
             </StyledCard>
          )}
          {isError && (
-            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-               {error.message}
-            </Typography>
+            <ApiErrorDisplay
+               error={error}
+               context={`${projectName} > Packages`}
+            />
          )}
       </>
    );

package/src/components/Project/Project.tsx

@@ -1,20 +1,48 @@
 import { Grid } from "@mui/material";
 import About from "./About";
 import Packages from "./Packages";
+import { createContext, useContext, ReactNode } from "react";
 
-interface ProjectProps {
+export interface ProjectContextProps {
    server?: string;
    projectName: string;
-   navigate: (to: string, event?: React.MouseEvent) => void;
    accessToken?: string;
 }
 
-export default function Project({
+const ProjectContext = createContext<ProjectContextProps | undefined>(
+   undefined,
+);
+
+interface ProjectProviderProps extends ProjectContextProps {
+   children: ReactNode;
+}
+
+export const ProjectProvider = ({
    server,
    projectName,
-   navigate,
    accessToken,
-}: ProjectProps) {
+   children,
+}: ProjectProviderProps) => {
+   return (
+      <ProjectContext.Provider value={{ server, projectName, accessToken }}>
+         {children}
+      </ProjectContext.Provider>
+   );
+};
+
+export function useProject() {
+   const context = useContext(ProjectContext);
+   if (!context) {
+      throw new Error("useProject must be used within a ProjectProvider");
+   }
+   return context;
+}
+
+interface ProjectProps {
+   navigate: (to: string, event?: React.MouseEvent) => void;
+}
+
+export default function Project({ navigate }: ProjectProps) {
    return (
       <Grid
          container
@@ -23,19 +51,10 @@ export default function Project({
          sx={{ mb: (theme) => theme.spacing(2) }}
       >
          <Grid size={{ xs: 12, md: 12 }}>
-            <Packages
-               server={server}
-               projectName={projectName}
-               navigate={navigate}
-               accessToken={accessToken}
-            />
+            <Packages navigate={navigate} />
          </Grid>
          <Grid size={{ xs: 12, md: 12 }}>
-            <About
-               server={server}
-               projectName={projectName}
-               accessToken={accessToken}
-            />
+            <About />
          </Grid>
       </Grid>
    );

package/src/components/Project/index.ts

@@ -1 +1 @@
-export { default as Project } from "./Project";
+export { default as Project, ProjectProvider, useProject } from "./Project";

package/src/components/QueryResult/QueryResult.tsx

@@ -3,6 +3,8 @@ import { Configuration, QueryresultsApi } from "../../client";
 import axios from "axios";
 import { Typography } from "@mui/material";
 import { QueryClient, useQuery } from "@tanstack/react-query";
+import { usePackage } from "../Package/PackageProvider";
+import { ApiErrorDisplay } from "../ApiErrorDisplay";
 
 const RenderedResult = lazy(() => import("../RenderedResult/RenderedResult"));
 
@@ -11,28 +13,21 @@ const queryResultsApi = new QueryresultsApi(new Configuration());
 const queryClient = new QueryClient();
 
 interface QueryResultProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
    modelPath: string;
-   versionId?: string;
    query?: string;
    sourceName?: string;
    queryName?: string;
-   accessToken?: string;
 }
 
 export default function QueryResult({
-   server,
-   projectName,
-   packageName,
    modelPath,
-   versionId,
    query,
    sourceName,
    queryName,
-   accessToken,
 }: QueryResultProps) {
+   const { server, projectName, packageName, versionId, accessToken } =
+      usePackage();
+
    const { data, isSuccess, isError, error } = useQuery(
       {
          queryKey: [
@@ -45,7 +40,6 @@ export default function QueryResult({
             query,
             sourceName,
             queryName,
-            accessToken,
          ],
          queryFn: () =>
             queryResultsApi.executeQuery(
@@ -64,6 +58,8 @@ export default function QueryResult({
                   },
                },
             ),
+         retry: false,
+         throwOnError: false,
       },
       queryClient,
    );
@@ -76,14 +72,15 @@ export default function QueryResult({
             </Typography>
          )}
          {isSuccess && (
-            <Suspense fallback="Loading malloy...">
+            <Suspense fallback={<div>Loading...</div>}>
                <RenderedResult result={data.data.result} />
             </Suspense>
          )}
          {isError && (
-            <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-               {`${projectName} > ${packageName} > ${modelPath} > ${versionId} - ${error.message}`}
-            </Typography>
+            <ApiErrorDisplay
+               context={`${projectName} > ${packageName} > ${modelPath}`}
+               error={error}
+            />
          )}
       </>
    );

package/src/components/RenderedResult/ResultContainer.tsx

@@ -122,7 +122,6 @@ export default function ResultContainer({
                         result={result}
                         height={renderedHeight}
                         isFillElement={(isFill) => {
-                           console.log("isFill", isFill);
                            setIsFillElement(isFill);
                         }}
                         onSizeChange={handleSizeChange}

package/dist/components/Package/PublisherPackageProvider.d.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-export interface PublisherPackageContextProps {
-    server?: string;
-    projectName: string;
-    packageName: string;
-    versionId?: string;
-    accessToken?: string;
-}
-interface PublisherPackageProviderProps extends PublisherPackageContextProps {
-    children: ReactNode;
-}
-export declare const PublisherPackageProvider: ({ server, projectName, packageName, versionId, accessToken, children, }: PublisherPackageProviderProps) => import("react/jsx-runtime").JSX.Element;
-export declare function usePublisherPackage(): PublisherPackageContextProps;
-export {};

package/dist/components/Project/TablesInSchema.d.ts

@@ -1,10 +0,0 @@
-interface TablesInSchemaProps {
-    server?: string;
-    projectName: string;
-    connectionName: string;
-    schemaName: string;
-    accessToken: string;
-    onTableClick?: (tableName: string) => void;
-}
-export default function TablesInSchema({ server, projectName, connectionName, schemaName, accessToken, onTableClick, }: TablesInSchemaProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/Package/PublisherPackageProvider.tsx

@@ -1,48 +0,0 @@
-import React, { createContext, useContext, ReactNode } from "react";
-
-export interface PublisherPackageContextProps {
-   server?: string;
-   projectName: string;
-   packageName: string;
-   versionId?: string;
-   accessToken?: string;
-}
-
-const PublisherPackageContext = createContext<
-   PublisherPackageContextProps | undefined
->(undefined);
-
-interface PublisherPackageProviderProps extends PublisherPackageContextProps {
-   children: ReactNode;
-}
-
-// Provider for the Publisher Package context.
-// This context is used to pass the package information to the components
-// that need it.
-// The package information is passed to the components via the usePublisherPackage hook.
-export const PublisherPackageProvider = ({
-   server,
-   projectName,
-   packageName,
-   versionId,
-   accessToken,
-   children,
-}: PublisherPackageProviderProps) => {
-   return (
-      <PublisherPackageContext.Provider
-         value={{ server, projectName, packageName, versionId, accessToken }}
-      >
-         {children}
-      </PublisherPackageContext.Provider>
-   );
-};
-
-export function usePublisherPackage() {
-   const context = useContext(PublisherPackageContext);
-   if (!context) {
-      throw new Error(
-         "usePublisherPackage must be used within a PublisherPackageProvider",
-      );
-   }
-   return context;
-}

package/src/components/Project/TablesInSchema.tsx

@@ -1,84 +0,0 @@
-import React from "react";
-import {
-   Box,
-   List,
-   ListItemButton,
-   ListItemText,
-   Typography,
-   Divider,
-} from "@mui/material";
-import { QueryClient, useQuery } from "@tanstack/react-query";
-import { Configuration, ConnectionsApi } from "../../client";
-
-const connectionsApi = new ConnectionsApi(new Configuration());
-const queryClient = new QueryClient();
-
-interface TablesInSchemaProps {
-   server?: string;
-   projectName: string;
-   connectionName: string;
-   schemaName: string;
-   accessToken: string;
-   onTableClick?: (tableName: string) => void;
-}
-
-export default function TablesInSchema({
-   server,
-   projectName,
-   connectionName,
-   schemaName,
-   accessToken,
-   onTableClick,
-}: TablesInSchemaProps) {
-   const { data, isSuccess, isError, error, isLoading } = useQuery(
-      {
-         queryKey: ["tables", server, projectName, connectionName, schemaName],
-         queryFn: () =>
-            connectionsApi.listTables(projectName, connectionName, schemaName, {
-               baseURL: server,
-               withCredentials: !accessToken,
-               headers: {
-                  Authorization: accessToken && `Bearer ${accessToken}`,
-               },
-            }),
-         retry: false,
-      },
-      queryClient,
-   );
-
-   return (
-      <Box sx={{ width: "100%" }}>
-         <Typography variant="overline" fontWeight="bold">
-            Tables in {schemaName}
-         </Typography>
-         <Divider />
-         <Box sx={{ mt: "10px", maxHeight: "200px", overflowY: "auto" }}>
-            {isLoading && (
-               <Typography variant="body2" sx={{ p: "20px", m: "auto" }}>
-                  Fetching Tables...
-               </Typography>
-            )}
-            {isError && (
-               <Typography variant="body2" sx={{ p: "10px", m: "auto" }}>
-                  {`${projectName} > ${connectionName} > ${schemaName} - ${error.message}`}
-               </Typography>
-            )}
-            {isSuccess && data.data.length === 0 && (
-               <Typography variant="body2">No Tables</Typography>
-            )}
-            {isSuccess && data.data.length > 0 && (
-               <List dense disablePadding>
-                  {data.data.map((table: string) => (
-                     <ListItemButton
-                        key={table}
-                        onClick={() => onTableClick && onTableClick(table)}
-                     >
-                        <ListItemText primary={table} />
-                     </ListItemButton>
-                  ))}
-               </List>
-            )}
-         </Box>
-      </Box>
-   );
-}